hello
This commit is contained in:
GuidoSchenone
BIN
CivilSociety&Activist.png
Normal file
BIN
CivilSociety&Activist.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
Criticalnfraestructure.png
Normal file
BIN
Criticalnfraestructure.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
BIN
OpenSource&CommunityContributions.png
Normal file
BIN
OpenSource&CommunityContributions.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
Research&Innovation.png
Normal file
BIN
Research&Innovation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
BIN
SMESecurity.png
Normal file
BIN
SMESecurity.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
185
index.html
185
index.html
@@ -4,8 +4,8 @@
|
||||
<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 ">
|
||||
<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;
|
||||
@@ -56,25 +56,21 @@
|
||||
</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">
|
||||
<!-- --------------- 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>
|
||||
</header>
|
||||
</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> Iniciative
|
||||
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.
|
||||
@@ -86,14 +82,13 @@
|
||||
</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">
|
||||
<!-- --------------- 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>
|
||||
@@ -108,63 +103,88 @@
|
||||
|
||||
<!-- 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>
|
||||
<div class="grid md:grid-cols-3 gap-6 auto-rows-fr">
|
||||
|
||||
<!-- 1 SME -->
|
||||
<div class="neo-card rounded-xl overflow-hidden glow-border">
|
||||
<img src="SMESecurity.png" alt="SME Security" class="w-full h-auto object-contain rounded-t-xl">
|
||||
<div class="p-6">
|
||||
<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>
|
||||
|
||||
<!-- 2 CTA: Join the Hub (first row, second box) -->
|
||||
<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/40
|
||||
transition-all duration-300">
|
||||
<!-- radiant top bar -->
|
||||
<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>
|
||||
|
||||
<!-- image stays exactly as the other cards -->
|
||||
<img src="jointhehub.png" alt="Join the Hub" class="w-full h-auto object-contain rounded-t-xl">
|
||||
|
||||
<!-- text block moved up with less padding -->
|
||||
<div class="p-3 text-center -mt-11"> <!-- -mt-2 lifts the whole text block closer to the image -->
|
||||
<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>
|
||||
<!-- 3 Critical Infrastructure -->
|
||||
<div class="neo-card rounded-xl overflow-hidden glow-border">
|
||||
<img src="Criticalnfraestructure.png" alt="Critical Infrastructure" class="w-full h-auto object-contain rounded-t-xl">
|
||||
<div class="p-6">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<!-- 4 Research & Innovation -->
|
||||
<div class="neo-card rounded-xl overflow-hidden glow-border">
|
||||
<img src="Research&Innovation.png" alt="Research & Innovation" class="w-full h-auto object-contain rounded-t-xl">
|
||||
<div class="p-6">
|
||||
<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>
|
||||
|
||||
<!-- 5 Civil Society -->
|
||||
<div class="neo-card rounded-xl overflow-hidden glow-border">
|
||||
<img src="CivilSociety&Activist.png" alt="Civil Society & Activist" class="w-full h-auto object-contain rounded-t-xl">
|
||||
<div class="p-6">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- 6 Open Source -->
|
||||
<div class="neo-card rounded-xl overflow-hidden glow-border">
|
||||
<img src="OpenSource&CommunityContributions.png" alt="Open Source & Community" class="w-full h-auto object-contain rounded-t-xl">
|
||||
<div class="p-6">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Goals -->
|
||||
<h2 id="goals" class="text-3xl font-bold mt-16 mb-8 text-white">Goals of the Security Hub</h2>
|
||||
@@ -180,16 +200,50 @@
|
||||
</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>
|
||||
<!-- 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 -->
|
||||
<h2 class="text-3xl font-bold mt-16 mb-6 text-white">Participation Benefits</h2>
|
||||
@@ -218,11 +272,11 @@
|
||||
</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">
|
||||
<!-- --------------- 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">
|
||||
@@ -231,6 +285,7 @@
|
||||
<a href="/company/imprint" class="hover:text-white">Imprint</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
BIN
jointhehub.png
Normal file
BIN
jointhehub.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Reference in New Issue
Block a user