banner-11-block

1"use client";
2 
3import React, { useState } from "react";
4 
5function Banner_11() {
6  const [isVisible, setIsVisible] = useState(true);
7 
8  // Payment options data - removed icons and using text only
9  const paymentOptions = [
10    { name: "Credit Cards" },
11    { name: "PayPal" },
12    { name: "Apple Pay" },
13    { name: "Google Pay" },
14    { name: "Bank Transfer" },
15    { name: "Crypto" },
16  ];
17 
18  // Hide banner when user dismisses it
19  const dismissBanner = () => {
20    setIsVisible(false);
21  };
22 
23  if (!isVisible) return null;
24 
25  return (
26    <div className="relative overflow-hidden rounded-xl bg-gradient-to-br from-white to-gray-50 p-6 shadow-xl transition-all duration-300">
27      {/* Top gradient accent - enhanced with animation */}
28      <div className="animate-gradient absolute inset-x-0 top-0 h-2 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600"></div>
29 
30      <div className="mb-5 flex items-center justify-between">
31        <h3 className="text-xl font-bold tracking-tight text-gray-800">
32          Multiple Payment Options Available
33        </h3>
34 
35        <button
36          className="rounded-full p-1.5 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
37          onClick={dismissBanner}
38          aria-label="Dismiss"
39        >
40          <svg
41            xmlns="http://www.w3.org/2000/svg"
42            className="h-5 w-5"
43            fill="none"
44            viewBox="0 0 24 24"
45            stroke="currentColor"
46          >
47            <path
48              strokeLinecap="round"
49              strokeLinejoin="round"
50              strokeWidth={2}
51              d="M6 18L18 6M6 6l12 12"
52            />
53          </svg>
54        </button>
55      </div>
56 
57      <p className="mb-6 max-w-3xl text-gray-600">
58        Checkout made easy with flexible payment methods. Choose what works best
59        for you.
60      </p>
61 
62      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6">
63        {paymentOptions.map((option, index) => (
64          <div
65            key={index}
66            className="group flex items-center justify-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm transition-all duration-200 hover:scale-[1.02] hover:transform hover:border-blue-300 hover:bg-blue-50 hover:shadow-md"
67          >
68            <span className="text-sm font-medium text-gray-700 group-hover:text-blue-700">
69              {option.name}
70            </span>
71          </div>
72        ))}
73      </div>
74 
75      <div className="mt-6 text-center">
76        <a
77// … truncated