"use client"; import { useState, useEffect } from "react"; import { motion } from "motion/react"; import { Button } from "@/components/ui/button"; import { ArrowRight, CheckCircle2, ExternalLink } from "lucide-react"; import Image from "next/image"; import { cn } from "@/lib/utils"; export default function HeroSection01() { // State for animation controls const [isLoaded, setIsLoaded] = useState(false); const features = [ "Built with Shadcn UI and Tailwind CSS", "Smooth animations and transitions", "Fully responsive and accessible", "Dark and light mode support" ]; // Trigger animations after component mounts useEffect(() => { setIsLoaded(true); }, []); return (

{/* Background elements with smooth transitions */}

{/* Animated gradient background */}

{/* Animated shapes */}

{/* Left content - Text and CTA */}

{/* Badge with animation */} Modern UI Components {/* Main heading with staggered animation */}

Create stunning interfaces with smooth transitions Build beautiful, accessible, and performant user interfaces with our modern component library powered by Shadcn UI and Tailwind CSS.

{/* CTA buttons with animation */}

{/* Right content - Feature showcase */}

{feature}

{/* Decorative elements */}

); }