1npm install framer-motion clsx tailwind-merge

1"use client";
2
3import { motion } from "framer-motion";
4import { Sparkles, ArrowRight } from "lucide-react";
5import { cn } from "@/lib/utils";
6
7export default function AIHeroSection() {
8  return (
9    <div className="relative w-full min-h-[600px] flex flex-col items-center justify-center overflow-hidden rounded-3xl bg-[#030305] border border-white/5">
10      
11      {/* Background Gradients */}
12      <div className="absolute top-0 inset-x-0 h-[500px] bg-gradient-to-b from-indigo-500/20 via-purple-500/5 to-transparent pointer-events-none" />
13      <div className="absolute top-[-20%] left-1/2 -translate-x-1/2 w-[60%] h-[50%] bg-indigo-500/30 blur-[120px] rounded-full pointer-events-none" />
14
15      <div className="relative z-10 flex flex-col items-center text-center px-6 max-w-4xl space-y-8 mt-12">
16        {/* Badge */}
17        <motion.div 
18          initial={{ opacity: 0, y: 20 }}
19          animate={{ opacity: 1, y: 0 }}
20          transition={{ duration: 0.5 }}
21          className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass border border-white/10 text-sm text-gray-300"
22        >
23          <Sparkles className="w-4 h-4 text-indigo-400" />
24          <span>NCSS AI Intelligence Engine 2.0</span>
25        </motion.div>
26
27        {/* Heading */}
28        <motion.h1 
29          initial={{ opacity: 0, y: 20 }}
30          animate={{ opacity: 1, y: 0 }}
31          transition={{ duration: 0.5, delay: 0.1 }}
32          className="text-5xl md:text-7xl font-extrabold tracking-tight text-white leading-[1.1]"
33        >
34          Design at the speed of <br className="hidden md:block" />
35          <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400">
36            Artificial Thought.
37          </span>
38        </motion.h1>
39
40        {/* Subtitle */}
41        <motion.p 
42          initial={{ opacity: 0, y: 20 }}
43          animate={{ opacity: 1, y: 0 }}
44          transition={{ duration: 0.5, delay: 0.2 }}
45          className="text-lg md:text-xl text-gray-400 max-w-2xl"
46        >
47          Harness the power of the next-generation component library. 
48          Build AI-native interfaces that feel alive, responsive, and truly intelligent.
49        </motion.p>
50
51        {/* CTAs */}
52        <motion.div 
53          initial={{ opacity: 0, y: 20 }}
54          animate={{ opacity: 1, y: 0 }}
55          transition={{ duration: 0.5, delay: 0.3 }}
56          className="flex flex-col sm:flex-row items-center gap-4 pt-4"
57        >
58          <button className="group relative inline-flex items-center gap-2 px-8 py-4 bg-white text-black font-semibold rounded-full overflow-hidden transition-all hover:scale-105 active:scale-95">
59            Start Building
60            <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
61          </button>
62          
63          <button className="inline-flex items-center gap-2 px-8 py-4 bg-white/5 hover:bg-white/10 text-white font-medium rounded-full transition-all border border-white/10 backdrop-blur-md">
64            View Documentation
65          </button>
66        </motion.div>
67      </div>
68
69      {/* Decorative Bottom Mesh */}
70      <div className="absolute bottom-0 inset-x-0 h-[200px] bg-[url('/grid.svg')] bg-bottom bg-no-repeat opacity-30 mask-image:linear-gradient(to_top,black,transparent)" style={{ WebkitMaskImage: 'linear-gradient(to top, black, transparent)' }} />
71    </div>
72  );
73}
74