banner-01-block

1"use client";
2 
3import React, { useState, useEffect } from "react";
4 
5function Banner_01() {
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-r from-blue-600 to-violet-600 p-8 text-white shadow-xl">
18      {/* Animated background elements */}
19      <div className="absolute inset-0 overflow-hidden">
20        <div className="absolute -top-16 -left-16 h-32 w-32 animate-pulse rounded-full bg-white opacity-10"></div>
21        <div className="absolute top-5 right-10 h-12 w-12 rounded-full bg-white opacity-10"></div>
22        <div className="absolute -right-8 -bottom-8 h-32 w-32 animate-pulse rounded-full bg-blue-400 opacity-20 delay-300"></div>
23      </div>
24 
25      <div className="relative z-10 flex flex-col items-center justify-between space-y-6 md:flex-row md:space-y-0">
26        <div
27          className={`transition-all duration-700 ${isLoaded ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}`}
28        >
29          <p className="mb-2 inline-block rounded-full bg-white/20 px-3 py-1 text-sm font-semibold tracking-wider backdrop-blur-sm">
30            JUST RELEASED
31          </p>
32          <h1 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl">
33            New Collection <span className="text-blue-200">Launch</span>
34          </h1>
35          <p className="mt-3 max-w-md text-sm text-blue-100 md:text-base">
36            Exclusive designs at special introductory prices. Limited time offer
37            ending soon. Don&apos;t miss out.
38          </p>
39        </div>
40 
41        <div
42          className={`transition-all delay-300 duration-700 ${isLoaded ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"}`}
43        >
44          <button className="group relative overflow-hidden rounded-full bg-white px-8 py-3 font-medium text-blue-600 shadow-md transition-all hover:shadow-lg">
45            <span className="absolute inset-0 h-full w-1/2 -translate-x-full transform bg-gradient-to-r from-blue-400/20 via-transparent to-transparent transition-transform duration-300 group-hover:translate-x-full"></span>
46            Shop Now
47            <span className="ml-2 inline-block transition-transform group-hover:translate-x-1">
48              →
49            </span>
50          </button>
51        </div>
52      </div>
53    </div>
54  );
55}
56 
57// … truncated