93 lines
4.3 KiB
TypeScript
93 lines
4.3 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Heading } from "@/components/heading";
|
|
import { Subheading } from "@/components/subheading";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Sparkles, Video, Zap } from "lucide-react";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="relative py-20 md:py-32 overflow-hidden">
|
|
{/* Background gradient */}
|
|
<div className="absolute inset-0 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" />
|
|
|
|
{/* Animated background elements */}
|
|
<div className="absolute top-20 left-10 w-72 h-72 bg-purple-300 dark:bg-purple-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob" />
|
|
<div className="absolute top-40 right-10 w-72 h-72 bg-blue-300 dark:bg-blue-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob animation-delay-2000" />
|
|
<div className="absolute -bottom-8 left-1/2 w-72 h-72 bg-pink-300 dark:bg-pink-600 rounded-full mix-blend-multiply dark:mix-blend-soft-light filter blur-xl opacity-20 animate-blob animation-delay-4000" />
|
|
|
|
<Container className="relative z-10">
|
|
<div className="flex flex-col items-center text-center space-y-8">
|
|
{/* Badge */}
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-purple-100 dark:bg-purple-900/30 border border-purple-200 dark:border-purple-800">
|
|
<Sparkles className="w-4 h-4 text-purple-600 dark:text-purple-400" />
|
|
<span className="text-sm font-medium text-purple-900 dark:text-purple-300">
|
|
AI-Powered Video Editing
|
|
</span>
|
|
</div>
|
|
|
|
{/* Main heading */}
|
|
<Heading className="max-w-4xl">
|
|
Turn Raw Clips Into{" "}
|
|
<span className="bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
|
|
Viral Reels
|
|
</span>{" "}
|
|
in Minutes
|
|
</Heading>
|
|
|
|
{/* Subheading */}
|
|
<Subheading className="max-w-2xl">
|
|
Upload your video, describe your vision, and let AI handle the editing.
|
|
Fast cuts, music sync, text overlays, and professional transitions—all automated.
|
|
</Subheading>
|
|
|
|
{/* CTA buttons */}
|
|
<div className="flex flex-col sm:flex-row gap-4 mt-8">
|
|
<Button size="lg" className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white shadow-lg shadow-purple-500/30">
|
|
<Video className="w-5 h-5 mr-2" />
|
|
Start Editing Free
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="border-2">
|
|
<Zap className="w-5 h-5 mr-2" />
|
|
See Examples
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex flex-wrap justify-center gap-8 mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-800">
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold text-neutral-900 dark:text-white">10M+</div>
|
|
<div className="text-sm text-neutral-600 dark:text-neutral-400">Videos Edited</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold text-neutral-900 dark:text-white">2.5x</div>
|
|
<div className="text-sm text-neutral-600 dark:text-neutral-400">Faster Editing</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold text-neutral-900 dark:text-white">98%</div>
|
|
<div className="text-sm text-neutral-600 dark:text-neutral-400">Satisfaction Rate</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
|
|
<style jsx>{`
|
|
@keyframes blob {
|
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
|
33% { transform: translate(30px, -50px) scale(1.1); }
|
|
66% { transform: translate(-20px, 20px) scale(0.9); }
|
|
}
|
|
.animate-blob {
|
|
animation: blob 7s infinite;
|
|
}
|
|
.animation-delay-2000 {
|
|
animation-delay: 2s;
|
|
}
|
|
.animation-delay-4000 {
|
|
animation-delay: 4s;
|
|
}
|
|
`}</style>
|
|
</section>
|
|
);
|
|
}
|