"use client"; import React, { useState } from "react"; import { motion, Variants } from "framer-motion"; import { ChevronRight, Mail, Star, ShieldCheck, Sparkles } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } const staggerVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.1, }, }, }; const itemVariants: Variants = { hidden: { opacity: 0, x: -20 }, visible: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 100, damping: 20 }, }, }; const imageVariants: Variants = { hidden: { opacity: 0, scale: 0.95 }, visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] }, }, }; export function SplitScreenClassicHero() { const [email, setEmail] = useState(""); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); }; return (

v2.0 is now live Build your digital empire with speed. The ultimate component ecosystem for developers who refuse to compromise on quality. Ship faster, design better, and scale without limits.

setEmail(e.target.value)} placeholder="Enter your email address" className="w-full pl-8 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm text-neutral-900 dark:text-white placeholder:text-neutral-500 outline-none" required />

{[1, 2, 3, 4].map((i) => (

))}

+2k

{[1, 2, 3, 4, 5].map((s) => ( ))} 4.9/5

from 2,000+ early adopters

Secure by Design

Enterprise-grade security built into every line.

); } export default SplitScreenClassicHero;