491 lines
27 KiB
HTML
491 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Security Hub Initiatives – CypSec</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--cyp-dark: #0a0a0a;
|
||
--cyp-card: #1a1a1a;
|
||
--cyp-border: #27272a;
|
||
--cyp-blue: #0066ff;
|
||
--cyp-purple: #6366f1;
|
||
--cyp-glow: 0 0 20px rgba(0, 102, 255, .35);
|
||
}
|
||
body {
|
||
background: var(--cyp-dark);
|
||
color: #e5e5e5;
|
||
font-family: 'Inter', system-ui, sans-serif;
|
||
}
|
||
.neo-card {
|
||
background: var(--cyp-card);
|
||
border: 1px solid var(--cyp-border);
|
||
transition: all .3s ease;
|
||
}
|
||
.neo-card:hover {
|
||
border-color: var(--cyp-blue);
|
||
box-shadow: var(--cyp-glow);
|
||
transform: translateY(-4px);
|
||
}
|
||
.glow-border {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.glow-border::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -2px;
|
||
background: conic-gradient(from 180deg at 50% 50%, var(--cyp-blue) 0%, var(--cyp-purple) 50%, var(--cyp-blue) 100%);
|
||
filter: blur(12px);
|
||
opacity: 0;
|
||
transition: opacity .4s ease;
|
||
z-index: -1;
|
||
}
|
||
.neo-card:hover .glow-border::before {
|
||
opacity: .6;
|
||
}
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, var(--cyp-blue) 0%, var(--cyp-purple) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-black text-white">
|
||
|
||
<!-- --------------- NAV --------------- -->
|
||
<nav class="border-b border-gray-800 bg-black">
|
||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div class="flex justify-center items-center h-16">
|
||
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-7 w-auto mr-2">
|
||
<span class="text-2xl font-mono text-white">CypSec</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- --------------- HERO --------------- -->
|
||
<section class="relative py-24 overflow-hidden">
|
||
<div class="container mx-auto px-6 text-center">
|
||
<h1 class="text-4xl lg:text-6xl font-semibold leading-tight">
|
||
Security <span class="text-blue-500">Hub</span> Initiative
|
||
</h1>
|
||
<p class="text-lg mt-6 max-w-2xl mx-auto text-gray-300">
|
||
Building Cyber Resilience Together.
|
||
</p>
|
||
<div class="flex justify-center mx-auto mt-6">
|
||
<span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
|
||
<span class="inline-block w-3 h-1 mx-1 bg-blue-500 rounded-full"></span>
|
||
<span class="inline-block w-1 h-1 bg-blue-500 rounded-full"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="absolute inset-0 -z-10 opacity-20 pointer-events-none">
|
||
<div class="bg-gradient-to-r from-purple-500 to-blue-600 rounded-full w-96 h-96 blur-3xl mx-auto"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- --------------- MAIN CONTENT --------------- -->
|
||
<main class="max-w-5xl mx-auto px-6 pb-20">
|
||
|
||
<div class="text-lg text-gray-300 leading-relaxed space-y-6">
|
||
<p>
|
||
The CypSec Security Hub brings together organizations, researchers, communities, and experts to advance
|
||
cyber-sovereignty and strengthen digital resilience. Through dedicated initiatives, the Hub creates a space
|
||
for knowledge-sharing, capacity building, open collaboration, and the development of secure and sovereign technologies.
|
||
</p>
|
||
<p>
|
||
These initiatives serve as catalysts for innovation and as anchor points for long-term security empowerment across sectors.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Initiatives – larger bullet icons + Join Hub card on the side -->
|
||
<section id="initiatives" class="py-10 sm:py-12">
|
||
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
||
<h2 class="text-3xl font-bold mb-8 text-white text-center">Current Initiatives</h2>
|
||
|
||
<!-- 2-column grid: left = bullet list, right = Join Hub card -->
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
|
||
<!-- LEFT: single rounded box with larger bullet initiatives -->
|
||
<div class="md:col-span-2 neo-card rounded-xl p-6 glow-border">
|
||
<ul class="space-y-3 text-sm text-gray-300">
|
||
<!-- 1 SME -->
|
||
<li class="flex items-start space-x-3">
|
||
<img src="SMESecurity.png" alt="SME" class="w-10 h-10 rounded object-contain mt-0.5">
|
||
<div>
|
||
<span class="font-semibold text-white">SME Security Acceleration Program</span>
|
||
<p>Supporting small and medium organizations in adopting secure communication, governance, and operational protection with minimal complexity and sustainable cost.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- 2 Critical Infrastructure -->
|
||
<li class="flex items-start space-x-3">
|
||
<img src="Criticalnfraestructure.png" alt="Critical" class="w-10 h-10 rounded object-contain mt-0.5">
|
||
<div>
|
||
<span class="font-semibold text-white">Critical Infrastructure Readiness Track</span>
|
||
<p>Assisting operators in improving compliance, incident-response capability, and resilience to targeted threats.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- 3 Research & Innovation -->
|
||
<li class="flex items-start space-x-3">
|
||
<img src="Research&Innovation.png" alt="R&I" class="w-10 h-10 rounded object-contain mt-0.5">
|
||
<div>
|
||
<span class="font-semibold text-white">Research & Innovation Collaboration</span>
|
||
<p>Partnerships with universities, R&D hubs, and innovators to develop new methodologies, prototypes, and sovereign technologies.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- 4 Civil Society -->
|
||
<li class="flex items-start space-x-3">
|
||
<img src="CivilSociety&Activist.png" alt="Civil" class="w-10 h-10 rounded object-contain mt-0.5">
|
||
<div>
|
||
<span class="font-semibold text-white">Civil Society & Activist Protection Initiative</span>
|
||
<p>Providing secure communication platforms, privacy-preserving infrastructure, and threat-awareness programs for journalists, NGOs, and advocacy groups.</p>
|
||
</div>
|
||
</li>
|
||
|
||
<!-- 5 Open Source -->
|
||
<li class="flex items-start space-x-3">
|
||
<img src="OpenSource&CommunityContributions.png" alt="OS" class="w-10 h-10 rounded object-contain mt-0.5">
|
||
<div>
|
||
<span class="font-semibold text-white">Open Source & Community Contributions</span>
|
||
<p>Maintaining tooling, documentation, and threat-intelligence artifacts available to the wider community as part of the cooperative security model.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- RIGHT: Join the Hub card (kept exactly as you have it) -->
|
||
<div class="neo-card rounded-xl overflow-hidden glow-border relative group
|
||
bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-blue-600/10
|
||
border border-blue-400/30 hover:border-blue-300
|
||
shadow-lg shadow-blue-500/20 hover:shadow-blue-400/50
|
||
transition-all duration-300">
|
||
<!-- radiant top bar (unchanged) -->
|
||
<div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400
|
||
group-hover:from-blue-300 group-hover:via-white group-hover:to-blue-300
|
||
blur-sm group-hover:blur-md transition-all duration-300"></div>
|
||
|
||
<img src="jointhehub.png" alt="Join the Hub" class="w-full h-auto object-contain rounded-t-xl">
|
||
|
||
<div class="p-3 text-center -mt-11">
|
||
<h3 class="text-base font-bold mb-1 bg-gradient-to-r from-blue-300 via-white to-purple-300
|
||
bg-clip-text text-transparent drop-shadow-[0_0_5px_rgba(123,211,255,.6)]
|
||
group-hover:drop-shadow-[0_0_8px_rgba(255,255,255,.9)] transition-all duration-300">
|
||
Join the Hub
|
||
</h3>
|
||
<p class="text-xs text-gray-300 mb-2">CyPSec Hub Initiative</p>
|
||
<p class="text-xs text-gray-400 leading-snug mb-2">
|
||
Join our collaborative space for professionals, students & researchers strengthening cyber resilience.
|
||
</p>
|
||
<a href="#join" class="inline-flex items-center justify-center px-3 py-1 text-xs rounded-md
|
||
bg-gradient-to-r from-blue-500 to-purple-600
|
||
hover:from-blue-400 hover:to-purple-500
|
||
text-white font-semibold tracking-wide
|
||
shadow shadow-blue-500/30 hover:shadow-purple-400/50
|
||
transition-all duration-300">
|
||
Get Started
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Goals -->
|
||
<h2 id="goals" class="text-3xl font-bold mt-16 mb-8 text-white">Goals of the Security Hub</h2>
|
||
<div class="neo-card rounded-xl p-8 glow-border">
|
||
<ul class="grid md:grid-cols-2 gap-x-8 gap-y-4 text-gray-300">
|
||
<li class="flex items-start space-x-3"><i class="fas fa-flag text-blue-400 mt-1"></i><span>Strengthen cyber-sovereignty across regions and sectors</span></li>
|
||
<li class="flex items-start space-x-3"><i class="fas fa-users text-blue-400 mt-1"></i><span>Build community-driven resilience</span></li>
|
||
<li class="flex items-start space-x-3"><i class="fas fa-unlock text-blue-400 mt-1"></i><span>Democratize access to high-grade security</span></li>
|
||
<li class="flex items-start space-x-3"><i class="fas fa-shield-alt text-blue-400 mt-1"></i><span>Enable sustainable long-term protection</span></li>
|
||
<li class="flex items-start space-x-3"><i class="fas fa-lightbulb text-blue-400 mt-1"></i><span>Foster innovation through open collaboration</span></li>
|
||
<li class="flex items-start space-x-3"><i class="fas fa-network-wired text-blue-400 mt-1"></i><span>Connect SMEs, startups, activists, and critical operators</span></li>
|
||
<li class="flex items-start space-x-3"><i class="fas fa-globe text-blue-400 mt-1"></i><span>Improve national and regional preparedness</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Who Benefits -->
|
||
<section class="mt-16">
|
||
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
||
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||
Who Benefits
|
||
</h2>
|
||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
<div class="neo-card rounded-xl p-4 glow-border group">
|
||
<div class="flex items-center space-x-3 mb-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500/20 to-blue-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-blue-400 font-bold text-lg">🏢</span></div>
|
||
<h4 class="text-sm font-semibold text-white">SMEs</h4>
|
||
</div>
|
||
<p class="text-sm text-gray-300">Preparing for their first cyber insurance policy with structured guidance</p>
|
||
</div>
|
||
<div class="neo-card rounded-xl p-4 glow-border group">
|
||
<div class="flex items-center space-x-3 mb-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-purple-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-purple-400 font-bold text-lg">🏭</span></div>
|
||
<h4 class="text-sm font-semibold text-white">Enterprises</h4>
|
||
</div>
|
||
<p class="text-sm text-gray-300">Complex infrastructures and high liability exposure requiring comprehensive coverage</p>
|
||
</div>
|
||
<div class="neo-card rounded-xl p-4 glow-border group">
|
||
<div class="flex items-center space-x-3 mb-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-green-500/20 to-green-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-green-400 font-bold text-lg">🏛</span></div>
|
||
<h4 class="text-sm font-semibold text-white">Critical Infrastructure</h4>
|
||
</div>
|
||
<p class="text-sm text-gray-300">Public institutions requiring specialized insurance strategies</p>
|
||
</div>
|
||
<div class="neo-card rounded-xl p-4 glow-border group">
|
||
<div class="flex items-center space-x-3 mb-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-orange-500/20 to-orange-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-orange-400 font-bold text-lg">🤝</span></div>
|
||
<h4 class="text-sm font-semibold text-white">Service Providers</h4>
|
||
</div>
|
||
<p class="text-sm text-gray-300">Contractual security obligations and client requirements</p>
|
||
</div>
|
||
<div class="neo-card rounded-xl p-4 glow-border group md:col-span-2 lg:col-span-1">
|
||
<div class="flex items-center space-x-3 mb-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-teal-500/20 to-teal-600/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform"><span class="text-teal-400 font-bold text-lg">💰</span></div>
|
||
<h4 class="text-sm font-semibold text-white">Cost Optimizers</h4>
|
||
</div>
|
||
<p class="text-sm text-gray-300">Any organization seeking premium optimization and better coverage terms</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Participation Benefits – fade-in explanation (no flip) -->
|
||
<section class="py-10 sm:py-12">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
||
<div class="text-center mb-8">
|
||
<h2 class="text-3xl md:text-4xl font-bold text-white">Participation Benefits</h2>
|
||
<div class="flex justify-center items-center mt-6">
|
||
<span class="w-32 h-1 bg-gradient-to-r from-transparent via-slate-600 to-transparent rounded-full"></span>
|
||
<span class="w-4 h-1 mx-2 bg-slate-500 rounded-full"></span>
|
||
<span class="w-2 h-1 bg-slate-400 rounded-full"></span>
|
||
<span class="w-6 h-1 mx-2 bg-gradient-to-r from-slate-400 to-slate-500 rounded-full"></span>
|
||
<span class="w-2 h-1 bg-slate-500 rounded-full"></span>
|
||
<span class="w-4 h-1 mx-2 bg-slate-600 rounded-full"></span>
|
||
<span class="w-32 h-1 bg-gradient-to-r from-transparent via-slate-600 to-transparent rounded-full"></span>
|
||
</div>
|
||
</div>
|
||
<p class="text-lg text-blue-300 leading-relaxed justify-center">
|
||
Click to find your participation of interest!
|
||
</p>
|
||
<!-- hidden store -->
|
||
<ul id="benefits-store" class="hidden">
|
||
<li>Access to secure communication infrastructure</li>
|
||
<li>Mentorship and guidance from cybersecurity experts</li>
|
||
<li>Threat intelligence and situational awareness updates</li>
|
||
<li>Workshops, training sessions, and community events</li>
|
||
<li>Support for funding and innovation projects</li>
|
||
<li>Collaborative prototypes and joint initiatives</li>
|
||
</ul>
|
||
|
||
<!-- rounded outer frame -->
|
||
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-[#0B1220] via-[#111827] to-[#1E293B] p-6 md:p-8">
|
||
<!-- circuit pattern -->
|
||
<div class="absolute inset-0 opacity-10 pointer-events-none">
|
||
<svg class="w-full h-full" preserveAspectRatio="none" viewBox="0 0 100 100">
|
||
<defs>
|
||
<pattern id="circuit-dark" width="20" height="20" patternUnits="userSpaceOnUse">
|
||
<path d="M0 10h20M10 0v20" stroke="#334155" stroke-width=".5" fill="none"/>
|
||
<circle cx="10" cy="10" r="1" fill="#334155"/>
|
||
</pattern>
|
||
</defs>
|
||
<rect width="100%" height="100%" fill="url(#circuit-dark)"/>
|
||
</svg>
|
||
</div>
|
||
|
||
<!-- binary rain -->
|
||
<div class="absolute inset-0 opacity-5 text-[#0ea5e9] text-xs md:text-sm font-mono overflow-hidden pointer-events-none">
|
||
<div class="binary-rain">01001001 01101110 01110100 01100101 01101100 01101100 01101001 01100111 01100101 01101110 01100011 01100101</div>
|
||
</div>
|
||
|
||
<!-- fade-cards grid -->
|
||
<div class="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||
<!-- Card 1 -->
|
||
<div class="fade-card group" data-index="0">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative">
|
||
<!-- FRONT (icon + title) -->
|
||
<div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
|
||
<svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
|
||
<h3 class="text-base font-semibold text-white">Secure Comms</h3>
|
||
</div>
|
||
<!-- EXPLANATION (fades in) -->
|
||
<div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
|
||
<p class="text-slate-200 text-sm">Access to secure communication infrastructure</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 2 -->
|
||
<div class="fade-card group" data-index="1">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative">
|
||
<div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
|
||
<svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
|
||
<h3 class="text-base font-semibold text-white">Expert Mentorship</h3>
|
||
</div>
|
||
<div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
|
||
<p class="text-slate-200 text-sm">Mentorship and guidance from cybersecurity experts</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 3 -->
|
||
<div class="fade-card group" data-index="2">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative">
|
||
<div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
|
||
<svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
|
||
<h3 class="text-base font-semibold text-white">Threat Intel</h3>
|
||
</div>
|
||
<div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
|
||
<p class="text-slate-200 text-sm">Threat intelligence and situational awareness updates</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 4 -->
|
||
<div class="fade-card group" data-index="3">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative">
|
||
<div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
|
||
<svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg>
|
||
<h3 class="text-base font-semibold text-white">Workshops</h3>
|
||
</div>
|
||
<div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
|
||
<p class="text-slate-200 text-sm">Workshops, training sessions, and community events</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 5 -->
|
||
<div class="fade-card group" data-index="4">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative">
|
||
<div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
|
||
<svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
||
<h3 class="text-base font-semibold text-white">Funding</h3>
|
||
</div>
|
||
<div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
|
||
<p class="text-slate-200 text-sm">Support for funding and innovation projects</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card 6 -->
|
||
<div class="fade-card group" data-index="5">
|
||
<div class="fade-card-inner rounded-2xl overflow-hidden relative">
|
||
<div class="fade-card-front p-5 bg-slate-900/60 backdrop-blur-sm border border-slate-700/40 hover:border-sky-700/60 transition-all duration-300 flex flex-col items-center justify-center text-center h-48">
|
||
<svg class="w-10 h-10 text-sky-600 group-hover:text-sky-400 transition-colors mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
|
||
<h3 class="text-base font-semibold text-white">Innovation</h3>
|
||
</div>
|
||
<div class="fade-card-explanation absolute inset-0 p-5 bg-slate-800/70 backdrop-blur-sm border border-sky-700/60 flex items-center justify-center text-center opacity-0 transition-opacity duration-500">
|
||
<p class="text-slate-200 text-sm">Collaborative prototypes and joint initiatives</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
/* ====== FADE-IN mechanics ====== */
|
||
.fade-card {
|
||
cursor: pointer;
|
||
}
|
||
.fade-card-inner {
|
||
position: relative;
|
||
}
|
||
.fade-card-explanation {
|
||
position: absolute;
|
||
inset: 0;
|
||
opacity: 0;
|
||
transition: opacity 0.5s ease;
|
||
pointer-events: none; /* lets clicks pass through */
|
||
}
|
||
.fade-card.active .fade-card-explanation {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* hover glow (same as your cards) */
|
||
.group:hover .fade-card-front {
|
||
border-color: #0ea5e9;
|
||
box-shadow: 0 0 24px -4px rgba(14, 165, 233, 0.5);
|
||
transform: translateY(-4px);
|
||
}
|
||
|
||
/* binary rain (your existing animation) */
|
||
.binary-rain {
|
||
white-space: nowrap;
|
||
animation: binaryScroll 25s linear infinite;
|
||
}
|
||
@keyframes binaryScroll {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(100%); }
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
const store = document.querySelectorAll('#benefits-store li');
|
||
const cards = document.querySelectorAll('.fade-card');
|
||
|
||
let returnTimers = new Map(); // one timer per card
|
||
|
||
cards.forEach(card => {
|
||
const idx = card.dataset.index;
|
||
const expl = card.querySelector('.fade-card-explanation');
|
||
|
||
// click → fade in explanation
|
||
card.addEventListener('click', () => {
|
||
clearTimeout(returnTimers.get(card));
|
||
card.classList.add('active');
|
||
expl.style.opacity = '1';
|
||
|
||
// auto-return after 10 s
|
||
const t = setTimeout(() => {
|
||
card.classList.remove('active');
|
||
expl.style.opacity = '0';
|
||
returnTimers.delete(card);
|
||
}, 10000);
|
||
|
||
returnTimers.set(card, t);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Vision -->
|
||
<h2 class="text-3xl font-bold mt-16 mb-6 text-white">Vision</h2>
|
||
<p class="text-lg text-gray-300 leading-relaxed">
|
||
A distributed network of secure, sovereign, and resilient actors — working together to create long-term digital autonomy for society, business, and critical infrastructure.
|
||
</p>
|
||
|
||
<!-- CTA -->
|
||
<section id="contact" class="relative mt-20 p-10 neo-card rounded-xl overflow-hidden glow-border text-center">
|
||
<div class="relative z-10">
|
||
<h3 class="text-2xl font-bold mb-2 text-white">Ready to Build Cyber Resilience?</h3>
|
||
<p class="text-gray-300 mb-6">Join the CypSEC Security Hub and advance cyber-sovereignty with us.</p>
|
||
<a href="mailto:contact@cypsec.de?subject=Security%20Hub%20Inquiry" class="inline-flex items-center px-6 py-3 rounded-lg bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold hover:scale-105 transition-transform">
|
||
<i class="fas fa-envelope mr-2"></i>Get Involved
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- --------------- FOOTER --------------- -->
|
||
<footer class="border-t border-gray-800 bg-black">
|
||
<div class="max-w-6xl mx-auto px-6 py-8 text-gray-400 text-sm">
|
||
<div class="flex flex-col md:flex-row justify-between items-center">
|
||
<p>© 2025 CypSec Group</p>
|
||
<div class="flex space-x-4 mt-4 md:mt-0">
|
||
<a href="/company/data-privacy" class="hover:text-white">Data Privacy</a>
|
||
<a href="/company/terms-of-service" class="hover:text-white">Terms</a>
|
||
<a href="/company/imprint" class="hover:text-white">Imprint</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html> |