Update components/features.tsx

components/features.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { Container } from "@/components/container";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { 
+  Scissors, 
+  Music, 
+  Type, 
+  Sparkles, 
+  Zap, 
+  Palette,
+  Brain,
+  Clock,
+  TrendingUp
+} from "lucide-react";
+
+export function Features() {
+  const features = [
+    {
+      icon: Brain,
+      title: "AI-Powered Editing",
+      description: "Advanced AI analyzes your footage and automatically identifies the best moments, cuts boring parts, and maintains perfect pacing.",
+    },
+    {
+      icon: Scissors,
+      title: "Smart Auto-Cut",
+      description: "Removes silences, pauses, and filler words. Keeps only the most engaging content that hooks viewers instantly.",
+    },
+    {
+      icon: Music,
+      title: "Beat-Synced Music",
+      description: "Add trending music that syncs perfectly with your cuts. AI matches transitions to the beat for maximum impact.",
+    },
+    {
+      icon: Type,
+      title: "Dynamic Text Overlays",
+      description: "Auto-generate captions with bold, animated text. Highlight key words and phrases that grab attention.",
+    },
+    {
+      icon: Sparkles,
+      title: "Pro Transitions",
+      description: "Smooth zoom effects, whip pans, and motion blur transitions that make your content look professionally edited.",
+    },
+    {
+      icon: Palette,
+      title: "Color Grading",
+      description: "Apply cinematic color grades and corrections automatically. Make your videos pop with vibrant, consistent colors.",
+    },
+    {
+      icon: Clock,
+      title: "10x Faster",
+      description: "What takes hours in traditional editing software happens in minutes. Upload, instruct, and download—that's it.",
+    },
+    {
+      icon: TrendingUp,
+      title: "Viral Optimization",
+      description: "Trained on millions of viral videos. AI knows what works and applies proven patterns to maximize engagement.",
+    },
+    {
+      icon: Zap,
+      title: "One-Click Export",
+      description: "Export in perfect formats for Instagram Reels, YouTube Shorts, or TikTok. Optimized resolution and aspect ratios.",
+    },
+  ];
+
+  return (
+    <section id="features" className="py-20">
+      <Container>
+        <div className="text-center mb-16">
+          <h2 className="text-3xl md:text-5xl font-bold mb-4">
+            Everything You Need to Go{" "}
+            <span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
+              Viral
+            </span>
+          </h2>
+          <p className="text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto text-lg">
+            Professional video editing features powered by AI. No experience needed.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature, index) => (
+            <Card 
+              key={index}
+              className="border-2 hover:border-purple-500 dark:hover:border-purple-500 transition-all hover:shadow-lg hover:shadow-purple-500/10"
+            >
+              <CardHeader>
+                <div className="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center mb-4">
+                  <feature.icon className="w-6 h-6 text-white" />
+                </div>
+                <CardTitle className="text-xl">{feature.title}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <CardDescription className="text-base">
+                  {feature.description}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}