{
  "name": "banner-06-block",
  "type": "registry:block",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\n\nfunction Banner_06() {\n  // Initial countdown time (12 hours in seconds)\n  const initialTime = 12 * 60 * 60;\n  const [timeLeft, setTimeLeft] = useState(initialTime);\n\n  // Format time to HH:MM:SS\n  const formatTime = (seconds: number) => {\n    const hours = Math.floor(seconds / 3600);\n    const minutes = Math.floor((seconds % 3600) / 60);\n    const secs = seconds % 60;\n\n    return {\n      hours: hours.toString().padStart(2, \"0\"),\n      minutes: minutes.toString().padStart(2, \"0\"),\n      seconds: secs.toString().padStart(2, \"0\"),\n    };\n  };\n\n  // Countdown effect\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, []);\n\n  const time = formatTime(timeLeft);\n\n  return (\n    <div className=\"relative overflow-hidden rounded-lg bg-gradient-to-r from-red-500 to-red-900 p-6 shadow-lg\">\n      {/* Urgency indicators */}\n      <div className=\"absolute top-0 left-0 h-1 w-full bg-white/20\">\n        <div\n          className=\"h-full bg-white transition-all duration-1000\"\n          style={{ width: `${(timeLeft / initialTime) * 100}%` }}\n        ></div>\n      </div>\n\n      <div className=\"flex flex-col items-center md:flex-row md:justify-between\">\n        {/* Message */}\n        <div className=\"mb-6 md:mr-6 md:mb-0 md:w-3/5\">\n          <span className=\"mb-2 inline-block rounded-full bg-white/20 px-3 py-1 text-xs font-semibold text-white\">\n            HURRY UP\n          </span>\n          <h2 className=\"mb-2 text-2xl font-bold text-white md:text-3xl\">\n            It&apos;s Almost Gone!\n          </h2>\n          <p className=\"max-w-md text-white/80\">\n            Our special offer is about to expire. Get 30% off on all premium\n            products before the countdown ends.\n          </p>\n\n          <button className=\"mt-4 rounded-md bg-white px-6 py-2 font-medium text-red-700 transition-colors hover:bg-red-50\">\n            Claim Offer Now\n          </button>\n        </div>\n\n        {/* Digital Clock */}\n        <div className=\"w-full md:w-auto\">\n          <div className=\"mb-1 text-center text-sm font-medium text-white/70\">\n            OFFER EXPIRES IN\n          </div>\n          <div className=\"flex items-center justify-center gap-2\">\n            {/* Hours */}\n            <div className=\"flex flex-col items-center\">\n              <div className=\"w-20 rounded-lg border border-white/20 bg-white/10 p-3 backdrop-blur-sm\">\n                <div className=\"text-center font-mono text-4xl font-bold text-white tabular-nums\">\n                  {time.hours}\n                </div>\n              </div>\n              <div className=\"mt-1 text-xs text-white/80\">HOURS</div>\n            </div>\n\n            <div className=\"text-4xl font-bold text-white\">:</div>\n\n            {/* Minutes */}\n            <div className=\"flex flex-col items-center\">\n              <div className=\"w-20 rounded-lg border border-white/20 bg-white/10 p-3 backdrop-blur-sm\">\n                <div className=\"text-center font-mono text-4xl font-bold text-white tabular-nums\">\n                  {time.minutes}\n                </div>\n              </div>\n              <div className=\"mt-1 text-xs text-white/80\">MINUTES</div>\n            </div>\n\n            <div className=\"text-4xl font-bold text-white\">:</div>\n\n            {/* Seconds */}\n            <div className=\"flex flex-col items-center\">\n              <div className=\"w-20 rounded-lg border border-white/20 bg-white/10 p-3 backdrop-blur-sm\">\n                <div className=\"text-center font-mono text-4xl font-bold text-white tabular-nums\">\n                  {time.seconds}\n                </div>\n              </div>\n              <div className=\"mt-1 text-xs text-white/80\">SECONDS</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_06;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-06.tsx",
      "target": "components/commerce-ui/banner-06.tsx"
    }
  ]
}