banner-12-block

1"use client";
2import React, { useState, useEffect } from "react";
3 
4function Banner_12() {
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-950 to-zinc-900 px-6 py-6 shadow-2xl">
28      {/* Animated background elements */}
29      <div className="absolute inset-0 overflow-hidden">
30        {/* Top right circle with slow rotation */}
31        <div className="absolute -top-20 -right-20 h-48 w-48 animate-[spin_20s_linear_infinite] rounded-full bg-gradient-to-br from-teal-400 to-teal-600 opacity-10 blur-xl"></div>
32 
33        {/* Bottom left circle */}
34        <div className="absolute -bottom-16 -left-16 h-48 w-48 rounded-full bg-teal-600 opacity-10 blur-xl"></div>
35 
36        {/* Multiple diagonal lines */}
37        <div className="absolute inset-0 opacity-10">
38          <div className="absolute top-0 left-1/4 h-full w-px rotate-45 bg-gradient-to-b from-transparent via-teal-400 to-transparent"></div>
39          <div className="absolute top-0 left-2/3 h-full w-px rotate-45 bg-gradient-to-b from-transparent via-teal-400 to-transparent"></div>
40          <div className="absolute top-0 left-1/2 h-full w-px rotate-45 bg-gradient-to-b from-transparent via-teal-400 to-transparent"></div>
41        </div>
42      </div>
43 
44      <div className="relative z-10 flex flex-col items-center gap-5 md:flex-row md:justify-between">
45        <div
46          className={`flex items-center gap-4 transition-all duration-700 ${isLoaded ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}`}
47        >
48          <div className="hidden md:block">
49            <div className="relative">
50              <div className="absolute -inset-1 animate-[spin_4s_linear_infinite] rounded-full bg-gradient-to-r from-teal-400 via-teal-300 to-emerald-400 opacity-70 blur-sm"></div>
51              <div className="relative flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 p-2">
52                <svg
53// … truncated