{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "promo-sections-02",
  "type": "registry:component",
  "title": "Promo Sections",
  "author": "Toby Belhome",
  "description": "“Highlight special offers, discounts, or limited-time deals with Tailwind CSS promo sections. These layouts combine bold visuals, concise messaging, and prominent calls-to-action to drive engagement and conversions. Perfect for online stores and marketplaces aiming for modern, attention-grabbing, and conversion-focused promotions.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "http://localhost:3000/r/marquee-effect.json",
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/promo-sections/02/page.tsx",
      "content": "\"use client\";\n\nimport { MarqueeEffect } from \"@/components/marquee-effect\";\nimport { Button } from \"@/components/ui/button\";\nimport { ArrowRightIcon } from \"lucide-react\";\n\nconst images = [\n  {\n    image: \"/images/products/list1.png\"\n  },\n  {\n    image: \"/images/products/list2.png\"\n  },\n  {\n    image: \"/images/products/list3.png\"\n  },\n  {\n    image: \"/images/products/list4.png\"\n  },\n  {\n    image: \"/images/products/list5.png\"\n  },\n  {\n    image: \"/images/products/list6.png\"\n  },\n  {\n    image: \"/images/products/list7.png\"\n  },\n  {\n    image: \"/images/products/list8.png\"\n  },\n  {\n    image: \"/images/products/list9.png\"\n  },\n  {\n    image: \"/images/products/list10.png\"\n  }\n];\n\nexport default function Testimonials() {\n  return (\n    <section className=\"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=\"font-heading mb-4 text-4xl text-balance md:text-5xl\">\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 harsh elements of a\n              world that doesn't care if you live or 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                gap={12}\n                direction=\"vertical\"\n                reverse={mq.reverse}\n                speed={30}\n                speedOnHover={1}>\n                {images.slice(i * 3, (i + 1) * 3).map((image, i) => (\n                  <figure key={i}>\n                    <img src={image.image} className=\"aspect-square object-cover\" />\n                  </figure>\n                ))}\n              </MarqueeEffect>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/promo-sections-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}