banner-04-block

1import React from "react";
2 
3function Banner_04() {
4  return (
5    <div className="relative overflow-hidden rounded-lg bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-500 p-0.5">
6      {/* Inner container with border effect */}
7      <div className="relative rounded-md bg-white p-6 dark:bg-gray-900">
8        {/* Decorative elements */}
9        <div className="absolute -top-6 -right-6 h-24 w-24 rounded-full bg-purple-500 opacity-10"></div>
10        <div className="absolute -bottom-6 -left-6 h-32 w-32 rounded-full bg-indigo-500 opacity-10"></div>
11 
12        <div className="relative flex flex-col items-center justify-between gap-6 md:flex-row">
13          {/* Left: Badge icon */}
14          <div className="flex-shrink-0">
15            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg">
16              <svg
17                xmlns="http://www.w3.org/2000/svg"
18                className="h-8 w-8"
19                fill="none"
20                viewBox="0 0 24 24"
21                stroke="currentColor"
22              >
23                <path
24                  strokeLinecap="round"
25                  strokeLinejoin="round"
26                  strokeWidth={2}
27                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
28                />
29              </svg>
30            </div>
31          </div>
32 
33          {/* Middle: Content */}
34          <div className="flex-1 text-center md:text-left">
35            <div className="mb-1 inline-flex rounded-full bg-indigo-100 px-2.5 py-0.5 text-xs font-medium text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300">
36              Exclusive Membership
37            </div>
38            <h2 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
39              Join Our Loyalty Rewards Program
40            </h2>
41            <p className="text-gray-600 dark:text-gray-300">
42              Earn points with every purchase, get exclusive discounts, early
43              access to sales, and personalized offers.
44            </p>
45          </div>
46 
47          {/* Right: Call to action */}
48          <div className="flex-shrink-0">
49            <button className="rounded-md bg-gradient-to-r from-indigo-600 to-purple-600 px-5 py-2.5 font-medium text-white shadow-md transition-all hover:from-indigo-700 hover:to-purple-700">
50// … truncated