Skip to content

Commit 1038973

Browse files
leonardcserleonardcser
committed
feat(web): update homepage
1 parent 80eef54 commit 1038973

1 file changed

Lines changed: 66 additions & 171 deletions

File tree

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

Lines changed: 66 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -20,41 +20,40 @@ import { HOME_HEADER_HEIGHT, HomeHeader } from "@/components/home-header";
2020
import { HomeFooter } from "@/components/layouts/home-footer";
2121
import { Button } from "@/components/ui/button";
2222
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
23-
import { cn } from "@/utils/utils";
2423

25-
function BackgroundBubble({
26-
variant,
27-
className,
28-
size = 600,
29-
}: {
30-
variant: "indigo" | "sky" | "background";
31-
className?: string;
32-
size?: number;
33-
}) {
34-
let color = "";
35-
switch (variant) {
36-
case "indigo":
37-
color = "bg-indigo-500/30";
38-
break;
39-
case "sky":
40-
color = "bg-sky-500/40";
41-
break;
42-
case "background":
43-
color = "bg-neutral-100 dark:bg-neutral-900";
44-
break;
45-
}
46-
47-
return (
48-
<div
49-
className={cn("absolute rounded-full -z-10", color, className)}
50-
style={{
51-
width: `${size}px`,
52-
height: `${size}px`,
53-
filter: "blur(100px)",
54-
}}
55-
/>
56-
);
57-
}
24+
// function BackgroundBubble({
25+
// variant,
26+
// className,
27+
// size = 600,
28+
// }: {
29+
// variant: "indigo" | "sky" | "background";
30+
// className?: string;
31+
// size?: number;
32+
// }) {
33+
// let color = "";
34+
// switch (variant) {
35+
// case "indigo":
36+
// color = "bg-indigo-500/30";
37+
// break;
38+
// case "sky":
39+
// color = "bg-sky-500/40";
40+
// break;
41+
// case "background":
42+
// color = "bg-neutral-100 dark:bg-neutral-900";
43+
// break;
44+
// }
45+
//
46+
// return (
47+
// <div
48+
// className={cn("absolute rounded-full -z-10", color, className)}
49+
// style={{
50+
// width: `${size}px`,
51+
// height: `${size}px`,
52+
// filter: "blur(100px)",
53+
// }}
54+
// />
55+
// );
56+
// }
5857

5958
export function HomePage() {
6059
const { isAuthenticated } = useAuth();
@@ -100,12 +99,12 @@ export function HomePage() {
10099
description:
101100
"Securely save and retrieve your workflows using Cloudflare D1 database integration.",
102101
},
103-
{
104-
icon: <Rocket className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />,
105-
title: "Modern & Performant",
106-
description:
107-
"Built with React, TailwindCSS, and Shadcn UI for a fast, responsive, and beautiful experience.",
108-
},
102+
// {
103+
// icon: <Rocket className="h-8 w-8 text-indigo-600 dark:text-indigo-400" />,
104+
// title: "Modern & Performant",
105+
// description:
106+
// "Built with React, TailwindCSS, and Shadcn UI for a fast, responsive, and beautiful experience.",
107+
// },
109108
];
110109

