Files
SECURITY-HUB-INICIATIVES/index.html
GuidoSchenone 3573f2c501 hello
2025-12-10 13:17:29 -03:00

237 lines
13 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 (borrowed from your home-page) --------------- -->
<body class="bg-black text-white">
<div class="min-h-screen">
<!-- Navigation Bar - CypSec Centered with Logo -->
<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>
</header>
<!-- --------------- 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> Iniciative
</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>
<!-- subtle background glow -->
<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>
<!-- --------------- ARTICLE --------------- -->
<main class="container mx-auto px-6 pb-20 max-w-5xl">
<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 -->
<h2 id="initiatives" class="text-3xl font-bold mt-16 mb-8 text-white">Current Initiatives</h2>
<div class="grid md:grid-cols-3 gap-6">
<!-- 1 -->
<div class="neo-card rounded-xl p-6 glow-border">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-500/20 to-blue-600/20 flex items-center justify-center">
<i class="fas fa-rocket text-white"></i>
</div>
<span class="ml-3 text-sm font-semibold text-gray-400">01</span>
</div>
<h3 class="text-lg font-semibold mb-2 text-white">SME Security Acceleration Program</h3>
<p class="text-gray-400 text-sm">Supporting small and medium organizations in adopting secure communication, governance, and operational protection with minimal complexity and sustainable cost.</p>
</div>
<!-- 2 -->
<div class="neo-card rounded-xl p-6 glow-border">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-purple-500/20 to-purple-600/20 flex items-center justify-center">
<i class="fas fa-shield-alt text-white"></i>
</div>
<span class="ml-3 text-sm font-semibold text-gray-400">02</span>
</div>
<h3 class="text-lg font-semibold mb-2 text-white">Civil Society & Activist Protection Initiative</h3>
<p class="text-gray-400 text-sm">Providing secure communication platforms, privacy-preserving infrastructure, and threat awareness programs for journalists, NGOs, and advocacy groups.</p>
</div>
<!-- 3 -->
<div class="neo-card rounded-xl p-6 glow-border">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-green-500/20 to-green-600/20 flex items-center justify-center">
<i class="fas fa-industry text-white"></i>
</div>
<span class="ml-3 text-sm font-semibold text-gray-400">03</span>
</div>
<h3 class="text-lg font-semibold mb-2 text-white">Critical Infrastructure Readiness Track</h3>
<p class="text-gray-400 text-sm">Assisting operators in improving compliance, incident response capability, and resilience to targeted threats.</p>
</div>
<!-- 4 -->
<div class="neo-card rounded-xl p-6 glow-border">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-orange-500/20 to-orange-600/20 flex items-center justify-center">
<i class="fas fa-microscope text-white"></i>
</div>
<span class="ml-3 text-sm font-semibold text-gray-400">04</span>
</div>
<h3 class="text-lg font-semibold mb-2 text-white">Research & Innovation Collaboration</h3>
<p class="text-gray-400 text-sm">Partnerships with universities, R&D hubs, and innovators to develop new methodologies, prototypes, and sovereign technologies.</p>
</div>
<!-- 5 -->
<div class="neo-card rounded-xl p-6 glow-border">
<div class="flex items-center mb-4">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-gray-500/20 to-slate-500/20 flex items-center justify-center">
<i class="fas fa-code-branch text-white"></i>
</div>
<span class="ml-3 text-sm font-semibold text-gray-400">05</span>
</div>
<h3 class="text-lg font-semibold mb-2 text-white">Open Source & Community Contributions</h3>
<p class="text-gray-400 text-sm">Maintaining tooling, documentation, and threat-intelligence artifacts available to the wider community as part of the cooperative security model.</p>
</div>
</div>
<!-- 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 Can Join -->
<h2 id="join" class="text-3xl font-bold mt-16 mb-6 text-white">Who Can Join</h2>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-300">
<div class="neo-card rounded-lg p-4"><i class="fas fa-building text-blue-400 mr-2"></i>SMEs and startups</div>
<div class="neo-card rounded-lg p-4"><i class="fas fa-hands-helping text-blue-400 mr-2"></i>NGOs, journalists, human-rights groups</div>
<div class="neo-card rounded-lg p-4"><i class="fas fa-landmark text-blue-400 mr-2"></i>Public institutions and municipalities</div>
<div class="neo-card rounded-lg p-4"><i class="fas fa-server text-blue-400 mr-2"></i>Critical infrastructure providers</div>
<div class="neo-card rounded-lg p-4"><i class="fas fa-university text-blue-400 mr-2"></i>Universities, researchers, academic labs</div>
<div class="neo-card rounded-lg p-4"><i class="fas fa-rocket text-blue-400 mr-2"></i>Innovation and impact accelerators</div>
</div>
<!-- Participation Benefits -->
<h2 class="text-3xl font-bold mt-16 mb-6 text-white">Participation Benefits</h2>
<ul class="list-disc list-inside space-y-2 text-gray-300">
<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>
<!-- 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 (borrowed from your home-page) --------------- -->
<footer class="container mx-auto px-6 py-8 mt-16 border-t border-gray-800 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>
</footer>
</body>
</html>