Skip to content

Commit f4d3e8f

Browse files
BetrixDevBetrixDev
committed
start of landing page redesign
1 parent d6d2784 commit f4d3e8f

File tree

2 files changed

+233
-80
lines changed

2 files changed

+233
-80
lines changed

‎app/components/blur-fade-text.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { useRef } from "react";
2+
import {
3+
AnimatePresence,
4+
motion,
5+
useInView,
6+
type UseInViewOptions,
7+
type Variants,
8+
} from "framer-motion";
9+
10+
type MarginType = UseInViewOptions["margin"];
11+
12+
interface BlurFadeProps {
13+
children: React.ReactNode;
14+
className?: string;
15+
variant?: {
16+
hidden: { y: number };
17+
visible: { y: number };
18+
};
19+
duration?: number;
20+
delay?: number;
21+
yOffset?: number;
22+
inView?: boolean;
23+
inViewMargin?: MarginType;
24+
blur?: string;
25+
}
26+
27+
export function BlurFade({
28+
children,
29+
className,
30+
variant,
31+
duration = 0.4,
32+
delay = 0,
33+
yOffset = 6,
34+
inView = false,
35+
inViewMargin = "-50px",
36+
blur = "6px",
37+
}: BlurFadeProps) {
38+
const ref = useRef(null);
39+
const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
40+
const isInView = !inView || inViewResult;
41+
const defaultVariants: Variants = {
42+
hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
43+
visible: { y: -yOffset, opacity: 1, filter: "blur(0px)" },
44+
};
45+
const combinedVariants = variant || defaultVariants;
46+
return (
47+
<AnimatePresence>
48+
<motion.div
49+
ref={ref}
50+
initial="hidden"
51+
animate={isInView ? "visible" : "hidden"}
52+
exit="hidden"
53+
variants={combinedVariants}
54+
transition={{
55+
delay: 0.04 + delay,
56+
duration,
57+
ease: "easeOut",
58+
}}
59+
className={className}
60+
>
61+
{children}
62+
</motion.div>
63+
</AnimatePresence>
64+
);
65+
}

‎app/routes/index.tsx‎

Lines changed: 168 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1+
import { BlurFade } from "@/components/blur-fade-text";
12
import { Footer } from "../components/footer";
23
import TopNav from "../components/top-nav";
34
import { Button } from "@/components/ui/button";
45
import { HeroHighlight } from "@/components/ui/hero-highlight";
5-
import { Input } from "@/components/ui/input";
66
import { createFileRoute, Link } from "@tanstack/react-router";
7-
import { ClapperboardIcon, Share2Icon, UploadIcon } from "lucide-react";
7+
import {
8+
ChevronRightIcon,
9+
GlobeIcon,
10+
PlayIcon,
11+
ShieldIcon,
12+
UploadIcon,
13+
UsersIcon,
14+
ZapIcon,
15+
} from "lucide-react";
816

