hello
This commit is contained in:
GuidoSchenone
BIN
Entreprise email2.jpg
Normal file
BIN
Entreprise email2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
BIN
WAZUHSAMPLE.png
Normal file
BIN
WAZUHSAMPLE.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
BIN
cypsec-logo-white-transparent.webp
Normal file
BIN
cypsec-logo-white-transparent.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
emailsecurity3.jpg.webp
Normal file
BIN
emailsecurity3.jpg.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
mailsecurity.jpg
Normal file
BIN
mailsecurity.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -86,6 +86,21 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
<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" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255, 255, 255, 0.1)" stroke-width="1"></path>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="100%" height="100%" fill="url(#grid)"></rect>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 z-[-1] 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>
|
||||||
<body class="bg-black text-white">
|
<body class="bg-black text-white">
|
||||||
<div class="min-h-screen">
|
<div class="min-h-screen">
|
||||||
<!-- Navigation -->
|
<!-- Navigation -->
|
||||||
@@ -129,173 +144,172 @@
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class="text-lg max-w-2xl mx-auto text-gray-400 mb-4">
|
<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>
|
</p>
|
||||||
|
|
||||||
<div class="flex justify-center mx-auto">
|
<div class="flex justify-center mx-auto mt-6">
|
||||||
<div class="flex items-center space-x-2">
|
<span class="inline-block w-40 h-1 bg-blue-500 rounded-full"></span>
|
||||||
<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-3 h-1 mx-1 bg-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-1 h-1 bg-blue-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>
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<p class="text-xs text-gray-500 font-mono">/publication/applications/secure-emails</p>
|
<p class="text-xs text-gray-500 font-mono">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Intro -->
|
<section class="mb-8">
|
||||||
<section class="mb-8">
|
<div class="neo-card rounded-2xl p-6 glow-border">
|
||||||
<div class="neo-card rounded-2xl p-6 glow-border">
|
<p class="text-sm text-gray-300 compact-text mb-4">
|
||||||
<div class="flex items-start space-x-4 mb-4">
|
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.
|
||||||
<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">
|
</p>
|
||||||
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<p class="text-sm text-gray-300 compact-text">
|
||||||
<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"/>
|
To protect communication, both technology and human behavior must be addressed.
|
||||||
</svg>
|
</p>
|
||||||
</div>
|
</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 -->
|
<!-- Full-width image (with safe side-padding) -->
|
||||||
<section class="mb-8">
|
<div class="mt-8 px-4 sm:px-6 lg:px-8">
|
||||||
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
<div class="neo-card rounded-2xl p-4 glow-border">
|
||||||
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
<img src="mailsecurity.jpg"
|
||||||
The Problem with Standard Email
|
alt="Mail Security Illustration"
|
||||||
</h2>
|
class="w-full h-auto rounded-xl object-cover">
|
||||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
|
</div>
|
||||||
<div class="neo-card rounded-xl p-4 glow-border">
|
</div>
|
||||||
<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">
|
</section>
|
||||||
<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">
|
<!-- Problem Roulette -->
|
||||||
<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">
|
<section class="mb-8" x-data="wheelData()">
|
||||||
<span class="text-purple-400 font-bold">📎</span>
|
<h2 class="text-2xl font-bold mb-6 text-white flex items-center ">
|
||||||
</div>
|
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||||||
<h4 class="text-sm font-semibold text-white mb-2">Malware Attachments</h4>
|
The Problem with Standard Email
|
||||||
<p class="smaller-text text-gray-300">Embedded threats in files</p>
|
</h2>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="neo-card rounded-xl p-4 glow-border">
|
<!-- Alpine CDN (load once in <head> if you prefer) -->
|
||||||
<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">
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
<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="relative max-w-md mx-auto">
|
||||||
<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">
|
<!-- fixed arrow -->
|
||||||
<span class="text-blue-400 font-bold">🔓</span>
|
<div class="absolute -top-3 left-1/2 -translate-x-1/2 z-20">
|
||||||
</div>
|
<div class="w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent border-b-red-500"></div>
|
||||||
<h4 class="text-sm font-semibold text-white mb-2">No Encryption</h4>
|
</div>
|
||||||
<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">
|
<!-- wheel -->
|
||||||
<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">
|
<div class="w-80 h-80 mx-auto rounded-full bg-gradient-to-br from-slate-800 to-black p-3 shadow-2xl relative overflow-hidden">
|
||||||
<span class="text-gray-400 font-bold">⚠</span>
|
<div class="w-full h-full rounded-full grid grid-cols-2 grid-rows-3"
|
||||||
</div>
|
:style="'transform: rotate(' + rotation + 'deg); transition: transform .7s ease-out'">
|
||||||
<h4 class="text-sm font-semibold text-white mb-2">No Governance</h4>
|
<!-- slices -->
|
||||||
<p class="smaller-text text-gray-300">Absence of role-based access and policy enforcement</p>
|
<div @click="pick(0)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-red-500/20 to-orange-500/20">🎣</div>
|
||||||
</div>
|
<div @click="pick(60)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-yellow-500/20 to-orange-500/20">👻</div>
|
||||||
</div>
|
<div @click="pick(120)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-purple-500/20 to-pink-500/20">📎</div>
|
||||||
</section>
|
<div @click="pick(180)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-green-500/20 to-teal-500/20">💥</div>
|
||||||
|
<div @click="pick(240)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20">🔓</div>
|
||||||
|
<div @click="pick(300)" class="cursor-pointer hover:brightness-125 flex items-center justify-center text-3xl bg-gradient-to-br from-gray-500/20 to-slate-500/20">⚠</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Capabilities -->
|
<!-- centre image + explanation -->
|
||||||
<section class="mb-8">
|
<div class="absolute inset-12 rounded-full overflow-hidden neo-card glow-border">
|
||||||
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
<img src="emailsecurity3.jpg.webp" alt="Email security" class="w-full h-full object-cover">
|
||||||
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
<div class="absolute inset-0 bg-black/60 flex items-center justify-center p-4 transition-opacity duration-500"
|
||||||
CypSec Secure Email Capabilities
|
:class="showText ? 'opacity-100' : 'opacity-0'">
|
||||||
</h2>
|
<p class="text-white text-center text-sm" x-text="current.text"></p>
|
||||||
<div class="grid md:grid-cols-2 gap-6">
|
</div>
|
||||||
<div class="neo-card rounded-xl p-5 glow-border">
|
</div>
|
||||||
<div class="flex items-center space-x-3 mb-3">
|
</div>
|
||||||
<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">
|
</div>
|
||||||
<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">
|
<script>
|
||||||
<div class="flex items-center space-x-3 mb-3">
|
function wheelData() {
|
||||||
<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">
|
const topics = [
|
||||||
<span class="text-purple-400 font-bold">🗄</span>
|
{text:'Business-email-compromise & credential theft'},
|
||||||
</div>
|
{text:'Fake domains and identity fraud'},
|
||||||
<h4 class="text-sm font-semibold text-white">Secure File Vault</h4>
|
{text:'Embedded threats in files'},
|
||||||
</div>
|
{text:'Accidental or malicious exposure'},
|
||||||
<p class="smaller-text text-gray-300">Controlled access for sensitive information, preventing unintentional leaks.</p>
|
{text:'Lack of end-to-end protection'},
|
||||||
</div>
|
{text:'Absence of role-based access & policy'}
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
rotation: 0,
|
||||||
|
showText: false,
|
||||||
|
current: topics[0],
|
||||||
|
pick(angle) {
|
||||||
|
this.rotation = -angle; // spin to slice
|
||||||
|
this.showText = false;
|
||||||
|
setTimeout(() => { // after spin
|
||||||
|
this.current = topics[angle / 60];
|
||||||
|
this.showText = true;
|
||||||
|
}, 350);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
<!-- Capabilities (image breaks the 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>
|
||||||
|
CypSec Secure Email Capabilities
|
||||||
|
</h2>
|
||||||
|
|
||||||
<div class="neo-card rounded-xl p-5 glow-border">
|
<!-- 3-column grid, image spans 2 columns -->
|
||||||
<div class="flex items-center space-x-3 mb-3">
|
<div class="grid md:grid-cols-3 gap-6 items-stretch">
|
||||||
<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">
|
<!-- 1 -->
|
||||||
<span class="text-green-400 font-bold">🛡</span>
|
<div class="neo-card rounded-xl p-5 glow-border flex flex-col items-center text-center justify-center">
|
||||||
</div>
|
<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 mb-3">
|
||||||
<h4 class="text-sm font-semibold text-white">Threat Detection & Filtering</h4>
|
<span class="text-blue-400 text-xl">🔐</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="smaller-text text-gray-300">Advanced phishing detection, anomaly behavior monitoring, malicious attachment scanning.</p>
|
<h4 class="text-sm font-semibold text-white mb-2">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">
|
<!-- 2 -->
|
||||||
<div class="flex items-center space-x-3 mb-3">
|
<div class="neo-card rounded-xl p-5 glow-border flex flex-col items-center text-center justify-center">
|
||||||
<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">
|
<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 mb-3">
|
||||||
<span class="text-orange-400 font-bold">👤</span>
|
<span class="text-purple-400 text-xl">🗄</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="text-sm font-semibold text-white">Human-Risk Analytics</h4>
|
<h4 class="text-sm font-semibold text-white mb-2">Secure File Vault</h4>
|
||||||
</div>
|
<p class="smaller-text text-gray-300">Controlled access for sensitive information, preventing unintentional leaks.</p>
|
||||||
<p class="smaller-text text-gray-300">Insights into user behavior, awareness levels, and risk indicators — enabling targeted training.</p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="neo-card rounded-xl p-5 glow-border">
|
<!-- 3 -->
|
||||||
<div class="flex items-center space-x-3 mb-3">
|
<div class="neo-card rounded-xl p-5 glow-border flex flex-col items-center text-center justify-center">
|
||||||
<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">
|
<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 mb-3">
|
||||||
<span class="text-teal-400 font-bold">📣</span>
|
<span class="text-green-400 text-xl">🛡</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="text-sm font-semibold text-white">Incident Awareness & Reporting</h4>
|
<h4 class="text-sm font-semibold text-white mb-2">Threat Detection & Filtering</h4>
|
||||||
</div>
|
<p class="smaller-text text-gray-300">Advanced phishing detection, anomaly behavior monitoring, malicious attachment scanning.</p>
|
||||||
<p class="smaller-text text-gray-300">Real-time alerts for suspicious logins, unusual email patterns, and identity anomalies.</p>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="neo-card rounded-xl p-5 glow-border">
|
<!-- 4 -->
|
||||||
<div class="flex items-center space-x-3 mb-3">
|
<div class="neo-card rounded-xl p-5 glow-border flex flex-col items-center text-center justify-center">
|
||||||
<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">
|
<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 mb-3">
|
||||||
<span class="text-gray-400 font-bold">⚙</span>
|
<span class="text-orange-400 text-xl">👤</span>
|
||||||
</div>
|
</div>
|
||||||
<h4 class="text-sm font-semibold text-white">Governance & Policy Enforcement</h4>
|
<h4 class="text-sm font-semibold text-white mb-2">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>
|
||||||
<p class="smaller-text text-gray-300">Role-based access, compliance rules, data-loss prevention, and communication governance.</p>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
|
<!-- CENTER IMAGE (spans 2 columns, bigger) -->
|
||||||
|
<div class="md:col-span-2 neo-card rounded-xl overflow-hidden glow-border">
|
||||||
|
<img src="WAZUHSAMPLE.png"
|
||||||
|
alt="Wazuh sample"
|
||||||
|
class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 6 – full-width bottom bar -->
|
||||||
|
<div class="md:col-span-3 neo-card rounded-xl p-5 glow-border flex items-center justify-center text-center">
|
||||||
|
<div class="flex items-center space-x-4">
|
||||||
|
<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 text-xl">⚙</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-sm font-semibold text-white">Governance & Policy Enforcement</h4>
|
||||||
|
<p class="smaller-text text-gray-300">Role-based access, compliance rules, data-loss prevention, and communication governance.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<!-- Who It Serves -->
|
<!-- Who It Serves -->
|
||||||
<section class="mb-8">
|
<section class="mb-8">
|
||||||
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
||||||
@@ -355,62 +369,55 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Benefits -->
|
|
||||||
<section class="mb-8">
|
<!-- Benefits -->
|
||||||
<h2 class="text-2xl font-bold mb-6 text-white flex items-center">
|
<section class="mb-8">
|
||||||
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
<h2 class="text-2xl font-bold mb-6 text-white flex ">
|
||||||
Benefits
|
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
|
||||||
</h2>
|
Benefits
|
||||||
<div class="neo-card rounded-2xl p-8 glow-border">
|
</h2>
|
||||||
<div class="grid md:grid-cols-2 gap-6">
|
|
||||||
<div class="space-y-4">
|
<div class="neo-card rounded-2xl p-8 glow-border">
|
||||||
<div class="flex items-start space-x-3">
|
<!-- 2×2 adaptive grid around the image -->
|
||||||
<div class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
<div class="grid md:grid-cols-3 gap-6 items-center">
|
||||||
<span class="text-green-400 text-xs">✓</span>
|
<!-- left column -->
|
||||||
</div>
|
<div class="space-y-6">
|
||||||
<div>
|
<div class="flex justify-center space-x-4">
|
||||||
<h4 class="text-sm font-semibold text-white">Anti-Phishing & Anti-Spyware</h4>
|
<div class="w-6 h-6 bg-green-500/20 rounded-full flex justify-center flex-shrink-0"><span class="text-green-400 text-xs">✓</span></div>
|
||||||
<p class="smaller-text text-gray-400">Blocks impersonation and malicious payloads</p>
|
<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>
|
||||||
</div>
|
<div class="flex justify-center space-x-4">
|
||||||
<div class="flex items-start space-x-3">
|
<div class="w-6 h-6 bg-blue-500/20 rounded-full flex justify-center flex-shrink-0"><span class="text-blue-400 text-xs">✓</span></div>
|
||||||
<div class="w-6 h-6 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
<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>
|
||||||
<span class="text-blue-400 text-xs">✓</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-semibold text-white">Authenticated Communication</h4>
|
<!-- centered image frame -->
|
||||||
<p class="smaller-text text-gray-400">Verified sender identity and integrity</p>
|
<div class="flex justify-center">
|
||||||
</div>
|
<img src="entreprise email2.jpg" alt="Enterprise secure email" class="w-full h-auto max-w-xs rounded-xl object-cover">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="space-y-4">
|
<!-- right column -->
|
||||||
<div class="flex items-start space-x-3">
|
<div class="space-y-6">
|
||||||
<div class="w-6 h-6 bg-purple-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
<div class="flex justify-center space-x-4">
|
||||||
<span class="text-purple-400 text-xs">✓</span>
|
<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>
|
<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>
|
||||||
<h4 class="text-sm font-semibold text-white">Identity Protection</h4>
|
<div class="flex justify-center space-x-4">
|
||||||
<p class="smaller-text text-gray-400">Reduces risk of compromise and spoofing</p>
|
<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>
|
<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 class="flex items-start space-x-3">
|
</div>
|
||||||
<div class="w-6 h-6 bg-orange-500/20 rounded-full flex items-center justify-center flex-shrink-0">
|
</div>
|
||||||
<span class="text-orange-400 text-xs">✓</span>
|
|
||||||
</div>
|
<!-- footer bar -->
|
||||||
<div>
|
<div class="mt-8 bg-blue-500/10 rounded-lg p-4 border border-blue-500/20 text-center">
|
||||||
<h4 class="text-sm font-semibold text-white">Compliance Ready</h4>
|
<p class="text-sm text-blue-300">
|
||||||
<p class="smaller-text text-gray-400">Meets data-protection obligations</p>
|
<strong class="text-blue-400">Plus:</strong> Secure workflows between internal and external partners — without changing how you work.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<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 -->
|
<!-- CTA -->
|
||||||
<section class="mb-8 text-center">
|
<section class="mb-8 text-center">
|
||||||
@@ -421,14 +428,14 @@
|
|||||||
</p>
|
</p>
|
||||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
<a href="mailto:contact@cypsec.de?subject=Secure%20Email%20Setup"
|
<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">
|
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>
|
<span>Request Secure Email Setup</span>
|
||||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<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>
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="/publication/applications/security-suite"
|
<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">
|
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>
|
<span>Explore Security Suite</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user