banner-07-block

1"use client";
2import React, { useState, useEffect } from "react";
3import NumberFlow, { NumberFlowGroup } from "@number-flow/react";
4 
5function Banner_07() {
6  // State to track countdown time
7  const [timeLeft, setTimeLeft] = useState({
8    hours: 24,
9    minutes: 0,
10    seconds: 0,
11  });
12 
13  useEffect(() => {
14    // Calculate expiry time (24 hours from now)
15    const expiry = new Date();
16    expiry.setHours(expiry.getHours() + 24);
17 
18    // Update countdown every second
19    const timer = setInterval(() => {
20      const now = new Date();
21      const difference = expiry.getTime() - now.getTime();
22 
23      // Stop timer when countdown reaches 0
24      if (difference <= 0) {
25        clearInterval(timer);
26        setTimeLeft({ hours: 0, minutes: 0, seconds: 0 });
27        return;
28      }
29 
30      // Calculate hours, minutes, seconds
31      const hours = Math.floor(difference / (1000 * 60 * 60));
32      const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
33      const seconds = Math.floor((difference % (1000 * 60)) / 1000);
34 
35      setTimeLeft({ hours, minutes, seconds });
36    }, 1000);
37 
38    // Clean up timer
39    return () => clearInterval(timer);
40  }, []);
41 
42  return (
43    <div className="relative overflow-hidden rounded-xl bg-gradient-to-br from-indigo-900 via-violet-800 to-purple-900 p-8">
44      {/* Decorative background elements */}
45      <div className="absolute inset-0 opacity-20">
46        <div className="absolute -top-20 -right-20 h-64 w-64 rounded-full bg-fuchsia-500 blur-3xl"></div>
47        <div className="absolute -bottom-32 -left-20 h-80 w-80 rounded-full bg-blue-600 blur-3xl"></div>
48      </div>
49 
50      <div className="relative z-10">
51        <div className="mx-auto text-center">
52          <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">
53            Flash Sale
54          </div>
55 
56          <h2 className="mt-4 text-3xl font-bold text-white md:text-4xl">
57            Don&apos;t miss your chance to save!
58          </h2>
59 
60          <p className="mx-auto mt-2 max-w-2xl text-purple-100">
61            Our biggest discount of the season on all premium items. When the
62            counter reaches zero, the prices go back to normal.
63          </p>
64 
65          {/* Counter section with NumberFlow */}
66          <div className="mt-8 flex flex-col items-center justify-center">
67            <p className="mb-2 text-sm font-medium text-purple-200">
68// … truncated