{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mist-hero-section-5",
  "type": "registry:block",
  "title": "Hero Section Five",
  "description": "Mist Kit Hero Section block, variant five",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "../../packages/mist-kit/blocks/hero-section/five/index.tsx",
      "content": "import React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@/components/ui/button'\nimport Image from 'next/image'\nimport { BookOpen } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport default function HeroSection() {\n    return (\n        <section className=\"py-20\">\n            <div className=\"relative z-10 mx-auto w-full max-w-2xl px-6 lg:px-0\">\n                <div className=\"relative text-center\">\n                    <MistKitLogo className=\"mx-auto\" />\n                    <h1 className=\"mx-auto mt-16 max-w-xl text-balance text-5xl font-medium\">The Note App</h1>\n\n                    <p className=\"text-muted-foreground mx-auto mb-6 mt-4 text-balance text-xl\">The Note App is a simple note app that allows you to create and manage your notes.</p>\n\n                    <div className=\"flex flex-col items-center gap-2 *:w-full sm:flex-row sm:justify-center sm:*:w-auto\">\n                        <Button\n                            asChild\n                            variant=\"neutral\">\n                            <Link href=\"#link\">\n                                <span className=\"text-nowrap\">Get Started</span>\n                            </Link>\n                        </Button>\n                        <Button\n                            asChild\n                            variant=\"ghost\">\n                            <Link href=\"#link\">\n                                <span className=\"text-nowrap\">View Demo</span>\n                            </Link>\n                        </Button>\n                    </div>\n                </div>\n\n                <div className=\"relative mt-12 overflow-hidden rounded-3xl bg-black/10 md:mt-16\">\n                    <img\n                        src=\"https://images.unsplash.com/photo-1547623641-d2c56c03e2a7?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n                        alt=\"\"\n                        className=\"absolute inset-0 size-full object-cover\"\n                    />\n\n                    <div className=\"bg-background rounded-(--radius) relative m-4 overflow-hidden border border-transparent shadow-xl shadow-black/15 ring-1 ring-black/10 sm:m-8 md:m-12\">\n                        <Image\n                            src=\"/mist/Vengeance UI-2.png\"\n                            alt=\"app screen\"\n                            width=\"2880\"\n                            height=\"1842\"\n                            className=\"object-top-left size-full object-cover\"\n                        />\n                    </div>\n                </div>\n\n                <div className=\"mt-8 flex flex-wrap items-center gap-4\">\n                    <p className=\"text-muted-foreground text-center\">Trusted by teams at :</p>\n                    <div className=\"flex flex-wrap items-center justify-center gap-8\">\n                        <div className=\"flex\">\n                            <img\n                                className=\"mx-auto h-4 w-fit\"\n                                src=\"https://html.tailus.io/blocks/customers/nvidia.svg\"\n                                alt=\"Nvidia Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\n                        </div>\n\n                        <div className=\"flex\">\n                            <img\n                                className=\"mx-auto h-3 w-fit\"\n                                src=\"https://html.tailus.io/blocks/customers/column.svg\"\n                                alt=\"Column Logo\"\n                                height=\"16\"\n                                width=\"auto\"\n                            />\n                        </div>\n                        <div className=\"flex\">\n                            <img\n                                className=\"mx-auto h-3 w-fit\"\n                                src=\"https://html.tailus.io/blocks/customers/github.svg\"\n                                alt=\"GitHub Logo\"\n                                height=\"16\"\n                                width=\"auto\"\n                            />\n                        </div>\n                        <div className=\"flex\">\n                            <img\n                                className=\"mx-auto h-4 w-fit\"\n                                src=\"https://html.tailus.io/blocks/customers/nike.svg\"\n                                alt=\"Nike Logo\"\n                                height=\"20\"\n                                width=\"auto\"\n                            />\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </section>\n    )\n}\n\nconst MistKitLogo = ({ className }: { className?: string }) => (\n    <div\n        aria-hidden\n        className={cn('border-background bg-linear-to-b rounded-(--radius) relative flex size-9 translate-y-0.5 items-center justify-center border from-yellow-300 to-orange-600 shadow-lg shadow-black/20 ring-1 ring-black/10', className)}>\n        <BookOpen className=\"mask-b-from-25% size-6 fill-white stroke-white drop-shadow-sm\" />\n        <BookOpen className=\"absolute inset-0 m-auto size-6 fill-white stroke-white opacity-65 drop-shadow-sm\" />\n        <div className=\"z-1 h-4.5 absolute inset-2 m-auto w-px translate-y-px rounded-full bg-black/10\"></div>\n    </div>\n)\n",
      "type": "registry:component",
      "target": "components/hero-section-five.tsx"
    }
  ]
}