From cc240f63e4724e537cd690dd413c2a0cfc036e00 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 17:43:36 +0000
Subject: [PATCH] Update components/how-it-works.tsx

---
 components/how-it-works.tsx | 97 +++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 components/how-it-works.tsx

diff --git a/components/how-it-works.tsx b/components/how-it-works.tsx
new file mode 100644
index 0000000..f30caa7
--- /dev/null
+++ b/components/how-it-works.tsx
@@ -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>
+  );
+}