{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "promo-section",
  "title": "Promo sections",
  "description": "Promo block with headline, copy, and CTA or offer highlight.",
  "files": [
    {
      "path": "contents/blocks/ecommerce/promo-sections/1/index.tsx",
      "content": "\"use client\";\n\nimport { MarqueeEffect } from \"@/components/marquee-effect\";\nimport { Button } from \"@/components/ui/button\";\nimport { ArrowRightIcon } from \"lucide-react\";\nimport Image from \"next/image\";\n\nconst images = [\n  \"https://images.unsplash.com/photo-1502389614483-e475fc34407e?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1465101046530-73398c7f28ca?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1611269154421-4e27233ac5c7?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1503602642458-232111445657?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1491553895911-0055eca6402d?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=500&auto=format&fit=crop\",\n  \"https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=500&auto=format&fit=crop\",\n];\n\nexport default function PromoSection() {\n  return (\n    <section className=\"w-full py-10\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <div className=\"grid items-center lg:grid-cols-2\">\n          <header className=\"relative z-10 mx-auto mb-8 max-w-xl text-center lg:mb-10 lg:text-start\">\n            <h3 className=\"mb-4 text-4xl font-bold text-balance md:text-5xl leading-tight\">\n              Summer styles are finally here\n            </h3>\n            <p className=\"text-muted-foreground text-balance lg:text-lg\">\n              This year, our new summer collection will shelter you from the\n              harsh elements of a world that doesn&lsquo;t care if you live or\n              die.\n            </p>\n            <Button size=\"lg\" className=\"mt-6\">\n              Shop Collection\n              <ArrowRightIcon />\n            </Button>\n          </header>\n          <div className=\"absolute grid h-96 grid-cols-2 gap-4 overflow-hidden mask-t-from-80% mask-r-from-10% mask-b-from-80% mask-l-from-10% lg:static lg:h-150 lg:mask-r-from-70% lg:mask-l-from-70%\">\n            {[\n              {\n                reverse: false,\n              },\n              {\n                reverse: true,\n              },\n            ].map((mq, i) => (\n              <MarqueeEffect\n                key={i}\n                gap={12}\n                direction=\"vertical\"\n                reverse={mq.reverse}\n                speed={30}\n                speedOnHover={1}\n              >\n                {images.slice(i * 3, (i + 1) * 3).map((image, i) => (\n                  <figure key={i}>\n                    <Image\n                      src={image}\n                      className=\"aspect-square object-cover\"\n                      alt=\"...\"\n                      width={400}\n                      height={400}\n                    />\n                  </figure>\n                ))}\n              </MarqueeEffect>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/promo-section.tsx"
    }
  ],
  "type": "registry:block"
}