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

Update components/hero.tsx

This commit is contained in:
kleap-admin 2026-01-18 17:43:10 +00:00
parent ac8f249502
commit fcdf8db606
1 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
components/hero.tsx Normal file
View File

@ -0,0 +1,92 @@
"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>
);
}