banner-10-block

1"use client";
2import React, { useState, useEffect } from "react";
3 
4function Banner_10() {
5  // State to control banner visibility
6  const [isVisible, setIsVisible] = useState(true);
7  // State to handle animation entry
8  const [isLoaded, setIsLoaded] = useState(false);
9 
10  useEffect(() => {
11    // Trigger entrance animations after component mounts
12    const timer = setTimeout(() => {
13      setIsLoaded(true);
14    }, 300);
15 
16    return () => clearTimeout(timer);
17  }, []);
18 
19  // Hide banner when user dismisses it
20  const dismissBanner = () => {
21    setIsVisible(false);
22  };
23 
24  if (!isVisible) return null;
25 
26  return (
27    <div className="relative overflow-hidden bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-6 py-6 shadow-2xl">
28      {/* Animated background elements */}
29      <div className="absolute inset-0 overflow-hidden">
30        {/* Top right golden circle that rotates slowly */}
31        <div className="absolute -top-16 -right-16 h-40 w-40 animate-[spin_15s_linear_infinite] rounded-full bg-gradient-to-br from-amber-400 to-amber-600 opacity-20 blur-md"></div>
32 
33        {/* Bottom left circle with scale effect */}
34        <div className="absolute bottom-0 -left-20 h-48 w-48 animate-[ping_4s_ease-in-out_infinite] rounded-full bg-indigo-600 opacity-10 blur-lg"></div>
35 
36        {/* Center small stars twinkling */}
37        <div className="absolute top-1/2 left-1/3 h-1 w-1 animate-[pulse_2s_ease-in-out_infinite] rounded-full bg-white"></div>
38        <div className="absolute top-1/4 left-2/3 h-2 w-2 animate-[pulse_3s_ease-in-out_infinite] rounded-full bg-white"></div>
39        <div className="absolute top-3/4 left-1/4 h-1.5 w-1.5 animate-[pulse_2.5s_ease-in-out_infinite] rounded-full bg-white"></div>
40 
41        {/* Multiple diagonal lines */}
42        <div className="absolute inset-0 opacity-20">
43          <div className="absolute top-0 left-0 h-full w-0.5 -rotate-45 bg-gradient-to-b from-transparent via-amber-400 to-transparent"></div>
44          <div className="absolute top-0 left-1/3 h-full w-0.5 -rotate-45 bg-gradient-to-b from-transparent via-amber-400 to-transparent"></div>
45          <div className="absolute top-0 left-2/3 h-full w-0.5 -rotate-45 bg-gradient-to-b from-transparent via-amber-400 to-transparent"></div>
46        </div>
47      </div>
48 
49      <div className="relative z-10 flex flex-col items-center gap-6 md:flex-row md:justify-between">
50        <div
51// … truncated