HeroSplit

1"use client";
2
3import { Button } from '@/components/ui/button';
4import { Badge } from '@/components/ui/badge';
5import { ArrowRight, CheckCircle2, Star } from 'lucide-react';
6
7export default function HeroSplit() {
8  return (
9    <div className="relative min-h-screen bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950 overflow-hidden">
10      <div className="absolute top-20 left-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl" />
11      <div className="absolute bottom-20 right-10 w-96 h-96 bg-indigo-500/20 rounded-full blur-3xl" />
12      
13      <div className="relative container mx-auto px-6 py-20">
14        <div className="grid lg:grid-cols-2 gap-12 items-center">
15          <div className="space-y-8">
16            <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30">
17              ✨ New Features Available
18            </Badge>
19            
20            <h1 className="text-5xl lg:text-7xl font-bold text-white leading-tight">
21              Build Stunning
22              <span className="bg-gradient-to-r from-purple-400 to-indigo-400 bg-clip-text text-transparent">
23                {" "}Experiences
24              </span>
25            </h1>
26            
27            <p className="text-xl text-slate-300 max-w-lg">
28              Create beautiful, responsive interfaces with our powerful component library. Ship faster, delight users.
29            </p>
30            
31            <div className="flex flex-wrap gap-4">
32              <Button size="lg" className="bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white px-8">
33                Get Started Free
34                <ArrowRight className="ml-2 h-5 w-5" />
35              </Button>
36              <Button size="lg" variant="outline" className="border-slate-600 text-white hover:bg-slate-800 px-8">
37                View Demo
38              </Button>
39            </div>
40            
41            <div className="pt-8">
42              <p className="text-sm text-slate-400 mb-4">Trusted by innovative teams</p>
43              <div className="flex flex-wrap gap-6 items-center opacity-60">
44                {['Acme', 'Stripe', 'Vercel', 'Linear', 'Notion'].map((company) => (
45                  <span key={company} className="text-white font-semibold text-lg">
46                    {company}
47                  </span>
48                ))}
49              </div>
50            </div>
51          </div>
52          
53          <div className="relative">
54            <div className="relative bg-gradient-to-br from-purple-500/20 to-indigo-500/20 rounded-3xl p-8 border border-purple-500/30 backdrop-blur-sm">
55              <div className="absolute -top-4 -right-4 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-4 shadow-2xl">
56                <CheckCircle2 className="h-8 w-8 text-white" />
57              </div>
58              <div className="absolute -bottom-4 -left-4 bg-slate-800 rounded-2xl p-4 shadow-2xl border border-slate-700">
59                <div className="flex items-center gap-2">
60                  <Star className="h-5 w-5 text-yellow-400 fill-yellow-400" />
61                  <span className="text-white font-bold">4.9</span>
62                </div>
63              </div>
64              
65              <div className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl p-6 h-80 flex items-center justify-center border border-slate-700">
66                <div className="text-center space-y-4">
67                  <div className="w-20 h-20 mx-auto bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl flex items-center justify-center">
68                    <ArrowRight className="h-10 w-10 text-white" />
69                  </div>
70                  <p className="text-slate-400">Interactive Preview</p>
71                </div>
72              </div>
73            </div>
74          </div>
75        </div>
76      </div>
77    </div>
78  );
79}