kleap
/
app-brave-shiba-glow
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/how-it-works.tsx

This commit is contained in:
kleap-admin 2026-01-18 17:43:36 +00:00
parent 5e460eff66
commit cc240f63e4
1 changed files with 97 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
components/how-it-works.tsx Normal file
View File

@ -0,0 +1,97 @@
"use client";
import { Container } from "@/components/container";
import { Card, CardContent } from "@/components/ui/card";
import { Upload, MessageSquare, Wand2, Download } from "lucide-react";
export function HowItWorks() {
const steps = [
{
number: "01",
icon: Upload,
title: "Upload Your Video",
description: "Drag and drop your raw footage. Supports all major video formats up to 500MB.",
},
{
number: "02",
icon: MessageSquare,
title: "Describe Your Vision",
description: "Tell AI what you want: fast cuts, music style, text overlays, and overall vibe.",
},
{
number: "03",
icon: Wand2,
title: "AI Does the Magic",
description: "Our AI analyzes, cuts, syncs music, adds text, and applies transitions automatically.",
},
{
number: "04",
icon: Download,
title: "Download & Share",
description: "Get your viral-ready video in minutes. Export in perfect format for any platform.",
},
];
return (
<section id="how-it-works" className="py-20 bg-gradient-to-br from-purple-50 via-white to-blue-50 dark:from-purple-950/20 dark:via-neutral-950 dark:to-blue-950/20">
<Container>
<div className="text-center mb-16">
<h2 className="text-3xl md:text-5xl font-bold mb-4">
How It Works
</h2>
<p className="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto text-lg">
From raw footage to viral content in 4 simple steps
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
{steps.map((step, index) => (
<div key={index} className="relative">
{/* Connector line */}
{index < steps.length - 1 && (
<div className="hidden lg:block absolute top-20 left-[60%] w-[80%] h-0.5 bg-gradient-to-r from-purple-500 to-blue-500 opacity-30" />
)}
<Card className="relative border-2 hover:border-purple-500 dark:hover:border-purple-500 transition-all hover:shadow-lg hover:shadow-purple-500/10 h-full">
<CardContent className="pt-6">
{/* Step number */}
<div className="text-6xl font-bold text-purple-100 dark:text-purple-900/30 mb-4">
{step.number}
</div>
{/* Icon */}
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-4 shadow-lg shadow-purple-500/30">
<step.icon className="w-7 h-7 text-white" />
</div>
{/* Content */}
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
<p className="text-neutral-600 dark:text-neutral-400">
{step.description}
</p>
</CardContent>
</Card>
</div>
))}
</div>
{/* Time comparison */}
<div className="mt-16 max-w-3xl mx-auto">
<Card className="border-2 border-purple-200 dark:border-purple-800 bg-gradient-to-r from-purple-50 to-blue-50 dark:from-purple-950/30 dark:to-blue-950/30">
<CardContent className="py-8">
<div className="grid md:grid-cols-2 gap-8 text-center">
<div>
<div className="text-sm text-neutral-600 dark:text-neutral-400 mb-2">Traditional Editing</div>
<div className="text-4xl font-bold text-neutral-400 dark:text-neutral-600 line-through">2-4 hours</div>
</div>
<div>
<div className="text-sm text-purple-600 dark:text-purple-400 mb-2">With AI Video Editor</div>
<div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">5 minutes</div>
</div>
</div>
</CardContent>
</Card>
</div>
</Container>
</section>
);
}