admin/better-auth-better-hub
1
0
Fork 0
mirror of https://github.com/better-auth/better-hub synced 2026-08-09 12:26:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: home page video demo (#67)

Browse Source
This commit is contained in:
Maxwell
2026-02-26 08:54:53 +10:00
committed by GitHub
parent da19fe49cc
commit 670ce60a7e
2 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/public/demo.mp4
BIN
View File
Binary file not shown.
apps/web/src/app/page.tsx
+68 -39
View File
@@ -92,51 +92,80 @@ export default async function HomePage({
</span> </span>
</div> </div>
{/* Content — centered on screen */} {/* Content — side by side layout */}
<div className="relative z-20 min-h-screen flex items-center justify-center px-6"> <div className="relative z-20 min-h-screen flex items-center justify-center px-6 lg:px-12 xl:px-16 py-20">
<div className="w-full max-w-md"> <div className="w-full max-w-[1600px] grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.5fr)] gap-12 lg:gap-16 items-center">
{/* Heading */} {/* Left — Hero text */}
<h1 <div className="w-full max-w-md mx-auto lg:mx-0">
className="hero-in text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight text-foreground leading-[1.1] mb-2" {/* Heading */}
style={{ animationDelay: "0.4s" }} <h1
> className="hero-in text-3xl sm:text-4xl lg:text-5xl font-medium tracking-tight text-foreground leading-[1.1] mb-2"
Re-imagining{" "} style={{ animationDelay: "0.4s" }}
<span className="text-white/80 font-mono"> >
code Re-imagining{" "}
</span> <span className="text-white/80 font-mono">
<br /> code
collaboration. </span>
</h1> <br />
collaboration.
</h1>
<p <p
className="hero-in text-foreground/50 text-sm leading-relaxed mt-4 max-w-sm" className="hero-in text-foreground/50 text-sm leading-relaxed mt-4 max-w-sm"
style={{ animationDelay: "0.6s" }} style={{ animationDelay: "0.6s" }}
> >
A better place to collaborate on code — for humans A better place to collaborate on code — for
and agents humans and agents
</p> </p>
{/* Divider */} {/* Divider */}
<div <div
className="hero-in my-8 h-px" className="hero-in my-8 h-px"
style={{ style={{
animationDelay: "0.8s", animationDelay: "0.8s",
background: "var(--hero-border)", background: "var(--hero-border)",
}} }}
/> />
{/* Login */} {/* Login */}
<div className="hero-in" style={{ animationDelay: "1.0s" }}> <div
<LoginButton redirectTo={redirectTo} /> className="hero-in"
style={{ animationDelay: "1.0s" }}
>
<LoginButton redirectTo={redirectTo} />
</div>
<p
className="hero-in text-[11px] text-foreground/40 mt-3"
style={{ animationDelay: "1.2s" }}
>
Your access token is encrypted and stored
securely. Only the permissions you grant
will be used.
</p>
</div> </div>
<p {/* Right — Demo Video */}
className="hero-in text-[11px] text-foreground/40 mt-3" <div
style={{ animationDelay: "1.2s" }} className="hero-in w-full"
style={{ animationDelay: "0.6s" }}
> >
Your access token is encrypted and stored securely. <div className="relative rounded-xl overflow-hidden border border-[var(--hero-border)] bg-black/50 backdrop-blur-sm shadow-2xl shadow-black/50">
Only the permissions you grant will be used. <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent pointer-events-none" />
</p> <video
className="w-full h-auto"
autoPlay
loop
muted
playsInline
>
<source
src="/demo.mp4"
type="video/mp4"
/>
</video>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>