All Prompts
All Prompts
Nexus Engineering Workflow Landing Page Template
Шаблон лендинга Nexus Engineering Workflow для инжиниринговых компаний. Современный дизайн, адаптивность, подходит для демонстрации услуг и проектов.
Prompt
<html lang="en" class="dark"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus - Engineering Workflow</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #050505;
overflow-x: hidden;
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
/* Custom scrollbar to match the dark UI */
::-webkit-scrollbar {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 4px;
}
.hero-perspective {
perspective: 2000px;
}
.hero-rotate {
transform: rotateX(20deg) rotateY(-10deg) rotateZ(4deg) translateY(2rem);
transform-style: preserve-3d;
box-shadow:
0 0 0 1px rgba(255,255,255,0.1),
0 20px 50px -10px rgba(0,0,0,0.5),
0 0 100px -20px rgba(80, 90, 200, 0.1);
}
.glass-panel {
background: rgba(20, 21, 24, 0.95);
backdrop-filter: blur(12px);
}
.shimmer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, rgba(255,255,255,0.05) 0%, transparent 40%);
pointer-events: none;
z-index: 10;
}
/* Fade out bottom of hero image */
.fade-overlay {
background: linear-gradient(to bottom, transparent 0%, #050505 100%);
}
</style>
<script>
// Configure Tailwind to include our custom 3D transform utilities
tailwind.config = {
theme: {
extend: {
// Add any custom theme extensions here if needed
}
},
plugins: [
function({ addUtilities }) {
const rotateXUtilities = {};
const rotateYUtilities = {};
const rotateZUtilities = {};
const rotateValues = [0, 5, 10, 15, 20, 30, 45, 75];
// Generate rotate-x utilities
rotateValues.forEach((value) => {
rotateXUtilities[`.rotate-x-${value}`] = {
'--tw-rotate-x': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateXUtilities[`.-rotate-x-${value}`] = {
'--tw-rotate-x': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-y utilities
rotateValues.forEach((value) => {
rotateYUtilities[`.rotate-y-${value}`] = {
'--tw-rotate-y': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateYUtilities[`.-rotate-y-${value}`] = {
'--tw-rotate-y': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Generate rotate-z utilities
rotateValues.forEach((value) => {
rotateZUtilities[`.rotate-z-${value}`] = {
'--tw-rotate-z': `${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
if (value !== 0) {
rotateZUtilities[`.-rotate-z-${value}`] = {
'--tw-rotate-z': `-${value}deg`,
transform: `
translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0))
rotateX(var(--tw-rotate-x, 0))
rotateY(var(--tw-rotate-y, 0))
rotateZ(var(--tw-rotate-z, 0))
skewX(var(--tw-skew-x, 0))
skewY(var(--tw-skew-y, 0))
scaleX(var(--tw-scale-x, 1))
scaleY(var(--tw-scale-y, 1))
`.replace(/\\s+/g, ' ').trim(),
};
}
});
// Perspective utilities
const perspectiveUtilities = {
".perspective-none": { perspective: "none" },
".perspective-dramatic": { perspective: "100px" },
".perspective-near": { perspective: "300px" },
".perspective-normal": { perspective: "500px" },
".perspective-midrange": { perspective: "800px" },
".perspective-distant": { perspective: "1200px" },
};
// Transform style utilities
const transformStyleUtilities = {
".transform-style-preserve-3d": { "transform-style": "preserve-3d" },
".transform-style-flat": { "transform-style": "flat" },
};
addUtilities({
...rotateXUtilities,
...rotateYUtilities,
...rotateZUtilities,
...perspectiveUtilities,
...transformStyleUtilities,
});
}
]
};
</script>
<style id="aura-editor-visibility-style">
.invisible { visibility: hidden !important; }
</style>
<style>
.reveal-on-scroll {
opacity: 0;
filter: blur(10px);
transform: translateY(30px) scale(0.98);
transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
will-change: opacity, filter, transform;
}
.reveal-on-scroll.is-visible {
opacity: 1;
filter: blur(0);
transform: translateY(0) scale(1);
}
</style> <style>
/* 3D Transform utilities */
.rotate-x-0 { --tw-rotate-x: 0deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.rotate-x-20 { --tw-rotate-x: 20deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.rotate-y-0 { --tw-rotate-y: 0deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.rotate-y-30 { --tw-rotate-y: 30deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.rotate-z-0 { --tw-rotate-z: 0deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.rotate-z-20 { --tw-rotate-z: 20deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.-rotate-z-20 { --tw-rotate-z: -20deg; transform: translate3d(var(--tw-translate-x, 0), var(--tw-translate-y, 0), var(--tw-translate-z, 0)) rotateX(var(--tw-rotate-x, 0)) rotateY(var(--tw-rotate-y, 0)) rotateZ(var(--tw-rotate-z, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)) !important; }
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }
</style><meta name="disabled-font-classes" content="font-geist,font-roboto,font-montserrat,font-poppins,font-playfair,font-instrument-serif,font-merriweather,font-bricolage,font-jakarta,font-manrope,font-space-grotesk,font-work-sans,font-pt-serif,font-geist-mono,font-space-mono,font-quicksand,font-nunito,font-newsreader,font-google-sans-flex,font-oswald,font-dm-sans,font-cormorant"><style id="border-gradient-shared-style">
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}</style></head>
<body class="text-gray-300 antialiased min-h-screen selection:bg-indigo-500/30 selection:text-indigo-200">
<!-- Background (component) added by Aura -->
<div class="aura-background-component -z-10 w-full top-0 absolute hue-rotate-90 saturate-50 h-[750px]" data-alpha-mask="80" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent);"><div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div data-us-project="HzcaAbRLaALMhHJp8gLY" 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></div>
<!-- Navigation -->
<header class="fixed z-50 bg-[#050505]/80 w-full border-white/5 border-b top-0 left-0 backdrop-blur-md" style="">
<div class="flex md:px-6 z-20 h-16 max-w-[1400px] mr-auto ml-auto pr-4 pl-4 relative items-center justify-between">
<!-- Logo -->
<div class="flex hover:text-gray-200 transition-colors cursor-pointer text-white gap-x-2 gap-y-2 items-center" onclick="window.location.href='/home'" role="button">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:infinity-bold-duotone" class="iconify iconify--solar w-[24px] h-[24px]" stroke-width="2" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(229, 231, 235);"><path fill="currentColor" fill-rule="evenodd" d="M2.75 12a4.25 4.25 0 0 1 6.8-3.4a.75.75 0 1 0 .901-1.2A5.75 5.75 0 1 0 7 17.75c.784 0 1.464-.143 2.064-.435s1.079-.714 1.489-1.215c.66-.804 1.196-1.894 1.776-3.074l.339-.6808a.745.745 0 0 0-1.003.337l-.366.743c-.584 1.183-1.027 2.082-1.567 2.74c-.307.375-.624.64-.986.817s-.81.284-1.407.284A4.25 4.25 0 0 1 2.75 12" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M12.67 12.335a.755.755 0 0 0-.34-1.006a.746.746 0 0 0-.975.284q.162-.323.316-.639c.58-1.18 1.117-2.27 1.776-3.074c.41-.501.89-.923 1.49-1.215S16.217 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.596 0-1.045.107-1.406.284c-.363.176-.68.442-.987.816c-.54.66-.983 1.558-1.567 2.741q-.174.355-.369.744z" opacity=".5" class=""></path></svg>
<a href="#" class="inline-flex items-center justify-center bg-center reveal-on-scroll is-visible w-[90px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/780df870-9467-414f-8443-d200333fcf3d_320w.png)] bg-cover rounded-full"></a>
</div>
<!-- Desktop Nav Links -->
<nav class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-400">
<a href="/product" class="hover:text-white transition-colors">Product</a>
<a href="/solutions" class="hover:text-white transition-colors">Solutions</a>
<a href="/enterprise" class="hover:text-white transition-colors">Enterprise</a>
<a href="/pricing" class="hover:text-white transition-colors">Pricing</a>
<a href="/changelog" class="hover:text-white transition-colors">Changelog</a>
</nav>
<!-- Auth -->
<div class="flex gap-4 items-center">
<a href="/login" class="hover:text-white transition-colors hidden sm:block text-sm font-medium">Log in</a>
<a href="/signup" class="hover:bg-gray-200 transition-colors text-sm font-medium text-black bg-white rounded-full pt-1.5 pr-4 pb-1.5 pl-4">Sign up</a>
<!-- Mobile Menu Toggle -->
<button class="md:hidden inline-flex hover:bg-white/10 transition-all active:scale-95 z-50 reveal-on-scroll text-sm text-white/90 bg-white/5 border-white/10 border rounded-full pt-2 pr-3 pb-2 pl-3 relative backdrop-blur-sm items-center justify-center is-visible" onclick="const m=document.getElementById('mobileMenu'); const b=document.getElementById('mobileBackdrop'); m.classList.remove('translate-x-full'); if(b) b.classList.remove('opacity-0', 'pointer-events-none');">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:hamburger-menu-bold-duotone"><path fill="currentColor" d="M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22" opacity=".5"></path><path fill="currentColor" d="M18.75 8a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75m0 4a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75m0 4a.75.75 0 0 1-.75.75H6a.75.75 0 0 1 0-1.5h12a.75.75 0 0 1 .75.75"></path></svg>
</button>
</div>
</div>
<!-- Mobile Drawer Backdrop -->
<div class="fixed z-40 transition-opacity duration-300 pointer-events-none md:hidden bg-black/80 opacity-0 top-0 right-0 bottom-0 left-0 backdrop-blur-sm" onclick="const m=document.getElementById('mobileMenu'); this.classList.add('opacity-0', 'pointer-events-none'); m.classList.add('translate-x-full');" id="mobileBackdrop"></div>
<!-- Mobile Drawer -->
<aside class="mobile-menu fixed z-50 flex flex-col md:hidden transition-transform duration-300 bg-[#000000] w-[80%] max-w-sm border-white/10 border-l pt-6 pb-6 top-0 right-0 bottom-0 shadow-2xl backdrop-blur translate-x-full" aria-label="Mobile menu" id="mobileMenu">
<div class="flex pr-4 pl-6 items-center justify-between">
<span class="z-40 pointer-events-none font-medium text-white">Nexus</span>
<button class="hover:bg-white/5 transition-colors reveal-on-scroll text-slate-200 rounded-lg pt-2 pr-2 pb-2 pl-2" aria-label="Close menu" onclick="const m=document.getElementById('mobileMenu'); const b=document.getElementById('mobileBackdrop'); m.classList.add('translate-x-full'); if(b) b.classList.add('opacity-0', 'pointer-events-none');" id="closeMenuBtn">
<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="x" aria-hidden="true" class="lucide lucide-x w-6 h-6"><path d="M18 6 6 18" class=""></path><path d="m6 6 12 12" class=""></path></svg>
</button>
</div>
<ul class="bg-[#000000] pt-6 pr-6 pl-6 space-y-4">
<li class=""><a href="/product" class="mobile-link block hover:bg-white/5 hover:text-white transition-colors text-slate-300 rounded-lg pt-2 pr-2 pb-2 pl-2">Product</a></li>
<li class=""><a href="/solutions" class="mobile-link block hover:bg-white/5 hover:text-white transition-colors text-slate-300 rounded-lg pt-2 pr-2 pb-2 pl-2">Solutions</a></li>
<li class=""><a href="/enterprise" class="mobile-link block hover:bg-white/5 hover:text-white transition-colors text-slate-300 rounded-lg pt-2 pr-2 pb-2 pl-2">Enterprise</a></li>
<li class=""><a href="/pricing" class="mobile-link block hover:bg-white/5 hover:text-white transition-colors text-slate-300 rounded-lg pt-2 pr-2 pb-2 pl-2">Pricing</a></li>
<li class=""><a href="/changelog" class="mobile-link block hover:bg-white/5 hover:text-white transition-colors text-slate-300 rounded-lg pt-2 pr-2 pb-2 pl-2">Changelog</a></li>
</ul>
<div class="flex flex-col bg-[#000000] mt-auto pr-6 pb-[140%] pl-6">
<a href="/login" class="mobile-link inline-flex justify-center items-center gap-2 hover:bg-white/10 transition-colors reveal-on-scroll text-sm text-slate-200 bg-white/5 w-full ring-white/10 ring-1 rounded-xl mt-6 pt-2 pr-4 pb-2 pl-4">
Log in <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" data-lucide="arrow-right" aria-hidden="true" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
<a href="/signup" class="mobile-link inline-flex justify-center items-center gap-2 hover:bg-white/10 transition-colors reveal-on-scroll text-sm text-slate-200 bg-white/5 w-full ring-white/10 ring-1 rounded-xl mt-3 pt-2 pr-4 pb-2 pl-4">
Sign up <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" data-lucide="arrow-right" aria-hidden="true" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
</a>
</div>
</aside>
</header>
<!-- Hero Section -->
<main class="overflow-hidden md:pt-44 pt-40 pb-0 relative">
<!-- Background Glows -->
<div class="-translate-x-1/2 blur-[120px] opacity-40 w-[1000px] h-[600px] -z-10 rounded-full absolute top-0 left-1/2"></div>
<div class="absolute top-20 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-blue-500/10 rounded-full blur-[100px] -z-10" style=""></div>
<div class="z-10 text-center max-w-5xl mr-auto ml-auto pr-6 pl-6 relative" style="">
<!-- H1 -->
<h1 class="leading-[1.1] md:text-7xl lg:text-7xl text-5xl font-semibold text-white tracking-tighter text-left mb-8 reveal-on-scroll is-visible" style="">
Nexus is a precision tool for<br class="hidden md:block">
<span class="text-transparent bg-clip-text bg-gradient-to-b from-white to-white/50">orchestrating product releases</span>
</h1>
<!-- Subtitle -->
<p class="md:text-2xl leading-relaxed reveal-on-scroll is-visible text-xl font-medium text-gray-400 text-left max-w-3xl mb-10">Meet the operating system for high-performance engineering teams. Streamline sprints, automate tasks, and ship software faster</p>
<!-- CTAs -->
<div class="flex flex-col sm:flex-row gap-6 text-left mb-24 gap-x-6 gap-y-6 items-center justify-center">
<button class="group transition-all duration-300 overflow-hidden font-medium bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-xl pt-4 pr-8 pb-4 pl-8 relative shadow-lg shadow-amber-500/30 hover:shadow-amber-500/50 text-amber-900 reveal-on-scroll is-visible" style="box-shadow: rgba(255, 162, 42, 0.9) 0px 15px 33px -12px, rgb(252, 220, 134) 0px 4px 6.3px inset, rgb(255, 162, 38) 0px -5px 6.3px inset; border-radius: 9999px;">
<div class="group-hover:translate-y-0 transition-transform duration-300 bg-white/20 absolute top-0 right-0 bottom-0 left-0 translate-y-full" style=""></div>
<span class="flex items-center gap-2 relative">Start building<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" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg></span>
</button>
<button class="hover:bg-slate-800 hover:text-slate- transition-all flex text-sm font-medium text-slate-600 bg-gradient-to-b from-black/10 via-black/20 to-black/10 from-white/80 via-black/40 to-white/80 rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),_0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)] gap-x-2 gap-y-2 items-center reveal-on-scroll is-visible" style="box-shadow: rgba(31, 41, 55, 0.25) 0px 18px 35px, rgba(209, 213, 219, 0.3) 0px 0px 0px 1px; color: rgb(229, 231, 235); position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.8)); --border-radius-before: 9999px;">
<span class="text-sm font-medium text-slate-50 tracking-tight" style="">Nexus AI for GitHub</span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="" data-lucide="arrow-right" data-icon-set="lucide" data-icon-replaced="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
<style id="border-gradient-shared-style">
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}</style>
</button>
</div>
</div>
<!-- 3D Interface Mockup -->
<div class="hero-perspective -mt-8 group md:px-0 md:pt-20 pt-20 pr-4 pb-20 pl-4 reveal-on-scroll" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 25%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 25%, transparent);">
<div class="hero-rotate overflow-hidden transform transition-all duration-1000 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:rotate-x-0 group-hover:rotate-y-0 group-hover:rotate-z-0 group-hover:left-0 group-hover:translate-y-0 group-hover:scale-100 group-hover:shadow-2xl bg-[#0F1012] max-w-[1300px] border-white/10 border rounded-xl mr-auto ml-auto relative left-20 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.5)] rotate-x-20 rotate-y-30 -rotate-z-20" style="mask-image: linear-gradient(transparent, black 0%, black 50%, transparent);">
<div class="shimmer"></div>
<!-- Mockup Content Grid -->
<div class="grid grid-cols-[260px_380px_1fr] divide-x divide-white/5 h-[800px]">
<!-- Sidebar -->
<div class="flex flex-col bg-[#0F1012]" style="">
<!-- Workspace Select -->
<div class="flex h-14 border-white/5 border-b pr-4 pl-4 gap-y-3 items-center gap-x-0">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:infinity-bold-duotone" class="iconify iconify--solar w-[24px] h-[24px]" stroke-width="2" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(229, 231, 235);"><path fill="currentColor" fill-rule="evenodd" d="M2.75 12a4.25 4.25 0 0 1 6.8-3.4a.75.75 0 1 0 .901-1.2A5.75 5.75 0 1 0 7 17.75c.784 0 1.464-.143 2.064-.435s1.079-.714 1.489-1.215c.66-.804 1.196-1.894 1.776-3.074l.339-.689a.755.755 0 0 0-.339-1.008a.745.745 0 0 0-1.003.337l-.366.743c-.584 1.183-1.027 2.082-1.567 2.74c-.307.375-.624.64-.986.817s-.81.284-1.407.284A4.25 4.25 0 0 1 2.75 12" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M12.67 12.335a.755.755 0 0 0-.34-1.006a.746.746 0 0 0-.975.284q.162-.323.316-.639c.58-1.18 1.117-2.27 1.776-3.074c.41-.501.89-.923 1.49-1.215S16.217 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.596 0-1.045.107-1.406.284c-.363.176-.68.442-.987.816c-.54.66-.983 1.558-1.567 2.741q-.174.355-.369.744z" opacity=".5" class=""></path></svg>
<a href="#" class="inline-flex items-center justify-center bg-center w-[90px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/780df870-9467-414f-8443-d200333fcf3d_320w.png)] bg-cover rounded-full"></a>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify ml-auto text-gray-500 iconify--solar" style=""><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0" class=""></path></svg>
</div>
<div class="p-3 space-y-1">
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-200 bg-white/5 border border-white/5" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:pen-new-square-bold-duotone" class="iconify iconify--solar text-amber-400" style=""><path fill="currentColor" d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12" opacity=".5" class=""></path><path fill="currentColor" d="M13.926 14.302c.245-.191.467-.413.912-.858l5.54-5.54c.134-.134.073-.365-.106-.427a6.1 6.1 0 0 1-2.3-1.449a6.1 6.1 0 0 1-1.45-2.3c-.061-.18-.292-.24-.426-.106l-5.54 5.54c-.445.444-.667.667-.858.912a5 5 0 0 0-.577.932c-.133.28-.233.579-.431 1.175l-.257.77l-.409 1.226l-.382 1.148a.817.817 0 0 0 1.032 1.033l1.15-.383l1.224-.408l.77-.257c.597-.199.895-.298 1.175-.432q.498-.237.933-.576m8.187-8.132a3.028 3.028 0 0 0-4.282-4.283l-.179.178a.73.73 0 0 0-.206.651c.027.15.077.37.168.633a4.9 4.9 0 0 0 1.174 1.863a4.9 4.9 0 0 0 1.862 1.174c.263.09.483.141.633.168c.24.043.48-.035.652-.207z" class=""></path></svg>
<span class="text-sm">New Issue</span>
<span class="ml-auto text-xs text-gray-600 border border-white/10 rounded px-1.5 py-0.5" style="">C</span>
</div>
</div>
<div class="p-3 space-y-0.5 mt-2">
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 cursor-pointer transition-colors" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:inbox-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12" opacity=".5"></path><path fill="currentColor" d="M2.61 21.389c1.612 1.61 4.205 1.61 9.39 1.61s7.778 0 9.39-1.61c1.492-1.493 1.601-3.829 1.61-8.29h-3.476c-.996 0-1.494 0-1.931.202c-.438.201-.762.58-1.41 1.335l-.666.777c-.648.756-.972 1.134-1.41 1.335s-.935.202-1.93.202h-.353c-.996 0-1.494 0-1.931-.202c-.438-.2-.762-.579-1.41-1.335l-.666-.777c-.648-.756-.972-1.134-1.41-1.335s-.935-.201-1.93-.201H1c.008 4.46.118 6.796 1.61 8.289"></path></svg>
<span class="text-sm">Inbox</span>
<span class="ml-auto text-xs text-gray-500" style="">4</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 cursor-pointer transition-colors" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:target-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M9.25 12a.75.75 0 0 1 .75-.75h1.25V10a.75.75 0 0 1 1.5 0v1.25H14a.75.75 0 0 1 0 1.5h-1.25V14a.75.75 0 0 1-1.5 0v-1.25H10a.75.75 0 0 1-.75-.75m-7.222.75a10 10 0 0 1 0-1.5H5a.75.75 0 0 1 0 1.5zm10.722 9.222a10 10 0 0 1-1.5 0V19a.75.75 0 0 1 1.5 0zm9.222-10.722a10 10 0 0 1 0 1.5H19a.75.75 0 0 1 0-1.5zM12.75 2.028V5a.75.75 0 0 1-1.5 0V2.028a10 10 0 0 1 1.5 0"></path></svg>
<span class="text-sm">My Issues</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 cursor-pointer transition-colors" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:layers-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" d="M4.979 9.685C2.993 8.891 2 8.494 2 8s.993-.89 2.979-1.685l2.808-1.123C9.773 4.397 10.767 4 12 4s2.227.397 4.213 1.192l2.808 1.123C21.007 7.109 22 7.506 22 8s-.993.89-2.979 1.685l-2.808 1.124C14.227 11.603 13.233 12 12 12s-2.227-.397-4.213-1.191z"></path><path fill="currentColor" fill-rule="evenodd" d="M2 8c0 .494.993.89 2.979 1.685l2.808 1.124C9.773 11.603 10.767 12 12 12s2.227-.397 4.213-1.191l2.808-1.124C21.007 8.891 22 8.494 22 8s-.993-.89-2.979-1.685l-2.808-1.123C14.227 4.397 13.233 4 12 4s-2.227.397-4.213 1.192L4.98 6.315C2.993 7.109 2 7.506 2 8" clip-rule="evenodd"></path><path fill="currentColor" d="m5.766 10l-.787.315C2.993 11.109 2 11.507 2 12s.993.89 2.979 1.685l2.808 1.124C9.773 15.603 10.767 16 12 16s2.227-.397 4.213-1.191l2.808-1.124C21.007 12.891 22 12.493 22 12s-.993-.89-2.979-1.685L18.234 10l-2.021.809C14.227 11.603 13.233 12 12 12s-2.227-.397-4.213-1.191z" opacity=".7"></path><path fill="currentColor" d="m5.766 14l-.787.315C2.993 15.109 2 15.507 2 16s.993.89 2.979 1.685l2.808 1.124C9.773 19.603 10.767 20 12 20s2.227-.397 4.213-1.192l2.808-1.123C21.007 16.891 22 16.494 22 16c0-.493-.993-.89-2.979-1.685L18.234 14l-2.021.809C14.227 15.603 13.233 16 12 16s-2.227-.397-4.213-1.191z" opacity=".4"></path></svg>
<span class="text-sm">Views</span>
</div>
</div>
<div class="mt-6 px-6 text-xs font-medium text-gray-600 uppercase tracking-wider" style="">Your Teams</div>
<div class="p-3 space-y-0.5">
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-200 bg-white/5 cursor-pointer" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:box-bold-duotone" class="iconify iconify--solar text-yellow-500" style=""><path fill="currentColor" d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z"></path><path fill="currentColor" d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641" opacity=".7"></path><path fill="currentColor" d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802" opacity=".5" class=""></path><path fill="currentColor" d="m6.323 4.484l.1-.052l1.493-.784l9.1 5.005l4.025-2.011q.205.232.362.498c.15.254.262.524.346.825L17.75 9.964V13a.75.75 0 0 1-1.5 0v-2.286l-3.5 1.75v9.44A3 3 0 0 1 12 22c-.248 0-.493-.032-.75-.096v-9.44l-8.998-4.5c.084-.3.196-.57.346-.824q.156-.266.362-.498l9.04 4.52l3.387-1.693z" class=""></path></svg>
<span class="text-sm">Core Product</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 cursor-pointer transition-colors" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:iphone-bold-duotone" class="iconify text-blue-500 iconify--solar" style=""><path fill="currentColor" d="M20 9.801v4.067c0 3.833 0 5.75-1.172 6.941S15.771 22 12 22s-5.657 0-6.828-1.191C4 19.619 4 17.701 4 13.868V9.8c0-3.833 0-5.75 1.172-6.94c.375-.383.825-.642 1.386-.819c.353-.11.728.047.942.35l.154.236c.634.97.855 1.307 1.368 1.631q.165.105.342.186c.591.274 1.273.274 2.636.274s2.044 0 2.636-.274q.177-.081.342-.186c.513-.324.734-.662 1.368-1.631l.154-.235c.2-.305.564-.467.91-.36c.577.176 1.036.438 1.418.827C20 4.051 20 5.968 20 9.801" opacity=".5"></path><path fill="currentColor" d="M8.25 18.984c0-.417.336-.755.75-.755h6c.414 0 .75.338.75.755a.75.75 0 0 1-.75.754H9a.75.75 0 0 1-.75-.754"></path></svg>
<span class="text-sm">Mobile App</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 rounded-md text-gray-400 hover:text-gray-200 hover:bg-white/5 cursor-pointer transition-colors" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:figma-file-bold-duotone" class="iconify iconify--solar text-amber-500" style=""><path fill="currentColor" d="M14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14v-4c0-3.771 0-5.657 1.172-6.828S6.239 2 10.03 2c.606 0 1.091 0 1.5.017q-.02.12-.02.244l-.01 2.834c0 1.097 0 2.067.105 2.848c.114.847.375 1.694 1.067 2.386c.69.69 1.538.952 2.385 1.066c.781.105 1.751.105 2.848.105h4.052c.043.534.043 1.19.043 2.063V14c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22" opacity=".5" class=""></path><path fill="currentColor" fill-rule="evenodd" d="M6.376 11.5c-.76 0-1.376.638-1.376 1.424c0 .48.23.905.581 1.163A1.44 1.44 0 0 0 5 15.25c0 .48.23.905.581 1.163A1.44 1.44 0 0 0 5 17.576C5 18.362 5.616 19 6.376 19s1.377-.638 1.377-1.424v-1.223c.237.201.54.321.87.321c.76 0 1.377-.637 1.377-1.424c0-.48-.23-.905-.581-1.163c.351-.258.581-.682.581-1.163c0-.786-.616-1.424-1.376-1.424z" clip-rule="evenodd"></path><path fill="currentColor" d="m11.51 2.26l-.01 2.835c0 1.097 0 2.066.105 2.848c.114.847.375 1.694 1.067 2.385c.69.691 1.538.953 2.385 1.067c.781.105 1.751.105 2.848.105h4.052q.02.232.028.5H22c0-.268 0-.402-.01-.56a5.3 5.3 0 0 0-.958-2.641c-.094-.128-.158-.204-.285-.357C19.954 7.494 18.91 6.312 18 5.5c-.81-.724-1.921-1.515-2.89-2.161c-.832-.556-1.248-.834-1.819-1.04a6 6 0 0 0-.506-.154c-.384-.095-.758-.128-1.285-.14z"></path></svg>
<span class="text-sm">Design Sys</span>
</div>
</div>
</div>
<!-- List View -->
<div class="flex flex-col bg-[#0B0C0E]" style="">
<!-- List Header -->
<div class="flex h-14 border-white/5 border-b pr-5 pl-5 items-center justify-between" style="">
<span class="text-sm font-medium text-gray-400" style="">Core Product</span>
<div class="flex gap-3 text-gray-500" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:filter-bold-duotone" class="iconify cursor-pointer hover:text-gray-300 iconify--solar" style=""><path fill="currentColor" fill-rule="evenodd" d="M5 3h14L8.816 13.184a2.7 2.7 0 0 0-.778-1.086c-.228-.198-.547-.377-1.183-.736l-2.913-1.64c-.949-.533-1.423-.8-1.682-1.23C2 8.061 2 7.541 2 6.503v-.69c0-1.326 0-1.99.44-2.402C2.878 3 3.585 3 5 3" clip-rule="evenodd"></path><path fill="currentColor" d="M22 6.504v-.69c0-1.326 0-1.99-.44-2.402C21.122 3 20.415 3 19 3L8.815 13.184q.075.193.121.403c.064.285.064.619.064 1.286v2.67c0 .909 0 1.364.252 1.718c.252.355.7.53 1.594.88c1.879.734 2.818 1.101 3.486.683S15 19.452 15 17.542v-2.67c0-.666 0-1 .063-1.285a2.68 2.68 0 0 1 .9-1.49c.227-.197.545-.376 1.182-.735l2.913-1.64c.948-.533 1.423-.8 1.682-1.23c.26-.43.26-.95.26-1.988" opacity=".5"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:sort-vertical-bold-duotone" class="iconify cursor-pointer hover:text-gray-300 iconify--solar" style=""><path fill="currentColor" d="M20 10.875a.75.75 0 0 0 .538-1.272l-4-4.125a.75.75 0 0 0-1.076 0l-4 4.125A.75.75 0 0 0 12 10.875h3.25V18a.75.75 0 0 0 1.5 0v-7.125z"></path><path fill="currentColor" d="M12 13.125a.75.75 0 0 1 .538 1.272l-4 4.125a.75.75 0 0 1-1.076 0l-4-4.125A.75.75 0 0 1 4 13.125h3.25V6a.75.75 0 1 1 1.5 0v7.125z" opacity=".5" class=""></path></svg>
</div>
</div>
<!-- List Items -->
<div class="flex-1 overflow-y-auto">
<!-- Active Item -->
<div class="group flex flex-col gap-1 p-4 border-b border-white/5 bg-[#16181D] border-l-2 cursor-pointer border-l-amber-500" style="">
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-mono text-amber-400" style="">COR-2491</span>
<div class="w-1 h-1 rounded-full bg-gray-600" style=""></div>
<span class="text-xs text-gray-500" style="">High Priority</span>
</div>
<span class="text-sm font-medium text-white" style="">Refactor WebSocket clusters for scalability</span>
<div class="flex items-center gap-2 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:clock-circle-bold-duotone" class="iconify text-base iconify--solar text-amber-400" style=""><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5"></path><path fill="currentColor" fill-rule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" clip-rule="evenodd"></path></svg>
<span class="text-xs text-gray-500" style="">In Progress</span>
<div class="w-5 h-5 rounded-full bg-gradient-to-tr from-gray-700 to-gray-600 ml-auto border border-black/50" style=""></div>
</div>
</div>
<!-- Other Items -->
<div class="group flex flex-col gap-1 p-4 border-b border-white/5 hover:bg-[#131416] cursor-pointer transition-colors" style="">
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-mono text-gray-500 group-hover:text-gray-400" style="">COR-2490</span>
</div>
<span class="text-sm text-gray-300 group-hover:text-white" style="">Update payment gateway webhooks</span>
<div class="flex items-center gap-2 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-base iconify--solar text-yellow-500" style=""><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5" class=""></path><path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0"></path></svg>
<span class="text-xs text-gray-500" style="">Done</span>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/2f6393e7-98af-42e0-a0f7-807709b595c0_320w.webp" class="w-5 h-5 rounded-full ml-auto grayscale opacity-60 object-cover">
</div>
</div>
<div class="group flex flex-col gap-1 p-4 border-b border-white/5 hover:bg-[#131416] cursor-pointer transition-colors" style="">
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-mono text-gray-500 group-hover:text-gray-400" style="">COR-2489</span>
</div>
<span class="text-sm text-gray-300 group-hover:text-white" style="">Migrate database schema for v2.0</span>
<div class="flex items-center gap-2 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:pause-circle-bold-duotone" class="iconify text-gray-500 text-base iconify--solar" style=""><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5"></path><path fill="currentColor" d="M8.076 8.617C8 8.801 8 9.034 8 9.5v5c0 .466 0 .699.076.883a1 1 0 0 0 .541.54c.184.077.417.077.883.077s.699 0 .883-.076a1 1 0 0 0 .54-.541c.077-.184.077-.417.077-.883v-5c0-.466 0-.699-.076-.883a1 1 0 0 0-.541-.54C10.199 8 9.966 8 9.5 8s-.699 0-.883.076a1 1 0 0 0-.54.541m4.999 0C13 8.801 13 9.034 13 9.5v5c0 .466 0 .699.076.883a1 1 0 0 0 .541.54c.184.077.417.077.883.077s.699 0 .883-.076a1 1 0 0 0 .54-.541c.077-.184.077-.417.077-.883v-5c0-.466 0-.699-.076-.883a1 1 0 0 0-.541-.54C15.199 8 14.966 8 14.5 8s-.699 0-.883.076a1 1 0 0 0-.54.541"></path></svg>
<span class="text-xs text-gray-500" style="">Backlog</span>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1c2951be-3ecd-4505-b19f-362a5b68a2f9_320w.webp" class="w-5 h-5 rounded-full ml-auto grayscale opacity-60 object-cover">
</div>
</div>
<div class="group flex flex-col gap-1 p-4 border-b border-white/5 hover:bg-[#131416] cursor-pointer transition-colors" style="">
<div class="flex items-center gap-2 mb-1">
<span class="text-xs font-mono text-gray-500 group-hover:text-gray-400" style="">COR-2488</span>
</div>
<span class="text-sm text-gray-300 group-hover:text-white" style="">Investigate memory leak in production</span>
<div class="flex items-center gap-2 mt-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:danger-circle-bold-duotone" class="iconify text-base iconify--solar text-amber-500" style=""><path fill="currentColor" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10" opacity=".5"></path><path fill="currentColor" d="M12 6.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0V7a.75.75 0 0 1 .75-.75M12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2"></path></svg>
<span class="text-xs text-gray-500" style="">Urgent</span>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dc3f56c1-ee3e-4061-a7e2-63b8782bf70d_320w.webp" class="w-5 h-5 rounded-full ml-auto grayscale opacity-60 object-cover" style="">
</div>
</div>
</div>
</div>
<!-- Detail View -->
<div class="bg-[#0B0C0E] flex flex-col relative" style="">
<!-- Detail Header -->
<div class="h-14 border-b border-white/5 flex items-center justify-between px-6" style="">
<div class="flex items-center gap-2 text-gray-500" style="">
<span class="text-xs font-mono">Core Product</span>
<span class="text-xs">/</span>
<span class="text-xs font-mono text-gray-300" style="">COR-2491</span>
</div>
<div class="flex gap-4 text-gray-500" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:link-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" d="M15.728 3.884c1.434-1.44 3.532-1.47 4.694-.304c1.164 1.168 1.132 3.28-.303 4.72l-2.424 2.433a.75.75 0 0 0 1.063 1.059l2.424-2.433c1.91-1.919 2.15-4.982.303-6.838c-1.85-1.857-4.907-1.615-6.82.304L9.818 7.692c-1.912 1.919-2.152 4.982-.303 6.837a.75.75 0 1 0 1.062-1.058c-1.163-1.168-1.132-3.28.303-4.72z"></path><path fill="currentColor" d="M14.485 9.47a.75.75 0 0 0-1.063 1.06c1.164 1.168 1.132 3.279-.303 4.72L8.27 20.116c-1.434 1.44-3.532 1.47-4.694.304c-1.163-1.168-1.132-3.28.303-4.72l2.424-2.433a.75.75 0 1 0-1.062-1.059l-2.424 2.433C.906 16.56.666 19.623 2.515 21.48c1.85 1.858 4.907 1.615 6.819-.304l4.848-4.867c1.91-1.918 2.15-4.982.303-6.837" opacity=".5"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:menu-dots-bold-duotone" class="iconify iconify--solar"><path fill="currentColor" d="M7 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0m14 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path fill="currentColor" d="M14 12a2 2 0 1 1-4 0a2 2 0 0 1 4 0" opacity=".5"></path></svg>
</div>
</div>
<!-- Content -->
<div class="p-8 overflow-y-auto">
<h2 class="text-2xl font-medium text-white mb-4 tracking-tight" style="">Refactor WebSocket clusters for scalability</h2>
<div class="flex items-center gap-6 mb-8 pb-6 border-b border-white/5" style="">
<div class="flex items-center gap-2">
<div class="w-6 h-6 rounded-full border border-white/10 bg-white/5 flex items-center justify-center" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:user-bold-duotone" class="iconify text-gray-400 text-xs iconify--solar" style=""><circle cx="12" cy="6" r="4" fill="currentColor"></circle><path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5" opacity=".5"></path></svg>
</div>
<span class="text-sm text-gray-400" style="">Assigned to <span class="text-gray-200" style="">Alex Chen</span></span>
</div>
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:clock-circle-bold-duotone" class="iconify iconify--solar text-amber-400" style=""><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5"></path><path fill="currentColor" fill-rule="evenodd" d="M12 7.25a.75.75 0 0 1 .75.75v3.69l2.28 2.28a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1-.22-.53V8a.75.75 0 0 1 .75-.75" clip-rule="evenodd"></path></svg>
<span class="text-sm text-gray-400" style="">Due in 2 days</span>
</div>
</div>
<div class="space-y-6 text-base text-gray-300 leading-relaxed" style="">
<p class="">The current WebSocket implementation is causing connection drops when reaching 10k concurrent users per node. We need to implement a Redis adapter for socket.io to allow horizontal scaling across multiple Kubernetes pods.</p>
<div class="rounded-lg bg-[#090A0B] border border-white/10 overflow-hidden my-6 shadow-2xl" style="">
<div class="flex items-center justify-between px-4 py-2 bg-[#131416] border-b border-white/5" style="">
<span class="text-xs text-gray-500 font-mono" style="">socket-adapter.ts</span>
<span class="text-xs text-gray-600" style="">TypeScript</span>
</div>
<div class="p-4 font-mono text-xs md:text-sm leading-6 overflow-x-auto">
<div class="text-gray-500" style="">// Initialize Redis adapter</div>
<div class="flex"><span class="text-purple-400" style="">const</span> <span class="text-blue-300" style="">pubClient</span> <span class="text-white" style="">=</span> <span class="text-yellow-300" style="">createClient</span><span class="text-gray-400" style="">({</span> url: <span class="text-green-400" style="">'redis://redis-cluster:6379'</span> <span class="text-gray-400" style="">});</span></div>
<div class="flex"><span class="text-purple-400" style="">const</span> <span class="text-blue-300" style="">subClient</span> <span class="text-white" style="">=</span> <span class="text-blue-300" style="">pubClient</span><span class="text-yellow-300" style="">.duplicate</span><span class="text-gray-400" style="">();</span></div>
<div class="flex"><span class="text-purple-400" style="">await</span> <span class="text-blue-300" style="">Promise</span><span class="text-yellow-300" style="">.all</span><span class="text-gray-400" style="">([</span></div>
<div class="pl-4 flex"><span class="text-blue-300" style="">pubClient</span><span class="text-yellow-300" style="">.connect</span><span class="text-gray-400" style="">(),</span></div>
<div class="pl-4 flex"><span class="text-blue-300" style="">subClient</span><span class="text-yellow-300" style="">.connect</span><span class="text-gray-400" style="">()</span></div>
<div class="text-gray-400" style="">]);</div>
<div class="flex"><span class="text-blue-300" style="">io</span><span class="text-yellow-300" style="">.adapter</span><span class="text-gray-400" style="">(</span><span class="text-yellow-300" style="">createAdapter</span><span class="text-gray-400" style="">(</span><span class="text-blue-300" style="">pubClient</span>, <span class="text-blue-300" style="">subClient</span><span class="text-gray-400" style="">));</span></div>
</div>
</div>
<p class="">Ensure we handle reconnection logic gracefully on the client side when nodes rotate.</p>
</div>
<!-- Activity Stream -->
<div class="mt-12 pt-8 border-t border-white/5" style="">
<div class="flex gap-4 mb-6">
<div class="w-8 h-8 rounded-full border flex items-center justify-center text-xs bg-amber-900/50 border-amber-500/30 text-amber-300" style="">AC</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="text-sm font-medium text-white" style="">Alex Chen</span>
<span class="text-xs text-gray-500" style="">2 hours ago</span>
</div>
<p class="text-sm text-gray-400" style="">I've started the migration on the staging environment. Initial load tests look promising.</p>
</div>
</div>
<div class="flex gap-4">
<div class="w-8 h-8 rounded-full border flex items-center justify-center text-xs bg-amber-900/50 border-amber-500/30 text-amber-300" style="">SB</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-1">
<span class="text-sm font-medium text-white" style="">Sarah Baker</span>
<span class="text-xs text-gray-500" style="">1 hour ago</span>
</div>
<p class="text-sm text-gray-400" style="">Great. Let's sync with the DevOps team about the Redis cluster sizing before we merge.</p>
</div>
</div>
</div>
</div>
<!-- Floating Action in Detail -->
<div class="absolute bottom-8 right-8">
<button class="bg-white text-black hover:bg-gray-200 transition-colors rounded-full p-3 shadow-lg shadow-white/10" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:pen-new-square-bold-duotone" class="iconify text-xl iconify--solar"><path fill="currentColor" d="M1 12c0-5.185 0-7.778 1.61-9.39C4.223 1 6.816 1 12 1s7.778 0 9.39 1.61C23 4.223 23 6.816 23 12s0 7.778-1.61 9.39C19.777 23 17.184 23 12 23s-7.778 0-9.39-1.61C1 19.777 1 17.184 1 12" opacity=".5"></path><path fill="currentColor" d="M13.926 14.302c.245-.191.467-.413.912-.858l5.54-5.54c.134-.134.073-.365-.106-.427a6.1 6.1 0 0 1-2.3-1.449a6.1 6.1 0 0 1-1.45-2.3c-.061-.18-.292-.24-.426-.106l-5.54 5.54c-.445.444-.667.667-.858.912a5 5 0 0 0-.577.932c-.133.28-.233.579-.431 1.175l-.257.77l-.409 1.226l-.382 1.148a.817.817 0 0 0 1.032 1.033l1.15-.383l1.224-.408l.77-.257c.597-.199.895-.298 1.175-.432q.498-.237.933-.576m8.187-8.132a3.028 3.028 0 0 0-4.282-4.283l-.179.178a.73.73 0 0 0-.206.651c.027.15.077.37.168.633a4.9 4.9 0 0 0 1.174 1.863a4.9 4.9 0 0 0 1.862 1.174c.263.09.483.141.633.168c.24.043.48-.035.652-.207z"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div><section class="max-w-[1300px] z-10 mt-20 mr-auto mb-32 ml-auto px-6 relative">
<!-- Section Header -->
<div class="flex flex-col lg:flex-row justify-between items-start gap-12 mb-24">
<h2 class="md:text-7xl leading-[1.1] text-5xl font-semibold text-white tracking-tighter max-w-2xl reveal-on-scroll">
Engineered for
<span class="text-gray-500" style="">modern product teams</span>
</h2>
<div class="max-w-md lg:pt-4">
<p class="text-lg text-gray-400 leading-relaxed mb-8 reveal-on-scroll" style="">
Nexus is forged from the insights of high-performance engineering organizations. Unrelenting speed, automated workflows, and a commitment to the quality of your craft.
</p>
<a href="#" class="group inline-flex items-center text-base font-medium text-white transition-colors hover:text-amber-400 reveal-on-scroll" style="">
Upgrade your workflow
<svg xmlns="http://www.w3.org/2000/svg" class="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
<!-- Features Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Workflow -->
<div class="group flex flex-col overflow-hidden hover:border-white/10 transition-colors bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[480px] rounded-3xl pt-8 pr-8 pb-8 pl-8 relative reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px">
<!-- Background Glow -->
<!-- Illustration Area -->
<div class="flex-1 flex relative items-center justify-center" style="">
<div class="relative w-48 h-48" style="">
<!-- Decorative Elements imitating layers -->
<div class="absolute inset-0 rounded-xl transform rotate-6 border transition-transform group-hover:rotate-12 duration-700 bg-amber-500/10 border-amber-500/20" style=""></div>
<div class="absolute inset-0 bg-[#1A1C20] rounded-xl transform -rotate-3 border border-white/10 z-10 flex items-center justify-center shadow-2xl transition-transform group-hover:-rotate-6 duration-700" style="">
<div class="font-mono text-xs text-gray-500 absolute top-3 left-3" style="">socket.ts</div>
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" style="color: rgb(245, 158, 11); width: 60px; height: 60px;" class="iconify iconify--solar w-[60px] h-[60px]" aria-hidden="true" role="img" data-icon="solar:code-scan-bold-duotone" data-solar="window-frame-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#f59e0b" d="M12 2c4.714 0 7.071 0 8.535 1.464c1.08 1.08 1.364 2.647 1.439 5.286L22 9.5H2.026v-.75c.075-2.64.358-4.205 1.438-5.286C4.93 2 7.286 2 12 2" opacity=".5"></path><path fill="#f59e0b" d="M13 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-3 0a1 1 0 1 1-2 0a1 1 0 0 1 2 0M7 6a1 1 0 1 1-2 0a1 1 0 0 1 2 0"></path><path fill="#f59e0b" d="M2 12c0 4.714 0 7.071 1.464 8.535c1.01 1.01 2.446 1.324 4.786 1.421L9 22V9.5H2.026l-.023.75Q2 11.066 2 12" opacity=".7"></path><path fill="#f59e0b" d="M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22c-.819 0-2.316 0-3-.008V9.5h13l-.003.75Q22 11.066 22 12"></path></svg>
</div>
</div>
</div>
<!-- Content -->
<div class="relative z-20 flex items-end justify-between mt-auto">
<h3 class="text-lg font-medium text-gray-200 reveal-on-scroll" style="">Native to your workflow</h3>
<button class="w-10 h-10 rounded-full bg-[#1A1C20] border border-white/10 flex items-center justify-center text-gray-400 group-hover:bg-white group-hover:text-black transition-all duration-300 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</div>
</div>
<!-- Card 2: Speed -->
<div class="group flex flex-col overflow-hidden hover:border-white/10 transition-colors bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[480px] rounded-3xl pt-8 pr-8 pb-8 pl-8 relative reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px;">
<!-- Background Glow -->
<!-- Illustration Area -->
<div class="relative flex-1 flex items-center justify-center">
<div class="w-full max-w-[200px] space-y-2">
<div class="flex items-center justify-between text-xs font-mono mb-2 text-amber-400/70" style="">
<span class="">LATENCY</span>
<span class="">14ms</span>
</div>
<!-- Speed Lines -->
<div class="h-1 w-full bg-white/5 rounded-full overflow-hidden" style="">
<div class="h-full w-2/3 rounded-full animate-pulse bg-amber-500/50" style=""></div>
</div>
<div class="h-1 w-3/4 bg-white/5 rounded-full overflow-hidden" style="">
<div class="h-full w-1/2 rounded-full bg-amber-500/30" style=""></div>
</div>
<div class="h-1 w-5/6 bg-white/5 rounded-full overflow-hidden" style="">
<div class="h-full w-3/4 rounded-full bg-amber-500/40" style=""></div>
</div>
<div class="mt-8 flex justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" style="color: rgb(245, 158, 11); width: 60px; height: 60px" class="iconify iconify--solar filter text-amber-500 text-6xl w-[60px] h-[60px] drop-shadow-[0_0_15px_rgba(20,184,166,0.3)]" aria-hidden="true" role="img" data-icon="solar:bolt-circle-bold-duotone" data-solar="sidebar-code-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><path fill="#f59e0b" fill-rule="evenodd" d="M3.172 4.172C2 5.343 2 7.229 2 11v2c0 3.771 0 5.657 1.172 6.828S6.229 21 10 21h5V3h-5C6.229 3 4.343 3 3.172 4.172" clip-rule="evenodd" opacity=".5"></path><path fill="#f59e0b" d="M22 13v-2c0-3.771 0-5.657-1.172-6.828c-.974-.975-3.192-1.139-5.828-1.166v17.988c2.636-.027 4.854-.191 5.828-1.166C22 18.657 22 16.771 22 13m-12.737.298a.75.75 0 0 1 .44.965l-1.5 4a.75.75 0 0 1-1.405-.526l1.5-4a.75.75 0 0 1 .965-.44m-2.733.173a.75.75 0 0 1 0 1.06l-.47.47l.47.47a.75.75 0 0 1-1.06 1.06l-1-1a.75.75 0 0 1 0-1.06l1-1a.75.75 0 0 1 1.06 0m3.44 2a.75.75 0 0 1 1.06 0l1 1a.75.75 0 0 1 0 1.06l-1 1a.75.75 0 1 1-1.06-1.06l.47-.47l-.47-.47a.75.75 0 0 1 0-1.06"></path></svg>
</div>
</div>
</div>
<!-- Content -->
<div class="relative z-20 flex items-end justify-between mt-auto">
<h3 class="text-lg font-medium text-gray-200 reveal-on-scroll" style="">Engineered for real-time speed</h3>
<button class="w-10 h-10 rounded-full bg-[#1A1C20] border border-white/10 flex items-center justify-center text-gray-400 group-hover:bg-white group-hover:text-black transition-all duration-300 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</div>
</div>
<!-- Card 3: Precision -->
<div class="group flex flex-col overflow-hidden hover:border-white/10 transition-colors bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[480px] rounded-3xl pt-8 pr-8 pb-8 pl-8 relative reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px;">
<!-- Background Glow -->
<!-- Illustration Area -->
<div class="relative flex-1 flex items-center justify-center">
<div class="relative">
<!-- Grid background -->
<div class="absolute -inset-10 grid grid-cols-6 gap-2 opacity-20 transform scale-75">
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
<div class="w-full aspect-square border border-white/20" style=""></div>
</div>
<!-- Icon -->
<div class="relative z-10 bg-[#1A1C20] p-6 rounded-2xl border border-white/10 shadow-2xl" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" style="color: rgb(251, 191, 36); width: 60px; height: 60px;" class="iconify iconify--solar w-[60px] h-[60px]" aria-hidden="true" role="img" data-icon="solar:magic-stick-3-bold-duotone" data-solar="three-squares-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2"><rect width="10" height="10" x="12" y="2" fill="#fbbf24" rx="2"></rect><path fill="#fbbf24" d="M12 7h-1c-1.886 0-2.828 0-3.414.586S7 9.114 7 11v2c0 1.886 0 2.828.586 3.414S9.114 17 11 17h2c1.886 0 2.828 0 3.414-.586S17 14.886 17 13v-1h-1c-1.886 0-2.828 0-3.414-.586S12 9.886 12 8z" opacity=".7"></path><path fill="#fbbf24" d="M7 12v1c0 1.886 0 2.828.586 3.414S9.114 17 11 17h1v1c0 1.886 0 2.828-.586 3.414S9.886 22 8 22H6c-1.886 0-2.828 0-3.414-.586S2 19.886 2 18v-2c0-1.886 0-2.828.586-3.414S4.114 12 6 12z" opacity=".4"></path></svg>
<div class="absolute -bottom-3 -right-3 bg-white text-black text-[10px] font-bold px-2 py-0.5 rounded border border-white shadow-lg" style="">FIXED</div>
</div>
</div>
</div>
<!-- Content -->
<div class="relative z-20 flex items-end justify-between mt-auto">
<h3 class="text-lg font-medium text-gray-200 reveal-on-scroll" style="">Pixel-perfect precision</h3>
<button class="w-10 h-10 rounded-full bg-[#1A1C20] border border-white/10 flex items-center justify-center text-gray-400 group-hover:bg-white group-hover:text-black transition-all duration-300 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</div>
</div>
</div>
</section><section class="z-10 max-w-[1300px] mr-auto ml-auto pt-24 pr-6 pb-24 pl-6 relative">
<!-- Header aligned with overall Nexus design -->
<div class="max-w-4xl mb-24">
<p class="inline-flex items-center gap-2 uppercase text-xs font-medium text-[#ffffff]/60 tracking-widest font-mono mb-4 reveal-on-scroll">
<span class="w-1.5 h-1.5 animate-pulse bg-[#ffffff]/60 rounded-full shadow-[0_0_8px_rgba(45,212,191,0.8)]"></span>
Infrastructure
</p>
<h2 class="text-5xl md:text-7xl font-semibold tracking-tighter text-white leading-[1.1] mb-6 reveal-on-scroll" style="">
Deploy with velocity,
<span class="text-slate-500" style="">scale without ceremony.</span>
</h2>
<p class="text-lg text-slate-400 max-w-2xl mb-8 leading-relaxed reveal-on-scroll" style="">
Ship from git push to global edge in minutes. Nexus continuously optimizes your infrastructure for latency, reliability, and cost—without touching a single YAML file.
</p>
<div class="flex flex-col sm:flex-row items-start sm:items-center gap-6">
<div class="relative inline-flex group reveal-on-scroll">
<div class="absolute -inset-1 rounded-full blur opacity-40 group-hover:opacity-75 transition duration-500 bg-gradient-to-b group-hover:blur-md from-amber-400 to-amber-600" style=""></div>
<button class="group hover:scale-[1.02] active:scale-[0.98] transition-all duration-300 overflow-hidden font-medium bg-gradient-to-r from-[#FFEBB1] to-[#FFC438] rounded-xl pt-4 pr-8 pb-4 pl-8 relative shadow-lg shadow-amber-500/30 hover:shadow-amber-500/50 text-amber-900 reveal-on-scroll" style="box-shadow: rgba(255, 162, 42, 0.9) 0px 15px 33px -12px, rgb(252, 220, 134) 0px 4px 6.3px inset, rgb(255, 162, 38) 0px -5px 6.3px inset; border-radius: 9999px;">
<div class="group-hover:translate-y-0 transition-transform duration-500 bg-white/20 absolute top-0 right-0 bottom-0 left-0 translate-y-full" style=""></div>
<span class="flex items-center gap-2 relative">Start deploying <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="color: rgb(124, 45, 18); width: 16px; height: 16px" class="lucide lucide-send w-[16px] h-[16px] group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path fill="#7c2d12" fill-rule="evenodd" d="M3.25 12a.75.75 0 0 1 .75-.75h9.25v1.5H4a.75.75 0 0 1-.75-.75" clip-rule="evenodd" opacity=".5" class=""></path><path fill="#7c2d12" d="M13.25 12.75V18a.75.75 0 0 0 1.28.53l6-6a.75.75 0 0 0 0-1.06l-6-6a.75.75 0 0 0-1.28.53z"></path></svg></span>
</button>
</div>
<button class="group inline-flex hover:text-white transition-colors text-sm font-medium text-slate-300 gap-x-2 gap-y-2 items-center reveal-on-scroll">View infrastructure doc</button>
</div>
</div>
<!-- Grid Section -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Card 1: Code Editor -->
<div class="group flex flex-col overflow-hidden hover:border-white/20 transition-all duration-500 hover:shadow-[0_0_60px_-15px_rgba(255,255,255,0.05)] bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[32rem] z-10 rounded-3xl relative justify-between reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px">
<!-- Visual -->
<div class="z-10 pt-8 pr-8 pl-8 relative perspective-distant">
<div class="overflow-hidden transform transition-all duration-500 ease-out group-hover:-translate-y-3 group-hover:rotate-x-2 group-hover:scale-[1.02] bg-gradient-to-b from-white/10 to-white/0 w-full rounded-xl shadow-2xl translate-y-2 group-hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.7)]" style=" position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px; mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent);">
<!-- Window Header -->
<div class="flex items-center justify-between px-4 py-3 border-b border-white/5 bg-white/5" style="">
<div class="flex space-x-2 group/traffic">
<div class="w-3 h-3 rounded-full border transition-colors duration-300 bg-amber-500/20 border-amber-500/50 group-hover/traffic:bg-amber-500" style=""></div>
<div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50 group-hover/traffic:bg-yellow-500 transition-colors duration-300 delay-75" style=""></div>
<div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50 group-hover/traffic:bg-green-500 transition-colors duration-300 delay-100" style=""></div>
</div>
<div class="flex space-x-6 text-xs font-medium text-slate-400" style="">
<span class="text-white border-b border-slate-500 pb-3 -mb-3.5" style="">config.edge.ts</span>
<span class="hover:text-slate-200 transition-colors cursor-pointer" style="">middleware.ts</span>
<span class="hover:text-slate-200 transition-colors cursor-pointer" style="">logs</span>
</div>
</div>
<!-- Code -->
<div class="md:text-sm leading-relaxed text-xs font-mono opacity-90 pt-5 pr-5 pb-5 pl-5 group-hover:opacity-100 transition-opacity duration-300">
<div class="flex gap-3"><span class="select-none text-slate-600" style="">1</span> <span class="text-slate-500" style="">// Auto-provision global edge workers</span></div>
<div class="flex gap-3"><span class="select-none text-slate-600" style="">2</span> <span class=""><span class="text-purple-400" style="">import</span> { <span class="text-yellow-400" style="">createEdgeConfig</span> } <span class="text-purple-400" style="">from</span> <span class="text-amber-300" style="">'@nexus/infra'</span></span></div>
<div class="flex gap-3"><span class="select-none text-slate-600" style="">3</span> <span></span></div>
<div class="flex gap-3"><span class="select-none text-slate-600" style="">4</span> <span class=""><span class="text-purple-400" style="">export const</span> <span class="text-sky-400" style="">config</span> = <span class="text-yellow-400" style="">createEdgeConfig</span>({</span></div>
<div class="flex gap-3 group/line"><span class="select-none text-slate-600" style="">5</span> <span class="pl-4 text-slate-100 group-hover/line:text-white transition-colors" style="">regions: [<span class="text-amber-300" style="">'iad'</span>, <span class="text-amber-300" style="">'fra'</span>, <span class="text-amber-300" style="">'sin'</span>],</span></div>
<div class="flex gap-3 group/line"><span class="select-none text-slate-600" style="">6</span> <span class="pl-4 text-slate-100 group-hover/line:text-white transition-colors" style="">mode: <span class="text-amber-300" style="">'auto-scale'</span>,</span></div>
<div class="flex gap-3 group/line"><span class="select-none text-slate-600" style="">7</span> <span class="pl-4 text-slate-100 group-hover/line:text-white transition-colors" style="">budgetGuard: <span class="text-amber-300" style="">'aggressive'</span>,</span></div>
<div class="flex gap-3 group/line"><span class="select-none text-slate-600" style="">8</span> <span class="pl-4 text-slate-100 group-hover/line:text-white transition-colors" style="">targetCLS: <span class="text-yellow-400" style="">0.1</span>,</span></div>
<div class="flex gap-3 group/line"><span class="select-none text-slate-600" style="">9</span> <span class="pl-4 text-slate-100 group-hover/line:text-white transition-colors" style="">targetTTFB: <span class="text-yellow-400" style="">80</span> <span class="text-slate-500" style="">// ms</span></span></div>
<div class="flex gap-3"><span class="select-none text-slate-600" style="">10</span> <span class="pl-3 text-slate-100" style="">})</span></div>
</div>
</div>
</div>
<!-- Text Content -->
<div class="relative z-10 p-8 mt-auto transform transition-transform duration-500 group-hover:translate-x-1">
<h3 class="text-2xl font-semibold tracking-tight text-white mb-3 reveal-on-scroll" style="">Zero-config infrastructure</h3>
<p class="text-base text-slate-400 group-hover:text-slate-300 transition-colors reveal-on-scroll" style="">
Describe intent in TypeScript, not YAML. Nexus provisions edge workers, routing, and traffic policies around your app with guardrails for performance and cost.
</p>
</div>
</div>
<!-- Card 2: Creative Pattern (Traffic / networks) -->
<div class="group flex flex-col overflow-hidden hover:border-white/20 transition-all duration-500 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[32rem] rounded-3xl relative justify-end reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px">
<div class="absolute inset-0 bg-gradient-to-b from-slate-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-1000" style=""></div>
<!-- Abstract Visual -->
<div class="flex group-hover:opacity-100 transition-opacity duration-700 overflow-hidden opacity-60 w-full h-3/4 absolute top-0 left-0 items-center justify-center">
<div class="flex flex-col w-full pt-8 relative items-center justify-center">
<div class="relative w-[460px] h-[240px]">
<!-- Radar arcs -->
<div class="absolute right-0 bottom-0 left-0 h-full rounded-t-full border-t border-white/5 opacity-30 translate-y-1 scale-90 group-hover:scale-100 transition-transform duration-[2000ms] ease-out" style=""></div>
<div class="absolute right-0 bottom-0 left-0 h-full rounded-t-full border-t border-white/10 opacity-40 scale-95 group-hover:scale-105 transition-transform duration-[2500ms] ease-out" style=""></div>
<div class="absolute right-[12%] bottom-0 left-[12%] h-3/4 rounded-t-full border-t border-white/10 opacity- translate-y-1 scale-90 group-hover:scale-100 transition-transform duration-[1500ms] delay-100 ease-out" style=""></div>
<div class="absolute right-[28%] bottom-0 left-[28%] h-1/2 rounded-t-full border-t border-white/10 opacity-50 translate-y-1 scale-95 group-hover:scale-105 transition-transform duration-[1000ms] delay-200 ease-out" style=""></div>
<!-- Avatars as regions -->
<div class="absolute left-0 top-[60%] w-10 h-10 rounded-full border border-[#1a1a1a] bg-[#111] overflow-hidden group-hover:scale-110 group-hover:border-white/20 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.1)] transition-all duration-500 hover:z-20" style="">
<div class="w-full h-full flex items-center justify-center text-[10px] font-medium text-slate-300 group-hover:text-white" style="">IAD</div>
</div>
<div class="absolute left-[18%] top-[15%] w-12 h-12 rounded-full border-2 border-[#1a1a1a] bg-[#111] overflow-hidden group-hover:scale-110 group-hover:border-white/20 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.1)] transition-all duration-500 delay-75 hover:z-20" style="">
<div class="w-full h-full flex items-center justify-center text-[10px] font-medium text-slate-300 group-hover:text-white" style="">FRA</div>
</div>
<!-- Center Avatar -->
<div class="absolute left-1/2 -top-[15%] -translate-x-1/2 flex flex-col items-center z-20 group-hover:-translate-y-2 transition-transform duration-500">
<div class="relative w-16 h-16 rounded-full border-4 border-[#161616] bg-[#222] overflow-hidden shadow-xl group-hover:shadow-[0_0_30px_rgba(255,255,255,0.15)] transition-all duration-500">
<div class="absolute inset-0 flex items-center justify-center text-[11px] font-semibold text-white tracking-tight" style="">
Nexus
</div>
<div class="absolute inset-0 rounded-full ring-1 ring-inset ring-white/10 group-hover:ring-white/30 transition-all duration-500"></div>
</div>
<div class="mt-3 px-3 py-1 rounded-full bg-[#1a1a1a] border border-white/10 text-[10px] font-medium text-white group-hover:bg-white/10 transition-colors" style="">
Global control plane
</div>
</div>
<div class="absolute right-[18%] top-[15%] w-12 h-12 rounded-full border-2 border-[#1a1a1a] bg-[#111] overflow-hidden group-hover:scale-110 group-hover:border-white/20 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.1)] transition-all duration-500 delay-100 hover:z-20" style="">
<div class="w-full h-full flex items-center justify-center text-[10px] font-medium text-slate-300 group-hover:text-white" style="">SIN</div>
</div>
<div class="absolute right-0 top-[60%] w-10 h-10 rounded-full border border-[#1a1a1a] bg-[#111] overflow-hidden group-hover:scale-110 group-hover:border-white/20 group-hover:shadow-[0_0_15px_rgba(255,255,255,0.1)] transition-all duration-500 delay-150 hover:z-20" style="">
<div class="w-full h-full flex items-center justify-center text-[10px] font-medium text-slate-300 group-hover:text-white" style="">SFO</div>
</div>
</div>
</div>
</div>
<!-- Text Content -->
<div class="relative z-10 p-8 transform transition-transform duration-500 group-hover:translate-x-1">
<h3 class="text-2xl font-semibold tracking-tight text-white mb-3 reveal-on-scroll" style="">Traffic-aware scaling</h3>
<p class="text-base text-slate-400 group-hover:text-slate-300 transition-colors reveal-on-scroll" style="">
Nexus continuously learns from real user traffic, shifting workloads closer to demand and away from noisy neighbors to keep p95 latency stable.
</p>
</div>
</div>
<!-- Card 3: Analytics -->
<div class="group flex flex-col overflow-hidden hover:border-white/20 transition-all duration-500 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[32rem] rounded-3xl relative reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px">
<!-- Chart Visual -->
<div class="flex-1 flex pt-8 pr-8 pl-8 relative items-center justify-center">
<div class="glass-panel bg-gradient-to-b from-white/10 to-white/0 w-full max-w-md rounded-2xl px-6 py-6 shadow-2xl transition-transform duration-500 group-hover:scale-105 group-hover:-translate-y-2" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); --border-radius-before: 16px; mask-image: linear-gradient(90deg, transparent, black 0%, black 75%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 0%, black 75%, transparent);">
<div class="flex items-center justify-between mb-8">
<div class="">
<p class="text-xs font-mono text-slate-500 mb-1 reveal-on-scroll" style="">Deployment health</p>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full shadow-[0_0_8px_rgba(52,211,153,0.8)] animate-pulse bg-yellow-400" style=""></span>
<span class="transition-colors text-xs text-slate-400 group-hover:text-yellow-400" style="">All regions healthy</span>
</div>
</div>
<div class="flex rounded-lg bg-black/30 p-1">
<div class="px-3 py-1 text-xs font-medium text-slate-300 cursor-pointer hover:text-white transition-colors" style="">Day</div>
<div class="px-3 py-1 text-xs font-medium text-black bg-slate-200 rounded shadow-sm" style="">Week</div>
<div class="px-3 py-1 text-xs font-medium text-slate-300 cursor-pointer hover:text-white transition-colors" style="">Month</div>
</div>
</div>
<div class="flex gap-3 h-32 pb-1 gap-x-3 gap-y-3 items-end justify-between">
<!-- Y-Axis -->
<div class="flex flex-col justify-between h-full pb-6 text-[10px] text-slate-600" style="">
<span class="">99.99%</span>
<span class="">99.9%</span>
<span class="">99.0%</span>
</div>
<!-- Bars -->
<div class="relative w-full h-24 rounded-t-sm bg-white/5 group/bar hover:shadow-[0_0_15px_rgba(16,185,129,0.2)] transition-all duration-300 cursor-pointer origin-bottom hover:scale-y-105 hover:bg-yellow-500/20" style="">
<div class="bg-gradient-to-b from-white/20 to-white/0 w-full h-full rounded-t-sm absolute bottom-0" style=""></div>
<div class="opacity-0 group-hover/bar:opacity-100 absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-[10px] text-white px-2 py-1 rounded border border-white/10 whitespace-nowrap transition-opacity" style="">99.8%</div>
</div>
<div class="relative w-full h-28 rounded-t-sm bg-white/5 group/bar hover:shadow-[0_0_15px_rgba(16,185,129,0.2)] transition-all duration-300 cursor-pointer origin-bottom hover:scale-y-105 hover:bg-yellow-500/20" style="">
<div class="bg-gradient-to-b from-white/20 to-white/0 w-full h-full rounded-t-sm absolute bottom-0" style=""></div>
<div class="opacity-0 group-hover/bar:opacity-100 absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-[10px] text-white px-2 py-1 rounded border border-white/10 whitespace-nowrap transition-opacity" style="">99.9%</div>
</div>
<div class="relative w-full h-20 rounded-t-sm bg-white/5 group/bar hover:bg-yellow-500/20 hover:shadow-[0_0_15px_rgba(234,179,8,0.2)] transition-all duration-300 cursor-pointer origin-bottom hover:scale-y-105" style="">
<div class="bg-gradient-to-b from-white/20 to-white/0 w-full h-full rounded-t-sm absolute bottom-0" style=""></div>
<div class="opacity-0 group-hover/bar:opacity-100 absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-[10px] text-yellow-400 px-2 py-1 rounded border border-white/10 whitespace-nowrap transition-opacity" style="">98.5%</div>
</div>
<div class="group/bar bg-gradient-to-b from-white/20 to-white/0 w-full h-28 rounded-t-sm relative hover:shadow-[0_0_15px_rgba(16,185,129,0.2)] transition-all duration-300 cursor-pointer origin-bottom hover:scale-y-105 hover:bg-yellow-500/20" style="">
<div class="opacity-0 group-hover/bar:opacity-100 absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-[10px] text-white px-2 py-1 rounded border border-white/10 whitespace-nowrap transition-opacity" style="">99.9%</div>
</div>
<div class="group/bar bg-white/5 w-full h-36 rounded-t-sm relative hover:shadow-[0_0_15px_rgba(16,185,129,0.3)] transition-all duration-300 cursor-pointer origin-bottom hover:scale-y-105 hover:bg-yellow-500/30" style="">
<div class="bg-gradient-to-b from-white/20 to-white/0 w-full h-full rounded-t-sm absolute bottom-0" style=""></div>
<div class="opacity-0 group-hover/bar:opacity-100 absolute -top-8 left-1/2 -translate-x-1/2 bg-slate-800 text-[10px] px-2 py-1 rounded border border-white/10 whitespace-nowrap transition-opacity text-yellow-400" style="">100%</div>
</div>
</div>
<div class="flex justify-between mt-4 px-4 text-[10px] text-slate-500" style="">
<span class="">Mon</span>
<span class="">Tue</span>
<span>Wed</span>
<span>Thu</span>
<span>Fri</span>
</div>
</div>
</div>
<!-- Text Content -->
<div class="relative z-10 p-8 transform transition-transform duration-500 group-hover:translate-x-1">
<h3 class="text-2xl font-semibold tracking-tight text-white mb-3 reveal-on-scroll" style="">Precision analytics</h3>
<p class="text-base text-slate-400 group-hover:text-slate-300 transition-colors reveal-on-scroll" style="">
Observe every deploy in real time: rollout health, regional error budgets, and core web vitals—mapped directly to commits and issues in Nexus.
</p>
</div>
</div>
<!-- Card 4: Stacked Management -->
<div class="group flex flex-col overflow-hidden hover:border-white/20 transition-all duration-500 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 h-[32rem] z-10 rounded-3xl relative reveal-on-scroll" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px">
<!-- Visual Stack -->
<div class="flex-1 overflow-hidden relative perspective-midrange">
<!-- Bottom Card -->
<div class="left transition-all duration-700 ease-out group-hover:translate-y-8 group-hover:scale-90 group-hover:rotate-3 group-hover:opacity-60 bg-slate-50/10 opacity-40 border-white/10 border rounded-xl absolute top-12 shadow-2xl scale-90" style=""></div>
<!-- Middle Card -->
<div class="-translate-x-1/2 transition-all duration-700 ease-out group-hover:translate-y-4 group-hover:scale-95 group-hover:-rotate-2 group-hover:opacity-80 bg-slate-50/10 opacity-70 w-3/4 h-48 z-20 border-white/10 border rounded-xl absolute top-20 left-1/2 shadow-2xl backdrop-blur scale-95" style=""></div><div class="-translate-x-1/2 transition-all duration-700 ease-out group-hover:translate-y-4 group-hover:scale-95 group-hover:-rotate-2 group-hover:opacity-80 bg-slate-50/10 opacity-70 w-2/3 h-48 border-white/10 border rounded-xl absolute top-16 left-1/2 shadow-2xl scale-95" style=""></div>
<!-- Top Card -->
<div class="glass-panel z-20 -translate-x-1/2 transition-all duration-700 ease-out group-hover:-translate-y-2 group-hover:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.6)] bg-gradient-to-b from-white/20 to-white/0 w-3/4 h-52 rounded-xl pt-5 pr-5 pb-8 pl-5 absolute top-28 left-1/2 shadow-[0_20px_50px_-12px_rgba(0,0,0,0.5)]" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 12px;">
<!-- Skeleton UI -->
<div class="flex items-center gap-4 mb-4">
<div class="w-10 h-10 rounded-full bg-slate-50/10 opacity-80 transition-colors duration-500 flex items-center justify-center group-hover:bg-amber-500/10 group-hover:text-amber-400" style="">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-0 group-hover:opacity-100 transition-opacity" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg>
</div>
<div class="flex-1">
<div class="h-2.5 w-24 mb-2 rounded bg-white/20 group-hover:bg-white/30 transition-colors" style=""></div>
<div class="h-2 w-16 rounded bg-white/10" style=""></div>
</div>
<div class="h-8 px-3 rounded-lg bg-white/5 border border-white/5 flex items-center text-[11px] text-slate-300 transition-all cursor-pointer group-hover:bg-amber-500/10 group-hover:text-amber-200 group-hover:border-amber-500/20 hover:bg-amber-500/20" style="">
Rollback
</div>
</div>
<div class="mt-6 space-y-3">
<div class="h-2 w-full rounded bg-white/5 group-hover:bg-white/10 transition-colors delay-75" style=""></div>
<div class="h-2 w-5/6 rounded bg-white/5 group-hover:bg-white/10 transition-colors delay-100" style=""></div>
<div class="h-2 w-4/6 rounded bg-white/5 group-hover:bg-white/10 transition-colors delay-150" style=""></div>
</div>
</div>
</div>
<!-- Text Content -->
<div class="z-10 transform transition-transform duration-500 group-hover:translate-x-1 pt-8 pr-8 pb-8 pl-8 relative">
<h3 class="text-2xl font-semibold text-white tracking-tight mb-3 reveal-on-scroll" style="">Unified workflow control</h3>
<p class="text-base text-slate-400 group-hover:text-slate-300 transition-colors reveal-on-scroll" style="">
One surface for feature flags, canary rollouts, and instant rollbacks—connected to the same issues, PRs, and AI agents that power the rest of Nexus.
</p>
</div>
</div>
</div>
</section><section class="z-10 max-w-[1300px] mt-40 mr-auto mb-32 ml-auto pr-6 pl-6 relative">
<!-- Header -->
<div class="mb-24">
<a href="#" class="inline-flex items-center gap-2 mb-8 group reveal-on-scroll">
<div class="w-1.5 h-1.5 bg-[#ffffff]/60 rounded-full shadow-[0_0_8px_rgba(34,211,238,0.8)]"></div>
<span class="uppercase group-hover:text-cyan-300 transition-colors text-xs font-medium text-[#ffffff]/60 tracking-widest font-mono" style="">Artificial Intelligence</span>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-[#ffffff]/60 text-xs w-[12px] h-[12px]" stroke-width="2" data-icon-replaced="true" style="width: 12px; height: 12px"><path fill="currentColor" d="m9 5l6 7l-6 7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
</a>
<h2 class="text-5xl md:text-7xl font-semibold tracking-tighter text-white mb-8 max-w-3xl leading-[1.1] reveal-on-scroll" style="">
AI-assisted
<span class="text-gray-500" style="">product orchestration</span>
</h2>
<div class="max-w-xl">
<p class="text-lg text-gray-400 leading-relaxed mb-8 reveal-on-scroll" style="">
Nexus for Agents. Choose from a variety of AI agents and start delegating work, from code generation to automated triage and technical specs.
</p>
<button class="group h-10 px-5 rounded-full bg-[#1A1C20] border border-white/10 text-sm font-medium text-white hover:bg-[#25282E] transition-all flex items-center gap-2 reveal-on-scroll" style="">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style=""><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</button>
</div>
</div>
<!-- 3D Interface Visual -->
<div class="flex [perspective:2000px] w-full h-[500px] max-w-4xl mr-auto mb-32 ml-auto relative items-center justify-center">
<!-- Glow backing -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] blur-[100px] rounded-full -z-10 bg-amber-500/10" style=""></div>
<!-- The Floating Card -->
<div class="w-full max-w-[800px] bg-[#0A0B0D] border border-white/10 rounded-2xl overflow-hidden shadow-2xl [transform:rotateX(20deg)] shadow-[0_50px_100px_-20px_rgba(0,0,0,0.7)] relative z-10 group transition-transform duration-700 hover:[transform:rotateX(10deg)] reveal-on-scroll" style="">
<!-- Card Header -->
<div class="px-6 py-4 border-b border-white/5 bg-[#0F1012] flex items-center justify-between" style="">
<span class="text-lg font-medium text-gray-400" style="">Assign to...</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:check-circle-bold-duotone" class="iconify text-gray-600 text-xl" style=""><path fill="currentColor" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10" opacity=".5"></path><path fill="currentColor" d="M16.03 8.97a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l2.235-2.235L14.97 8.97a.75.75 0 0 1 1.06 0"></path></svg>
</div>
<!-- List -->
<div class="p-3 space-y-1 bg-[#0A0B0D]">
<!-- Item 1: Nexus AI -->
<div class="flex items-center justify-between px-4 py-3 bg-[#1A1C20] rounded-lg border border-white/10 shadow-lg cursor-pointer" style="">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded flex items-center justify-center000/svg bg-amber-500/20" aria-hidden="true" role="img" width="1em" height="1em" viewbox="0 0 24 24" data-icon="solar:stars-minimalistic-bold-duotone" style=""><path fill="currentColor" fill-rule="evenodd" d="M14.438 10.666c.214-1.124 1.71-1.124 1.924 0l.54 2.836l2.836.54c1.124.214 1.124 1.71 0 1.924l-2.836.54l-.54 2.836c-.214 1.124-1.71 1.124-1.924 0l-.54-2.836l-2.836-.54c-1.124-.214-1.124-1.71 0-1.924l2.836-.54zm-8.816-4.99c.15-.79 1.206-.79 1.356 0l.59 3.098l3.098.59c.79.15.79 1.206 0 1.356l-3.098.59l-.59 3.098c-.15.79-1.206.79-1.356 0l-.59-3.098l-3.098-.59c-.79-.15-.79-1.206 0-1.356l3.098-.59z" clip-rule="evenodd" class=""></path>
</div>
<span class="text-base font-medium text-white" style="">Nexus Agent</span>
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-white/10 text-gray-400 uppercase tracking-wide border border-white/5" style="">AI Agent</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-xl text-amber-400" style=""><path fill="currentColor" d="M20.292 6.708a1 1 0 0 0-1.414-1.414l-9.5 9.5l-4.293-4.293a1 1 0 1 0-1.414 1.414l5 5a1 1 0 0 0 1.414 0z"></path></svg>
</div>
<!-- Item 2: Devin -->
<div class="flex hover:bg-white/5 transition-colors cursor-pointer group/item rounded-lg pt-3 pr-4 pb-3 pl-4 items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded flex items-center justify-center transition-colors bg-amber-500/10 text-amber-400 group-hover/item:bg-amber-500/20" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:code-square-bold-duotone" class="iconify text-lg"><path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2c4.714 0 7.071 0 8.536 1.464C22 4.93 22 7.286 22 12c0 4.714 0 7.071-1.464 8.536C19.07 22 16.714 22 12 22c-4.714 0-7.071 0-8.536-1.464C2 19.07 2 16.714 2 12" opacity=".5"></path><path fill="currentColor" d="m14.56 14.56l-1.06-1.06a.75.75 0 0 1 0-1.06l1.06-1.06a.75.75 0 0 1 1.06 1.06l-.53.53l.53.53a.75.75 0 0 1-1.06 1.06m-5.12 0a.75.75 0 0 1-1.06-1.06l.53-.53l-.53-.53a.75.75 0 0 1 1.06-1.06l1.06 1.06a.75.75 0 0 1 0 1.06z"></path></svg>
</div>
<span class="text-base font-medium text-gray-300 group-hover/item:text-white transition-colors" style="">Devin</span>
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-white/5 text-gray-500 uppercase tracking-wide border border-white/5" style="">AI Agent</span>
</div>
</div>
<!-- Item 3: Sentry -->
<div class="flex items-center justify-between px-4 py-3 hover:bg-white/5 rounded-lg transition-colors cursor-pointer group/item" style="">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded flex items-center justify-center transition-colors bg-amber-500/10 text-amber-400 group-hover/item:bg-amber-500/20" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:bug-bold-duotone" class="iconify text-lg"><path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10" opacity=".5"></path><path fill="currentColor" d="M15.5 10a.5.5 0 0 0 .5-.5V8.878c.026.012.052.025.08.038l.64.291a1 1 0 1 0 .835-1.83l-.64-.29a2.03 2.03 0 0 0-.256-.096l-.004-.038a1.5 1.5 0 0 0-2.888-.538a2.53 2.53 0 0 0-.533.018l-.001.006c-.161.025-.327.042-.497.051l-.007.016A3.5 3.5 0 0 0 9 8.5v1a.5.5 0 0 0 .5.5zM16 12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-1h8zm.39 3.096a1.5 1.5 0 0 0-2.164.048L13 16.425V15.5a.5.5 0 0 0-1 0v.925l-1.226-1.321a1.5 1.5 0 0 0-2.164-.048a1.502 1.502 0 0 0 .048 2.164L11.325 20h2.35l2.667-2.78a1.502 1.502 0 0 0 .048-2.164"></path></svg>
</div>
<span class="text-base font-medium text-gray-300 group-hover/item:text-white transition-colors" style="">Sentry</span>
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-white/5 text-gray-500 uppercase tracking-wide border border-white/5" style="">Integration</span>
</div>
</div>
<!-- Item 4: Leela -->
<div class="flex items-center justify-between px-4 py-3 hover:bg-white/5 rounded-lg transition-colors cursor-pointer group/item opacity-60 hover:opacity-100" style="">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded flex items-center justify-center transition-colors bg-amber-500/10 text-amber-400 group-hover/item:bg-amber-500/20" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:bolt-bold-duotone" class="iconify text-lg"><path fill="currentColor" d="m8.828 12.356l2.88-3.328c.594-.686 1.716-.25 1.693.657l-.057 2.257l5.115-1.966c.853-.328 1.579.668.986 1.353l-2.88 3.328c-.594.686-1.716.25-1.693-.657l.057-2.257l-5.115 1.966c-.853.328-1.579-.668-.986-1.353" opacity=".5"></path><path fill="currentColor" d="M13.401 2.257c.594-.686 1.716-.25 1.693.657l-.057 2.257l5.115-1.966c.853-.328 1.579.668.986 1.353l-2.88 3.328c-.594.686-1.716.25-1.693-.657l.057-2.257l-5.115 1.966c-.853.328-1.579-.668-.986-1.353l2.88-3.328c.594-.686 1.716-.25 1.693.657l-.057 2.257z"></path></svg>
</div>
<span class="text-base font-medium text-gray-300 group-hover/item:text-white transition-colors" style="">Leela</span>
</div>
</div>
<!-- Item 5: Codegen -->
<div class="flex items-center justify-between px-4 py-3 hover:bg-white/5 rounded-lg transition-colors cursor-pointer group/item opacity-40 hover:opacity-100" style="">
<div class="flex items-center gap-4">
<div class="w-8 h-8 rounded bg-purple-500/10 flex items-center justify-center text-purple-400 group-hover/item:bg-purple-500/20 transition-colors" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:magic-stick-bold-duotone" class="iconify text-lg"><path fill="currentColor" d="m9.763 2.65l-2.074 1.956c-.89.84-2.228.983-3.256.347l-.147-.091a3.02 3.02 0 0 1 .15 5.253l.145.088c1.03.626 1.487 1.905.86 2.859l-1.127 1.711a3.02 3.02 0 0 1-5.187-2.385l.383-2.008c.213-1.117-.268-2.23-1.168-2.71l-.145-.078a3.02 3.02 0 0 1 2.37-5.467l.146.09c1.028.636 2.368.497 3.26-.343l2.072-1.954a3.02 3.02 0 0 1 4.12 2.732" opacity=".5"></path><path fill="currentColor" d="m20.505 15.655l-7.795-7.796a2.636 2.636 0 0 0-3.728 0a2.636 2.636 0 0 0 0 3.728l7.795 7.796a2.636 2.636 0 0 0 3.728 0a2.636 2.636 0 0 0 0-3.728" class=""></path></svg>
</div>
<span class="text-base font-medium text-gray-300 group-hover/item:text-white transition-colors" style="">Codegen</span>
<span class="px-2 py-0.5 rounded text-[10px] font-bold bg-white/5 text-gray-500 uppercase tracking-wide border border-white/5" style="">Agent</span>
</div>
</div>
</div>
<!-- Fade out bottom of card -->
<div class="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-[#0A0B0D] to-transparent pointer-events-none"></div>
</div>
</div>
<!-- Feature Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 border-white/5 border-t pt-16 gap-x-8 gap-y-8" style="">
<!-- Left Column: Product Intelligence -->
<div class="group reveal-on-scroll">
<h3 class="text-2xl font-medium tracking-tight text-white mb-3 reveal-on-scroll" style="">Product Intelligence</h3>
<p class="text-lg text-gray-400 mb-8 leading-relaxed reveal-on-scroll" style="">
Streamline your product development workflows with AI assistance for routine, manual tasks and triage.
</p>
<!-- Card UI Mockup -->
<div class="overflow-hidden min-h-[400px] flex flex-col hover:border-white/20 transition-all duration-500 ease-out group/card hover:shadow-2xl hover:-translate-y-1 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 rounded-3xl relative hover:shadow-amber-500/10" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px;">
<!-- Background Gradient -->
<div class="absolute top-0 right-0 w-[300px] h-[300px] blur-[80px] rounded-full pointer-events-none transition-all duration-700 group-hover/card:blur-[100px] group-hover/card:scale-110 bg-amber-500/5 group-hover/card:bg-amber-500/10" style=""></div>
<div class="p-8 relative z-10 flex flex-col h-full">
<!-- Suggestion Label -->
<div class="flex items-center gap-2 mb-6 text-xs font-mono text-gray-500 transition-colors group-hover/card:text-amber-400" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:stars-minimalistic-bold-duotone" class="iconify text-amber-400" style=""><path fill="currentColor" fill-rule="evenodd" d="M14.438 10.666c.214-1.124 1.71-1.124 1.924 0l.54 2.836l2.836.54c1.124.214 1.124 1.71 0 1.924l-2.836.54l-.54 2.836c-.214 1.124-1.71 1.124-1.924 0l-.54-2.836l-2.836-.54c-1.124-.214-1.124-1.71 0-1.924l2.836-.54zm-8.816-4.99c.15-.79 1.206-.79 1.356 0l.59 3.098l3.098.59c.79.15.79 1.206 0 1.356l-3.098.59l-.59 3.098c-.15.79-1.206.79-1.356 0l-.59-3.098l-3.098-.59c-.79-.15-.79-1.206 0-1.356l3.098-.59z" clip-rule="evenodd"></path></svg>
<span class="">Product Intelligence</span>
</div>
<div class="space-y-4">
<div class="flex gap-2">
<div class="bg-[#1A1C20] border border-white/10 px-3 py-1.5 rounded-full text-xs text-gray-300 flex items-center gap-2 shadow-sm transition-colors duration-300 group-hover/card:border-amber-500/20" style="">
<span class="text-gray-500" style="">Suggested:</span>
<span class="text-white font-medium" style="">Mobile App Refactor</span>
</div>
<div class="bg-transparent border border-white/5 px-3 py-1.5 rounded-full text-xs text-gray-500 transition-colors group-hover/card:border-white/10" style="">Duplicate of</div>
</div>
<!-- Main Intelligence Card -->
<div class="bg-[#16181D] border border-white/10 rounded-xl p-5 shadow-2xl mt-4 transform transition-all duration-500 group-hover/card:translate-y-0 translate-y-2 hover:bg-[#1A1C20] hover:border-white/15 cursor-default group-hover/card:shadow-amber-500/5" style="">
<div class="flex items-center gap-3 mb-3">
<div class="w-6 h-6 rounded-full flex items-center justify-center bg-amber-500/20 text-amber-400" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"></path></svg>
</div>
<span class="text-sm font-medium text-white" style="">Why this assignee was suggested</span>
</div>
<p class="text-sm text-gray-400 leading-relaxed mb-4 reveal-on-scroll" style="">
This person was the assignee on previous issues related to performance problems in the mobile app launch flow.
</p>
<div class="flex items-center justify-between pt-4 border-t border-white/5" style="">
<div class="flex items-center -space-x-2">
<div class="w-6 h-6 rounded-full bg-gray-700 border border-[#16181D] flex items-center justify-center text-[8px] text-white ring-2 ring-[#16181D] group-hover/card:ring-[#1A1C20] transition-all" style="">JD</div>
<div class="w-6 h-6 rounded-full bg-gray-600 border border-[#16181D] flex items-center justify-center text-[8px] text-white ring-2 ring-[#16181D] group-hover/card:ring-[#1A1C20] transition-all" style="">AS</div>
<span class="text-xs text-gray-500 ml-3 group-hover/card:text-gray-400 transition-colors" style="">Alternatives</span>
</div>
<button class="flex items-center gap-2 text-xs font-medium transition-colors group/btn text-amber-400 hover:text-amber-300 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="group-hover/btn:scale-110 transition-transform"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"></path></svg>
Accept suggestion
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Nexus MCP -->
<div class="group reveal-on-scroll">
<h3 class="text-2xl font-medium tracking-tight text-white mb-3 reveal-on-scroll" style="">Nexus MCP</h3>
<p class="text-lg text-gray-400 mb-8 leading-relaxed reveal-on-scroll" style="">
Connect Nexus to your favorite tools including Cursor, Claude, and ChatGPT for seamless context sharing.
</p>
<!-- Card UI Mockup -->
<div class="overflow-hidden min-h-[400px] flex flex-col hover:border-white/20 transition-all duration-500 ease-out group/card hover:shadow-2xl hover:-translate-y-1 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 z-10 rounded-3xl relative hover:shadow-amber-500/10" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px;">
<!-- Background Gradient -->
<div class="absolute bottom-0 left-0 w-[300px] h-[300px] blur-[80px] rounded-full pointer-events-none transition-all duration-700 group-hover/card:blur-[100px] group-hover/card:scale-110 bg-amber-500/5 group-hover/card:bg-amber-500/10" style=""></div>
<div class="z-10 flex flex-col h-full pt-8 pr-8 pb-8 pl-8 relative">
<!-- Code Snippet -->
<div class="font-mono text-xs text-gray-500 bg-[#0A0B0D] p-4 rounded-xl border border-white/5 mb-6 overflow-hidden transition-colors duration-300 group-hover/card:border-white/10 group-hover/card:shadow-lg" style="">
<div class="flex gap-1.5 mb-3 opacity-50 group-hover/card:opacity-80 transition-opacity">
<div class="w-2.5 h-2.5 rounded-full bg-amber-500/20" style=""></div>
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500/20" style=""></div>
<div class="w-2.5 h-2.5 rounded-full bg-green-500/20" style=""></div>
</div>
<div class="space-y-1">
<div class=""><span class="text-purple-400" style="">// nexus.config.js</span></div>
<div class="pl-0"><span class="text-blue-300" style="">"mcpServers"</span>: {</div>
<div class="pl-4"><span class="text-green-300" style="">"nexus"</span>: {</div>
<div class="pl-8"><span class="text-blue-300" style="">"command"</span>: <span class="text-amber-300" style="">"npx"</span>,</div>
<div class="pl-8"><span class="text-blue-300" style="">"args"</span>: [<span class="text-amber-300" style="">"-y"</span>, <span class="text-amber-300" style="">"@nexus/mcp-server"</span>]</div>
<div class="pl-4">}</div>
<div class="">}</div>
</div>
</div>
<!-- Chat Input Mockup -->
<div class="mt-auto transform transition-all duration-500 group-hover/card:translate-y-0 translate-y-2">
<div class="bg-[#16181D] border border-white/10 rounded-2xl p-4 shadow-xl transition-colors hover:border-white/20 group-hover/card:shadow-2xl" style="">
<div class="flex items-center gap-3 text-gray-500 mb-4 group/input cursor-text" style="">
<div class="w-0.5 h-4 animate-pulse bg-amber-500" style=""></div>
<span class="text-sm group-hover/input:text-gray-400 transition-colors" style="">Ask anything...</span>
</div>
<div class="flex gap-2">
<button class="flex items-center gap-1.5 px-3 py-1.5 bg-white/5 hover:bg-white/10 active:scale-95 active:bg-white/15 rounded-lg text-xs font-medium text-gray-400 hover:text-white transition-all border border-white/5 hover:border-white/10 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:paperclip-bold-duotone" class="iconify"><path fill="currentColor" d="M7.766 8.525a4.34 4.34 0 0 1 6.134-6.135l4.636 4.636a6.34 6.34 0 0 1-8.966 8.966L4.237 10.66a8.34 8.34 0 1 1 11.796-11.795l.448.448a1 1 0 0 1-1.414 1.414l-.448-.448a6.34 6.34 0 0 0-8.967 8.967l5.333 5.333a4.34 4.34 0 0 0 6.137-6.136l-4.636-4.636a2.34 2.34 0 0 0-3.308 3.308l5.05 5.05a1 1 0 0 1-1.414 1.414l-5.05-5.05a4.34 4.34 0 0 1 .003-6.135" opacity=".5"></path></svg>
Attach
</button>
<button class="flex items-center gap-1.5 px-3 py-1.5 bg-white/5 hover:bg-white/10 active:scale-95 active:bg-white/15 rounded-lg text-xs font-medium text-gray-400 hover:text-white transition-all border border-white/5 hover:border-white/10 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:magnifer-bold-duotone" class="iconify"><path fill="currentColor" d="M11.5 21a9.5 9.5 0 1 0 0-19a9.5 9.5 0 0 0 0 19M22 22l-2-2" opacity=".5"></path><circle cx="11.5" cy="11.5" r="9.5" stroke="currentColor" stroke-width="1.5"></circle></svg>
Search
</button>
<button class="flex items-center gap-1.5 px-3 py-1.5 bg-white/5 hover:bg-white/10 active:scale-95 active:bg-white/15 rounded-lg text-xs font-medium text-gray-400 hover:text-white transition-all border border-white/5 hover:border-white/10 reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:lightbulb-bold-duotone" class="iconify"><path fill="currentColor" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" opacity=".5"></path><path fill="currentColor" d="M12 18a1 1 0 1 0 0-2a1 1 0 0 0 0 2"></path></svg>
Reason
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><section class="sm:p-8 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/10 to-white/0 w-full max-w-7xl rounded-3xl mt-24 mr-auto ml-auto pt-6 pr-6 pb-6 pl-6 relative backdrop-blur" style="position: relative; --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --border-radius-before: 24px">
<div class="grid grid-cols-1 lg:grid-cols-12 items-center gap-8 sm:gap-10">
<!-- Left content -->
<div class="lg:col-span-6">
<!-- Connect pill -->
<a href="#contact" class="inline-flex items-center gap-2 rounded-full px-3 py-1.5 ring-1 ring-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 transition font-sans reveal-on-scroll" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot w-4 h-4">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="1"></circle>
</svg>
Start Building Today
</a>
<!-- Headline -->
<h1 class="mt-4 text-[44px] sm:text-6xl md:text-7xl leading-[1.05] text-zinc-100 font-sans font-light tracking-tighter reveal-on-scroll" style="">Ship Faster with Nexus</h1>
<!-- Divider -->
<div class="h-px bg-white/10 mt-6" style=""></div>
<!-- Service 1 -->
<div class="mt-6">
<div class="flex items-center gap-3">
<h3 class="text-2xl sm:text-3xl text-zinc-100 font-sans font-light tracking-tighter reveal-on-scroll" style="">Engineering Teams</h3>
<span class="inline-flex items-center rounded-full px-3 py-1 text-sm text-zinc-200 bg-white/5 ring-1 ring-white/10 font-sans" style="">Free Forever</span>
</div>
<p class="text-zinc-400 text-sm sm:text-base mt-3 font-sans reveal-on-scroll" style="">Streamline sprints, automate workflows, and ship software with precision and speed</p>
</div>
<!-- Divider -->
<div class="h-px bg-white/10 mt-6" style=""></div>
<!-- Service 2 -->
<div class="mt-6">
<div class="flex items-center gap-3">
<h3 class="text-2xl sm:text-3xl text-zinc-100 font-sans font-light tracking-tighter reveal-on-scroll" style="">Enterprise Solutions</h3>
<span class="inline-flex items-center rounded-full px-3 py-1 text-sm text-zinc-200 bg-white/5 ring-1 ring-white/10 font-sans" style="">Contact Sales</span>
</div>
<p class="text-zinc-400 text-sm sm:text-base mt-3 font-sans reveal-on-scroll" style="">Advanced security, dedicated support, and custom integrations for large organizations</p>
</div>
<!-- CTAs -->
<div class="mt-8 flex flex-wrap items-center gap-4">
<a href="#work" class="inline-flex items-center justify-center hover:opacity-90 transition text-base font-medium text-neutral-900 bg-gradient-to-b from-white to-neutral-300 h-14 rounded-full pr-8 pl-8 shadow-[0_12px_40px_rgba(0,0,0,0.35)] reveal-on-scroll" style="">Start Building for Free</a>
<a href="#contact" class="inline-flex items-center justify-center h-14 px-6 rounded-full text-base font-medium text-white bg-white/5 ring-1 ring-white/10 hover:bg-white/10 transition shadow-[inset_0_1px_0_rgba(255,255,255,0.05)] font-sans reveal-on-scroll" style="">View Documentation</a>
</div>
</div>
<!-- Right showcase -->
<div class="lg:col-span-6">
<div class="relative mx-auto w-full max-w-[860px]" style="filter: drop-shadow(0 20px 60px rgba(0,0,0,0.6));">
<!-- Outer frame -->
<div class="bg-neutral-900/60 ring-white/10 ring-1 rounded-[28px] pt-3 pr-3 pb-3 pl-3" style="">
<!-- Inner "screen" -->
<div class="relative overflow-hidden rounded-[22px] bg-neutral-950 border border-white/10" style="">
<!-- Browser bar -->
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/10" style="">
<span class="h-3 w-3 rounded-full bg-zinc-700" style=""></span>
<span class="h-3 w-3 rounded-full bg-zinc-700/70" style=""></span>
<span class="h-3 w-3 rounded-full bg-zinc-700/50" style=""></span>
</div>
<!-- Gallery grid -->
<div class="p-4 sm:p-6">
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-4">
<div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5c52ee42-39d5-4d73-b598-ce2d2b1f84ef_800w.webp" alt="Project preview 1" class="w-full h-full object-cover opacity-90 reveal-on-scroll" style="">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50" style=""></div>
</div>
<div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/13c122c9-264a-437b-b95b-20078f58735d_800w.webp" alt="Project preview 2" class="w-full h-full object-cover opacity-90 reveal-on-scroll" style="">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50" style=""></div>
</div>
<div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900 md:row-span-2" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4affdc79-17b4-44eb-bcc9-3e1e2650e990_320w.webp" alt="Project preview 3" class="w-full h-full object-cover opacity-90 reveal-on-scroll">
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent"></div>
</div>
<div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/aa8e0fcf-3133-4373-8637-ce68023544b2_800w.webp" alt="Project preview 4" class="w-full h-full object-cover opacity-90 reveal-on-scroll">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50" style=""></div>
</div>
<div class="relative overflow-hidden rounded-xl border border-white/10 bg-neutral-900" style="">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/abf395c7-651f-4952-b993-9076c16cbb7a_800w.webp" alt="Project preview 5" class="w-full h-full object-cover opacity-90 reveal-on-scroll">
<div class="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black/50" style=""></div>
</div>
</div>
</div>
<!-- Soft glow -->
<div class="pointer-events-none absolute -right-24 bottom-0 w-72 h-72 rounded-full bg-white/10 blur-3xl" style=""></div>
<div class="pointer-events-none absolute -left-24 -top-24 w-80 h-80 rounded-full bg-white/5 blur-3xl" style=""></div>
</div>
<!-- MacBook Pro Base -->
<div class="relative h-4 bg-gradient-to-b from-neutral-800 to-neutral-900 rounded-b-xl border-t border-white/5" style="">
<div class="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/10 </div> <!-- MacBook Pro Hinge --> <div class=" relative="" -mt-1="" h-2="" bg-neutral-900="" rounded-b-md="" border-t="" border-white="" 5="" mx-auto="" w-[95%]"="">
<div class="absolute inset-0 bg-gradient-to-b from-neutral-700/30 to-transparent rounded-b-md" style=""></div>
</div>
</div></div>
</div>
</div>
</div>
</section><footer class="overflow-hidden z-10 bg-[radial-gradient(circle_at_top,var(--tw-gradient-stops))] from-white/5 to-white/0 border-white/5 border-t mt-20 pt-32 pb-12 relative">
<!-- Ambient Glow -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[400px] blur-[120px] rounded-full pointer-events-none -z-10 bg-amber-500/5" style=""></div>
<!-- CTA Section -->
<div class="max-w-4xl mx-auto text-center px-6 mb-32">
<h2 class="text-4xl md:text-5xl font-semibold tracking-tighter text-white mb-6 reveal-on-scroll" style="">
Ready to streamline your workflow?
</h2>
<p class="text-lg text-gray-400 mb-10 max-w-xl mx-auto leading-relaxed reveal-on-scroll" style="">
Join high-performance engineering teams using Nexus to orchestrate their product development from idea to shipping.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<button class="h-10 px-6 rounded-full bg-white text-black text-sm font-medium hover:bg-gray-200 transition-colors shadow-[0_0_20px_rgba(255,255,255,0.2)] reveal-on-scroll" style="">
Start building for free
</button>
<button class="h-10 px-6 rounded-full bg-white/5 border border-white/10 text-white text-sm font-medium hover:bg-white/10 transition-colors flex items-center gap-2 reveal-on-scroll" style="">
<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-gray-400" style=""><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>
Contact Sales
</button>
</div>
</div>
<!-- Footer Grid -->
<div class="grid grid-cols-2 md:grid-cols-12 max-w-[1300px] mr-auto mb-20 ml-auto pr-6 pl-6 gap-x-8 gap-y-12">
<!-- Logo Column -->
<div class="col-span-2 md:col-span-4 pr-8">
<div class="flex hover:text-gray-200 transition-colors cursor-pointer text-white gap-x-0 gap-y-2 items-center">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:infinity-bold-duotone" class="iconify iconify--solar w-[24px] h-[24px]" stroke-width="2" data-icon-replaced="true" style="width: 24px; height: 24px; color: rgb(229, 231, 235);"><path fill="currentColor" fill-rule="evenodd" d="M2.75 12a4.25 4.25 0 0 1 6.8-3.4a.75.75 0 1 0 .901-1.2A5.75 5.75 0 1 0 7 17.75c.784 0 1.464-.143 2.064-.435s1.079-.714 1.489-1.215c.66-.804 1.196-1.894 1.776-3.074l.339-.689a.755.755 0 0 0-.339-1.008a.745.745 0 0 0-1.003.337l-.366.743c-.584 1.183-1.027 2.082-1.567 2.74c-.307.375-.624.64-.986.817s-.81.284-1.407.284A4.25 4.25 0 0 1 2.75 12" clip-rule="evenodd" class=""></path><path fill="currentColor" d="M12.67 12.335a.755.755 0 0 0-.34-1.006a.746.746 0 0 0-.975.284q.162-.323.316-.639c.58-1.18 1.117-2.27 1.776-3.074c.41-.501.89-.923 1.49-1.215S16.217 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.596 0-1.045.107-1.406.284c-.363.176-.68.442-.987.816c-.54.66-.983 1.558-1.567 2.741q-.174.355-.369.744z" opacity=".5" class=""></path></svg>
<a href="#" class="inline-flex items-center justify-center bg-center w-[90px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/780df870-9467-414f-8443-d200333fcf3d_320w.png)] bg-cover rounded-full reveal-on-scroll"></a>
</div>
<p class="text-sm text-gray-500 mb-8 leading-relaxed max-w-xs reveal-on-scroll" style="">
The operating system for high-performance engineering teams. Designed to help you ship software with precision and speed.
</p>
<div class="flex items-center gap-4">
<a href="#" class="text-gray-500 hover:text-white transition-colors" style="">
<span class="sr-only">Twitter</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class=""><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" class=""></path></svg>
</a>
<a href="#" class="text-gray-500 hover:text-white transition-colors" style="">
<span class="sr-only">GitHub</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" class=""><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.3158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path></svg>
</a>
<a href="#" class="text-gray-500 hover:text-white transition-colors" style="">
<span class="sr-only">Discord</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"></path></svg>
</a>
</div>
</div>
<!-- Links Columns -->
<div class="col-span-1 md:col-span-2">
<h4 class="font-medium text-white mb-4 text-sm" style="">Product</h4>
<ul class="space-y-3 text-sm">
<li class=""><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Features</a></li>
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Integrations</a></li>
</ul>
</div>
<div class="col-span-1 md:col-span-2">
<h4 class="font-medium text-white mb-4 text-sm" style="">Company</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">About</a></li>
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Careers</a></li>
</ul>
</div>
<div class="col-span-1 md:col-span-2">
<h4 class="font-medium text-white mb-4 text-sm" style="">Resources</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Community</a></li>
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Help Center</a></li>
</ul>
</div>
<div class="col-span-1 md:col-span-2">
<h4 class="font-medium text-white mb-4 text-sm" style="">Legal</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Privacy Policy</a></li>
<li><a href="#" class="text-gray-500 hover:text-white transition-colors" style="">Terms of Service</a></li>
</ul>
</div>
</div>
<!-- Bottom Bar -->
<div class="max-w-[1300px] mx-auto px-6 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4" style="">
<div class="text-xs text-gray-600" style="">
© 2024 Nexus Inc. All rights reserved.
</div>
<div class="flex items-center gap-2">
<div class="relative flex items-center justify-center w-2 h-2">
<span class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 bg-yellow-400" style=""></span>
<span class="relative inline-flex rounded-full h-1.5 w-1.5 bg-yellow-500" style=""></span>
</div>
<span class="text-xs font-medium text-gray-400" style="">All systems operational</span>
</div>
</div>
</footer>
<!-- Gradient Overlay at bottom -->
<div class="absolute bottom-0 left-0 w-full h-40 fade-overlay pointer-events-none z-20"></div>
</main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
// Sort entries by vertical position to ensure top-to-bottom staggered animation
const intersecting = entries
.filter(e => e.isIntersecting)
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
intersecting.forEach((entry, index) => {
const target = entry.target;
if (target.classList.contains('is-visible')) return;
// Incremental delay for staggered effect (100ms per element)
setTimeout(() => {
target.classList.add('is-visible');
}, index * 100);
observer.unobserve(target);
});
}, { threshold: 0.05, rootMargin: '0px 0px -50px 0px' });
// Target structural elements for animation
const elements = document.querySelectorAll('h1, h2, h3, p, button, a.inline-flex, .group, img, .hero-perspective, section a');
elements.forEach(el => {
// Exclude elements inside complex 3D transforms to prevent conflicts
if (!el.closest('.hero-rotate')) {
el.classList.add('reveal-on-scroll');
observer.observe(el);
}
});
});
</script></body></html>