{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero",
  "type": "registry:block",
  "title": "Hero Section",
  "description": "A hero section with badge, title, description, CTA buttons, and mockup display.",
  "registryDependencies": [
    "https://launchuicomponents.com/r/button.json",
    "https://launchuicomponents.com/r/badge.json",
    "https://launchuicomponents.com/r/mockup.json",
    "https://launchuicomponents.com/r/glow.json",
    "https://launchuicomponents.com/r/screenshot.json"
  ],
  "files": [
    {
      "path": "components/sections/hero/default.tsx",
      "content": "import { ArrowRightIcon } from \"lucide-react\";\nimport { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport Github from \"../../logos/github\";\nimport { Badge } from \"../../ui/badge\";\nimport Glow from \"../../ui/glow\";\nimport { LinkButton, type LinkButtonProps } from \"../../ui/link-button\";\nimport { Mockup, MockupFrame } from \"../../ui/mockup\";\nimport Screenshot from \"../../ui/screenshot\";\nimport { Section } from \"../../ui/section\";\n\ninterface HeroButtonProps extends Omit<LinkButtonProps, \"children\"> {\n  text: string;\n}\n\ninterface HeroProps {\n  title?: string;\n  description?: string;\n  mockup?: ReactNode | false;\n  badge?: ReactNode | false;\n  buttons?: HeroButtonProps[] | false;\n  className?: string;\n}\n\nconst DEFAULT_HERO_BUTTONS: HeroButtonProps[] = [\n  {\n    href: \"https://www.launchuicomponents.com/\",\n    text: \"Get Started\",\n    variant: \"default\",\n  },\n  {\n    href: \"https://www.launchuicomponents.com/\",\n    text: \"GitHub\",\n    variant: \"glow\",\n    icon: <Github className=\"mr-2 size-4\" />,\n  },\n];\n\nconst DEFAULT_HERO_BADGE = (\n  <Badge variant=\"outline\" className=\"animate-appear\">\n    <span className=\"text-muted-foreground\">\n      New version of Launch UI is out!\n    </span>\n    <a href=\"https://www.launchuicomponents.com/\" className=\"flex items-center gap-1\">\n      Get started\n      <ArrowRightIcon className=\"size-3\" />\n    </a>\n  </Badge>\n);\n\nconst DEFAULT_HERO_MOCKUP = (\n  <Screenshot\n    srcLight=\"/placeholder-light.svg\"\n    srcDark=\"/placeholder-dark.svg\"\n    alt=\"Launch UI app screenshot\"\n    width={1248}\n    height={765}\n    loading=\"eager\"\n    className=\"w-full\"\n  />\n);\n\nexport default function Hero({\n  title = \"Give your big idea the design it deserves\",\n  description = \"Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.\",\n  mockup = DEFAULT_HERO_MOCKUP,\n  badge = DEFAULT_HERO_BADGE,\n  buttons = DEFAULT_HERO_BUTTONS,\n  className,\n}: HeroProps) {\n  return (\n    <Section\n      className={cn(\n        \"fade-bottom overflow-hidden pb-0 sm:pb-0 md:pb-0\",\n        className,\n      )}\n    >\n      <div className=\"max-w-container mx-auto flex flex-col gap-12 pt-16 sm:gap-24\">\n        <div className=\"flex flex-col items-center gap-6 text-center sm:gap-12\">\n          {badge !== false && badge}\n          <h1 className=\"animate-appear from-foreground to-foreground dark:to-muted-foreground relative z-10 inline-block bg-linear-to-r bg-clip-text text-4xl leading-tight font-semibold text-balance text-transparent drop-shadow-2xl sm:text-6xl sm:leading-tight md:text-8xl md:leading-tight\">\n            {title}\n          </h1>\n          <p className=\"text-md animate-appear text-muted-foreground relative z-10 max-w-[740px] font-medium text-balance opacity-0 delay-100 sm:text-xl\">\n            {description}\n          </p>\n          {buttons !== false && buttons.length > 0 && (\n            <div className=\"animate-appear relative z-10 flex justify-center gap-4 opacity-0 delay-300\">\n              {buttons.map((button) => (\n                <LinkButton\n                  key={`${button.href}-${button.text}`}\n                  variant={button.variant || \"default\"}\n                  size=\"lg\"\n                  href={button.href}\n                  icon={button.icon}\n                  iconRight={button.iconRight}\n                >\n                  {button.text}\n                </LinkButton>\n              ))}\n            </div>\n          )}\n          {mockup !== false && (\n            <div className=\"relative w-full pt-12\">\n              <MockupFrame\n                className=\"animate-appear opacity-0 delay-700\"\n                size=\"small\"\n              >\n                <Mockup\n                  type=\"responsive\"\n                  className=\"bg-background/90 w-full rounded-xl border-0\"\n                >\n                  {mockup}\n                </Mockup>\n              </MockupFrame>\n              <Glow\n                variant=\"top\"\n                className=\"animate-appear-zoom opacity-0 delay-1000\"\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/sections/hero/default.tsx"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"text-primary-foreground shadow-sm dark:hover:from-primary/80 hover:from-primary/70 dark:hover:to-primary/70 hover:to-primary/90 bg-linear-to-b from-primary/60 to-primary/100 dark:from-primary/100 dark:to-primary/70 border-t-primary\",\n        destructive:\n          \"bg-destructive/30 text-destructive-foreground shadow-xs hover:bg-destructive/90\",\n        outline:\n          \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n        glow: \"glass-4 hover:glass-5 shadow-md\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-foreground underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        xs: \"h-7 rounded-md px-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-5\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean;\n  }) {\n  const Comp = asChild ? Slot : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n",
      "type": "registry:ui",
      "target": "components/ui/button.tsx"
    },
    {
      "path": "components/ui/badge.tsx",
      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border border-border/100 dark:border-border/20 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 gap-2\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground dark:shadow-sm dark:border-transparent\",\n        brand:\n          \"border-transparent bg-brand text-primary-foreground dark:shadow-sm dark:border-transparent\",\n        \"brand-secondary\":\n          \"border-transparent bg-brand-foreground/20 text-brand dark:border-transparent\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground dark:shadow-sm dark:border-transparent\",\n        destructive:\n          \"border-transparent bg-destructive/30 text-destructive-foreground dark:shadow-sm dark:border-transparent\",\n        outline: \"text-foreground\",\n      },\n      size: {\n        default: \"px-2.5 py-1\",\n        sm: \"px-1\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Badge({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\n",
      "type": "registry:ui",
      "target": "components/ui/badge.tsx"
    },
    {
      "path": "components/ui/link-button.tsx",
      "content": "import { type VariantProps } from \"class-variance-authority\";\nimport { type ComponentProps, type ReactNode } from \"react\";\n\nimport { Button, buttonVariants } from \"./button\";\n\nexport interface LinkButtonProps {\n  href: string;\n  children: ReactNode;\n  variant?: VariantProps<typeof buttonVariants>[\"variant\"];\n  icon?: ReactNode;\n  iconRight?: ReactNode;\n  size?: ComponentProps<typeof Button>[\"size\"];\n}\n\nexport function LinkButton({\n  href,\n  children,\n  variant = \"default\",\n  icon,\n  iconRight,\n  size = \"lg\",\n}: LinkButtonProps) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <a href={href}>\n        {icon}\n        {children}\n        {iconRight}\n      </a>\n    </Button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/link-button.tsx"
    },
    {
      "path": "components/ui/mockup.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst mockupVariants = cva(\n  \"flex relative z-10 overflow-hidden shadow-2xl border border-border/70 dark:border-border/5 dark:border-t-border/15\",\n  {\n    variants: {\n      type: {\n        mobile: \"rounded-[48px] max-w-[350px]\",\n        responsive: \"rounded-md\",\n      },\n    },\n    defaultVariants: {\n      type: \"responsive\",\n    },\n  },\n);\n\nexport interface MockupProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof mockupVariants> {}\n\nfunction Mockup({ className, type, ...props }: MockupProps) {\n  return (\n    <div\n      data-slot=\"mockup\"\n      className={cn(mockupVariants({ type, className }))}\n      {...props}\n    />\n  );\n}\n\nconst frameVariants = cva(\n  \"bg-border/50 flex relative z-10 overflow-hidden rounded-2xl dark:bg-border/10\",\n  {\n    variants: {\n      size: {\n        small: \"p-2\",\n        large: \"p-4\",\n      },\n    },\n    defaultVariants: {\n      size: \"small\",\n    },\n  },\n);\n\nexport interface MockupFrameProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof frameVariants> {}\n\nfunction MockupFrame({ className, size, ...props }: MockupFrameProps) {\n  return (\n    <div\n      data-slot=\"mockup-frame\"\n      className={cn(frameVariants({ size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Mockup, MockupFrame };\n",
      "type": "registry:ui",
      "target": "components/ui/mockup.tsx"
    },
    {
      "path": "components/ui/glow.tsx",
      "content": "import { cva, VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst glowVariants = cva(\"absolute w-full\", {\n  variants: {\n    variant: {\n      top: \"top-0\",\n      above: \"-top-[128px]\",\n      bottom: \"bottom-0\",\n      below: \"-bottom-[128px]\",\n      center: \"top-[50%]\",\n    },\n  },\n  defaultVariants: {\n    variant: \"top\",\n  },\n});\n\nfunction Glow({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof glowVariants>) {\n  return (\n    <div\n      data-slot=\"glow\"\n      className={cn(glowVariants({ variant }), className)}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"from-brand-foreground/50 to-brand-foreground/0 absolute left-1/2 h-[256px] w-[60%] -translate-x-1/2 scale-[2.5] rounded-[50%] bg-radial from-10% to-60% opacity-20 sm:h-[512px] dark:opacity-100\",\n          variant === \"center\" && \"-translate-y-1/2\",\n        )}\n      />\n      <div\n        className={cn(\n          \"from-brand/30 to-brand-foreground/0 absolute left-1/2 h-[128px] w-[40%] -translate-x-1/2 scale-200 rounded-[50%] bg-radial from-10% to-60% opacity-20 sm:h-[256px] dark:opacity-100\",\n          variant === \"center\" && \"-translate-y-1/2\",\n        )}\n      />\n    </div>\n  );\n}\n\nexport default Glow;\n",
      "type": "registry:ui",
      "target": "components/ui/glow.tsx"
    },
    {
      "path": "components/logos/github.tsx",
      "content": "const Github = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg width={24} height={24} viewBox=\"0 0 438.549 438.549\" {...props}>\n    <path\n      fill=\"currentColor\"\n      d=\"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z\"\n    ></path>\n  </svg>\n);\nexport default Github;\n",
      "type": "registry:component",
      "target": "components/logos/github.tsx"
    },
    {
      "path": "components/ui/screenshot.tsx",
      "content": "import Image, { type ImageProps } from \"next/image\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface ScreenshotProps {\n  srcLight: string;\n  srcDark?: string;\n  alt: string;\n  width: number;\n  height: number;\n  loading?: ImageProps[\"loading\"];\n  className?: string;\n}\n\nexport default function Screenshot({\n  srcLight,\n  srcDark,\n  alt,\n  width,\n  height,\n  loading,\n  className,\n}: ScreenshotProps) {\n  if (!srcDark) {\n    return (\n      <Image\n        src={srcLight}\n        alt={alt}\n        width={width}\n        height={height}\n        loading={loading}\n        className={className}\n        unoptimized={srcLight.endsWith(\".svg\")}\n      />\n    );\n  }\n\n  return (\n    <>\n      <Image\n        src={srcLight}\n        alt={alt}\n        width={width}\n        height={height}\n        loading={loading}\n        className={cn(className, \"block dark:hidden\")}\n        unoptimized={srcLight.endsWith(\".svg\")}\n      />\n      <Image\n        src={srcDark}\n        alt={alt}\n        width={width}\n        height={height}\n        loading={loading}\n        className={cn(className, \"hidden dark:block\")}\n        unoptimized={srcDark.endsWith(\".svg\")}\n      />\n    </>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/screenshot.tsx"
    }
  ],
  "dependencies": [
    "@radix-ui/react-slot",
    "lucide-react",
    "next-themes"
  ]
}