All Prompts
All Prompts
Social Media Automation SaaS Landing Page Template
Шаблон лендинга для SaaS-сервиса автоматизации соцсетей. Адаптивный HTML/CSS дизайн для привлечения клиентов.
Prompt
<html lang="en"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luminous - AI Social Automation</title>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #050505;
}
/* Custom glow for the lightning card */
.electric-card {
box-shadow: 0 0 30px rgba(249, 115, 22, 0.3), inset 0 0 20px rgba(249, 115, 22, 0.1);
}
.electric-border {
background: linear-gradient(180deg, rgba(251, 146, 60, 1) 0%, rgba(251, 146, 60, 0) 100%);
}
/* Starry background effect */
.stars {
background-image:
radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1.5px 1.5px at 90px 40px, #ffffff, rgba(0,0,0,0)),
radial-gradient(1px 1px at 130px 80px, #ffffff, rgba(0,0,0,0));
background-size: 200px 200px;
opacity: 0.2;
}
/* Subtle grid background for app showcase */
.grid-bg {
background-image: linear-gradient(to right, #ffffff05 1px, transparent 1px),
linear-gradient(to bottom, #ffffff05 1px, transparent 1px);
background-size: 24px 24px;
}
/* Hide scrollbar for clean UI look */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
<meta name="disabled-font-classes" content="font-geist,font-roboto,font-montserrat,font-poppins,font-playfair,font-instrument-serif,font-merriweather,font-jakarta,font-manrope,font-space-grotesk,font-work-sans,font-pt-serif,font-geist-mono,font-space-mono,font-quicksand,font-nunito">
<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-entry{animation:fadeInUpBlur 1s cubic-bezier(0.2,0.8,0.2,1) both}.delay-75{animation-delay:75ms}.delay-100{animation-delay:100ms}.delay-150{animation-delay:150ms}.delay-200{animation-delay:200ms}.delay-300{animation-delay:300ms}.delay-500{animation-delay:500ms}.delay-700{animation-delay:700ms}
</style>
<style class="">
/*
Sequence animation intro. Usage:
1) Insert this code in the <head>
2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
*/
@keyframes animationIn {
0% {
opacity: 0;
transform: translateY(30px);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
}
</style>
<script>
/*
Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:
1) Insert this code in the <head> along with the Animation Keyframe code.
2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
*/
(function () {
// Inject CSS for paused/running states
const style = document.createElement("style");
style.textContent = `
/* Default: paused */
.animate-on-scroll { animation-play-state: paused !important; }
/* Activated by JS */
.animate-on-scroll.animate { animation-play-state: running !important; }
`;
document.head.appendChild(style);
const once = true;
if (!window.__inViewIO) {
window.__inViewIO = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("animate");
if (once) window.__inViewIO.unobserve(entry.target);
}
});
}, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
}
window.initInViewAnimations = function (selector = ".animate-on-scroll") {
document.querySelectorAll(selector).forEach((el) => {
window.__inViewIO.observe(el); // observing twice is a no-op
});
};
document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
})();
</script>
<link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style><style id="border-gradient-shared-style">
[style*="--border-gradient"]::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: var(--border-radius-before, inherit);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
background: var(--border-gradient);
pointer-events: none;
}</style></head>
<body class="min-h-screen overflow-x-hidden selection:bg-orange-500/30 text-white bg-[#050505] relative">
<!-- Background Gradients -->
<div class="fixed z-0 pointer-events-none top-0 right-0 bottom-0 left-0">
<div class="stars absolute inset-0"></div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-orange-900/10 blur-[120px] rounded-full"></div>
<div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-orange-950/20 blur-[100px] rounded-full"></div>
</div>
<!-- Navigation -->
<nav class="relative z-50 flex items-center justify-between px-6 py-6 max-w-7xl mx-auto border-b border-white/5 animate-entry delay-75">
<!-- Logo -->
<div class="flex gap-2 gap-x-2 gap-y-2 items-center">
<div class="relative flex items-center justify-center w-8 h-8">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="asterisk" class="lucide lucide-asterisk text-white w-8 h-8 absolute rotate-45"><path d="M12 6v12"></path><path d="M17.196 9 6.804 15"></path><path d="m6.804 9 10.392 6"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="asterisk" class="lucide lucide-asterisk absolute w-[32px] h-[32px]" data-icon-replaced="true" style="width: 32px; height: 32px; color: rgb(249, 115, 22);"><path d="M12 6v12"></path><path d="M17.196 9 6.804 15"></path><path d="m6.804 9 10.392 6"></path></svg>
</div>
<span class="text-xl text-white font-sans" style="">Luminous</span>
</div>
<!-- Center Menu -->
<div class="hidden md:flex items-center bg-white/5 border border-white/10 rounded-full px-1 py-1 backdrop-blur-md">
<a href="/home" class="flex items-center gap-2 text-xs text-white bg-neutral-800/80 border-white/5 border rounded-full pt-1.5 pr-4 pb-1.5 pl-4 shadow-inner">
<span class="w-1.5 h-1.5 rounded-full bg-orange-500"></span>
Home
</a>
<a href="/about-us" class="hover:text-white transition-colors text-xs text-neutral-400 pt-1.5 pr-4 pb-1.5 pl-4">
About Us
</a>
<a href="/pricing" class="hover:text-white transition-colors text-xs text-neutral-400 pt-1.5 pr-4 pb-1.5 pl-4">
Pricing
</a>
<button class="hover:text-white transition-colors flex text-xs text-neutral-400 pt-1.5 pr-4 pb-1.5 pl-4 gap-x-1 gap-y-1 items-center" onclick="window.location.href='/features'" role="button">
Features
</button>
<a href="/resources" class="hover:text-white transition-colors text-xs text-neutral-400 pt-1.5 pr-4 pb-1.5 pl-4">
Resources
</a>
</div>
<!-- CTA -->
<a href="/getstarted" class="hidden md:block hover:brightness-110 transition-all text-sm text-white bg-gradient-to-b from-orange-400 to-orange-600 border-white/20 rounded-full border-t pt-2 pr-5 pb-2 pl-5 shadow-[0_0_15px_-3px_rgba(249,115,22,0.4)]">
Get Started
</a>
</nav>
<!-- Hero Content -->
<main class="grid grid-cols-1 lg:grid-cols-12 lg:gap-8 lg:pt-24 max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-20 pl-6 relative items-center">
<div class="absolute top-0 right-0 bottom-0 left-0" data-container-bg="true">
<div data-us-project="AhqzKk9mZE0EnlENMQDi" 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.34/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div>
<!-- Left Column -->
<div class="lg:col-span-7 flex flex-col relative items-start z-10">
<!-- Tag -->
<div class="mb-8 inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border border-white/10 bg-white/5 backdrop-blur-sm text-xs text-neutral-300 animate-entry delay-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles w-3 h-3 text-orange-400"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
<span class="font-sans" style="">Social Growth, Autopilot Mode</span>
</div>
<!-- Headline -->
<h1 class="text-5xl lg:text-[76px] leading-[1.05] text-white mb-6 font-bricolage font-light tracking-tight animate-entry delay-150" style="">
SOCIAL REACH
<span class="inline-flex align-middle mx-1"></span>
AUTOMATED
<br>
GROWTH VIRAL
<br>
RESULTS
</h1>
<!-- Subhead -->
<p class="text-lg text-neutral-400 max-w-xl mb-10 leading-relaxed font-sans animate-entry delay-200" style="">
Stop guessing what works. Luminous analyzes trends and automates your
content strategy for maximum engagement across every platform.
</p>
<!-- Buttons -->
<div class="flex flex-wrap gap-4 mb-20 gap-x-4 gap-y-4 items-center animate-entry delay-300">
<button class="group relative flex items-center justify-center gap-2.5 rounded-full bg-gradient-to-t from-yellow-200 via-orange-400 to-orange-500 px-8 py-3 text-lg font-medium text-[#2c1306] shadow-[0_0_40px_-5px_rgba(249,115,22,0.6)] ring-1 ring-inset ring-white/40 transition-all duration-300 hover:scale-105 hover:shadow-[0_0_60px_-5px_rgba(249,115,22,0.8)] font-sans">
<span class="font-sans" style="">Explore design</span>
</button>
<button class="px-8 py-3 rounded-full bg-white text-black text-lg hover:bg-neutral-200 transition-colors font-sans" style="">
View Features
</button>
</div>
</div>
<!-- Right Column (Card with Lightning) -->
<div class="lg:col-span-5 flex lg:justify-end lg:mt-0 mt-0 relative justify-center z-10 animate-entry delay-500">
<!-- Card Container -->
<div class="relative w-[360px] bg-neutral-900 rounded-[32px] p-[2px] electric-card overflow-hidden">
<!-- Glowing Border Gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-yellow-300 via-orange-500 to-transparent opacity-80 z-0"></div>
<!-- Inner Card Content -->
<div class="relative z-10 bg-[#0A0A0A] rounded-[30px] h-full p-8 flex flex-col items-start overflow-hidden">
<!-- Background Noise/Particles inside card -->
<div class="absolute top-0 right-0 w-full h-40 bg-gradient-to-b from-orange-500/10 to-transparent"></div>
<!-- Header -->
<div class="flex justify-between w-full items-start mb-6 relative">
<span class="text-[10px] uppercase text-neutral-400 border border-white/10 px-2 py-1 rounded bg-white/5 flex items-center gap-1.5 font-sans" style="">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
Viral Result
</span>
</div>
<h3 class="text-xl text-white mb-2 font-sans" style="">
Growth Velocity
</h3>
<p class="text-xs text-neutral-400 mb-6 leading-relaxed font-sans" style="">
Automated engagement hitting viral peaks.
</p>
<!-- Main Stat & Graph Area -->
<div class="w-full mb-8">
<div class="flex items-baseline gap-2 mb-2">
<span class="text-4xl text-transparent bg-clip-text bg-gradient-to-r from-white via-orange-200 to-orange-400 font-bricolage font-light tracking-tight" style="">
+842%
</span>
<span class="text-xs text-orange-500 flex items-center bg-orange-500/10 px-1.5 py-0.5 rounded font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up mr-0.5">
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path>
</svg>
vs last week
</span>
</div>
<!-- SVG Sparkline Chart -->
<div class="w-full h-16 relative mt-4">
<svg class="w-full h-full overflow-visible" viewBox="0 0 280 60" preserveAspectRatio="none">
<defs>
<linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f97316" stop-opacity="0.3"></stop>
<stop offset="100%" stop-color="#f97316" stop-opacity="0"></stop>
</linearGradient>
</defs>
<path d="M0 50 C 40 50, 60 30, 100 35 C 140 40, 160 10, 200 15 C 240 20, 260 5, 280 0 V 60 H 0 Z" fill="url(#chartGradient)" class=""></path>
<path d="M0 50 C 40 50, 60 30, 100 35 C 140 40, 160 10, 200 15 C 240 20, 260 5, 280 0" fill="none" stroke="#f97316" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" class=""></path>
<!-- Data Point Dot -->
<circle cx="280" cy="0" r="3" fill="#fff" stroke="#f97316" stroke-width="2"></circle>
</svg>
</div>
</div>
<!-- Button -->
<button class="hover:brightness-110 transition-all text-sm text-white bg-gradient-to-r from-orange-600 via-orange-500 to-amber-500 w-full border-white/20 rounded-full border-t mb-8 pt-3 pb-3 shadow-[0_4px_15px_rgba(249,115,22,0.4)] font-sans" style="">
Analyze Trends
</button>
<!-- Metrics List -->
<div class="space-y-4 w-full mb-8">
<div class="flex items-center justify-between text-xs">
<div class="flex items-center gap-3 text-neutral-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-4 h-4 text-orange-500">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
<span class="font-sans" style="">Total Impressions</span>
</div>
<span class="text-white font-sans" style="">2.4M</span>
</div>
</div>
<!-- Divider -->
<div class="relative w-full h-px bg-gradient-to-r from-transparent via-orange-500/50 to-transparent mb-6 flex items-center justify-center">
<span class="bg-[#0A0A0A] px-2 text-[10px] text-neutral-400 uppercase font-sans" style="">
AI Powered Scale
</span>
</div>
<!-- Bottom Tags -->
<div class="flex gap-4 w-full">
<div class="flex items-center gap-1.5 text-[10px] text-neutral-400 font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-3.5 h-3.5 text-white fill-white">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
</svg>
Auto-Optimization
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Desktop App Showcase Section -->
<section class="-mt-4 animate-entry delay-700 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll lg:-mt-8 lg:px-0 lg:pb-0 max-w-7xl mr-auto ml-auto pt-0 pr-2.5 pb-24 pl-2.5 relative">
<!-- Glow Effect Behind App -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[300px] bg-orange-600/20 blur-[100px] rounded-full z-0"></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<!-- Analytics Dashboard Panel (full width) -->
<div class="overflow-hidden md:col-span-2 lg:col-span-3 lg:bg-black/80 animate-on-scroll [animation:animationIn_0.8s_ease-out_0.6s_both] bg-neutral-900/80 rounded-2xl ring-white/10 ring-1 relative shadow-[0_0_40px_-10px_rgba(249,115,22,0.15)] backdrop-blur-sm">
<!-- Glow -->
<div class="-top-10 -right-10 bg-orange-500/10 w-56 h-56 rounded-full absolute blur-3xl"></div>
<!-- Top bar -->
<div class="flex sm:px-6 bg-white/5 border-white/5 border-b pt-3 pr-4 pb-3 pl-4 backdrop-blur-md items-center justify-between">
<div class="flex items-center gap-3 text-sm text-neutral-400">
<a href="#" class="inline-flex items-center gap-2 text-white hover:text-orange-400 transition-colors font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap text-orange-500">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
Luminous OS
</a>
<span class="opacity-40 font-sans" style="">/</span>
<span class="text-white font-sans" style="">Growth</span>
<span class="inline-flex items-center gap-1.5 rounded-full bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20 px-2 py-0.5 text-[11px] font-sans" style="">
<span class="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse"></span>
Live
</span>
</div>
<div class="flex items-center gap-3">
<div class="hidden sm:flex items-center gap-2 bg-black/40 ring-1 ring-white/10 rounded-lg pl-2.5 pr-2.5 h-8">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search text-neutral-500">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.3-4.3"></path>
</svg>
<input type="text" placeholder="Search trends..." class="bg-transparent text-sm text-zinc-300 placeholder-zinc-600 focus:outline-none w-48">
</div>
<button class="hidden sm:inline-flex items-center gap-1.5 rounded-lg bg-white/5 text-white text-xs ring-1 ring-white/10 px-3 py-1.5 hover:bg-white/10 transition font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
Export
</button>
</div>
</div>
<!-- Desktop layout -->
<div class="grid grid-cols-12">
<!-- Left sidebar -->
<aside class="hidden md:flex md:col-span-3 lg:col-span-2 flex-col min-h-[520px] bg-white/5 border-white/5 border-r">
<div class="px-4 py-4">
<button class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-lg shadow-orange-900/20 text-sm hover:brightness-110 transition-all px-3 py-2 border border-white/10 font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus">
<path d="M5 12h14"></path>
<path d="M12 5v14"></path>
</svg>
New Campaign
</button>
</div>
<nav class="px-3 pb-4 space-y-6 overflow-y-auto">
<!-- Analytics -->
<div class="">
<div class="px-2 mb-2 text-[10px] uppercase text-neutral-500 font-sans" style="">
Platform
</div>
<ul class="space-y-1">
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-neutral-400 hover:text-white hover:bg-white/5 transition-colors font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layout-grid">
<rect width="7" height="7" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="7" x="14" y="3" rx="1"></rect>
<rect width="7" height="7" x="14" y="14" rx="1"></rect>
<rect width="7" height="7" x="3" y="14" rx="1"></rect>
</svg>
Dashboard
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-white bg-white/5 ring-1 ring-white/10 shadow-inner font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up text-orange-400">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline>
</svg>
Growth Velocity
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-neutral-400 hover:text-white hover:bg-white/5 transition-colors font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
Audience
</a>
</li>
</ul>
</div>
<!-- Metrics -->
<div class="">
<div class="px-2 mb-2 text-[10px] uppercase text-neutral-500 font-sans" style="">
Content AI
</div>
<ul class="space-y-1">
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-neutral-400 hover:text-white hover:bg-white/5 transition-colors font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
</svg>
Generation
</a>
</li>
<li class="">
<a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md text-sm text-neutral-400 hover:text-white hover:bg-white/5 transition-colors font-sans" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-clock">
<path d="M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5"></path>
<path d="M16 2v4"></path>
<path d="M8 2v4"></path>
<path d="M3 10h5"></path>
<path d="M17.5 17.5 16 16.25V14"></path>
<path d="M22 16a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"></path>
</svg>
Scheduler
</a>
</li>
</ul>
</div>
</nav>
</aside>
<!-- Center content -->
<main class="col-span-12 md:col-span-6 lg:col-span-7 min-h-[520px] bg-black/20">
<!-- Tabs -->
<div class="px-4 sm:px-6 py-3 border-b border-white/5 overflow-x-auto">
<div class="flex items-center gap-6 min-w-max">
<button class="text-sm text-white border-b-2 border-orange-500 pb-3 -mb-3.5 font-sans" style="">
Overview
</button>
<button class="text-sm text-neutral-500 hover:text-white transition pb-3 -mb-3.5 border-b-2 border-transparent hover:border-white/10 font-sans" style="">
Real-time
</button>
<button class="text-sm text-neutral-500 hover:text-white transition pb-3 -mb-3.5 border-b-2 border-transparent hover:border-white/10 font-sans" style="">
Competitors
</button>
<button class="text-sm text-neutral-500 hover:text-white transition pb-3 -mb-3.5 border-b-2 border-transparent hover:border-white/10 font-sans" style="">
Alerts
</button>
</div>
</div>
<!-- Header -->
<div class="px-4 sm:px-6 py-6 border-b border-white/5">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<h3 class="text-white text-2xl font-bricolage font-light tracking-tight" style="">
Viral Velocity
</h3>
<span class="text-[11px] rounded-md bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20 px-2 py-0.5 uppercase font-sans" style="">
Trending
</span>
</div>
<div class="text-xs text-neutral-500 flex items-center gap-1.5 font-sans" style="">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
Updating live
</div>
</div>
<div class="mt-2 text-sm text-neutral-400 font-sans" style="">
Cross-platform engagement is scaling •
<a href="#" class="text-orange-400 hover:text-orange-300 transition-colors font-sans" style="">
View detailed report
</a>
</div>
</div>
<!-- Feed -->
<div class="px-4 sm:px-6 py-6 space-y-4">
<!-- Card: Performance metric -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/[0.02] p-4 hover:bg-white/[0.04] transition-colors">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="">
<div class="text-sm text-white font-sans" style="">
Engagement Spike Detected
</div>
<div class="text-xs text-neutral-500 mt-0.5 font-sans" style="">
Avg reach 245k • +42% from last week • 98% sentiment
</div>
</div>
</div>
<span class="text-[10px] rounded-md bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20 px-2 py-0.5 font-sans" style="">
VIRAL
</span>
</div>
<div class="mt-4 bg-black/40 rounded-lg ring-1 ring-white/5 p-3 font-mono text-xs">
<div class="grid grid-cols-2 gap-y-2">
<div class="text-neutral-500 font-sans" style="">
→ Impressions:
<span class="text-orange-400 ml-1 font-sans" style="">
2.4M
</span>
</div>
<div class="text-neutral-500 font-sans" style="">
→ Shares:
<span class="text-orange-400 ml-1 font-sans" style="">
14.2K
</span>
</div>
<div class="text-neutral-500 font-sans" style="">
→ Save Rate:
<span class="text-orange-400 ml-1 font-sans" style="">
8.4%
</span>
</div>
<div class="text-neutral-500 font-sans" style="">
→ Velocity:
<span class="text-orange-400 ml-1 font-sans" style="">
High
</span>
</div>
</div>
</div>
</div>
<!-- Card: In progress analysis -->
<div class="rounded-xl ring-1 ring-orange-500/20 bg-gradient-to-b from-orange-500/5 to-transparent p-4">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="">
<div class="text-sm text-white font-sans" style="">
Generating Content Variations
</div>
<div class="text-xs text-neutral-500 mt-0.5 font-sans" style="">
Batch #847 • 3 Platforms • Est. time 45s
</div>
</div>
</div>
<div class="text-[11px] text-orange-400 font-sans" style="">
00:45
</div>
</div>
<div class="mt-4 flex items-center gap-3">
<span class="text-xs text-neutral-500 font-sans" style="">
Processing
</span>
<div class="flex-1 h-1.5 rounded-full bg-white/5 ring-1 ring-white/10 overflow-hidden">
<div class="h-full w-[67%] rounded-full bg-gradient-to-r from-orange-500 to-amber-500 shadow-[0_0_10px_rgba(249,115,22,0.5)]"></div>
</div>
<span class="text-xs text-white font-sans" style="">
67%
</span>
<button class="text-[10px] rounded hover:bg-white/10 text-neutral-400 px-2 py-1 transition-colors font-sans" style="">
STOP
</button>
</div>
</div>
<!-- Card: Alert -->
<div class="rounded-xl ring-1 ring-white/10 bg-white/[0.02] p-4 hover:bg-white/[0.04] transition-colors">
<div class="flex items-start justify-between">
<div class="flex items-center gap-3">
<div class="">
<div class="text-sm text-white font-sans" style="">
Competitor Trend Alert
</div>
<div class="text-xs text-neutral-500 mt-0.5 font-sans" style="">
Topic: "AI Agents" • Rising fast • 28m ago
</div>
</div>
</div>
<span class="text-[10px] rounded-md bg-white/5 text-neutral-300 ring-1 ring-white/10 px-2 py-0.5 font-sans" style="">
OPPORTUNITY
</span>
</div>
<div class="mt-3 flex items-center gap-2">
<button class="text-xs rounded-md bg-white/5 text-white ring-1 ring-white/10 px-3 py-1.5 hover:bg-white/10 transition-colors font-sans" style="">
Generate Response
</button>
<button class="text-xs rounded-md text-neutral-400 hover:text-white px-3 py-1.5 transition-colors font-sans" style="">
Dismiss
</button>
</div>
</div>
</div>
</main>
<!-- Right sidebar -->
<aside class="hidden md:block md:col-span-3 lg:col-span-3 bg-white/5 border-l border-white/5 min-h-[520px]">
<div class="px-4 sm:px-5 py-4 space-y-4">
<!-- Quick Stats -->
<div class="rounded-xl ring-1 ring-white/10 bg-black/20 p-4">
<div class="text-xs text-neutral-500 mb-3 uppercase font-sans" style="">
Live Metrics
</div>
<div class="grid grid-cols-2 gap-3">
<div class="bg-white/5 rounded-lg p-3 ring-1 ring-white/5">
<div class="text-[10px] text-neutral-400 mb-1 font-sans" style="">
Reach/hr
</div>
<div class="text-lg text-white font-sans" style="">
84.3K
</div>
</div>
<div class="bg-white/5 rounded-lg p-3 ring-1 ring-white/5">
<div class="text-[10px] text-neutral-400 mb-1 font-sans" style="">
Avg Retention
</div>
<div class="text-lg text-white font-sans" style="">
12s
</div>
</div>
<div class="bg-white/5 rounded-lg p-3 ring-1 ring-white/5">
<div class="text-[10px] text-neutral-400 mb-1 font-sans" style="">
Conv. Rate
</div>
<div class="text-lg text-white font-sans" style="">
3.4%
</div>
</div>
<div class="bg-white/5 rounded-lg p-3 ring-1 ring-white/5">
<div class="text-[10px] text-neutral-400 mb-1 font-sans" style="">
Viral Score
</div>
<div class="text-lg text-orange-400 font-sans" style="">
9.2
</div>
</div>
</div>
</div>
<!-- System Info -->
<div class="rounded-xl ring-1 ring-white/10 bg-black/20 p-4">
<div class="text-xs text-neutral-500 mb-2 uppercase font-sans" style="">
Connected Accounts
</div>
<p class="text-sm text-neutral-300 leading-relaxed font-sans" style="">
Active on 4 platforms. All scheduling queues are healthy.
</p>
<div class="mt-3 text-xs text-neutral-500 mb-2 font-sans" style="">
Platforms
</div>
<div class="flex items-center gap-2">
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-white/80 hover:bg-white/10 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
</svg>
</span>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-white/80 hover:bg-white/10 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</span>
<span class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-white/80 hover:bg-white/10 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</span>
</div>
</div>
<!-- Settings (custom toggles) -->
<div class="rounded-xl ring-1 ring-white/10 bg-black/20 p-4">
<div class="text-xs text-neutral-500 mb-3 uppercase font-sans" style="">
Autopilot
</div>
<div class="space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm text-neutral-300 font-sans" style="">
Auto-repost
</span>
<button aria-pressed="true" class="relative inline-flex h-5 w-9 items-center rounded-full bg-orange-500/20 ring-1 ring-orange-500/30">
<span class="absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-orange-400 translate-x-4 transition-transform shadow-sm"></span>
<span class="sr-only font-sans" style="">toggle</span>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-neutral-300 font-sans" style="">
Smart Reply
</span>
<button aria-pressed="true" class="relative inline-flex h-5 w-9 items-center rounded-full bg-orange-500/20 ring-1 ring-orange-500/30">
<span class="absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-orange-400 translate-x-4 transition-transform shadow-sm"></span>
<span class="sr-only font-sans" style="">toggle</span>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-sm text-neutral-300 font-sans" style="">
Trend Watch
</span>
<button aria-pressed="false" class="relative inline-flex h-5 w-9 items-center rounded-full bg-white/10 ring-1 ring-white/10">
<span class="absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-neutral-400 translate-x-0 transition-transform shadow-sm"></span>
<span class="sr-only font-sans" style="">toggle</span>
</button>
</div>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-gradient-to-tr from-gray-500/0 via-gray-500/10 to-gray-500/0 from-white/0 via-white/10 to-white/0 max-w-7xl rounded-3xl mt-24 mr-auto mb-24 ml-auto pt-10 pr-10 pb-10 pl-10 relative mx-2.5 lg:mx-auto" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<!-- Header -->
<div class="flex mb-0 items-center justify-between">
<div class="flex flex-col text-left w-full">
<div class="flex flex-col lg:flex-row lg:items-center mb-3 gap-x-6 gap-y-4 items-start">
<div class="flex flex-col gap-x-y-1 gap-y-1 items-start">
<span class="uppercase text-sm text-orange-400 tracking-widest">
Featured
</span>
<span class="leading-none text-7xl font-light text-white/5 tracking-tight font-bricolage">
01.
</span>
</div>
<div class="space-y-2">
<h2 class="md:text-5xl text-4xl text-white font-bricolage font-light tracking-tight" style="">
Scale your reach instantly
</h2>
<p class="leading-relaxed text-lg text-neutral-400 max-w-2xl font-sans" style="">
Luminous analyzes millions of data points to predict trends,
automate engagement, and schedule content when your audience is
most active.
</p>
<button class="lg:hidden mt-6 w-full sm:w-auto px-6 py-3 bg-orange-600 text-white rounded-lg shadow-lg hover:bg-orange-500 transition-colors whitespace-nowrap font-sans">
Start Growing Now
</button>
</div>
</div>
</div>
<div class="hidden lg:block">
<button class="group inline-flex gap-2 transition-all hover:bg-neutral-200 whitespace-nowrap font-medium text-black bg-white rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_0_20px_rgba(255,255,255,0.3)] gap-x-2 gap-y-2 items-center">
Start Growing
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right transition-transform group-hover:translate-x-1">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
<!-- Main Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 mt-12 mb-12 gap-x-8 gap-y-8">
<!-- Left Card -->
<div class="md:p-10 flex flex-col overflow-hidden group/card hover:border-white/20 transition-colors duration-500 bg-[#0A0A0A] border-white/10 border rounded-3xl pt-8 pr-8 pb-8 pl-8 relative justify-between">
<!-- Background gradient hint -->
<div class="absolute top-0 right-0 w-64 h-64 bg-orange-500/10 blur-[100px] rounded-full pointer-events-none transition-opacity duration-500 opacity-50 group-hover/card:opacity-100"></div>
<!-- Top Icons Row -->
<div class="grid grid-cols-3 gap-4 mb-12 relative z-10">
<!-- Item 1 -->
<div class="flex flex-col items-center text-center gap-4 group cursor-pointer">
<div class="w-14 h-14 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 group-hover:text-white group-hover:border-orange-500/30 group-hover:bg-orange-500/10 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles">
<path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"></path>
</svg>
</div>
<span class="text-xs text-neutral-500 leading-tight group-hover:text-neutral-300 transition-colors font-sans" style="">
Generate Content
</span>
</div>
<!-- Item 2 -->
<div class="flex flex-col items-center text-center gap-4 group cursor-pointer">
<div class="w-14 h-14 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 group-hover:text-white group-hover:border-orange-500/30 group-hover:bg-orange-500/10 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle">
<path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path>
</svg>
</div>
<span class="text-xs text-neutral-500 leading-tight group-hover:text-neutral-300 transition-colors font-sans" style="">
Auto-Engage
</span>
</div>
<!-- Item 3 -->
<div class="flex flex-col items-center text-center gap-4 group cursor-pointer">
<div class="w-14 h-14 rounded-full border border-white/10 bg-white/5 flex items-center justify-center text-neutral-400 group-hover:text-white group-hover:border-orange-500/30 group-hover:bg-orange-500/10 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trending-up">
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
<polyline points="16 7 22 7 22 13"></polyline>
</svg>
</div>
<span class="text-xs text-neutral-500 leading-tight group-hover:text-neutral-300 transition-colors font-sans" style="">
Predict Trends
</span>
</div>
</div>
<!-- Data Table -->
<div class="mb-10 relative z-10">
<div class="grid grid-cols-4 text-sm font-medium text-white mb-4 px-2">
<div class="col-span-2 font-sans" style="">Trending Topic</div>
<div class="text-right text-neutral-400 font-sans" style="">
Reach
</div>
<div class="text-right text-neutral-400 font-sans" style="">
Velocity
</div>
</div>
<!-- Row 1 -->
<div class="grid grid-cols-4 text-sm text-neutral-400 py-4 border-t border-white/5 px-2 hover:bg-white/[0.02] transition-colors rounded-lg">
<div class="col-span-2 text-neutral-300 flex items-center gap-2 font-sans" style="">
<span class="w-1.5 h-1.5 rounded-full bg-neutral-600"></span>
#GenerativeAI
</div>
<div class="text-right font-sans" style="">842k</div>
<div class="text-right text-neutral-500 font-sans" style="">
Medium
</div>
</div>
<!-- Row 2 -->
<div class="grid grid-cols-4 text-sm text-neutral-400 py-4 border-t border-white/5 px-2 relative overflow-hidden rounded-lg group">
<div class="absolute inset-0 bg-gradient-to-r from-orange-500/10 to-transparent pointer-events-none opacity-50 group-hover:opacity-100 transition-opacity"></div>
<div class="col-span-2 text-white flex items-center gap-2 relative z-10 font-sans" style="">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-orange-500"></span>
</span>
#FutureTech
</div>
<div class="text-right text-white relative z-10 font-sans" style="">
2.1M
</div>
<div class="text-right text-orange-400 relative z-10 font-sans" style="">
Viral
</div>
</div>
</div>
<!-- Connect Input -->
<div class="bg-neutral-900/40 border border-white/10 rounded-xl p-2 pl-4 flex justify-between items-center relative z-10 backdrop-blur-sm group hover:border-orange-500/30 transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-5 h-5 rounded flex items-center justify-center bg-[#1877F2]/20 text-[#1877F2]">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</div>
<span class="text-neutral-300 text-sm font-sans" style="">
Connect Facebook Ads
</span>
</div>
<div class="px-3 py-1.5 rounded-lg bg-white/5 group-hover:bg-orange-500 group-hover:text-white border border-white/5 flex items-center justify-center text-neutral-400 transition-colors text-xs font-sans" style="">
Connect
</div>
</div>
</div>
<!-- Right Card -->
<div class="overflow-hidden min-h-[450px] flex items-center justify-center bg-[#0A0A0A] border-white/10 border rounded-3xl relative group/orbit">
<!-- Background Gradient -->
<div class="opacity-80 absolute top-0 right-0 bottom-0 left-0 bg-[radial-gradient(circle_at_center,_rgba(249,115,22,0.15)_0%,_rgba(0,0,0,0)_70%)]"></div>
<!-- Responsive Scale Wrapper -->
<div class="flex md:scale-100 transition-transform duration-500 w-full h-full relative scale-[0.65] items-center justify-center" style="">
<!-- Static Rings -->
<div class="absolute flex items-center justify-center pointer-events-none opacity-20">
<div class="w-[180px] h-[180px] rounded-full border border-orange-500/30"></div>
</div>
<div class="absolute flex items-center justify-center pointer-events-none opacity-20">
<div class="w-[340px] h-[340px] rounded-full border border-orange-500/20"></div>
</div>
<div class="absolute flex items-center justify-center pointer-events-none opacity-10">
<div class="w-[500px] h-[500px] rounded-full border border-orange-500/10"></div>
</div>
<!-- Center Item (Static Logo Brand Container) -->
<div class="relative w-24 h-24 rounded-full bg-[#120a05] border border-orange-500/50 flex items-center justify-center shadow-[0_0_50px_-5px_rgba(249,115,22,0.5)] z-20">
<div class="animate-ping opacity-20 border-orange-500 border rounded-full absolute top-0 right-0 bottom-0 left-0"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk text-orange-500">
<path d="M12 6v12"></path>
<path d="M17.196 9 6.804 15"></path>
<path d="m6.804 9 10.392 6"></path>
</svg>
</div>
<!-- Spinning Orbit Container -->
<div class="absolute inset-0 flex items-center justify-center animate-[spin_60s_linear_infinite]">
<!-- Orbiting Items (Positioned radially + Counter-Rotating) -->
<!-- 1. Twitter (0 degrees - Top) -->
<div class="absolute top-1/2 left-1/2 z-10" style="transform: translate(-50%, -50%) rotate(0deg) translateY(-170px) rotate(0deg);">
<div class="w-12 h-12 rounded-2xl bg-black border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:border-white/30 transition-all hover:scale-110 shadow-lg cursor-pointer animate-[spin_60s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter">
<path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
</svg>
</div>
</div>
<!-- 2. Facebook (60 degrees) -->
<div class="absolute top-1/2 left-1/2 z-10" style="transform: translate(-50%, -50%) rotate(60deg) translateY(-170px) rotate(-60deg);">
<div class="w-12 h-12 rounded-2xl bg-black border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:border-white/30 transition-all hover:scale-110 shadow-lg cursor-pointer animate-[spin_60s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-facebook">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
</svg>
</div>
</div>
<!-- 3. Instagram (120 degrees) -->
<div class="absolute top-1/2 left-1/2 z-10" style="transform: translate(-50%, -50%) rotate(120deg) translateY(-170px) rotate(-120deg);">
<div class="w-12 h-12 rounded-2xl bg-black border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:border-white/30 transition-all hover:scale-110 shadow-lg cursor-pointer animate-[spin_60s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
<line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
</svg>
</div>
</div>
<!-- 4. TikTok (180 degrees) -->
<div class="absolute top-1/2 left-1/2 z-10" style="transform: translate(-50%, -50%) rotate(180deg) translateY(-170px) rotate(-180deg);">
<div class="w-12 h-12 rounded-2xl bg-black border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:border-white/30 transition-all hover:scale-110 shadow-lg cursor-pointer animate-[spin_60s_linear_infinite_reverse]">
<svg fill="currentColor" viewBox="0 0 24 24" class="text-white w-5 h-5">
<path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 15.46a6.33 6.33 0 0 0 10.86 3.1 5.6 5.6 0 0 0 1.06-2.7V10.4a8.36 8.36 0 0 0 4.69 1.48V8.35a4.86 4.86 0 0 1-2.02-1.66z"></path>
</svg>
</div>
</div>
<!-- 5. YouTube (240 degrees) -->
<div class="absolute top-1/2 left-1/2 z-10" style="transform: translate(-50%, -50%) rotate(240deg) translateY(-170px) rotate(-240deg);">
<div class="w-12 h-12 rounded-2xl bg-black border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:border-white/30 transition-all hover:scale-110 shadow-lg cursor-pointer animate-[spin_60s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube">
<path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"></path>
<path d="m10 15 5-3-5-3z"></path>
</svg>
</div>
</div>
<!-- 6. LinkedIn (300 degrees) -->
<div class="absolute top-1/2 left-1/2 z-10" style="transform: translate(-50%, -50%) rotate(300deg) translateY(-170px) rotate(-300deg);">
<div class="w-12 h-12 rounded-2xl bg-black border border-white/10 flex items-center justify-center text-neutral-400 hover:text-white hover:border-white/30 transition-all hover:scale-110 shadow-lg cursor-pointer animate-[spin_60s_linear_infinite_reverse]">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin">
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
<rect width="4" height="12" x="2" y="9"></rect>
<circle cx="4" cy="4" r="2"></circle>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Features -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 border-t border-white/5 pt-12">
<!-- Feature 1 -->
<div class="flex flex-col items-start group">
<div class="w-8 h-px bg-neutral-700 mb-6 group-hover:bg-orange-500 transition-colors duration-300"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target text-neutral-400 mb-5 group-hover:text-orange-500 transition-colors duration-300">
<circle cx="12" cy="12" r="10"></circle>
<circle cx="12" cy="12" r="6"></circle>
<circle cx="12" cy="12" r="2"></circle>
</svg>
<h3 class="text-xl text-white mb-3 font-sans" style="">
Precision Targeting
</h3>
<p class="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors font-sans" style="">
Identify and engage your ideal audience segments with AI-driven
behavioral analysis and lookalike modeling.
</p>
</div>
<!-- Feature 2 -->
<div class="flex flex-col items-start group">
<div class="w-8 h-px bg-neutral-700 mb-6 group-hover:bg-orange-500 transition-colors duration-300"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw text-neutral-400 mb-5 group-hover:text-orange-500 transition-colors duration-300">
<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
<path d="M21 3v5h-5"></path>
<path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
<path d="M8 16H3v5"></path>
</svg>
<h3 class="text-xl text-white mb-3 font-sans" style="">
Automated Workflows
</h3>
<p class="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors font-sans" style="">
Set up complex engagement triggers and response sequences that run
on autopilot while you sleep.
</p>
</div>
<!-- Feature 3 -->
<div class="flex flex-col group items-start">
<div class="w-8 h-px bg-neutral-700 mb-6 group-hover:bg-orange-500 transition-colors duration-300"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check text-neutral-400 mb-5 group-hover:text-orange-500 transition-colors duration-300">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
<path d="m9 12 2 2 4-4"></path>
</svg>
<h3 class="text-xl text-white mb-3 font-sans" style="">
Brand Safety
</h3>
<p class="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors font-sans" style="">
Advanced sentiment analysis ensures your automated interactions
always align with your brand voice and values.
</p>
</div>
</div>
</section>
<section class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] max-w-7xl mr-auto ml-auto pt-0 pr-6 pb-0 pl-6">
<section class="animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll lg:mx-auto lg:mb-0 bg-gradient-to-tr from-gray-500/0 via-gray-500/10 to-gray-500/0 from-white/0 via-white/10 to-white/0 max-w-7xl rounded-3xl mt-24 mr-auto mb-24 ml-auto pt-10 pr-10 pb-4 pl-10 relative" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<!-- Header -->
<div class="flex mb-0 items-center justify-between">
<div class="flex flex-col text-left w-full">
<div class="flex flex-col lg:flex-row lg:items-center mb-3 gap-x-6 gap-y-4 items-start">
<div class="flex flex-col gap-x-y-1 gap-y-1 items-start">
<span class="uppercase text-sm text-orange-400 tracking-widest">
WHY US
</span>
<span class="leading-none text-7xl font-light text-white/5 tracking-tight font-bricolage">
02.
</span>
</div>
<div class="space-y-2">
<h2 class="md:text-5xl text-4xl font-normal text-white tracking-tight font-bricolage">
Engineered for
<span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">
Exponential Growth
</span>
</h2>
<p class="leading-relaxed text-base text-neutral-400 max-w-2xl">
Most tools schedule posts. We automate relevance. Luminous
is the only platform that combines predictive trend analysis
with autonomous engagement.
</p>
<button class="lg:hidden mt-6 w-full sm:w-auto px-6 py-3 bg-orange-600 text-white rounded-lg shadow-lg hover:bg-orange-500 transition-colors whitespace-nowrap font-sans">
Start Growing Now
</button>
</div>
</div>
</div>
<div class="hidden lg:flex gap-x-2 gap-y-2">
<button class="group inline-flex transition-all hover:bg-neutral-200 whitespace-nowrap font-medium text-black bg-white rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_0_20px_rgba(255,255,255,0.3)] gap-x-2 gap-y-2 items-center">
Compare Plans
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right transition-transform group-hover:translate-x-1">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
<!-- Cards Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-16 mb-20 w-full">
<!-- Card 1: Highlight (Orange) -->
<div class="group relative flex flex-col p-8 md:p-12 min-h-[420px] rounded-[32px] bg-gradient-to-br from-orange-500 via-orange-600 to-orange-700 text-white overflow-hidden shadow-[0_0_40px_-10px_rgba(249,115,22,0.3)] transition-all hover:scale-[1.01] duration-500">
<!-- Top Row -->
<div class="flex justify-between items-start z-10 w-full mb-auto">
<div class="w-12 h-12 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-circuit">
<path d="M12 4.5a2.5 2.5 0 0 0-4.96-.46 2.5 2.5 0 0 0-1.98 3 2.5 2.5 0 0 0-1.32 4.24 3 3 0 0 0 .34 2.68 2.5 2.5 0 0 0 2.77 3.29 2.5 2.5 0 0 0 4.15 0 2.5 2.5 0 0 0 2.77-3.29 3 3 0 0 0 .34-2.68 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3 2.5 2.5 0 0 0-4.8 0Z">
</path>
<path d="M9 12h6"></path>
<path d="M15.02 9.5 9 14.4"></path>
<path d="M9 9.5l6.02 4.9"></path>
</svg>
</div>
<span class="text-orange-100/80 font-mono text-sm tracking-wider">
/ 01
</span>
</div>
<!-- Content -->
<div class="z-10 mt-auto relative">
<h3 class="text-4xl md:text-5xl font-semibold tracking-tight text-white mb-6 leading-[1.1] font-bricolage">
Predictive Intelligence
</h3>
<p class="text-base font-medium leading-relaxed text-orange-50/90 max-w-md font-sans border-t border-white/20 pt-6">
While others analyze the past, Luminous predicts the future.
Our AI identifies viral vectors 48 hours before they peak.
</p>
</div>
<!-- Decor/Glow -->
<div class="absolute top-[-20%] right-[-10%] w-[400px] h-[400px] bg-white/20 blur-[100px] rounded-full pointer-events-none mix-blend-overlay">
</div>
<div class="absolute bottom-0 right-0 w-full h-1/2 bg-gradient-to-t from-black/20 to-transparent pointer-events-none">
</div>
</div>
<!-- Card 2: Dark -->
<div class="group relative flex flex-col p-8 md:p-12 min-h-[420px] rounded-[32px] bg-[#0A0A0A] border border-white/5 overflow-hidden transition-all hover:scale-[1.01] duration-500 hover:border-white/10">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none">
</div>
<div class="flex justify-between items-start z-10 w-full mb-auto">
<div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-orange-500/10 group-hover:border-orange-500/30 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap text-neutral-400 group-hover:text-orange-500 transition-colors">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
<span class="text-neutral-600 font-mono text-sm tracking-wider group-hover:text-orange-500/50 transition-colors">
/ 02
</span>
</div>
<div class="z-10 mt-auto">
<h3 class="text-4xl md:text-5xl font-semibold tracking-tight text-white mb-6 leading-[1.1] font-bricolage">
Autonomous Velocity
</h3>
<p class="text-base font-medium leading-relaxed text-neutral-500 max-w-md font-sans border-t border-white/5 pt-6 group-hover:text-neutral-400 transition-colors">
Speed wins. Luminous executes engagement strategies 24/7,
ensuring you capture attention the moment it becomes
available.
</p>
</div>
</div>
<!-- Card 3: Dark -->
<div class="group relative flex flex-col p-8 md:p-12 min-h-[420px] rounded-[32px] bg-[#0A0A0A] border border-white/5 overflow-hidden transition-all hover:scale-[1.01] duration-500 hover:border-white/10">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none">
</div>
<div class="flex justify-between items-start z-10 w-full mb-auto">
<div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-orange-500/10 group-hover:border-orange-500/30 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check text-neutral-400 group-hover:text-orange-500 transition-colors">
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
</path>
<path d="m9 12 2 2 4-4"></path>
</svg>
</div>
<span class="text-neutral-600 font-mono text-sm tracking-wider group-hover:text-orange-500/50 transition-colors">
/ 03
</span>
</div>
<div class="z-10 mt-auto">
<h3 class="text-4xl md:text-5xl font-semibold tracking-tight text-white mb-6 leading-[1.1] font-bricolage">
Safety by Design
</h3>
<p class="text-base font-medium leading-relaxed text-neutral-500 max-w-md font-sans border-t border-white/5 pt-6 group-hover:text-neutral-400 transition-colors">
Aggressive growth, zero risk. Our context-aware AI ensures
every interaction aligns with your brand values and safety
guidelines.
</p>
</div>
</div>
<!-- Card 4: Dark -->
<div class="group relative flex flex-col p-8 md:p-12 min-h-[420px] rounded-[32px] bg-[#0A0A0A] border border-white/5 overflow-hidden transition-all hover:scale-[1.01] duration-500 hover:border-white/10">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none">
</div>
<div class="flex justify-between items-start z-10 w-full mb-auto">
<div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-orange-500/10 group-hover:border-orange-500/30 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers text-neutral-400 group-hover:text-orange-500 transition-colors">
<path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z">
</path>
<path d="m22 17.65-9.17 4.16a2 2 0 0 1-1.66 0L2 17.65"></path>
<path d="m22 12.65-9.17 4.16a2 2 0 0 1-1.66 0L2 12.65"></path>
</svg>
</div>
<span class="text-neutral-600 font-mono text-sm tracking-wider group-hover:text-orange-500/50 transition-colors">
/ 04
</span>
</div>
<div class="z-10 mt-auto">
<h3 class="text-4xl md:text-5xl font-semibold tracking-tight text-white mb-6 leading-[1.1] font-bricolage">
Omnichannel Scale
</h3>
<p class="text-base font-medium leading-relaxed text-neutral-500 max-w-md font-sans border-t border-white/5 pt-6 group-hover:text-neutral-400 transition-colors">
Build once, deploy everywhere. Luminous adapts your content
strategy across X, LinkedIn, and Instagram simultaneously.
</p>
</div>
</div>
</div>
</section>
</section><section class="animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-gradient-to-tr from-gray-500/0 via-gray-500/10 to-gray-500/0 from-white/0 via-white/10 to-white/0 max-w-7xl rounded-3xl mt-24 mr-auto mb-24 ml-auto pt-10 pr-10 pb-10 pl-10 relative mx-2.5 lg:mx-auto" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<!-- Header -->
<div class="flex flex-col mb-16">
<div class="flex mb-0 items-center justify-between">
<div class="flex flex-col text-left w-full">
<div class="flex flex-col lg:flex-row lg:items-center mb-3 gap-x-6 gap-y-4 items-start">
<div class="flex flex-col gap-x-y-1 gap-y-1 items-start">
<span class="uppercase text-sm text-orange-400 tracking-widest">TESTIMONIALS</span>
<span class="leading-none text-7xl font-light text-white/5 tracking-tight font-bricolage">03.</span>
</div>
<div class="space-y-2">
<h2 class="md:text-5xl text-4xl font-normal text-white tracking-tight font-bricolage">Real Results. <span class="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-orange-600">Real Growth.</span></h2>
<p class="leading-relaxed text-base text-neutral-400 max-w-2xl">Hear directly from the creators and brands who have used Luminous to drastically increase their engagement and reach.</p>
<button class="lg:hidden mt-6 w-full sm:w-auto px-6 py-3 bg-orange-600 text-white rounded-lg shadow-lg hover:bg-orange-500 transition-colors whitespace-nowrap font-sans">
Start Growing Now
</button>
</div>
</div>
</div>
<div class="hidden lg:flex gap-x-2 gap-y-2">
<button class="group inline-flex transition-all hover:bg-neutral-200 whitespace-nowrap font-medium text-black bg-white rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_0_20px_rgba(255,255,255,0.3)] gap-x-2 gap-y-2 items-center">
See More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right transition-transform group-hover:translate-x-1">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
</div>
</div>
<!-- Main Grid -->
<div class="flex gap-4 md:gap-8 relative gap-x-4 gap-y-4 items-center justify-between">
<button onclick="window.prevTestimonial()" class="hidden md:flex w-12 h-12 rounded-xl border border-white/10 bg-[#0F0F0F] text-neutral-400 items-center justify-center hover:bg-white/10 hover:text-white hover:border-white/20 transition-all duration-300 z-30 group shrink-0 shadow-lg cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left group-hover:-translate-x-0.5 transition-transform">
<path d="m12 19-7-7 7-7"></path>
<path d="M19 12H5"></path>
</svg>
</button>
<div class="relative w-full max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-12 items-center gap-8 group/carousel">
<div class="lg:col-span-6 lg:col-start-1 relative z-20">
<div class="overflow-hidden group/card hover:border-white/20 transition-colors duration-300 md:p-12 bg-[#0A0A0A]/50 w-full lg:w-[620px] border-white/10 border rounded-[24px] pt-8 pr-8 pb-8 pl-8 relative shadow-[0_20px_60px_-15px_rgba(0,0,0,0.8)] backdrop-blur-xl">
<div class="absolute top-0 right-0 w-64 h-64 bg-orange-500/5 blur-[80px] rounded-full pointer-events-none"></div>
<div class="mb-8 text-orange-500 relative z-10">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="currentColor" stroke="none">
<path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"></path>
</svg>
</div>
<blockquote id="t-quote" class="text-xl md:text-2xl leading-relaxed text-neutral-200 mb-10 relative z-10 font-bricolage font-light tracking-tight transition-opacity duration-300" style="">
"I've watched 36 MasterClasses by tuning in while eating and
doing chores around the house. I've learned how to live with
passion, grit, humility, and a process that makes my life
journey something to savor."
</blockquote>
<div class="flex items-center gap-4 relative z-10">
<div class="flex flex-col">
<span id="t-author" class="text-white text-lg font-sans transition-opacity duration-300" style="">
Clarissa
</span>
<span id="t-role" class="text-neutral-500 text-xs uppercase flex items-center gap-2 mt-1 font-sans transition-opacity duration-300" style="">
Founder & Teacher
<span class="inline-block w-4 h-3 rounded-[1px] bg-gradient-to-r from-blue-600 via-white to-red-600 shadow-sm opacity-80" title="France"></span>
</span>
</div>
</div>
</div>
</div>
<div class="lg:col-span-6 lg:col-start-7 relative h-[400px] md:h-[600px] rounded-[32px] overflow-hidden border border-white/5 ring-1 ring-white/5 shadow-2xl transition-transform duration-500 group-hover/carousel:scale-[1.01]">
<div class="bg-gradient-to-t from-black/60 via-transparent to-transparent z-10 absolute top-0 right-0 bottom-0 left-0"></div>
<img id="t-image" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/649a17f7-ce90-412e-bc8c-6227953b3ba4_1600w.webp" alt="Member" class="w-full h-full object-cover transition-opacity duration-300">
<div class="absolute top-6 right-6 z-20 px-4 py-2 rounded-full bg-black/40 backdrop-blur-md border border-white/10 text-xs text-white flex items-center gap-2 font-sans" style="">
<span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
Active Creator
</div>
</div>
</div>
<button onclick="window.nextTestimonial()" class="hidden md:flex w-12 h-12 rounded-xl border border-white/10 bg-[#0F0F0F] text-neutral-400 items-center justify-center hover:bg-white/10 hover:text-white hover:border-white/20 transition-all duration-300 z-30 group shrink-0 shadow-lg cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right group-hover:translate-x-0.5 transition-transform">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</button>
</div>
<script>
(function() {
const testimonials = [
{
quote: "\"I've watched 36 MasterClasses by tuning in while eating and doing chores around the house. I've learned how to live with passion, grit, humility, and a process that makes my life journey something to savor.\"",
author: "Clarissa",
role: "Founder & Teacher",
image: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/649a17f7-ce90-412e-bc8c-6227953b3ba4_1600w.webp"
},
{
quote: "\"Luminous has completely transformed how I approach social media. The automated insights allow me to focus on creating while the platform handles the engagement strategy perfectly.\"",
author: "David Chen",
role: "Digital Artist",
image: "https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&q=80"
},
{
quote: "\"The growth velocity metrics are insane. I went from struggling to get 100 views to consistently hitting 50k+ on every reel within just two weeks of using the autopilot features.\"",
author: "Sarah Jenkins",
role: "Lifestyle Vlogger",
image: "https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80"
}
];
let currentIndex = 0;
window.nextTestimonial = function() {
currentIndex = (currentIndex + 1) % testimonials.length;
updateTestimonial();
};
window.prevTestimonial = function() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
updateTestimonial();
};
function updateTestimonial() {
const data = testimonials[currentIndex];
const quoteEl = document.getElementById('t-quote');
const authorEl = document.getElementById('t-author');
const roleEl = document.getElementById('t-role');
const imageEl = document.getElementById('t-image');
// Fade out
[quoteEl, authorEl, roleEl, imageEl].forEach(el => el.style.opacity = '0');
setTimeout(() => {
// Update content
quoteEl.innerText = data.quote;
authorEl.innerText = data.author;
// Reset role with flag element
roleEl.innerHTML = `${data.role} <span class="inline-block w-4 h-3 rounded-[1px] bg-gradient-to-r from-blue-600 via-white to-red-600 shadow-sm opacity-80"></span>`;
imageEl.src = data.image;
// Fade in
[quoteEl, authorEl, roleEl, imageEl].forEach(el => el.style.opacity = '1');
}, 300);
}
})();
</script>
</section>
<!-- Pricing Section -->
<section class="animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll lg:mx-auto bg-gradient-to-tr from-gray-500/0 via-gray-500/10 to-gray-500/0 from-white/0 via-white/10 to-white/0 max-w-7xl rounded-3xl mt-24 mr-auto mb-24 ml-auto pt-12 pr-10 pb-12 pl-10 relative" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 z-10 relative gap-x-12 gap-y-12 items-center">
<style class="">
@keyframes flow {
from { stroke-dashoffset: 24; }
to { stroke-dashoffset: 0; }
}
.animate-flow {
animation: flow 1s linear infinite;
}
</style>
<!-- Left Column: Content & Plan Selection -->
<div class="lg:col-span-5 flex flex-col justify-center">
<!-- Headline -->
<div class="flex gap-4 mb-3 gap-x-4 gap-y-4 items-center">
<div class="flex flex-col gap-x-y-1 gap-y-1 items-start">
<span class="uppercase text-sm text-orange-400 tracking-widest">PRICING</span>
<span class="leading-none text-7xl font-light text-white/5 tracking-tight font-bricolage">04.</span>
</div>
<div class="space-y-2">
<h2 class="md:text-5xl text-4xl font-normal text-white tracking-tight font-bricolage">Unlock <span class="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-orange-600">Viral Growth.</span></h2>
</div>
</div>
<!-- Description -->
<p class="text-neutral-400 text-lg leading-relaxed mb-12 max-w-lg font-sans" style="">
Choose the perfect plan to automate your social presence, analyze
trends in real-time, and grow your audience on autopilot.
</p>
<!-- Plan Tabs / Buttons -->
<div class="flex flex-col gap-4 w-full relative z-10 max-w-md">
<!-- Creator (Active) -->
<button id="btn-creator" onclick="selectPlan('creator')" class="relative w-full flex items-center justify-between p-5 rounded-xl bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-[0_0_40px_-10px_rgba(249,115,22,0.4)] transition-transform hover:scale-[1.02] group border-t border-white/20">
<span class="text-xl font-sans" style="">Creator</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-6 h-6 fill-white/20"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg>
<!-- Connector Dot -->
<div id="active-dot" class="hidden lg:block absolute -right-2 top-1/2 -translate-y-1/2 w-3 h-3 bg-orange-500 rounded-full translate-x-1/2 ring-4 ring-[#050505]"></div>
</button>
<!-- Teams/Pro Growth -->
<button id="btn-pro" onclick="selectPlan('pro')" class="w-full flex items-center justify-between p-5 rounded-xl bg-[#181824] border border-white/5 text-neutral-200 hover:bg-[#20202e] hover:border-white/10 transition-all group text-left">
<span class="text-xl group-hover:text-white font-sans" style="">
Pro Growth
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="rocket" class="lucide lucide-rocket w-6 h-6 text-neutral-500 group-hover:text-white transition-colors"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path></svg>
</button>
<!-- Business/Agency -->
<button id="btn-agency" onclick="selectPlan('agency')" class="w-full flex items-center justify-between p-5 rounded-xl bg-[#181824] border border-white/5 text-neutral-200 hover:bg-[#20202e] hover:border-white/10 transition-all group text-left">
<span class="text-xl group-hover:text-white font-sans" style="">
Agency
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="globe" class="lucide lucide-globe w-6 h-6 text-neutral-500 group-hover:text-white transition-colors"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>
</button>
</div>
</div>
<!-- Connector Column (Visual Dashed Lines) -->
<div class="hidden lg:block lg:col-span-2 h-[400px] z-10 relative translate-y-16 gap-x-12 gap-y-12">
<svg class="w-full h-full absolute inset-0 overflow-visible" viewBox="0 0 200 400" preserveAspectRatio="none">
<!-- Active path: Creator (Top) -->
<path id="path-creator" d="M-50 160 C 80 160, 80 200, 180 200 L 240 200" fill="none" stroke="#f97316" stroke-width="2" stroke-dasharray="8 8" class="animate-flow shadow-[0_0_15px_rgba(249,115,22,0.5)]"></path>
<!-- Inactive path: Teams (Middle) -->
<path id="path-pro" d="M-50 250 C 80 250, 80 200, 180 200 L 240 200" fill="none" stroke="#525252" stroke-width="2" stroke-dasharray="6 6" class="opacity-20"></path>
<!-- Inactive path: Business (Bottom) -->
<path id="path-agency" d="M-50 340 C 80 340, 80 200, 180 200 L 240 200" fill="none" stroke="#525252" stroke-width="2" stroke-dasharray="6 6" class="opacity-20"></path>
<!-- Active Arrowhead -->
<path d="M230 195 L 240 200 L 230 205" stroke="#f97316" stroke-width="2" fill="none"></path>
<circle cx="240" cy="200" r="2" fill="#f97316"></circle>
</svg>
</div>
<!-- Right Column: Details Card -->
<div class="lg:col-span-5 relative h-full">
<div class="relative w-full h-full bg-neutral-900 rounded-[32px] p-[2px] electric-card overflow-hidden group">
<!-- Glowing Border Gradient -->
<div class="absolute inset-0 bg-gradient-to-b from-yellow-300 via-orange-500 to-transparent opacity-80 z-0"></div>
<!-- Inner Card Content -->
<div class="relative z-10 bg-[#0A0A0A] rounded-[30px] h-full p-8 lg:p-10 flex flex-col overflow-hidden">
<!-- Background Glow -->
<div class="absolute top-0 right-0 w-full h-40 bg-gradient-to-b from-orange-500/10 to-transparent pointer-events-none"></div>
<!-- Card Header -->
<div class="flex items-center justify-between mb-2 relative z-10">
<h3 id="plan-title" class="text-3xl text-white font-bricolage font-light tracking-tight" style="">
Creator
</h3>
<div class="flex items-baseline gap-1">
<span id="plan-price" class="text-3xl text-transparent bg-clip-text bg-gradient-to-r from-white via-orange-200 to-orange-400 font-bricolage font-light tracking-tight" style="">
$29.00
</span>
<span class="text-sm text-orange-500/80 font-sans" style="">
/month
</span>
</div>
</div>
<!-- Subtext -->
<p id="plan-desc" class="text-neutral-400 mt-6 mb-8 text-sm leading-relaxed border-b border-white/10 pb-8 relative z-10 font-sans" style="">
Ideal for solo creators looking to automate daily posts and
engagement.
</p>
<!-- Features List -->
<div id="plan-features" class="space-y-6 mb-10 relative z-10 flex-grow font-sans">
<!-- Initial content will be set by JS or static HTML -->
<div class="flex items-center gap-4 group/item">
<div class="flex-none transition-transform group-hover/item:translate-x-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#f97316" class="text-orange-500">
<path d="M22 12 6 22V2z" stroke="none"></path>
</svg>
</div>
<span class="text-white text-sm font-sans">
AI Trend Analysis
</span>
</div>
<div class="flex items-center gap-4 group/item">
<div class="flex-none transition-transform group-hover/item:translate-x-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#f97316" class="text-orange-500">
<path d="M22 12 6 22V2z" stroke="none"></path>
</svg>
</div>
<span class="text-white text-sm font-sans">
Auto-Reply Bot
</span>
</div>
<div class="flex items-center gap-4 group/item">
<div class="flex-none transition-transform group-hover/item:translate-x-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#f97316" class="text-orange-500">
<path d="M22 12 6 22V2z" stroke="none"></path>
</svg>
</div>
<span class="text-white text-sm font-sans">
3 Platform Connections
</span>
</div>
<div class="flex items-center gap-4 group/item">
<div class="flex-none transition-transform group-hover/item:translate-x-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#f97316" class="text-orange-500">
<path d="M22 12 6 22V2z" stroke="none"></path>
</svg>
</div>
<span class="text-white text-sm font-sans">
Weekly Performance Report
</span>
</div>
<div class="flex items-center gap-4 group/item">
<div class="flex-none transition-transform group-hover/item:translate-x-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#f97316" class="text-orange-500">
<path d="M22 12 6 22V2z" stroke="none"></path>
</svg>
</div>
<span class="text-white text-sm font-sans">
Viral Score Predictor
</span>
</div>
</div>
<!-- Action Button -->
<button id="plan-cta" class="w-full py-4 rounded-full bg-gradient-to-r from-orange-600 via-orange-500 to-amber-500 hover:brightness-110 text-white transition-all shadow-[0_8px_30px_-5px_rgba(249,115,22,0.4)] flex items-center justify-center gap-2 group/btn relative z-10 hover:shadow-[0_8px_40px_-5px_rgba(249,115,22,0.6)] border-t border-white/20 font-sans" style="">
Start Growing
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right-circle" class="lucide lucide-arrow-right-circle w-5 h-5 text-white/80 transition-transform group-hover/btn:translate-x-1"><circle cx="12" cy="12" r="10"></circle><path d="m12 16 4-4-4-4"></path><path d="M8 12h8"></path></svg>
</button>
</div>
</div>
</div>
</div>
<script>
(function() {
const plans = {
creator: {
title: "Creator",
price: "$29.00",
desc: "Ideal for solo creators looking to automate daily posts and engagement.",
features: [
"AI Trend Analysis",
"Auto-Reply Bot",
"3 Platform Connections",
"Weekly Performance Report",
"Viral Score Predictor"
],
cta: "Start Growing"
},
pro: {
title: "Pro Growth",
price: "$79.00",
desc: "Perfect for scaling teams needing advanced analytics and collaboration.",
features: [
"Everything in Creator",
"Team Collaboration",
"10 Platform Connections",
"Competitor Analysis",
"Priority Support"
],
cta: "Scale Now"
},
agency: {
title: "Agency",
price: "$199.00",
desc: "Ultimate power for agencies managing multiple client brands.",
features: [
"Everything in Pro",
"White Label Reports",
"Unlimited Connections",
"API Access",
"Dedicated Account Manager"
],
cta: "Contact Sales"
}
};
const activeBtnClass = "relative w-full flex items-center justify-between p-5 rounded-xl bg-gradient-to-r from-orange-500 to-amber-500 text-white shadow-[0_0_40px_-10px_rgba(249,115,22,0.4)] transition-transform hover:scale-[1.02] group border-t border-white/20";
const inactiveBtnClass = "w-full flex items-center justify-between p-5 rounded-xl bg-[#181824] border border-white/5 text-neutral-200 hover:bg-[#20202e] hover:border-white/10 transition-all group text-left";
window.selectPlan = function(planKey) {
// 1. Update Buttons
['creator', 'pro', 'agency'].forEach(key => {
const btn = document.getElementById('btn-' + key);
const icon = btn.querySelector('svg');
if (key === planKey) {
btn.className = activeBtnClass;
// Ensure text color inside is white
const textSpan = btn.querySelector('span');
textSpan.className = "text-xl font-sans";
// Set icon color
icon.classList.remove('text-neutral-500');
if(key === 'creator') icon.classList.add('fill-white/20'); // Keep creator specific icon style
// Move Dot
const dot = document.getElementById('active-dot');
btn.appendChild(dot);
} else {
btn.className = inactiveBtnClass;
const textSpan = btn.querySelector('span');
textSpan.className = "text-xl group-hover:text-white font-sans";
icon.classList.add('text-neutral-500');
icon.classList.remove('fill-white/20');
}
});
// 2. Update Lines
['creator', 'pro', 'agency'].forEach(key => {
const path = document.getElementById('path-' + key);
if (key === planKey) {
path.setAttribute('stroke', '#f97316');
path.setAttribute('class', 'animate-flow shadow-[0_0_15px_rgba(249,115,22,0.5)]');
path.setAttribute('stroke-dasharray', '8 8');
} else {
path.setAttribute('stroke', '#525252');
path.setAttribute('class', 'opacity-20');
path.setAttribute('stroke-dasharray', '6 6');
}
});
// 3. Update Content
const data = plans[planKey];
const titleEl = document.getElementById('plan-title');
const priceEl = document.getElementById('plan-price');
const descEl = document.getElementById('plan-desc');
const featuresEl = document.getElementById('plan-features');
const ctaEl = document.getElementById('plan-cta');
// Simple fade out/in effect
const elements = [titleEl, priceEl, descEl, featuresEl, ctaEl];
elements.forEach(el => el.style.opacity = '0');
elements.forEach(el => el.style.transition = 'opacity 0.2s ease');
setTimeout(() => {
titleEl.textContent = data.title;
priceEl.textContent = data.price;
descEl.textContent = data.desc;
// Rebuild features
featuresEl.innerHTML = data.features.map(feat => `
<div class="flex items-center gap-4 group/item">
<div class="flex-none transition-transform group-hover/item:translate-x-1">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#f97316" class="text-orange-500"><path d="M22 12 6 22V2z" stroke="none"></path></svg>
</div>
<span class="text-white text-sm font-sans">${feat}</span>
</div>
`).join('');
ctaEl.innerHTML = `
${data.cta}
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right-circle" class="lucide lucide-arrow-right-circle w-5 h-5 text-white/80 transition-transform group-hover/btn:translate-x-1"><circle cx="12" cy="12" r="10"></circle><path d="m12 16 4-4-4-4"></path><path d="M8 12h8"></path></svg>
`;
elements.forEach(el => el.style.opacity = '1');
}, 200);
}
})();
</script>
</section>
<!-- Footer -->
<footer class="bg-center animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll bg-gradient-to-tr from-gray-500/0 via-gray-500/10 to-gray-500/0 from-white/0 via-white/10 to-white/0 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f5347579-34d0-43b9-99d3-126f6193d19d_1600w.jpg)] max-w-7xl bg-cover rounded-3xl mt-24 mr-auto mb-12 ml-auto pt-24 pr-6 pb-6 pl-6 relative animate" style="position: relative; --border-gradient: linear-gradient(45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-64 bg-orange-500/5 blur-[120px] rounded-full pointer-events-none opacity-50"></div>
<div class="z-10 text-center max-w-4xl mr-auto mb-24 ml-auto pr-6 pl-6 relative">
<h2 class="text-2xl md:text-3xl text-white mb-3 font-bricolage font-light tracking-tight" style="">
Join our newsletter
</h2>
<p class="text-neutral-400 max-w-lg mx-auto mb-8 text-base leading-relaxed font-sans" style="">
Join our newsletter for exclusive insights, announcements, and special
offers delivered directly to your inbox.
</p>
<div class="relative max-w-xs mx-auto">
<form class="flex items-center rounded-lg bg-[#050505] border border-white/10 focus-within:border-white/20 transition-all">
<input type="email" placeholder="Enter your email" class="w-full bg-transparent border-none text-sm text-white pl-4 pr-1 py-3 focus:outline-none placeholder:text-neutral-600 font-sans h-10 rounded-l-lg">
<button class="bg-white hover:bg-neutral-200 text-black px-4 py-2 rounded-r-lg text-sm transition-colors h-10 shadow-lg flex items-center gap-2 flex-shrink-0 font-sans" style="">
Subscribe
</button>
</form>
</div>
</div>
<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
<div class="w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent mb-16"></div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-12 max-w-7xl mx-auto px-6">
<div class="lg:col-span-2 col-span-full">
<div class="flex flex-col items-start gap-4">
<div class="flex gap-2 gap-x-2 gap-y-2 items-center">
<div class="relative flex items-center justify-center w-8 h-8">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="asterisk" class="lucide lucide-asterisk text-white w-8 h-8 absolute rotate-45"><path d="M12 6v12"></path><path d="M17.196 9 6.804 15"></path><path d="m6.804 9 10.392 6"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="asterisk" class="lucide lucide-asterisk absolute w-[32px] h-[32px]" data-icon-replaced="true" style="width: 32px; height: 32px; color: rgb(249, 115, 22);"><path d="M12 6v12"></path><path d="M17.196 9 6.804 15"></path><path d="m6.804 9 10.392 6"></path></svg>
</div>
<span class="text-xl text-white font-sans" style="">
Luminous
</span>
</div>
<div class="flex gap-4">
<a href="#" class="text-neutral-500 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 209" style="color: rgb(255, 255, 255); width: 18px; height: 18px" class="lucide lucide-twitter w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-logos="twitter" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
<path fill="#ffffff" d="M256 25.45a105 105 0 0 1-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.2 105.2 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.3 52.3 0 0 1-23.79-6.57q-.004.33-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.6 52.6 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435q0-3.417-.152-6.795A106.8 106.8 0 0 0 256 25.45"></path>
</svg>
</a>
<a href="#" class="text-neutral-500 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256" style="color: rgb(255, 255, 255); width: 18px; height: 18px;" class="lucide lucide-x-square w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-logos="instagram-icon" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
<path fill="#ffffff" d="M128 23.064c34.177 0 38.225.13 51.722.745c12.48.57 19.258 2.655 23.769 4.408c5.974 2.322 10.238 5.096 14.717 9.575s7.253 8.743 9.575 14.717c1.753 4.511 3.838 11.289 4.408 23.768c.615 13.498.745 17.546.745 51.723s-.13 38.226-.745 51.723c-.57 12.48-2.655 19.257-4.408 23.768c-2.322 5.974-5.096 10.239-9.575 14.718s-8.743 7.253-14.717 9.574c-4.511 1.753-11.289 3.839-23.769 4.408c-13.495.616-17.543.746-51.722.746s-38.228-.13-51.723-.746c-12.48-.57-19.257-2.655-23.768-4.408c-5.974-2.321-10.239-5.095-14.718-9.574c-4.479-4.48-7.253-8.744-9.574-14.718c-1.753-4.51-3.839-11.288-4.408-23.768c-.616-13.497-.746-17.545-.746-51.723s.13-38.225.746-51.722c.57-12.48 2.655-19.258 4.408-23.769c2.321-5.974 5.095-10.238 9.574-14.717c4.48-4.48 8.744-7.253 14.718-9.575c4.51-1.753 11.288-3.838 23.768-4.408c13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95c-8.418 3.271-15.556 7.648-22.672 14.764S9.991 35.738 6.72 44.155C3.555 52.297 1.392 61.602.77 75.226C.147 88.878 0 93.237 0 128s.147 39.122.77 52.774c.622 13.625 2.785 22.93 5.95 31.071c3.27 8.417 7.647 15.556 14.763 22.672s14.254 11.492 22.672 14.763c8.142 3.165 17.446 5.328 31.07 5.95c13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95c8.418-3.27 15.556-7.647 22.672-14.763s11.493-14.254 14.764-22.672c3.164-8.142 5.328-17.446 5.95-31.07c.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07c-3.271-8.418-7.648-15.556-14.764-22.672S220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0m0 62.27c-36.302 0-65.73 29.43-65.73 65.73s29.428 65.73 65.73 65.73c36.301 0 65.73-29.428 65.73-65.73c0-36.301-29.429-65.73-65.73-65.73m0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667m83.686-110.994c0 8.484-6.876 15.36-15.36 15.36s-15.36-6.876-15.36-15.36s6.877-15.36 15.36-15.36s15.36 6.877 15.36 15.36"></path>
</svg>
</a>
<a href="#" class="text-neutral-500 hover:text-white transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 256 256" style="color: rgb(255, 255, 255); width: 18px; height: 18px;" class="lucide lucide-linkedin w-[18px] h-[18px]" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" data-logos="linkedin-icon" data-icon-set="logos" data-icon-replaced="true" stroke-width="2">
<path fill="#ffffff" d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4c-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.91 39.91 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186zM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009s9.851-22.014 22.008-22.016c12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97zM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="lg:col-span-2">
<h4 class="text-white mb-4 text-sm font-sans" style="">Product</h4>
<ul class="space-y-3 text-sm text-neutral-500">
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Product
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Integrations
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Pricing
</a>
</li>
</ul>
</div>
<div class="lg:col-span-2">
<h4 class="text-white mb-4 text-sm font-sans" style="">Developers</h4>
<ul class="space-y-3 text-sm text-neutral-500">
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Docs
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Discord server
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Changelog
</a>
</li>
</ul>
</div>
<div class="lg:col-span-2">
<h4 class="text-white mb-4 text-sm font-sans" style="">Company</h4>
<ul class="space-y-3 text-sm text-neutral-500">
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
About
</a>
</li>
<li class="">
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Articles
</a>
</li>
<li>
<a href="#" class="hover:text-white transition-colors font-sans" style="">
Contact
</a>
</li>
</ul>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-16 flex flex-col items-start gap-4 text-xs text-neutral-600 font-sans">
<p class="font-sans" style="">
© 2025 AINest INC. All rights reserved.
</p>
</div>
<div class="absolute bottom-0 left-0 w-full h-16 bg-[#f97316]/20 blur-3xl opacity-50 pointer-events-none"></div>
</footer>
<script>
lucide.createIcons();
</script>
</body></html>