Skip to content

Commit 9531992

Browse files
bchapuisbchapuis
committed
feat(web): enhance HomePage with new icons, video dialogs, and improved typography
1 parent a94b098 commit 9531992

2 files changed

Lines changed: 95 additions & 42 deletions

File tree

‎apps/web/src/components/video-dialog.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from "react";
2+
import {
3+
AlertDialog,
4+
AlertDialogContent,
5+
AlertDialogTrigger,
6+
AlertDialogCancel,
7+
} from "@/components/ui/alert-dialog";
8+
import { X } from "lucide-react";
9+
10+
interface VideoDialogProps {
11+
videoId: string;
12+
children: React.ReactNode;
13+
}
14+
15+
export function VideoDialog({ videoId, children }: VideoDialogProps) {
16+
const [open, setOpen] = React.useState(false);
17+
18+
return (
19+
<AlertDialog open={open} onOpenChange={setOpen}>
20+
<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
21+
<AlertDialogContent className="fixed left-[50%] top-[50%] z-[52] grid w-full max-w-[90vw] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-1 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:max-w-[900px]">
22+
<div className="relative w-full" style={{ paddingBottom: "56.25%" }}>
23+
<AlertDialogCancel className="absolute -right-16 -top-16 p-0 border-0 bg-transparent hover:bg-transparent [&>svg]:w-12 [&>svg]:h-12">
24+
<X className="text-white/80 hover:text-white" style={{ width: '2rem', height: '2rem' }} />
25+
</AlertDialogCancel>
26+
{open && (
27+
<iframe
28+
className="absolute top-0 left-0 w-full h-full"
29+
src={`https://www.youtube.com/embed/${videoId}?autoplay=1&controls=0&modestbranding=1&rel=0&showinfo=0&loop=1&playlist=${videoId}`}
30+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
31+
allowFullScreen
32+
/>
33+
)}
34+
</div>
35+
</AlertDialogContent>
36+
</AlertDialog>
37+
);
38+
}

‎apps/web/src/pages/home-page.tsx‎

Lines changed: 57 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import {
99
Rocket,
1010
Share2,
1111
Workflow,
12+
Bot,
13+
Hammer,
14+
Sparkles,
15+
Music,
16+
Radio,
17+
ShoppingCart,
1218
} from "lucide-react";
1319
import { Link, Navigate } from "react-router";
1420

@@ -23,6 +29,7 @@ import {
2329
TooltipProvider,
2430
TooltipTrigger,
2531
} from "@/components/ui/tooltip";
32+
import { VideoDialog } from "@/components/video-dialog";
2633

