Загрузка...
Шаблон лендинга Aether AI SaaS для ИИ-сервисов. Чистый дизайн, адаптивный. Идеален для стартапов и IT-компаний.
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AETHER - AI Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Custom scrollbar for dark theme */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
.glass-panel {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glow-text {
text-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
}
.fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.code-syntax-blue { color: #60a5fa; }
.code-syntax-purple { color: #c084fc; }
.code-syntax-green { color: #4ade80; }
.code-syntax-gray { color: #94a3b8; }
</style></head>
<body class="bg-[#050505] text-slate-300 font-normal antialiased selection:bg-emerald-500/30 selection:text-emerald-200">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 border-b border-white/5 bg-[#050505]/80 backdrop-blur-md">
<div class="flex h-20 max-w-7xl mr-auto ml-auto pr-6 pl-6 items-center justify-between">
<!-- Logo -->
<a href="#" onclick="route('landing')" class="flex items-center gap-2 group">
<div class="text-emerald-400 group-hover:text-emerald-300 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="triangle" aria-hidden="true" class="lucide lucide-triangle w-6 h-6 fill-current rotate-180">
<path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" class=""></path>
</svg>
</div>
<span class="text-white text-xl font-medium tracking-tight">
AETHER
</span>
</a>
<!-- Desktop Links -->
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
<a href="#" onclick="route('landing')" class="hover:text-white transition-colors">
Home
</a>
<a href="/about" onclick="route('about')" class="hover:text-white transition-colors">
About
</a>
<a href="/pricing" onclick="route('pricing')" class="hover:text-white transition-colors">
Pricing
</a>
<a href="/contact" onclick="route('contact')" class="hover:text-white transition-colors">
Contact
</a>
</div>
<!-- CTA & Mobile Menu -->
<div class="flex items-center gap-4">
<button onclick="route('pricing')" class="group relative hidden md:inline-flex h-10 overflow-hidden rounded-lg p-[1px] focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 focus:ring-offset-slate-900">
<span class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#10b981_0%,#050505_50%,#10b981_100%)]"></span>
<span class="inline-flex cursor-pointer items-center justify-center transition-colors group-hover:bg-[#050505]/80 text-sm font-medium text-white bg-[#050505] w-full h-full rounded-lg pt-4 pr-8 pb-4 pl-8 backdrop-blur-3xl" onclick="window.location.href='/contact'" role="button">Get started now</span>
</button>
<button class="md:hidden text-white" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" aria-hidden="true" class="lucide lucide-menu w-6 h-6">
<path d="M4 5h16"></path>
<path d="M4 12h16"></path>
<path d="M4 19h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<div id="mobile-menu" class="hidden md:hidden border-t border-white/5 bg-[#050505] absolute w-full p-4 flex flex-col gap-4">
<a href="#" onclick="route('landing'); toggleMenu()" class="block py-2 text-sm">
Home
</a>
<a href="#" onclick="route('pricing'); toggleMenu()" class="block py-2 text-sm">
Pricing
</a>
<a href="#" onclick="route('about'); toggleMenu()" class="block py-2 text-sm">
About
</a>
<a href="#" onclick="route('blog'); toggleMenu()" class="block py-2 text-sm">
Blog
</a>
<a href="#" onclick="route('contact'); toggleMenu()" class="block py-2 text-sm">
Contact
</a>
</div>
</nav>
<!-- Main Content Area -->
<main id="app-content" class="pt-20 min-h-screen relative overflow-hidden">
<!-- Background Gradient Effects -->
<div class="fixed top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-emerald-500/20 rounded-full blur-[120px] -z-10 pointer-events-none opacity-20"></div>
<div class="fixed bottom-0 right-0 w-[800px] h-[600px] bg-blue-600/10 rounded-full blur-[120px] -z-10 pointer-events-none opacity-20"></div>
<!-- LANDING PAGE -->
<div class="page-section fade-in" id="page-landing">
<!-- Hero Section -->
<section class="pt-20 pr-6 pb-32 pl-6 relative">
<div class="flex flex-col text-center max-w-4xl mr-auto ml-auto items-center" style=" animation: slideUp 0.8s ease forwards;">
<style>
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 text-xs text-emerald-400 mb-8 hover:bg-white/10 transition-colors cursor-pointer">
<span class="px-1.5 py-0.5 rounded bg-emerald-500/20 text-emerald-300 font-medium text-[10px] uppercase tracking-wider">
New
</span>
<span class="">Introducing AI Workflow 2.0</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" aria-hidden="true" class="lucide lucide-chevron-right w-3 h-3">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
<h1 class="leading-[1.1] md:text-7xl lg:text-6xl text-5xl font-medium text-white tracking-tight mb-8">
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-emerald-200">
AI solutions
</span>
designed
<br>
for your business needs
</h1>
<p class="md:text-xl leading-relaxed text-lg text-slate-400 max-w-2xl mr-auto mb-10 ml-auto">
Built for efficiency and scalability, it adapts to your workflow
and boosts productivity across your entire organization.
</p>
<div class="flex flex-col sm:flex-row items-center gap-4">
<button onclick="route('pricing');window.location.href='/contact'" class="group hover:bg-emerald-400 transition-all flex font-medium text-[#050505] bg-emerald-500 rounded-full pt-4 pr-8 pb-4 pl-8 gap-x-2 gap-y-2 items-center cursor-pointer" role="button">
Get started now
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" aria-hidden="true" class="lucide lucide-trending-up w-4 h-4 group-hover:translate-x-1 transition-transform">
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
</svg>
</button>
</div>
</div>
</section>
<!-- Logo Cloud -->
<section class="text-center max-w-7xl mr-auto ml-auto pr-6 pb-32 pl-6">
<p class="text-lg text-slate-400 mb-12">
Trust by 1000+ brands and organizations worldwide
</p>
<div class="flex flex-wrap hover:grayscale-0 transition-all duration-500 opacity-50 grayscale gap-x-12 gap-y-12 items-center justify-center">
<div class="flex items-center gap-2 text-2xl font-bold text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="slack" aria-hidden="true" class="lucide lucide-slack w-8 h-8">
<rect width="3" height="8" x="13" y="2" rx="1.5"></rect>
<path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5"></path>
<rect width="3" height="8" x="8" y="14" rx="1.5"></rect>
<path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5"></path>
<rect width="8" height="3" x="14" y="13" rx="1.5" class=""></rect>
<path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5"></path>
<rect width="8" height="3" x="2" y="8" rx="1.5"></rect>
<path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5"></path>
</svg>
slack
</div>
<div class="flex items-center gap-2 text-2xl font-bold text-white">
<span class="bg-white text-black rounded px-1 text-lg font-serif">
N
</span>
Notion
</div>
<div class="flex items-center gap-2 text-2xl font-bold text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="box" aria-hidden="true" class="lucide lucide-box w-8 h-8 fill-current">
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class="">
</path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
Airtable
</div>
<div class="flex items-center gap-2 text-2xl font-medium text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="figma" aria-hidden="true" class="lucide lucide-figma w-6 h-6">
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path>
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path>
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path>
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path>
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path>
</svg>
Figma
</div>
<div class="flex items-center gap-2 text-2xl font-bold text-white italic">
Trello
</div>
</div>
</section>
<!-- Why Choose Us Section -->
<section class="max-w-7xl mr-auto ml-auto pr-6 pb-32 pl-6">
<div class="text-center mb-16">
<h2 class="md:text-5xl text-3xl font-medium text-white tracking-tight mb-4">Why Choose Us?</h2>
<p class="text-lg text-slate-400">
Everything you need to automate, optimize, and scale
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Real-Time Intelligence -->
<div class="group p-8 rounded-3xl border border-white/10 bg-[#0A0C10] hover:border-emerald-500/30 transition-all duration-300 flex flex-col items-center text-center">
<!-- SVG Gauge -->
<div class="h-40 w-full flex items-center justify-center mb-6 relative">
<!-- Abstract Gauge -->
<svg width="120" height="80" viewBox="0 0 120 80" class="overflow-visible">
<!-- Track -->
<path d="M10 70 A 50 50 0 0 1 110 70" fill="none" stroke="#1e293b" stroke-width="8" stroke-linecap="round"></path>
<!-- Progress (animated on hover) -->
<path d="M10 70 A 50 50 0 0 1 110 70" fill="none" stroke="url(#gauge-gradient)" stroke-width="8" stroke-linecap="round" stroke-dasharray="157" stroke-dashoffset="157" class="group-hover:stroke-dashoffset-40 transition-all duration-1000 ease-out" style="stroke-dashoffset: 100;"></path>
<!-- Needle -->
<g class="origin-[60px_70px] transition-transform duration-700 ease-out group-hover:rotate-45">
<rect x="58" y="20" width="4" height="50" rx="2" fill="#e2e8f0"></rect>
<circle cx="60" cy="70" r="6" fill="#e2e8f0"></circle>
</g>
<defs>
<linearGradient id="gauge-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#34d399"></stop>
<stop offset="100%" stop-color="#10b981"></stop>
</linearGradient>
</defs>
</svg>
</div>
<h3 class="text-xl font-medium text-white mb-2">Real-Time Intelligence</h3>
<p class="text-sm text-slate-400 leading-relaxed max-w-xs">
Access accurate, real-time data to drive smarter decisions.
</p>
</div>
<!-- Card 2: Measurable Impact -->
<div class="group p-8 rounded-3xl border border-white/10 bg-[#0A0C10] hover:border-emerald-500/30 transition-all duration-300 flex flex-col items-center text-center">
<!-- SVG Bars -->
<div class="h-40 w-full flex items-center justify-center mb-6 gap-3 items-end pb-4">
<div class="w-8 bg-white/5 border border-white/10 rounded-t-lg h-12 group-hover:h-20 transition-all duration-500 ease-out delay-75"></div>
<div class="w-8 bg-white/10 border border-white/10 rounded-t-lg h-16 group-hover:h-28 transition-all duration-500 ease-out delay-100"></div>
<div class="w-8 bg-emerald-500/20 border border-emerald-500/30 rounded-t-lg h-24 group-hover:h-32 transition-all duration-500 ease-out shadow-[0_0_20px_rgba(16,185,129,0.2)]"></div>
<div class="w-8 bg-white/5 border border-white/10 rounded-t-lg h-14 group-hover:h-24 transition-all duration-500 ease-out delay-150"></div>
</div>
<h3 class="text-xl font-medium text-white mb-2">Measurable Impact</h3>
<p class="text-sm text-slate-400 leading-relaxed max-w-xs">
Track performance, uncover insights, and achieve data-backed growth.
</p>
</div>
<!-- Card 3: Seamless Integration -->
<div class="group p-8 rounded-3xl border border-white/10 bg-[#0A0C10] hover:border-emerald-500/30 transition-all duration-300 flex flex-col items-center text-center">
<!-- SVG Network -->
<div class="h-40 w-full flex items-center justify-center mb-6 relative">
<svg width="120" height="120" viewBox="0 0 120 120" class="text-slate-700 group-hover:text-emerald-500/50 transition-colors duration-500">
<!-- Lines -->
<line x1="60" y1="60" x2="30" y2="30" stroke="currentColor" stroke-width="1"></line>
<line x1="60" y1="60" x2="90" y2="30" stroke="currentColor" stroke-width="1"></line>
<line x1="60" y1="60" x2="100" y2="70" stroke="currentColor" stroke-width="1"></line>
<line x1="60" y1="60" x2="20" y2="80" stroke="currentColor" stroke-width="1"></line>
<line x1="60" y1="60" x2="60" y2="100" stroke="currentColor" stroke-width="1"></line>
<!-- Nodes -->
<circle cx="30" cy="30" r="4" fill="#334155" class="group-hover:fill-emerald-400 transition-colors delay-75"></circle>
<circle cx="90" cy="30" r="4" fill="#334155" class="group-hover:fill-emerald-400 transition-colors delay-100"></circle>
<circle cx="100" cy="70" r="4" fill="#334155" class="group-hover:fill-emerald-400 transition-colors delay-150"></circle>
<circle cx="20" cy="80" r="4" fill="#334155" class="group-hover:fill-emerald-400 transition-colors delay-200"></circle>
<circle cx="60" cy="100" r="4" fill="#334155" class="group-hover:fill-emerald-400 transition-colors delay-300"></circle>
<!-- Center Node -->
<circle cx="60" cy="60" r="12" fill="#0f172a" stroke="currentColor" stroke-width="2" class="text-white group-hover:stroke-emerald-400 transition-colors"></circle>
<path d="M56 60h8" stroke="white" stroke-linecap="round"></path>
<path d="M60 56v8" stroke="white" stroke-linecap="round"></path>
</svg>
</div>
<h3 class="text-xl font-medium text-white mb-2">Seamless Integration</h3>
<p class="text-sm text-slate-400 leading-relaxed max-w-xs">
Connect tools, teams, and workflows with intelligent automation.
</p>
</div>
</div>
</section>
<!-- How It Works Section -->
<!-- Bento Grid Features -->
<section class="max-w-7xl mr-auto ml-auto pr-6 pb-32 pl-6">
<div class="text-center mb-16">
<h2 class="md:text-5xl text-3xl font-medium text-white tracking-tight mb-4">Features</h2>
<p class="text-lg text-slate-400">
Everything you need to automate, optimize, and scale
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Card 1: Automate repetitive tasks -->
<div class="lg:col-span-1 group relative rounded-3xl border border-white/10 bg-[#0A0C10] p-8 overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<!-- Visual Content -->
<div class="h-48 mb-6 flex flex-col items-center justify-center">
<div class="w-full max-w-[280px] space-y-3">
<!-- List Item 1 -->
<div class="flex items-center justify-between px-4 py-3 rounded-xl border border-white/5 bg-white/[0.02] text-xs font-medium text-slate-400">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.12a4 4 0 0 1 0 7.75"></path>
</svg>
Employee Tracking
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50">
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<path d="M3 3v5h5"></path>
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
<path d="M16 21h5v-5"></path>
</svg>
</div>
<!-- List Item 2 (Active) -->
<div class="flex items-center justify-between px-4 py-3 rounded-xl border border-white/10 bg-white/[0.05] shadow-[0_4px_20px_-4px_rgba(0,0,0,0.5)] text-xs font-medium text-white relative z-10 scale-105">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
Payment reminder
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-emerald-400">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<!-- List Item 3 -->
<div class="flex items-center justify-between px-4 py-3 rounded-xl border border-white/5 bg-white/[0.02] text-xs font-medium text-slate-400">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70">
<line x1="12" x2="12" y1="2" y2="22"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
Cost Management
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-50">
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
<path d="M3 3v5h5"></path>
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path>
<path d="M16 21h5v-5"></path>
</svg>
</div>
</div>
</div>
<!-- Text Content -->
<div>
<h3 class="text-xl font-medium text-white mb-3 tracking-tight">
Automate repetitive tasks
</h3>
<p class="text-slate-400 leading-relaxed">
We help you streamline internal operations by automating
manual workflows.
</p>
</div>
</div>
<!-- Card 2: Automated Workflows -->
<div class="lg:col-span-2 group relative rounded-3xl border border-white/10 bg-[#0A0C10] p-8 overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<!-- Visual Content -->
<div class="h-48 mb-6 relative">
<!-- Center Glowing Element -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-20 h-20 rounded-full border border-white/10 bg-[#0A0C10] z-20 flex items-center justify-center shadow-[0_0_50px_rgba(56,189,248,0.15)] group-hover:shadow-[0_0_60px_rgba(56,189,248,0.25)] transition-all">
<div class="absolute inset-0 rounded-full bg-gradient-to-b from-white/10 to-transparent"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white relative z-10">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
<path d="M5 3v4"></path>
<path d="M9 3v4"></path>
<path d="M3 5h4"></path>
<path d="m3 9 4-4"></path>
</svg>
</div>
<!-- Floating Icons -->
<!-- Top Left -->
<div class="absolute top-4 left-[15%] w-12 h-12 rounded-xl bg-white/[0.03] border border-white/5 flex items-center justify-center text-slate-400 transform -rotate-6">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
</div>
<!-- Bottom Left -->
<div class="absolute bottom-4 left-[10%] w-12 h-12 rounded-xl bg-white/[0.03] border border-white/5 flex items-center justify-center text-slate-400 transform rotate-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"></path>
</svg>
</div>
<!-- Top Right -->
<div class="absolute top-2 right-[20%] w-12 h-12 rounded-xl bg-white/[0.03] border border-white/5 flex items-center justify-center text-slate-400 transform rotate-12">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path>
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path>
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path>
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path>
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path>
</svg>
</div>
<!-- Bottom Right -->
<div class="absolute bottom-8 right-[15%] w-12 h-12 rounded-xl bg-white/[0.03] border border-white/5 flex items-center justify-center text-slate-400 transform -rotate-3">
<span class="font-serif text-lg font-bold">N</span>
</div>
<!-- Inner Icons (blurred/smaller) -->
<div class="absolute top-1/4 left-[35%] w-8 h-8 rounded-lg bg-white/[0.02] border border-white/5 flex items-center justify-center text-slate-500 blur-[1px]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2a10 10 0 1 0 10 10H12V2z"></path>
<path d="M12 2a10 10 0 0 1 10 10h-10V2z"></path>
<path d="m9 12 5.09-5.09L12 19l5.09-5.09"></path>
</svg>
</div>
<div class="absolute bottom-1/4 right-[35%] w-8 h-8 rounded-lg bg-white/[0.02] border border-white/5 flex items-center justify-center text-slate-500 blur-[1px]">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m12 3-1.9 5.8a2 2 0 0 1-1.28 1.28L3 12l5.8 1.9a2 2 0 0 1 1.28 1.28L12 21l1.9-5.8a2 2 0 0 1 1.28-1.28L21 12l-5.8-1.9a2 2 0 0 1-1.28-1.28L12 3Z"></path>
</svg>
</div>
</div>
<!-- Text Content -->
<div>
<h3 class="text-xl font-medium text-white mb-3 tracking-tight">
Automated Workflows
</h3>
<p class="text-slate-400 leading-relaxed max-w-2xl">
Boost efficiency across teams with smart automation. Build
intelligent workflows that automate multi-step processes
across tools and platforms.
</p>
</div>
</div>
<!-- Card 3: Real-Time Intelligence -->
<div class="lg:col-span-1 group relative rounded-3xl border border-white/10 bg-[#0A0C10] p-8 overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="h-40 mb-6 relative flex flex-col items-center">
<div class="w-full max-w-[260px] bg-[#0F1115] border border-white/10 rounded-lg p-3 shadow-2xl">
<!-- Search Bar -->
<div class="flex items-center gap-2 bg-[#050505] border border-white/10 rounded-md px-3 py-1.5 mb-3">
<span class="text-[10px] text-slate-500">
Research anything...
</span>
<div class="ml-auto bg-white text-[#050505] text-[9px] font-bold px-2 py-0.5 rounded">
Research
</div>
</div>
<!-- Results -->
<div class="space-y-1.5">
<div class="flex items-center justify-between p-2 rounded bg-white/[0.03] border border-white/5">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</svg>
</div>
<span class="text-[9px] text-slate-400">
Software & App Industry
</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-600">
<path d="M7 7h10v10"></path>
<path d="M7 17 17 7"></path>
</svg>
</div>
<div class="flex items-center justify-between p-2 rounded bg-white/[0.03] border border-white/5">
<div class="flex items-center gap-2">
<div class="w-4 h-4 rounded-full bg-white/10 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</svg>
</div>
<span class="text-[9px] text-slate-400">
UX & UI Design Industry
</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-600">
<path d="M7 7h10v10"></path>
<path d="M7 17 17 7"></path>
</svg>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-medium text-white mb-3 tracking-tight">
Real-Time Intelligence
</h3>
<p class="text-slate-400 leading-relaxed">
Make smarter decisions with live data insights. Tap into
real-time data streams.
</p>
</div>
</div>
<!-- Card 4: Custom AI Agent Development -->
<div class="lg:col-span-1 group relative rounded-3xl border border-white/10 bg-[#0A0C10] p-8 overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="h-40 mb-6 relative flex flex-col items-center">
<div class="w-full max-w-[280px] bg-[#0F1115] border border-white/10 rounded-lg overflow-hidden shadow-2xl">
<!-- Window Chrome -->
<div class="bg-white/[0.03] border-b border-white/5 px-3 py-2 flex items-center justify-between">
<div class="flex gap-1.5">
<div class="w-2 h-2 rounded-full bg-white/20"></div>
<div class="w-2 h-2 rounded-full bg-white/10"></div>
<div class="w-2 h-2 rounded-full bg-white/10"></div>
</div>
<div class="flex items-center gap-1 bg-white/5 px-1.5 py-0.5 rounded border border-white/5">
<span class="text-[8px] text-slate-400">Code</span>
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-500">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</div>
</div>
<!-- Code Area -->
<div class="p-3 font-mono text-[9px] leading-relaxed text-slate-500">
<div class="flex gap-2">
<span class="text-slate-700 select-none">1</span>
<span class="">
<span class="text-purple-400">class</span>
<span class="text-yellow-100">AutomationAgent</span>
:
</span>
</div>
<div class="flex gap-2">
<span class="text-slate-700 select-none">2</span>
<span class="pl-2">
<span class="text-purple-400">def</span>
<span class="text-blue-400">__init__</span>
(self, limit):
</span>
</div>
<div class="flex gap-2">
<span class="text-slate-700 select-none">3</span>
<span class="pl-4">
self.
<span class="text-white">activation_limit</span>
= limit
</span>
</div>
<div class="flex gap-2">
<span class="text-slate-700 select-none">4</span>
<span class="pl-4">
self.
<span class="text-white">current_mode</span>
=
<span class="text-emerald-400">"idle"</span>
</span>
</div>
<div class="flex gap-2 opacity-50">
<span class="text-slate-700 select-none">5</span>
<span class="pl-2">...</span>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-medium text-white mb-3 tracking-tight">
Custom AI Agent development
</h3>
<p class="text-slate-400 leading-relaxed">
We develop custom AI agents that integrate seamlessly with
your tools.
</p>
</div>
</div>
<!-- Card 5: AI Strategy Consulting -->
<div class="lg:col-span-1 group relative rounded-3xl border border-white/10 bg-[#0A0C10] p-8 overflow-hidden hover:border-white/20 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<div class="h-40 mb-6 relative flex items-center justify-center">
<div class="relative w-full max-w-[200px] h-[120px]">
<!-- Node 1 -->
<div class="absolute top-0 left-0 w-12 h-12 rounded-full border border-white/10 bg-white/[0.03] flex items-center justify-center z-10">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-slate-400">
<path d="M12 20v-6M6 20V10M18 20V4"></path>
</svg>
</div>
<!-- Node 2 (faded) -->
<div class="absolute top-1/2 left-0 w-8 h-8 rounded-full border border-white/5 bg-white/[0.01] flex items-center justify-center -translate-y-1/2 translate-x-4 opacity-30"></div>
<!-- Connector -->
<svg class="absolute inset-0 w-full h-full pointer-events-none text-white/10" style="z-index: 0;">
<path d="M40 24 C 60 40, 100 80, 150 70" stroke="currentColor" stroke-width="1" stroke-dasharray="4 4" fill="none"></path>
</svg>
<!-- Main Goal Node -->
<div class="absolute bottom-4 right-4 w-16 h-16 rounded-full border border-white/20 bg-gradient-to-br from-white/[0.08] to-transparent flex items-center justify-center z-10 shadow-[0_0_30px_rgba(255,255,255,0.05)]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-white">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
<path d="m20 4-4 4"></path>
<path d="m4 20 4-4"></path>
</svg>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-medium text-white mb-3 tracking-tight">
AI Strategy Consulting
</h3>
<p class="text-slate-400 leading-relaxed">
Get expert guidance to implement AI solutions that drive
business growth.
</p>
</div>
</div>
</div>
</section>
<!-- Integrations Section -->
<section class="max-w-7xl mr-auto ml-auto pr-6 pb-32 pl-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 gap-x-16 gap-y-16 items-center">
<!-- Left Content -->
<div class="relative z-10">
<h2 class="md:text-5xl leading-[1.1] text-4xl font-medium text-white tracking-tight mb-6">
Integrates with
<br>
your favorite tools
</h2>
<p class="leading-relaxed text-lg text-slate-400 max-w-lg mb-10">
Enhance productivity, streamline processes, and keep everything
connected without disrupting your existing workflow.
</p>
<button class="group border border-white/10 hover:border-emerald-500/50 hover:bg-white/5 text-white px-6 py-3 rounded-full font-medium transition-all flex items-center gap-2 text-sm">
Explore integrations
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 group-hover:translate-x-1 transition-transform">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
<!-- Right Visual (Icon Grid) -->
<div class="relative">
<!-- Radial fade mask -->
<!-- Rotated grid container -->
<div class="grid grid-cols-3 sm:grid-cols-4 transform hover:opacity-100 transition-opacity duration-700 opacity-70 rotate-6 scale-110 gap-x-4 gap-y-4">
<!-- Row 1 -->
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" class=""></path>
<polyline points="14 2 14 8 20 8" class=""></polyline>
</svg>
</div>
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:text-emerald-400 transition-colors w-[32px] h-[32px]" data-icon-replaced="true" style="width: 32px; height: 32px; color: rgb(52, 211, 153);">
<rect width="20" height="16" x="2" y="4" rx="2" class=""></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
</div>
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="group-hover:text-emerald-400 transition-colors w-[32px] h-[32px]" data-icon-replaced="true" style="color: rgb(52, 211, 153); width: 32px; height: 32px;">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" class=""></path>
<path d="M9 18c-4.51 2-5-2-7-2" class=""></path>
</svg>
</div>
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
<rect width="3" height="8" x="13" y="2" rx="1.5"></rect>
<path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5"></path>
<rect width="3" height="8" x="8" y="14" rx="1.5"></rect>
<path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5"></path>
<rect width="8" height="3" x="14" y="13" rx="1.5"></rect>
<path d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5"></path>
<rect width="8" height="3" x="2" y="8" rx="1.5"></rect>
<path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5"></path>
</svg>
</div>
<!-- Row 2 -->
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<path d="M5 5.5A3.5 3.5 0 0 1 8.5 2H12v7H8.5A3.5 3.5 0 0 1 5 5.5z"></path>
<path d="M12 2h3.5a3.5 3.5 0 1 1 0 7H12V2z"></path>
<path d="M12 12.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 1 1-7 0z"></path>
<path d="M5 19.5A3.5 3.5 0 0 1 8.5 16H12v3.5a3.5 3.5 0 1 1-7 0z"></path>
<path d="M5 12.5A3.5 3.5 0 0 1 8.5 9H12v7H8.5A3.5 3.5 0 0 1 5 12.5z"></path>
</svg>
</div>
<div class="aspect-square bg-emerald-500/10 border border-emerald-500/30 rounded-2xl flex items-center justify-center hover:bg-emerald-500/20 transition-all duration-300 group cursor-default shadow-[0_0_15px_rgba(16,185,129,0.2)]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-emerald-400">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z">
</path>
</svg>
</div>
<div class="aspect-square flex hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default border-white/5 border rounded-2xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect>
<path d="M7 7h3v9H7z" class=""></path>
<path d="M14 7h3v5h-3z"></path>
</svg>
</div>
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<path d="M17.5 19c0-1.7-1.3-3-3-3h-5c-1.7 0-3 1.3-3 3"></path>
<path d="M22 19a2 2 0 0 0-2-2h-5a2 2 0 0 0-2 2"></path>
<path d="M17.5 21a2 2 0 0 1-2 2H22"></path>
<path d="M14.5 21a2 2 0 0 0-2 2H2"></path>
<path d="M2 19a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2"></path>
<path d="M8 9a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"></path>
<path d="M19 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"></path>
</svg>
</div>
<!-- Row 3 -->
<div class="aspect-square flex hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default border-white/5 border rounded-2xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div class="aspect-square flex hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default border-white/5 border rounded-2xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" class=""></path>
<path d="m3.3 7 8.7 5 8.7-5"></path>
<path d="M12 22V12"></path>
</svg>
</div>
<div class="aspect-square bg-white/[0.03] border border-white/5 rounded-2xl flex items-center justify-center hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
</div>
<div class="aspect-square flex hover:bg-white/10 hover:border-emerald-500/30 transition-all duration-300 group cursor-default border-white/5 border rounded-2xl items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-8 h-8 text-slate-400 group-hover:text-emerald-400 transition-colors">
<path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"></path>
<path d="M12 12v9"></path>
<path d="m16 16-4-4-4 4" class=""></path>
</svg>
</div>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="max-w-7xl mx-auto px-6 pb-32">
<div class="border border-white/10 bg-[#050505] rounded-3xl overflow-hidden shadow-2xl">
<!-- Top Section -->
<div class="grid grid-cols-1 border-white/10 border-b">
<div class="md:col-span-2 border-white/10 border-r pt-10 pr-10 pb-10 pl-10">
<h2 class="text-3xl md:text-4xl font-medium text-white mb-4 tracking-tight">
How It Works
</h2>
<p class="text-slate-400 text-lg">
A simple, fast, and secure platform to manage your AI
workflows in just a few steps.
</p>
</div>
</div>
<!-- Steps Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-white/10">
<!-- Step 1 -->
<div class="group relative p-8 hover:bg-white/[0.01] transition-colors">
<div class="absolute top-8 left-8 w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-sm font-medium text-white">
1
</div>
<div class="mt-12 mb-8 h-48 relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02] p-4 flex flex-col justify-center gap-3 select-none">
<!-- Mini UI: Form -->
<div class="space-y-1">
<div class="h-2 w-12 bg-white/20 rounded-full"></div>
<div class="h-9 w-full bg-white/5 border border-white/10 rounded flex items-center px-3 text-xs text-slate-500 font-mono">
john@doe.mail
</div>
</div>
<div class="space-y-1">
<div class="h-2 w-16 bg-white/20 rounded-full"></div>
<div class="h-9 w-full bg-white/5 border border-white/10 rounded flex items-center px-3 text-xs text-slate-500 font-mono">
••••••••••
</div>
</div>
<div class="h-9 w-full bg-white/5 border border-white/10 rounded flex items-center justify-center text-xs text-slate-400 mt-1">
Create account
</div>
</div>
<h3 class="text-xl font-medium text-white mb-2">
Create your account
</h3>
<p class="text-slate-400 leading-relaxed text-sm">
Sign up easily and secure your profile in just a few steps to
get started.
</p>
</div>
<!-- Step 2 -->
<div class="group relative p-8 hover:bg-white/[0.01] transition-colors">
<div class="absolute top-8 left-8 w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-sm font-medium text-white">
2
</div>
<div class="mt-12 mb-8 h-48 relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02] p-4 flex flex-col justify-center gap-3 select-none">
<!-- Mini UI: Input -->
<div class="space-y-2">
<div class="h-2 w-24 bg-white/20 rounded-full"></div>
<div class="h-14 w-full bg-[#050505] border border-white/10 rounded-lg flex items-center justify-between px-3">
<span class="text-lg text-white font-medium font-mono">
1,000
</span>
<div class="flex items-center gap-1.5 bg-white/10 px-2 py-1 rounded text-[10px] text-white font-medium border border-white/5">
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
<span>TOKENS</span>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
<path d="m9 18 6-6-6-6"></path>
</svg>
</div>
</div>
<div class="flex justify-between px-1 text-[10px] text-slate-600 font-mono">
<span>Allocated</span>
<span class="text-emerald-500">0.024/sec</span>
</div>
</div>
</div>
<h3 class="text-xl font-medium text-white mb-2">
Configure resources
</h3>
<p class="text-slate-400 leading-relaxed text-sm">
Allocate your compute tokens or connect your data sources to
start processing.
</p>
</div>
<!-- Step 3 -->
<div class="group relative p-8 hover:bg-white/[0.01] transition-colors">
<div class="absolute top-8 left-8 w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-sm font-medium text-white">
3
</div>
<div class="mt-12 mb-8 h-48 relative overflow-hidden rounded-xl border border-white/10 bg-white/[0.02] p-0 flex flex-col select-none">
<!-- Mini UI: List -->
<div class="border-b border-white/5 p-3 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<path d="M12 2v20" class=""></path>
<path d="M2 12h20"></path>
</svg>
</div>
<div class="flex-1">
<div class="h-2 w-16 bg-white/20 rounded-full mb-1.5"></div>
<div class="h-1.5 w-8 bg-emerald-500/40 rounded-full"></div>
</div>
<div class="text-[10px] text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded">
+12%
</div>
</div>
<div class="border-b border-white/5 p-3 flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path>
</svg>
</div>
<div class="flex-1">
<div class="h-2 w-12 bg-white/20 rounded-full mb-1.5"></div>
<div class="h-1.5 w-10 bg-emerald-500/40 rounded-full"></div>
</div>
<div class="text-[10px] text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded">
+8.2%
</div>
</div>
<div class="p-3 flex items-center gap-3 opacity-50">
<div class="w-8 h-8 rounded-lg bg-orange-500/10 border border-orange-500/20 flex items-center justify-center text-orange-400">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>
</div>
<div class="flex-1">
<div class="h-2 w-14 bg-white/20 rounded-full mb-1.5"></div>
<div class="h-1.5 w-6 bg-slate-500/40 rounded-full"></div>
</div>
</div>
</div>
<h3 class="text-xl font-medium text-white mb-2">
Deploy & Scale
</h3>
<p class="text-slate-400 leading-relaxed text-sm">
Launch your agents and enjoy a platform that makes automation
seamless.
</p>
</div>
</div>
</div>
</section>
<!-- Dashboard Section -->
<section class="max-w-7xl mr-auto ml-auto pr-6 pb-32 pl-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-5xl font-medium text-white tracking-tight mb-6">
Effortless workflows, powerful performance, and strong protection.
</h2>
</div>
<!-- Dashboard UI Mockup -->
<div class="rounded-2xl border border-white/10 bg-[#0A0C10] overflow-hidden shadow-2xl shadow-emerald-900/10">
<!-- Dashboard Header -->
<div class="border-b border-white/5 p-4 flex items-center justify-between bg-white/5">
<div class="flex items-center gap-2">
<div class="text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="triangle" aria-hidden="true" class="lucide lucide-triangle w-5 h-5 rotate-180 fill-current">
<path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
</svg>
</div>
<span class="text-white font-medium tracking-tight ml-2">
AETHER
</span>
<div class="h-4 w-[1px] bg-white/20 mx-2"></div>
<div class="flex gap-4 text-xs font-medium text-slate-400">
<span class="text-white">Analytics</span>
<span>Customers</span>
<span>Products</span>
<span>Settings</span>
</div>
</div>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-indigo-500/20 border border-indigo-500/50 flex items-center justify-center text-xs text-indigo-300">
JD
</div>
</div>
</div>
<!-- Dashboard Content -->
<div class="p-6 md:p-8">
<div class="flex items-center justify-between mb-8">
<h3 class="text-xl text-white font-medium">Dashboard</h3>
<button class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-xs text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-plus" aria-hidden="true" class="lucide lucide-user-plus w-3 h-3">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<line x1="19" x2="19" y1="8" y2="14"></line>
<line x1="22" x2="16" y1="11" y2="11"></line>
</svg>
Invite users
</button>
</div>
<!-- Stats Row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div class="p-4 rounded-xl bg-white/[0.02] border border-white/5">
<div class="flex justify-between items-start mb-2">
<span class="text-xs text-slate-400 uppercase tracking-wider">
Total Users
</span>
<span class="text-[10px] text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">
+17.5%
</span>
</div>
<div class="text-2xl text-white font-medium">10,230</div>
</div>
<div class="p-4 rounded-xl bg-white/[0.02] border border-white/5">
<div class="flex justify-between items-start mb-2">
<span class="text-xs text-slate-400 uppercase tracking-wider">
Sessions
</span>
<span class="text-[10px] text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">
+87.5%
</span>
</div>
<div class="text-2xl text-white font-medium">78.6%</div>
</div>
<div class="p-4 rounded-xl bg-white/[0.02] border border-white/5">
<div class="flex justify-between items-start mb-2">
<span class="text-xs text-slate-400 uppercase tracking-wider">
Click Rate
</span>
<span class="text-[10px] text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">
+37.8%
</span>
</div>
<div class="text-2xl text-white font-medium">76.2%</div>
</div>
<div class="p-4 rounded-xl bg-white/[0.02] border border-white/5">
<div class="flex justify-between items-start mb-2">
<span class="text-xs text-slate-400 uppercase tracking-wider">
Pageviews
</span>
<span class="text-[10px] text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">
+14.5%
</span>
</div>
<div class="text-2xl text-white font-medium">58,677</div>
</div>
</div>
<!-- Main Panels -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Transaction List -->
<div class="p-6 rounded-xl bg-white/[0.02] border border-white/5 h-80 relative overflow-hidden">
<div class="flex justify-between items-center mb-6">
<h4 class="text-sm font-medium text-white">
Transaction history
</h4>
<span class="text-xs text-slate-500">View more ↗</span>
</div>
<div class="space-y-4">
<!-- List Items -->
<div class="flex items-center justify-between text-xs border-b border-white/5 pb-2">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-sm border border-white/20"></div>
<span class="text-slate-300">Tesla Inc.</span>
</div>
<span class="text-white">$1,250.00</span>
<span class="px-2 py-0.5 rounded-full bg-white/10 text-slate-300">
Processing
</span>
</div>
<div class="flex items-center justify-between text-xs border-b border-white/5 pb-2">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-sm border border-white/20"></div>
<span class="text-slate-300">Adobe Systems</span>
</div>
<span class="text-white">$870.50</span>
<span class="px-2 py-0.5 rounded-full bg-white/10 text-slate-300">
Processing
</span>
</div>
<div class="flex items-center justify-between text-xs border-b border-white/5 pb-2">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-sm border border-white/20"></div>
<span class="text-slate-300">Stripe, Inc</span>
</div>
<span class="text-white">$4,250.00</span>
<span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400">
Success
</span>
</div>
<div class="flex items-center justify-between text-xs border-b border-white/5 pb-2">
<div class="flex items-center gap-3">
<div class="w-2 h-2 rounded-sm border border-white/20"></div>
<span class="text-slate-300">Figma</span>
</div>
<span class="text-white">$1,250.00</span>
<span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-400">
Success
</span>
</div>
</div>
<!-- Fade out bottom -->
<div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-[#0A0C10] to-transparent"></div>
</div>
<!-- Chart Area -->
<div class="p-6 rounded-xl bg-white/[0.02] border border-white/5 h-80 flex flex-col relative">
<div class="flex justify-between items-center mb-6">
<h4 class="text-sm font-medium text-white">
Monthly expenses
</h4>
<span class="text-xs text-slate-500">View more ↗</span>
</div>
<div class="mb-4">
<div class="text-3xl font-medium text-white">$15,300</div>
<div class="text-xs text-slate-500 mt-1">
<span class="text-emerald-400">97.5% ↗</span>
vs 0.00% last year
</div>
</div>
<!-- CSS Bar Chart -->
<div class="flex-1 flex items-end justify-between gap-2 mt-4 px-2">
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[30%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[45%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[25%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[60%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[75%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[50%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[80%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[40%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500/20 rounded-t-sm h-[55%] hover:bg-emerald-500 transition-colors"></div>
<div class="w-full bg-emerald-500 rounded-t-sm h-[90%] shadow-[0_0_15px_rgba(16,185,129,0.5)]"></div>
<!-- Current month -->
</div>
<div class="flex justify-between text-[10px] text-slate-500 mt-2 px-2">
<span>Jan</span>
<span>Dec</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="max-w-7xl mx-auto px-6 pb-32">
<h2 class="text-3xl md:text-5xl font-medium text-white text-center mb-16 tracking-tight">
What our clients say
</h2>
<style>
:root {
--dur: 38s;
}
/* mai mic = mai rapid */
@keyframes marquee-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@keyframes marquee-right {
0% {
transform: translateX(-50%);
}
100% {
transform: translateX(0);
}
}
.marquee-left {
animation: marquee-left var(--dur) linear infinite;
}
.marquee-right {
animation: marquee-right var(--dur) linear infinite;
}
</style>
<div class="space-y-6">
<!-- ================= ROW 1 (LEFT) ================= -->
<div class="w-full overflow-hidden relative group [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]">
<div class="flex gap-6 w-max items-start marquee-left group-hover:[animation-play-state:paused]">
<!-- SET A -->
<div class="flex gap-6 items-start">
<!-- Card 1 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=1" alt="Anne James" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Anne James</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"The workflow automation has completely transformed how our team operates. Intuitive, fast, reliable."
</p>
</div>
<!-- Card 2 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=2" alt="Alex Volks" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Alex Volks</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"Aether's integration capabilities are unmatched. We connected our entire stack in less than an hour."
</p>
</div>
<!-- Card 3 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=3" alt="Mary James" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Mary James</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"Real-time intelligence gives us insights we didn't know we needed. Essential for our strategy."
</p>
</div>
<!-- Card 4 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=4" alt="Chris Ford" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Chris Ford</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"Super clean UI, smooth onboarding, and everything feels fast. Love it."
</p>
</div>
</div>
<!-- SET B (duplicate identic pentru loop infinit) -->
<div class="flex gap-6 items-start">
<!-- Copiază SET A aici identic (aceleași 4 carduri) -->
</div>
</div>
</div>
<!-- ================= ROW 2 (RIGHT) ================= -->
<div class="w-full overflow-hidden relative group [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]">
<div class="flex gap-6 w-max items-start marquee-right group-hover:[animation-play-state:paused]">
<!-- SET A -->
<div class="flex gap-6 items-start">
<!-- Card 1 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=5" alt="Sara Miles" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Sara Miles</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"Rock solid performance, great support, and the UI is genuinely enjoyable."
</p>
</div>
<!-- Card 2 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=6" alt="Dan White" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Dan White</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"Setup was painless. Within minutes we were shipping faster with fewer errors."
</p>
</div>
<!-- Card 3 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=7" alt="Laura Kent" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Laura Kent</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"It's the first tool our team adopted instantly. Everything just makes sense."
</p>
</div>
<!-- Card 4 -->
<div class="group relative flex flex-col p-6 rounded-2xl min-w-[340px] md:min-w-[380px] bg-[#0A0C10]/60 backdrop-blur-md border border-white/10 hover:border-emerald-500/30 hover:bg-[#0A0C10]/80 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-2xl pointer-events-none">
</div>
<div class="relative z-10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-800 overflow-hidden ring-2 ring-white/5 shrink-0">
<img src="https://i.pravatar.cc/150?u=8" alt="Mike Stone" class="w-full h-full object-cover">
</div>
<div>
<div class="text-sm font-medium text-white">Mike Stone</div>
<div class="flex text-emerald-400 gap-0.5 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg>
</div>
</div>
</div>
<p class="relative z-10 text-sm text-slate-400 leading-relaxed mt-4">
"No fluff. Just powerful features that actually save us hours every week."
</p>
</div>
</div>
<!-- SET B (duplicate identic pentru loop infinit) -->
<div class="flex gap-6 items-start">
<!-- Copiază SET A aici identic (aceleași 4 carduri) -->
</div>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<!-- FAQ Section -->
<section class="max-w-7xl mx-auto px-6 pb-32">
<div class="border border-white/10 bg-[#050505] rounded-3xl overflow-hidden">
<div class="grid grid-cols-1 border-b border-white/10">
<div class="md:p-10 md:border-b-0 md:border-r border-white/10 border-b pt-8 pr-8 pb-8 pl-8">
<h2 class="text-3xl md:text-4xl font-medium text-white mb-4 tracking-tight">
Your Questions, Answered
</h2>
<p class="text-slate-400">
Find everything you need to know about Aether, from security
to supported workflows.
</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2">
<!-- Item 1 -->
<div class="md:border-r flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">What is Aether?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
Aether is an AI-powered automation platform that helps businesses streamline workflows, integrate tools, and deploy intelligent agents without requiring coding expertise. Built for efficiency and scalability.
</p>
</div>
</div>
<!-- Item 2 -->
<div class="flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">How fast are workflows?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
Workflows execute in milliseconds with our optimized infrastructure. Real-time processing ensures your automations run instantly, with sub-second response times even for complex multi-step processes.
</p>
</div>
</div>
<!-- Item 3 -->
<div class="md:border-r flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">Is Aether secure?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
Yes. We use enterprise-grade encryption, SOC 2 Type II compliance, and zero-trust architecture. Your data is encrypted at rest and in transit, with regular security audits and penetration testing.
</p>
</div>
</div>
<!-- Item 4 -->
<div class="flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">Do I need coding skills?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
Not at all. Aether is built for everyone with a visual, drag-and-drop interface. Advanced users can add custom code if needed, but it's entirely optional. Build powerful automations without writing a single line.
</p>
</div>
</div>
<!-- Item 5 -->
<div class="md:border-r flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">Which models are supported?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
We support all major AI models including GPT-4, Claude, Gemini, Llama, and more. Switch between models seamlessly or use multiple models in the same workflow. Custom model endpoints are also supported.
</p>
</div>
</div>
<!-- Item 6 -->
<div class="flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">Can I access Aether on mobile?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
Yes! Aether is fully responsive and works beautifully on mobile devices. Monitor workflows, check analytics, and manage agents on the go with our native iOS and Android apps coming soon.
</p>
</div>
</div>
<!-- Item 7 -->
<div class="md:border-r flex cursor-pointer hover:bg-white/[0.02] transition-colors group border-white/10 border-b md:border-b-0 pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">What are the platform fees?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
We offer flexible pricing based on usage. Start free with generous limits, then scale with pay-as-you-go or monthly plans. No hidden fees, no lock-in contracts. Visit our pricing page for details.
</p>
</div>
</div>
<!-- Item 8 -->
<div class="flex cursor-pointer hover:bg-white/[0.02] transition-colors group pt-6 pr-6 pb-6 pl-6 flex-col faq-item">
<div class="flex items-center justify-between w-full" onclick="toggleFAQ(this)">
<span class="text-white font-medium">How do I contact support?</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="faq-icon w-5 h-5 text-emerald-500 transition-transform duration-300 group-hover:rotate-90">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
</div>
<div class="faq-content overflow-hidden transition-all duration-300 ease-in-out" style="max-height: 0;">
<p class="text-slate-400 leading-relaxed mt-4 text-sm">
Reach us via live chat (available 24/7), email at support@aether.ai, or through our help center. Enterprise customers get dedicated support channels and priority response times.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="max-w-7xl mx-auto px-6 pb-20 relative">
<div class="relative rounded-3xl overflow-hidden border border-white/10 bg-emerald-900/10 px-6 py-20 text-center">
<!-- Glow effect -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[400px] bg-emerald-500/20 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
<h2 class="text-4xl md:text-5xl font-medium text-white mb-6 tracking-tight">
Ready to transform your workflow?
</h2>
<p class="text-lg text-slate-400 max-w-2xl mx-auto mb-10">
Join thousands of forward-thinking companies using Aether to build
intelligent, automated, and scalable business processes.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<button onclick="route('pricing')" class="group bg-white hover:bg-slate-200 text-[#050505] px-8 py-4 rounded-full font-medium transition-all flex items-center gap-2">
Get started for free
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 group-hover:translate-x-1 transition-transform">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
<button class="px-8 py-4 rounded-full font-medium text-white border border-white/10 hover:bg-white/5 transition-colors">
Contact Sales
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/10 bg-[#020617] pt-16 pb-8">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-10 mb-16">
<div class="col-span-2 lg:col-span-2">
<a href="#" class="flex items-center gap-2 mb-6">
<div class="text-emerald-400">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle w-6 h-6 fill-current rotate-180">
<path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
</svg>
</div>
<span class="text-white text-xl font-medium tracking-tight">
AETHER
</span>
</a>
<p class="text-slate-500 text-sm leading-relaxed mb-6 max-w-xs">
The next generation of AI automation. Designed to help teams
build, deploy, and scale intelligent agents effortlessly.
</p>
<div class="flex gap-4">
<a href="#" class="text-slate-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-12.7 12.5 4 1.7 8.1.3 8.1.3-3.3-3.3-3.9-8.4-3.9-8.4 4.5 1.5 6.3 3.8 6.3 3.8 0-2.4.9-4.8 1.2-5.4z"></path>
</svg>
</a>
<a href="#" class="text-slate-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github">
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
<path d="M9 18c-4.51 2-5-2-7-2"></path>
</svg>
</a>
<a href="#" class="text-slate-400 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</a>
</div>
</div>
<div class="">
<h4 class="text-white font-medium mb-4">Product</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Features
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Integrations
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Pricing
</a>
</li>
<li>
<a href="#" class="hover:text-emerald-400 transition-colors">
Changelog
</a>
</li>
<li>
<a href="#" class="hover:text-emerald-400 transition-colors">
Docs
</a>
</li>
</ul>
</div>
<div class="">
<h4 class="text-white font-medium mb-4">Company</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
About Us
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors" style="">
Pricing
</a>
</li>
<li class=""></li>
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Contact
</a>
</li>
<li class=""></li>
</ul>
</div>
<div class="">
<h4 class="text-white font-medium mb-4">Resources</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Community
</a>
</li>
<li>
<a href="#" class="hover:text-emerald-400 transition-colors">
Help Center
</a>
</li>
<li>
<a href="#" class="hover:text-emerald-400 transition-colors">
API Reference
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Status
</a>
</li>
</ul>
</div>
<div class="">
<h4 class="text-white font-medium mb-4">Legal</h4>
<ul class="space-y-2 text-sm text-slate-400">
<li class="">
<a href="/privacy-policy" class="hover:text-emerald-400 transition-colors">
Privacy Policy
</a>
</li>
<li class="">
<a href="#" class="hover:text-emerald-400 transition-colors">
Terms of Service
</a>
</li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
</div>
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-slate-500 text-xs">
© 2024 Aether AI Inc. All rights reserved.
</p>
<div class="flex items-center gap-2"></div>
</div>
</div>
</footer>
</div>
<!-- Placeholder Sections for Routing Demo -->
<div id="page-pricing" class="hidden min-h-[60vh] pt-32 px-6 text-center fade-in">
<h1 class="text-5xl font-medium text-white mb-6">
Simple, transparent pricing
</h1>
<p class="text-slate-400 mb-8">
Page content placeholder for Routing demo.
</p>
<button onclick="route('landing')" class="text-emerald-400 hover:text-emerald-300 underline">
Back to Home
</button>
</div>
<div id="page-about" class="hidden min-h-[60vh] pt-32 px-6 text-center fade-in">
<h1 class="text-5xl font-medium text-white mb-6">About Aether</h1>
<p class="text-slate-400 mb-8">
We are building the future of autonomous workflows.
</p>
<button onclick="route('landing')" class="text-emerald-400 hover:text-emerald-300 underline">
Back to Home
</button>
</div>
<div id="page-contact" class="hidden min-h-[60vh] pt-32 px-6 text-center fade-in">
<h1 class="text-5xl font-medium text-white mb-6">Get in touch</h1>
<p class="text-slate-400 mb-8">
Our team is ready to answer your questions.
</p>
<button onclick="route('landing')" class="text-emerald-400 hover:text-emerald-300 underline">
Back to Home
</button>
</div>
</main>
<script>
// Simple routing logic for the demo
function route(pageId) {
// Hide all pages
const pages = ['landing', 'pricing', 'about', 'contact', 'blog'];
pages.forEach(id => {
const el = document.getElementById('page-' + id);
if (el) el.classList.add('hidden');
});
// Show requested page (default to landing if missing)
const target = document.getElementById('page-' + pageId) || document.getElementById('page-landing');
target.classList.remove('hidden');
// Reset scroll
window.scrollTo(0, 0);
}
function toggleMenu() {
document.getElementById('mobile-menu').classList.toggle('hidden');
}
function toggleFAQ(element) {
const faqItem = element.closest('.faq-item');
const content = faqItem.querySelector('.faq-content');
const icon = faqItem.querySelector('.faq-icon');
const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';
// Close all other FAQ items
document.querySelectorAll('.faq-item').forEach(item => {
if (item !== faqItem) {
item.querySelector('.faq-content').style.maxHeight = '0';
item.querySelector('.faq-icon').style.transform = 'rotate(0deg)';
}
});
// Toggle current item
if (isOpen) {
content.style.maxHeight = '0';
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.style.transform = 'rotate(45deg)';
}
}
</script>
</body></html>