banner-05-block

1import React from "react";
2 
3function Banner_05() {
4  return (
5    <div className="relative overflow-hidden rounded-lg bg-gradient-to-r from-yellow-500 to-orange-500">
6      {/* Summer themed background patterns */}
7      <div className="absolute inset-0">
8        <svg
9          className="absolute top-0 left-0 h-full w-full"
10          xmlns="http://www.w3.org/2000/svg"
11          fill="none"
12        >
13          <circle cx="80%" cy="60%" r="100" fill="white" fillOpacity="0.1" />
14          <circle cx="50%" cy="20%" r="40" fill="white" fillOpacity="0.1" />
15          <path
16            d="M0 20 L40 0 L40 40 Z"
17            fill="white"
18            fillOpacity="0.1"
19            transform="translate(20, 40)"
20          />
21          <path
22            d="M0 20 L40 0 L40 40 Z"
23            fill="white"
24            fillOpacity="0.1"
25            transform="translate(460, 140) rotate(180)"
26          />
27        </svg>
28      </div>
29 
30      <div className="relative z-10 px-6 py-8 md:px-10">
31        <div className="mx-auto max-w-4xl">
32          <div className="mb-2 flex items-center justify-center">
33            <div className="bg-opacity-20 rounded-full bg-white px-4 py-1 text-sm font-medium tracking-wider text-black uppercase backdrop-blur-sm">
34              Limited Time Offer
35            </div>
36          </div>
37 
38          <h2 className="mb-3 text-center text-3xl font-extrabold tracking-wide text-white uppercase md:text-4xl lg:text-5xl">
39            Summer Sale
40          </h2>
41 
42          <div className="mb-4 flex justify-center">
43            <div className="relative">
44              <div className="text-center text-5xl font-bold text-white md:text-6xl">
45                20% OFF
46              </div>
47              <div className="bg-opacity-20 absolute -top-1 -right-6 rotate-12 rounded-md border-2 border-green-600 bg-green-500 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
48                EXCLUSIVE
49              </div>
50            </div>
51          </div>
52 
53          <p className="text-opacity-90 mb-6 text-center text-lg text-white">
54            Refresh your wardrobe with our latest summer collection. All items
55            included in this special seasonal promotion!
56          </p>
57 
58          <div className="flex flex-col items-center justify-center space-y-3 sm:flex-row sm:space-y-0 sm:space-x-4">
59            <button className="hover:bg-opacity-90 rounded-md bg-white px-6 py-3 font-medium text-orange-500 transition-all">
60              Shop Summer Collection
61// … truncated