{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "promo-sections-01",
  "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": [],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "examples/blocks/ecommerce/promo-sections/01/page.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\ninterface TimeLeft {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n}\n\nexport default function PromoSection() {\n  // Set target date to 7 days from now\n  const [targetDate] = useState(() => {\n    const date = new Date();\n    date.setDate(date.getDate() + 7);\n    return date;\n  });\n\n  const [timeLeft, setTimeLeft] = useState<TimeLeft>({\n    days: 0,\n    hours: 0,\n    minutes: 0,\n    seconds: 0\n  });\n\n  useEffect(() => {\n    const calculateTimeLeft = () => {\n      const difference = targetDate.getTime() - new Date().getTime();\n\n      if (difference > 0) {\n        setTimeLeft({\n          days: Math.floor(difference / (1000 * 60 * 60 * 24)),\n          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),\n          minutes: Math.floor((difference / 1000 / 60) % 60),\n          seconds: Math.floor((difference / 1000) % 60)\n        });\n      }\n    };\n\n    calculateTimeLeft();\n    const timer = setInterval(calculateTimeLeft, 1000);\n\n    return () => clearInterval(timer);\n  }, [targetDate]);\n\n  const formatNumber = (num: number) => String(num).padStart(2, \"0\");\n\n  return (\n    <section className=\"relative py-10 lg:py-20\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <div className=\"grid items-center gap-12 lg:grid-cols-2\">\n          {/* Left Content */}\n          <div className=\"space-y-10\">\n            <div className=\"mb-4\">\n              <h1 className=\"font-heading text-5xl md:text-5xl\">Summer Sale</h1>\n              <p className=\"text-muted-foreground text-lg\">\n                Up to 50% off on selected items. Limited time offer.\n              </p>\n            </div>\n\n            {/* Countdown Timer */}\n            <div className=\"flex gap-4\">\n              <div className=\"bg-muted size-24 rounded-lg p-4 text-center\">\n                <div className=\"font-heading text-4xl\">{formatNumber(timeLeft.days)}</div>\n                <div className=\"text-muted-foreground text-sm\">Days</div>\n              </div>\n              <div className=\"bg-muted size-24 rounded-lg p-4 text-center\">\n                <div className=\"font-heading text-4xl\">{formatNumber(timeLeft.hours)}</div>\n                <div className=\"text-muted-foreground text-sm\">Hours</div>\n              </div>\n              <div className=\"bg-muted size-24 rounded-lg p-4 text-center\">\n                <div className=\"font-heading text-4xl\">{formatNumber(timeLeft.minutes)}</div>\n                <div className=\"text-muted-foreground text-sm\">Minutes</div>\n              </div>\n              <div className=\"bg-muted size-24 rounded-lg p-4 text-center\">\n                <div className=\"font-heading text-4xl\">{formatNumber(timeLeft.seconds)}</div>\n                <div className=\"text-muted-foreground text-sm\">Seconds</div>\n              </div>\n            </div>\n\n            <Button size=\"lg\">Shop the Sale</Button>\n          </div>\n\n          {/* Right Side - Randomly Positioned Images */}\n          <div className=\"relative hidden h-[400px] lg:block\">\n            <figure className=\"absolute top-0 right-12 aspect-square max-w-60 rotate-16 transform overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:rotate-3\">\n              <img\n                src=\"/images/products/list1.png\"\n                alt=\"Summer fashion item\"\n                className=\"h-full w-full object-cover\"\n              />\n            </figure>\n            <figure className=\"absolute top-20 left-8 aspect-square max-w-60 -rotate-16 transform overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:-rotate-3\">\n              <img\n                src=\"/images/products/list10.png\"\n                alt=\"Summer accessories\"\n                className=\"h-full w-full object-cover\"\n              />\n            </figure>\n            <figure className=\"absolute right-24 -bottom-5 aspect-square max-w-60 -rotate-2 transform overflow-hidden rounded-lg shadow-lg transition-transform duration-300 hover:rotate-3\">\n              <img\n                src=\"/images/products/list5.png\"\n                alt=\"Summer sale products\"\n                className=\"h-full w-full object-cover\"\n              />\n            </figure>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/promo-sections-01.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}