Update secure-emails.html
This commit is contained in:
495
secure-emails.html
Normal file
495
secure-emails.html
Normal file
@@ -0,0 +1,495 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Secure Email & Communication — Protecting Your Critical Conversations</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--primary-blue: #60a5fa;
|
||||||
|
--dark-bg: #000000;
|
||||||
|
--card-bg: #111111;
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #9ca3af;
|
||||||
|
--border-color: #1f2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: var(--dark-bg);
|
||||||
|
color: var(--text-primary);
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyber-blue { color: var(--primary-blue); }
|
||||||
|
.bg-cyber-blue { background-color: var(--primary-blue); }
|
||||||
|
.border-cyber-blue { border-color: var(--primary-blue); }
|
||||||
|
.text-secondary { color: var(--text-secondary); }
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.card-hover:hover {
|
||||||
|
border-color: var(--primary-blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-divider {
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent 0%, var(--primary-blue) 50%, transparent 100%);
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.compact-text { line-height: 1.4; }
|
||||||
|
.tight-card { padding: 1rem; }
|
||||||
|
.smaller-text { font-size: 0.875rem; line-height: 1.3; }
|
||||||
|
|
||||||
|
.neo-card {
|
||||||
|
background: linear-gradient(135deg, rgba(28, 50, 104, 0.15) 0%, rgba(17, 24, 39, 0.8) 100%);
|
||||||
|
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.neo-card:hover {
|
||||||
|
border-color: rgba(59, 130, 246, 0.5);
|
||||||
|
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-border {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.glow-border::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -2px; left: -2px; right: -2px; bottom: -2px;
|
||||||
|
background: linear-gradient(45deg, #3b82f6, #8b5cf6, #3b82f6);
|
||||||
|
border-radius: inherit;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
.glow-border:hover::before {
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.floating-element {
|
||||||
|
animation: float 6s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0px); }
|
||||||
|
50% { transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-black text-white">
|
||||||
|
<div class="min-h-screen">
|
||||||
|
<!-- Navigation -->
|
||||||
|
<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-12 overflow-hidden">
|
||||||
|
<div class="absolute inset-0 z-[-1] pointer-events-none">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" class="opacity-30 w-full h-full">
|
||||||
|
<defs>
|
||||||
|
<pattern id="grid-email" width="60" height="60" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid-email)"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-20 left-10 w-20 h-20 bg-blue-500/10 rounded-full blur-2xl floating-element"></div>
|
||||||
|
<div class="absolute bottom-20 right-10 w-32 h-32 bg-purple-500/10 rounded-full blur-3xl floating-element" style="animation-delay:2s;"></div>
|
||||||
|
|
||||||
|
<div class="container mx-auto px-4 text-center relative z-10">
|
||||||
|
<div class="inline-block mb-3 px-4 py-1.5 bg-blue-500/10 rounded-full border border-blue-500/20">
|
||||||
|
<span class="text-sm text-blue-400 font-medium">Communication Security</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-2xl mx-auto mb-3">
|
||||||
|
<h1 class="text-3xl lg:text-5xl font-bold text-white leading-tight">
|
||||||
|
Secure Email & Communication
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-xl max-w-3xl mx-auto text-gray-300 mb-2">
|
||||||
|
Protecting Your Critical Conversations
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-lg max-w-2xl mx-auto text-gray-400 mb-4">
|
||||||
|
Email remains the #1 attack vector. CypSec secures your inbox with sovereign encryption, threat detection, and human-aware defenses.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex justify-center mx-auto">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<span class="inline-block w-12 h-0.5 bg-gradient-to-r from-transparent to-blue-500 rounded-full"></span>
|
||||||
|
<span class="inline-block w-20 h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></span>
|
||||||
|
<span class="inline-block w-12 h-0.5 bg-gradient-to-r from-purple-500 to-transparent rounded-full"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<div class="mb-6">
|
||||||
|
<p class="text-xs text-gray-500 font-mono">/publication/applications/secure-emails</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Intro -->
|
||||||
|
<section class="mb-8">
|
||||||
|
<div class="neo-card rounded-2xl p-6 glow-border">
|
||||||
|
<div class="flex items-start space-x-4 mb-4">
|
||||||
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl flex items-center justify-center">
|
||||||
|
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 text-white">The Problem with Standard Email</h3>
|
||||||
|
<p class="text-sm text-gray-300 compact-text">
|
||||||
|
Email remains the primary vector for phishing, impersonation, malware delivery, and data leaks. Because it is deeply integrated into daily operations, attackers exploit trust, routine, and human error.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-gray-300 compact-text">
|
||||||
|
To protect communication, both technology and human behavior must be addressed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Problem Grid -->
|
||||||
|
<section class="mb-8">
|
||||||
|
<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>
|
||||||
|
The Problem with Standard Email
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-lg flex items-center justify-center mb-3">
|
||||||
|
<span class="text-red-400 font-bold">🎣</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-2">Phishing & BEC</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Business-email-compromise and credential theft</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center mb-3">
|
||||||
|
<span class="text-yellow-400 font-bold">👻</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-2">Spoofing & Impersonation</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Fake domains and identity fraud</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg flex items-center justify-center mb-3">
|
||||||
|
<span class="text-purple-400 font-bold">📎</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-2">Malware Attachments</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Embedded threats in files</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-lg flex items-center justify-center mb-3">
|
||||||
|
<span class="text-green-400 font-bold">💥</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-2">Data Leaks</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Accidental or malicious exposure</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-blue-500/20 to-indigo-500/20 rounded-lg flex items-center justify-center mb-3">
|
||||||
|
<span class="text-blue-400 font-bold">🔓</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-2">No Encryption</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Lack of end-to-end protection across providers</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border md:col-span-2 lg:col-span-1">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-gray-500/20 to-slate-500/20 rounded-lg flex items-center justify-center mb-3">
|
||||||
|
<span class="text-gray-400 font-bold">⚠</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-2">No Governance</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Absence of role-based access and policy enforcement</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Capabilities -->
|
||||||
|
<section class="mb-8">
|
||||||
|
<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>
|
||||||
|
CypSec Secure Email Capabilities
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="neo-card rounded-xl p-5 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-blue-400 font-bold">🔐</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">End-to-End Encryption</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Confidential, identity-validated email and file exchange — even across insecure networks.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-5 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-purple-400 font-bold">🗄</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Secure File Vault</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Controlled access for sensitive information, preventing unintentional leaks.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-5 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-green-400 font-bold">🛡</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Threat Detection & Filtering</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Advanced phishing detection, anomaly behavior monitoring, malicious attachment scanning.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-5 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-orange-400 font-bold">👤</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Human-Risk Analytics</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Insights into user behavior, awareness levels, and risk indicators — enabling targeted training.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-5 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-teal-400 font-bold">📣</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Incident Awareness & Reporting</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Real-time alerts for suspicious logins, unusual email patterns, and identity anomalies.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-5 glow-border">
|
||||||
|
<div class="flex items-center space-x-3 mb-3">
|
||||||
|
<div class="w-10 h-10 bg-gradient-to-br from-gray-500/20 to-slate-500/20 rounded-lg flex items-center justify-center">
|
||||||
|
<span class="text-gray-400 font-bold">⚙</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Governance & Policy Enforcement</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Role-based access, compliance rules, data-loss prevention, and communication governance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Who It Serves -->
|
||||||
|
<section class="mb-8">
|
||||||
|
<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 It Serves
|
||||||
|
</h2>
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-blue-400 font-bold">🏢</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">SMEs</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Requiring secure communication workflows</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-purple-400 font-bold">🏭</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Enterprises</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Facing phishing and compliance challenges</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-green-400 font-bold">🏛</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Critical Infrastructures</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">High-stakes communication environments</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border">
|
||||||
|
<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">
|
||||||
|
<span class="text-orange-400 font-bold">🕊</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Journalists & NGOs</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Needing privacy and anonymity</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="neo-card rounded-xl p-4 glow-border 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">
|
||||||
|
<span class="text-teal-400 font-bold">🏛</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Public Sector</h4>
|
||||||
|
</div>
|
||||||
|
<p class="smaller-text text-gray-300">Handling sensitive documents and citizen data</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Benefits -->
|
||||||
|
<section class="mb-8">
|
||||||
|
<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>
|
||||||
|
Benefits
|
||||||
|
</h2>
|
||||||
|
<div class="neo-card rounded-2xl p-8 glow-border">
|
||||||
|
<div class="grid md:grid-cols-2 gap-6">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start space-x-3">
|
||||||
|
<div class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-green-400 text-xs">✓</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Anti-Phishing & Anti-Spyware</h4>
|
||||||
|
<p class="smaller-text text-gray-400">Blocks impersonation and malicious payloads</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-3">
|
||||||
|
<div class="w-6 h-6 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-blue-400 text-xs">✓</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Authenticated Communication</h4>
|
||||||
|
<p class="smaller-text text-gray-400">Verified sender identity and integrity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex items-start space-x-3">
|
||||||
|
<div class="w-6 h-6 bg-purple-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-purple-400 text-xs">✓</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Identity Protection</h4>
|
||||||
|
<p class="smaller-text text-gray-400">Reduces risk of compromise and spoofing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-start space-x-3">
|
||||||
|
<div class="w-6 h-6 bg-orange-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<span class="text-orange-400 text-xs">✓</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Compliance Ready</h4>
|
||||||
|
<p class="smaller-text text-gray-400">Meets data-protection obligations</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-6 bg-blue-500/10 rounded-lg p-4 border border-blue-500/20">
|
||||||
|
<p class="text-sm text-blue-300">
|
||||||
|
<strong class="text-blue-400">Plus:</strong> Secure workflows between internal and external partners — without changing how you work.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="mb-8 text-center">
|
||||||
|
<div class="neo-card rounded-2xl p-8 glow-border">
|
||||||
|
<h3 class="text-2xl font-bold mb-4 text-white">Secure Your Inbox Today</h3>
|
||||||
|
<p class="text-base text-gray-300 mb-6 max-w-2xl mx-auto">
|
||||||
|
Don’t let your most trusted communication channel become your weakest link. CypSec locks it down — without locking you in.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<a href="mailto:contact@cypsec.de?subject=Secure%20Email%20Setup"
|
||||||
|
class="inline-flex items-center px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-xl hover:from-blue-600 hover:to-purple-600 transition-all transform hover:scale-105 shadow-lg">
|
||||||
|
<span>Request Secure Email Setup</span>
|
||||||
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="/publication/applications/security-suite"
|
||||||
|
class="inline-flex items-center px-6 py-3 border border-gray-600 text-gray-300 font-medium rounded-xl hover:border-gray-500 hover:text-white transition-all">
|
||||||
|
<span>Explore Security Suite</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-gradient-to-t from-gray-900 to-black py-12">
|
||||||
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="grid md:grid-cols-4 gap-8 mb-8">
|
||||||
|
<div class="col-span-2">
|
||||||
|
<div class="flex items-center mb-4">
|
||||||
|
<img src="cypsec-logo-white-transparent.webp" alt="CypSec" class="h-8 w-auto mr-3">
|
||||||
|
<span class="text-xl font-bold text-white">CypSec</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-gray-400 text-sm mb-4 max-w-md">
|
||||||
|
Engineering sovereign cybersecurity that protects, adapts, and sustains critical digital infrastructures.
|
||||||
|
</p>
|
||||||
|
<div class="flex space-x-4">
|
||||||
|
<a href="mailto:contact@cypsec.de" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<span class="text-sm">contact@cypsec.de</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://linkedin.com/company/cypsec-group" class="text-gray-400 hover:text-white transition-colors">
|
||||||
|
<span class="text-sm">LinkedIn</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-4 uppercase">Solutions</h4>
|
||||||
|
<ul class="space-y-2 text-sm text-gray-400">
|
||||||
|
<li><a href="/publication/applications/security-suite" class="hover:text-white transition-colors">Security Suite</a></li>
|
||||||
|
<li><a href="/publication/applications/secure-emails" class="hover:text-white transition-colors">Secure Emails</a></li>
|
||||||
|
<li><a href="/security-center" class="hover:text-white transition-colors">Security Center</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white mb-4 uppercase">Company</h4>
|
||||||
|
<ul class="space-y-2 text-sm text-gray-400">
|
||||||
|
<li><a href="/company/career" class="hover:text-white transition-colors">Career</a></li>
|
||||||
|
<li><a href="/company/data-privacy" class="hover:text-white transition-colors">Data Privacy</a></li>
|
||||||
|
<li><a href="/company/terms-of-service" class="hover:text-white transition-colors">Terms of Service</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="border-t border-gray-800 pt-8">
|
||||||
|
<div class="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
<div class="flex items-center space-x-4 mb-4 md:mb-0">
|
||||||
|
<span class="text-sm text-gray-400">© 2025 CypSec</span>
|
||||||
|
<span class="text-gray-600">•</span>
|
||||||
|
<span class="text-sm text-gray-400">All rights reserved</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-6">
|
||||||
|
<a href="/downloads" class="text-sm text-gray-400 hover:text-white transition-colors">Downloads</a>
|
||||||
|
<a href="/security-notice" class="text-sm text-gray-400 hover:text-white transition-colors">Security</a>
|
||||||
|
<a href="/company/imprint" class="text-sm text-gray-400 hover:text-white transition-colors">Imprint</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user