Загрузка...
HTML/CSS шаблон лендинга для Executive Coaching. Идеально для бизнес-коучей, консультантов. Минималистичный дизайн, адаптивность.
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ATLAS | Executive Performance Coaching</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #444; }
/* Custom Range Slider */
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%;
background: #171717; border: 1px solid #404040; cursor: pointer; margin-top: -9px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 2px; background: #262626; }
/* Glass Utilities */
.glass-panel {
background: rgba(20, 20, 20, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.glass-button {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #d4d4d4;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-button:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-1px);
}
/* Gradient Text Animation */
.animate-gradient {
background-size: 200% auto;
animation: gradient 4s linear infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Falling Lines Animation */
@keyframes drop {
0% { top: -50%; }
100% { top: 110%; }
}
.line-anim::after {
content: ''; display: block; position: absolute; height: 15vh; width: 100%; top: -50%; left: 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 75%, #fff 100%);
animation: drop 7s 0s infinite; animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line-1::after { animation-delay: 2s; }
.line-3::after { animation-delay: 2.5s; }
/* Marquee Animation */
@keyframes marquee-ltr { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
/* --- Animated Gradient Beam CTA Button Styles --- */
@keyframes beam-spin { to { transform: rotate(360deg); } }
@keyframes dots-move {
0% { background-position: 0 0; }
100% { background-position: 24px 24px; }
}
/* --- Animated Shiny CTA Button Styles --- */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 20%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: #fbbf24; inherits: false; }
.shiny-cta {
--gradient-angle: 0deg;
--gradient-angle-offset: 0deg;
--gradient-percent: 20%;
--gradient-shine: #fbbf24; /* Amber-400 */
--shadow-size: 2px;
position: relative;
overflow: hidden;
border-radius: 9999px;
padding: 1rem 2rem;
font-size: 1rem;
line-height: 1.2;
font-weight: 500;
color: #ffffff;
background: linear-gradient(#0a0a0a, #0a0a0a) padding-box,
conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
transparent 0%, #ea580c 5%, var(--gradient-shine) 15%, #ea580c 30%, transparent 40%, transparent 100% ) border-box;
border: 2px solid transparent;
box-shadow: inset 0 0 0 1px #262626;
outline: none;
transition: --gradient-angle-offset 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-percent 800ms cubic-bezier(0.25, 1, 0.5, 1), --gradient-shine 800ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s;
cursor: pointer;
isolation: isolate;
outline-offset: 4px;
font-family: 'Inter', sans-serif;
z-index: 0;
animation: border-spin 2.5s linear infinite;
}
@keyframes border-spin { to { --gradient-angle: 360deg; } }
.shiny-cta:active { transform: translateY(1px); }
.shiny-cta::before {
content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;
--size: calc(100% - 6px); --position: 2px; --space: 4px; width: var(--size); height: var(--size);
background: radial-gradient(circle at var(--position) var(--position), white 0.5px, transparent 0) padding-box;
background-size: var(--space) var(--space); background-repeat: space;
mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black );
border-radius: inherit; opacity: 0.4; pointer-events: none;
}
.shiny-cta::after {
content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
width: 100%; aspect-ratio: 1;
background: linear-gradient(-50deg, transparent, #ea580c, transparent);
mask-image: radial-gradient(circle at bottom, transparent 40%, black);
opacity: 0.6; animation: shimmer 4s linear infinite; animation-play-state: running;
}
.shiny-cta span { position: relative; z-index: 2; display: inline-block; }
.shiny-cta span::before {
content: ''; pointer-events: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;
--size: calc(100% + 1rem); width: var(--size); height: var(--size);
box-shadow: inset 0 -1ex 2rem 4px #ea580c; opacity: 0; border-radius: inherit;
transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1); animation: breathe 4.5s linear infinite;
}
@keyframes shimmer { to { transform: translate(-50%, -50%) rotate(360deg);} }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1);} 50% { transform: translate(-50%, -50%) scale(1.20);} }
/* --- Intro & Ambient Animations --- */
@keyframes enter-up {
0% { opacity: 0; transform: translateY(20px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes enter-down {
0% { opacity: 0; transform: translateY(-20px); filter: blur(8px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes enter-fade {
0% { opacity: 0; filter: blur(8px); }
100% { opacity: 1; filter: blur(0); }
}
/* New quick fade for mobile menu */
@keyframes quick-fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.animate-enter-up { animation: enter-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-enter-down { animation: enter-down 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-enter-fade { animation: enter-fade 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.animate-quick-fade { animation: quick-fade 0.2s ease-out forwards; }
.delay-0 { animation-delay: 0ms; }
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
</style>
<link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap">
<link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"></head>
<body class="bg-[#050505] text-slate-400 antialiased selection:bg-orange-500/30 selection:text-orange-200 w-full overflow-x-hidden">
<!-- Background (component) added by Aura -->
<div class="aura-background-component fixed top-0 w-full h-screen -z-10">
<div data-us-project="ZHhDKfVqqu8PKOSMwfuA" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
<div class="absolute inset-0 bg-[#050505]/30"></div>
</div>
<!-- Animated Lines & Grid -->
<div class="fixed inset-0 z-0 pointer-events-none overflow-hidden">
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.015)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.015)_1px,transparent_1px)] bg-[size:120px_120px] [mask-image:radial-gradient(ellipse_at_center,black_40%,transparent_100%)]"></div>
<div class="absolute inset-0 w-full h-full opacity-[0.05]">
<div class="line line-anim line-1 absolute w-px h-full top-0 left-1/2 bg-white" style="margin-left: -22.5vw;"></div>
<div class="line line-anim line-2 absolute w-px h-full top-0 left-1/2 bg-white"></div>
<div class="line line-anim line-3 absolute w-px h-full top-0 left-1/2 bg-white" style="margin-left: 22.5vw;"></div>
</div>
</div>
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 border-b border-orange-500/10 bg-[#050505]/90 backdrop-blur-3xl animate-enter-down">
<div class="flex h-16 max-w-6xl mr-auto ml-auto pr-6 pl-6 items-center justify-between relative z-50">
<div class="flex gap-2 gap-x-2 gap-y-2 items-center">
<div class="bg-orange-400 mix-blend-normal w-5 h-5 rounded-sm shadow-lg rotate-45"></div>
<span class="font-semibold text-white tracking-tight">ATLAS</span>
</div>
<div class="hidden md:flex gap-8 text-sm font-medium text-slate-400">
<a href="/pricing" class="hover:text-white transition-colors">
Pricing
</a>
<a href="/about-us" class="hover:text-white transition-colors">
About us
</a>
<a href="/infrastructure" class="hover:text-white transition-colors">
Infrastructure
</a>
<a href="/the-protocol-2" class="hover:text-white transition-colors">
Protocol
</a>
</div>
<a href="#apply" class="hidden md:flex group overflow-hidden uppercase transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_-10px_rgba(234,88,12,0.5)] focus:outline-none text-xs font-medium text-white tracking-widest rounded-full py-2.5 px-6 relative items-center justify-center">
<div class="absolute inset-0 -z-20 rounded-full overflow-hidden p-[1px]">
<div class="absolute inset-[-100%] bg-[conic-gradient(from_0deg,transparent_0_300deg,#ea580c_360deg)]" style="animation: beam-spin 3s linear infinite;"></div>
<div class="absolute inset-[1px] rounded-full bg-black"></div>
</div>
<div class="-z-10 overflow-hidden bg-zinc-950 rounded-full absolute top-[2px] right-[2px] bottom-[2px] left-[2px]">
<div class="absolute inset-0 bg-gradient-to-b from-zinc-800/60 to-transparent"></div>
<div class="opacity-30 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0" style="background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px); background-size: 12px 12px; animation: dots-move 8s linear infinite"></div>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1/2 bg-orange-500/10 blur-2xl rounded-full pointer-events-none transition-colors duration-500 group-hover:bg-orange-500/30"></div>
</div>
<span class="relative z-10 text-white/90 transition-colors group-hover:text-white">
Book Audit Call
</span>
</a>
<button id="mobile-menu-btn" class="md:hidden relative w-10 h-10 flex items-center justify-center text-slate-300 hover:text-white focus:outline-none z-50" aria-label="Toggle Menu">
<div class="relative w-6 h-6 pointer-events-none">
<span id="line-1" class="absolute left-0 right-0 top-[6px] h-[2px] bg-current rounded-full transition-all duration-300 ease-out origin-center"></span>
<span id="line-2" class="absolute left-0 right-0 bottom-[6px] h-[2px] bg-current rounded-full transition-all duration-300 ease-out origin-center"></span>
</div>
</button>
</div>
<div id="mobile-menu" class="hidden md:hidden fixed top-0 left-0 w-full h-screen bg-black/95 backdrop-blur-[120px] flex flex-col items-start justify-start gap-8 z-40 pl-8 pt-32">
<a href="/pricing" class="text-3xl font-semibold text-white hover:text-orange-400 transition-colors tracking-tight">
Pricing
</a>
<a href="/about-us" class="text-3xl font-semibold text-white hover:text-orange-400 transition-colors tracking-tight">
About us
</a>
<a href="/infrastructure" class="text-3xl font-semibold text-white hover:text-orange-400 transition-colors tracking-tight">
Infrastructure
</a>
<a href="/the-protocol-2" class="text-3xl font-semibold text-white hover:text-orange-400 transition-colors tracking-tight">
Protocol
</a>
</div>
</nav>
<!-- Hero Section -->
<section class="md:pt-48 md:pb-32 max-w-6xl z-10 mr-auto ml-auto pt-32 pr-6 pb-20 pl-6 relative">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="">
<div class="animate-enter-up delay-100 inline-flex items-center gap-2 px-3 py-1 rounded-full border border-orange-500/30 bg-orange-500/5 backdrop-blur-md text-orange-400 text-[10px] font-mono uppercase tracking-widest mb-6 shadow-[0_0_15px_-5px_rgba(249,115,22,0.2)]">
<span class="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse"></span>
Accepting Q3 Clients
</div>
<h1 class="animate-enter-up delay-200 md:text-7xl leading-[1.1] text-5xl font-semibold text-white tracking-tight font-newsreader mb-6">
Scale from
<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-amber-200 to-orange-400 animate-gradient">
Operator
</span>
to
<span class="text-white">Owner</span>
.
</h1>
<p class="animate-enter-up delay-300 leading-relaxed text-lg text-slate-300 font-playfair max-w-md mb-8">
A systematic approach to escaping the day-to-day operations of your
agency. Reclaim 20 hours/week while increasing net profit.
</p>
<div class="animate-enter-up delay-400 flex flex-col sm:flex-row gap-6 items-center sm:items-stretch">
<div class="inline-block bg-transparent">
<button class="shiny-cta focus:outline-none">
<span class="">Apply for Advisory</span>
</button>
</div>
<button class="px-8 py-4 glass-button text-slate-300 font-medium rounded-full flex items-center justify-center gap-2 h-[60px]">
<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="play-circle" class="lucide lucide-play-circle w-4 h-4 text-slate-400">
<path d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
Watch Case Study
</button>
</div>
<div class="animate-enter-up delay-500 mt-8 flex items-center gap-4 text-xs text-slate-500 font-mono">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full bg-slate-700 ring-2 ring-black"></div>
<div class="w-6 h-6 rounded-full bg-slate-600 ring-2 ring-black"></div>
<div class="w-6 h-6 rounded-full bg-slate-500 ring-2 ring-black"></div>
</div>
<span class="font-medium tracking-tight text-slate-400">
JOIN 140+ FOUNDERS SCALING TO $5M+
</span>
</div>
</div>
<div class="relative group animate-enter-up delay-700">
<div class="absolute -inset-2 bg-gradient-to-tr from-orange-500/10 via-amber-500/5 to-orange-500/10 rounded-[2rem] opacity-0 group-hover:opacity-100 transition duration-1000 blur-xl"></div>
<div class="relative glass-panel rounded-2xl p-8 bg-[#0a0a0a]/80 shadow-[0_20px_50px_-12px_rgba(0,0,0,0.5)]">
<div class="flex justify-between items-center mb-8 border-b border-white/5 pb-4">
<span class="text-xs font-mono text-slate-500 uppercase tracking-widest font-semibold">
Revenue Projection
</span>
<div class="flex gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/5"></div>
<div class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/5"></div>
<div class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/5"></div>
</div>
</div>
<div class="space-y-8">
<div class="">
<div class="flex justify-between text-sm mb-3">
<span class="text-slate-400 font-medium">Current MRR</span>
<span class="text-slate-300 font-mono bg-white/5 px-2 py-0.5 rounded border border-white/10 shadow-sm">
$50,000
</span>
</div>
<div class="relative h-1.5 w-full bg-white/5 rounded-full overflow-visible">
<input type="range" class="cursor-pointer opacity-0 w-full h-full z-10 absolute top-0">
<div class="absolute left-0 top-0 h-full bg-white rounded-full w-1/3"></div>
<div class="absolute left-1/3 top-1/2 -translate-y-1/2 w-4 h-4 bg-[#0a0a0a] border border-white/30 rounded-full shadow-md pointer-events-none ring-2 ring-white/10"></div>
</div>
</div>
<div class="">
<div class="flex justify-between text-sm mb-2">
<span class="text-slate-400 font-medium">
Projected (12 Months)
</span>
<span class="text-orange-400 font-mono font-bold bg-orange-500/10 px-2 py-0.5 rounded border border-orange-500/20">
$165,000
</span>
</div>
<div class="h-24 flex items-end gap-2 mt-4 px-1">
<div class="w-full bg-white/5 border-t border-white/10 rounded-t-sm h-[30%]"></div>
<div class="w-full bg-white/5 border-t border-white/10 rounded-t-sm h-[45%]"></div>
<div class="w-full bg-white/10 border-t border-white/10 rounded-t-sm h-[50%]"></div>
<div class="w-full bg-white/10 border-t border-white/10 rounded-t-sm h-[60%]"></div>
<div class="w-full bg-gradient-to-t from-orange-600 to-orange-400 border-t border-orange-300 rounded-t-sm h-[90%] shadow-[0_10px_20px_-5px_rgba(249,115,22,0.3)] relative overflow-hidden group-hover:scale-y-105 transition-transform origin-bottom duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
<div class="absolute top-0 left-0 w-full h-[1px] bg-white/50"></div>
</div>
</div>
</div>
</div>
<div class="mt-6 pt-6 border-t border-white/5 flex justify-between items-center">
<div class="text-xs text-slate-500 font-medium">
Based on ATLAS system averages
</div>
<div class="flex items-center gap-2 text-orange-400 text-xs font-mono bg-orange-500/10 px-2 py-1 rounded border border-orange-500/20 font-semibold">
<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" class="lucide lucide-trending-up w-3 h-3">
<path d="M16 7h6v6"></path>
<path d="m22 7-8.5 8.5-5-5L2 17"></path>
</svg>
+230% YoY
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Social Proof -->
<section class="py-10 border-y border-white/5 bg-white/[0.02] backdrop-blur-sm relative z-10 animate-enter-fade delay-800">
<div class="max-w-6xl mx-auto px-6">
<p class="text-center text-xs font-mono text-slate-500 uppercase tracking-widest mb-8 font-semibold">
Trusted by leadership at
</p>
<div class="flex flex-wrap justify-center gap-12 md:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
<iconify-icon icon="simple-icons:stripe" width="60" class="text-white hover:text-orange-200"></iconify-icon>
<iconify-icon icon="simple-icons:airbnb" width="80" class="text-white hover:text-orange-200"></iconify-icon>
<iconify-icon icon="simple-icons:vercel" width="80" class="text-white hover:text-orange-200"></iconify-icon>
<iconify-icon icon="simple-icons:linear" width="80" class="text-white hover:text-orange-200"></iconify-icon>
<iconify-icon icon="simple-icons:shopify" width="80" class="text-white hover:text-orange-200"></iconify-icon>
</div>
</div>
</section>
<!-- Feature Showcase -->
<section class="sm:p-8 max-w-6xl relative glass-panel rounded-3xl mt-32 mr-auto mb-20 ml-auto pt-6 pr-6 pb-6 pl-6 z-10 overflow-hidden">
<div class="absolute inset-0 bg-[#0a0a0a]/50"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 items-start relative z-10">
<div class="flex flex-col min-h-full justify-between">
<div>
<span class="text-xs font-mono text-orange-500 uppercase tracking-widest font-semibold">
The Infrastructure
</span>
<h2 class="text-[32px] sm:text-5xl lg:text-5xl leading-[1] text-white tracking-tighter mt-4 font-semibold">
A system built for speed and focus.
</h2>
<div class="mt-12 relative">
<div class="hidden sm:flex flex-col gap-8 relative text-neutral-300">
<div class="absolute left-2 top-8 bottom-0 w-px bg-gradient-to-b from-orange-500 via-amber-500 to-slate-800"></div>
<div class="flex gap-6 items-start">
<div class="flex-shrink-0 w-4 h-4 z-10 relative bg-[#0a0a0a] border-orange-500 border-2 rounded-full mt-1 shadow-[0_0_10px_rgba(249,115,22,0.5)]">
<div class="w-1.5 h-1.5 absolute top-0.5 left-0.5 bg-orange-500 rounded-full"></div>
</div>
<div class="flex-1">
<span class="text-base font-semibold text-white">
Pipeline Velocity
</span>
<p class="text-sm text-slate-400 mt-1 leading-relaxed">
Automated lead ingestion and qualification. Remove manual
touchpoints from the sales cycle.
</p>
</div>
</div>
<div class="flex gap-6 items-start">
<div class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-amber-500 bg-[#0a0a0a] z-10 relative mt-1">
<div class="w-1.5 h-1.5 rounded-full bg-amber-500 absolute top-0.5 left-0.5"></div>
</div>
<div class="flex-1">
<span class="text-base font-semibold text-white">
Operational Clarity
</span>
<p class="text-sm text-slate-400 mt-1 leading-relaxed">
SOPs that stick. Real-time dashboards replacing weekly
status meetings.
</p>
</div>
</div>
<div class="flex gap-6 items-start">
<div class="flex-shrink-0 w-4 h-4 rounded-full border-2 border-slate-600 bg-[#0a0a0a] z-10 relative mt-1">
<div class="w-1.5 h-1.5 rounded-full bg-slate-600 absolute top-0.5 left-0.5"></div>
</div>
<div class="flex-1">
<span class="text-base font-semibold text-white">
Profit Maximization
</span>
<p class="text-sm text-slate-400 mt-1 leading-relaxed">
Financial modeling to optimize margins and prepare for
potential exit.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full mt-10">
<p class="text-sm font-medium text-white tracking-tight">
Accelerate your transition
</p>
<p class="text-sm text-slate-400 mt-1 max-w-sm">
Stop acting as the employee of your own company. Install the OS
that runs itself.
</p>
<a href="#methodology" class="inline-flex items-center justify-center gap-2 h-10 hover:bg-white hover:text-black transition-all duration-300 text-sm font-medium text-white border border-white/20 bg-white/5 rounded-full mt-6 px-5 backdrop-blur-md">
Explore the Protocol
<span class="inline-flex h-1.5 w-1.5 rounded-full bg-orange-500"></span>
</a>
</div>
</div>
<div class="grid grid-cols-2 gap-4 relative">
<article class="relative overflow-hidden aspect-[4/3] bg-center bg-cover border border-white/10 rounded-2xl group shadow-2xl">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-700 grayscale mix-blend-luminosity">
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/90"></div>
<div class="absolute top-3 left-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur font-mono">
KPI_TRACK
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">
Live Analytics
</p>
</div>
</article>
<article class="relative overflow-hidden aspect-[4/3] bg-center bg-cover border border-white/10 rounded-2xl group shadow-2xl">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-700 grayscale mix-blend-luminosity" style="">
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/90"></div>
<div class="absolute top-3 right-3">
<span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/15 border rounded-full py-1.5 px-2 backdrop-blur font-mono">
DELEGATION
</span>
</div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">
Team Sync
</p>
</div>
</article>
<article class="relative overflow-hidden aspect-[4/5] bg-center bg-cover border border-white/10 rounded-2xl group shadow-2xl">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=800&auto=format&fit=crop" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-700 grayscale mix-blend-luminosity">
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/90"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">
Revenue Operations
</p>
</div>
</article>
<article class="relative overflow-hidden aspect-[4/5] bg-center bg-cover border border-white/10 rounded-2xl group shadow-2xl">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-80 transition-opacity duration-700 grayscale mix-blend-luminosity">
<div class="absolute inset-0 bg-gradient-to-b from-black/20 via-black/40 to-black/90"></div>
<div class="absolute bottom-3 left-3 right-3">
<p class="text-white text-base font-medium tracking-tight leading-tight">
Exit Strategy
</p>
</div>
</article>
</div>
</div>
</section>
<!-- Problem Identification -->
<section class="py-20 px-6 max-w-6xl mx-auto relative z-10">
<div class="mb-16">
<h2 class="text-3xl md:text-4xl font-semibold mb-4 text-white tracking-tight">
The Founder's Trap
</h2>
<p class="text-slate-400 max-w-xl text-lg">
Most agencies hit a glass ceiling at $30k/mo. The systems that got you
here are the same ones holding you back.
</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="p-8 rounded-2xl glass-panel bg-white/[0.02] hover:bg-white/[0.04] hover:shadow-xl hover:shadow-orange-500/5 transition-all group duration-500 hover:-translate-y-1">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center mb-6 text-orange-500 group-hover:scale-110 group-hover:bg-orange-500/20 transition-all shadow-sm">
<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="hourglass" class="lucide lucide-hourglass w-5 h-5">
<path d="M5 22h14"></path>
<path d="M5 2h14"></path>
<path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"></path>
<path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"></path>
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-3">Time Poverty</h3>
<p class="text-sm text-slate-400 leading-relaxed">
You're the chief firefighter. Nothing moves forward unless you push
it. You haven't taken a real vacation in years.
</p>
</div>
<div class="p-8 rounded-2xl glass-panel bg-white/[0.02] hover:bg-white/[0.04] hover:shadow-xl hover:shadow-orange-500/5 transition-all group duration-500 hover:-translate-y-1">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center mb-6 text-orange-400 group-hover:scale-110 group-hover:bg-orange-500/20 transition-all shadow-sm">
<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="bar-chart-3" class="lucide lucide-bar-chart-3 w-5 h-5">
<path d="M3 3v16a2 2 0 0 0 2 2h16"></path>
<path d="M18 17V9"></path>
<path d="M13 17V5"></path>
<path d="M8 17v-3"></path>
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-3">
Revenue Rollercoaster
</h3>
<p class="text-sm text-slate-400 leading-relaxed">
Feast or famine. You rely on referrals because you don't have a
predictable client acquisition engine installed.
</p>
</div>
<div class="p-8 rounded-2xl glass-panel bg-white/[0.02] hover:bg-white/[0.04] hover:shadow-xl hover:shadow-orange-500/5 transition-all group duration-500 hover:-translate-y-1">
<div class="w-12 h-12 rounded-xl bg-orange-500/10 border border-orange-500/20 flex items-center justify-center mb-6 text-orange-300 group-hover:scale-110 group-hover:bg-orange-500/20 transition-all shadow-sm">
<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="users" class="lucide lucide-users w-5 h-5">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
</div>
<h3 class="text-lg font-semibold text-white mb-3">Team Stagnation</h3>
<p class="text-sm text-slate-400 leading-relaxed">
You hire help, but end up redoing their work. You lack the SOPs and
training infrastructure to delegate effectively.
</p>
</div>
</div>
</section>
<!-- Methodology -->
<section id="methodology" class="py-32 bg-[#050505] relative overflow-hidden border-y border-white/5 z-10">
<div class="absolute inset-0 opacity-[0.05]" style="background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 32px 32px;"></div>
<div class="absolute inset-0 bg-gradient-to-b from-[#050505] via-transparent to-[#050505]"></div>
<div class="max-w-6xl mx-auto px-6 relative z-10">
<div class="flex flex-col md:flex-row justify-between items-end mb-24">
<div>
<span class="text-orange-500 font-mono text-xs uppercase tracking-widest mb-2 block font-semibold">
The Protocol
</span>
<h2 class="text-3xl md:text-5xl font-semibold text-white tracking-tight">
The ATLAS Operating System
</h2>
</div>
<p class="text-slate-400 max-w-sm mt-4 md:mt-0 text-sm">
We don't sell courses. We install infrastructure. A 4-phase
transformation over 12 weeks.
</p>
</div>
<div class="relative">
<div class="hidden md:block absolute left-[50%] top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-orange-500/30 to-transparent border-r border-dashed border-orange-500/30"></div>
<div class="flex flex-col md:flex-row items-center gap-12 mb-24 relative group">
<div class="md:w-1/2 flex justify-end">
<div class="glass-panel bg-white/[0.03] p-8 rounded-2xl w-full max-w-sm hover:border-orange-500/30 transition-all duration-500 relative shadow-lg shadow-black/50">
<span class="absolute -top-4 -right-4 w-10 h-10 glass-button rounded-xl flex items-center justify-center font-mono text-xs font-bold text-orange-400 border border-orange-500/30 shadow-lg shadow-orange-900/20 bg-[#0a0a0a]">
01
</span>
<h4 class="text-white font-semibold mb-2 text-lg">
Audit & Simplification
</h4>
<p class="text-sm text-slate-400 leading-relaxed">
We strip your offer down to one core delivery mechanism.
Removal of operational drag.
</p>
<div class="mt-6 flex gap-2">
<span class="px-2.5 py-1 bg-white/5 rounded-md border border-white/10 text-[10px] text-slate-300 font-mono font-medium">
OFFER_DESIGN
</span>
<span class="px-2.5 py-1 bg-white/5 rounded-md border border-white/10 text-[10px] text-slate-300 font-mono font-medium">
PRICING
</span>
</div>
</div>
</div>
<div class="w-4 h-4 rounded-full bg-[#050505] border-4 border-orange-500 z-10 shadow-[0_0_0_4px_rgba(249,115,22,0.2)]"></div>
<div class="md:w-1/2 text-sm text-slate-500 font-mono pl-8 font-medium">
WEEK 1-2
<span class="text-white">FOUNDATION PHASE</span>
</div>
</div>
<div class="flex flex-col md:flex-row-reverse items-center gap-12 mb-24 relative group">
<div class="md:w-1/2 flex justify-start">
<div class="glass-panel bg-white/[0.03] p-8 rounded-2xl w-full max-w-sm hover:border-orange-500/30 transition-all duration-500 relative shadow-lg shadow-black/50">
<span class="absolute -top-4 -left-4 w-10 h-10 glass-button rounded-xl flex items-center justify-center font-mono text-xs font-bold text-orange-400 border border-orange-500/30 shadow-lg shadow-orange-900/20 bg-[#0a0a0a]">
02
</span>
<h4 class="text-white font-semibold mb-2 text-lg">
Acquisition Systems
</h4>
<p class="text-sm text-slate-400 leading-relaxed">
Building outbound and inbound assets. Cold email
infrastructure and content funnels.
</p>
<div class="mt-6 flex gap-2">
<span class="px-2.5 py-1 bg-white/5 rounded-md border border-white/10 text-[10px] text-slate-300 font-mono font-medium">
LEAD_GEN
</span>
<span class="px-2.5 py-1 bg-white/5 rounded-md border border-white/10 text-[10px] text-slate-300 font-mono font-medium">
CRM
</span>
</div>
</div>
</div>
<div class="w-4 h-4 rounded-full bg-[#050505] border-4 border-orange-500 z-10 shadow-[0_0_0_4px_rgba(249,115,22,0.2)]"></div>
<div class="md:w-1/2 text-sm text-slate-500 font-mono pr-8 text-right font-medium">
WEEK 3-6
<span class="text-white">GROWTH PHASE</span>
</div>
</div>
<div class="flex flex-col md:flex-row items-center gap-12 relative group">
<div class="md:w-1/2 flex justify-end">
<div class="glass-panel bg-white/[0.03] p-8 rounded-2xl w-full max-w-sm hover:border-orange-500/30 transition-all duration-500 relative shadow-lg shadow-black/50">
<span class="absolute -top-4 -right-4 w-10 h-10 glass-button rounded-xl flex items-center justify-center font-mono text-xs font-bold text-orange-400 border border-orange-500/30 shadow-lg shadow-orange-900/20 bg-[#0a0a0a]">
03
</span>
<h4 class="text-white font-semibold mb-2 text-lg">
Delegation & Exit
</h4>
<p class="text-sm text-slate-400 leading-relaxed">
Hiring the operator. Documenting SOPs. Removing you from
fulfillment completely.
</p>
<div class="mt-6 flex gap-2">
<span class="px-2.5 py-1 bg-white/5 rounded-md border border-white/10 text-[10px] text-slate-300 font-mono font-medium">
SOPs
</span>
<span class="px-2.5 py-1 bg-white/5 rounded-md border border-white/10 text-[10px] text-slate-300 font-mono font-medium">
HIRING
</span>
</div>
</div>
</div>
<div class="w-4 h-4 rounded-full bg-[#050505] border-4 border-orange-500 z-10 shadow-[0_0_0_4px_rgba(249,115,22,0.2)]"></div>
<div class="md:w-1/2 text-sm text-slate-500 font-mono pl-8 font-medium">
WEEK 7-12
<span class="text-white">SCALE PHASE</span>
</div>
</div>
</div>
</div>
</section>
<!-- Stats / Results & Marquee -->
<section id="results" class="py-24 px-6 max-w-7xl mx-auto relative z-10">
<div class="flex items-center justify-between mb-10 px-2">
<div class="space-y-1">
<p class="text-xs font-mono text-slate-500 uppercase tracking-widest font-semibold">
Community
</p>
<h2 class="text-2xl sm:text-3xl font-semibold text-white tracking-tight">
Founder Results
</h2>
</div>
<div class="hidden sm:flex items-center gap-2 text-slate-500">
<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="users" class="lucide lucide-users w-4 h-4">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<circle cx="9" cy="7" r="4"></circle>
</svg>
<span class="text-xs font-mono">VERIFIED MEMBERS</span>
</div>
</div>
<div class="relative overflow-hidden border-y border-white/5 bg-white/[0.01] mb-20 -mx-6 sm:mx-0 sm:rounded-2xl">
<div class="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-[#050505] to-transparent z-10"></div>
<div class="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-[#050505] to-transparent z-10"></div>
<div class="relative py-8">
<div class="flex gap-4 sm:gap-5 animate-[marquee-ltr_45s_linear_infinite] w-max hover:pause">
<div class="flex gap-4 sm:gap-5">
<article class="shrink-0 w-[300px] md:w-[380px] rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-sm">
<div class="flex items-center gap-3 mb-3">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus" alt="Avatar" class="w-8 h-8 rounded-full bg-slate-800 opacity-80 grayscale" style="">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-white">
Marcus Y.
</span>
<svg class="w-3 h-3 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</div>
<p class="text-xs text-slate-500">Scaled to $85k/mo</p>
</div>
</div>
<p class="text-sm text-slate-400">
"The audit revealed $12k/mo in wasted spend immediately. The
new offer structure closed 3 deals in week one."
</p>
</article>
<article class="shrink-0 w-[300px] md:w-[380px] rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-sm">
<div class="flex items-center gap-3 mb-3">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Sarah" alt="Avatar" class="w-8 h-8 rounded-full bg-slate-800 opacity-80 grayscale">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-white">
Sarah Jenkins
</span>
<svg class="w-3 h-3 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</div>
<p class="text-xs text-slate-500">Exited Ops completely</p>
</div>
</div>
<p class="text-sm text-slate-400">
"I haven't opened my email in 4 days. The team handles
everything using the ATLAS SOP database. Freedom."
</p>
</article>
<article class="shrink-0 w-[300px] md:w-[380px] rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-sm">
<div class="flex items-center gap-3 mb-3">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=David" alt="Avatar" class="w-8 h-8 rounded-full bg-slate-800 opacity-80 grayscale">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-white">
David Chen
</span>
<svg class="w-3 h-3 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</div>
<p class="text-xs text-slate-500">2.8x Profit Margin</p>
</div>
</div>
<p class="text-sm text-slate-400">
"We were stuck at $40k/mo for two years. Within 4 months of
installing the system, we hit $110k/mo."
</p>
</article>
<article class="shrink-0 w-[300px] md:w-[380px] rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-sm">
<div class="flex items-center gap-3 mb-3">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Alex" alt="Avatar" class="w-8 h-8 rounded-full bg-slate-800 opacity-80 grayscale">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-white">
Alex R.
</span>
<svg class="w-3 h-3 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</div>
<p class="text-xs text-slate-500">
Built 6-figure pipeline
</p>
</div>
</div>
<p class="text-sm text-slate-400">
"The cold email infrastructure alone paid for the program in
the first 14 days. Insane ROI."
</p>
</article>
<article class="shrink-0 w-[300px] md:w-[380px] rounded-xl border border-white/5 bg-white/5 p-5 backdrop-blur-sm">
<div class="flex items-center gap-3 mb-3">
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Marcus" alt="Avatar" class="w-8 h-8 rounded-full bg-slate-800 opacity-80 grayscale" style="">
<div>
<div class="flex items-center gap-1">
<span class="text-sm font-medium text-white">
Marcus Y.
</span>
<svg class="w-3 h-3 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
</svg>
</div>
<p class="text-xs text-slate-500">Scaled to $85k/mo</p>
</div>
</div>
<p class="text-sm text-slate-400">
"The audit revealed $12k/mo in wasted spend immediately. The
new offer structure closed 3 deals in week one."
</p>
</article>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="glass-button rounded-xl p-6 text-center flex flex-col items-center justify-center bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
<span class="text-3xl md:text-4xl font-bold text-white mb-2 tracking-tight">
$42M+
</span>
<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-semibold">
Client Revenue Added
</span>
</div>
<div class="glass-button rounded-xl p-6 text-center flex flex-col items-center justify-center bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
<span class="text-3xl md:text-4xl font-bold text-white mb-2 tracking-tight">
2.8x
</span>
<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-semibold">
Avg. Profit Increase
</span>
</div>
<div class="glass-button rounded-xl p-6 text-center flex flex-col items-center justify-center bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
<span class="text-3xl md:text-4xl font-bold text-white mb-2 tracking-tight">
14 Days
</span>
<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-semibold">
Avg Time to ROI
</span>
</div>
<div class="glass-button rounded-xl p-6 text-center flex flex-col items-center justify-center bg-white/[0.03] hover:bg-white/[0.06] transition-colors">
<span class="text-3xl md:text-4xl font-bold text-white mb-2 tracking-tight">
100%
</span>
<span class="text-[10px] font-mono text-slate-500 uppercase tracking-widest font-semibold">
Money Back Guarantee
</span>
</div>
</div>
</section>
<!-- Final CTA / Application -->
<section id="apply" class="py-32 relative overflow-hidden z-10">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-gradient-to-r from-orange-500/20 to-amber-500/20 blur-[120px] rounded-full pointer-events-none opacity-50 animate-float"></div>
<div class="max-w-4xl mx-auto px-6 relative z-10 text-center">
<h2 class="text-4xl md:text-6xl font-semibold text-white mb-6 tracking-tight">
Ready to build a
<br>
self-sustaining agency?
</h2>
<p class="text-slate-400 mb-10 text-lg">
We only work with 5 new partners per quarter. Apply now to see if your
agency qualifies for the ATLAS accelerator.
</p>
<div class="glass-panel rounded-3xl p-2 md:p-12 text-left max-w-xl mx-auto bg-[#0a0a0a]/50 shadow-2xl shadow-orange-900/10">
<form class="space-y-5">
<div class="grid grid-cols-2 gap-5">
<div class="space-y-1.5">
<label class="text-xs font-mono text-slate-500 uppercase ml-1 font-semibold">
First Name
</label>
<input type="text" class="w-full bg-white/5 border border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500/20 transition-all placeholder:text-slate-600 shadow-sm" placeholder="John">
</div>
<div class="space-y-1.5">
<label class="text-xs font-mono text-slate-500 uppercase ml-1 font-semibold">
Last Name
</label>
<input type="text" class="w-full bg-white/5 border border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500/20 transition-all placeholder:text-slate-600 shadow-sm" placeholder="Doe">
</div>
</div>
<div class="space-y-1.5">
<label class="text-xs font-mono text-slate-500 uppercase ml-1 font-semibold">
Work Email
</label>
<input type="email" class="w-full bg-white/5 border border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500/20 transition-all placeholder:text-slate-600 shadow-sm" placeholder="john@agency.com">
</div>
<div class="space-y-1.5">
<label class="text-xs font-mono text-slate-500 uppercase ml-1 font-semibold">
Current Monthly Revenue
</label>
<div class="relative">
<select class="w-full bg-white/5 border border-white/10 rounded-xl p-3.5 text-white text-sm focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500/20 transition-all appearance-none cursor-pointer shadow-sm">
<option class="bg-[#1a1a1a]">< $10k/mo</option>
<option class="bg-[#1a1a1a]">$10k - $30k/mo</option>
<option class="bg-[#1a1a1a]">$30k - $80k/mo</option>
<option class="bg-[#1a1a1a]">$80k+/mo</option>
</select>
<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-down" class="lucide lucide-chevron-down absolute right-3 top-3.5 w-4 h-4 text-slate-400 pointer-events-none">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</div>
<div class="pt-4">
<button type="button" class="group relative w-full overflow-hidden rounded-xl p-[1px] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_0_25px_rgba(234,88,12,0.4)]">
<span class="absolute inset-[-100%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,transparent_75%,#ea580c_100%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span>
<span class="absolute inset-0 rounded-xl bg-white/10 transition-opacity duration-300 group-hover:opacity-0"></span>
<span class="relative flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-b from-zinc-800 to-zinc-950 py-4 text-xs font-medium uppercase tracking-widest text-zinc-400 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] transition-colors duration-300 group-hover:text-white">
<span class="relative z-10">Book Strategy Session</span>
<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="relative z-10 transition-transform duration-300 group-hover:translate-x-0.5">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</span>
</button>
</div>
<p class="text-center text-[10px] text-slate-500 mt-4 font-medium">
By clicking above, you agree to our Terms. Limited spots available
for Q3.
</p>
</form>
</div>
</div>
</section>
<!-- New Robust Footer -->
<footer class="bg-[#050505] border-t border-white/5 pt-20 pb-10 z-10 relative">
<div class="max-w-6xl mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-12 gap-10 mb-20">
<!-- Brand Column (Span 4 on desktop) -->
<div class="col-span-2 md:col-span-4 pr-0 md:pr-10">
<div class="flex items-center gap-2 mb-6">
<div class="bg-orange-400 w-5 h-5 rounded-sm shadow-lg rotate-45"></div>
<span class="font-semibold text-white tracking-tight">ATLAS</span>
</div>
<p class="text-slate-400 text-sm leading-relaxed mb-8 max-w-sm">
ATLAS is a performance infrastructure for agency founders. We
provide the systems, SOPs, and coaching required to scale revenue
while removing yourself from daily operations.
</p>
<div class="flex gap-5">
<a href="#" class="text-slate-500 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="twitter">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
</svg>
</a>
<a href="#" class="text-slate-500 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-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-500 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="1.5" stroke-linecap="round" stroke-linejoin="round" data-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>
<!-- Links Column 1: Product -->
<div class="col-span-1 md:col-span-2 md:col-start-7">
<h4 class="text-white font-medium mb-6">Product</h4>
<ul class="space-y-4 text-sm text-slate-500">
<li>
<a href="/infrastructure" class="hover:text-orange-400 transition-colors">
Infrastructure
</a>
</li>
<li>
<a href="/the-protocol-2" class="hover:text-orange-400 transition-colors">
Protocol
</a>
</li>
<li>
<a href="/pricing" class="hover:text-orange-400 transition-colors">
Pricing
</a>
</li>
</ul>
</div>
<!-- Links Column 2: Company -->
<div class="col-span-1 md:col-span-2">
<h4 class="text-white font-medium mb-6">Company</h4>
<ul class="space-y-4 text-sm text-slate-500">
<li>
<a href="/about-us" class="hover:text-orange-400 transition-colors">
About us
</a>
</li>
<li>
<a href="#" class="hover:text-orange-400 transition-colors">
Blog
</a>
</li>
<li>
<a href="#" class="hover:text-orange-400 transition-colors">
Careers
</a>
</li>
<li>
<a href="#" class="hover:text-orange-400 transition-colors">
Contact
</a>
</li>
</ul>
</div>
<!-- Links Column 3: Legal -->
<div class="col-span-1 md:col-span-2">
<h4 class="text-white font-medium mb-6">Legal</h4>
<ul class="space-y-4 text-sm text-slate-500">
<li>
<a href="#" class="hover:text-orange-400 transition-colors">
Privacy
</a>
</li>
<li>
<a href="#" class="hover:text-orange-400 transition-colors">
Terms
</a>
</li>
</ul>
</div>
</div>
<!-- Bottom Bar -->
<div class="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div class="text-xs text-slate-500">
© 2025 ATLAS Systems Inc. All rights reserved.
</div>
<div class="flex items-center gap-2">
<div class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</div>
<span class="text-xs font-mono text-slate-400 font-medium">
All systems operational
</span>
</div>
</div>
</div>
</footer>
<!-- Initialize Lucide Icons -->
<script>
lucide.createIcons();
</script>
<script>
const btn = document.getElementById('mobile-menu-btn');
const menu = document.getElementById('mobile-menu');
const line1 = document.getElementById('line-1');
const line2 = document.getElementById('line-2');
btn.addEventListener('click', function() {
const isHidden = menu.classList.contains('hidden');
if (isHidden) {
menu.classList.remove('hidden');
menu.classList.add('animate-quick-fade');
line1.classList.remove('top-[6px]');
line1.classList.add('top-1/2', '-translate-y-1/2', 'rotate-45');
line2.classList.remove('bottom-[6px]');
line2.classList.add('bottom-1/2', 'translate-y-1/2', '-rotate-45');
} else {
menu.classList.add('hidden');
menu.classList.remove('animate-quick-fade');
line1.classList.remove('top-1/2', '-translate-y-1/2', 'rotate-45');
line1.classList.add('top-[6px]');
line2.classList.remove('bottom-1/2', 'translate-y-1/2', '-rotate-45');
line2.classList.add('bottom-[6px]');
}
});
</script>
</body></html>