banner-08-block

1"use client";
2import React, { useState } from "react";
3 
4function Banner_08() {
5  // State to control banner visibility
6  const [isVisible, setIsVisible] = useState(true);
7 
8  // Hide banner when user dismisses it
9  const dismissBanner = () => {
10    setIsVisible(false);
11  };
12 
13  if (!isVisible) return null;
14 
15  return (
16    <div className="relative overflow-hidden bg-gradient-to-r from-teal-600 to-cyan-600 px-4 py-3 shadow-md">
17      {/* Background decorative elements */}
18      <div className="absolute inset-0 flex items-center justify-center opacity-10">
19        <div className="h-32 w-32 rotate-12 rounded-full border-4 border-white"></div>
20        <div className="absolute -right-6 h-24 w-24 -rotate-12 rounded-full border-4 border-white"></div>
21        <div className="absolute -left-8 h-16 w-16 rotate-45 rounded-full border-4 border-white"></div>
22      </div>
23 
24      <div className="relative z-10 flex items-center justify-between">
25        <div className="flex flex-1 items-center justify-center text-center sm:justify-start sm:text-left">
26          <div className="hidden sm:block">
27            <svg
28              xmlns="http://www.w3.org/2000/svg"
29              className="mr-3 h-6 w-6 text-white"
30              fill="none"
31              viewBox="0 0 24 24"
32              stroke="currentColor"
33            >
34              <path
35                strokeLinecap="round"
36                strokeLinejoin="round"
37                strokeWidth={2}
38                d="M13 10V3L4 14h7v7l9-11h-7z"
39              />
40            </svg>
41          </div>
42          <p className="flex items-center text-sm font-medium text-white">
43            <span className="mr-1.5 hidden rounded-full bg-white px-2 py-0.5 text-xs font-bold text-teal-500 sm:inline-block">
44              NEW
45            </span>
46            <span>
47              <span className="font-bold">Free shipping</span> now available on
48              all Summer Edition items!
49              <a
50                href="#"
51                className="ml-1.5 whitespace-nowrap underline hover:text-teal-100"
52              >
53                Shop now →
54              </a>
55            </span>
56          </p>
57        </div>
58        <button
59          className="ml-3 flex-shrink-0 text-white focus:outline-none"
60          onClick={dismissBanner}
61          aria-label="Dismiss"
62        >
63          <svg
64            xmlns="http://www.w3.org/2000/svg"
65            className="h-5 w-5"
66            fill="none"
67            viewBox="0 0 24 24"
68// … truncated