Glow Card Demo 1

1import { Badge } from "@/components/ui/badge";
2import { Target, Star, Moon, Skull, Droplet } from "lucide-react";
3import Image from "next/image";
4import { GlowCard } from "../ui/glow-card";
5 
6export default function GlowCardDemo1() {
7  return (
8    <div className="w-full">
9      {/* Desktop: Overlapping layout, Mobile: Grid layout */}
10      <div className="relative w-full mx-auto">
11        <div className="grid grid-cols-1 md:grid-cols-2 2xl:hidden gap-6 lg:gap-8">
12          <div className="w-full max-w-sm mx-auto">
13            <GlowCard
14              variant="glitch"
15              glitchColor1="#ff0064"
16              glitchColor2="#00ff64"
17              className="w-full h-auto min-h-[400px] sm:min-h-[40px]"
18            >
19              <div className="h-full flex flex-col ">
20                <div className="h-40 sm:h-48 mb-4 rounded-lg overflow-hidden bg-gradient-to-br from-pink-600 to-green-600 flex items-center justify-center">
21                  <Image
22                    src="/assets/images/glow-card/deoxys.jpg"
23                    alt="Digital Matrix"
24                    width={200}
25                    height={200}
26                    quality={100}
27                    className="w-full h-full object-cover"
28                  />
29                </div>
30                <div className="flex-1 text-white">
31                  <Badge className="mb-3 bg-pink-500/20 text-pink-300 border-pink-500/30">
32                    <Target className="w-3 h-3 mr-1" />
33                    Psychic
34                  </Badge>
35                  <h3 className="text-lg sm:text-xl font-bold mb-2">Deoxys</h3>
36                  <p className="text-gray-300 text-xs sm:text-sm mb-4">
37                    An alien virus that fell to earth on a meteor underwent a
38                    DNA mutation to become this Pokémon.
39                  </p>
40                  <div className="flex items-center text-xs sm:text-sm text-gray-400">
41                    <Star className="w-3 h-3 sm:w-4 sm:h-4 text-pink-400 mr-1" />
42                    <span>Generation 3</span>
43                  </div>
44                </div>
45              </div>
46            </GlowCard>
47          </div>
48 
49          {/* Card 2 - Darkrai */}
50          <div className="w-full max-w-sm mx-auto">
51            <GlowCard
52              variant="laser"
53              laserColor="#ef4444"
54              className="w-full h-auto min-h-[400px] sm:min-h-[450px]"
55            >
56              <div className="h-full flex flex-col">
57// … truncated