1import React from "react"
2    type Card = {
3      title: string;
4      desc: string;
5      img: string;
6      type: "gradient" | "glass" | "tilt" | "overlay";
7    };
8    
9    const cards: Card[] = [
10      {
11        title: "Aurora Gradient",
12        desc: "A modern gradient card with soft glow and smooth hover transitions.",
13        img: "https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=800&q=80",
14        type: "gradient",
15      },
16      {
17        title: "Glassmorphic Glow",
18        desc: "A transparent glassmorphic card with blur and color reflections.",
19        img: "https://images.unsplash.com/photo-1521747116042-5a810fda9664?auto=format&fit=crop&w=800&q=80",
20        type: "glass",
21      },
22      {
23        title: "3D Press (CSS)",
24        desc: "A lightweight 3D press/tilt simulation using pure CSS transforms.",
25        img: "https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=800&q=80",
26        type: "tilt",
27      },
28      {
29        title: "Floating Overlay",
30        desc: "Animated overlay with floating elements for creative layouts.",
31        img: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80",
32        type: "overlay",
33      },
34    ];
35    
36    function CardWrapper({ children }: { children: React.ReactNode }) {
37      return (
38        <section className="min-h-screen bg-gradient-to-b from-slate-900 to-black py-16 px-6">
39          <div className="max-w-7xl mx-auto">
40            <h2 className="text-3xl md:text-4xl font-bold text-white mb-8 text-center">
41              Amazing Cards Showcase
42            </h2>
43            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
44              {children}
45            </div>
46          </div>
47        </section>
48      );
49    }
50    
51    return function AmazingCards() {
52      return (
53        <CardWrapper>
54          {cards.map((card, idx) => (
55            <article
56              key={idx}
57              className={`group relative overflow-hidden rounded-2xl shadow-2xl border border-gray-800 transform transition-all duration-500 motion-safe:will-change-transform bg-gray-900`}
58              aria-labelledby={`card-${idx}-title`}
59            >
60              {/* Image */}
61              <div className="h-48 w-full overflow-hidden bg-gray-800">
62                <img
63                  src={card.img}
64                  alt={card.title}
65                  loading="lazy"
66                  className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
67                  onError={(e) => {
68                    // graceful fallback if image can't load
69                    const target = e.currentTarget as HTMLImageElement;
70                    target.style.display = "none";
71                  }}
72                />
73              </div>
74    
75              {/* Content */}
76              <div
77                className={`p-6 ${
78                  card.type === "gradient"
79                    ? "bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white"
80                    : "bg-transparent text-white"
81                }`}
82              >
83                <h3 id={`card-${idx}-title`} className="text-xl font-semibold mb-2">
84                  {card.title}
85                </h3>
86                <p className="text-gray-300 text-sm leading-relaxed mb-4">
87                  {card.desc}
88                </p>
89    
90                {/* Buttons / Actions */}
91                <div className="flex items-center gap-3">
92                  <button
93                    type="button"
94                    className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition transform focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ${
95                      card.type === "gradient"
96                        ? "bg-white/10 backdrop-blur-sm hover:bg-white/20 border border-white/20"
97                        : "bg-white/6 hover:bg-white/10 border border-gray-700"
98                    }`}
99                  >
100                    View
101                  </button>
102    
103                  <button
104                    type="button"
105                    className="inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium border border-transparent bg-indigo-500 hover:bg-indigo-600 transition"
106                  >
107                    Action
108                  </button>
109                </div>
110              </div>
111    
112              {/* Overlay behavior for 'overlay' card type */}
113              {card.type === "overlay" && (
114                <div className="absolute inset-0 pointer-events-none">
115                  <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/70 opacity-0 group-hover:opacity-100 transition-opacity duration-400 flex items-end justify-center p-6">
116                    <div className="pointer-events-auto">
117                      <button className="px-5 py-2 rounded-lg bg-white/10 backdrop-blur-sm border border-white/20 text-white hover:bg-white/20 transition">
118                        Explore
119                      </button>
120                    </div>
121                  </div>
122                </div>
123              )}
124    
125              {/* Tilt / 3D-like press (pure CSS) */}
126              {card.type === "tilt" && (
127                <div className="absolute inset-0 pointer-events-none">
128                  {/* Light reflection */}
129                  <span className="absolute -left-20 -top-20 w-48 h-48 bg-white/5 rounded-full transform blur-3xl opacity-0 group-hover:opacity-60 transition-opacity duration-700"></span>
130                </div>
131              )}
132            </article>
133          ))}
134        </CardWrapper>
135      );
136    }
137