{
  "name": "banner-07-block",
  "type": "registry:block",
  "dependencies": [
    "@number-flow/react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\nimport React, { useState, useEffect } from \"react\";\nimport NumberFlow, { NumberFlowGroup } from \"@number-flow/react\";\n\nfunction Banner_07() {\n  // State to track countdown time\n  const [timeLeft, setTimeLeft] = useState({\n    hours: 24,\n    minutes: 0,\n    seconds: 0,\n  });\n\n  useEffect(() => {\n    // Calculate expiry time (24 hours from now)\n    const expiry = new Date();\n    expiry.setHours(expiry.getHours() + 24);\n\n    // Update countdown every second\n    const timer = setInterval(() => {\n      const now = new Date();\n      const difference = expiry.getTime() - now.getTime();\n\n      // Stop timer when countdown reaches 0\n      if (difference <= 0) {\n        clearInterval(timer);\n        setTimeLeft({ hours: 0, minutes: 0, seconds: 0 });\n        return;\n      }\n\n      // Calculate hours, minutes, seconds\n      const hours = Math.floor(difference / (1000 * 60 * 60));\n      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));\n      const seconds = Math.floor((difference % (1000 * 60)) / 1000);\n\n      setTimeLeft({ hours, minutes, seconds });\n    }, 1000);\n\n    // Clean up timer\n    return () => clearInterval(timer);\n  }, []);\n\n  return (\n    <div className=\"relative overflow-hidden rounded-xl bg-gradient-to-br from-indigo-900 via-violet-800 to-purple-900 p-8\">\n      {/* Decorative background elements */}\n      <div className=\"absolute inset-0 opacity-20\">\n        <div className=\"absolute -top-20 -right-20 h-64 w-64 rounded-full bg-fuchsia-500 blur-3xl\"></div>\n        <div className=\"absolute -bottom-32 -left-20 h-80 w-80 rounded-full bg-blue-600 blur-3xl\"></div>\n      </div>\n\n      <div className=\"relative z-10\">\n        <div className=\"mx-auto text-center\">\n          <div className=\"inline-block rounded-lg bg-white/10 px-4 py-1 text-sm font-semibold tracking-wider text-white uppercase backdrop-blur-sm\">\n            Flash Sale\n          </div>\n\n          <h2 className=\"mt-4 text-3xl font-bold text-white md:text-4xl\">\n            Don&apos;t miss your chance to save!\n          </h2>\n\n          <p className=\"mx-auto mt-2 max-w-2xl text-purple-100\">\n            Our biggest discount of the season on all premium items. When the\n            counter reaches zero, the prices go back to normal.\n          </p>\n\n          {/* Counter section with NumberFlow */}\n          <div className=\"mt-8 flex flex-col items-center justify-center\">\n            <p className=\"mb-2 text-sm font-medium text-purple-200\">\n              OFFER EXPIRES IN\n            </p>\n\n            <NumberFlowGroup>\n              <div\n                style={{\n                  fontFamily: \"monospace\",\n                  fontSize: \"4rem\",\n                  fontVariantNumeric: \"tabular-nums\",\n                }}\n                className=\"~text-3xl/4xl flex items-baseline font-semibold\"\n              >\n                <NumberFlow\n                  trend={-1}\n                  value={timeLeft.hours}\n                  format={{ minimumIntegerDigits: 2 }}\n                />\n                <NumberFlow\n                  prefix=\":\"\n                  trend={-1}\n                  value={timeLeft.minutes}\n                  digits={{ 1: { max: 5 } }}\n                  format={{ minimumIntegerDigits: 2 }}\n                />\n                <NumberFlow\n                  prefix=\":\"\n                  trend={-1}\n                  value={timeLeft.seconds}\n                  digits={{ 1: { max: 5 } }}\n                  format={{ minimumIntegerDigits: 2 }}\n                />\n              </div>\n            </NumberFlowGroup>\n          </div>\n\n          {/* CTA buttons */}\n          <div className=\"mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row\">\n            <button className=\"w-full rounded-lg bg-gradient-to-r from-fuchsia-500 to-purple-600 px-8 py-3 font-medium text-white shadow-lg transition-all hover:shadow-xl sm:w-auto\">\n              Shop Now\n            </button>\n            <button className=\"w-full rounded-lg border border-white/30 bg-white/5 px-8 py-3 font-medium text-white backdrop-blur-sm transition-all hover:bg-white/10 sm:w-auto\">\n              View Details\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default Banner_07;\n",
      "path": "/components/commerce-ui/blocks/banners/banner-07.tsx",
      "target": "components/commerce-ui/banner-07.tsx"
    }
  ]
}