htamas1210/MotionWebStudio
1
0
Fork 0
mirror of https://github.com/Motion-Games/MotionWebStudio.git synced 2026-04-21 09:00:53 +02:00
Code Issues Packages Projects Releases Wiki Activity
Files
235e1d9b52268ae5f9dcd4f86b0110859fd5ab02
MotionWebStudio/pages/demos/Steelguard.tsx
htom 235e1d9b52 stripe
2025-12-26 14:03:18 +01:00

421 lines
28 KiB
TypeScript
Raw Blame History

import React, { useEffect, useState, useRef } from 'react';
import {
ArrowLeft, Shield, Lock, Eye, Server, Cpu, Globe,
ChevronRight, PlayCircle, Fingerprint, Scan, Activity,
Radio, Terminal, Box, Building2, Users, MapPin,
Menu, X, Zap, ShieldCheck, AlertCircle, Cpu as Chip,
Network, Database, HardDrive, ShieldAlert, Key,
ArrowRight, ShieldCheck as Verified, Loader2
} from 'lucide-react';
import { Link } from 'react-router-dom';
export const Steelguard: React.FC = () => {
const [scrolled, setScrolled] = useState(false);
const [activePage, setActivePage] = useState<'home' | 'solutions' | 'hardware' | 'security'>('home');
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
// Hero Scanner State
const [isHovered, setIsHovered] = useState(false);
const [isIdentified, setIsIdentified] = useState(false);
const [randomData, setRandomData] = useState({ temp: '32.4', loss: '0.00', nodes: '1248' });
// Fix: Use ReturnType<typeof setTimeout> instead of NodeJS.Timeout to avoid namespace errors in browser environment
const scanTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
// Fix: Use ReturnType<typeof setInterval> instead of NodeJS.Timeout to avoid namespace errors in browser environment
const dataIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
useEffect(() => {
const handleScroll = () => setScrolled(window.scrollY > 20);
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Handle Scanning Logic
useEffect(() => {
if (isHovered) {
// Start randomizing data
dataIntervalRef.current = setInterval(() => {
setRandomData({
temp: (Math.random() * 5 + 30).toFixed(1),
loss: (Math.random() * 0.5).toFixed(2),
nodes: Math.floor(Math.random() * 50 + 1200).toString()
});
}, 80);
// Set identification timeout
scanTimerRef.current = setTimeout(() => {
setIsIdentified(true);
if (dataIntervalRef.current) clearInterval(dataIntervalRef.current);
}, 1000);
} else {
// Reset
if (scanTimerRef.current) clearTimeout(scanTimerRef.current);
if (dataIntervalRef.current) clearInterval(dataIntervalRef.current);
setIsIdentified(false);
setRandomData({ temp: '32.4', loss: '0.00', nodes: '1248' });
}
return () => {
if (scanTimerRef.current) clearTimeout(scanTimerRef.current);
if (dataIntervalRef.current) clearInterval(dataIntervalRef.current);
};
}, [isHovered]);
const navItems = [
{ id: 'home', label: 'Rendszer' },
{ id: 'solutions', label: 'Megoldások' },
{ id: 'hardware', label: 'Hardver' },
{ id: 'security', label: 'Biztonság' }
];
return (
<div className="font-sans bg-[#020205] text-gray-100 min-h-screen selection:bg-cyan-500 selection:text-black overflow-x-hidden relative">
<style>{`
@keyframes grid-move {
0% { transform: perspective(800px) rotateX(60deg) translateY(0); }
100% { transform: perspective(800px) rotateX(60deg) translateY(50px); }
}
@keyframes scanline {
0% { transform: translateY(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
@keyframes pulse-slow {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.05); }
}
.cyber-grid {
background-image:
linear-gradient(to right, rgba(6, 182, 212, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
mask-image: radial-gradient(circle, black, transparent 80%);
}
.glass-card {
background: rgba(10, 15, 30, 0.4);
backdrop-filter: blur(15px);
border: 1px solid rgba(6, 182, 212, 0.15);
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
}
.text-glow {
text-shadow: 0 0 15px rgba(34, 211, 238, 0.8), 0 0 30px rgba(34, 211, 238, 0.4);
}
.neon-glow-btn:hover {
box-shadow: 0 0 25px rgba(34, 211, 238, 0.6), 0 0 50px rgba(34, 211, 238, 0.2);
transform: translateY(-2px);
}
.button-clip {
clip-path: polygon(10% 0, 100% 0, 100% 70%, 90% 100%, 0 100%, 0 30%);
}
`}</style>
{/* Back to Reality Button */}
<div className="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-[60]">
<Link to="/#references">
<button className="bg-white/10 backdrop-blur-xl border border-white/20 text-white px-5 py-2.5 rounded-full text-[10px] font-black tracking-[0.2em] hover:bg-white hover:text-black transition-all flex items-center shadow-2xl group">
<ArrowLeft className="w-4 h-4 mr-2 group-hover:-translate-x-1 transition-transform" /> VISSZA A PORTFÓLIÓHOZ
</button>
</Link>
</div>
{/* Animated Background */}
<div className="fixed inset-0 z-0 pointer-events-none">
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[1000px] cyber-grid animate-[grid-move_10s_linear_infinite]"></div>
<div className="absolute top-[10%] left-[20%] w-[500px] h-[500px] bg-cyan-900/20 blur-[120px] rounded-full animate-pulse-slow"></div>
<div className="absolute bottom-[10%] right-[10%] w-[600px] h-[600px] bg-blue-900/10 blur-[150px] rounded-full animate-pulse-slow" style={{ animationDelay: '2s' }}></div>
</div>
{/* Navbar */}
<nav className={`fixed w-full z-50 transition-all duration-700 border-b ${scrolled ? 'bg-[#020205]/90 backdrop-blur-2xl border-cyan-500/20 py-2 shadow-[0_10px_30px_rgba(0,0,0,0.5)]' : 'bg-transparent border-transparent py-6'}`}>
<div className="max-w-[1400px] mx-auto px-6 md:px-12 flex items-center justify-between">
<div className="flex items-center gap-4 cursor-pointer group" onClick={() => setActivePage('home')}>
<div className="relative">
<div className="absolute inset-0 bg-cyan-500 blur-lg opacity-30 group-hover:opacity-80 transition-opacity"></div>
<div className="w-10 h-10 md:w-12 md:h-12 bg-gray-900 border border-cyan-500/50 flex items-center justify-center relative z-10 rounded-xl overflow-hidden group-hover:shadow-[0_0_20px_rgba(34,211,238,0.5)] transition-shadow">
<Shield className="text-cyan-400 w-5 h-5 md:w-6 md:h-6" />
<div className="absolute inset-0 bg-gradient-to-t from-cyan-500/20 to-transparent"></div>
</div>
</div>
<div className="flex flex-col">
<span className="text-xl md:text-2xl font-black tracking-tighter text-white font-mono uppercase">Steelguard</span>
<span className="text-[8px] text-cyan-600 tracking-[0.4em] uppercase font-bold">Enterprise Defense</span>
</div>
</div>
<div className="hidden lg:flex items-center space-x-2 font-mono">
{navItems.map((item) => (
<button
key={item.id}
onClick={() => setActivePage(item.id as any)}
className={`px-5 py-2 rounded-lg text-[11px] font-black tracking-widest uppercase transition-all ${activePage === item.id ? 'text-cyan-400 bg-cyan-400/5 shadow-[0_0_20px_rgba(34,211,238,0.2)]' : 'text-gray-500 hover:text-gray-200'}`}
>
{item.label}
</button>
))}
<div className="h-4 w-px bg-gray-800 mx-4"></div>
<button className="bg-cyan-600 hover:bg-cyan-500 text-black px-6 py-2.5 rounded-lg text-[10px] font-black uppercase tracking-widest transition-all shadow-lg shadow-cyan-900/20 active:scale-95 hover:shadow-[0_0_30px_rgba(34,211,238,0.7)]">
Rendszer Belépés
</button>
</div>
<button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="lg:hidden p-2 text-cyan-400">
{mobileMenuOpen ? <X /> : <Menu />}
</button>
</div>
</nav>
{/* Main Content */}
<main className="relative z-10 pt-20">
{activePage === 'home' && (
<>
{/* Hero Section */}
<header className="min-h-screen flex items-center px-6 md:px-12 max-w-[1400px] mx-auto pt-10">
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div className="text-center lg:text-left space-y-8">
<div className="inline-flex items-center gap-3 px-4 py-1.5 border border-cyan-500/30 bg-cyan-950/20 text-cyan-400 text-[10px] font-bold tracking-[0.3em] uppercase rounded-full backdrop-blur-md">
<Terminal className="w-3 h-3" />
<span className="animate-pulse">Rendszer állapota: Aktív</span>
</div>
<h1 className="text-5xl md:text-8xl font-black text-white leading-[0.85] tracking-tighter uppercase font-mono italic">
Abszolút <br/>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600 drop-shadow-2xl">Digitális</span> <br/>
Pajzs
</h1>
<p className="text-sm md:text-xl text-gray-400 max-w-xl mx-auto lg:mx-0 font-medium leading-relaxed">
Kvantumszintű titkosítás és mesterséges intelligencia alapú fenyegetés-elemzés nagyvállalati környezetre tervezve. <span className="text-cyan-400 font-bold text-glow">Zero-Trust</span> architektúra a teljes biztonságért.
</p>
<div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-5">
<button className="bg-white text-black px-10 py-5 font-black uppercase tracking-[0.2em] text-xs button-clip hover:bg-cyan-400 transition-all shadow-xl shadow-white/10 neon-glow-btn">
Rendszer Indítása
</button>
<button className="border border-cyan-500/30 bg-cyan-500/5 text-cyan-400 px-10 py-5 font-black uppercase tracking-[0.2em] text-xs button-clip hover:bg-cyan-500/20 transition-all hover:shadow-[0_0_20px_rgba(34,211,238,0.3)]">
Technikai Specifikáció
</button>
</div>
<div className="pt-10 flex flex-wrap justify-center lg:justify-start gap-8 opacity-40">
<div className="flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-widest"><ShieldCheck className="w-4 h-4" /> ISO 27001 Certified</div>
<div className="flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-widest"><Lock className="w-4 h-4" /> 256-bit AES</div>
<div className="flex items-center gap-2 font-mono text-[10px] font-bold uppercase tracking-widest"><Chip className="w-4 h-4" /> hardware-Encrypted</div>
</div>
</div>
{/* HERO INTERACTIVE SCANNER */}
<div className="relative hidden lg:block group/hero"
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}>
<div className={`glass-card rounded-[40px] aspect-square flex items-center justify-center p-12 relative overflow-hidden transition-all duration-700 border-2 ${isIdentified ? 'border-green-500 shadow-[0_0_60px_rgba(34,197,94,0.3)]' : 'border-cyan-500/20 shadow-[0_0_30px_rgba(34,211,238,0.05)]'}`}>
<div className={`absolute inset-0 bg-gradient-to-br transition-colors duration-700 ${isIdentified ? 'from-green-500/10' : 'from-cyan-500/10'} to-transparent`}></div>
{/* Interactive Scanning Line */}
<div className={`absolute top-0 left-0 w-full h-[3px] shadow-2xl transition-all duration-300 z-20 ${isIdentified ? 'bg-green-400 shadow-green-500 opacity-0' : isHovered ? 'bg-cyan-400 shadow-cyan-400 animate-[scanline_1s_linear_infinite]' : 'bg-cyan-500/50 shadow-cyan-500/20 animate-[scanline_4s_linear_infinite]'}`}></div>
{/* Center Module */}
<div className="relative z-10 w-full h-full flex items-center justify-center">
{/* Orbiting Rings */}
<div className={`absolute w-[120%] h-[120%] border rounded-full transition-all duration-700 ${isIdentified ? 'border-green-500/30 animate-[spin_5s_linear_infinite]' : 'border-cyan-500/5 animate-[spin_30s_linear_infinite]'}`}></div>
<div className={`absolute w-[80%] h-[80%] border rounded-full transition-all duration-700 ${isIdentified ? 'border-green-500/50 animate-[spin_3s_linear_infinite_reverse]' : 'border-cyan-500/10 animate-[spin_20s_linear_infinite_reverse]'}`}></div>
{/* Core Fingerprint Circle */}
<div className={`w-64 h-64 rounded-full border flex items-center justify-center transition-all duration-700 relative bg-gray-900 ${isIdentified ? 'border-green-400 shadow-[0_0_150px_rgba(34,197,94,0.4)] scale-110' : 'border-cyan-500/30 shadow-[0_0_100px_rgba(6,182,212,0.2)]'}`}>
{/* Scanning Pulse Overlay */}
{isHovered && !isIdentified && (
<div className="absolute inset-0 rounded-full bg-cyan-400/20 animate-pulse"></div>
)}
<Fingerprint className={`w-32 h-32 transition-all duration-700 ${isIdentified ? 'text-green-400' : isHovered ? 'text-cyan-300 scale-105' : 'text-cyan-400'}`} />
{/* Verification Badge */}
<div className={`absolute -bottom-4 bg-gray-900 border px-4 py-1.5 rounded-full transition-all duration-700 transform ${isIdentified ? 'scale-100 opacity-100 border-green-500 translate-y-0' : 'scale-50 opacity-0 border-cyan-500 translate-y-4'}`}>
<div className="flex items-center gap-2">
<Verified className="w-4 h-4 text-green-400" />
<span className="text-[10px] font-black text-white uppercase tracking-widest">Access Granted</span>
</div>
</div>
</div>
</div>
{/* Dynamic Data Readouts */}
<div className={`absolute top-10 left-10 font-mono text-[9px] leading-tight transition-colors duration-700 ${isIdentified ? 'text-green-400' : isHovered ? 'text-cyan-400' : 'text-cyan-500/60'}`}>
CORE_TEMP: {randomData.temp}C<br/>
ENCRYPT_MODE: RSA_4096<br/>
SEC_LAYER: {isIdentified ? 'V5_ULTRA' : 'V4_ACTIVE'}<br/>
{isHovered && <span className={`font-bold ${isIdentified ? 'text-green-300' : 'text-cyan-300'}`}>BIO_AUTH: {isIdentified ? 'VERIFIED' : 'SCANNING...'}</span>}
</div>
<div className={`absolute bottom-10 right-10 font-mono text-[9px] text-right transition-colors duration-700 ${isIdentified ? 'text-green-400' : isHovered ? 'text-cyan-400' : 'text-cyan-500/60'}`}>
PACKET_LOSS: {randomData.loss}%<br/>
LATENCY: 0.04ms<br/>
NODES: {randomData.nodes}/1248<br/>
{isHovered && <span className={`font-bold ${isIdentified ? 'text-green-300 animate-pulse' : 'text-cyan-300'}`}>{isIdentified ? 'ENCRYPTION: MAX' : 'HANDSHAKE...'}</span>}
</div>
</div>
</div>
</div>
</header>
{/* Feature Grid */}
<section className="py-24 bg-transparent px-6">
<div className="max-w-[1400px] mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{[
{ icon: ShieldAlert, title: 'AI Védelem', desc: 'Öntanuló algoritmusok, melyek felismerik a nulladik napi támadásokat is.' },
{ icon: Network, title: 'Mesh Hálózat', desc: 'Decentralizált adatforgalom, amely garantálja a 100%-os rendelkezésre állást.' },
{ icon: HardDrive, title: 'Adatszéf', desc: 'Fizikailag elkülönített, titkosított adattárolási központok világszerte.' },
{ icon: Key, title: 'Biometrikus Auth', desc: 'Többtényezős azonosítás retina, ujjlenyomat és hangalapú validációval.' }
].map((f, i) => (
<div key={i} className="glass-card p-8 rounded-[32px] hover:border-cyan-400/50 transition-all group cursor-pointer hover:-translate-y-2 hover:shadow-[0_0_35px_rgba(34,211,238,0.2)]">
<div className="w-14 h-14 bg-cyan-950/30 rounded-2xl flex items-center justify-center text-cyan-400 mb-6 group-hover:bg-cyan-500 group-hover:text-black transition-all group-hover:shadow-[0_0_20px_rgba(34,211,238,0.6)]">
<f.icon className="w-7 h-7" />
</div>
<h3 className="text-lg font-bold text-white mb-3 uppercase font-mono tracking-tighter group-hover:text-cyan-300 transition-colors">{f.title}</h3>
<p className="text-gray-400 text-xs leading-relaxed">{f.desc}</p>
</div>
))}
</div>
</div>
</section>
</>
)}
{/* --- SOLUTIONS PAGE --- */}
{activePage === 'solutions' && (
<div className="py-24 px-6 max-w-[1400px] mx-auto min-h-screen">
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-8 text-glow">
<div className="max-w-2xl">
<h2 className="text-sm font-black text-cyan-500 uppercase tracking-[0.5em] mb-4">Megoldásaink</h2>
<p className="text-4xl md:text-6xl font-black text-white leading-none tracking-tighter uppercase font-mono">Ipari szintű <br/>biztonsági stack</p>
</div>
<div className="text-gray-500 font-mono text-xs uppercase tracking-widest border-l border-gray-800 pl-6 hidden md:block">
Full Spectrum <br/>Protection Suite v.8.2
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
<div className="glass-card rounded-[48px] overflow-hidden group border-cyan-500/10 hover:shadow-[0_0_40px_rgba(34,211,238,0.1)] transition-all">
<div className="h-[400px] relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc51?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Server" className="w-full h-full object-cover grayscale opacity-50 group-hover:scale-110 group-hover:opacity-80 transition-all duration-1000" />
<div className="absolute inset-0 bg-gradient-to-t from-[#020205] via-transparent to-transparent"></div>
<div className="absolute top-10 right-10 bg-cyan-500 text-black px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest group-hover:shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all">Kritikus Infrastruktúra</div>
</div>
<div className="p-10 md:p-12">
<h3 className="text-3xl font-black text-white mb-6 uppercase tracking-tighter font-mono italic group-hover:text-glow transition-all">Kormányzati Szintű Titkosítás</h3>
<p className="text-gray-400 mb-10 leading-relaxed">Megoldásaink a legmagasabb szintű állami és katonai sztenderdeknek felelnek meg. Biztonságos adatcsere, védett kommunikációs csatornák és zéró hozzáférésű adattárolás.</p>
<button className="flex items-center gap-2 text-cyan-400 font-black text-xs uppercase tracking-[0.3em] hover:text-white transition-colors group/btn hover:text-glow">
Részletes specifikáció <ChevronRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
</button>
</div>
</div>
<div className="glass-card rounded-[48px] overflow-hidden group border-cyan-500/10 hover:shadow-[0_0_40px_rgba(34,211,238,0.1)] transition-all">
<div className="h-[400px] relative overflow-hidden">
<img src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Control Room" className="w-full h-full object-cover grayscale opacity-50 group-hover:scale-110 group-hover:opacity-80 transition-all duration-1000" />
<div className="absolute inset-0 bg-gradient-to-t from-[#020205] via-transparent to-transparent"></div>
<div className="absolute top-10 right-10 bg-cyan-500 text-black px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest group-hover:shadow-[0_0_20px_rgba(34,211,238,0.6)] transition-all">Global Monitoring</div>
</div>
<div className="p-10 md:p-12">
<h3 className="text-3xl font-black text-white mb-6 uppercase tracking-tighter font-mono italic group-hover:text-glow transition-all">24/7 AI Felügyeleti Központ</h3>
<p className="text-gray-400 mb-10 leading-relaxed">Globális SOC (Security Operations Center) hálózatunk folyamatosan figyeli a gyanús aktivitásokat. Az incidensek kezelése automatizált, az emberi beavatkozás csak validálásra szolgál.</p>
<button className="flex items-center gap-2 text-cyan-400 font-black text-xs uppercase tracking-[0.3em] hover:text-white transition-colors group/btn hover:text-glow">
Részletes specifikáció <ChevronRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
</button>
</div>
</div>
</div>
</div>
)}
{/* --- HARDWARE PAGE --- */}
{activePage === 'hardware' && (
<div className="py-24 px-6 max-w-[1400px] mx-auto min-h-screen">
<div className="text-center mb-20">
<h2 className="text-4xl md:text-7xl font-black text-white uppercase tracking-tighter italic font-mono mb-6 text-glow">Fizikai Biztonság</h2>
<p className="text-gray-400 max-w-2xl mx-auto font-medium">Saját fejlesztésű hardvereszközök, melyek a digitális védelmet fizikai réteggel egészítik ki.</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{[
{ name: 'S-Core Node', type: 'Hardveres tűzfal', desc: 'Optikai izolációs technológia, 100Gbps átviteli sebesség mellett is észrevehetetlen késleltetés.' },
{ name: 'Retina-X', type: 'Biometrikus szkenner', desc: 'Infravörös érhálózat-vizsgálat, melyet lehetetlen másolni vagy kijátszani.' },
{ name: 'Vault One', type: 'Kvantum tároló', desc: 'Hardware Security Module (HSM), mely önmegsemmisítő mechanizmussal rendelkezik behatolás esetén.' }
].map((h, i) => (
<div key={i} className="glass-card p-10 rounded-[40px] flex flex-col items-center text-center group border-cyan-500/5 hover:border-cyan-400/40 transition-all hover:shadow-[0_0_40px_rgba(34,211,238,0.15)]">
<div className="w-32 h-32 bg-gray-900 border border-gray-800 rounded-full flex items-center justify-center mb-8 relative group-hover:scale-110 transition-transform">
<div className="absolute inset-0 bg-cyan-500/10 rounded-full blur-xl group-hover:bg-cyan-500/30 transition-all"></div>
<Chip className="w-16 h-16 text-cyan-400 group-hover:drop-shadow-[0_0_12px_rgba(34,211,238,0.8)] transition-all" />
</div>
<span className="text-[10px] font-black text-cyan-500 uppercase tracking-widest mb-2 group-hover:text-glow transition-all">{h.type}</span>
<h3 className="text-2xl font-black text-white mb-6 uppercase tracking-tighter font-mono group-hover:text-cyan-300 transition-colors">{h.name}</h3>
<p className="text-gray-500 text-sm leading-relaxed">{h.desc}</p>
</div>
))}
</div>
</div>
)}
</main>
{/* Stats & CTA */}
<footer className="py-24 relative overflow-hidden bg-transparent">
<div className="max-w-[1400px] mx-auto px-6">
<div className="grid grid-cols-2 md:grid-cols-4 gap-10 md:gap-0 divide-x divide-gray-900 text-center border-y border-gray-900 py-16 mb-24">
{[
{ val: '14 PB', label: 'Védett adat' },
{ val: '0.00ms', label: 'Esemény válaszidő' },
{ val: '256k+', label: 'Napi hárítás' },
{ val: 'ZERO', label: 'Biztonsági rés' }
].map((s, i) => (
<div key={i} className="px-4">
<div className="text-3xl md:text-6xl font-black text-white mb-2 font-mono tracking-tighter text-glow italic">{s.val}</div>
<div className="text-cyan-900 text-[9px] font-black uppercase tracking-[0.3em]">{s.label}</div>
</div>
))}
</div>
<div className="max-w-4xl mx-auto text-center space-y-12">
<div className="relative inline-block group">
<div className="absolute inset-0 bg-cyan-500 blur-3xl opacity-30 animate-pulse group-hover:opacity-60 transition-opacity"></div>
<div className="w-20 h-20 md:w-24 md:h-24 bg-gray-900 border border-cyan-500/30 rounded-[32px] flex items-center justify-center relative z-10 mx-auto transform -rotate-12 group-hover:rotate-0 transition-transform duration-500 shadow-[0_0_40px_rgba(34,211,238,0.2)] group-hover:shadow-[0_0_60px_rgba(34,211,238,0.5)] group-hover:border-cyan-400">
<ShieldCheck className="w-10 h-10 md:w-12 md:h-12 text-cyan-400 group-hover:drop-shadow-[0_0_8px_rgba(34,211,238,1)]" />
</div>
</div>
<h2 className="text-4xl md:text-7xl font-black text-white uppercase tracking-tighter font-mono leading-none italic text-glow">
Ahol a <span className="text-cyan-500 underline decoration-cyan-500/30 underline-offset-8">bizalom</span> <br/>nem kérdés.
</h2>
<p className="text-gray-400 text-lg max-w-xl mx-auto font-medium">
Kérje szakértőink konzultációját az Enterprise Security Protocol implementálásához.
</p>
<div className="flex flex-col sm:flex-row justify-center gap-6 pt-10">
<button className="bg-cyan-600 text-black px-12 py-6 font-black uppercase tracking-widest text-sm button-clip hover:bg-white transition-all shadow-[0_0_30px_rgba(34,211,238,0.4)] hover:shadow-[0_0_50px_rgba(34,211,238,0.8)] neon-glow-btn">
Szakértői Konzultáció
</button>
<button className="border border-gray-800 text-gray-500 px-12 py-6 font-black uppercase tracking-widest text-sm button-clip hover:border-cyan-500 hover:text-cyan-400 transition-all hover:shadow-[0_0_20px_rgba(34,211,238,0.2)]">
Rendszerbemutató (PDF)
</button>
</div>
<div className="pt-32 border-t border-gray-900 flex flex-col md:flex-row justify-between items-center gap-8 text-gray-600 font-mono text-[9px] uppercase tracking-[0.3em]">
<div>&copy; 2024 STEELGUARD DEFENSE SYSTEMS. ALL RIGHTS RESERVED.</div>
<div className="flex gap-10">
<span className="hover:text-cyan-400 cursor-pointer transition-colors hover:text-glow">ADATVÉDELEM</span>
<span className="hover:text-cyan-400 cursor-pointer transition-colors hover:text-glow">ÁSZF</span>
<span className="text-cyan-900">SYSTEM_ID: CORE-X88-HU</span>
</div>
</div>
</div>
</div>
</footer>
</div>
);
};
Reference in New Issue View Git Blame Copy Permalink