cyberuslabs / solutions.html
fancycashew's picture
Now do the AI thread detection.
4186429 verified
Raw
History Blame Contribute Delete
20.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Solutions - Cyberus Labs</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'primary-orange': '#e65103',
'smoke-white': '#f5f5f5'
}
}
}
}
</script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
:root {
--primary-orange: #e65103;
--smoke-white: #f5f5f5;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #0f172a;
color: var(--smoke-white);
}
.bg-orange-600 {
background-color: var(--primary-orange);
}
.hero-bg {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.card-gradient {
background: linear-gradient(145deg, #1e293b, #0f172a);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.tech-icon {
background: linear-gradient(135deg, var(--primary-orange) 0%, #ff8c42 100%);
padding: 1rem;
border-radius: 1rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-orange) 0%, #ff6d00 100%);
transition: all 0.3s ease;
}
.border-orange-600 {
border-color: var(--primary-orange);
}
.text-orange-500 {
color: var(--primary-orange);
}
.btn-primary:hover {
transform: scale(1.05);
box-shadow: 0 10px 25px -5px rgba(230, 81, 3, 0.4);
}
.section-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-orange), transparent);
}
.text-gradient {
background: linear-gradient(90deg, var(--primary-orange), #ff8c42);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hover\:bg-orange-600:hover {
background-color: var(--primary-orange);
}
</style>
</head>
<body class="bg-slate-900 text-slate-100">
<!-- Navigation -->
<nav class="bg-slate-900 border-b border-slate-800 py-4 px-4">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold">Cyberus Labs</a>
<div class="flex space-x-6">
<a href="index.html" class="hover:text-orange-500">Home</a>
<a href="solutions.html" class="text-orange-500">Solutions</a>
<a href="cyberus-key.html" class="hover:text-orange-500">Cyberus Key</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16" data-aos="fade-up">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Our Solutions</h1>
<p class="text-2xl mb-8 max-w-3xl mx-auto text-slate-300">Next-generation cybersecurity technologies designed to eliminate vulnerabilities</p>
<div class="w-24 h-1 bg-orange-600 mx-auto"></div>
</div>
<div class="flex flex-col lg:flex-row items-center gap-12">
<div class="lg:w-1/2" data-aos="fade-right">
<div class="relative">
<div class="absolute -inset-4 bg-orange-600 rounded-2xl opacity-20 blur"></div>
<img src="https://huggingface.co/spaces/fancycashew/cyberuslabs-2/resolve/main/images/marketing_image.png" alt="Cyberus Labs Solutions" class="relative rounded-2xl shadow-2xl">
</div>
</div>
<div class="lg:w-1/2" data-aos="fade-left">
<h2 class="text-2xl font-bold mb-6">Comprehensive Security Ecosystem</h2>
<p class="text-lg text-slate-300 mb-6">
Our suite of cybersecurity solutions addresses the most critical vulnerabilities facing organizations today. From eliminating password-based attacks to securing IoT devices, we provide layered protection without compromising usability.
</p>
<p class="text-lg text-slate-300 mb-6">
Each solution is designed to work independently or as part of an integrated security framework, giving you the flexibility to address your specific security challenges while building toward a comprehensive defense strategy.
</p>
</div>
</div>
</div>
</section>
<!-- Core Solutions -->
<section class="py-20 bg-slate-800 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Core Solutions</h2>
<div class="w-24 h-1 bg-orange-600 mx-auto"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Solution 1 -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="100">
<div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
<i data-feather="key" class="text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Cyberus Key</h3>
<p class="text-slate-300 mb-4">
Passwordless authentication platform that eliminates credential-based attacks entirely through ultrasonic one-time tokens.
</p>
<ul class="space-y-2 text-slate-400">
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>One-touch login via smartphone</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Prevents 80% of hacking attacks</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Works offline via audio tokens</span>
</li>
</ul>
<a href="cyberus-key.html" class="mt-6 inline-block text-orange-500 font-semibold hover:underline">Learn more →</a>
</div>
<!-- Solution 2 -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="200">
<div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
<i data-feather="cpu" class="text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">IoT Security Suite</h3>
<p class="text-slate-300 mb-4">
Lightweight encryption protocol specifically designed for resource-constrained IoT devices.
</p>
<ul class="space-y-2 text-slate-400">
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Runs on low-power hardware</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>No hardware upgrades required</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Device-to-device encryption</span>
</li>
</ul>
<a href="#" class="mt-6 inline-block text-orange-500 font-semibold hover:underline">Learn more →</a>
</div>
<!-- Solution 3 -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="300">
<div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
<i data-feather="activity" class="text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">AI Threat Detection</h3>
<p class="text-slate-300 mb-4">
Predictive analytics that detect anomalies and automatically respond to emerging threats.
</p>
<ul class="space-y-2 text-slate-400">
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Real-time anomaly detection</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Self-healing security systems</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Predictive vulnerability assessment</span>
</li>
</ul>
<a href="#" class="mt-6 inline-block text-orange-500 font-semibold hover:underline">Learn more →</a>
</div>
<!-- Solution 4 -->
<div class="card-gradient rounded-2xl p-8 feature-card transition-all duration-300" data-aos="fade-up" data-aos-delay="400">
<div class="tech-icon w-16 h-16 flex items-center justify-center mb-6">
<i data-feather="shield" class="text-white text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Zero Trust Framework</h3>
<p class="text-slate-300 mb-4">
Comprehensive security architecture that assumes no implicit trust and continuously validates every transaction.
</p>
<ul class="space-y-2 text-slate-400">
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Continuous verification</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Micro-segmentation</span>
</li>
<li class="flex items-start">
<i data-feather="check-circle" class="text-orange-500 mr-2 mt-1"></i>
<span>Least privilege access</span>
</li>
</ul>
<a href="#" class="mt-6 inline-block text-orange-500 font-semibold hover:underline">Learn more →</a>
</div>
</div>
</div>
</section>
<!-- Integration Benefits -->
<section class="py-20 px-4">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Seamless Integration</h2>
<p class="text-xl max-w-3xl mx-auto text-slate-300">
Our solutions are designed to work together or independently, providing maximum flexibility for your security infrastructure
</p>
<div class="w-24 h-1 bg-orange-600 mx-auto mt-6"></div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div class="space-y-8" data-aos="fade-right">
<div class="flex">
<div class="mr-6">
<div class="w-12 h-12 rounded-full bg-orange-600 flex items-center justify-center">
<i data-feather="layers" class="text-white"></i>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-3">Modular Architecture</h3>
<p class="text-slate-300">
Deploy individual solutions to address specific security gaps or implement a comprehensive security ecosystem for enterprise-wide protection.
</p>
</div>
</div>
<div class="flex">
<div class="mr-6">
<div class="w-12 h-12 rounded-full bg-orange-600 flex items-center justify-center">
<i data-feather="code" class="text-white"></i>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-3">API-First Approach</h3>
<p class="text-slate-300">
All solutions feature robust APIs and SDKs for straightforward integration with existing systems, minimizing deployment complexity.
</p>
</div>
</div>
<div class="flex">
<div class="mr-6">
<div class="w-12 h-12 rounded-full bg-orange-600 flex items-center justify-center">
<i data-feather="globe" class="text-white"></i>
</div>
</div>
<div>
<h3 class="text-2xl font-bold mb-3">Cloud & On-Premises</h3>
<p class="text-slate-300">
Flexible deployment options allow you to choose the hosting model that best fits your security requirements and compliance needs.
</p>
</div>
</div>
</div>
<div class="flex items-center justify-center" data-aos="fade-left">
<div class="relative">
<div class="absolute -inset-4 bg-orange-600 rounded-2xl opacity-20 blur"></div>
<img src="http://static.photos/technology/640x360/789" alt="Integration Diagram" class="relative rounded-2xl shadow-2xl">
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 bg-slate-800 px-4">
<div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Security Infrastructure?</h2>
<p class="text-xl text-slate-300 mb-10">
Discover how our solutions can eliminate vulnerabilities and simplify security management for your organization.
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="btn-primary px-8 py-4 rounded-lg font-semibold text-lg">
Schedule a Consultation
</button>
<button class="bg-transparent border-2 border-orange-600 px-8 py-4 rounded-lg font-semibold text-lg hover:bg-orange-600 transition">
Download Solutions Brochure
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-slate-900 border-t border-slate-800 py-12 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<h3 class="text-2xl font-bold mb-4">Cyberus Labs</h3>
<p class="text-slate-400 mb-6 max-w-md">
Next-level cybersecurity solutions designed for today's threats. Eliminating passwords, securing IoT, and predicting threats with AI.
</p>
<div class="flex space-x-4">
<a href="#" class="text-slate-400 hover:text-orange-500">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-slate-400 hover:text-orange-500">
<i data-feather="linkedin"></i>
</a>
<a href="#" class="text-slate-400 hover:text-orange-500">
<i data-feather="github"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Solutions</h4>
<ul class="space-y-2 text-slate-400">
<li><a href="solutions.html" class="hover:text-orange-500">Our Solutions</a></li>
<li><a href="cyberus-key.html" class="hover:text-orange-500">Cyberus Key</a></li>
<li><a href="eliot-pro.html" class="hover:text-orange-500">ELIoT Pro</a></li>
<li><a href="#" class="hover:text-orange-500">AI Threat Detection</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Company</h4>
<ul class="space-y-2 text-slate-400">
<li><a href="index.html" class="hover:text-orange-500">Home</a></li>
<li><a href="about.html" class="hover:text-orange-500">About Us</a></li>
<li><a href="partners.html" class="hover:text-orange-500">Partners</a></li>
<li><a href="#" class="hover:text-orange-500">Contact</a></li>
</ul>
</div>
</div>
<div class="border-t border-slate-800 mt-12 pt-8 text-center text-slate-500">
<p>&copy; 2023 Cyberus Labs. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Initialize AOS
AOS.init({
duration: 1000,
once: true
});
// Initialize Feather Icons
feather.replace();
</script>
</body>
</html>