<div class="flex items-center justify-center p-4 bg-gray-900 min-h-screen dark:bg-black font-mono relative overflow-hidden">
<!-- Cyberpunk background grid elements -->
<div class="absolute inset-0 z-0 opacity-10">
<div class="absolute inset-0 bg-gradient-to-br from-green-900 via-gray-900 to-green-900 animate-pulse-slow"></div>
<div class="absolute inset-0 bg-grid-pattern-small md:bg-grid-pattern-large opacity-5"></div>
<div class="absolute inset-0 bg-dots-pattern opacity-5"></div>
</div>
<div class="bg-gradient-to-br from-gray-800 to-gray-950 dark:from-gray-950 dark:to-black p-6 md:p-8 rounded-2xl shadow-neon-green border border-green-700/50 relative z-10 w-full max-w-md mx-auto transform hover:scale-[1.01] transition-transform duration-300 ease-in-out">
<!-- Glitch effect pseudo-element for aesthetic -->
<div class="absolute inset-0 rounded-2xl pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-green-500/20 after:via-transparent after:to-green-500/20 after:animate-glitch after:mix-blend-overlay"></div>
<div class="flex flex-col items-center space-y-6">
<!-- Profile Card Start -->
<div class="w-full bg-gray-900 dark:bg-black p-4 rounded-xl border border-green-800 shadow-inner-neon relative">
<div class="relative w-24 h-24 mx-auto mb-4 rounded-full border-2 border-green-400 overflow-hidden shadow-md shadow-green-500/30 ring-2 ring-green-600 ring-offset-2 ring-offset-gray-900">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div class="absolute inset-0 bg-gradient-to-br from-green-500/30 to-transparent animate-pulse-fast opacity-50"></div>
</div>
<h2 class="text-2xl font-bold text-green-400 text-center uppercase tracking-wide mb-2">Ava Lux</h2>
<p class="text-sm text-green-200 text-center mb-4">Product Lead at CyberCorp Solutions</p>
<div class="grid grid-cols-2 gap-2 text-center text-green-300 text-sm">
<div>
<span class="block font-bold text-green-400">1.2k</span>
<span class="block">Followers</span>
</div>
<div>
<span class="block font-bold text-green-400">987</span>
<span class="block">Following</span>
</div>
</div>
<div class="mt-4 text-xs text-center text-gray-400 border-t border-green-800 pt-3 flex items-center justify-center">
<svg class="w-4 h-4 mr-1 text-green-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path>
</svg>
Neo-Tokyo, Block 7
</div>
</div>
<!-- Profile Card End -->
<!-- Follow Button -->
<button class="relative w-full py-3 px-6 text-xl font-bold text-black uppercase bg-green-400 rounded-lg overflow-hidden group shadow-lg shadow-green-500/50 transform transition duration-300 ease-in-out hover:scale-105 active:scale-95 button-glow-green">
<span class="relative z-10">+ Follow</span>
<div class="absolute inset-0 bg-green-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute inset-0 border-2 border-green-600 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div class="absolute top-1/2 left-1/2 w-4 h-4 bg-green-200 rounded-full blur-sm opacity-0 group-hover:opacity-100 group-hover:animate-ping-small origin-center transition-all duration-500"></div>
</button>
<!-- Message & Options Buttons -->
<div class="grid grid-cols-2 gap-4 w-full">
<button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
<span class="relative z-10">Message</span>
</button>
<button class="relative py-3 px-4 text-lg font-bold text-green-300 uppercase bg-gray-800 dark:bg-gray-900 rounded-lg border border-green-700 overflow-hidden group shadow-md shadow-gray-700/50 hover:border-green-400 hover:text-green-200 transition duration-300 ease-in-out button-hover-glitch">
<span class="relative z-10">Profile</span>
</button>
</div>
<!-- Status / Connection Indicator -->
<div class="flex items-center text-sm text-green-400 mt-4">
<span class="relative flex h-3 w-3 mr-2">
<span class="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-green-500 opacity-75"></span>
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-600"></span>
</span>
<span>Active Connection // Online</span>
</div>
</div>
<!-- Bottom UI Elements / Accent Lines -->
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/2 h-1 bg-green-600 rounded-full shadow-neon-green blur-[1px] opacity-70"></div>
<div class="absolute top-0 left-0 w-4 h-4 border-l-2 border-t-2 border-green-500 rounded-tl-lg opacity-50"></div>
<div class="absolute top-0 right-0 w-4 h-4 border-r-2 border-t-2 border-green-500 rounded-tr-lg opacity-50"></div>
<div class="absolute bottom-0 left-0 w-4 h-4 border-l-2 border-b-2 border-green-500 rounded-bl-lg opacity-50"></div>
<div class="absolute bottom-0 right-0 w-4 h-4 border-r-2 border-b-2 border-green-500 rounded-br-lg opacity-50"></div>
</div>
</div>
<style>
/* Base styles for dark mode */
:root {
--tw-shadow-neon-green: 0 0px 10px rgba(50, 205, 50, 0.5), 0 0 20px rgba(50, 205, 50, 0.3), 0 0 30px rgba(50, 205, 50, 0.2);
--tw-shadow-inner-neon: inset 0 0 5px rgba(50, 205, 50, 0.4), inset 0 0 10px rgba(50, 205, 50, 0.2);
--color-green-neon: #32CD32; /* LimeGreen */
--color-green-dark: #1A4d2e; /* Darker Green */
}
/* Tailwind specific overrides for custom patterns */
.bg-grid-pattern-small {
background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.bg-grid-pattern-large {
background-image: linear-gradient(to right, rgba(50,205,50,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50,205,50,0.1) 1px, transparent 1px);
background-size: 40px 40px;
}
.bg-dots-pattern {
background-image: radial-gradient(circle, rgba(50,205,50,0.2) 1px, transparent 1px);
background-size: 10px 10px;
}
/* Custom shadow utilities */
.shadow-neon-green {
box-shadow: var(--tw-shadow-neon-green);
}
.shadow-inner-neon {
box-shadow: var(--tw-shadow-inner-neon);
}
/* Keyframes for animations */
@keyframes pulse-slow {
0%, 100% { opacity: 0.1; }
50% { opacity: 0.2; }
}
@keyframes pulse-fast {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.7; }
}
@keyframes ping-small {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1); opacity: 0.8; }
100% { transform: scale(1.5); opacity: 0; }
}
@keyframes glitch {
0% { transform: translate(0, 0); opacity: 0.3; }
20% { transform: translate(-2px, 2px); opacity: 0.6; }
40% { transform: translate(-2px, -2px); opacity: 0.4; }
60% { transform: translate(2px, 2px); opacity: 0.7; }
80% { transform: translate(2px, -2px); opacity: 0.5; }
100% { transform: translate(0, 0); opacity: 0.3; }
}
/* Apply animations */
.animate-pulse-slow {
animation: pulse-slow 8s infinite ease-in-out;
}
.animate-pulse-fast {
animation: pulse-fast 2s infinite ease-in-out;
}
.animate-ping-small {
animation: ping-small 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-glitch {
animation: glitch 0.5s infinite alternate;
}
/* Button Glitch Effect for hovers */
.button-hover-glitch:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
background-size: 200% 100%;
animation: glitch-line 0.3s steps(1) infinite alternate;
opacity: 0.2;
}
.button-hover-glitch:hover::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent 49%, var(--color-green-neon) 50%, transparent 51%);
background-size: 200% 100%;
animation: glitch-line 0.3s steps(1) infinite reverse alternate;
opacity: 0.2;
}
@keyframes glitch-line {
0% { background-position: 0 0; }
100% { background-position: -200% 0; }
}
/* Button Glow Effect */
.button-glow-green {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.3s ease;
}
.button-glow-green::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at center, rgba(50,205,50,0.6) 0%, transparent 70%);
animation: rotate-glow 4s linear infinite;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.button-glow-green:hover::before {
opacity: 1;
}
@keyframes rotate-glow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Dark mode specific styles */
.dark .bg-gradient-to-br.from-gray-800.to-gray-950 {
background-image: linear-gradient(to bottom right, #0a0a0a, #000000);
}
.dark .shadow-neon-green {
box-shadow: 0 0px 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.3);
}
.dark .shadow-inner-neon {
box-shadow: inset 0 0 5px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3);
}
.dark .text-green-400 {
color: #00FF00; /* Brighter green for dark mode */
}
.dark .border-green-700,
.dark .border-green-800 {
border-color: #008f00;
}
.dark .bg-green-400 {
background-color: #00e600;
}
</style>
