Cyberpunk Card Demo

1import { CyberpunkCard } from "../ui/cyberpunk-card";
2import { Badge } from "../../components/ui/badge";
3import { Button } from "../../components/ui/button";
4import { ChevronRight, Cpu, Zap, Shield } from "lucide-react";
5 
6export const CyberpunkCardDemo = () => {
7  return (
8    <div className="flex flex-col md:flex-row items-center justify-center gap-20 rounded-xl scale-75 md:scale-100">
9      <CyberpunkCard
10        theme="neon-pink"
11        colorShift
12        borderStyle="circuit"
13        backgroundEffect="circuit"
14        className="h-full transition-transform duration-200"
15      >
16        <div className="flex flex-col gap-2 p-1 max-w-xs">
17          <div className="flex justify-between items-start">
18            <h3 className="text-2xl font-bold tracking-tight text-pink-100">
19              Lucy
20            </h3>
21            <Badge className="bg-pink-500/20 text-pink-200 hover:bg-pink-500/30 text-xs">
22              Edgerunner
23            </Badge>
24          </div>
25 
26          <div className="relative w-80 h-40 mx-auto">
27            <div className="w-full h-full bg-[url('/assets/images/cyberpunk-card/lucy.webp')] bg-cover bg-center rounded-lg" />
28          </div>
29 
30          <p className="text-xs text-gray-100 my-3">
31            Advanced cybernetic enhancement module for combat performance
32          </p>
33 
34          <div className="space-y-2">
35            <div className="flex items-center gap-2">
36              <Zap className="w-4 h-4 text-pink-100" />
37              <div className="h-1.5 bg-pink-900/50 rounded-full w-full">
38                <div className="h-1.5 bg-gradient-to-r from-pink-400 to-pink-500 rounded-full w-4/5"></div>
39              </div>
40              <span className="text-xs font-medium text-pink-200">80%</span>
41            </div>
42 
43            <div className="flex items-center gap-2">
44              <Cpu className="w-4 h-4 text-pink-100" />
45              <div className="h-1.5 bg-pink-900/50 rounded-full w-full">
46                <div className="h-1.5 bg-gradient-to-r from-pink-400 to-pink-500 rounded-full w-3/4"></div>
47              </div>
48              <span className="text-xs font-medium text-pink-200">75%</span>
49            </div>
50 
51            <div className="flex items-center gap-2">
52              <Shield className="w-4 h-4 text-pink-100" />
53              <div className="h-1.5 bg-pink-900/50 rounded-full w-full">
54                <div className="h-1.5 bg-gradient-to-r from-pink-400 to-pink-500 rounded-full w-3/5"></div>
55              </div>
56// … truncated