111110
const techStack = [
@@ -124,41 +123,25 @@ export function HomePage() {
124123
<main>
125124
{/* Hero Section */}
126125
<section
127-
className="mx-auto relative pt-24 pb-10 bg-gradient-to-b from-transparent to-neutral-50 dark:to-neutral-900"
126+
className="mx-auto relative pt-24 pb-10"
128127
style={{
129128
marginTop: `${HOME_HEADER_HEIGHT}px`,
130129
}}
131130
>
132-
<BackgroundBubble
133-
variant="indigo"
134-
className="top-[-100px] left-[-100px]"
135-
/>
136-
<BackgroundBubble
137-
variant="sky"
138-
className="top-[-250px] left-[350px]"
139-
/>
140-
<div className="container mx-auto w-full flex flex-col items-center justify-center text-center px-6">
141-
<div className="text-4xl xs:text-5xl sm:text-5xl md:text-6xl lg:text-7xl max-w-3xl mx-auto font-bold tracking-tight mb-4 sm:mb-6 relative">
131+
<div className="container px-6">
132+
<div className="text-4xl xs:text-5xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-2 sm:mb-4 relative">
142133
<h1 className="relative">
143134
<span className="bg-gradient-to-r from-indigo-600 to-purple-700 dark:from-indigo-500 dark:to-purple-400 bg-clip-text text-transparent">
144-
Build
135+
Workflows
145136
</span>{" "}
146-
and{" "}
147-
<span className="bg-gradient-to-r from-purple-700 to-indigo-600 dark:from-purple-400 dark:to-indigo-500 bg-clip-text text-transparent">
148-
automate
149-
</span>
150-
<div className="absolute -z-10 top-0 left-0 w-[150vw] -translate-x-1/3 border-t-2 border-dashed border-neutral-100 dark:border-neutral-500 opacity-75"></div>
151-
<div className="absolute -z-10 -bottom-1 left-0 w-[150vw] -translate-x-1/3 border-t-2 border-dashed border-neutral-100 dark:border-neutral-500 opacity-75"></div>
152-
<div className="absolute -z-10 top-0 left-3 h-screen -translate-y-1/2 border-l-2 border-dashed border-neutral-100 dark:border-neutral-500 opacity-75"></div>
137+
no one asked for.
153138
</h1>
154-
<h1>workflows with ease.</h1>
155-
<div className="absolute top-0 left-0 scale-125 w-full h-full bg-white/75 dark:bg-black/75 -z-10 blur-3xl"></div>
156139
</div>
157-
<p className="text-lg sm:text-xl md:text-2xl text-muted-foreground mb-6 sm:mb-10 max-w-3xl mx-auto">
140+
<p className="text-lg sm:text-xl md:text-2xl text-muted-foreground mb-4 sm:mb-6 max-w-3xl">
158141
A powerful, visual workflows with ease, powered by serverless &
159142
AI.
160143
</p>
161-
<div className="flex flex-row justify-center w-full items-center gap-2 sm:gap-4 mb-6 sm:mb-10">
144+
<div className="flex justify-start w-full items-center gap-2 sm:gap-4 mb-6 sm:mb-10">
162145
<Button
163146
asChild
164147
size="lg"
@@ -179,107 +162,34 @@ export function HomePage() {
179162
</section>
180163

181164
{/* Features Section */}
182-
<section
183-
id="features"
184-
className="py-20 md:py-28 dark:bg-neutral-800/50 border-t"
185-
>
186-
<div className="container mx-auto px-6">
187-
<div className="text-center mb-16">
165+
<section id="features" className="py-20 md:py-28">
166+
<div className="container px-6 grid grid-cols-1 md:grid-cols-3 gap-8">
167+
<div>
188168
<span className="text-indigo-600 dark:text-indigo-400 font-semibold uppercase tracking-wider text-sm">
189169
Core Capabilities
190170
</span>
191-
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mt-2">
192-
Why Choose Dafthunk?
171+
<h2 className="text-3xl md:text-4xl lg:text-8xl font-bold tracking-tight">
172+
But Why?
193173
</h2>
194-
<p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
195-
Discover the features that make Dafthunk the ideal solution for
196-
your workflow automation needs.
197-
</p>
198-
</div>
199-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
200-
{features.map((feature) => (
201-
<Card key={feature.title} className="bg-card border">
202-
<CardHeader className="flex flex-row items-center gap-4 p-6">
203-
<div className="mt-2">{feature.icon}</div>
204-
<CardTitle className="text-xl font-semibold">
205-
{feature.title}
206-
</CardTitle>
207-
</CardHeader>
208-
<CardContent className="p-6 pt-0">
209-
<p className="text-muted-foreground">
210-
{feature.description}
211-
</p>
212-
</CardContent>
213-
</Card>
214-
))}
215-
</div>
216-
</div>
217-
</section>
218-
219-
{/* How It Works Section */}
220-
<section className="py-20 md:py-28 dark:bg-neutral-800/50 relative">
221-
<BackgroundBubble
222-
variant="indigo"
223-
className="top-[-200px] right-[-100px] opacity-50"
224-
size={700}
225-
/>
226-
<BackgroundBubble
227-
variant="sky"
228-
className="top-[200px] right-[-200px] opacity-50"
229-
size={500}
230-
/>
231-
<div className="container mx-auto px-6">
232-
<div className="grid lg:grid-cols-2 gap-12 xl:gap-16 items-center">
233-
<div className="order-2 lg:order-1">
234-
<span className="text-indigo-600 dark:text-indigo-400 font-semibold uppercase tracking-wider text-sm">
235-
Streamlined Process
236-
</span>
237-
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight mt-2 mb-6">
238-
Intuitive Visual Workflow Building
239-
</h2>
240-
<p className="text-lg text-muted-foreground mb-8">
241-
Dafthunk empowers you to design, automate, and manage complex
242-
processes with an easy-to-use drag-and-drop interface. Connect
243-
various nodes, including powerful AI capabilities, to bring
244-
your automated workflows to life.
245-
</p>
246-
<ul className="space-y-4">
247-
{[
248-
"Drag-and-drop nodes to build flows.",
249-
"Connect nodes to define data pathways.",
250-
"Utilize AI for advanced processing.",
251-
].map((item, index) => (
252-
<li key={index} className="flex items-center text-lg">
253-
<CheckCircle className="h-6 w-6 text-indigo-600 dark:text-indigo-400 mr-3 flex-shrink-0" />
254-
<span className="text-muted-foreground">{item}</span>
255-
</li>
256-
))}
257-
</ul>
258-
<Button asChild size="lg" className="mt-10">
259-
<Link to="/workflows/playground">
260-
Try the Playground <ArrowRight className="ml-2 h-5 w-5" />
261-
</Link>
262-
</Button>
263-
</div>
264-
<div className="order-1 lg:order-2 rounded-xl overflow-hidden bg-background flex items-center justify-center p-8 border">
265-
{/* Placeholder for a more dynamic visual if available */}
266-
<div className="w-full h-full border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-center p-6">
267-
<Workflow className="h-24 w-24 text-indigo-600 dark:text-indigo-400 mb-6" />
268-
<h3 className="text-xl font-semibold text-foreground mb-2">
269-
Visualize Your Automation
270-
</h3>
271-
<p className="text-sm text-muted-foreground max-w-xs">
272-
Our interactive editor makes complex workflow creation
273-
simple and efficient.
274-
</p>
275-
</div>
276-
</div>
277174
</div>
175+
{features.map((feature) => (
176+
<Card key={feature.title} className="h-full">
177+
<CardHeader className="flex flex-row items-center gap-4 p-6">
178+
<div className="mt-2">{feature.icon}</div>
179+
<CardTitle className="text-xl font-semibold">
180+
{feature.title}
181+
</CardTitle>
182+
</CardHeader>
183+
<CardContent className="p-6 pt-0">
184+
<p className="text-muted-foreground">{feature.description}</p>
185+
</CardContent>
186+
</Card>
187+
))}
278188
</div>
279189
</section>
280190

281191
{/* Tech Stack Section */}
282-
<section className="py-20 md:py-28 bg-white dark:bg-black border-y">
192+
<section className="py-20 md:py-28">
283193
<div className="container mx-auto px-6 text-center">
284194
<span className="text-indigo-600 dark:text-indigo-400 font-semibold uppercase tracking-wider text-sm">
285195
Powered By
@@ -308,23 +218,8 @@ export function HomePage() {
308218
</section>
309219

310220
{/* Call to Action Section */}
311-
<section className="relative py-16 md:py-24 lg:py-32">
221+
<section className="relative py-8 md:py-16">
312222
{/* Blurred balls background */}
313-
<BackgroundBubble
314-
variant="indigo"
315-
className="top-[-100px] left-[-100px]"
316-
size={600}
317-
/>
318-
<BackgroundBubble
319-
variant="sky"
320-
className="top-[-150px] right-[-150px]"
321-
size={500}
322-
/>
323-
<BackgroundBubble
324-
variant="background"
325-
className="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
326-
size={600}
327-
/>
328223
<div className="container mx-auto text-center px-6">
329224
<h2 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight mb-6">
330225
Ready to Automate?

0 commit comments

Comments
 (0)