917
export const Route = createFileRoute("/")({
1018
component: RouteComponent,
@@ -14,93 +22,173 @@ function RouteComponent() {
1422
return (
1523
<HeroHighlight>
1624
<TopNav />
17-
<div className="flex flex-col min-h-screen">
18-
<main className="flex-1">
19-
<section className="w-full h-96 md:h-[700px] flex justify-center items-center">
20-
<div className="container px-4 md:px-6">
21-
<div className="flex flex-col items-center space-y-4 text-center">
22-
<div className="space-y-2">
23-
<h1 className="text-4xl sm:text-6xl font-bold text-primary bg-clip-text tracking-tight">
24-
Share Videos in a Flash
25-
</h1>
26-
<p className="mx-auto max-w-[700px] text-gray-500 md:text-xl dark:text-gray-400">
27-
Slipstream makes it incredibly easy and fast to share your
28-
favorite moments with friends. Upload, send, and enjoy
29-
videos together in seconds.
30-
</p>
31-
</div>
32-
<div className="space-x-4">
25+
<main className="flex-1">
26+
<section className="lg:mx-32 md:mx-12 relative py-20 lg:py-24 overflow-hidden h-[calc(100vh-15rem)]">
27+
<div className="container relative z-10">
28+
<div className="grid md:grid-cols-2 gap-12 items-center">
29+
<div className="space-y-6">
30+
<h1 className="text-4xl md:text-6xl font-bold tracking-tight md:text-left text-center text-balance">
31+
<BlurFade>
32+
Share videos instantly{" "}
33+
<ZapIcon
34+
fill="currentColor"
35+
className="text-red-400 w-12 h-12 hidden md:inline-block"
36+
/>
37+
</BlurFade>
38+
<BlurFade delay={0.25}>with anyone</BlurFade>
39+
</h1>
40+
<p className="text-xl text-muted-foreground md:text-left text-center text-balance">
41+
Slipstream makes it simple to share high-quality videos with
42+
friends or embed them beautifully on your website.
43+
</p>
44+
<div className="flex flex-row gap-4 justify-center md:justify-start">
3345
<Link to="/videos">
34-
<Button>Start Sharing</Button>
46+
<Button size="lg" className="gap-2">
47+
Get Started <ChevronRightIcon className="h-4 w-4" />
48+
</Button>
3549
</Link>
3650
</div>
37-
</div>
38-
</div>
39-
</section>
40-
<section className="w-full min-h-96 py-4 flex items-center justify-center bg-background/5 backdrop-blur-sm">
41-
<div>
42-
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl text-center mb-12">
43-
Why Users Love Slipstream
44-
</h2>
45-
<div className="grid gap-10 sm:grid-cols-1 lg:grid-cols-3">
46-
<div className="flex flex-col items-center space-y-3 text-center">
47-
<UploadIcon className="h-12 w-12 text-red-500" />
48-
<h3 className="text-xl font-bold">Quick Uploads</h3>
49-
<p className="text-gray-500 dark:text-gray-400">
50-
Upload your videos in seconds with our streamlined interface
51-
</p>
52-
</div>
53-
<div className="flex flex-col items-center space-y-3 text-center">
54-
<Share2Icon className="h-12 w-12 text-red-400" />
55-
<h3 className="text-xl font-bold">Instant Sharing</h3>
56-
<div className="text-gray-500 dark:text-gray-400">
57-
Share videos with anyone immediately after uploading
58-
</div>
59-
</div>
60-
<div className="flex flex-col items-center space-y-3 text-center ">
61-
<ClapperboardIcon className="h-12 w-12 text-red-500" />
62-
<h3 className="text-xl font-bold">Trim Videos</h3>
63-
<p className="text-gray-500 dark:text-gray-400">
64-
Trim any video before upload to speed up upload time
65-
</p>
51+
<div className="text-sm text-muted-foreground md:text-left text-center">
52+
No credit card required • Free plan available
6653
</div>
6754
</div>
6855
</div>
69-
</section>
70-
<section className="w-full flex justify-center items-center h-96">
71-
<div className="container px-4 md:px-6">
72-
<div className="flex flex-col items-center justify-center space-y-4 text-center">
73-
<div className="space-y-2">
74-
<h2 className="text-3xl font-bold tracking-tighter sm:text-5xl">
75-
Ready to Share Your Moments?
76-
</h2>
77-
<p className="max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
78-
Join Slipstream today and start sharing your videos in no
79-
time.
80-
</p>
81-
</div>
82-
<div className="w-full max-w-sm space-y-2">
83-
<form className="flex space-x-2">
84-
<Input
85-
className="max-w-lg flex-1 bg-background/50 backdrop-blur-md"
86-
placeholder="Enter your email"
87-
type="email"
88-
/>
89-
<Button type="submit">Sign Up</Button>
90-
</form>
91-
<p className="text-xs text-gray-500 dark:text-gray-400">
92-
By signing up, you agree to our{" "}
93-
<Link className="underline underline-offset-2" to="/">
94-
Terms & Conditions
95-
</Link>
96-
</p>
56+
</div>
57+
</section>
58+
59+
{/* Features Section */}
60+
<section className="py-20 md:py-32 bg-muted">
61+
<div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
62+
<h2 className="text-3xl md:text-4xl font-bold">
63+
Simple, fast video sharing for everyone
64+
</h2>
65+
<p className="text-xl text-muted-foreground">
66+
Slipstream provides all the tools you need to share videos quickly
67+
and embed them anywhere.
68+
</p>
69+
</div>
70+
71+
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 lg:mx-32 md:mx-8 mx-2">
72+
{[
73+
{
74+
icon: <UploadIcon className="h-10 w-10 text-primary" />,
75+
title: "Instant sharing",
76+
description:
77+
"Upload and share videos in seconds with a simple link that works everywhere.",
78+
},
79+
{
80+
icon: <GlobeIcon className="h-10 w-10 text-primary" />,
81+
title: "Beautiful embeds",
82+
description:
83+
"Embed your videos on any website with customizable players that look great.",
84+
},
85+
{
86+
icon: <ShieldIcon className="h-10 w-10 text-primary" />,
87+
title: "Privacy controls",
88+
description:
89+
"Choose who can view your videos with simple privacy settings and password protection.",
90+
},
91+
{
92+
icon: <UsersIcon className="h-10 w-10 text-primary" />,
93+
title: "Easy sharing",
94+
description:
95+
"Share directly to friends via email, messaging apps, or social media with one click.",
96+
},
97+
{
98+
icon: <ZapIcon className="h-10 w-10 text-primary" />,
99+
title: "Lightning fast",
100+
description:
101+
"Videos load instantly with our optimized delivery network, no matter the device.",
102+
},
103+
{
104+
icon: <PlayIcon className="h-10 w-10 text-primary" />,
105+
title: "High quality",
106+
description:
107+
"Share in stunning 4K quality without compression, keeping your videos looking perfect.",
108+
},
109+
].map((feature) => (
110+
<div
111+
key={feature.title}
112+
className="bg-zinc-900/50 rounded-lg p-6 border border-zinc-500/25 shadow-sm hover:shadow-md transition-shadow"
113+
>
114+
<div className="mb-4">{feature.icon}</div>
115+
<h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
116+
<p className="text-muted-foreground">{feature.description}</p>
117+
</div>
118+
))}
119+
</div>
120+
</section>
121+
122+
{/* How It Works Section */}
123+
<section className="py-20 md:py-32 mx-4">
124+
<div className="text-center max-w-3xl mx-auto mb-16 space-y-4">
125+
<h2 className="text-3xl md:text-4xl font-bold">
126+
How Slipstream works
127+
</h2>
128+
<p className="text-xl text-muted-foreground">
129+
Share your videos in three simple steps.
130+
</p>
131+
</div>
132+
133+
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
134+
{[
135+
{
136+
step: "01",
137+
title: "Upload your video",
138+
description: "We support most formats up at any quality.",
139+
},
140+
{
141+
step: "02",
142+
title: "Get your link",
143+
description:
144+
"Instantly receive a shareable link or embed code for your video.",
145+
},
146+
{
147+
step: "03",
148+
title: "Share anywhere",
149+
description:
150+
"Send to friends, family, or embed on your website with one click.",
151+
},
152+
].map((step, i) => (
153+
<div key={step.step} className="relative">
154+
<div className="bg-background rounded-lg p-8 border border-zinc-500/25 shadow-sm h-full">
155+
<div className="text-5xl font-bold text-primary/20 mb-4">
156+
{step.step}
157+
</div>
158+
<h3 className="text-xl font-semibold mb-2">{step.title}</h3>
159+
<p className="text-muted-foreground">{step.description}</p>
97160
</div>
161+
{i < 2 && (
162+
<div className="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2 z-10">
163+
<ChevronRightIcon className="h-8 w-8 text-muted-foreground translate-x-4" />
164+
</div>
165+
)}
98166
</div>
167+
))}
168+
</div>
169+
</section>
170+
171+
{/* CTA Section */}
172+
<section className="py-20 md:py-32 mx-4">
173+
<div className="max-w-4xl mx-auto text-center bg-primary/5 border border-primary/20 rounded-xl p-8 md:p-12">
174+
<h2 className="text-3xl md:text-4xl font-bold mb-4">
175+
Ready to share your videos?
176+
</h2>
177+
<p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
178+
Start sharing high-quality videos with friends or embedding them
179+
on your website in seconds - no account required.
180+
</p>
181+
<div className="flex flex-col sm:flex-row gap-4 justify-center">
182+
<Link to="/videos">
183+
<Button size="lg" className="gap-2">
184+
Upload a video <ChevronRightIcon className="h-4 w-4" />
185+
</Button>
186+
</Link>
99187
</div>
100-
</section>
101-
</main>
102-
<Footer />
103-
</div>
188+
</div>
189+
</section>
190+
</main>
191+
<Footer />
104192
</HeroHighlight>
105193
);
106194
}

0 commit comments

Comments
 (0)