{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "center-content-hero",
  "type": "registry:block",
  "title": "Center Content",
  "description": "A centered hero section with content",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/blocks/hero-sections/center-content-hero/hero.tsx",
      "content": "'use client'\r\n\r\nimport Link from 'next/link'\r\nimport { cn } from '@/lib/utils'\r\nimport { buttonVariants } from '@/components/ui/button'\r\nimport { InteractiveGridPattern } from '@/components/ui/interactive-grid-pattern'\r\nimport { motion as m, Variants } from 'motion/react'\r\n\r\nconst staggerDelay = 0.4\r\nconst initialDelay = 0.2 // initial delay before the first element animates\r\nconst totalDelay = initialDelay + staggerDelay * 6 // number of elements animating\r\n\r\nexport default function Hero() {\r\n    const variants = {\r\n        hidden: () => ({\r\n            opacity: 0,\r\n            filter: 'blur(10px)',\r\n            transform: 'translateY(10px) scale(0.95)',\r\n        }),\r\n        visible: (custom: number) => ({\r\n            opacity: 1,\r\n            transform: 'translateY(0) scale(1)',\r\n            filter: 'blur(0)',\r\n            transition: {\r\n                delay: custom * staggerDelay + initialDelay,\r\n                duration: 0.5,\r\n                ease: 'easeInOut',\r\n            },\r\n        }),\r\n    }\r\n\r\n    return (\r\n        <div className=\"relative flex min-h-svh w-full flex-col items-center justify-between\">\r\n            <InteractiveGridPattern\r\n                width={100}\r\n                height={100}\r\n                squares={[80, 80]}\r\n                squaresClassName=\"hover:fill-muted\"\r\n                className=\"opacity-40 dark:opacity-30\"\r\n            />\r\n\r\n            {/* Hero Section */}\r\n            <section className=\"container flex w-full flex-1 items-center justify-center overflow-hidden\">\r\n                <div className=\"relative flex flex-col items-center justify-center gap-6\">\r\n                    <h1 className=\"text-center text-2xl font-bold text-balance md:text-3xl lg:text-4xl xl:text-5xl\">\r\n                        <m.span\r\n                            variants={variants as Variants}\r\n                            custom={0}\r\n                            initial=\"hidden\"\r\n                            animate=\"visible\"\r\n                        >\r\n                            Starterkits.\r\n                        </m.span>{' '}\r\n                        <m.span\r\n                            variants={variants as Variants}\r\n                            custom={1}\r\n                            initial=\"hidden\"\r\n                            animate=\"visible\"\r\n                        >\r\n                            Components.\r\n                        </m.span>{' '}\r\n                        <m.span\r\n                            variants={variants as Variants}\r\n                            custom={2}\r\n                            initial=\"hidden\"\r\n                            animate=\"visible\"\r\n                        >\r\n                            Blocks.\r\n                        </m.span>\r\n                    </h1>\r\n                    <m.p\r\n                        variants={variants as Variants}\r\n                        custom={3}\r\n                        initial=\"hidden\"\r\n                        animate=\"visible\"\r\n                        className=\"text-muted-foreground max-w-2xl text-center text-sm font-semibold text-balance md:text-base lg:text-lg\"\r\n                    >\r\n                        \"Build faster with free{' '}\r\n                        <span className=\"text-foreground\">Starter kits</span>,\r\n                        Re-usable{' '}\r\n                        <span className=\"text-foreground\">Components</span>, and\r\n                        modular <span className=\"text-foreground\">Blocks</span>.\r\n                        Everything you need from{' '}\r\n                        <span className=\"text-foreground\">MVP</span> to\r\n                        <span className=\"text-foreground\">\r\n                            {' '}\r\n                            production-ready applications.\r\n                        </span>\r\n                        \"\r\n                    </m.p>\r\n                    <div className=\"flex flex-col items-center gap-2 sm:flex-row\">\r\n                        <m.div\r\n                            variants={variants as Variants}\r\n                            custom={4}\r\n                            initial=\"hidden\"\r\n                            animate=\"visible\"\r\n                            className=\"w-full sm:w-fit\"\r\n                        >\r\n                            <Link\r\n                                href=\"#\"\r\n                                className={cn(\r\n                                    buttonVariants({\r\n                                        size: 'sm',\r\n                                        className:\r\n                                            'w-full sm:h-10 sm:w-fit sm:px-6 sm:has-[>svg]:px-4',\r\n                                    })\r\n                                )}\r\n                            >\r\n                                Pro Toolkit\r\n                            </Link>\r\n                        </m.div>\r\n                        <m.div\r\n                            variants={variants as Variants}\r\n                            custom={5}\r\n                            initial=\"hidden\"\r\n                            animate=\"visible\"\r\n                            className=\"w-full sm:w-fit\"\r\n                        >\r\n                            <Link\r\n                                href=\"#\"\r\n                                className={cn(\r\n                                    buttonVariants({\r\n                                        size: 'sm',\r\n                                        variant: 'secondary',\r\n                                        className:\r\n                                            'w-full sm:h-10 sm:w-fit sm:px-6 sm:has-[>svg]:px-4',\r\n                                    })\r\n                                )}\r\n                            >\r\n                                Browse Free Resources\r\n                            </Link>\r\n                        </m.div>\r\n                    </div>\r\n\r\n                    {/* Faded Lines on content */}\r\n                    <FadeLine\r\n                        className=\"absolute -top-10 -left-1/4\"\r\n                        opacity={0.2}\r\n                        fadeWidth=\"10%\"\r\n                        width=\"150%\"\r\n                        height=\"1px\"\r\n                        orientation=\"horizontal\"\r\n                        delay={0}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -bottom-10 -left-1/4\"\r\n                        opacity={0.2}\r\n                        fadeWidth=\"10%\"\r\n                        width=\"150%\"\r\n                        height=\"1px\"\r\n                        orientation=\"horizontal\"\r\n                        delay={0.1}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -top-14 -left-1/4\"\r\n                        opacity={0.2}\r\n                        fadeWidth=\"10%\"\r\n                        width=\"150%\"\r\n                        height=\"1px\"\r\n                        orientation=\"horizontal\"\r\n                        delay={0.2}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -bottom-14 -left-1/4\"\r\n                        opacity={0.2}\r\n                        fadeWidth=\"10%\"\r\n                        width=\"150%\"\r\n                        height=\"1px\"\r\n                        orientation=\"horizontal\"\r\n                        delay={0.3}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -top-3/4 left-0 md:-left-10\"\r\n                        fadeWidth=\"15%\"\r\n                        opacity={0.2}\r\n                        width=\"1px\"\r\n                        height=\"250%\"\r\n                        orientation=\"vertical\"\r\n                        delay={0.4}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -top-3/4 right-0 md:-right-10\"\r\n                        fadeWidth=\"15%\"\r\n                        opacity={0.2}\r\n                        width=\"1px\"\r\n                        height=\"250%\"\r\n                        orientation=\"vertical\"\r\n                        delay={0.5}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -top-3/4 left-4 md:-left-14\"\r\n                        fadeWidth=\"15%\"\r\n                        opacity={0.2}\r\n                        width=\"1px\"\r\n                        height=\"250%\"\r\n                        orientation=\"vertical\"\r\n                        delay={0.6}\r\n                    />\r\n\r\n                    <FadeLine\r\n                        className=\"absolute -top-3/4 right-4 md:-right-14\"\r\n                        fadeWidth=\"15%\"\r\n                        opacity={0.2}\r\n                        width=\"1px\"\r\n                        height=\"250%\"\r\n                        orientation=\"vertical\"\r\n                        delay={0.7}\r\n                    />\r\n                </div>\r\n            </section>\r\n        </div>\r\n    )\r\n}\r\n\r\ninterface FadeLineProps {\r\n    className?: string\r\n    color?: string\r\n    fadeWidth?: string\r\n    orientation: 'horizontal' | 'vertical'\r\n    opacity?: number\r\n    width: string\r\n    height?: string\r\n    delay?: number\r\n}\r\n\r\nfunction FadeLine({\r\n    className = '',\r\n    color = 'var(--foreground)',\r\n    fadeWidth = '25%',\r\n    orientation,\r\n    opacity = 1,\r\n    width,\r\n    height,\r\n    delay = 0,\r\n}: FadeLineProps) {\r\n    const gradientDirection =\r\n        orientation === 'vertical' ? 'to bottom' : 'to right'\r\n\r\n    const animationProps =\r\n        orientation === 'vertical'\r\n            ? {\r\n                  initial: { height: 0 },\r\n                  animate: { height },\r\n                  transition: {\r\n                      duration: 1.5,\r\n                      delay: delay + totalDelay,\r\n                      ease: 'easeOut' as const,\r\n                  },\r\n              }\r\n            : {\r\n                  initial: { width: 0 },\r\n                  animate: { width },\r\n                  transition: {\r\n                      duration: 1.5,\r\n                      delay: delay + totalDelay,\r\n                      ease: 'easeOut' as const,\r\n                  },\r\n              }\r\n\r\n    return (\r\n        <m.span\r\n            {...animationProps}\r\n            className={`${className}`}\r\n            style={{\r\n                background: `linear-gradient(${gradientDirection}, transparent 0%, ${color} ${fadeWidth}, ${color} calc(100% - ${fadeWidth}), transparent 100%)`,\r\n                opacity,\r\n                width,\r\n                height,\r\n            }}\r\n        />\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/hero.tsx"
    },
    {
      "path": "registry/default/blocks/hero-sections/center-content-hero/header.tsx",
      "content": "'use client'\r\n\r\nimport { Button, buttonVariants } from '@/components/ui/button'\r\nimport { cn } from '@/lib/utils'\r\nimport Link, { LinkProps } from 'next/link'\r\nimport React from 'react'\r\nimport {\r\n    Popover,\r\n    PopoverContent,\r\n    PopoverTrigger,\r\n} from '@/components/ui/popover'\r\n\r\nconst navLinks = [\r\n    {\r\n        href: '#',\r\n        label: 'Features',\r\n    },\r\n    {\r\n        href: '#',\r\n        label: 'About',\r\n    },\r\n    {\r\n        href: '#',\r\n        label: 'Pricing',\r\n    },\r\n    {\r\n        href: '#',\r\n        label: 'Contact',\r\n    },\r\n    {\r\n        href: '#',\r\n        label: 'Teams',\r\n    },\r\n]\r\n\r\nexport default function Header() {\r\n    return (\r\n        <header className=\"bg-background sticky top-0 z-20 container grid h-14 w-full grid-cols-2 gap-4 md:grid-cols-5\">\r\n            <div className=\"flex items-center justify-start gap-4\">\r\n                <MobileNav />\r\n                <Link\r\n                    href=\"#\"\r\n                    className=\"focus-visible:border-ring focus-visible:ring-ring/50 flex text-lg font-bold outline-none focus-visible:ring-[3px]\"\r\n                >\r\n                    Acme\r\n                </Link>\r\n            </div>\r\n\r\n            <nav className=\"col-span-3 hidden place-items-center md:grid\">\r\n                <ul className=\"flex items-center gap-2\">\r\n                    {navLinks.map((link) => (\r\n                        <li key={link.label} className=\"inline-block\">\r\n                            <Link\r\n                                href={link.href}\r\n                                className={cn(\r\n                                    buttonVariants({\r\n                                        variant: 'ghost',\r\n                                        size: 'sm',\r\n                                    })\r\n                                )}\r\n                            >\r\n                                {link.label}\r\n                            </Link>\r\n                        </li>\r\n                    ))}\r\n                </ul>\r\n            </nav>\r\n\r\n            <div className=\"flex items-center justify-end gap-2\">\r\n                <Link\r\n                    href=\"#\"\r\n                    className={cn(\r\n                        buttonVariants({ variant: 'ghost', size: 'sm' })\r\n                    )}\r\n                >\r\n                    Log in\r\n                </Link>\r\n                <Link href=\"#\" className={cn(buttonVariants({ size: 'sm' }))}>\r\n                    Sign up\r\n                </Link>\r\n            </div>\r\n        </header>\r\n    )\r\n}\r\n\r\nfunction MobileNav() {\r\n    const [open, setOpen] = React.useState(false)\r\n\r\n    return (\r\n        <Popover open={open} onOpenChange={setOpen}>\r\n            <PopoverTrigger asChild>\r\n                <Button\r\n                    variant=\"ghost\"\r\n                    className={cn(\r\n                        'extend-touch-target block h-8 touch-manipulation items-center justify-start gap-2.5 !p-0 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent md:hidden dark:hover:bg-transparent'\r\n                    )}\r\n                >\r\n                    <div className=\"relative flex h-8 w-4 items-center justify-center\">\r\n                        <div className=\"relative size-4\">\r\n                            <span\r\n                                className={cn(\r\n                                    'bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100',\r\n                                    open ? 'top-[0.4rem] -rotate-45' : 'top-1'\r\n                                )}\r\n                            />\r\n                            <span\r\n                                className={cn(\r\n                                    'bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100',\r\n                                    open ? 'top-[0.4rem] rotate-45' : 'top-2.5'\r\n                                )}\r\n                            />\r\n                        </div>\r\n                        <span className=\"sr-only\">Toggle Menu</span>\r\n                    </div>\r\n                </Button>\r\n            </PopoverTrigger>\r\n            <PopoverContent\r\n                className=\"bg-background/90 no-scrollbar h-(--radix-popover-content-available-height) w-(--radix-popover-content-available-width) overflow-y-auto rounded-none border-none p-0 shadow-none backdrop-blur duration-100\"\r\n                align=\"start\"\r\n                side=\"bottom\"\r\n                alignOffset={-16}\r\n                sideOffset={14}\r\n            >\r\n                <div className=\"flex flex-col gap-12 overflow-auto px-6 py-6\">\r\n                    <div className=\"flex flex-col gap-4\">\r\n                        <div className=\"text-muted-foreground text-sm font-medium\">\r\n                            Menu\r\n                        </div>\r\n                        <div className=\"flex flex-col gap-3\">\r\n                            {navLinks.map((item, index) => (\r\n                                <MobileLink\r\n                                    key={index}\r\n                                    href={item.href}\r\n                                    onOpenChange={setOpen}\r\n                                >\r\n                                    {item.label}\r\n                                </MobileLink>\r\n                            ))}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </PopoverContent>\r\n        </Popover>\r\n    )\r\n}\r\n\r\nfunction MobileLink({\r\n    href,\r\n    onOpenChange,\r\n    className,\r\n    children,\r\n    ...props\r\n}: LinkProps & {\r\n    onOpenChange?: (open: boolean) => void\r\n    children: React.ReactNode\r\n    className?: string\r\n}) {\r\n    return (\r\n        <Link\r\n            href={href}\r\n            className={cn('text-2xl font-medium', className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </Link>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/header.tsx"
    }
  ]
}