{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-2",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/hero-2.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { motion, AnimatePresence, type Variants } from \"motion/react\";\nimport { ArrowRight, ArrowDown, Play, ChevronDown } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface NavLink {\n    label: string;\n    href: string;\n    active?: boolean;\n    hasDropdown?: boolean;\n    dropdownItems?: { label: string; href: string }[];\n}\n\nexport interface SocialLink {\n    label: string;\n    href: string;\n}\n\nexport interface Hero2Props {\n    brand?: React.ReactNode;\n    navLinks?: NavLink[];\n    headline?: React.ReactNode;\n    description?: string;\n    primaryCtaLabel?: string;\n    primaryCtaHref?: string;\n    secondaryCtaLabel?: string;\n    secondaryCtaHref?: string;\n    socialLinks?: SocialLink[];\n    signInLabel?: string;\n    signInHref?: string;\n    className?: string;\n}\n\nconst DEFAULT_NAV: NavLink[] = [\n    { label: \"Home\", href: \"#\", active: true },\n    { label: \"Pricing\", href: \"#\" },\n    { label: \"About\", href: \"#\" },\n    { label: \"FAQs\", href: \"#\" },\n];\n\nconst DEFAULT_SOCIAL: SocialLink[] = [\n    { label: \"Linkedin\", href: \"#\" },\n    { label: \"Instagram\", href: \"#\" },\n    { label: \"Behance\", href: \"#\" },\n];\n\nexport function Hero2({\n    brand = \"Watermelon\",\n    navLinks = DEFAULT_NAV,\n    headline = (\n        <>\n            Automate Smarter,<br />\n            Work <span className=\"italic font-medium font-serif text-[oklch(0.6378_0.1051_172.72)]\">Faster.</span>\n        </>\n    ),\n    description = \"Say goodbye to repetitive tasks. Our AI-driven platform streamlines\\nyour workflows so your team can focus on what really matters.\",\n    primaryCtaLabel = \"See It In Action\",\n    secondaryCtaLabel = \"Book a demo\",\n    socialLinks = DEFAULT_SOCIAL,\n    signInLabel = \"Sign in\",\n    className,\n}: Hero2Props) {\n    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);\n    const [hoveredLink, setHoveredLink] = useState<string | null>(null);\n    const [activeLink, setActiveLink] = useState<string | null>(\n        navLinks.find((link) => link.active)?.label || navLinks[0]?.label || null\n    );\n\n    const itemVariants: Variants = {\n        hidden: { opacity: 0, y: 15 },\n        visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: \"easeOut\" } },\n    };\n\n    const containerVariants: Variants = {\n        hidden: { opacity: 0 },\n        visible: { opacity: 1, transition: { staggerChildren: 0.1, delayChildren: 0.1 } },\n    };\n\n    return (\n        <section\n            className={cn(\n                \"relative w-full min-h-screen flex flex-col justify-between overflow-hidden bg-slate-50 selection:bg-emerald-100 selection:text-emerald-900\",\n                className\n            )}\n        >\n            {/* Background Image */}\n            <div className=\"absolute inset-0 z-0\">\n                <img\n                    src={\n                    \"https://assets.watermelon.sh/hero-2.avif\"\n                    }\n                    alt=\"Background\"\n                    className=\"absolute inset-0 h-full w-full object-cover object-right md:object-center opacity-100\"\n                />\n            </div>\n\n            {/* Header / Navbar */}\n            <div className=\"w-full max-w-[1440px] mx-auto relative z-50\">\n                <header className=\"flex items-center justify-between px-6 md:px-10 lg:px-16 xl:px-24 py-6 md:py-8\">\n                    {/* Brand Logo */}\n                    <a href=\"/\" className=\"flex items-center gap-1 group\">\n                        {typeof brand === \"string\" ? (\n                            <span className=\"relative text-slate-900 font-bold text-xl tracking-tight select-none\">\n                                {brand}\n                                <span className=\"absolute top-1 -right-1.5 w-1 h-1 rounded-full bg-[oklch(0.6378_0.1051_172.72)]\"></span>\n                            </span>\n                        ) : (\n                            brand\n                        )}\n                    </a>\n\n                    {/* Desktop Navigation */}\n                    <nav className=\"hidden md:block\">\n                        <ul className=\"flex items-center gap-10 lg:gap-14\" onMouseLeave={() => setHoveredLink(null)}>\n                            {navLinks.map((link) => (\n                                <li\n                                    key={link.label}\n                                    className=\"relative py-2 flex flex-col items-center group\"\n                                    onMouseEnter={() => setHoveredLink(link.label)}\n                                >\n                                    <a\n                                        href={link.href}\n                                        onClick={(e) => {\n                                            if (link.href === \"#\") e.preventDefault();\n                                            setActiveLink(link.label);\n                                        }}\n                                        className={cn(\n                                            \"text-sm font-medium transition-colors flex items-center gap-1.5\",\n                                            (hoveredLink === link.label || (!hoveredLink && activeLink === link.label)) ? \"text-slate-900 font-semibold\" : \"text-slate-400\"\n                                        )}\n                                    >\n                                        {link.label}\n                                        {link.hasDropdown && (\n                                            <ChevronDown className=\"w-3.5 h-3.5 opacity-50 stroke-[2.5] transition-transform duration-200 group-hover:rotate-180\" />\n                                        )}\n                                    </a>\n                                    {/* Active/Hover Indicator Dot */}\n                                    {(hoveredLink === link.label || (!hoveredLink && activeLink === link.label)) && (\n                                        <motion.span\n                                            layoutId=\"activeDot\"\n                                            className=\"absolute -bottom-1.5 w-1 h-1 rounded-full bg-[oklch(0.6378_0.1051_172.72)]\"\n                                            transition={{ type: \"spring\", stiffness: 400, damping: 30 }}\n                                        />\n                                    )}\n                                </li>\n                            ))}\n                        </ul>\n                    </nav>\n\n                    {/* Desktop Sign in button */}\n                    <div className=\"hidden md:block\">\n                        <Button variant=\"outline\" className=\"rounded-full px-7 h-10 text-sm font-medium bg-white/60 backdrop-blur-md shadow-[0_0_0_1px_rgba(0,0,0,0.06),inset_0_1px_1px_rgba(255,255,255,0.8),0_1px_2px_rgba(0,0,0,0.04),0_2px_4px_rgba(0,0,0,0.02)] hover:text-black transition-all text-slate-900 border-0\">\n                            {signInLabel}\n                        </Button>\n                    </div>\n\n                    {/* Mobile Menu Toggle */}\n                    <button\n                        onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}\n                        className=\"md:hidden z-50 p-2\"\n                    >\n                        <div className=\"w-5 flex flex-col gap-1.5\">\n                            <span className={cn(\"h-0.5 bg-slate-900 transition-transform\", isMobileMenuOpen ? \"rotate-45 translate-y-2\" : \"\")} />\n                            <span className={cn(\"h-0.5 bg-slate-900 transition-opacity\", isMobileMenuOpen ? \"opacity-0\" : \"\")} />\n                            <span className={cn(\"h-0.5 bg-slate-900 transition-transform\", isMobileMenuOpen ? \"-rotate-45 -translate-y-2\" : \"\")} />\n                        </div>\n                    </button>\n                </header>\n            </div>\n\n            {/* Mobile Navigation Drawer */}\n            <AnimatePresence>\n                {isMobileMenuOpen && (\n                    <motion.div\n                        initial={{ opacity: 0, y: -20 }}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: -20 }}\n                        className=\"absolute inset-0 bg-white z-40 flex flex-col pt-24 px-6 pb-6 h-screen\"\n                    >\n                        <nav className=\"flex flex-col gap-6\">\n                            {navLinks.map((link) => (\n                                <a\n                                    key={link.label}\n                                    href={link.href}\n                                    onClick={(e) => {\n                                        if (link.href === \"#\") e.preventDefault();\n                                        setActiveLink(link.label);\n                                        setIsMobileMenuOpen(false);\n                                    }}\n                                    className={cn(\n                                        \"text-2xl font-semibold flex items-center gap-2\",\n                                        activeLink === link.label ? \"text-slate-900\" : \"text-slate-400\"\n                                    )}\n                                >\n                                    {link.label}\n                                </a>\n                            ))}\n                        </nav>\n                        <div className=\"mt-auto\">\n                            <Button className=\"w-full rounded-full bg-[oklch(0.6378_0.1051_172.72)] hover:opacity-90 text-white h-12 text-base\">\n                                {signInLabel}\n                            </Button>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n\n            {/* Main Content Area */}\n            <motion.div\n                variants={containerVariants}\n                initial=\"hidden\"\n                animate=\"visible\"\n                className=\"relative z-10 flex-1 flex flex-col justify-center w-full max-w-[1440px] mx-auto px-6 md:px-10 lg:px-16 xl:px-24 py-12 md:py-20\"\n            >\n                <div className=\"max-w-2xl lg:max-w-3xl\">\n                    <motion.h1\n                        variants={itemVariants}\n                        className=\"text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight text-slate-900 leading-[1.08]\"\n                    >\n                        {headline}\n                    </motion.h1>\n\n                    <motion.p\n                        variants={itemVariants}\n                        className=\"mt-4 text-base md:text-lg text-slate-500 leading-relaxed max-w-2xl whitespace-pre-line\"\n                    >\n                        {description}\n                    </motion.p>\n\n                    <motion.div variants={itemVariants} className=\"mt-8 flex flex-col sm:flex-row items-stretch sm:items-center gap-4\">\n                        <Button className=\"rounded-full px-8 bg-[oklch(0.6378_0.1051_172.72)] hover:brightness-105 text-white h-12 text-sm md:text-base font-medium shadow-[0_0_0_1px_rgba(0,0,0,0.05),inset_0_1px_1px_rgba(255,255,255,0.3),0_4px_16px_rgba(0,0,0,0.1)] border-0 transition-all group\">\n                            {primaryCtaLabel}\n                            <ArrowRight className=\"w-4 h-4 ml-1.5 transition-transform group-hover:translate-x-1\" />\n                        </Button>\n\n                        <Button variant=\"secondary\" className=\"rounded-full px-8 bg-[#eaeff1]/80 hover:bg-[#eaeff1] backdrop-blur-sm shadow-[0_0_0_1px_rgba(0,0,0,0.04),inset_0_1px_1px_rgba(255,255,255,0.9),0_2px_4px_rgba(0,0,0,0.02)] text-slate-900 h-12 text-sm md:text-base font-medium border-0 transition-all\">\n                            {secondaryCtaLabel}\n                            <Play className=\"w-3.5 h-3.5 ml-2 fill-slate-900\" />\n                        </Button>\n                    </motion.div>\n                </div>\n            </motion.div>\n\n            {/* Bottom Section */}\n            <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                transition={{ delay: 0.5, duration: 0.8 }}\n                className=\"relative z-10 flex flex-col md:flex-row items-center justify-between w-full max-w-[1440px] mx-auto px-6 md:px-10 lg:px-16 xl:px-24 pb-8 md:pb-12 gap-y-8 gap-x-6\"\n            >\n                {/* Social Links */}\n                <div className=\"flex items-center gap-8 lg:gap-14 w-full md:w-auto justify-center md:justify-start\">\n                    {socialLinks.map((social) => (\n                        <a\n                            key={social.label}\n                            href={social.href}\n                            className=\"text-slate-500 hover:text-slate-900 text-sm md:text-base transition-colors\"\n                        >\n                            {social.label}\n                        </a>\n                    ))}\n                </div>\n\n                {/* Scroll Indicator */}\n                <div className=\"flex items-center gap-2 text-slate-500 text-sm md:text-base cursor-pointer group w-full md:w-auto justify-start md:justify-end\">\n                    <span>Scroll to Discover</span>\n                    <motion.span\n                        animate={{ y: [0, 4, 0] }}\n                        transition={{ repeat: Infinity, duration: 2, ease: \"easeInOut\" }}\n                    >\n                        <ArrowDown className=\"w-4 h-4 transition-transform group-hover:translate-y-1\" strokeWidth={1.5} />\n                    </motion.span>\n                </div>\n            </motion.div>\n        </section>\n    );\n}",
      "type": "registry:ui",
      "target": "components/ui/hero-2.tsx"
    }
  ],
  "type": "registry:ui"
}