Cyberpunk Card Demo 1

1import { Terminal, Zap, Shield, Activity, Database, Cpu } from "lucide-react";
2import { CyberpunkCard } from "../ui/cyberpunk-card";
3import Image from "next/image";
4 
5export default function CyberpunkCardDemo1() {
6  return (
7    <CyberpunkCard
8      theme="custom"
9      borderStyle="circuit"
10      backgroundEffect="particles"
11      glowIntensity={5}
12      customColors={{
13        primary: "#7A00DF",
14        secondary: "#8C024E",
15        accent: "#C08CEB",
16      }}
17      colorShift={true}
18      lightTrail={true}
19      className="lg:scale-85 font-mono"
20    >
21      <div className="space-y-4 sm:space-y-6">
22        <div className="relative bg-gradient-to-r from-purple-900/90 via-purple-900/90 to-purple-900/90 px-3 sm:px-4 py-2 sm:py-3 rounded-lg border border-purple-400/50 backdrop-blur-sm">
23          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-purple-400/10 to-transparent animate-pulse"></div>
24          <div className="relative flex items-center justify-between">
25            <div className="flex items-center gap-3 sm:gap-4">
26              <div className="relative p-2 bg-purple-800/50 rounded-lg border border-purple-400/30">
27                <Terminal className="w-5 h-5 sm:w-7 sm:h-7 text-purple-200" />
28                <div className="absolute -top-1 -right-1 flex">
29                  <span className="w-2 h-2 bg-purple-400 rounded-full animate-ping"></span>
30                  <span className="absolute w-2 h-2 bg-purple-300 rounded-full"></span>
31                </div>
32              </div>
33              <div>
34                <h3 className="text-base sm:text-lg md:text-2xl font-bold tracking-widest text-transparent bg-clip-text bg-gradient-to-r from-purple-200 via-white to-purple-200">
35                  NEURAL HACKING SUITE
36                </h3>
37                <div className="text-xs text-purple-300/80 tracking-wider">
38                  v2.7.3-BETA
39                </div>
40              </div>
41            </div>
42            <div className="flex flex-col items-end gap-1">
43              <div className="px-3 py-1.5 bg-gradient-to-r from-green-900/40 to-emerald-800/40 rounded-full text-xs border border-green-400/40 flex items-center gap-2 backdrop-blur-sm">
44                <div className="relative">
45                  <span className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
46                  <span className="absolute inset-0 w-2 h-2 bg-green-400 rounded-full animate-ping"></span>
47                </div>
48// … truncated