Glow Card Demo

1import { Badge } from "@/components/ui/badge";
2import { Cloud, Star, Target, Waves, Wifi } from "lucide-react";
3import { GlowCard } from "../ui/glow-card";
4 
5export function GlowCardDemo() {
6  return (
7    <div className="w-full flex flex-col items-center justify-center mx-auto">
8      <div className="space-y-6">
9        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-8">
10          <GlowCard
11            variant="cosmic"
12            intensity={1.2}
13            className="h-64 aspect-4/3 shadow-gray-500/30 shadow-md border"
14          >
15            <div className="space-y-3">
16              <Badge className="bg-purple-500/20 text-purple-300 border-purple-500/30">
17                <Cloud className="w-3 h-3 mr-1" />
18                Cosmic
19              </Badge>
20              <div>
21                <h3 className="text-xl font-bold text-white mb-2">
22                  Cosmic Effect
23                </h3>
24                <p className="text-slate-300 text-xs">
25                  Stars, nebula gas, and cosmic dust particles.
26                </p>
27              </div>
28            </div>
29          </GlowCard>
30 
31          <GlowCard
32            variant="glitch"
33            intensity={1.3}
34            className="h-64 aspect-4/3 shadow-gray-500/30 shadow-md"
35          >
36            <div className="space-y-3">
37              <Badge className="bg-pink-500/20 text-pink-300 border-pink-500/30">
38                <Wifi className="w-3 h-3 mr-1" />
39                Glitch
40              </Badge>
41              <div>
42                <h3 className="text-xl font-bold text-white mb-2">
43                  Glitch Effect
44                </h3>
45                <p className="text-slate-300 text-xs">
46                  Corrupted digital effects with scan lines.
47                </p>
48              </div>
49            </div>
50          </GlowCard>
51 
52          <GlowCard
53            variant="liquid"
54            liquidColor="#f59e0b"
55            intensity={1.0}
56            className="h-64 aspect-4/3 shadow-gray-500/30 shadow-md"
57          >
58            <div className="space-y-3">
59              <Badge className="bg-amber-500/20 text-amber-300 border-amber-500/30">
60                <Waves className="w-3 h-3 mr-1" />
61                Liquid
62              </Badge>
63              <div>
64                <h3 className="text-xl font-bold text-white mb-2">
65                  Liquid Effect
66                </h3>
67                <p className="text-slate-300 text-xs">
68// … truncated