Загрузка...
Шаблон лендинга для креативного агентства Luminal Studio. HTML/CSS, минималистичный дизайн. Идеально для студий, портфолио, фрилансеров.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Luminal Studio - Digital Experience</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
<style>
body { font-family: 'Inter', sans-serif; }
.text-huge { font-size: clamp(3rem, 16vw, 24rem); }
/* Vertical Beam Animation */
@keyframes beam-drop {
0% { transform: translateY(-100%); }
100% { transform: translateY(500%); }
}
.animate-beam {
animation: beam-drop 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Button Border Spin Animation */
@keyframes border-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-border-spin {
animation: border-spin 2s linear infinite;
}
/* Marquee Animation */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee-infinite {
animation: marquee 40s linear infinite;
}
.animate-marquee-infinite:hover {
animation-play-state: paused;
}
/* Custom Scrollbar for visual containers */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
</style>
<style id="aura-editor-visibility-style">
.invisible { visibility: hidden !important; }
</style>
<style>
@keyframes fadeInUpBlur {
0% { opacity: 0; transform: translateY(20px); filter: blur(10px); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.animate-in {
animation: fadeInUpBlur 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.reveal-hidden { opacity: 0; }
</style>
<link
id="all-fonts-link-font-syne"
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap"
/>
<style id="all-fonts-style-font-syne">
.font-syne { font-family: 'Syne', sans-serif !important; }
</style></head>
<body
class="bg-neutral-950 text-neutral-200 overflow-x-hidden w-full min-h-screen relative selection:bg-red-500/30 selection:text-white pt-16"
>
<header
class="fixed top-0 left-0 w-full z-50 bg-neutral-950/80 backdrop-blur-md border-b border-white/10 h-16 transition-all duration-300"
>
<div
class="flex md:px-8 w-full h-full max-w-[1920px] mr-auto ml-auto pr-6 pl-6 items-center justify-between"
>
<a href="/" class="flex items-center gap-3 group reveal-hidden">
<span
class="uppercase group-hover:text-red-500 transition-colors text-sm font-medium text-white tracking-widest font-syne"
>
Luminal
</span>
</a>
<nav class="hidden md:flex items-center gap-10">
<a
href="/work"
class="text-[10px] hover:text-white transition-colors uppercase font-bold text-neutral-400 tracking-[0.2em]"
>
Work
</a>
<a
href="/services"
class="text-[10px] hover:text-white transition-colors uppercase font-bold text-neutral-400 tracking-[0.2em]"
>
Services
</a>
<a
href="/about"
class="text-[10px] hover:text-white transition-colors uppercase font-bold text-neutral-400 tracking-[0.2em]"
>
About
</a>
<a
href="/pricing"
class="text-[10px] hover:text-white transition-colors uppercase font-bold text-neutral-400 tracking-[0.2em]"
>
Pricing
</a>
<a
href="/contact"
class="text-[10px] hover:text-white transition-colors uppercase font-bold text-neutral-400 tracking-[0.2em]"
>
Contact
</a>
</nav>
<div class="flex items-center gap-6">
<a
href="/startproject"
class="hidden md:flex text-[10px] hover:bg-neutral-200 transition-colors uppercase font-bold text-black tracking-widest bg-white rounded-sm pt-2.5 pr-6 pb-2.5 pl-6"
>
Start Project
</a>
<div class="md:hidden relative">
<button
onclick="const m=this.nextElementSibling; m.classList.toggle('hidden'); m.classList.toggle('flex');"
class="text-white p-2 hover:text-red-500 transition-colors reveal-hidden"
>
<iconify-icon
icon="solar:hamburger-menu-linear"
width="24"
height="24"
></iconify-icon>
</button>
<div
class="hidden absolute top-full right-0 mt-4 w-48 bg-neutral-900 border border-white/10 rounded-lg p-2 flex-col gap-1 shadow-2xl"
>
<a
href="/work"
class="block px-4 py-2 text-sm text-neutral-400 hover:text-white hover:bg-white/5 rounded"
>
Work
</a>
<a
href="/services"
class="block px-4 py-2 text-sm text-neutral-400 hover:text-white hover:bg-white/5 rounded"
>
Services
</a>
<a
href="/about"
class="block px-4 py-2 text-sm text-neutral-400 hover:text-white hover:bg-white/5 rounded"
>
About
</a>
<a
href="/contact"
class="block px-4 py-2 text-sm text-neutral-400 hover:text-white hover:bg-white/5 rounded"
>
Contact
</a>
</div>
</div>
</div>
</div>
</header>
<div
class="aura-background-component fixed top-0 w-full h-screen -z-10 brightness-125 saturate-200 hue-rotate-180"
data-alpha-mask="100"
style="mask-image: linear-gradient(to bottom, transparent, black 0%, black 100%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 100%, transparent)"
>
<div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div
data-us-project="7WRlj4TRuUxuldc6GVDM"
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>
<div
class="absolute inset-0 z-10 w-full h-full pointer-events-none grid grid-cols-1 border-t border-white/10"
></div>
<!-- HERO SECTION -->
<div
class="z-20 grid grid-cols-1 md:grid-cols-4 w-full relative h-[900px] max-h-[900px]"
>
<!-- Hero Item 1 -->
<div
class="flex flex-col md:p-8 md:border-b-0 group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 relative justify-between animate-in"
>
<div
class="absolute right-0 top-0 h-full w-[1px] bg-white/10 hidden md:block overflow-hidden"
>
<div
class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-transparent via-red-500 to-transparent animate-beam opacity-75"
></div>
</div>
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block z-20"
>
+
</div>
<div class="mt-auto mb-12 max-w-xs">
<p
class="text-lg text-neutral-300 leading-relaxed font-normal animate-in"
>
Creative studio crafting brands, products, and digital experiences
that stand out and move the world forward.
</p>
</div>
</div>
<!-- Hero Item 2 -->
<div
class="flex flex-col md:p-8 md:border-b-0 group border-white/10 border-b pt-6 pr-6 pb-6 pl-6 relative justify-between animate-in"
>
<div
class="absolute right-0 top-0 h-full w-[1px] bg-white/10 hidden md:block overflow-hidden"
>
<div
class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-transparent via-red-500 to-transparent animate-beam opacity-75"
style="animation-delay: 1.5s;"
></div>
</div>
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block z-20"
>
+
</div>
</div>
<!-- Hero Item 3 -->
<div
class="flex flex-col justify-between p-6 md:p-8 border-b md:border-b-0 border-white/10 relative group animate-in"
>
<div
class="absolute right-0 top-0 h-full w-[1px] bg-white/10 hidden md:block overflow-hidden"
>
<div
class="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-transparent via-red-500 to-transparent animate-beam opacity-75"
style="animation-delay: 3s;"
></div>
</div>
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block z-20"
>
+
</div>
</div>
<!-- Hero Item 4 -->
<div
class="flex flex-col md:p-8 pt-6 pr-6 pb-6 pl-6 relative justify-between"
>
<div
class="hidden md:flex md:justify-start mt-auto mb-12 items-end justify-end"
>
<div class="relative group cursor-pointer animate-in">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-sm font-medium tracking-[0.2em] uppercase">
View Work
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="18"
height="18"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</div>
<!-- Big Center Title -->
<div
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full text-center z-10 pointer-events-none hidden md:block"
>
<h1
class="text-huge leading-none text-white tracking-tighter mix-blend-overlay opacity-90 font-syne font-medium animate-in"
>
LUMINAL
</h1>
</div>
</div>
<!-- LOGO MARQUEE SECTION -->
<section
class="z-20 overflow-hidden bg-neutral-950 w-full border-white/10 border-t relative"
>
<!-- Grid Overlay to match page layout -->
<div
class="absolute inset-0 w-full h-full grid grid-cols-1 md:grid-cols-4 pointer-events-none z-10"
>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="hidden md:block"></div>
</div>
<!-- Marquee Content -->
<div class="flex z-0 overflow-hidden pt-10 pb-10 relative items-center">
<div
class="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-neutral-950 to-transparent z-10 pointer-events-none"
></div>
<div
class="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-neutral-950 to-transparent z-10 pointer-events-none"
></div>
<div
class="flex gap-20 animate-marquee-infinite whitespace-nowrap min-w-full"
>
<!-- Logo Group -->
<div class="flex items-center gap-20 shrink-0">
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:layers-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold text-white tracking-tight font-syne"
>
Layers
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:command-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Command
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:widget-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Modules
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:bolt-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Energy
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:box-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Vertex
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:graph-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Pulse
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:globe-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Global
</span>
</div>
</div>
<!-- Duplicate Group for Infinite Loop -->
<div class="flex items-center gap-20 shrink-0">
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:layers-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold text-white tracking-tight font-syne"
>
Layers
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:command-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Command
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:widget-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Modules
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:bolt-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Energy
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:box-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Vertex
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:graph-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Pulse
</span>
</div>
<div
class="flex items-center gap-3 opacity-40 hover:opacity-100 transition-opacity duration-300"
>
<iconify-icon
icon="solar:globe-linear"
width="28"
height="28"
></iconify-icon>
<span
class="text-lg font-semibold tracking-tight text-white font-syne"
>
Global
</span>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES DETAIL SECTION -->
<section
class="z-20 bg-neutral-950 w-full border-t border-white/10 relative"
>
<div class="grid grid-cols-1 md:grid-cols-4 md:divide-x divide-white/10">
<div
class="md:col-span-1 md:row-span-2 flex flex-col min-h-[200px] md:min-h-full pt-8 pr-8 pb-8 pl-8 justify-between"
>
<div class="flex flex-col gap-1">
<span class="font-mono text-neutral-600 text-xs block mb-1">
/// About
</span>
<h2
class="leading-[0.9] text-4xl font-medium text-white tracking-tighter font-syne mb-6 reveal-hidden"
>
Luminal Studio
</h2>
</div>
</div>
<div class="md:col-span-3 md:p-16 p-8 flex flex-col justify-center">
<h2
class="leading-none md:text-7xl lg:text-7xl text-5xl font-medium text-white tracking-tighter font-syne mb-10 reveal-hidden"
>
Luminal Studio is a creative design agency focused on helping brands
communicate clearly.
</h2>
<div
class="flex flex-col md:flex-row gap-12 md:items-end justify-between"
>
<p
class="md:text-lg text-base font-light leading-relaxed text-neutral-400 max-w-2xl reveal-hidden"
>
We believe great design is not just how something looks — it’s how
it works, how it feels, and how effectively it solves real
business problems.
</p>
<div
class="relative group cursor-pointer w-max shrink-0 reveal-hidden"
>
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-sm font-medium tracking-[0.2em] uppercase">
About Us
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="18"
height="18"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</div>
<div
class="md:col-span-1 p-8 md:p-12 flex flex-col min-h-[320px] border-t border-white/10 hover:bg-white/[0.02] transition-colors group relative justify-end reveal-hidden"
>
<div
class="text-7xl md:text-8xl font-medium text-white tracking-tighter mb-6"
>
120+
</div>
<p
class="text-neutral-400 text-sm leading-relaxed max-w-[200px] reveal-hidden"
>
Successfully delivered design solutions for startups.
</p>
</div>
<div
class="md:col-span-1 p-8 md:p-12 flex flex-col justify-end min-h-[320px] border-t border-white/10 hover:bg-white/[0.02] transition-colors relative group reveal-hidden"
>
<div
class="text-7xl md:text-8xl font-medium text-white tracking-tighter mb-6"
>
12+
</div>
<p
class="text-neutral-400 text-sm leading-relaxed max-w-[200px] reveal-hidden"
>
Years of design experience with a strategy-first approach.
</p>
</div>
<div
class="md:col-span-1 flex flex-col hover:bg-white/[0.02] transition-colors group cursor-pointer overflow-hidden bg-center min-h-[320px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/05d6b211-9e83-488c-8f3f-42a77b8e9532_1600w.png)] bg-cover border-white/10 border-t relative reveal-hidden"
>
<div
class="group-hover:bg-transparent transition-colors bg-black/10 absolute top-0 right-0 bottom-0 left-0"
></div>
</div>
</div>
</section>
<section
class="z-20 bg-neutral-950 w-full border-white/10 border-t relative"
>
<div
class="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-white/10"
>
<div
class="md:col-span-1 md:row-span-2 flex flex-col p-8 justify-between min-h-[300px] md:min-h-full"
>
<div class="flex flex-col gap-x-1 gap-y-1">
<span class="block text-xs text-neutral-600 font-mono mb-4">
/// Capabilities
</span>
<h2
class="leading-[0.9] text-4xl font-medium text-white tracking-tighter font-syne mb-6 reveal-hidden"
>
Luminal Studio
</h2>
<p
class="text-neutral-400 text-sm leading-relaxed mb-8 reveal-hidden"
>
We believe great design is not just how something looks — it’s how
it works.
</p>
</div>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-xs font-medium tracking-[0.2em] uppercase">
About Us
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
<div
class="md:col-span-3 grid grid-cols-1 md:grid-cols-2 divide-y divide-x divide-white/10"
>
<div
class="group flex flex-col hover:bg-white/[0.02] transition-colors duration-500 pt-8 pr-8 pb-8 pl-8 relative reveal-hidden"
>
<div
class="aspect-video overflow-hidden flex flex-col bg-neutral-900/40 w-full border border-white/10 rounded-none mb-8 relative items-center justify-center"
>
<!-- Background: vignette + grid + highlight + border ring (no rounded corners) -->
<div class="absolute inset-0 z-0">
<!-- Vignette -->
<div
class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.06)_0%,rgba(0,0,0,0)_55%)]"
></div>
<!-- Grid -->
<div
class="absolute inset-0 opacity-[0.18] bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:28px_28px] [mask-image:radial-gradient(ellipse_at_center,black_45%,transparent_100%)]"
></div>
<!-- Subtle top highlight -->
<div
class="absolute -top-24 left-1/2 h-56 w-56 -translate-x-1/2 bg-white/5 blur-3xl"
></div>
<!-- Optional accent glow (red-500) -->
<div
class="absolute left-1/2 top-1/2 h-80 w-80 -translate-x-1/2 -translate-y-1/2 bg-red-500/10 blur-3xl"
></div>
<!-- Border ring (square) -->
<div class="absolute inset-0 ring-1 ring-white/10"></div>
</div>
<!-- Top label -->
<div class="absolute top-5 left-5 z-20">
<div class="flex items-center gap-2">
<span class="h-1.5 w-1.5 rounded-full bg-red-500"></span>
<span
class="font-mono text-[10px] uppercase tracking-[0.32em] text-neutral-400"
>
Digital Products
</span>
</div>
</div>
<!-- Illustration -->
<div
class="flex z-10 w-full h-full relative items-center justify-center"
>
<style>
@keyframes cube-reveal-left {
0%, 100% { opacity: 0; transform: translate(-15px, 0) scale(0.98); filter: blur(4px); }
15% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
60% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
75% { opacity: 0; transform: translate(-15px, 0) scale(0.98); filter: blur(4px); }
}
@keyframes cube-reveal-right {
0%, 100% { opacity: 0; transform: translate(15px, 0) scale(0.98); filter: blur(4px); }
15% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
60% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
75% { opacity: 0; transform: translate(15px, 0) scale(0.98); filter: blur(4px); }
}
@keyframes cube-reveal-bottom {
0%, 100% { opacity: 0; transform: translate(0, 15px) scale(0.98); filter: blur(4px); }
15% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
60% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); }
75% { opacity: 0; transform: translate(0, 15px) scale(0.98); filter: blur(4px); }
}
.animate-cube-l { animation: cube-reveal-left 4s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.animate-cube-r { animation: cube-reveal-right 4s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: 160ms; }
.animate-cube-b { animation: cube-reveal-bottom 4s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: 320ms; }
</style>
<svg
viewBox="0 0 200 160"
class="drop-shadow-[0_60px_120px_rgba(0,0,0,0.9)] w-[70%] max-w-[560px] h-auto"
stroke-width="2"
aria-hidden="true"
>
<defs>
<linearGradient
id="cube-light-top"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
stop-color="#ffffff"
stop-opacity="1"
></stop>
<stop
offset="100%"
stop-color="#e5e5e5"
stop-opacity="1"
></stop>
</linearGradient>
<linearGradient
id="cube-light-left"
x1="0%"
y1="0%"
x2="100%"
y2="100%"
>
<stop
offset="0%"
stop-color="#bdbdbd"
stop-opacity="1"
></stop>
<stop
offset="100%"
stop-color="#7c7c7c"
stop-opacity="1"
></stop>
</linearGradient>
<linearGradient
id="cube-light-right"
x1="100%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
stop-color="#8a8a8a"
stop-opacity="1"
></stop>
<stop
offset="100%"
stop-color="#5b5b5b"
stop-opacity="1"
></stop>
</linearGradient>
<radialGradient id="soft-glow" cx="50%" cy="50%" r="50%">
<stop
offset="0%"
stop-color="#ffffff"
stop-opacity="0.18"
></stop>
<stop
offset="70%"
stop-color="#ffffff"
stop-opacity="0.06"
></stop>
<stop
offset="100%"
stop-color="#ffffff"
stop-opacity="0"
></stop>
</radialGradient>
</defs>
<!-- Bottom Cube (base) -->
<g transform="translate(100, 108)">
<g class="animate-cube-b opacity-0">
<path
d="M0,-14 L24,0 L0,14 L-24,0 Z"
fill="rgba(115,115,115,0.35)"
></path>
<path
d="M-24,0 L0,14 V40 L-24,26 Z"
fill="rgba(23,23,23,0.85)"
></path>
<path
d="M0,14 L24,0 V26 L0,40 Z"
fill="rgba(10,10,10,0.9)"
></path>
</g>
</g>
<!-- Left Cube -->
<g transform="translate(56, 82)">
<g class="animate-cube-l opacity-0">
<path
d="M0,-14 L24,0 L0,14 L-24,0 Z"
fill="rgba(115,115,115,0.32)"
></path>
<path
d="M-24,0 L0,14 V40 L-24,26 Z"
fill="rgba(18,18,18,0.85)"
></path>
<path
d="M0,14 L24,0 V26 L0,40 Z"
fill="rgba(8,8,8,0.9)"
></path>
</g>
</g>
<!-- Right Cube -->
<g transform="translate(144, 82)">
<g class="animate-cube-r opacity-0">
<path
d="M0,-14 L24,0 L0,14 L-24,0 Z"
fill="rgba(115,115,115,0.32)"
></path>
<path
d="M-24,0 L0,14 V40 L-24,26 Z"
fill="rgba(18,18,18,0.85)"
></path>
<path
d="M0,14 L24,0 V26 L0,40 Z"
fill="rgba(8,8,8,0.9)"
></path>
</g>
</g>
<!-- Top Cube (hero) - Static -->
<g transform="translate(100, 56) scale(1.12)" class="">
<circle
cx="0"
cy="18"
r="38"
fill="url(#soft-glow)"
></circle>
<path
d="M0,-14 L24,0 L0,14 L-24,0 Z"
fill="url(#cube-light-top)"
></path>
<path
d="M-24,0 L0,14 V40 L-24,26 Z"
fill="url(#cube-light-left)"
class=""
></path>
<path
d="M0,14 L24,0 V26 L0,40 Z"
fill="url(#cube-light-right)"
></path>
<path
d="M-24,0 L0,-14 L24,0"
fill="none"
stroke="rgba(255,255,255,0.45)"
stroke-width="0.6"
></path>
<path
d="M-24,0 L0,14"
fill="none"
stroke="rgba(255,255,255,0.18)"
stroke-width="0.6"
></path>
<path
d="M24,0 L0,14"
fill="none"
stroke="rgba(255,255,255,0.18)"
stroke-width="0.6"
></path>
<path
d="M0,14 V40"
fill="none"
stroke="rgba(255,255,255,0.14)"
stroke-width="0.6"
></path>
</g>
</svg>
</div>
<!-- Bottom caption -->
<div class="absolute bottom-5 left-5 right-5 z-20">
<div class="flex items-end justify-between gap-4">
<div>
<div class="font-syne text-sm text-white/90 tracking-tight">
Systems, not pixels
</div>
<div class="text-xs text-neutral-400 leading-relaxed">
Modular thinking for scalable product design.
</div>
</div>
<div
class="text-[10px] font-mono uppercase tracking-[0.28em] text-neutral-500"
>
Luminal Studio
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-grow">
<span class="font-mono text-red-500 text-xs block mb-3">01</span>
<h3
class="text-xl text-white font-medium uppercase tracking-widest mb-3 reveal-hidden"
>
Branding
</h3>
<p
class="text-neutral-400 text-sm leading-relaxed mb-6 reveal-hidden"
>
Forging distinct visual identities that resonate.
</p>
</div>
<div class="mt-auto pt-6 border-t border-white/5">
<span
class="text-xs text-neutral-500 group-hover:text-white transition-colors flex items-center gap-2"
>
Explore Identity
<iconify-icon
icon="solar:arrow-right-linear"
class="group-hover:translate-x-1 transition-transform"
></iconify-icon>
</span>
</div>
</div>
<div
class="group flex flex-col hover:bg-white/[0.02] transition-colors duration-500 pt-8 pr-8 pb-8 pl-8 relative reveal-hidden"
>
<div
class="aspect-video overflow-hidden flex flex-col select-none bg-neutral-950 w-full border-white/10 border rounded-none mb-8 pt-6 pr-6 pb-6 pl-6 relative shadow-2xl"
>
<style>
@keyframes wireframe-loop {
0% { opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(2px); }
8%, 80% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
90%, 100% { opacity: 0; transform: translateY(-5px) scale(0.98); filter: blur(2px); }
}
.animate-wireframe {
opacity: 0;
animation: wireframe-loop 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
animation-fill-mode: both;
}
</style>
<!-- Background -->
<div
class="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent pointer-events-none"
></div>
<!-- Window Controls -->
<div
class="flex items-center gap-2 mb-6 relative z-10 animate-wireframe"
style="animation-delay: 0ms;"
>
<div class="w-3 h-3 rounded-full bg-red-500/80"></div>
<div class="w-3 h-3 rounded-full bg-white/20"></div>
<div class="w-3 h-3 rounded-full bg-white/20"></div>
</div>
<!-- Interface Layout -->
<div class="flex gap-5 w-full h-full min-h-0 relative z-10">
<!-- Sidebar -->
<div
class="w-[28%] h-full border border-white/[0.05] p-5 flex flex-col animate-wireframe"
style="animation-delay: 100ms;"
>
<div
class="w-1/2 h-2 bg-white/10 mb-3 animate-wireframe"
style="animation-delay: 200ms;"
></div>
<div
class="w-3/4 h-2 bg-white/10 opacity-40 mb-8 animate-wireframe"
style="animation-delay: 300ms;"
></div>
<!-- Subtle red highlight row -->
<div
class="w-1/3 h-1.5 bg-red-500/40 mb-3 animate-wireframe"
style="animation-delay: 400ms;"
></div>
<div
class="w-2/3 h-1.5 bg-white/10 opacity-30 mb-3 animate-wireframe"
style="animation-delay: 500ms;"
></div>
<div
class="mt-auto w-full aspect-square bg-white/[0.04] border border-white/[0.05] relative animate-wireframe"
style="animation-delay: 600ms;"
>
<!-- Small corner accent -->
</div>
</div>
<!-- Right Content Area -->
<div class="flex-1 h-full flex flex-col gap-5 min-h-0">
<!-- Top Large Card -->
<div
class="flex-1 bg-white/[0.02] border border-white/[0.05] p-6 flex items-center gap-8 relative animate-wireframe"
style="animation-delay: 200ms;"
>
<!-- Soft red presence -->
<div
class="w-24 h-24 bg-red-500/10 border border-red-500/30 shrink-0 animate-wireframe"
style="animation-delay: 300ms;"
></div>
<div class="flex flex-col gap-3 w-full max-w-sm">
<div
class="w-2/5 h-2.5 bg-white/20 animate-wireframe"
style="animation-delay: 400ms;"
></div>
<div
class="w-full h-2.5 bg-white/10 opacity-40 animate-wireframe"
style="animation-delay: 500ms;"
></div>
<div class="flex gap-2 mt-2">
<div
class="w-16 h-1.5 bg-red-500/50 animate-wireframe"
style="animation-delay: 600ms;"
></div>
<div
class="w-8 h-1.5 bg-white/10 opacity-20 animate-wireframe"
style="animation-delay: 700ms;"
></div>
</div>
</div>
</div>
<!-- Bottom Small Cards -->
<div class="h-[42%] flex gap-5">
<div
class="flex-1 bg-white/[0.02] border border-white/[0.05] p-6 flex flex-col justify-end gap-3 relative animate-wireframe"
style="animation-delay: 400ms;"
>
<div
class="w-1/2 h-2 bg-white/20 animate-wireframe"
style="animation-delay: 500ms;"
></div>
<div
class="w-3/4 h-2 bg-white/10 opacity-40 animate-wireframe"
style="animation-delay: 600ms;"
></div>
</div>
<div
class="flex-1 bg-white/[0.02] border border-white/[0.05] p-6 flex flex-col justify-end gap-3 relative animate-wireframe"
style="animation-delay: 500ms;"
>
<!-- Small red detail -->
<div
class="absolute top-4 right-4 w-3 h-3 bg-red-500/60 animate-wireframe"
style="animation-delay: 600ms;"
></div>
<div
class="w-2/3 h-2 bg-white/20 animate-wireframe"
style="animation-delay: 700ms;"
></div>
<div
class="w-1/3 h-2 bg-white/10 opacity-40 animate-wireframe"
style="animation-delay: 800ms;"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-grow">
<span class="font-mono text-red-500 text-xs block mb-3">02</span>
<h3
class="text-xl text-white font-medium uppercase tracking-widest mb-3 reveal-hidden"
>
Web Design
</h3>
<p
class="text-neutral-400 text-sm leading-relaxed mb-6 reveal-hidden"
>
Crafting immersive digital environments.
</p>
</div>
<div class="mt-auto pt-6 border-t border-white/5">
<span
class="text-xs text-neutral-500 group-hover:text-white transition-colors flex items-center gap-2"
>
View Case Studies
<iconify-icon
icon="solar:arrow-right-linear"
class="group-hover:translate-x-1 transition-transform"
></iconify-icon>
</span>
</div>
</div>
<div
class="group flex flex-col hover:bg-white/[0.02] transition-colors duration-500 pt-8 pr-8 pb-8 pl-8 relative reveal-hidden"
>
<div
class="aspect-video overflow-hidden flex group bg-neutral-900/50 w-full border-white/5 border rounded-none mb-8 relative items-center justify-center transition-all duration-300 hover:scale-[0.99] hover:shadow-[0_0_40px_-10px_rgba(239,68,68,0.15)] hover:border-red-500/20 active:scale-[0.98] cursor-pointer reveal-hidden"
>
<style class="">
@keyframes blink-caret {
0%, 100% { border-color: transparent; }
50% { border-color: #ef4444; }
}
/* Custom Keyframes for Looped Typing with Steps */
@keyframes type-loop-1 {
0% { width: 0; animation-timing-function: steps(30, end); border-color: #ef4444; }
12% { width: 100%; animation-timing-function: linear; border-color: transparent; }
90% { width: 100%; }
100% { width: 0; }
}
@keyframes type-loop-2 {
0%, 15% { width: 0; animation-timing-function: steps(35, end); border-color: #ef4444; }
27% { width: 100%; animation-timing-function: linear; border-color: transparent; }
90% { width: 100%; }
100% { width: 0; }
}
@keyframes type-loop-3 {
0%, 30% { width: 0; animation-timing-function: steps(30, end); border-color: #ef4444; }
42% { width: 100%; animation-timing-function: linear; border-color: transparent; }
90% { width: 100%; }
100% { width: 0; }
}
@keyframes type-loop-4 {
0%, 45% { width: 0; animation-timing-function: steps(20, end); border-color: #ef4444; }
55% { width: 100%; animation-timing-function: linear; border-color: transparent; }
90% { width: 100%; }
100% { width: 0; }
}
@keyframes type-loop-5 {
0%, 58% { width: 0; animation-timing-function: steps(20, end); border-color: #ef4444; }
68% { width: 100%; animation-timing-function: linear; border-color: transparent; }
90% { width: 100%; }
100% { width: 0; }
}
/* Smooth Cursor Loop Animation */
@keyframes cursor-float-loop {
0% { opacity: 0; transform: translate(40px, -20px) scale(0.9); }
5% { opacity: 1; transform: translate(0, 0) scale(1); }
20% { transform: translate(-10px, 15px); }
40% { transform: translate(5px, 45px); }
60% { transform: translate(-15px, 90px); }
80% { transform: translate(10px, 120px); opacity: 1; }
95% { opacity: 0; transform: translate(10px, 130px); }
100% { opacity: 0; transform: translate(40px, -20px); }
}
.typing-line {
overflow: hidden;
white-space: nowrap;
width: 0;
border-right: 2px solid transparent;
will-change: width;
}
/* 8s Loop Duration for synchronization */
.line-1 { animation: type-loop-1 8s infinite; }
.line-2 { animation: type-loop-2 8s infinite; }
.line-3 { animation: type-loop-3 8s infinite; }
.line-4 { animation: type-loop-4 8s infinite; }
.line-5 { animation: type-loop-5 8s infinite; }
.cursor-michael {
animation: cursor-float-loop 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
</style>
<!-- Ambient Glow Effects -->
<div
class="absolute -top-10 left-1/2 -translate-x-1/2 w-3/4 h-1/2 bg-red-600/20 blur-[90px] rounded-full pointer-events-none"
></div>
<div
class="absolute top-0 left-1/3 w-1/2 h-1/3 bg-orange-600/10 blur-[60px] rounded-full pointer-events-none"
></div>
<!-- Editor Window Container -->
<div
class="relative w-[90%] md:w-[85%] h-auto min-h-[70%] bg-[#0A0A0B] rounded-xl border border-white/10 shadow-2xl overflow-hidden flex flex-col font-mono text-xs sm:text-sm backdrop-blur-sm"
>
<!-- Window Title Bar -->
<div
class="h-10 border-b border-white/5 flex items-center px-4 gap-2 bg-white/[0.02]"
>
<div
class="w-3 h-3 rounded-full bg-neutral-700 shadow-sm"
></div>
<div
class="w-3 h-3 rounded-full bg-neutral-800 shadow-sm"
></div>
<div
class="w-3 h-3 rounded-full bg-neutral-800 shadow-sm"
></div>
</div>
<!-- Code Content Area -->
<div
class="flex-1 p-4 md:p-6 relative overflow-hidden bg-[#0A0A0B]"
>
<!-- Collaborative Cursor: Michael (Animated Loop) -->
<div
class="cursor-michael absolute top-5 right-[15%] z-20 flex flex-col items-start pointer-events-none"
>
<div
class="bg-neutral-800/90 backdrop-blur text-neutral-400 text-[10px] px-2 py-0.5 rounded-full border border-white/10 shadow-lg mb-0.5 whitespace-nowrap font-sans translate-x-3"
>
Michael
</div>
<svg
class="w-4 h-4 text-neutral-600 fill-neutral-600 transform -rotate-12 translate-x-1 drop-shadow-md"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"></path>
</svg>
</div>
<!-- Collaborative Cursor: Sofia (Static) -->
<div class="flex gap-4 md:gap-6 relative z-10" style="">
<!-- Line Numbers -->
<div
class="flex flex-col text-neutral-800 text-right select-none space-y-1.5 pt-0.5"
style=""
>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<!-- Code Lines: Looped Typing Animation -->
<div
class="flex flex-col text-neutral-500 font-mono w-full space-y-1.5"
style=""
>
<!-- Line 1 -->
<div
class="-mx-2 flex h-5 pr-2 pl-2 relative items-center"
>
<div
class="absolute inset-0 bg-red-500/5 rounded border border-red-500/10 w-fit pr-10"
style=""
></div>
<div class="relative z-10 w-fit typing-line line-1">
<span class="text-red-500">const</span>
<span class="text-neutral-300">m</span>
<span class="text-neutral-600">=</span>
<span class="text-red-500">new</span>
<span class="text-white">Monitor</span>
<span class="text-neutral-600">(</span>
<span class="text-neutral-500">"ecom"</span>
<span class="text-neutral-600">);</span>
</div>
</div>
<!-- Line 2 -->
<div class="w-fit typing-line line-2 h-5">
<span class="text-red-500">const</span>
<span class="text-neutral-300">rt</span>
<span class="text-neutral-600">=</span>
<span class="text-neutral-300">m</span>
<span class="text-neutral-600">.</span>
<span class="text-white">metric</span>
<span class="text-neutral-600">(</span>
<span class="text-neutral-500">"resp_time"</span>
<span class="text-neutral-600">).</span>
<span class="text-white">mean</span>
<span class="text-neutral-600">();</span>
</div>
<!-- Line 3 -->
<div class="w-fit typing-line line-3 h-5">
<span class="text-red-500">const</span>
<span class="text-neutral-300">er</span>
<span class="text-neutral-600">=</span>
<span class="text-neutral-300">m</span>
<span class="text-neutral-600">.</span>
<span class="text-white">metric</span>
<span class="text-neutral-600">(</span>
<span class="text-neutral-500">"err_rate"</span>
<span class="text-neutral-600">).</span>
<span class="text-white">last</span>
<span class="text-neutral-600">();</span>
</div>
<!-- Line 4: Empty -->
<div class="h-5"></div>
<!-- Line 5 -->
<div class="w-fit typing-line line-4 h-5">
<span class="text-red-500">if</span>
<span class="text-neutral-600">(</span>
<span class="text-neutral-300">rt</span>
<span class="text-neutral-600">></span>
<span class="text-red-400">250</span>
<span class="text-red-500">||</span>
<span class="text-neutral-300">er</span>
<span class="text-neutral-600">></span>
<span class="text-red-400">0.02</span>
<span class="text-neutral-600">)</span>
</div>
<!-- Line 6: Indented -->
<div class="pl-4 w-fit typing-line line-5 h-5">
<span class="text-white">AutoScale</span>
<span class="text-neutral-600">.</span>
<span class="text-white">addInstance</span>
<span class="text-neutral-600">();</span>
</div>
<!-- Line 7: Empty -->
<div class="h-5"></div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-grow">
<span class="font-mono text-red-500 text-xs block mb-3">03</span>
<h3
class="text-xl text-white font-medium uppercase tracking-widest mb-3 reveal-hidden"
>
Product
</h3>
<p
class="text-neutral-400 text-sm leading-relaxed mb-6 reveal-hidden"
>
Functional systems for complex needs.
</p>
</div>
<div class="mt-auto pt-6 border-t border-white/5">
<span
class="text-xs text-neutral-500 group-hover:text-white transition-colors flex items-center gap-2"
>
See Components
<iconify-icon
icon="solar:arrow-right-linear"
class="group-hover:translate-x-1 transition-transform"
></iconify-icon>
</span>
</div>
</div>
<div
class="group flex flex-col hover:bg-white/[0.02] transition-colors duration-500 p-8 relative reveal-hidden"
>
<div
class="aspect-video overflow-hidden flex select-none bg-neutral-900/50 w-full border-white/5 border rounded-none mb-8 relative"
style=""
>
<!-- Subtle Background Glow -->
<div
class="absolute top-1/2 left-1/4 -translate-y-1/2 w-40 h-40 bg-red-500/5 blur-[50px] rounded-full pointer-events-none"
></div>
<!-- Left Panel: Chart -->
<div
class="flex flex-col w-3/5 h-full border-white/5 border-r pt-5 pr-5 pb-5 pl-5 relative"
>
<style>
@keyframes barReveal {
0% { transform: scaleY(0); opacity: 0; }
15% { transform: scaleY(1); opacity: 1; }
85% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(0); opacity: 0; }
}
.animate-bar-reveal {
animation: barReveal 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
transform-origin: bottom;
}
</style>
<!-- Legend -->
<div class="flex gap-4 mb-2 z-10">
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-[1px] bg-neutral-700"></div>
<span
class="text-[10px] font-medium text-neutral-500 font-mono tracking-tight uppercase"
>
Organic
</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-[1px] bg-red-900/60"></div>
<span
class="text-[10px] font-medium text-neutral-500 font-mono tracking-tight uppercase"
>
Social
</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-[1px] bg-red-500"></div>
<span
class="text-[10px] font-medium text-neutral-500 font-mono tracking-tight uppercase"
>
Direct
</span>
</div>
</div>
<!-- Chart Area -->
<div
class="flex-grow relative flex items-end justify-between gap-3 pb-4 pt-4 px-1"
>
<!-- Grid Lines -->
<div
class="absolute inset-x-0 top-4 bottom-4 flex flex-col justify-between pointer-events-none opacity-20"
>
<div
class="border-t border-dashed border-white/10 w-full h-px"
></div>
<div
class="border-t border-dashed border-white/10 w-full h-px"
></div>
<div
class="border-t border-dashed border-white/10 w-full h-px"
></div>
<div
class="border-t border-dashed border-white/10 w-full h-px"
></div>
</div>
<!-- Jan -->
<div
class="flex-1 h-full flex flex-col justify-end relative group reveal-hidden"
>
<div
class="w-full flex flex-col gap-[1px] h-[35%] animate-bar-reveal"
style="animation-delay: 0ms"
>
<div
class="w-full bg-red-500 rounded-t-[1px] flex-1 opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-red-900/60 flex-[1.5] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-neutral-700 rounded-b-[1px] flex-[0.8] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
</div>
<span
class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-neutral-600 font-mono uppercase tracking-wider"
>
Jan
</span>
</div>
<!-- Feb -->
<div
class="flex-1 h-full flex flex-col justify-end relative group reveal-hidden"
>
<div
class="w-full flex flex-col gap-[1px] h-[65%] animate-bar-reveal"
style="animation-delay: 100ms"
>
<div
class="w-full bg-red-500 rounded-t-[1px] flex-[1.2] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-red-900/60 flex-[1] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-neutral-700 rounded-b-[1px] flex-[1] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
</div>
<span
class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-neutral-600 font-mono uppercase tracking-wider"
>
Feb
</span>
</div>
<!-- Mar -->
<div
class="flex-1 h-full flex flex-col justify-end relative group reveal-hidden"
>
<div
class="w-full flex flex-col gap-[1px] h-[50%] animate-bar-reveal"
style="animation-delay: 200ms"
>
<div
class="w-full bg-red-500 rounded-t-[1px] flex-[0.8] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-red-900/60 flex-[2] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-neutral-700 rounded-b-[1px] flex-[1] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
</div>
<span
class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-neutral-600 font-mono uppercase tracking-wider"
>
Mar
</span>
</div>
<!-- Apr -->
<div
class="flex-1 h-full flex flex-col justify-end relative group reveal-hidden"
>
<div
class="w-full flex flex-col gap-[1px] h-[85%] animate-bar-reveal"
style="animation-delay: 300ms"
>
<div
class="w-full bg-red-500 rounded-t-[1px] flex-[1.5] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-red-900/60 flex-[1.2] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-neutral-700 rounded-b-[1px] flex-[1] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
</div>
<span
class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-neutral-600 font-mono uppercase tracking-wider"
>
Apr
</span>
</div>
<!-- May -->
<div
class="flex-1 h-full flex flex-col justify-end relative group reveal-hidden"
>
<div
class="w-full flex flex-col gap-[1px] h-[55%] animate-bar-reveal"
style="animation-delay: 400ms"
>
<div
class="w-full bg-red-500 rounded-t-[1px] flex-[1] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-red-900/60 flex-[1.5] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-neutral-700 rounded-b-[1px] flex-[0.8] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
</div>
<span
class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-neutral-600 font-mono uppercase tracking-wider"
>
May
</span>
</div>
<!-- Jun -->
<div
class="flex-1 h-full flex flex-col justify-end relative group reveal-hidden"
>
<div
class="w-full flex flex-col gap-[1px] h-[75%] animate-bar-reveal"
style="animation-delay: 500ms"
>
<div
class="w-full bg-red-500 rounded-t-[1px] flex-[1.3] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-red-900/60 flex-[1] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
<div
class="w-full bg-neutral-700 rounded-b-[1px] flex-[1.2] opacity-90 transition-all duration-300 group-hover:brightness-110"
></div>
</div>
<span
class="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[9px] text-neutral-600 font-mono uppercase tracking-wider"
>
Jun
</span>
</div>
</div>
</div>
<!-- Right Panel: Settings -->
<div
class="w-2/5 h-full flex flex-col justify-center p-5 bg-neutral-950/30"
>
<style>
@keyframes cursor-path {
0%, 20% { top: 48px; left: 85%; }
25%, 45% { top: 84px; left: 85%; }
50%, 70% { top: 120px; left: 85%; }
75%, 95% { top: 156px; left: 85%; }
100% { top: 48px; left: 85%; }
}
@keyframes cursor-click {
0%, 4%, 8%, 14%, 18%, 24%, 29%, 33%, 39%, 43%, 49%, 54%, 58%, 64%, 68%, 74%, 79%, 83%, 89%, 93%, 100% { transform: scale(1); }
6%, 16%, 31%, 41%, 56%, 66%, 81%, 91% { transform: scale(0.85); }
}
/* Toggle & Row Animations - Synchronized 16s Loop */
@keyframes row-active {
0%, 20% { background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.05); }
21%, 100% { background-color: transparent; border-color: transparent; }
}
@keyframes toggle-state {
0%, 5% { background-color: #262626; border-color: transparent; }
6%, 15% { background-color: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.5); }
16%, 100% { background-color: #262626; border-color: transparent; }
}
@keyframes knob-slide {
0%, 5% { left: 2px; background-color: #737373; }
6%, 15% { left: 16px; background-color: #ef4444; }
16%, 100% { left: 2px; background-color: #737373; }
}
@keyframes text-active {
0%, 5% { color: #a3a3a3; }
6%, 15% { color: #ffffff; }
16%, 100% { color: #a3a3a3; }
}
.animate-cursor { animation: cursor-path 16s cubic-bezier(0.4, 0, 0.2, 1) infinite, cursor-click 16s ease-in-out infinite; }
/* Staggered Animations for Items */
.item-1-row { animation: row-active 16s step-end infinite; }
.item-1-text { animation: text-active 16s linear infinite; }
.item-1-toggle { animation: toggle-state 16s linear infinite; }
.item-1-knob { animation: knob-slide 16s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.item-2-row { animation: row-active 16s step-end infinite; animation-delay: 4s; }
.item-2-text { animation: text-active 16s linear infinite; animation-delay: 4s; }
.item-2-toggle { animation: toggle-state 16s linear infinite; animation-delay: 4s; }
.item-2-knob { animation: knob-slide 16s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 4s; }
.item-3-row { animation: row-active 16s step-end infinite; animation-delay: 8s; }
.item-3-text { animation: text-active 16s linear infinite; animation-delay: 8s; }
.item-3-toggle { animation: toggle-state 16s linear infinite; animation-delay: 8s; }
.item-3-knob { animation: knob-slide 16s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 8s; }
.item-4-row { animation: row-active 16s step-end infinite; animation-delay: 12s; }
.item-4-text { animation: text-active 16s linear infinite; animation-delay: 12s; }
.item-4-toggle { animation: toggle-state 16s linear infinite; animation-delay: 12s; }
.item-4-knob { animation: knob-slide 16s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation-delay: 12s; }
</style>
<div class="flex flex-col gap-3.5 relative">
<!-- Animated Cursor -->
<div
class="animate-cursor absolute z-50 pointer-events-none drop-shadow-2xl will-change-transform"
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.5 3.5L11.5 19.5L14.5 12.5L21.5 12.5L5.5 3.5Z"
fill="white"
stroke="black"
stroke-width="1.5"
stroke-linejoin="round"
></path>
</svg>
</div>
<!-- 1: Compact (Static Inactive) -->
<div
class="flex items-center justify-between px-2 py-1 -mx-2 rounded border border-transparent"
>
<span class="text-[10px] font-medium text-neutral-400">
Compact
</span>
<div class="w-7 h-3.5 bg-neutral-800 rounded-full relative">
<div
class="absolute left-0.5 top-0.5 w-2.5 h-2.5 bg-neutral-500 rounded-full"
></div>
</div>
</div>
<!-- 2: Animated (Loop) -->
<div
class="item-1-row flex items-center justify-between px-2 py-1 -mx-2 rounded border border-transparent transition-colors"
>
<span
class="item-1-text text-[10px] font-medium text-neutral-400 transition-colors"
>
Animated
</span>
<div
class="item-1-toggle w-7 h-3.5 bg-neutral-800 rounded-full relative border border-transparent transition-colors"
>
<div
class="item-1-knob absolute left-0.5 top-0.5 w-2.5 h-2.5 bg-neutral-500 rounded-full shadow-sm transition-all"
></div>
</div>
</div>
<!-- 3: Highlights (Loop) -->
<div
class="item-2-row flex items-center justify-between px-2 py-1 -mx-2 rounded border border-transparent transition-colors"
>
<span
class="item-2-text text-[10px] font-medium text-neutral-400 transition-colors"
>
Highlights
</span>
<div
class="item-2-toggle w-7 h-3.5 bg-neutral-800 rounded-full relative border border-transparent transition-colors"
>
<div
class="item-2-knob absolute left-0.5 top-0.5 w-2.5 h-2.5 bg-neutral-500 rounded-full shadow-sm transition-all"
></div>
</div>
</div>
<!-- 4: Trend Lines (Loop) -->
<div
class="item-3-row flex items-center justify-between px-2 py-1 -mx-2 rounded border border-transparent transition-colors"
>
<span
class="item-3-text text-[10px] font-medium text-neutral-400 transition-colors"
>
Trend Lines
</span>
<div
class="item-3-toggle w-7 h-3.5 bg-neutral-800 rounded-full relative border border-transparent transition-colors"
>
<div
class="item-3-knob absolute left-0.5 top-0.5 w-2.5 h-2.5 bg-neutral-500 rounded-full shadow-sm transition-all"
></div>
</div>
</div>
<!-- 5: Rounding (Loop) -->
<div
class="item-4-row flex items-center justify-between px-2 py-1 -mx-2 rounded border border-transparent transition-colors"
>
<span
class="item-4-text text-[10px] font-medium text-neutral-400 transition-colors"
>
Rounding
</span>
<div
class="item-4-toggle w-7 h-3.5 bg-neutral-800 rounded-full relative border border-transparent transition-colors"
>
<div
class="item-4-knob absolute left-0.5 top-0.5 w-2.5 h-2.5 bg-neutral-500 rounded-full shadow-sm transition-all"
></div>
</div>
</div>
<!-- 6: Brand Clrs (Static Inactive) -->
<div
class="flex items-center justify-between px-2 py-1 -mx-2 rounded border border-transparent"
>
<span class="text-[10px] font-medium text-neutral-400">
Brand Clrs
</span>
<div class="w-7 h-3.5 bg-neutral-800 rounded-full relative">
<div
class="absolute left-0.5 top-0.5 w-2.5 h-2.5 bg-neutral-500 rounded-full"
></div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-grow">
<span class="font-mono text-red-500 text-xs block mb-3">04</span>
<h3
class="text-xl text-white font-medium uppercase tracking-widest mb-3 reveal-hidden"
>
Strategy
</h3>
<p
class="text-neutral-400 text-sm leading-relaxed mb-6 reveal-hidden"
>
Data-driven roadmaps to navigate the future.
</p>
</div>
<div class="mt-auto pt-6 border-t border-white/5">
<span
class="text-xs text-neutral-500 group-hover:text-white transition-colors flex items-center gap-2"
>
Our Methodology
<iconify-icon
icon="solar:arrow-right-linear"
class="group-hover:translate-x-1 transition-transform"
></iconify-icon>
</span>
</div>
</div>
</div>
</div>
</section>
<!-- TEXT BANNER SECTION -->
<section
class="overflow-hidden bg-neutral-950 w-full border-white/10 border-t relative"
>
<!-- Grid Background Overlay -->
<div
class="absolute inset-0 w-full h-full grid grid-cols-1 md:grid-cols-4 pointer-events-none"
>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="hidden md:block"></div>
</div>
<div
class="z-10 grid grid-cols-1 md:grid-cols-4 w-full relative"
style=""
>
<div
class="hidden md:block bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ea262fd9-14f0-4917-be69-86fd3b302ccd_1600w.webp)] bg-cover bg-center"
style=""
></div>
<!-- Spacer for 1st column -->
<div
class="md:col-span-3 flex items-center py-20 md:py-32 pl-6 pr-6 md:pl-8"
>
<h2
class="md:text-7xl lg:text-9xl leading-none text-5xl font-medium text-white tracking-tighter font-syne reveal-hidden"
>
11 years in the game
</h2>
</div>
</div>
</section>
<!-- ELEVATED FEATURES SECTION -->
<section
class="z-20 bg-neutral-950 w-full border-white/10 border-t relative"
>
<div
class="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-white/10"
>
<div
class="md:col-span-1 flex flex-col p-8 md:p-12 md:sticky md:top-0 h-fit lg:h-[600px] justify-between"
>
<div class="flex flex-col gap-x-1 gap-y-1">
<span class="block text-xs text-neutral-600 font-mono mb-4">
/// FEATURED WORK
</span>
<h2
class="leading-[0.9] text-4xl font-medium text-white tracking-tighter font-syne mb-6 reveal-hidden"
>
Luminal Studio
</h2>
<p
class="text-neutral-400 text-sm leading-relaxed mb-8 reveal-hidden"
>
We believe great design is not just how something looks — it’s how
it works.
</p>
</div>
<div class="relative group cursor-pointer w-max mt-12 reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-sm font-medium tracking-[0.2em] uppercase">
View All Expertise
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="18"
height="18"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
<div class="md:col-span-3 flex flex-col divide-y divide-white/10">
<div
class="group grid grid-cols-1 hover:bg-white/[0.02] transition-colors duration-500 md:p-12 lg:grid-cols-2 lg:pt-6 lg:pb-6 lg:pl-6 lg:pr-6 pt-6 pr-6 pb-6 pl-6 gap-x-8 gap-y-8 reveal-hidden"
>
<div class="flex flex-col justify-center">
<span class="text-red-500 font-mono text-[10px] mb-4">
01 — INTERACTIVE
</span>
<h3
class="text-2xl text-white font-medium font-syne mb-4 reveal-hidden"
>
Kinetic Experience Design
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-md reveal-hidden"
>
We build interfaces that don't just sit there—they react. Fluid
motion and micro-interactions designed to guide the eye and
reduce cognitive friction.
</p>
</div>
<div
class="overflow-hidden flex bg-center bg-neutral-900/50 h-48 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5daa544b-07e8-4fcd-98c6-1fb55bef2131_1600w.png)] bg-cover border-white/5 border rounded-none relative items-center justify-center"
></div>
</div>
<div
class="group grid grid-cols-1 lg:grid-cols-2 gap-8 p-8 md:p-12 hover:bg-white/[0.02] transition-colors duration-500 reveal-hidden"
>
<div class="flex flex-col justify-center">
<span class="text-red-500 font-mono text-[10px] mb-4">
02 — ARCHITECTURE
</span>
<h3
class="text-2xl text-white font-medium font-syne mb-4 reveal-hidden"
>
Scalable Brand Systems
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-md reveal-hidden"
>
A design language is a living organism. We create modular assets
and component libraries that evolve alongside your product's
growth.
</p>
</div>
<div
class="overflow-hidden flex bg-center bg-neutral-900/50 h-48 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/26beb5d6-9395-4655-bd45-0375a5af0ffb_1600w.png)] bg-cover border-white/5 border rounded-none relative items-center justify-center"
></div>
</div>
<div
class="group grid grid-cols-1 lg:grid-cols-2 gap-8 p-8 md:p-12 hover:bg-white/[0.02] transition-colors duration-500 reveal-hidden"
>
<div class="flex flex-col justify-center">
<span class="text-red-500 font-mono text-[10px] mb-4">
03 — INTELLIGENCE
</span>
<h3
class="text-2xl text-white font-medium font-syne mb-4 reveal-hidden"
>
Performance-Led Creative
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-md reveal-hidden"
>
Art for the sake of impact. We align high-end aesthetics with
conversion data, ensuring your digital presence is as effective
as it is beautiful.
</p>
</div>
<div
class="overflow-hidden flex bg-center bg-neutral-900/50 h-48 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/0ecb27cd-9dd3-4e8a-8f50-529e27caa666_1600w.png)] bg-cover border-white/5 border rounded-none relative items-center justify-center"
></div>
</div>
</div>
</div>
</section>
<!-- NEW SECTION: STUDIO VALUE / WHY LUMINAL -->
<section
class="z-20 bg-neutral-950 w-full border-white/10 border-t relative"
>
<div
class="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-white/10"
>
<!-- Sticky Header Column -->
<div
class="md:col-span-1 flex flex-col min-h-[400px] h-full pt-8 pr-8 pb-8 pl-8"
>
<div class="">
<span class="font-mono text-neutral-600 text-xs block mb-4">
/// OUR PROCESS
</span>
<h2
class="text-3xl font-medium text-white tracking-tight font-syne mb-4 reveal-hidden"
>
From Chaos to Clarity
</h2>
<p
class="text-neutral-400 text-sm leading-relaxed mb-8 reveal-hidden"
>
Our proven methodology transforms complex challenges into elegant,
scalable digital solutions through a rigorous four-step journey.
</p>
</div>
<div class="relative group cursor-pointer w-max mt-12 reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-xs font-medium tracking-[0.2em] uppercase">
Start Project
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
<!-- Values / Steps -->
<div class="md:col-span-3 flex flex-col">
<!-- ROW 1 -->
<div
class="group grid grid-cols-[140px_1fr] border-b border-white/10 hover:bg-white/[0.015] transition-colors reveal-hidden"
>
<!-- Visual -->
<div
class="p-8 flex flex-col justify-between border-r border-white/10"
>
<div
class="w-10 h-10 flex items-center justify-center text-neutral-400 group-hover:text-red-500 transition-colors"
>
<iconify-icon
icon="solar:magnifer-linear"
width="20"
height="20"
></iconify-icon>
</div>
<span
class="font-mono text-xs text-neutral-700 group-hover:text-red-500/50"
>
01
</span>
</div>
<!-- Content -->
<div class="p-8 flex flex-col justify-center">
<h3
class="text-xl text-white font-medium tracking-tight mb-3 reveal-hidden"
>
Discovery & Strategy
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-[65ch] reveal-hidden"
>
We dive deep into your business goals, user needs, and market
landscape to define a clear, actionable roadmap for success.
</p>
</div>
</div>
<!-- ROW 2 -->
<div
class="group grid grid-cols-[140px_1fr] border-b border-white/10 hover:bg-white/[0.015] transition-colors reveal-hidden"
>
<div
class="p-8 flex flex-col justify-between border-r border-white/10"
>
<div
class="w-10 h-10 flex items-center justify-center text-neutral-400 group-hover:text-red-500 transition-colors"
>
<iconify-icon
icon="solar:pen-new-square-linear"
width="20"
height="20"
></iconify-icon>
</div>
<span
class="font-mono text-xs text-neutral-700 group-hover:text-red-500/50"
>
02
</span>
</div>
<div class="p-8 flex flex-col justify-center">
<h3
class="text-xl text-white font-medium tracking-tight mb-3 reveal-hidden"
>
Design & Prototyping
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-[65ch] reveal-hidden"
>
We craft intuitive interfaces and distinct visual systems,
iterating rapidly on high-fidelity prototypes to validate
concepts before code.
</p>
</div>
</div>
<!-- ROW 3 -->
<div
class="group grid grid-cols-[140px_1fr] border-b border-white/10 hover:bg-white/[0.015] transition-colors reveal-hidden"
>
<div
class="p-8 flex flex-col justify-between border-r border-white/10"
>
<div
class="w-10 h-10 flex items-center justify-center text-neutral-400 group-hover:text-red-500 transition-colors"
>
<iconify-icon
icon="solar:code-square-linear"
width="20"
height="20"
></iconify-icon>
</div>
<span
class="font-mono text-xs text-neutral-700 group-hover:text-red-500/50"
>
03
</span>
</div>
<div class="p-8 flex flex-col justify-center">
<h3
class="text-xl text-white font-medium tracking-tight mb-3 reveal-hidden"
>
Development
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-[65ch] reveal-hidden"
>
Our engineers build robust, scalable architectures using modern
tech stacks, ensuring pixel-perfect implementation and peak
performance.
</p>
</div>
</div>
<!-- ROW 4 -->
<div
class="group grid grid-cols-[140px_1fr] hover:bg-white/[0.015] transition-colors reveal-hidden"
>
<div
class="p-8 flex flex-col justify-between border-r border-white/10"
>
<div
class="w-10 h-10 flex items-center justify-center text-neutral-400 group-hover:text-red-500 transition-colors"
>
<iconify-icon
icon="solar:rocket-2-linear"
width="20"
height="20"
></iconify-icon>
</div>
<span
class="font-mono text-xs text-neutral-700 group-hover:text-red-500/50"
>
04
</span>
</div>
<div class="p-8 flex flex-col justify-center">
<h3
class="text-xl text-white font-medium tracking-tight mb-3 reveal-hidden"
>
Launch & Scale
</h3>
<p
class="text-neutral-500 text-sm leading-relaxed max-w-[65ch] reveal-hidden"
>
We deploy with confidence, monitor real-world usage, and provide
ongoing support to evolve the product as your business grows.
</p>
</div>
</div>
</div>
</div>
</section>
<section
class="z-20 overflow-hidden bg-neutral-950 w-full border-white/10 border-t relative"
>
<!-- Grid Background Overlay -->
<div
class="absolute inset-0 w-full h-full grid grid-cols-1 md:grid-cols-4 pointer-events-none"
>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div class="">
<span class="font-mono text-neutral-600 text-xs block mb-4">
/// Values
</span>
<h2
class="text-3xl font-syne tracking-tight text-white mb-4 font-medium reveal-hidden"
>
Why Luminal?
</h2>
<p
class="text-neutral-400 text-sm leading-relaxed mb-8 reveal-hidden"
>
We don't just design; we engineer outcomes. Our ethos is built on
precision.
</p>
<div class="relative group cursor-pointer w-max mb-8 reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-xs font-medium tracking-[0.2em] uppercase">
Our Values
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
<div class="mt-auto">
<div class="h-px w-full bg-white/10 mb-6"></div>
<span class="text-xs text-neutral-500">Trusted by leaders</span>
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="hidden md:block"></div>
</div>
<div class="z-10 grid grid-cols-1 md:grid-cols-4 w-full relative">
<div
class="hidden md:block bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/09dc0e81-3730-4910-9053-26ecec7a3816_800w.webp)] bg-cover"
></div>
<!-- Spacer for 1st column -->
<div
class="md:col-span-3 flex items-center py-20 md:py-32 pl-6 pr-6 md:pl-8"
>
<h2
class="md:text-7xl lg:text-9xl leading-none text-5xl font-medium text-white tracking-tighter font-syne reveal-hidden"
>
Designed with intention
</h2>
</div>
</div>
</section>
<section
class="z-20 selection:bg-red-500/30 bg-neutral-950 w-full border-white/10 border-t relative"
>
<div class="w-full border-b border-white/10">
<div class="grid grid-cols-1 lg:grid-cols-12 w-full">
<div
class="lg:col-span-8 p-8 lg:p-16 border-b lg:border-b-0 lg:border-r border-white/10"
>
<div class="flex items-center gap-3 mb-8">
<span
class="text-[10px] uppercase text-neutral-500 tracking-[0.3em] font-mono"
>
/// Team
</span>
</div>
<h2
class="text-4xl md:text-6xl lg:text-7xl font-syne tracking-tight text-white leading-[0.9] reveal-hidden"
>
Luminal Studio is a
<br />
<span class="text-neutral-500 italic">creative team</span>
focused
<br />
on digital craft.
</h2>
</div>
<div
class="lg:col-span-4 flex flex-col justify-between p-8 lg:p-12 bg-neutral-900/30"
>
<p
class="text-sm text-neutral-400 leading-relaxed max-w-xs mb-8 reveal-hidden"
>
We believe great design is not just how something looks — it's how
it works and how it solves problems.
</p>
<div class="flex items-center justify-between">
<div class="">
<div class="text-3xl text-white font-light">05</div>
<div
class="text-[9px] font-mono text-neutral-500 uppercase tracking-widest"
>
Operators
</div>
</div>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-sm font-medium tracking-[0.2em] uppercase">
About Us
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="18"
height="18"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="flex flex-col lg:flex-row overflow-hidden bg-neutral-900 w-full h-[600px]"
id="team-container"
>
<article
onclick="setActiveCard(this)"
class="team-card active flex-[3] overflow-hidden cursor-pointer transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group lg:border-b-0 lg:border-r h-full border-white/10 border-b relative reveal-hidden"
>
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/96a71491-ccb5-4cb6-a369-be4b7a348c85_1600w.webp"
class="transition-all duration-700 group-[.active]:scale-110 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0 scale-105 grayscale group-[.active]:grayscale-0"
/>
<div class="absolute inset-x-0 bottom-0 p-8 z-20">
<span
class="block text-[9px] font-mono text-red-500 mb-2 tracking-widest opacity-0 group-[.active]:opacity-100 transition-opacity uppercase"
>
01 // Design
</span>
<h3
class="text-2xl text-white font-medium uppercase tracking-tighter reveal-hidden"
>
Marcus Thorne
</h3>
<div
class="grid grid-rows-[0fr] group-[.active]:grid-rows-[1fr] transition-[grid-template-rows] duration-700"
>
<div class="overflow-hidden">
<p class="text-neutral-400 text-xs mt-4 max-w-xs reveal-hidden">
Lead System Architect and Interface specialist.
</p>
</div>
</div>
</div>
</article>
<article
onclick="setActiveCard(this)"
class="team-card relative flex-1 h-full overflow-hidden cursor-pointer transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group border-b lg:border-b-0 lg:border-r border-white/10 reveal-hidden"
>
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f7438fab-4b42-40cb-a36a-fd1c3446a888_800w.webp"
class="transition-all duration-700 w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0 grayscale group-[.active]:grayscale-0"
/>
<div class="absolute inset-x-0 bottom-0 p-8 z-20">
<span
class="block text-[9px] font-mono text-red-500 mb-2 tracking-widest opacity-0 group-[.active]:opacity-100 transition-opacity uppercase"
>
02 // Motion
</span>
<h3
class="text-2xl text-white font-medium uppercase tracking-tighter reveal-hidden"
>
Ava Lin
</h3>
<div
class="grid grid-rows-[0fr] group-[.active]:grid-rows-[1fr] transition-[grid-template-rows] duration-700"
>
<div class="overflow-hidden">
<p class="text-neutral-400 text-xs mt-4 max-w-xs reveal-hidden">
Motion Director focused on fluid experiences.
</p>
</div>
</div>
</div>
</article>
<article
onclick="setActiveCard(this)"
class="team-card relative flex-1 h-full overflow-hidden cursor-pointer transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group border-b lg:border-b-0 lg:border-r border-white/10 reveal-hidden"
>
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/74117bff-45d0-4c3e-ae97-12067641be39_800w.webp"
class="absolute inset-0 w-full h-full object-cover transition-all duration-700 grayscale group-[.active]:grayscale-0"
/>
<div class="absolute inset-x-0 bottom-0 p-8 z-20">
<span
class="block text-[9px] font-mono text-red-500 mb-2 tracking-widest opacity-0 group-[.active]:opacity-100 transition-opacity uppercase"
>
03 // Fullstack
</span>
<h3
class="text-2xl text-white font-medium uppercase tracking-tighter reveal-hidden"
>
Noah Reed
</h3>
<div
class="grid grid-rows-[0fr] group-[.active]:grid-rows-[1fr] transition-[grid-template-rows] duration-700"
>
<div class="overflow-hidden">
<p class="text-neutral-400 text-xs mt-4 max-w-xs reveal-hidden">
Bridging the gap between design and production.
</p>
</div>
</div>
</div>
</article>
<article
onclick="setActiveCard(this)"
class="team-card relative flex-1 h-full overflow-hidden cursor-pointer transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group border-b lg:border-b-0 lg:border-r border-white/10 reveal-hidden"
>
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3dbd59c3-a7a5-4515-985e-788ba17917e2_800w.webp"
class="absolute inset-0 w-full h-full object-cover transition-all duration-700 grayscale group-[.active]:grayscale-0"
style=""
/>
<div class="absolute inset-x-0 bottom-0 p-8 z-20">
<span
class="block text-[9px] font-mono text-red-500 mb-2 tracking-widest opacity-0 group-[.active]:opacity-100 transition-opacity uppercase"
>
04 // Data
</span>
<h3
class="text-2xl text-white font-medium uppercase tracking-tighter reveal-hidden"
>
Elena Rossi
</h3>
<div
class="grid grid-rows-[0fr] group-[.active]:grid-rows-[1fr] transition-[grid-template-rows] duration-700"
>
<div class="overflow-hidden">
<p class="text-neutral-400 text-xs mt-4 max-w-xs reveal-hidden">
Specialist in interactive data narratives.
</p>
</div>
</div>
</div>
</article>
<article
onclick="setActiveCard(this)"
class="team-card relative flex-1 h-full overflow-hidden cursor-pointer transition-all duration-700 ease-[cubic-bezier(0.22,1,0.36,1)] group border-b lg:border-b-0 last:border-0 border-white/10 reveal-hidden"
>
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/92f770e8-08ad-4fb2-8858-2d9b385124a7_800w.webp"
class="absolute inset-0 w-full h-full object-cover transition-all duration-700 grayscale group-[.active]:grayscale-0"
style=""
/>
<div class="absolute inset-x-0 bottom-0 p-8 z-20">
<span
class="block text-[9px] font-mono text-red-500 mb-2 tracking-widest opacity-0 group-[.active]:opacity-100 transition-opacity uppercase"
>
05 // Web3
</span>
<h3
class="text-2xl text-white font-medium uppercase tracking-tighter reveal-hidden"
>
Elias Vance
</h3>
<div
class="grid grid-rows-[0fr] group-[.active]:grid-rows-[1fr] transition-[grid-template-rows] duration-700"
>
<div class="overflow-hidden">
<p class="text-neutral-400 text-xs mt-4 max-w-xs reveal-hidden">
Protocol engineer and smart contract auditor.
</p>
</div>
</div>
</div>
</article>
</div>
<script class="">
function setActiveCard(element) {
const container = document.getElementById('team-container');
const cards = container.querySelectorAll('.team-card');
cards.forEach(card => {
card.classList.remove('active', 'flex-[3]');
card.classList.add('flex-1');
});
element.classList.add('active', 'flex-[3]');
element.classList.remove('flex-1');
}
</script>
</section>
<!-- CLIENTS SECTION -->
<section
class="z-20 overflow-hidden bg-neutral-950 w-full border-white/10 border-t relative"
>
<div
class="grid grid-cols-1 md:grid-cols-12 divide-y md:divide-y-0 md:divide-x divide-white/10"
>
<div
class="md:col-span-3 flex flex-col lg:p-12 z-30 bg-neutral-950 pt-8 pr-8 pb-8 pl-8 justify-between"
>
<div class="">
<span class="block text-xs text-neutral-600 font-mono mb-4">
/// TESTIMONIALS
</span>
<h2
class="text-3xl font-medium text-white tracking-tight font-syne mb-4 reveal-hidden"
>
What Our Clients Say
</h2>
<p
class="text-neutral-400 text-sm leading-relaxed mb-8 reveal-hidden"
>
Real feedback from founders and teams we’ve partnered with —
sharing how our collaboration helped elevate their product, refine
their vision, and deliver meaningful results.
</p>
</div>
<div class="mt-12 space-y-4">
<div class="flex items-center gap-4 border-t border-white/5 pt-6">
<span class="text-2xl font-syne text-white">98%</span>
<span
class="text-[9px] font-mono text-neutral-600 uppercase tracking-widest leading-tight"
>
Retention
<br />
Rate
</span>
</div>
</div>
</div>
<div
class="md:col-span-9 flex min-h-[500px] bg-neutral-950 relative items-center"
>
<div
class="absolute left-0 top-0 bottom-0 w-32 z-20 bg-gradient-to-r from-neutral-950 to-transparent pointer-events-none"
></div>
<div
class="absolute right-0 top-0 bottom-0 w-32 z-20 bg-gradient-to-l from-neutral-950 to-transparent pointer-events-none"
></div>
<div
class="flex animate-marquee-infinite w-max hover:[animation-play-state:paused]"
>
<div
class="w-[400px] lg:w-[500px] px-12 py-16 flex flex-col justify-between border-r border-white/5 group transition-all duration-500 hover:bg-white/[0.01]"
>
<div class="mb-12">
<span
class="text-[9px] font-mono text-neutral-700 uppercase tracking-[0.3em] mb-6 block"
>
Ref: 001 // Apex
</span>
<blockquote
class="text-2xl lg:text-3xl text-neutral-300 font-light leading-tight font-syne tracking-tight group-hover:text-white transition-colors duration-500"
>
"The attention to detail and creative direction redefined our
brand identity."
</blockquote>
</div>
<div
class="flex items-center gap-5 translate-y-4 group-hover:translate-y-0 transition-all duration-700"
>
<div class="relative">
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/93dbb379-52e9-4ded-bc8a-c0f05aef82c0_320w.webp"
class="w-10 h-10 rounded-none object-cover"
style=""
/>
<div
class="absolute inset-0 border border-red-500/30 -m-1"
></div>
</div>
<div class="">
<div
class="text-white text-[11px] font-bold uppercase tracking-widest"
>
Alex Morgan
</div>
<div class="text-neutral-600 text-[10px] font-mono italic">
CEO, Apex Dynamics
</div>
</div>
</div>
</div>
<div
class="w-[400px] lg:w-[500px] px-12 py-16 flex flex-col justify-between border-r border-white/5 group transition-all duration-500 hover:bg-white/[0.01]"
>
<div class="mb-12">
<span
class="text-[9px] font-mono text-neutral-700 uppercase tracking-[0.3em] mb-6 block"
>
Ref: 002 // Nexus
</span>
<blockquote
class="text-2xl lg:text-3xl text-neutral-300 font-light leading-tight font-syne tracking-tight group-hover:text-white transition-colors duration-500"
>
"A masterclass in design systems. Scalability exceeded our
expectations."
</blockquote>
</div>
<div
class="flex items-center gap-5 translate-y-4 group-hover:translate-y-0 transition-all duration-700"
>
<div class="relative">
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e6ac2623-ccad-4751-8c7d-782f07a9263d_320w.webp"
class="w-10 h-10 rounded-none object-cover"
style=""
/>
<div
class="absolute inset-0 border border-red-500/30 -m-1"
></div>
</div>
<div class="">
<div
class="text-white text-[11px] font-bold uppercase tracking-widest"
>
Sarah Chen
</div>
<div class="text-neutral-600 text-[10px] font-mono italic">
CTO, Nexus Corp
</div>
</div>
</div>
</div>
<div
class="w-[400px] lg:w-[500px] px-12 py-16 flex flex-col justify-between border-r border-white/5 group transition-all duration-500 hover:bg-white/[0.01]"
>
<div class="mb-12">
<span
class="text-[9px] font-mono text-neutral-700 uppercase tracking-[0.3em] mb-6 block"
>
Ref: 003 // Horizon
</span>
<blockquote
class="text-2xl lg:text-3xl text-neutral-300 font-light leading-tight font-syne tracking-tight group-hover:text-white transition-colors duration-500"
>
"Transformation was instant. Metrics improved thanks to the
new UX strategy."
</blockquote>
</div>
<div
class="flex items-center gap-5 translate-y-4 group-hover:translate-y-0 transition-all duration-700"
>
<div class="relative">
<img
src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/30fed759-ea9f-42e9-8249-9ea7f44c811c_320w.webp"
class="w-10 h-10 rounded-none object-cover"
style=""
/>
<div
class="absolute inset-0 border border-red-500/30 -m-1"
></div>
</div>
<div class="">
<div
class="text-white text-[11px] font-bold uppercase tracking-widest"
>
Marcus Thorne
</div>
<div class="text-neutral-600 text-[10px] font-mono italic">
Director, Horizon
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section
class="z-20 overflow-hidden bg-neutral-950 w-full border-white/10 border-t relative"
>
<!-- Grid Background Overlay -->
<div
class="absolute inset-0 w-full h-full grid grid-cols-1 md:grid-cols-4 pointer-events-none"
>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="border-r border-white/10 h-full hidden md:block relative">
<div
class="absolute -right-[5px] -top-[5px] text-white/30 text-xs hidden md:block"
>
+
</div>
</div>
<div class="hidden md:block"></div>
</div>
<div class="z-10 grid grid-cols-1 md:grid-cols-4 w-full relative">
<div
class="hidden md:block bg-center bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/09dc0e81-3730-4910-9053-26ecec7a3816_800w.webp)] bg-cover"
></div>
<!-- Spacer for 1st column -->
<div
class="md:col-span-3 flex md:py-32 md:pl-8 pt-20 pr-6 pb-20 pl-6 items-center"
>
<h2
class="md:text-7xl lg:text-9xl leading-none text-5xl font-medium text-white tracking-tighter font-syne reveal-hidden"
>
Designed with intention
</h2>
</div>
</div>
</section>
<!-- PRICING SECTION -->
<section
class="z-20 bg-neutral-950 w-full border-white/10 border-t relative"
>
<div
class="grid grid-cols-1 md:grid-cols-12 divide-y md:divide-y-0 md:divide-x divide-white/10"
>
<div
class="md:col-span-5 flex flex-col lg:p-16 bg-neutral-950 pt-8 pr-8 pb-8 pl-8 justify-between"
>
<div class="max-w-md">
<span class="font-mono text-neutral-600 text-xs block mb-4">
/// Pricing
</span>
<h2
class="text-5xl lg:text-7xl font-syne tracking-tighter text-white mb-10 leading-[0.85] reveal-hidden"
>
Pricing
<br />
<span class="text-neutral-600 italic">transparent</span>
<br />
by design.
</h2>
<div class="space-y-6 text-sm text-neutral-400 leading-relaxed">
<p class="reveal-hidden">
We deliver tangible results. Our packages are designed as
complete ecosystems for growing brands.
</p>
<p
class="text-[10px] font-mono uppercase tracking-widest text-neutral-600 italic border-l border-red-600 pl-4 reveal-hidden"
>
"Good design is expensive, bad design costs a fortune."
</p>
</div>
<div class="relative group cursor-pointer w-max mt-8 reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-xs font-medium tracking-[0.2em] uppercase">
View Plans
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
<div
class="mt-16 pt-8 border-t border-white/5 flex items-center gap-8"
>
<div>
<span
class="block text-[9px] font-mono text-neutral-600 uppercase mb-1"
>
Currency
</span>
<span class="text-white text-xs font-mono">USD / EUR</span>
</div>
<div class="">
<span
class="block text-[9px] font-mono text-neutral-600 uppercase mb-1"
>
Availability
</span>
<span class="text-emerald-500 text-xs font-mono uppercase">
● Q2 2026 Open
</span>
</div>
</div>
</div>
<div class="md:col-span-7 flex flex-col divide-y divide-white/10">
<!-- Item 1 -->
<div
class="group relative p-8 lg:p-16 transition-all duration-500 hover:bg-white/[0.02] reveal-hidden"
>
<div
class="flex flex-col md:flex-row md:items-start justify-between gap-8"
>
<div class="flex-1">
<span
class="font-mono text-red-500 text-[10px] tracking-widest uppercase mb-4 block"
>
Archive-01 // Identity
</span>
<h3
class="text-4xl text-white font-syne font-medium mb-6 uppercase tracking-tighter group-hover:translate-x-2 transition-transform duration-500 reveal-hidden"
>
Starter Core
</h3>
<p
class="text-neutral-500 text-sm max-w-sm mb-8 leading-relaxed reveal-hidden"
>
L'essentiel pour définir une présence de marque solide. Inclus
stratégie de marque, logo et direction artistique.
</p>
<ul
class="flex flex-wrap gap-x-6 gap-y-2 text-[10px] font-mono text-neutral-400 uppercase"
>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
Visual ID
</li>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
Guidelines
</li>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
2 Weeks Lead
</li>
</ul>
</div>
<div class="flex flex-col items-end justify-between self-stretch">
<div
class="text-4xl font-syne text-white tracking-tighter mb-4"
>
$2,500
</div>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span
class="text-xs font-medium tracking-[0.2em] uppercase"
>
Initialize
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div
class="group relative p-8 lg:p-16 transition-all duration-500 bg-neutral-900/10 hover:bg-white/[0.02] reveal-hidden"
>
<div
class="flex flex-col md:flex-row md:items-start justify-between gap-8"
>
<div class="flex-1">
<span
class="font-mono text-red-500 text-[10px] tracking-widest uppercase mb-4 block"
>
Archive-02 // Full Stack
</span>
<h3
class="text-4xl text-white font-syne font-medium mb-6 uppercase tracking-tighter group-hover:translate-x-2 transition-transform duration-500 reveal-hidden"
>
Premium Ops
</h3>
<p
class="text-neutral-500 text-sm max-w-sm mb-8 leading-relaxed reveal-hidden"
>
Une solution de bout en bout. De la conception UX au
déploiement WebGL haute performance avec CMS.
</p>
<ul
class="flex flex-wrap gap-x-6 gap-y-2 text-[10px] font-mono text-neutral-400 uppercase"
>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
UI/UX Design
</li>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
WebGL/3D
</li>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
CMS Support
</li>
</ul>
</div>
<div class="flex flex-col items-end justify-between self-stretch">
<div class="flex flex-col items-end">
<span
class="text-[9px] font-mono text-red-500 uppercase mb-1 tracking-widest"
>
Starting at
</span>
<div
class="text-4xl font-syne text-white tracking-tighter mb-4"
>
$5,000
</div>
</div>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span
class="text-xs font-medium tracking-[0.2em] uppercase"
>
Book Session
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</div>
</div>
<!-- Item 3 (New Agency) -->
<div
class="group relative p-8 lg:p-16 transition-all duration-500 hover:bg-white/[0.02] reveal-hidden"
>
<div
class="flex flex-col md:flex-row md:items-start justify-between gap-8"
>
<div class="flex-1">
<span
class="font-mono text-red-500 text-[10px] tracking-widest uppercase mb-4 block"
>
Archive-03 // Enterprise
</span>
<h3
class="text-4xl text-white font-syne font-medium mb-6 uppercase tracking-tighter group-hover:translate-x-2 transition-transform duration-500 reveal-hidden"
>
Agency Scale
</h3>
<p
class="text-neutral-500 text-sm max-w-sm mb-8 leading-relaxed reveal-hidden"
>
Pour les grandes structures nécessitant une infrastructure sur
mesure et un support dédié 24/7.
</p>
<ul
class="flex flex-wrap gap-x-6 gap-y-2 text-[10px] font-mono text-neutral-400 uppercase"
>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
Dedicated Team
</li>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
SLA Support
</li>
<li class="flex items-center gap-2">
<span class="w-1 h-1 bg-red-600"></span>
Audit & Security
</li>
</ul>
</div>
<div class="flex flex-col items-end justify-between self-stretch">
<div class="flex flex-col items-end">
<span
class="text-[9px] font-mono text-red-500 uppercase mb-1 tracking-widest"
>
Custom Quote
</span>
<div
class="text-4xl font-syne text-white tracking-tighter mb-4"
>
Custom
</div>
</div>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span
class="text-xs font-medium tracking-[0.2em] uppercase"
>
Contact Us
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- NEW SECTION: CTA LET'S BUILD TOGETHER -->
<section
class="overflow-hidden flex bg-center md:py-48 w-full z-20 border-white/10 border-t pt-32 pb-32 relative items-center justify-center"
>
<!-- Glow Effect -->
<div
class="absolute inset-0 flex items-center justify-center pointer-events-none"
>
<div
class="w-[40vw] h-[40vw] bg-red-600/5 blur-[120px] rounded-full mix-blend-screen"
></div>
</div>
<!-- Content -->
<div class="relative z-10 flex flex-col items-center text-center px-6">
<h2
class="text-4xl md:text-6xl lg:text-8xl font-syne tracking-tighter text-white font-semibold mb-6 reveal-hidden"
>
Let's build together.
</h2>
<p
class="text-neutral-400 text-base md:text-lg max-w-lg mb-12 leading-relaxed reveal-hidden"
>
Turn your vision into a digital reality. Partner with us to create
experiences that define the future.
</p>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-sm font-medium tracking-[0.2em] uppercase">
Start Project
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="18"
height="18"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
</section>
<footer
class="relative z-20 w-full border-t border-white/10 bg-neutral-950"
>
<div
class="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-white/10"
>
<div
class="p-8 md:col-span-1 flex flex-col justify-between h-full min-h-[300px]"
>
<div class="">
<span class="font-mono text-neutral-600 text-xs block mb-4">
///
</span>
<h2
class="text-3xl font-syne tracking-tight text-white mb-4 font-medium reveal-hidden"
>
Connect
</h2>
<p
class="text-neutral-400 text-sm leading-relaxed mb-8 reveal-hidden"
>
Ready to start your next project? Let's build something
extraordinary together.
</p>
</div>
<div class="relative group cursor-pointer w-max reveal-hidden">
<div
class="absolute -inset-[1px] rounded-md bg-[conic-gradient(from_0deg_at_50%_50%,transparent_0deg,transparent_300deg,#ef4444_360deg)] opacity-0 group-hover:opacity-100 transition-opacity duration-300 animate-border-spin blur-[0.5px]"
></div>
<div
class="relative bg-neutral-900 border border-red-500/20 text-neutral-300 px-5 py-2.5 rounded-md flex items-center gap-3 shadow-lg shadow-red-500/5 h-full w-full group-hover:text-red-400 group-hover:border-red-500/50 transition-all duration-300"
>
<span class="text-xs font-medium tracking-[0.2em] uppercase">
Contact Us
</span>
<iconify-icon
icon="solar:arrow-right-up-linear"
width="16"
height="16"
class="text-neutral-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all duration-300"
></iconify-icon>
</div>
</div>
</div>
<div class="p-8 md:col-span-3 grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="">
<h4
class="text-white text-sm font-medium uppercase tracking-widest mb-6"
>
Sitemap
</h4>
<ul class="space-y-4">
<li>
<a
href="#"
class="text-neutral-500 text-sm hover:text-white transition-colors"
>
Home
</a>
</li>
<li>
<a
href="#"
class="text-neutral-500 text-sm hover:text-white transition-colors"
>
Work
</a>
</li>
<li>
<a
href="#"
class="text-neutral-500 text-sm hover:text-white transition-colors"
>
Agency
</a>
</li>
</ul>
</div>
<div class="">
<h4
class="text-white text-sm font-medium uppercase tracking-widest mb-6"
>
Socials
</h4>
<ul class="space-y-4">
<li class="">
<a
href="#"
class="text-neutral-500 text-sm hover:text-white transition-colors"
>
Instagram
</a>
</li>
<li class="">
<a
href="#"
class="text-neutral-500 text-sm hover:text-white transition-colors"
>
Twitter
</a>
</li>
<li class="">
<a
href="#"
class="text-neutral-500 text-sm hover:text-white transition-colors"
>
LinkedIn
</a>
</li>
</ul>
</div>
<div class="col-span-2 md:col-span-2">
<h4
class="text-white text-sm font-medium uppercase tracking-widest mb-6"
>
Newsletter
</h4>
<form class="flex flex-col gap-4">
<input
type="email"
placeholder="Enter your email"
class="w-full bg-transparent border-b border-white/20 py-2 text-white text-sm focus:outline-none focus:border-red-500 transition-colors placeholder:text-neutral-700"
/>
<button
class="self-start text-xs text-neutral-400 uppercase tracking-widest hover:text-white transition-colors reveal-hidden"
>
Subscribe
</button>
</form>
</div>
</div>
</div>
<div class="border-t border-white/10 mt-0">
<div
class="px-8 py-6 flex flex-col md:flex-row justify-between items-center gap-4"
>
<span class="text-neutral-600 text-xs">
© 2024 Luminal Studio. All rights reserved.
</span>
<span class="text-neutral-600 text-xs">Designed with precision.</span>
</div>
</div>
</footer>
<script>
function updateTime() {
const now = new Date();
const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit'
</script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.classList.remove("reveal-hidden");
entry.target.classList.add("animate-in");
}, index * 100);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
const targets = document.querySelectorAll("h1, h2, h3, p, button, .group, blockquote");
targets.forEach(el => {
if (!el.closest(".animate-marquee-infinite")) {
el.classList.add("reveal-hidden");
observer.observe(el);
}
});
});
</script>
</body>
</html>