{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-with-layers",
  "type": "registry:block",
  "title": "Hero Section with Layers",
  "description": "A hero-section for AI startups",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [
    "@scrollxui/layer-stack",
    "@scrollxui/movinglines-background",
    "@scrollxui/progress"
  ],
  "dependencies": [],
  "files": [
    {
      "type": "registry:component",
      "path": "registry/blocks/hero-sections/hero-with-layers.tsx",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion } from 'motion/react';\nimport { MovingLinesBackground } from '@/components/ui/movinglines-background';\nimport { LayerStack, Card } from '@/components/ui/layer-stack';\n\nconst HEADLINE = 'Stack beautiful layers without breaking your layout';\n\nconst items = [\n  {\n    tag: '01',\n    title: 'Ocean Horizon',\n    body: 'Discover untouched coastlines shaped by wind, water, and the quiet beauty of nature.',\n    image: 'https://images.unsplash.com/photo-1518509562904-e7ef99cdcc86',\n  },\n  {\n    tag: '02',\n    title: 'Cityscapes',\n    body: 'Peak is the heart of your horizon. Viewing high is half the beauty.',\n    image: 'https://images.unsplash.com/photo-1665430790518-7831e5790aa0',\n  },\n  {\n    tag: '03',\n    title: 'Nature Design',\n    body: 'Wilderness that feels inescapable, not artificial — finding serenity with silence.',\n    image: 'https://images.unsplash.com/photo-1528826542659-27db5adea13c',\n  },\n  {\n    tag: '04',\n    title: 'Visual Balance',\n    body: 'Reflection that feels symmetrical, not accidental — doubling beauty.',\n    image: 'https://images.unsplash.com/photo-1663188285007-23a6d501efb6',\n  },\n  {\n    tag: '05',\n    title: 'Forms & Light',\n    body: 'Sculpture creates meaning. A golden glow is the ephemeral soul behind great land.',\n    image: 'https://images.unsplash.com/photo-1691898480873-1869d1a344cf',\n  },\n  {\n    tag: '06',\n    title: 'City Rhythm',\n    body: 'Every sign, light, and shadow is a conversation between city and traveler.',\n    image: 'https://images.unsplash.com/photo-1648809211550-ec3e788b999d',\n  },\n];\n\nconst Navbar: React.FC = () => (\n  <nav className='flex w-full items-center justify-between border-t border-b border-zinc-200 px-4 py-4 dark:border-zinc-800'>\n    <div className='flex items-center gap-2'>\n      <div className='size-7 rounded-lg bg-linear-to-br from-indigo-500 to-violet-500' />\n      <h1 className='text-base font-bold md:text-2xl text-zinc-900 dark:text-white'>\n        LayerStack\n      </h1>\n    </div>\n    <button\n      type='button'\n      className='whitespace-nowrap rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-400'\n    >\n      Get Started\n    </button>\n  </nav>\n);\n\nconst HeroSection: React.FC = () => {\n  const words = HEADLINE.split(' ');\n\n  return (\n    <MovingLinesBackground\n      speed='5s'\n      opacity={0.5}\n      direction='right'\n      className='min-h-screen mx-auto w-full max-w-7xl bg-zinc-50 dark:bg-zinc-950'\n    >\n      <div className='relative  w-full max-w-7xl flex flex-col items-center justify-center'>\n        <Navbar />\n        <div className='absolute inset-y-0 left-0 h-full w-px bg-zinc-200/80 dark:bg-zinc-800/80'>\n          <div className='absolute top-0 h-40 w-px bg-linear-to-b from-transparent via-indigo-500 to-transparent' />\n        </div>\n        <div className='absolute inset-y-0 right-0 h-full w-px bg-zinc-200/80 dark:bg-zinc-800/80'>\n          <div className='absolute h-40 w-px bg-linear-to-b from-transparent via-violet-500 to-transparent' />\n        </div>\n        <div className='absolute inset-x-0 bottom-0 h-px w-full bg-zinc-200/80 dark:bg-zinc-800/80'>\n          <div className='absolute mx-auto h-px w-40 bg-linear-to-r from-transparent via-indigo-500 to-transparent' />\n        </div>\n\n        <div className='px-4 py-10 md:py-20'>\n          <h1 className='relative z-10 mx-auto max-w-4xl text-center text-2xl font-bold text-zinc-800 md:text-4xl lg:text-7xl dark:text-zinc-100'>\n            {words.map((word, index) => (\n              <motion.span\n                key={`${word}-${index}`}\n                initial={{ opacity: 0, filter: 'blur(4px)', y: 10 }}\n                animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n                transition={{\n                  duration: 0.3,\n                  delay: index * 0.1,\n                  ease: 'easeInOut',\n                }}\n                className='mr-2 inline-block'\n              >\n                {word}\n              </motion.span>\n            ))}\n          </h1>\n\n          <motion.p\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.3, delay: 0.8 }}\n            className='relative z-10 mx-auto max-w-xl py-4 text-center text-lg font-normal text-zinc-500 dark:text-zinc-400'\n          >\n            LayerStack lets you present layered content with depth and motion\n            while keeping performance sharp and layouts perfectly aligned. Build\n            immersive sections that feel intentional, not accidental.\n          </motion.p>\n\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.3, delay: 1 }}\n            className='relative z-10 mt-8 flex flex-wrap items-center justify-center gap-4'\n          >\n            <button\n              type='button'\n              className='w-60 transform rounded-lg bg-indigo-600 px-6 py-2 font-medium text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-indigo-700'\n            >\n              Explore Layers\n            </button>\n            <button\n              type='button'\n              className='w-60 transform rounded-lg border border-zinc-300 bg-white px-6 py-2 font-medium text-zinc-800 transition-all duration-300 hover:-translate-y-0.5 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800'\n            >\n              View Documentation\n            </button>\n          </motion.div>\n\n          <LayerStack\n            cardWidth={300}\n            cardGap={14}\n            stageHeight={380}\n            lastCardFullWidth={true}\n            className='pt-8'\n          >\n            {items.map((item, index) => {\n              const isLast = index === items.length - 1;\n\n              if (isLast) {\n                return (\n                  <Card\n                    key={item.tag}\n                    className='bg-card text-foreground border border-border overflow-hidden'\n                  >\n                    <div className='flex h-full flex-col md:flex-row'>\n                      <div className='relative md:w-1/2 h-48 md:h-full overflow-hidden'>\n                        <img\n                          src={`${item.image}?w=600&q=75&auto=format`}\n                          alt={item.title}\n                          loading='lazy'\n                          decoding='async'\n                          className='absolute inset-0 h-full w-full object-cover'\n                          style={{\n                            contentVisibility: 'auto',\n                            transform: 'translateZ(0)',\n                            backfaceVisibility: 'hidden',\n                          }}\n                        />\n                      </div>\n                      <div className='flex md:w-1/2 flex-col justify-between p-8 gap-4'>\n                        <div className='flex items-center justify-between'>\n                          <span className='text-[11px] font-medium tracking-[0.16em] uppercase text-muted-foreground'>\n                            {item.tag}\n                          </span>\n                          <div className='size-1.5 rounded-full bg-foreground/20 dark:bg-foreground/40' />\n                        </div>\n                        <div className='space-y-3'>\n                          <div className='h-px w-8 bg-border' />\n                          <h2 className='text-2xl font-semibold tracking-tight leading-tight'>\n                            {item.title}\n                          </h2>\n                          <p className='text-sm leading-relaxed text-muted-foreground'>\n                            {item.body}\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  </Card>\n                );\n              }\n\n              return (\n                <Card\n                  key={item.tag}\n                  className='bg-card text-foreground border border-border overflow-hidden'\n                >\n                  <div className='flex h-full flex-col p-8 gap-4'>\n                    <div className='flex items-center justify-between'>\n                      <span className='text-[11px] font-medium tracking-[0.16em] uppercase text-muted-foreground'>\n                        {item.tag}\n                      </span>\n                      <div className='size-1.5 rounded-full bg-foreground/20 dark:bg-foreground/40' />\n                    </div>\n                    <div className='relative flex-1 overflow-hidden rounded-sm'>\n                      <img\n                        src={`${item.image}?w=600&q=75&auto=format`}\n                        alt={item.title}\n                        loading='lazy'\n                        decoding='async'\n                        className='absolute inset-0 h-full w-full object-cover'\n                        style={{\n                          contentVisibility: 'auto',\n                          transform: 'translateZ(0)',\n                          backfaceVisibility: 'hidden',\n                        }}\n                      />\n                    </div>\n                    <div className='space-y-3'>\n                      <div className='h-px w-8 bg-border' />\n                      <h2 className='text-2xl font-semibold tracking-tight leading-tight'>\n                        {item.title}\n                      </h2>\n                      <p className='text-sm leading-relaxed text-muted-foreground'>\n                        {item.body}\n                      </p>\n                    </div>\n                  </div>\n                </Card>\n              );\n            })}\n          </LayerStack>\n        </div>\n      </div>\n    </MovingLinesBackground>\n  );\n};\n\nexport default HeroSection;\n"
    }
  ]
}