Skip to content

Commit 0206c76

Browse files
izadoesdevizadoesdev
committed
undo landing
1 parent 4e98024 commit 0206c76

File tree

1 file changed

+31
-34
lines changed

1 file changed

+31
-34
lines changed

‎apps/docs/components/landing/hero.tsx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import Link from "next/link";
4-
import { ArrowRight, MonitorIcon, ArrowsOutSimpleIcon, InfoIcon } from "@phosphor-icons/react";
4+
import { ArrowRight, Maximize2 } from "lucide-react";
55
import { useState, useRef } from "react";
66

77
export default function Hero() {
@@ -66,51 +66,35 @@ export default function Hero() {
6666
{/* Demo Section */}
6767
<div className="w-full max-w-[90vw] mx-auto">
6868
<div className="relative">
69-
<div className="absolute top-3 left-3 z-20 flex items-center gap-2 bg-primary/90 text-primary-foreground rounded px-3 py-1 text-xs font-semibold shadow-lg">
70-
<MonitorIcon className="h-4" weight="duotone" />
71-
Demo
72-
</div>
73-
74-
<div className="absolute -inset-4 bg-gradient-to-r from-primary/20 via-primary/10 to-primary/20 rounded blur-xl opacity-30" />
75-
<button
76-
type="button"
77-
className="relative bg-background/80 backdrop-blur-sm border border-border rounded p-2 shadow-2xl group cursor-pointer w-full text-left"
69+
<div className="absolute -inset-4 bg-gradient-to-r from-primary/20 via-primary/10 to-primary/20 rounded-xl blur-xl opacity-30" />
70+
<div
71+
className="relative bg-background/80 backdrop-blur-sm border border-border rounded-lg p-2 shadow-2xl group cursor-pointer"
7872
onMouseEnter={() => setIsHovered(true)}
7973
onMouseLeave={() => setIsHovered(false)}
8074
onClick={handleFullscreen}
75+
onKeyDown={(e) => {
76+
if (e.key === 'Enter' || e.key === ' ') {
77+
handleFullscreen();
78+
}
79+
}}
8180
aria-label="View demo dashboard fullscreen"
82-
style={{ padding: 0 }}
8381
>
8482
<iframe
8583
ref={iframeRef}
8684
src="https://app.databuddy.cc/demo/OXmNQsViBT-FOS_wZCTHc"
87-
className="w-full h-[500px] sm:h-[600px] lg:h-[700px] rounded border-0 pointer-events-none"
85+
className="w-full h-[500px] sm:h-[600px] lg:h-[700px] rounded border-0"
8886
title="Databuddy Demo Dashboard"
8987
loading="lazy"
9088
allowFullScreen
9189
/>
9290

93-
<div
94-
className={`absolute inset-2 bg-background/60 dark:bg-background/70 rounded flex items-center justify-center transition-opacity duration-300 z-10 ${isHovered ? 'opacity-100' : 'opacity-80'}`}
95-
style={{ pointerEvents: 'none' }}
96-
>
97-
<div className="flex flex-col items-center gap-2">
98-
<div className="bg-card/90 backdrop-blur-sm rounded px-4 py-2 flex items-center gap-2 text-base font-semibold shadow-lg border border-border">
99-
<ArrowsOutSimpleIcon className="h-6 text-foreground" />
100-
<span className="text-foreground">Click to view fullscreen</span>
101-
</div>
102-
<div className="flex items-center gap-1 mt-1 text-xs text-muted-foreground">
103-
<InfoIcon className="h-3" weight="duotone" />
104-
Live interactive demo
105-
</div>
91+
{/* Fullscreen Button & Overlay */}
92+
<div className={`absolute inset-2 bg-background/20 dark:bg-background/40 rounded transition-opacity duration-300 flex items-center justify-center ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
93+
<div className="bg-card/90 backdrop-blur-sm rounded-lg px-4 py-2 flex items-center gap-2 text-sm font-medium shadow-lg border border-border hover:bg-card transition-colors">
94+
<Maximize2 className="h-4 w-4 text-foreground" />
95+
<span className="text-foreground">Click to view fullscreen</span>
10696
</div>
10797
</div>
108-
</button>
109-
</div>
110-
<div className="flex justify-center mt-2">
111-
<div className="inline-flex items-center gap-2 bg-muted/70 rounded px-3 py-1 text-xs text-muted-foreground">
112-
<MonitorIcon className="h-3" weight="duotone" />
113-
This is a live demo. Click above to interact or go fullscreen.
11498
</div>
11599
</div>
116100
</div>
@@ -148,19 +132,32 @@ export default function Hero() {
148132

149133
{/* Trust indicators */}
150134
<div className="relative z-10 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
151-
<div className="container py-8">
135+
<div className="container mx-auto px-4 py-8">
152136
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 md:gap-6">
153137
<div className="flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 w-full md:w-auto">
154138
<span className="text-xs sm:text-sm text-muted-foreground whitespace-nowrap">Trusted by developers at</span>
155139
<div className="flex flex-wrap items-center gap-2 sm:gap-4 text-muted-foreground">
156140
<a href="https://rivo.gg" className="text-xs sm:text-sm hover:text-foreground transition-colors" target="_blank" rel="noopener noreferrer">Rivo.gg</a>
157141
<a href="https://better-auth.com" className="text-xs sm:text-sm hover:text-foreground transition-colors" target="_blank" rel="noopener noreferrer">Better-auth</a>
158-
<a href="https://opencut.app" className="text-xs sm:text-sm hover:text-foreground transition-colors" target="_blank" rel="noopener noreferrer">OpenCut</a>
159142
<a href="https://www.confinity.com" className="text-xs sm:text-sm hover:text-foreground transition-colors" target="_blank" rel="noopener noreferrer">Confinity</a>
160143
<a href="https://useautumn.com" className="cursor-pointer text-xs sm:text-sm hover:text-foreground transition-colors" target="_blank" rel="noopener noreferrer">Autumn</a>
161-
<span className="text-xs sm:text-sm text-muted-foreground">+495 more</span>
144+
<span className="text-xs sm:text-sm text-muted-foreground">+496 more</span>
162145
</div>
163146
</div>
147+
<div className="flex flex-wrap items-center gap-3 sm:gap-6 text-xs text-muted-foreground">
148+
<span className="flex items-center gap-2 whitespace-nowrap">
149+
<div className="w-1.5 h-1.5 bg-primary rounded-full" />
150+
Free 30-day trial
151+
</span>
152+
<span className="flex items-center gap-2 whitespace-nowrap">
153+
<div className="w-1.5 h-1.5 bg-primary rounded-full" />
154+
No credit card required
155+
</span>
156+
<span className="flex items-center gap-2 whitespace-nowrap">
157+
<div className="w-1.5 h-1.5 bg-primary rounded-full" />
158+
Setup in 5 minutes
159+
</span>
160+
</div>
164161
</div>
165162
</div>
166163
</div>

0 commit comments

Comments
 (0)