banner-02-block

1"use client";
2 
3import React, { useState, useEffect } from "react";
4 
5function Banner_02() {
6  const [isLoaded, setIsLoaded] = useState(false);
7 
8  useEffect(() => {
9    const timer = setTimeout(() => {
10      setIsLoaded(true);
11    }, 100);
12 
13    return () => clearTimeout(timer);
14  }, []);
15 
16  return (
17    <div className="relative w-full overflow-hidden rounded-lg bg-gradient-to-br from-amber-50 via-amber-100 to-amber-50 p-6 shadow-lg">
18      {/* Enhanced background pattern */}
19      <div className="absolute inset-0 opacity-20">
20        <div className="absolute -top-8 -left-8 h-32 w-32 animate-pulse rounded-full bg-amber-500"></div>
21        <div className="absolute right-0 bottom-0 h-40 w-40 rounded-full bg-amber-600 blur-md"></div>
22        <div className="absolute bottom-12 left-1/3 h-24 w-24 rounded-full bg-amber-400 blur-sm"></div>
23        <div className="absolute top-1/2 right-1/4 h-16 w-16 rounded-full bg-amber-600"></div>
24        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_70%,rgba(251,191,36,0.1),transparent)]"></div>
25      </div>
26 
27      {/* Banner content with animations */}
28      <div className="relative z-10 flex flex-col items-center space-y-5 text-center md:flex-row md:justify-between md:space-y-0 md:text-left">
29        <div
30          className={`space-y-3 transition-all duration-700 md:max-w-2xl ${isLoaded ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}`}
31        >
32          <div className="flex items-center justify-center md:justify-start">
33            <span className="relative inline-block rounded-full bg-gradient-to-r from-amber-500 to-amber-600 px-3 py-1.5 text-xs font-semibold text-white">
34              NEW ARRIVAL
35              <span className="absolute -top-1 -right-1 flex h-3 w-3">
36                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-amber-400 opacity-75"></span>
37                <span className="relative inline-flex h-3 w-3 rounded-full bg-amber-500"></span>
38              </span>
39            </span>
40          </div>
41          <h2 className="text-2xl font-bold text-amber-900 md:text-3xl lg:text-4xl">
42            Introducing the{" "}
43            <span className="relative">
44              Autumn Essentials
45              <span className="absolute bottom-0 left-0 h-0.5 w-full bg-amber-600"></span>
46            </span>{" "}
47            Collection
48          </h2>
49          <p className="max-w-lg text-amber-700">
50// … truncated