Загрузка...
HTML/CSS шаблон лендинга для крипто-биржи. Адаптивный дизайн, современный стиль. Идеально для стартапов, желающих привлечь пользователей на платформу.
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slash - Future of Trading</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<script src="https://d3js.org/d3.v7.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@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap" rel="stylesheet">
<style>
:root {
--font-serif: 'Newsreader', serif;
--font-sans: 'Inter', sans-serif;
}
body {
font-family: var(--font-sans);
background-color: #020205;
color: white;
overflow-x: hidden;
}
.font-newsreader {
font-family: var(--font-serif);
}
/* Custom Animations */
@keyframes enter {
0% { opacity: 0; transform: translateY(20px) scale(0.98); filter: blur(4px); }
100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes dash {
to { stroke-dashoffset: 0; }
}
@keyframes beam-spin { to { transform: rotate(360deg); } }
@keyframes dots-move {
0% { background-position: 0 0; }
100% { background-position: 24px 24px; }
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-in {
animation: enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-scroll {
animation: scroll 60s linear infinite;
}
.animate-scroll:hover {
animation-play-state: paused;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
/* Grid Lines */
.grid-lines {
position: absolute;
inset: 0;
max-width: 80rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 0;
padding: 0 1.5rem;
}
.grid-line {
width: 1px;
height: 100%;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.05) 10%, rgba(255,255,255,0.05) 90%, transparent);
}
/* Spotlight Card Effect */
.spotlight-group {
display: grid;
gap: 1.5rem;
position: relative;
}
.spotlight-card {
position: relative;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.spotlight-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
z-index: 1;
}
.spotlight-card:hover::before {
opacity: 1;
}
.spotlight-border {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(168, 85, 247, 0.4), transparent 40%);
opacity: 0;
transition: opacity 0.5s;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
border-radius: inherit;
}
.spotlight-card:hover .spotlight-border {
opacity: 1;
}
/* Navbar Button Border Beam */
.btn-beam {
position: absolute;
inset: -1px;
border-radius: 9999px;
pointer-events: none;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 1px;
}
.btn-beam::before {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: conic-gradient(from 0deg, transparent 0deg, transparent 80deg, #a855f7 100deg, transparent 180deg);
animation: rotate 3s linear infinite;
opacity: 0;
transition: opacity 0.3s;
}
.group:hover .btn-beam::before {
opacity: 1;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Noodles */
.noodle-line {
stroke-dasharray: 10, 10;
animation: dash 30s linear infinite backwards;
}
.noodle-beam {
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: dash 4s linear infinite;
}
/* D3 Chart */
#chart-container svg {
overflow: visible;
}
.chart-path {
fill: url(#chart-gradient);
stroke: #a855f7;
stroke-width: 2;
}
.chart-area {
fill: url(#area-gradient);
}
/* Mask for Testimonials */
.mask-edges {
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">.font-geist { font-family: 'Geist', sans-serif !important; }</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">.font-roboto { font-family: 'Roboto', sans-serif !important; }</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">.font-montserrat { font-family: 'Montserrat', sans-serif !important; }</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">.font-poppins { font-family: 'Poppins', sans-serif !important; }</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">.font-playfair { font-family: 'Playfair Display', serif !important; }</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">.font-merriweather { font-family: 'Merriweather', serif !important; }</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">.font-manrope { font-family: 'Manrope', sans-serif !important; }</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">.font-work-sans { font-family: 'Work Sans', sans-serif !important; }</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">.font-pt-serif { font-family: 'PT Serif', serif !important; }</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">.font-geist-mono { font-family: 'Geist Mono', monospace !important; }</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">.font-space-mono { font-family: 'Space Mono', monospace !important; }</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">.font-quicksand { font-family: 'Quicksand', sans-serif !important; }</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">.font-nunito { font-family: 'Nunito', sans-serif !important; }</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style> <style>
/* 3D Transform utilities */
</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></head>
<body class="antialiased selection:bg-purple-500/30">
<!-- Background (component) added by Aura -->
<div class="aura-background-component fixed top-0 w-full h-screen -z-10" data-alpha-mask="80" style="; mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent)"><div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div data-us-project="8dH3WnYdxsenOolYGHB0" 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>
<!-- Vertical Grid Lines -->
<div class="grid-lines animate-in duration-1000">
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
<div class="grid-line"></div>
</div>
<!-- Mobile Menu Overlay -->
<div id="mobile-menu" class="fixed inset-0 z-[60] bg-[#020205]/90 backdrop-blur-xl hidden opacity-0 transition-opacity duration-300 flex-col items-center justify-center space-y-8">
<button id="close-menu" class="absolute top-6 right-6 text-white/60 hover:text-white">
<iconify-icon icon="solar:close-circle-linear" width="32" height="32"></iconify-icon>
</button>
<a href="#" class="text-2xl font-newsreader italic text-white hover:text-purple-400 transition-colors">Platform</a>
<a href="#" class="text-2xl font-newsreader italic text-white hover:text-purple-400 transition-colors">Markets</a>
<a href="#" class="text-2xl font-newsreader italic text-white hover:text-purple-400 transition-colors">Developers</a>
<a href="#" class="text-2xl font-newsreader italic text-white hover:text-purple-400 transition-colors">Company</a>
<a href="#" class="text-2xl font-newsreader italic text-white hover:text-purple-400 transition-colors">Login</a>
</div>
<!-- Navbar -->
<nav class="fixed top-0 left-0 right-0 z-50 border-b border-white/[0.06] bg-[#020205]/60 backdrop-blur-md animate-in">
<div class="flex h-20 max-w-7xl mr-auto ml-auto pr-6 pl-6 items-center justify-between">
<div class="flex group cursor-pointer gap-x-2 gap-y-2 items-center" onclick="window.location.href='/home'" role="button">
<span class="text-lg font-semibold italic text-white/90 tracking-tight font-newsreader">Slash</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="/platform" class="hover:text-white transition-colors text-xs font-medium text-white/60">Platform</a>
<a href="/customers" class="hover:text-white transition-colors text-xs font-medium text-white/60">Customers</a>
<a href="/documentation" class="hover:text-white transition-colors text-xs font-medium text-white/60">Documentation</a>
<a href="/pricing" class="hover:text-white transition-colors text-xs font-medium text-white/60">Pricing</a>
</div>
<div class="flex gap-4 gap-x-4 gap-y-4 items-center">
<a href="/login" class="hidden md:block hover:text-white transition-colors text-xs font-medium text-white/60">Log in</a>
<button class="hidden md:block group hover:bg-white/10 transition-all text-xs font-medium text-white bg-white/5 border-white/10 border rounded-full pt-2 pr-4 pb-2 pl-4 relative" onclick="window.location.href='/login'" role="button">
<span class="z-10 relative">Get Started</span>
<div class="btn-beam"></div>
</button>
<!-- Hamburger Button -->
<button id="open-menu" class="md:hidden text-white/60 hover:text-white transition-colors">
<iconify-icon icon="solar:hamburger-menu-linear" width="24" height="24"></iconify-icon>
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="z-10 max-w-7xl mr-auto ml-auto pt-32 pr-6 pb-20 pl-6 relative">
<!-- SECTION 01: HERO -->
<div class="flex flex-col text-center mt-12 mb-32 relative items-center">
<div class="absolute left-0 top-0 text-white/20 text-[10px] font-mono tracking-widest animate-in delay-100">01 // START</div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-purple-500/20 bg-purple-500/5 mb-8 animate-in delay-100 hover:border-purple-500/40 transition-colors cursor-pointer">
<iconify-icon icon="solar:star-linear" class="text-purple-400 text-xs"></iconify-icon>
<span class="text-[10px] font-medium text-purple-200 tracking-wide uppercase">New Features Available</span>
</div>
<h1 class="text-5xl md:text-7xl font-newsreader font-medium italic text-white mb-6 leading-[1.1] animate-in delay-200 max-w-4xl tracking-tight">
Trading infrastructure <br>
<span class="not-italic text-transparent bg-clip-text bg-gradient-to-r from-purple-300 via-white to-indigo-300">for the decentralized era</span>
</h1>
<p class="text-lg text-slate-400 font-light max-w-xl mx-auto mb-10 leading-relaxed animate-in delay-300">
Institutional-grade security with the freedom of DeFi. Swap, earn, and build on the most advanced protocol.
</p>
<div class="flex flex-col sm:flex-row gap-6 animate-in delay-400 gap-x-6 gap-y-6 items-center justify-center">
<!-- Main CTA -->
<button class="group flex overflow-hidden uppercase transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_0_40px_-10px_rgba(168,85,247,0.5)] focus:outline-none text-xs font-semibold text-white tracking-widest rounded-full pt-4 pr-8 pb-4 pl-8 relative items-center justify-center" onclick="window.location.href='/login'" role="button">
<div class="absolute inset-0 -z-20 rounded-full overflow-hidden p-[1px]">
<div class="absolute inset-[-100%] bg-[conic-gradient(from_0deg,transparent_0_300deg,#a855f7_360deg)]" style="animation: beam-spin 3s linear infinite;"></div>
<div class="absolute inset-[1px] rounded-full bg-[#020205]"></div>
</div>
<div class="-z-10 overflow-hidden bg-[#020205] rounded-full absolute top-[2px] right-[2px] bottom-[2px] left-[2px]">
<div class="absolute inset-0 bg-gradient-to-b from-zinc-800/60 to-transparent"></div>
<div class="opacity-30 mix-blend-overlay absolute top-0 right-0 bottom-0 left-0" style="background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px); background-size: 12px 12px; animation: dots-move 8s linear infinite"></div>
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-2/3 h-1/2 bg-purple-500/10 blur-2xl rounded-full pointer-events-none transition-colors duration-500 group-hover:bg-purple-500/30"></div>
</div>
<span class="relative z-10 text-white/90 transition-colors group-hover:text-white">Create Account</span>
<iconify-icon icon="solar:arrow-right-linear" class="relative z-10 ml-2 text-base transition-transform duration-300 group-hover:translate-x-1"></iconify-icon>
</button>
<!-- Secondary CTA -->
<button class="group inline-flex overflow-hidden transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_0_25px_rgba(255,255,255,0.1)] cursor-pointer rounded-full pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative items-center justify-center" onclick="window.location.href='/login';window.location.href='/documentation'" role="button">
<span class="absolute inset-[-100%] animate-[spin_3s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,transparent_0%,transparent_75%,#ffffff_100%)] opacity-0 transition-opacity duration-300 group-hover:opacity-100"></span>
<span class="absolute inset-0 rounded-full bg-white/10 transition-opacity duration-300 group-hover:opacity-0"></span>
<span class="flex items-center justify-center gap-2 uppercase transition-colors duration-300 group-hover:text-white text-xs font-semibold text-slate-400 tracking-widest bg-[#020205] w-full h-full rounded-full pt-3.5 pr-8 pb-3.5 pl-8 relative shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]">
<span class="relative z-10">Documentation</span>
</span>
</button>
</div>
</div>
<!-- SECTION 02: INTERFACE -->
<div class="relative w-full mb-32">
<div class="absolute right-0 -top-10 text-white/20 text-[10px] font-mono tracking-widest animate-in delay-300">02 // INTERFACE</div>
<!-- Connecting Noodles Background -->
<svg class="absolute inset-0 w-full h-full -z-10 pointer-events-none overflow-visible opacity-40" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="beam-grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="rgba(168, 85, 247, 0)"></stop>
<stop offset="50%" stop-color="#a855f7"></stop>
<stop offset="100%" stop-color="rgba(168, 85, 247, 0)"></stop>
</linearGradient>
</defs>
<path d="M 100 0 V 100 Q 100 150 150 150 H 300" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="noodle-line"></path>
<path d="M 800 0 V 80 Q 800 130 750 130 H 600" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1" class="noodle-line"></path>
<!-- Animated Beams -->
<path d="M 100 0 V 100 Q 100 150 150 150 H 300" fill="none" stroke="url(#beam-grad)" stroke-width="2" class="noodle-beam" stroke-linecap="round"></path>
</svg>
<!-- Spotlight Cards Container -->
<div class="spotlight-group grid-cols-1 md:grid-cols-3 animate-in delay-500">
<!-- Card 1: Market List -->
<div class="spotlight-card rounded-xl p-6 flex flex-col justify-between h-[320px] group" style="--mouse-x: 639px; --mouse-y: -576.5px;">
<div class="spotlight-border"></div>
<div class="relative z-10 h-full flex flex-col">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-2 text-slate-400">
<iconify-icon icon="solar:chart-2-linear" class="text-lg"></iconify-icon>
<span class="text-xs font-semibold uppercase tracking-wider">Markets</span>
</div>
<iconify-icon icon="solar:menu-dots-linear" class="text-slate-500 cursor-pointer hover:text-white transition-colors"></iconify-icon>
</div>
<div class="space-y-4 flex-1">
<div class="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<iconify-icon icon="simple-icons:bitcoin" class="text-[#F7931A] text-xl"></iconify-icon>
<div class="">
<div class="text-xs font-medium text-white">Bitcoin</div>
<div class="text-[10px] text-slate-500">BTC</div>
</div>
</div>
<div class="text-right">
<div class="text-xs font-medium text-white">$43,290.00</div>
<div class="text-[10px] text-emerald-400">+2.4%</div>
</div>
</div>
<div class="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<iconify-icon icon="simple-icons:ethereum" class="text-[#627EEA] text-xl"></iconify-icon>
<div class="">
<div class="text-xs font-medium text-white">Ethereum</div>
<div class="text-[10px] text-slate-500">ETH</div>
</div>
</div>
<div class="text-right">
<div class="text-xs font-medium text-white">$2,290.50</div>
<div class="text-[10px] text-rose-400">-0.8%</div>
</div>
</div>
<div class="flex items-center justify-between p-2 rounded-lg hover:bg-white/5 transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<iconify-icon icon="simple-icons:solana" class="text-[#14F195] text-xl"></iconify-icon>
<div class="">
<div class="text-xs font-medium text-white">Solana</div>
<div class="text-[10px] text-slate-500">SOL</div>
</div>
</div>
<div class="text-right">
<div class="text-xs font-medium text-white">$108.40</div>
<div class="text-[10px] text-emerald-400">+5.2%</div>
</div>
</div>
</div>
</div>
</div>
<!-- Card 2: D3 Chart -->
<div class="spotlight-card rounded-xl p-6 h-[320px] md:col-span-1" style="--mouse-x: 289.671875px; --mouse-y: -576.5px;">
<div class="spotlight-border"></div>
<div class="relative z-10 h-full flex flex-col">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400 font-semibold uppercase tracking-wider">Portfolio Performance</span>
</div>
<div class="mb-6">
<div class="text-3xl font-newsreader font-medium italic text-white tracking-tight">$124,592.80</div>
<div class="text-xs text-emerald-400 flex items-center gap-1 mt-1 font-mono">
<iconify-icon icon="solar:graph-up-linear" class=""></iconify-icon>
<span class="">+$12,402 (12.4%)</span>
</div>
</div>
<!-- D3 Chart Container -->
<div id="chart-container" class="flex-1 relative w-full h-full opacity-90"><svg width="100%" height="100%" viewBox="0 0 275 166" preserveAspectRatio="none"><defs><linearGradient id="area-gradient" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#a855f7" stop-opacity="0.3"></stop><stop offset="100%" stop-color="#a855f7" stop-opacity="0"></stop></linearGradient></defs><path class="chart-area" d="M0,96.833C9.167,93.375,18.333,89.917,27.5,89.917C36.667,89.917,45.833,103.75,55,103.75C64.167,103.75,73.333,83,82.5,83C91.667,83,100.833,85.767,110,85.767C119.167,85.767,128.333,69.167,137.5,69.167C146.667,69.167,155.833,76.083,165,76.083C174.167,76.083,183.333,55.333,192.5,55.333C201.667,55.333,210.833,62.25,220,62.25C229.167,62.25,238.333,39.194,247.5,34.583C256.667,29.972,265.833,28.819,275,27.667L275,166C265.833,166,256.667,166,247.5,166C238.333,166,229.167,166,220,166C210.833,166,201.667,166,192.5,166C183.333,166,174.167,166,165,166C155.833,166,146.667,166,137.5,166C128.333,166,119.167,166,110,166C100.833,166,91.667,166,82.5,166C73.333,166,64.167,166,55,166C45.833,166,36.667,166,27.5,166C18.333,166,9.167,166,0,166Z"></path><path class="chart-path" fill="none" d="M0,96.833C9.167,93.375,18.333,89.917,27.5,89.917C36.667,89.917,45.833,103.75,55,103.75C64.167,103.75,73.333,83,82.5,83C91.667,83,100.833,85.767,110,85.767C119.167,85.767,128.333,69.167,137.5,69.167C146.667,69.167,155.833,76.083,165,76.083C174.167,76.083,183.333,55.333,192.5,55.333C201.667,55.333,210.833,62.25,220,62.25C229.167,62.25,238.333,39.194,247.5,34.583C256.667,29.972,265.833,28.819,275,27.667" stroke-dasharray="316.3328552246094 316.3328552246094" stroke-dashoffset="0"></path></svg></div>
</div>
</div>
<!-- Card 3: Swap -->
<div class="spotlight-card rounded-xl p-6 h-[320px]" style="--mouse-x: -59.6640625px; --mouse-y: -576.5px;">
<div class="spotlight-border"></div>
<div class="relative z-10 h-full flex flex-col">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-2 text-slate-400">
<iconify-icon icon="solar:refresh-circle-linear" class="text-lg"></iconify-icon>
<span class="text-xs font-semibold uppercase tracking-wider">Quick Swap</span>
</div>
<iconify-icon icon="solar:settings-linear" class="text-slate-500 cursor-pointer hover:text-white transition-colors"></iconify-icon>
</div>
<div class="space-y-2">
<div class="bg-black/40 border border-white/10 rounded-lg p-3 hover:border-white/20 transition-colors">
<div class="flex justify-between text-[10px] text-slate-500 mb-1">
<span>From</span>
<span>Bal: 2.4 ETH</span>
</div>
<div class="flex justify-between items-center">
<input type="text" value="1.5" class="bg-transparent text-white text-lg font-mono outline-none w-20" readonly="">
<div class="flex items-center gap-2 bg-white/5 px-2 py-1 rounded border border-white/5">
<iconify-icon icon="simple-icons:ethereum" class="text-[#627EEA]"></iconify-icon>
<span class="text-xs font-medium">ETH</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-[10px]"></iconify-icon>
</div>
</div>
</div>
<div class="flex justify-center -my-3 relative z-20">
<button class="w-8 h-8 rounded-lg bg-[#1a1a1e] border border-white/10 flex items-center justify-center hover:border-purple-500/50 hover:text-purple-400 transition-all">
<iconify-icon icon="solar:sort-vertical-linear" class="text-white text-sm"></iconify-icon>
</button>
</div>
<div class="bg-black/40 border border-white/10 rounded-lg p-3 hover:border-white/20 transition-colors">
<div class="flex justify-between text-[10px] text-slate-500 mb-1">
<span class="">To (Estimate)</span>
</div>
<div class="flex justify-between items-center">
<input type="text" value="4,290.50" class="bg-transparent text-white text-lg font-mono outline-none w-24" readonly="">
<div class="flex items-center gap-2 bg-white/5 px-2 py-1 rounded border border-white/5">
<iconify-icon icon="simple-icons:tether" class="text-[#50AF95]"></iconify-icon>
<span class="text-xs font-medium">USDT</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-[10px]"></iconify-icon>
</div>
</div>
</div>
</div>
<button class="hover:bg-slate-200 transition-colors shadow-white/5 text-xs font-bold text-black bg-white w-full rounded-lg mt-1 py-3 shadow-lg">
Review Order
</button>
</div>
</div>
</div>
</div>
<!-- SECTION 03: TESTIMONIALS (Previously Partners) -->
<div class="border-white/5 border-t pt-16 relative">
<div class="text-[10px] animate-in delay-500 text-white/20 tracking-widest font-mono absolute top-8 left-0">03 // COMMUNITY</div>
<p class="text-center text-xs text-slate-500 font-semibold mb-12 animate-in delay-500 uppercase tracking-wide">Trusted by traders worldwide</p>
<div class="relative w-full overflow-hidden mask-edges animate-in delay-700">
<div class="flex w-max gap-6 animate-scroll hover:pause">
<!-- Cards Batch 1 -->
<div class="flex gap-6">
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"The execution speed on Slash is unmatched. I've switched all my high-frequency strategies here."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=60" alt="Jason Davis" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div class="">
<div class="text-xs font-medium text-white">Jason Davis</div>
<div class="text-[10px] text-slate-500">@jasond_eth</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"Finally, a dashboard that feels like a professional terminal but lives in the browser. Absolute game changer."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&auto=format&fit=crop&q=60" alt="Mei Kuan" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div class="">
<div class="text-xs font-medium text-white">Mei Kuan</div>
<div class="text-[10px] text-slate-500">@meik_defi</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"Low fees and deep liquidity. The analytics tools provided out of the box are worth the switch alone."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&auto=format&fit=crop&q=60" alt="Alex Rivera" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">Alex Rivera</div>
<div class="text-[10px] text-slate-500">@arivera_cap</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"Security is my #1 priority. Slash's non-custodial approach coupled with their UX is exactly what I needed."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&auto=format&fit=crop&q=60" alt="Sarah Lee" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">Sarah Lee</div>
<div class="text-[10px] text-slate-500">@sarahscale</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"The API documentation is flawless. Integrating our bot took less than an hour. Highly recommended."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&auto=format&fit=crop&q=60" alt="David Torres" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">David Torres</div>
<div class="text-[10px] text-slate-500">@dt_algo</div>
</div>
</div>
</div>
</div>
<!-- Cards Batch 2 (Duplicate for Loop) -->
<div class="flex gap-6">
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"The execution speed on Slash is unmatched. I've switched all my high-frequency strategies here."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=60" alt="Jason Davis" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">Jason Davis</div>
<div class="text-[10px] text-slate-500">@jasond_eth</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"Finally, a dashboard that feels like a professional terminal but lives in the browser. Absolute game changer."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&auto=format&fit=crop&q=60" alt="Mei Kuan" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">Mei Kuan</div>
<div class="text-[10px] text-slate-500">@meik_defi</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"Low fees and deep liquidity. The analytics tools provided out of the box are worth the switch alone."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&auto=format&fit=crop&q=60" alt="Alex Rivera" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">Alex Rivera</div>
<div class="text-[10px] text-slate-500">@arivera_cap</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"Security is my #1 priority. Slash's non-custodial approach coupled with their UX is exactly what I needed."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&auto=format&fit=crop&q=60" alt="Sarah Lee" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">Sarah Lee</div>
<div class="text-[10px] text-slate-500">@sarahscale</div>
</div>
</div>
</div>
<div class="w-[320px] bg-white/5 backdrop-blur-md border border-white/10 p-5 rounded-xl flex flex-col gap-4">
<p class="text-sm text-slate-300 font-light leading-relaxed">"The API documentation is flawless. Integrating our bot took less than an hour. Highly recommended."</p>
<div class="flex items-center gap-3">
<img src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=100&auto=format&fit=crop&q=60" alt="David Torres" class="w-8 h-8 rounded-full object-cover border border-white/10">
<div>
<div class="text-xs font-medium text-white">David Torres</div>
<div class="text-[10px] text-slate-500">@dt_algo</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><div class="border-white/5 border-t pt-24 pb-32 relative z-10 w-full max-w-7xl mx-auto">
<!-- Section Indicator -->
<div class="text-[10px] animate-in delay-200 lg:left-0 lg:top-16 md:top-16 text-white/20 tracking-widest font-mono absolute top-16 left-6">04 // TECHNOLOGY</div>
<!-- Vertical Grid Lines for this section -->
<div class="absolute inset-y-0 left-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 right-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 left-1/2 w-px bg-white/5 hidden lg:block -translate-x-1/2"></div>
<div class="flex flex-col items-center text-center mb-20 px-6 animate-in delay-300">
<h2 class="text-4xl md:text-5xl font-newsreader font-medium italic text-white mb-6 tracking-tight">
Institutional-grade execution
<span class="not-italic text-transparent bg-clip-text bg-gradient-to-r from-purple-300 via-white to-indigo-300">powered by automated intelligence.</span>
</h2>
<p class="text-lg text-slate-400 font-light max-w-xl mx-auto leading-relaxed">
Our Smart Router splits your order across multiple liquidity sources to ensure the best price with zero slippage.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 gap-x-8 gap-y-8">
<!-- Card 1: Multi-hop Routing (Visual based on "Automated Tagging" nodes) -->
<div class="group relative rounded-2xl bg-white/[0.02] border border-white/10 overflow-hidden h-[480px] hover:border-white/20 transition-all duration-500">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="p-8 relative z-10 h-full flex flex-col">
<div class="mb-8">
<h3 class="text-2xl font-newsreader font-medium italic text-white mb-2">Smart Liquidity Routing</h3>
<p class="text-sm text-slate-400 font-light">We automatically split trades across the most liquid pools.</p>
</div>
<!-- Visualization -->
<div class="flex-1 relative flex items-center justify-center w-full perspective-[1000px]">
<!-- Background Grid for depth -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:40px_40px] [transform:rotateX(60deg)_translateZ(-50px)] opacity-50 mask-edges"></div>
<!-- Connection Lines -->
<svg class="absolute inset-0 w-full h-full pointer-events-none z-0">
<path d="M 50 150 C 150 150 150 80 250 80" fill="none" stroke="rgba(168, 85, 247, 0.2)" stroke-width="1" stroke-dasharray="4 4" class="group-hover:stroke-purple-500/50 transition-colors"></path>
<path d="M 50 150 C 150 150 150 220 250 220" fill="none" stroke="rgba(168, 85, 247, 0.2)" stroke-width="1" stroke-dasharray="4 4" class="group-hover:stroke-purple-500/50 transition-colors"></path>
<path d="M 250 80 C 350 80 350 150 450 150" fill="none" stroke="rgba(168, 85, 247, 0.2)" stroke-width="1" stroke-dasharray="4 4" class="group-hover:stroke-purple-500/50 transition-colors"></path>
<path d="M 250 220 C 350 220 350 150 450 150" fill="none" stroke="rgba(168, 85, 247, 0.2)" stroke-width="1" stroke-dasharray="4 4" class="group-hover:stroke-purple-500/50 transition-colors"></path>
<!-- Animated flow dots -->
<circle r="2" fill="#a855f7">
<animateMotion dur="3s" repeatCount="indefinite" path="M 50 150 C 150 150 150 80 250 80"></animateMotion>
</circle>
<circle r="2" fill="#a855f7">
<animateMotion dur="3s" repeatCount="indefinite" begin="1.5s" path="M 250 80 C 350 80 350 150 450 150"></animateMotion>
</circle>
</svg>
<!-- Nodes -->
<div class="absolute left-4 top-1/2 -translate-y-1/2 z-10">
<div class="bg-black/60 backdrop-blur-md border border-white/20 text-white text-xs py-2 px-4 rounded-full shadow-[0_0_15px_rgba(255,255,255,0.1)] flex items-center gap-2">
<div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
Input Order
</div>
</div>
<!-- Middle Layer - Protocol Icons -->
<div class="absolute left-1/2 -translate-x-1/2 top-[20%] z-10 animate-in delay-500 duration-1000 slide-in-from-bottom-4">
<div class="bg-[#0f0f13] border border-white/10 py-2 px-4 rounded-full flex items-center gap-2 shadow-lg hover:border-purple-500/50 hover:shadow-purple-500/20 transition-all cursor-default">
<iconify-icon icon="simple-icons:uniswap" class="text-[#FF007A] text-lg"></iconify-icon>
<span class="text-xs font-medium text-slate-300">Uniswap V3</span>
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 top-[40%] z-10 animate-in delay-600 duration-1000 slide-in-from-bottom-4">
<div class="bg-[#0f0f13] border border-white/10 py-2 px-4 rounded-full flex items-center gap-2 shadow-lg hover:border-purple-500/50 hover:shadow-purple-500/20 transition-all cursor-default">
<iconify-icon icon="simple-icons:curve" class="text-white text-lg"></iconify-icon>
<span class="text-xs font-medium text-slate-300">Curve</span>
</div>
</div>
<div class="absolute left-1/2 -translate-x-1/2 top-[60%] z-10 animate-in delay-700 duration-1000 slide-in-from-bottom-4">
<div class="bg-[#0f0f13] border border-white/10 py-2 px-4 rounded-full flex items-center gap-2 shadow-lg hover:border-purple-500/50 hover:shadow-purple-500/20 transition-all cursor-default">
<iconify-icon icon="simple-icons:balancer" class="text-white text-lg"></iconify-icon>
<span class="text-xs font-medium text-slate-300">Balancer</span>
</div>
</div>
<div class="absolute right-4 top-1/2 -translate-y-1/2 z-10">
<div class="bg-purple-900/20 backdrop-blur-md border border-purple-500/30 text-purple-200 text-xs py-2 px-4 rounded-full shadow-[0_0_15px_rgba(168,85,247,0.2)] flex items-center gap-2">
<iconify-icon icon="solar:check-circle-bold" class="text-purple-400"></iconify-icon>
Best Execution
</div>
</div>
</div>
<div class="mt-4 flex items-center gap-4 text-[10px] text-slate-500 font-mono uppercase tracking-wider">
<div class="flex items-center gap-1">
<div class="w-1.5 h-1.5 rounded-full bg-purple-500"></div>
<span class="">Protocol Routing</span>
</div>
<div class="flex items-center gap-1">
<div class="w-1.5 h-1.5 rounded-full bg-slate-600"></div>
<span class="">Gas Optimization</span>
</div>
</div>
</div>
</div>
<!-- Card 2: Strategy Builder (Visual based on "Your tags, your rules" UI) -->
<div class="group relative rounded-2xl bg-white/[0.02] border border-white/10 overflow-hidden h-[480px] hover:border-white/20 transition-all duration-500">
<div class="absolute inset-0 bg-gradient-to-bl from-indigo-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="p-8 relative z-10 h-full flex flex-col">
<div class="mb-8">
<h3 class="text-2xl font-newsreader font-medium italic text-white mb-2">Algorithmic Strategy Builder</h3>
<p class="text-sm text-slate-400 font-light">Define complex trading logic with our visual rule engine.</p>
</div>
<!-- Visualization -->
<div class="flex-1 w-full bg-[#050508] border border-white/10 rounded-xl p-4 shadow-2xl overflow-hidden relative group-hover:-translate-y-1 transition-transform duration-500">
<!-- Fake Window Header -->
<div class="flex items-center gap-2 mb-4 opacity-50">
<div class="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
<div class="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
<div class="w-2.5 h-2.5 rounded-full bg-slate-600"></div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 text-xs text-slate-500 font-medium px-1">
<iconify-icon icon="solar:settings-minimalistic-linear"></iconify-icon>
<span class="">Set Execution Rules</span>
<span class="bg-purple-500/20 text-purple-300 px-2 py-0.5 rounded text-[10px]">2 active</span>
</div>
<!-- Rule Row 1 -->
<div class="bg-white/5 border border-white/5 rounded-lg p-1 flex items-center gap-2">
<div class="px-3 py-1.5 text-xs text-slate-400 font-mono">Where</div>
<div class="flex-1 bg-black/40 rounded border border-white/10 px-3 py-1.5 text-xs text-white flex justify-between items-center group/input cursor-pointer hover:border-white/20 transition-colors">
<span>Token Price</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-slate-500"></iconify-icon>
</div>
<div class="w-16 bg-black/40 rounded border border-white/10 px-3 py-1.5 text-xs text-white flex justify-between items-center">
<span><</span>
</div>
<div class="w-24 bg-black/40 rounded border border-white/10 px-3 py-1.5 text-xs text-emerald-400 font-mono">
$1,850.00
</div>
<iconify-icon icon="solar:menu-dots-linear" class="text-slate-600 px-2"></iconify-icon>
</div>
<!-- Rule Row 2 -->
<div class="bg-white/5 border border-white/5 rounded-lg p-1 flex items-center gap-2">
<div class="px-3 py-1.5 text-xs text-slate-400 font-mono w-[54px] text-right">And</div>
<div class="flex-1 bg-black/40 rounded border border-white/10 px-3 py-1.5 text-xs text-white flex justify-between items-center group/input cursor-pointer hover:border-white/20 transition-colors">
<span>Gas Price</span>
<iconify-icon icon="solar:alt-arrow-down-linear" class="text-slate-500"></iconify-icon>
</div>
<div class="w-16 bg-black/40 rounded border border-white/10 px-3 py-1.5 text-xs text-white flex justify-between items-center">
<span class=""><</span>
</div>
<div class="w-24 bg-black/40 rounded border border-white/10 px-3 py-1.5 text-xs text-purple-300 font-mono">
25 gwei
</div>
<iconify-icon icon="solar:menu-dots-linear" class="text-slate-600 px-2"></iconify-icon>
</div>
<!-- Add Filter Button -->
<div class="mt-4 pt-2 border-t border-white/5">
<button class="flex items-center gap-2 text-xs text-slate-400 hover:text-white transition-colors px-2 py-1 rounded hover:bg-white/5 w-full">
<iconify-icon icon="solar:add-circle-linear" class="text-lg"></iconify-icon>
<span>Add Condition</span>
</button>
</div>
</div>
<!-- Decorative Glow -->
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-indigo-500/20 blur-[50px] pointer-events-none"></div>
</div>
</div>
</div>
</div>
</div><div class="border-white/5 border-t pt-24 pb-32 relative z-10 w-full max-w-7xl mx-auto">
<!-- Section Indicator -->
<div class="text-[10px] animate-in delay-200 lg:left-0 text-white/20 tracking-widest font-mono absolute top-16 left-6">05 // MOBILE</div>
<!-- Vertical Grid Lines for this section -->
<div class="absolute inset-y-0 left-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 right-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 left-1/2 w-px bg-white/5 hidden lg:block -translate-x-1/2"></div>
<!-- Header -->
<div class="flex flex-col animate-in delay-300 z-10 text-center mb-24 pr-6 pl-6 relative items-center">
<h2 class="text-4xl md:text-5xl font-newsreader font-medium italic text-white mb-6 tracking-tight">
Seamless synchronization
<span class="not-italic text-transparent bg-clip-text bg-gradient-to-r from-purple-300 via-white to-indigo-300">across every device.</span>
</h2>
<p class="text-lg text-slate-400 font-light max-w-xl mx-auto leading-relaxed">
Stay connected to the markets with our native mobile interface. Real-time updates, instant execution, and full portfolio management.
</p>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center px-6 relative z-10">
<!-- Left Column Annotations -->
<div class="lg:col-span-3 space-y-24 hidden lg:block text-right">
<div class="group relative">
<div class="text-[10px] font-mono text-purple-400 mb-2">01</div>
<h3 class="text-lg font-medium text-white mb-2">Smart Notifications</h3>
<p class="text-sm text-slate-400 leading-relaxed">Know when to enter — and when to exit. Custom alerts for price, gas, and volume.</p>
<!-- Connecting Line (Visual only) -->
<div class="absolute top-1/2 -right-12 w-8 h-px bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<div class="group relative">
<div class="text-[10px] font-mono text-purple-400 mb-2">02</div>
<h3 class="text-lg font-medium text-white mb-2">Portfolio Analytics</h3>
<p class="text-sm text-slate-400 leading-relaxed">See your trend lines over time — no clutter, just pure performance data.</p>
<div class="absolute top-1/2 -right-12 w-8 h-px bg-gradient-to-r from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
</div>
<!-- Center Phone Mockup -->
<div class="lg:col-span-6 flex perspective-[1000px] justify-center">
<div class="relative w-[320px] h-[640px] bg-black rounded-[3rem] shadow-[0_0_50px_-12px_rgba(168,85,247,0.25)] transform transition-transform duration-700 hover:rotate-x-2 hover:scale-[1.02] group/phone p-[4px]">
<!-- Animated Border Beam -->
<div class="absolute inset-0 rounded-[3rem] overflow-hidden pointer-events-none z-0">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200%] h-[200%] bg-[conic-gradient(from_0deg,transparent_0_320deg,#a855f7_360deg)] animate-[spin_4s_linear_infinite] opacity-0 group-hover/phone:opacity-100 transition-opacity duration-700"></div>
</div>
<!-- Inner Phone Bezel/Chassis -->
<div class="relative w-full h-full bg-[#020205] rounded-[2.8rem] overflow-hidden z-10 border-[6px] border-black">
<!-- Dynamic Island -->
<div class="absolute top-3 left-1/2 -translate-x-1/2 z-50">
<div class="relative h-[28px] bg-black rounded-full flex items-center justify-between px-3 min-w-[100px] group/island transition-all duration-300 hover:min-w-[140px] hover:scale-105 border border-white/5 shadow-lg overflow-hidden cursor-default">
<!-- Island Content -->
<div class="flex items-center gap-2 w-full justify-between">
<!-- Recording/Active Indicator -->
<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.8)] animate-pulse"></div>
<!-- Audio Waveform Simulation -->
<div class="flex gap-[2px] items-center h-2 w-4 justify-end opacity-60">
<div class="w-0.5 bg-white rounded-full animate-pulse h-full"></div>
<div class="w-0.5 bg-white rounded-full animate-pulse h-2/3 delay-75"></div>
<div class="w-0.5 bg-white rounded-full animate-pulse h-full delay-150"></div>
<div class="w-0.5 bg-white rounded-full animate-pulse h-1/2 delay-100"></div>
</div>
</div>
<!-- Expanded Interaction Hint (Visible on Hover) -->
<div class="absolute inset-0 bg-white/5 opacity-0 group-hover/island:opacity-100 transition-opacity pointer-events-none"></div>
</div>
</div>
<!-- Screen Content -->
<div class="w-full h-full bg-gradient-to-b from-slate-900 via-[#050508] to-black p-6 relative flex flex-col font-sans pt-12">
<!-- Status Bar -->
<div class="flex justify-between items-center text-[10px] text-white font-medium mb-6 mt-1 px-2 opacity-90">
<span>9:41</span>
<div class="flex gap-1">
<iconify-icon icon="solar:signal-linear"></iconify-icon>
<iconify-icon icon="solar:battery-full-linear"></iconify-icon>
</div>
</div>
<!-- App Header -->
<div class="flex justify-between items-start mb-8">
<div class="">
<div class="text-xs text-slate-400 mb-1 font-medium">Total Balance</div>
<div class="text-2xl font-newsreader italic text-white tracking-tight">$124,592.80</div>
</div>
<div class="w-8 h-8 rounded-full bg-gradient-to-tr from-purple-500 to-indigo-500 p-[1px]">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&auto=format&fit=crop&q=60" alt="Avatar" class="rounded-full w-full h-full object-cover border-2 border-black">
</div>
</div>
<!-- Cards Stack -->
<div class="space-y-4 flex-1">
<!-- Card 1 -->
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 hover:bg-white/10 transition-colors cursor-pointer group/card relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover/card:translate-x-full transition-transform duration-1000 pointer-events-none"></div>
<div class="flex justify-between items-center mb-3">
<span class="text-[10px] uppercase tracking-wider text-slate-400 font-semibold">Smart Suggestion</span>
<iconify-icon icon="solar:stars-minimalistic-linear" class="text-purple-400"></iconify-icon>
</div>
<div class="text-lg font-medium text-white mb-2">Buy 2.5 ETH</div>
<div class="w-full bg-white/10 rounded-full h-1 mb-2 overflow-hidden">
<div class="bg-purple-500 w-2/3 h-full rounded-full animate-[width_2s_ease-in-out]"></div>
</div>
<div class="text-[10px] text-slate-400 font-mono">Entry: $2,240.50 • Target: $2,400.00</div>
</div>
<!-- Card 2 -->
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 hover:bg-white/10 transition-colors cursor-pointer">
<div class="flex justify-between items-center mb-3">
<span class="text-[10px] uppercase tracking-wider text-slate-400 font-semibold">Weekly Load</span>
<span class="text-xs text-emerald-400 bg-emerald-400/10 px-1.5 py-0.5 rounded">+12%</span>
</div>
<div class="text-3xl font-newsreader italic text-white mb-1 tracking-tight">82% <span class="text-sm font-sans text-slate-500 not-italic">Capacity</span></div>
<div class="text-[10px] text-slate-400">Margin utilization is optimal.</div>
</div>
<!-- Card 3 -->
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-4 hover:bg-white/10 transition-colors cursor-pointer">
<div class="flex justify-between items-center mb-3">
<span class="text-[10px] uppercase tracking-wider text-slate-400 font-semibold">Net PnL</span>
<iconify-icon icon="solar:chart-square-linear" class="text-slate-400"></iconify-icon>
</div>
<div class="text-lg font-medium text-white mb-1">+$2,330.00</div>
<div class="text-[10px] text-slate-400">Daily realized profit.</div>
</div>
</div>
<!-- Bottom Nav -->
<div class="flex text-slate-500 border-white/5 border-t mb-4 pt-4 items-center justify-around">
<iconify-icon icon="solar:home-smile-linear" class="text-xl text-white"></iconify-icon>
<iconify-icon icon="solar:graph-new-linear" class="text-xl hover:text-white transition-colors"></iconify-icon>
<div class="w-10 h-10 rounded-full bg-purple-500/20 text-purple-400 flex items-center justify-center border border-purple-500/50 shadow-[0_0_15px_rgba(168,85,247,0.3)] hover:scale-110 transition-transform">
<iconify-icon icon="solar:transfer-horizontal-bold" class="text-lg"></iconify-icon>
</div>
<iconify-icon icon="solar:wallet-linear" class="text-xl hover:text-white transition-colors"></iconify-icon>
<iconify-icon icon="solar:settings-linear" class="text-xl hover:text-white transition-colors"></iconify-icon>
</div>
</div>
<!-- Screen Reflections -->
<div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-white/5 to-transparent pointer-events-none z-20"></div>
</div>
</div>
<!-- Glow behind phone -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[500px] bg-purple-500/20 blur-[100px] -z-10 pointer-events-none rounded-full mix-blend-screen opacity-50 group-hover/phone:opacity-80 transition-opacity duration-700"></div>
</div>
<!-- Right Column Annotations -->
<div class="lg:col-span-3 space-y-24 hidden lg:block">
<div class="group relative">
<div class="text-[10px] font-mono text-purple-400 mb-2">03</div>
<h3 class="text-lg font-medium text-white mb-2">Volume Tracking</h3>
<p class="text-sm text-slate-400 leading-relaxed">Monitor weekly volume across execution layers: Ethereum, Arbitrum, and Solana.</p>
<div class="absolute top-1/2 -left-12 w-8 h-px bg-gradient-to-l from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
<div class="group relative">
<div class="text-[10px] font-mono text-purple-400 mb-2">04</div>
<h3 class="text-lg font-medium text-white mb-2">Yield Optimization</h3>
<p class="text-sm text-slate-400 leading-relaxed">Fuel for performance. Automatically route idle assets to the highest yield venues.</p>
<div class="absolute top-1/2 -left-12 w-8 h-px bg-gradient-to-l from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
</div>
</div>
<!-- Mobile Annotations (Visible only on small screens) -->
<div class="lg:hidden col-span-1 grid grid-cols-1 sm:grid-cols-2 gap-8 mt-8">
<div class="border-l border-white/10 pl-4">
<div class="text-xs font-mono text-purple-400 mb-1">01</div>
<h3 class="text-white font-medium mb-1">Smart Notifications</h3>
<p class="text-xs text-slate-400">Custom alerts for price, gas, and volume.</p>
</div>
<div class="border-l border-white/10 pl-4">
<div class="text-xs font-mono text-purple-400 mb-1">02</div>
<h3 class="text-white font-medium mb-1">Portfolio Analytics</h3>
<p class="text-xs text-slate-400">Clean trend lines, no clutter.</p>
</div>
<div class="border-l border-white/10 pl-4">
<div class="text-xs font-mono text-purple-400 mb-1">03</div>
<h3 class="text-white font-medium mb-1">Volume Tracking</h3>
<p class="text-xs text-slate-400">Monitor volume across all chains.</p>
</div>
<div class="border-l border-white/10 pl-4">
<div class="text-xs font-mono text-purple-400 mb-1">04</div>
<h3 class="text-white font-medium mb-1">Yield Optimization</h3>
<p class="text-xs text-slate-400">Auto-route to high yield venues.</p>
</div>
</div>
</div>
<!-- Integrations Logos Strip -->
<div class="mt-32 border-t border-white/5 pt-16">
<p class="text-center text-[10px] uppercase tracking-widest text-slate-500 mb-10 font-semibold">Deep liquidity integration with</p>
<div class="flex flex-wrap justify-center items-center gap-12 md:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-700">
<div class="group flex items-center gap-3 hover:opacity-100 transition-opacity">
<iconify-icon icon="simple-icons:binance" width="24" height="24" class="text-[#F0B90B]"></iconify-icon>
<span class="text-lg font-bold tracking-tight text-white hidden md:block">BINANCE</span>
</div>
<div class="group flex items-center gap-3 hover:opacity-100 transition-opacity">
<iconify-icon icon="simple-icons:coinbase" width="24" height="24" class="text-[#0052FF]"></iconify-icon>
<span class="text-lg font-bold tracking-tight text-white hidden md:block">coinbase</span>
</div>
<div class="group flex items-center gap-3 hover:opacity-100 transition-opacity">
<iconify-icon icon="simple-icons:kraken" width="24" height="24" class="text-[#5741D9]"></iconify-icon>
<span class="text-lg font-bold tracking-tight text-white hidden md:block">Kraken</span>
</div>
<div class="group flex items-center gap-3 hover:opacity-100 transition-opacity">
<iconify-icon icon="simple-icons:bybit" width="24" height="24" class="text-white"></iconify-icon>
<span class="text-lg font-bold tracking-tight text-white hidden md:block">Bybit</span>
</div>
<div class="group flex items-center gap-3 hover:opacity-100 transition-opacity">
<iconify-icon icon="simple-icons:okx" width="24" height="24" class="text-white"></iconify-icon>
<span class="text-lg font-bold tracking-tight text-white hidden md:block">OKX</span>
</div>
</div>
</div>
</div><div class="border-white/5 border-t pt-24 pb-32 relative z-10 w-full max-w-7xl mx-auto">
<!-- Section Indicator -->
<div class="absolute left-6 lg:left-0 top-24 text-white/20 text-[10px] font-mono tracking-widest animate-in delay-200">06 // SCALE</div>
<!-- Vertical Grid Lines -->
<div class="absolute inset-y-0 left-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 right-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 left-1/2 w-px bg-white/5 hidden lg:block -translate-x-1/2"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 z-10 relative gap-x-16 gap-y-16">
<!-- Left Content -->
<div class="flex flex-col justify-center h-full lg:sticky lg:top-32 lg:self-start mb-12 lg:mb-0">
<h2 class="text-4xl md:text-5xl font-newsreader font-medium italic text-white mb-6 tracking-tight animate-in delay-300">
Infrastructure built for
<span class="not-italic text-transparent bg-clip-text bg-gradient-to-r from-purple-300 via-white to-indigo-300">internet-scale finance.</span>
</h2>
<p class="text-lg text-slate-400 font-light max-w-md leading-relaxed mb-8 animate-in delay-400">
Slash empowers institutions to move faster without compromising on security, latency, or liquidity depth.
</p>
<div class="flex items-center gap-2 text-sm text-slate-500 font-mono animate-in delay-500">
<iconify-icon icon="solar:server-square-linear" class="text-purple-400 text-lg"></iconify-icon>
<span class="">System Status: <span class="text-emerald-400">Operational</span></span>
</div>
<!-- Decorative Pattern -->
<div class="absolute -left-12 bottom-0 w-64 h-64 bg-purple-500/5 blur-[80px] -z-10 pointer-events-none"></div>
</div>
<!-- Right Card (Stats List) -->
<div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-[2rem] p-8 md:p-12 animate-in delay-500 hover:bg-white/[0.07] transition-colors duration-500 group relative overflow-hidden">
<!-- Subtle gradient overlay -->
<div class="absolute top-0 right-0 w-full h-full bg-gradient-to-bl from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none"></div>
<div class="space-y-12 relative z-10">
<!-- Stat 1 -->
<div class="flex flex-col md:flex-row gap-6 md:items-start border-b border-white/5 pb-12 last:border-0 last:pb-0 group/item">
<div class="w-full md:w-1/3 flex-shrink-0">
<span class="text-5xl md:text-6xl font-newsreader italic text-white tracking-tight group-hover/item:text-purple-300 transition-colors duration-300">$82B+</span>
</div>
<div class="w-full md:w-2/3">
<h4 class="text-lg font-medium text-white mb-2 flex items-center gap-2">
Quarterly Volume
<iconify-icon icon="solar:graph-up-linear" class="text-slate-500 text-base opacity-0 group-hover/item:opacity-100 transition-opacity"></iconify-icon>
</h4>
<p class="text-sm text-slate-400 leading-relaxed font-light">
Consistent liquidity flow across all major execution venues, ensuring zero slippage for institutional orders.
</p>
</div>
</div>
<!-- Stat 2 -->
<div class="flex flex-col md:flex-row gap-6 md:items-start border-b border-white/5 pb-12 last:border-0 last:pb-0 group/item">
<div class="w-full md:w-1/3 flex-shrink-0">
<span class="text-5xl md:text-6xl font-newsreader italic text-white tracking-tight group-hover/item:text-purple-300 transition-colors duration-300">12ms</span>
</div>
<div class="w-full md:w-2/3">
<h4 class="text-lg font-medium text-white mb-2 flex items-center gap-2">
Global Latency
<iconify-icon icon="solar:bolt-linear" class="text-slate-500 text-base opacity-0 group-hover/item:opacity-100 transition-opacity"></iconify-icon>
</h4>
<p class="text-sm text-slate-400 leading-relaxed font-light">
Direct connection to miners and validators reduces lag, putting your execution ahead of the public mempool.
</p>
</div>
</div>
<!-- Stat 3 -->
<div class="flex flex-col md:flex-row gap-6 md:items-start border-b border-white/5 pb-12 last:border-0 last:pb-0 group/item">
<div class="w-full md:w-1/3 flex-shrink-0">
<span class="text-5xl md:text-6xl font-newsreader italic text-white tracking-tight group-hover/item:text-purple-300 transition-colors duration-300">99.9%</span>
</div>
<div class="w-full md:w-2/3">
<h4 class="text-lg font-medium text-white mb-2 flex items-center gap-2">
System Uptime
<iconify-icon icon="solar:shield-check-linear" class="text-slate-500 text-base opacity-0 group-hover/item:opacity-100 transition-opacity"></iconify-icon>
</h4>
<p class="text-sm text-slate-400 leading-relaxed font-light">
Decentralized architecture means no single point of failure. The protocol operates 24/7 without downtime.
</p>
</div>
</div>
<!-- Stat 4: Partners -->
<div class="flex flex-col md:flex-row gap-6 md:items-start group/item pt-2">
<div class="w-full md:w-1/3 flex-shrink-0">
<span class="text-5xl md:text-6xl font-newsreader italic text-white tracking-tight group-hover/item:text-purple-300 transition-colors duration-300">100+</span>
</div>
<div class="w-full md:w-2/3">
<h4 class="text-lg font-medium text-white mb-3">Trusted Partners</h4>
<div class="flex flex-wrap gap-4 items-center">
<!-- Simple Icons 96x36 container equivalent -->
<div class="h-9 w-16 flex items-center justify-start opacity-50 group-hover/item:opacity-100 transition-opacity duration-300">
<iconify-icon icon="simple-icons:binance" width="24" height="24" class="text-white"></iconify-icon>
</div>
<div class="h-9 w-16 flex items-center justify-start opacity-50 group-hover/item:opacity-100 transition-opacity duration-300 delay-75">
<iconify-icon icon="simple-icons:coinbase" width="24" height="24" class="text-white"></iconify-icon>
</div>
<div class="h-9 w-16 flex items-center justify-start opacity-50 group-hover/item:opacity-100 transition-opacity duration-300 delay-150">
<iconify-icon icon="simple-icons:ethereum" width="24" height="24" class="text-white"></iconify-icon>
</div>
<div class="h-9 w-16 flex items-center justify-start opacity-50 group-hover/item:opacity-100 transition-opacity duration-300 delay-200">
<iconify-icon icon="simple-icons:polygon" width="24" height="24" class="text-white"></iconify-icon>
</div>
</div>
<p class="text-sm text-slate-400 leading-relaxed font-light mt-3">
Audited by top firms and integrated with major custodians.
</p>
</div>
</div>
</div>
</div>
</div>
</div><div class="z-10 w-full max-w-7xl border-white/5 border-t mr-auto ml-auto pt-24 pb-24 relative">
<!-- Section Indicator -->
<div class="text-[10px] animate-in delay-200 lg:left-0 text-white/20 tracking-widest font-mono absolute top-16 left-6">07 // SUPPORT</div>
<!-- Vertical Grid Lines -->
<div class="absolute inset-y-0 left-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 right-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 left-1/2 w-px bg-white/5 hidden lg:block -translate-x-1/2"></div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 z-10 relative gap-x-16 gap-y-16">
<!-- Left Title -->
<div class="lg:sticky lg:top-32 lg:self-start">
<h2 class="text-4xl md:text-5xl font-newsreader font-medium italic text-white mb-6 tracking-tight">
Common questions about
<span class="not-italic text-transparent bg-clip-text bg-gradient-to-r from-purple-300 via-white to-indigo-300">integration & scale.</span>
</h2>
<p class="text-lg text-slate-400 font-light max-w-md leading-relaxed mb-8">
Everything you need to know about our API limits, latency guarantees, and enterprise SLAs.
</p>
<button class="group inline-flex items-center gap-2 text-sm text-white border-b border-white/20 pb-1 hover:border-white transition-colors">
<span class="">View full documentation</span>
<iconify-icon icon="solar:arrow-right-linear" class="transition-transform group-hover:translate-x-1"></iconify-icon>
</button>
</div>
<!-- Right Accordion -->
<div class="space-y-4">
<!-- Item 1 -->
<div class="group border-b border-white/5 pb-6">
<div class="flex items-start justify-between cursor-pointer">
<h3 class="text-lg text-white/90 font-medium group-hover:text-purple-300 transition-colors">Can you guarantee 99.9% uptime for institutional APIs?</h3>
<iconify-icon icon="solar:add-linear" class="text-slate-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
<p class="text-sm text-slate-400 font-light leading-relaxed mt-4 max-w-lg hidden">
Yes. We provide legally binding SLAs for enterprise clients, backed by our distributed validator infrastructure across 12 geographic regions.
</p>
</div>
<!-- Item 2 -->
<div class="group border-b border-white/5 py-6">
<div class="flex items-start justify-between cursor-pointer">
<h3 class="text-lg text-white/90 font-medium group-hover:text-purple-300 transition-colors">Where are your execution servers located?</h3>
<iconify-icon icon="solar:add-linear" class="text-slate-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
</div>
<!-- Item 3 -->
<div class="group border-b border-white/5 py-6">
<div class="flex items-start justify-between cursor-pointer">
<h3 class="text-lg text-white/90 font-medium group-hover:text-purple-300 transition-colors">Do you support custom FIX protocol integration?</h3>
<iconify-icon icon="solar:add-linear" class="text-slate-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
</div>
<!-- Item 4 -->
<div class="group border-b border-white/5 py-6">
<div class="flex items-start justify-between cursor-pointer">
<h3 class="text-lg text-white/90 font-medium group-hover:text-purple-300 transition-colors">How is high-frequency rate limiting handled?</h3>
<iconify-icon icon="solar:add-linear" class="text-slate-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
</div>
<!-- Item 5 -->
<div class="group py-6">
<div class="flex items-start justify-between cursor-pointer">
<h3 class="text-lg text-white/90 font-medium group-hover:text-purple-300 transition-colors">Is there a sandbox environment for testing?</h3>
<iconify-icon icon="solar:add-linear" class="text-slate-500 text-xl group-hover:text-white transition-colors"></iconify-icon>
</div>
</div>
</div>
</div>
</div><div class="z-10 w-full max-w-7xl border-white/5 border-t mx-auto pt-12 pb-24 relative">
<!-- Vertical Grid Lines (continuing) -->
<div class="absolute inset-y-0 left-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 right-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 left-1/2 w-px bg-white/5 hidden lg:block -translate-x-1/2"></div>
<div class="relative w-full bg-[#6E40C9] rounded-[2rem] overflow-hidden px-8 py-16 md:p-16 flex flex-col md:flex-row md:items-end justify-between gap-12 group">
<!-- Background Elements -->
<div class="absolute top-0 right-0 w-[600px] h-[600px] bg-gradient-to-b from-white/10 to-transparent rounded-full blur-3xl -translate-y-1/2 translate-x-1/3 pointer-events-none mix-blend-overlay"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-indigo-900/40 rounded-full blur-3xl translate-y-1/2 -translate-x-1/3 pointer-events-none"></div>
<!-- Decorative Grid on Purple -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:40px_40px] opacity-30"></div>
<div class="relative z-10 max-w-2xl">
<h2 class="text-4xl md:text-5xl font-newsreader font-medium text-white mb-6 tracking-tight leading-[1.1]">
Not sure of the right architecture for you?
</h2>
<p class="text-lg text-purple-100/80 font-light leading-relaxed max-w-lg">
We have a dedicated engineering team here at Slash waiting to help you map out your liquidity strategy.
</p>
</div>
<div class="relative z-10 flex-none">
<button class="group/btn relative overflow-hidden bg-transparent border border-white/30 text-white px-8 py-4 rounded-xl transition-all duration-300 hover:bg-white hover:text-[#6E40C9] hover:border-white">
<div class="flex gap-8 gap-x-8 gap-y-8 items-center justify-between flex-none">
<span class="text-sm font-medium tracking-wide">Let's Chat</span>
<iconify-icon icon="solar:arrow-right-up-linear" class="text-lg transition-transform duration-300 group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1"></iconify-icon>
</div>
</button>
</div>
</div>
</div><footer class="border-t border-white/5 bg-[#020205] relative z-20">
<div class="max-w-7xl mr-auto ml-auto pt-20 pr-6 pb-12 pl-6 relative">
<!-- Vertical Grid Lines (continuing) -->
<div class="absolute inset-y-0 left-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 right-0 w-px bg-white/5 hidden lg:block"></div>
<div class="absolute inset-y-0 left-1/2 w-px bg-white/5 hidden lg:block -translate-x-1/2"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20 relative z-10">
<!-- Brand Column -->
<div class="space-y-6">
<div class="flex items-center gap-2 mb-6">
<span class="text-2xl font-newsreader italic font-semibold text-white">Slash</span>
</div>
<!-- Company logos using Simple Icons as requested -->
<div class="flex gap-4 opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
<iconify-icon icon="simple-icons:ycombinator" width="24" height="24" class="text-[#F06529]"></iconify-icon>
<iconify-icon icon="simple-icons:paradigm" width="24" height="24" class="text-white"></iconify-icon>
</div>
</div>
<!-- Links 1 -->
<div class="">
<h4 class="text-sm text-white font-medium mb-6">Developers</h4>
<ul class="space-y-4 text-sm text-slate-400 font-light">
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">Documentation</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">API Reference</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">Open Source</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors flex items-center gap-2">
System Status
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
</a></li>
</ul>
</div>
<!-- Links 2 -->
<div class="">
<h4 class="text-sm text-white font-medium mb-6">Company</h4>
<ul class="space-y-4 text-sm text-slate-400 font-light">
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">About</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">Careers</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">Blog</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors">Legal</a></li>
</ul>
</div>
<!-- Links 3 -->
<div class="">
<h4 class="text-sm text-white font-medium mb-6">Social</h4>
<ul class="space-y-4 text-sm text-slate-400 font-light">
<li class=""><a href="#" class="hover:text-purple-400 transition-colors flex items-center gap-2">
Twitter <iconify-icon icon="solar:arrow-right-up-linear" class="text-xs opacity-50"></iconify-icon>
</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors flex items-center gap-2">
GitHub <iconify-icon icon="solar:arrow-right-up-linear" class="text-xs opacity-50"></iconify-icon>
</a></li>
<li class=""><a href="#" class="hover:text-purple-400 transition-colors flex items-center gap-2">
Discord <iconify-icon icon="solar:arrow-right-up-linear" class="text-xs opacity-50"></iconify-icon>
</a></li>
</ul>
</div>
</div>
<!-- Big Contact Buttons -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10 border-t border-white/5 pt-12">
<a href="#" class="group block border border-white/10 p-8 hover:border-white/30 hover:bg-white/5 transition-all duration-300">
<div class="flex justify-between items-start h-full">
<div class="space-y-2">
<span class="text-lg font-newsreader italic text-white group-hover:text-purple-300 transition-colors">Contact Sales</span>
<p class="text-sm text-slate-400 font-light">For enterprise inquiries and volume pricing.</p>
</div>
<iconify-icon icon="solar:arrow-right-up-linear" class="text-white text-xl transition-transform group-hover:translate-x-1 group-hover:-translate-y-1"></iconify-icon>
</div>
</a>
<a href="#" class="group block border border-white/10 p-8 hover:border-white/30 hover:bg-white/5 transition-all duration-300">
<div class="flex justify-between items-start h-full">
<div class="space-y-2">
<span class="text-lg font-newsreader italic text-white group-hover:text-purple-300 transition-colors">Contact Support</span>
<p class="text-sm text-slate-400 font-light">Technical assistance for integrations.</p>
</div>
<iconify-icon icon="solar:arrow-right-up-linear" class="text-white text-xl transition-transform group-hover:translate-x-1 group-hover:-translate-y-1"></iconify-icon>
</div>
</a>
</div>
<!-- Copyright -->
<div class="flex flex-col md:flex-row justify-between items-center gap-6 mt-16 pt-8 border-t border-white/5 text-[10px] text-slate-600 uppercase tracking-widest relative z-10">
<span>© 2024 Slash Protocol Inc.</span>
<div class="flex gap-6">
<a href="#" class="hover:text-slate-400 transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-slate-400 transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>
</main>
<script>
// Spotlight Effect Logic
const cards = document.querySelectorAll(".spotlight-card");
document.addEventListener("mousemove", (e) => {
cards.forEach((card) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
});
});
// Mobile Menu Logic
const menuBtn = document.getElementById('open-menu');
const closeBtn = document.getElementById('close-menu');
const mobileMenu = document.getElementById('mobile-menu');
function toggleMenu() {
if (mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.remove('hidden');
mobileMenu.classList.add('flex');
setTimeout(() => mobileMenu.classList.remove('opacity-0'), 10);
} else {
mobileMenu.classList.add('opacity-0');
setTimeout(() => {
mobileMenu.classList.remove('flex');
mobileMenu.classList.add('hidden');
}, 300);
}
}
menuBtn.addEventListener('click', toggleMenu);
closeBtn.addEventListener('click', toggleMenu);
// D3.js Chart Implementation
const drawChart = () => {
const container = document.getElementById('chart-container');
container.innerHTML = ''; // Clear existing
const width = container.clientWidth;
const height = container.clientHeight;
const margin = {top: 10, right: 0, bottom: 0, left: 0};
// Fake Data
const data = [
{x: 0, y: 50}, {x: 1, y: 55}, {x: 2, y: 45}, {x: 3, y: 60},
{x: 4, y: 58}, {x: 5, y: 70}, {x: 6, y: 65}, {x: 7, y: 80},
{x: 8, y: 75}, {x: 9, y: 95}, {x: 10, y: 100}
];
const svg = d3.select("#chart-container")
.append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", `0 0 ${width} ${height}`)
.attr("preserveAspectRatio", "none");
// Scales
const x = d3.scaleLinear()
.domain(d3.extent(data, d => d.x))
.range([0, width]);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.y) * 1.2]) // Add headroom
.range([height, 0]);
// Gradients
const defs = svg.append("defs");
const areaGradient = defs.append("linearGradient")
.attr("id", "area-gradient")
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
areaGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#a855f7")
.attr("stop-opacity", 0.3);
areaGradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#a855f7")
.attr("stop-opacity", 0);
// Area
const area = d3.area()
.x(d => x(d.x))
.y0(height)
.y1(d => y(d.y))
.curve(d3.curveMonotoneX);
// Line
const line = d3.line()
.x(d => x(d.x))
.y(d => y(d.y))
.curve(d3.curveMonotoneX);
// Append Area
svg.append("path")
.datum(data)
.attr("class", "chart-area")
.attr("d", area);
// Append Line
const path = svg.append("path")
.datum(data)
.attr("class", "chart-path")
.attr("fill", "none")
.attr("d", line);
// Animate Line
const totalLength = path.node().getTotalLength();
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(2000)
.ease(d3.easeCubicOut)
.attr("stroke-dashoffset", 0);
};
// Draw initially and on resize
window.addEventListener('load', drawChart);
window.addEventListener('resize', drawChart);
</script>
</body></html>