GuidoSchenone/SECURE-EMAILS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hello

Browse Source
This commit is contained in:
GuidoSchenone
2025-12-09 17:35:35 -03:00
parent 524ffb116e
commit 6e90a4e571
6 changed files with 211 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Entreprise email2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

BIN
WAZUHSAMPLE.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 90 KiB

BIN
cypsec-logo-white-transparent.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
emailsecurity3.jpg.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
mailsecurity.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

295
secure-emails.html
View File

@@ -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">
<div class="flex items-start space-x-4 mb-4"> <p class="text-sm text-gray-300 compact-text 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. 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> </p>
</div>
</div>
<p class="text-sm text-gray-300 compact-text"> <p class="text-sm text-gray-300 compact-text">
To protect communication, both technology and human behavior must be addressed. To protect communication, both technology and human behavior must be addressed.
</p> </p>
</div> </div>
<!-- Full-width image (with safe side-padding) -->
<div class="mt-8 px-4 sm:px-6 lg:px-8">
<div class="neo-card rounded-2xl p-4 glow-border">
<img src="mailsecurity.jpg"
alt="Mail Security Illustration"
class="w-full h-auto rounded-xl object-cover">
</div>
</div>
</section> </section>
<!-- Problem Grid -->
<section class="mb-8"> <!-- Problem Roulette -->
<section class="mb-8" x-data="wheelData()">
<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 ">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span> <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 The Problem with Standard Email
</h2> </h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
<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-red-500/20 to-orange-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-red-400 font-bold">🎣</span>
</div> <div class="relative max-w-md mx-auto">
<h4 class="text-sm font-semibold text-white mb-2">Phishing & BEC</h4> <!-- fixed arrow -->
<p class="smaller-text text-gray-300">Business-email-compromise and credential theft</p> <div class="absolute -top-3 left-1/2 -translate-x-1/2 z-20">
<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>
</div> </div>
<div class="neo-card rounded-xl p-4 glow-border"> <!-- wheel -->
<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"> <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-yellow-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">Spoofing & Impersonation</h4> <!-- slices -->
<p class="smaller-text text-gray-300">Fake domains and identity fraud</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 @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 @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>
<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> </div>
<div class="neo-card rounded-xl p-4 glow-border"> <!-- centre image + explanation -->
<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"> <div class="absolute inset-12 rounded-full overflow-hidden neo-card glow-border">
<span class="text-purple-400 font-bold">📎</span> <img src="emailsecurity3.jpg.webp" alt="Email security" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-black/60 flex items-center justify-center p-4 transition-opacity duration-500"
:class="showText ? 'opacity-100' : 'opacity-0'">
<p class="text-white text-center text-sm" x-text="current.text"></p>
</div>
</div>
</div> </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>
<div class="neo-card rounded-xl p-4 glow-border"> <script>
<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"> function wheelData() {
<span class="text-green-400 font-bold">💥</span> const topics = [
</div> {text:'Business-email-compromise & credential theft'},
<h4 class="text-sm font-semibold text-white mb-2">Data Leaks</h4> {text:'Fake domains and identity fraud'},
<p class="smaller-text text-gray-300">Accidental or malicious exposure</p> {text:'Embedded threats in files'},
</div> {text:'Accidental or malicious exposure'},
{text:'Lack of end-to-end protection'},
<div class="neo-card rounded-xl p-4 glow-border"> {text:'Absence of role-based access & policy'}
<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> return {
</div> rotation: 0,
<h4 class="text-sm font-semibold text-white mb-2">No Encryption</h4> showText: false,
<p class="smaller-text text-gray-300">Lack of end-to-end protection across providers</p> current: topics[0],
</div> pick(angle) {
this.rotation = -angle; // spin to slice
<div class="neo-card rounded-xl p-4 glow-border md:col-span-2 lg:col-span-1"> this.showText = false;
<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"> setTimeout(() => { // after spin
<span class="text-gray-400 font-bold">⚠</span> this.current = topics[angle / 60];
</div> this.showText = true;
<h4 class="text-sm font-semibold text-white mb-2">No Governance</h4> }, 350);
<p class="smaller-text text-gray-300">Absence of role-based access and policy enforcement</p> }
</div> };
</div> }
</script>
</section> </section>
<!-- Capabilities (image breaks the grid) -->
<!-- Capabilities -->
<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 ">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span> <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 CypSec Secure Email Capabilities
</h2> </h2>
<div class="grid md:grid-cols-2 gap-6">
<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-blue-500/20 to-blue-600/20 rounded-lg flex items-center justify-center"> <!-- 1 -->
<span class="text-blue-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">End-to-End Encryption</h4> <span class="text-blue-400 text-xl">🔐</span>
</div> </div>
<h4 class="text-sm font-semibold text-white mb-2">End-to-End Encryption</h4>
<p class="smaller-text text-gray-300">Confidential, identity-validated email and file exchange — even across insecure networks.</p> <p class="smaller-text text-gray-300">Confidential, identity-validated email and file exchange — even across insecure networks.</p>
</div> </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-purple-500/20 to-purple-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-purple-400 font-bold">🗄</span> <span class="text-purple-400 text-xl">🗄</span>
</div>
<h4 class="text-sm font-semibold text-white">Secure File Vault</h4>
</div> </div>
<h4 class="text-sm font-semibold text-white mb-2">Secure File Vault</h4>
<p class="smaller-text text-gray-300">Controlled access for sensitive information, preventing unintentional leaks.</p> <p class="smaller-text text-gray-300">Controlled access for sensitive information, preventing unintentional leaks.</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-green-500/20 to-green-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-green-400 font-bold">🛡</span> <span class="text-green-400 text-xl">🛡</span>
</div>
<h4 class="text-sm font-semibold text-white">Threat Detection & Filtering</h4>
</div> </div>
<h4 class="text-sm font-semibold text-white mb-2">Threat Detection & Filtering</h4>
<p class="smaller-text text-gray-300">Advanced phishing detection, anomaly behavior monitoring, malicious attachment scanning.</p> <p class="smaller-text text-gray-300">Advanced phishing detection, anomaly behavior monitoring, malicious attachment scanning.</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-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-orange-500/20 to-orange-600/20 rounded-lg flex items-center justify-center mb-3">
<span class="text-orange-400 font-bold">👤</span> <span class="text-orange-400 text-xl">👤</span>
</div>
<h4 class="text-sm font-semibold text-white">Human-Risk Analytics</h4>
</div> </div>
<h4 class="text-sm font-semibold text-white mb-2">Human-Risk Analytics</h4>
<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">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"> <!-- CENTER IMAGE (spans 2 columns, bigger) -->
<div class="flex items-center space-x-3 mb-3"> <div class="md:col-span-2 neo-card rounded-xl overflow-hidden glow-border">
<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"> <img src="WAZUHSAMPLE.png"
<span class="text-teal-400 font-bold">📣</span> alt="Wazuh sample"
</div> class="w-full h-full object-cover">
<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>
<div class="neo-card rounded-xl p-5 glow-border"> <!-- 6 – full-width bottom bar -->
<div class="flex items-center space-x-3 mb-3"> <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"> <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> <span class="text-gray-400 text-xl">⚙</span>
</div> </div>
<div>
<h4 class="text-sm font-semibold text-white">Governance & Policy Enforcement</h4> <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> <p class="smaller-text text-gray-300">Role-based access, compliance rules, data-loss prevention, and communication governance.</p>
</div> </div>
</div> </div>
</div>
</section> </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,56 +369,49 @@
</div> </div>
</section> </section>
<!-- Benefits --> <!-- Benefits -->
<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 ">
<span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span> <span class="w-1 h-8 bg-gradient-to-b from-blue-500 to-purple-500 rounded-full mr-3"></span>
Benefits Benefits
</h2> </h2>
<div class="neo-card rounded-2xl p-8 glow-border"> <div class="neo-card rounded-2xl p-8 glow-border">
<div class="grid md:grid-cols-2 gap-6"> <!-- 2×2 adaptive grid around the image -->
<div class="space-y-4"> <div class="grid md:grid-cols-3 gap-6 items-center">
<div class="flex items-start space-x-3"> <!-- left column -->
<div class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0"> <div class="space-y-6">
<span class="text-green-400 text-xs">✓</span> <div class="flex justify-center space-x-4">
<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>
<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">
<h4 class="text-sm font-semibold text-white">Anti-Phishing & Anti-Spyware</h4> <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>
<p class="smaller-text text-gray-400">Blocks impersonation and malicious payloads</p> <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> </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"> <!-- centered image frame -->
<span class="text-blue-400 text-xs">✓</span> <div class="flex justify-center">
<img src="entreprise email2.jpg" alt="Enterprise secure email" class="w-full h-auto max-w-xs rounded-xl object-cover">
</div> </div>
<div>
<h4 class="text-sm font-semibold text-white">Authenticated Communication</h4> <!-- right column -->
<p class="smaller-text text-gray-400">Verified sender identity and integrity</p> <div class="space-y-6">
<div class="flex justify-center space-x-4">
<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 justify-center space-x-4">
<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>
</div> </div>
<div class="space-y-4">
<div class="flex items-start space-x-3"> <!-- footer bar -->
<div class="w-6 h-6 bg-purple-500/20 rounded-full flex items-center justify-center flex-shrink-0"> <div class="mt-8 bg-blue-500/10 rounded-lg p-4 border border-blue-500/20 text-center">
<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"> <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. <strong class="text-blue-400">Plus:</strong> Secure workflows between internal and external partners — without changing how you work.
</p> </p>