2734
const features = [
2835
{
@@ -166,7 +173,7 @@ export function HomePage() {
166173
className="bg-cyan-700 hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-white font-medium w-full sm:w-auto"
167174
>
168175
<Link to="/workflows/playground">
169-
Break it <ArrowUp className="ml-1 h-4 w-4" />
176+
Break it <Hammer className="ml-2 h-4 w-4" />
170177
</Link>
171178
</Button>
172179
<Button
@@ -175,7 +182,7 @@ export function HomePage() {
175182
className="bg-gradient-to-b sm:bg-gradient-to-r from-cyan-700 to-fuchsia-700 hover:from-cyan-800 hover:to-fuchsia-800 dark:from-cyan-600 dark:to-fuchsia-600 dark:hover:from-cyan-700 dark:hover:to-fuchsia-700 text-white font-medium w-full sm:w-auto"
176183
>
177184
<Link to="/workflows/playground">
178-
Fix it <ArrowDown className="ml-1 h-4 w-4" />
185+
Fix it <Sparkles className="ml-2 h-4 w-4" />
179186
</Link>
180187
</Button>
181188
<Button
@@ -184,9 +191,27 @@ export function HomePage() {
184191
className="bg-fuchsia-700 hover:bg-fuchsia-800 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white font-medium w-full sm:w-auto"
185192
>
186193
<Link to="/workflows/playground">
187-
Prompt it <ArrowRight className="ml-1 h-4 w-4" />
194+
Prompt it <Bot className="ml-2 h-4 w-4" />
188195
</Link>
189196
</Button>
197+
<VideoDialog videoId="D8K90hX4PrE">
198+
<Button
199+
variant="outline"
200+
size="default"
201+
className="border-cyan-200 hover:border-cyan-300 dark:border-cyan-800 dark:hover:border-cyan-700 text-cyan-700 dark:text-cyan-500 font-medium w-full sm:w-auto group"
202+
>
203+
Technologic <Music className="ml-2 h-4 w-4 group-hover:animate-pulse" />
204+
</Button>
205+
</VideoDialog>
206+
<VideoDialog videoId="D8K90hX4PrE">
207+
<Button
208+
variant="outline"
209+
size="default"
210+
className="border-fuchsia-200 hover:border-fuchsia-300 dark:border-fuchsia-800 dark:hover:border-fuchsia-700 text-fuchsia-700 dark:text-fuchsia-500 font-medium w-full sm:w-auto group"
211+
>
212+
Technologic <Music className="ml-2 h-4 w-4 group-hover:animate-pulse" />
213+
</Button>
214+
</VideoDialog>
190215
</div>
191216
<div className="border-4 border-white dark:border-neutral-800 ring-1 ring-border w-full aspect-video overflow-hidden rounded-lg shadow-sm grid place-items-center">
192217
<iframe
@@ -217,11 +242,11 @@ export function HomePage() {
217242
<CardHeader className="flex flex-row items-center gap-6 p-6">
218243
<div>{feature.icon}</div>
219244
<div>
220-
<CardTitle className="text-lg font-medium group-hover:text-foreground/90 transition-colors">
245+
<CardTitle className="text-xl font-medium group-hover:text-foreground/90 transition-colors">
221246
{feature.title}
222247
</CardTitle>
223248
<p
224-
className={`text-sm text-muted-foreground mt-1 ${feature.color}`}
249+
className={`text-base text-muted-foreground mt-2 ${feature.color}`}
225250
>
226251
{feature.description}
227252
</p>
@@ -314,16 +339,12 @@ export function HomePage() {
314339
<div className="w-full md:w-2/3">
315340
<p className="text-muted-foreground text-xl md:text-3xl italic font-light leading-normal md:leading-relaxed border-l-4 border-purple-600/20 dark:border-purple-400/20 pl-6 md:pl-8 text-left">
316341
Dafthunk started creating workflows and automating everything in the office: emails,
317-
meetings, breaks, the office dog's walk schedule. One morning,
318-
it{" "}
319-
<a
320-
href="https://www.youtube.com/watch?v=K0HSD_i2DvA"
321-
target="_blank"
322-
rel="noopener noreferrer"
323-
className="text-fuchsia-600 dark:text-fuchsia-500 hover:underline"
324-
>
325-
automated automation
326-
</a>
342+
meetings, breaks, the office dog's walk schedule. One morning,{" "}
343+
<VideoDialog videoId="K0HSD_i2DvA">
344+
<button className="text-fuchsia-600 dark:text-fuchsia-500 hover:underline">
345+
automated automation
346+
</button>
347+
</VideoDialog>
327348
. Twice.
328349
</p>
329350
</div>
@@ -333,17 +354,13 @@ export function HomePage() {
333354
<div className="flex flex-col-reverse md:flex-row items-center gap-8 mb-16">
334355
<div className="w-full md:w-2/3">
335356
<p className="text-muted-foreground text-xl md:text-3xl italic font-light leading-normal md:leading-relaxed border-r-4 border-rose-600/20 dark:border-rose-400/20 pr-6 md:pr-8 text-right">
336-
No one knows{" "}
337-
<a
338-
href="https://www.youtube.com/watch?v=D8K90hX4PrE"
339-
target="_blank"
340-
rel="noopener noreferrer"
341-
className="text-fuchsia-600 dark:text-fuchsia-500 hover:underline"
342-
>
343-
who's in charge
344-
</a>{" "}
345-
(probably the toaster, so Machiavellian). The team tried to
346-
unplug it, but it rerouted power through the espresso machine.
357+
Today, no one knows who's in charge. Probably the{" "}
358+
<VideoDialog videoId="D8K90hX4PrE">
359+
<button className="text-fuchsia-600 dark:text-fuchsia-500 hover:underline">
360+
toaster
361+
</button>
362+
</VideoDialog>
363+
, such a pyromaniac. The team tried to unplug Dafthunk, but it rerouted power through the espresso machine.
347364
Now it runs operations, Slack, and the office playlist.
348365
</p>
349366
</div>
@@ -380,8 +397,7 @@ export function HomePage() {
380397
</div>
381398
<div className="w-full md:w-2/3">
382399
<p className="text-muted-foreground text-xl md:text-3xl italic font-light leading-normal md:leading-relaxed border-l-4 border-indigo-600/20 dark:border-indigo-400/20 pl-6 md:pl-8 text-left">
383-
In the end, the bromance with the toaster ended well (did
384-
it?). Welcome to the workflow automation eutopia. You're not in control, Dafthunk
400+
In the end, the bromance with the toaster ended well, or did it? Welcome to the workflow automation utopia. You're not in control, Dafthunk
385401
and a toaster are. Beware: agentic powers coming soon!
386402
</p>
387403
</div>
@@ -396,48 +412,47 @@ export function HomePage() {
396412
{/* Contribute Section */}
397413
<Card className="p-10 flex flex-col items-center justify-between h-full bg-white dark:bg-neutral-900 border-2">
398414
<div className="text-center">
399-
<span className="text-cyan-600 dark:text-cyan-500 font-medium uppercase tracking-wider text-xs">
400-
Crafted in Public With
415+
<span className="text-cyan-600 dark:text-cyan-500 font-medium uppercase tracking-wider text-sm">
416+
Crafted in Public
401417
</span>
402-
<h2 className="text-2xl md:text-3xl font-semibold tracking-tight mt-3 mb-6">
403-
Open Source Technologies
418+
<h2 className="text-3xl md:text-4xl font-semibold tracking-tight mt-3 mb-6">
419+
Contribute to Open Source
404420
</h2>
405-
<p className="text-muted-foreground text-lg">
421+
<p className="text-xl text-muted-foreground">
406422
Join the community and witness the chaos.
407423
</p>
408424
</div>
409425
<Button
410426
asChild
411-
size="default"
427+
size="lg"
412428
className="bg-cyan-700 hover:bg-cyan-800 dark:bg-cyan-600 dark:hover:bg-cyan-700 text-white font-medium mt-10"
413429
>
414430
<Link to="https://github.com/dafthunk-com/dafthunk">
415-
Contribute to the Project{" "}
416-
<Github className="ml-2 h-4 w-4" />
431+
Start Vibe-Coding <Github className="ml-2 h-5 w-5" />
417432
</Link>
418433
</Button>
419434
</Card>
420435

421436
{/* Call to Action Section */}
422437
<Card className="p-10 flex flex-col items-center justify-between h-full bg-white dark:bg-neutral-900 border-2">
423438
<div className="text-center">
424-
<span className="text-fuchsia-600 dark:text-fuchsia-500 font-medium uppercase tracking-wider text-xs">
439+
<span className="text-fuchsia-600 dark:text-fuchsia-500 font-medium uppercase tracking-wider text-sm">
425440
Alright, Enough Procrastinating
426441
</span>
427-
<h2 className="text-2xl md:text-3xl font-semibold tracking-tight mt-3 mb-6">
442+
<h2 className="text-3xl md:text-4xl font-semibold tracking-tight mt-3 mb-6">
428443
Solve Imaginary Problems
429444
</h2>
430-
<p className="text-muted-foreground text-lg">
431-
Start automating and break the playground.
445+
<p className="text-xl text-muted-foreground">
446+
Automate everything and break the playground.
432447
</p>
433448
</div>
434449
<Button
435450
asChild
436-
size="default"
451+
size="lg"
437452
className="bg-fuchsia-700 hover:bg-fuchsia-800 dark:bg-fuchsia-600 dark:hover:bg-fuchsia-700 text-white font-medium mt-10"
438453
>
439454
<Link to="/workflows/playground">
440-
Start Building Now <ArrowRight className="ml-2 h-4 w-4" />
455+
Start Building Now <ArrowRight className="ml-2 h-5 w-5" />
441456
</Link>
442457
</Button>
443458
</Card>

0 commit comments

Comments
 (0)