banner-06-block

1"use client";
2 
3import React, { useState, useEffect } from "react";
4 
5function Banner_06() {
6  // Initial countdown time (12 hours in seconds)
7  const initialTime = 12 * 60 * 60;
8  const [timeLeft, setTimeLeft] = useState(initialTime);
9 
10  // Format time to HH:MM:SS
11  const formatTime = (seconds: number) => {
12    const hours = Math.floor(seconds / 3600);
13    const minutes = Math.floor((seconds % 3600) / 60);
14    const secs = seconds % 60;
15 
16    return {
17      hours: hours.toString().padStart(2, "0"),
18      minutes: minutes.toString().padStart(2, "0"),
19      seconds: secs.toString().padStart(2, "0"),
20    };
21  };
22 
23  // Countdown effect
24  useEffect(() => {
25    const timer = setInterval(() => {
26      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
27    }, 1000);
28 
29    return () => clearInterval(timer);
30  }, []);
31 
32  const time = formatTime(timeLeft);
33 
34  return (
35    <div className="relative overflow-hidden rounded-lg bg-gradient-to-r from-red-500 to-red-900 p-6 shadow-lg">
36      {/* Urgency indicators */}
37      <div className="absolute top-0 left-0 h-1 w-full bg-white/20">
38        <div
39          className="h-full bg-white transition-all duration-1000"
40          style={{ width: `${(timeLeft / initialTime) * 100}%` }}
41        ></div>
42      </div>
43 
44      <div className="flex flex-col items-center md:flex-row md:justify-between">
45        {/* Message */}
46        <div className="mb-6 md:mr-6 md:mb-0 md:w-3/5">
47          <span className="mb-2 inline-block rounded-full bg-white/20 px-3 py-1 text-xs font-semibold text-white">
48            HURRY UP
49          </span>
50          <h2 className="mb-2 text-2xl font-bold text-white md:text-3xl">
51            It&apos;s Almost Gone!
52          </h2>
53          <p className="max-w-md text-white/80">
54            Our special offer is about to expire. Get 30% off on all premium
55            products before the countdown ends.
56          </p>
57 
58          <button className="mt-4 rounded-md bg-white px-6 py-2 font-medium text-red-700 transition-colors hover:bg-red-50">
59            Claim Offer Now
60          </button>
61        </div>
62 
63        {/* Digital Clock */}
64        <div className="w-full md:w-auto">
65          <div className="mb-1 text-center text-sm font-medium text-white/70">
66            OFFER EXPIRES IN
67          </div>
68          <div className="flex items-center justify-center gap-2">
69            {/* Hours */}
70            <div className="flex flex-col items-center">
71// … truncated