banner-09-block

1"use client";
2import { Sun } from "lucide-react";
3import React, { useState } from "react";
4 
5function Banner_09() {
6  // State to control banner visibility
7  const [isVisible, setIsVisible] = useState(true);
8  // State to control promo code copy action
9  const [copied, setCopied] = useState(false);
10 
11  // Hide banner when user dismisses it
12  const dismissBanner = () => {
13    setIsVisible(false);
14  };
15 
16  // Handle copy promo code
17  const copyPromoCode = () => {
18    navigator.clipboard.writeText("SPRING25");
19    setCopied(true);
20    setTimeout(() => setCopied(false), 2000);
21  };
22 
23  if (!isVisible) return null;
24 
25  return (
26    <div className="relative w-full overflow-hidden bg-gradient-to-r from-purple-600 to-indigo-500 px-6 py-5 shadow-lg">
27      {/* Animated background elements */}
28      <div className="absolute inset-0 overflow-hidden">
29        <div className="absolute -top-20 -left-20 h-48 w-48 animate-pulse rounded-full bg-white opacity-10"></div>
30        <div className="absolute top-5 right-10 h-20 w-20 animate-bounce rounded-full bg-white opacity-10 delay-300"></div>
31        <div className="absolute bottom-4 left-1/3 h-24 w-24 animate-ping rounded-full bg-white opacity-10 [animation-duration:3s]"></div>
32        <div className="absolute -right-10 -bottom-10 h-40 w-40 animate-pulse rounded-full bg-white opacity-10 delay-700"></div>
33      </div>
34 
35      <div className="relative z-10 flex flex-col items-center justify-between gap-5 md:flex-row">
36        <div className="flex items-center justify-center gap-4 text-center md:justify-start md:text-left">
37          <div className="hidden animate-spin duration-9000 md:block">
38            <Sun className="h-16 w-16 text-white" />
39          </div>
40          <div className="space-y-1">
41            <span className="inline-flex animate-pulse rounded-md bg-white px-3 py-1 text-sm font-bold text-indigo-600 shadow-sm">
42              25% OFF EVERYTHING
43            </span>
44            <h3 className="text-2xl font-bold text-white md:text-3xl">
45              Spring Sale Event
46            </h3>
47            <p className="text-base font-medium text-white/90">
48              Use code{" "}
49              <span className="rounded bg-white/20 px-2 py-0.5 font-bold tracking-wider text-white">
50                SPRING25
51              </span>{" "}
52              at checkout
53            </p>
54          </div>
55        </div>
56 
57        <div className="flex items-center space-x-4">
58          <button
59            onClick={copyPromoCode}
60// … truncated