Загрузка...
Шаблон "О нас" для лендинга. Представляет компанию, команду, миссию и ценности. Повышает доверие пользователей.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - Luminous</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;
}
/* 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>
@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>
(function () {
const style = document.createElement("style");
style.textContent = `
.animate-on-scroll { animation-play-state: paused !important; }
.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);
});
};
document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
})();
</script>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist">
.font-geist {
font-family: 'Geist', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-roboto" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-roboto">
.font-roboto {
font-family: 'Roboto', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-montserrat" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-montserrat">
.font-montserrat {
font-family: 'Montserrat', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-poppins" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-poppins">
.font-poppins {
font-family: 'Poppins', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-playfair" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
<style id="all-fonts-style-font-playfair">
.font-playfair {
font-family: 'Playfair Display', serif !important;
}
</style>
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap">
<style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif {
font-family: 'Instrument Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-merriweather" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap">
<style id="all-fonts-style-font-merriweather">
.font-merriweather {
font-family: 'Merriweather', serif !important;
}
</style>
<link id="all-fonts-link-font-bricolage" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-bricolage">
.font-bricolage {
font-family: 'Bricolage Grotesque', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-jakarta" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-jakarta">
.font-jakarta {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-manrope" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-manrope">
.font-manrope {
font-family: 'Manrope', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk {
font-family: 'Space Grotesk', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-work-sans" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-work-sans">
.font-work-sans {
font-family: 'Work Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-pt-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap">
<style id="all-fonts-style-font-pt-serif">
.font-pt-serif {
font-family: 'PT Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-geist-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist-mono">
.font-geist-mono {
font-family: 'Geist Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-space-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
<style id="all-fonts-style-font-space-mono">
.font-space-mono {
font-family: 'Space Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-quicksand" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-quicksand">
.font-quicksand {
font-family: 'Quicksand', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-nunito" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-nunito">
.font-nunito {
font-family: 'Nunito', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist">
.font-geist {
font-family: 'Geist', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-roboto" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-roboto">
.font-roboto {
font-family: 'Roboto', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-montserrat" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-montserrat">
.font-montserrat {
font-family: 'Montserrat', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-poppins" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-poppins">
.font-poppins {
font-family: 'Poppins', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-playfair" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
<style id="all-fonts-style-font-playfair">
.font-playfair {
font-family: 'Playfair Display', serif !important;
}
</style>
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap">
<style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif {
font-family: 'Instrument Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-merriweather" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap">
<style id="all-fonts-style-font-merriweather">
.font-merriweather {
font-family: 'Merriweather', serif !important;
}
</style>
<link id="all-fonts-link-font-bricolage" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-bricolage">
.font-bricolage {
font-family: 'Bricolage Grotesque', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-jakarta" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-jakarta">
.font-jakarta {
font-family: 'Plus Jakarta Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-manrope" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-manrope">
.font-manrope {
font-family: 'Manrope', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk {
font-family: 'Space Grotesk', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-work-sans" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-work-sans">
.font-work-sans {
font-family: 'Work Sans', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-pt-serif" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap">
<style id="all-fonts-style-font-pt-serif">
.font-pt-serif {
font-family: 'PT Serif', serif !important;
}
</style>
<link id="all-fonts-link-font-geist-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-geist-mono">
.font-geist-mono {
font-family: 'Geist Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-space-mono" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
<style id="all-fonts-style-font-space-mono">
.font-space-mono {
font-family: 'Space Mono', monospace !important;
}
</style>
<link id="all-fonts-link-font-quicksand" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
<style id="all-fonts-style-font-quicksand">
.font-quicksand {
font-family: 'Quicksand', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-nunito" rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap">
<style id="all-fonts-style-font-nunito">
.font-nunito {
font-family: 'Nunito', sans-serif !important;
}
</style>
<link id="all-fonts-link-font-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-x-2 gap-y-2 items-center" onclick="window.location.href='/home'" role="button">
<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">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="hover:text-white transition-colors text-xs text-neutral-400 pt-1.5 pr-4 pb-1.5 pl-4">
Home
</a>
<a href="/aboutus"
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>
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="#" class="px-4 py-1.5 text-xs text-neutral-400 hover:text-white transition-colors font-sans" style="">
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>
<!-- Main Content -->
<main class="lg:pt-24 max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-20 pl-6 relative">
<!-- Header Section -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 lg:mb-32 mb-24 gap-x-12 gap-y-12 items-center">
<div class="lg:col-span-7 flex flex-col items-start z-10">
<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="14" height="14" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-users text-orange-400">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" class=""></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>
<span class="font-sans">The Team Behind Luminous</span>
</div>
<h1
class="text-5xl lg:text-[76px] leading-[1.05] text-white mb-8 font-bricolage font-light tracking-tight animate-entry delay-150">
WE ARE BUILDING
<br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-200 to-white">
INTELLIGENCE
</span>
FOR
<br>
THE SOCIAL AGE
</h1>
<p class="text-lg text-neutral-400 max-w-xl leading-relaxed font-sans animate-entry delay-200">
Luminous was founded on a simple premise: content creation is art,
but growth is science. We provide the intelligence layer that sits
between your creativity and the world.
</p>
</div>
<!-- Right Side: Culture/Abstract Image -->
<div class="lg:col-span-5 relative z-10 animate-entry delay-300">
<div
class="aspect-[4/5] md:aspect-square electric-card bg-gradient-to-b from-orange-400 to-transparent overflow-hidden group w-full rounded-[32px] pt-[2px] pr-[2px] pb-[2px] pl-[2px] relative">
<div class="z-10 overflow-hidden w-full h-full rounded-[30px] relative bg-[#050505]">
<div class="absolute inset-0" data-container-bg="true">
<div class="spline-container absolute top-0 left-0 w-full h-full -z-10">
<iframe
src="https://my.spline.design/fireparticleloaderanimationdrstrangeporta-2XtNK3LbyCGmClvus9SdgnYJ/"
frameborder="0" width="100%" height="100%"></iframe>
</div>
</div>
<div
class="absolute inset-0 bg-gradient-to-b from-orange-500/20 via-orange-500/5 to-transparent opacity-80 z-0">
</div>
</div>
</div>
</div>
</div>
<!-- Stats Grid -->
<div
class="grid grid-cols-2 md:grid-cols-4 border-y border-white/5 animate-on-scroll [animation:animationIn_0.8s_ease-out_0.4s_both] animate">
<div
class="flex flex-col p-8 border-r border-white/5 border-b md:border-b-0 items-center md:items-start text-center md:text-left">
<span class="text-4xl lg:text-5xl font-bricolage font-light text-white mb-2">
2023
</span>
<span class="text-sm text-neutral-500 font-sans uppercase tracking-wide">
Year Founded
</span>
</div>
<div
class="flex flex-col p-8 md:border-r border-white/5 border-b md:border-b-0 items-center md:items-start text-center md:text-left">
<span class="text-4xl lg:text-5xl font-bricolage font-light text-white mb-2">
45+
</span>
<span class="text-sm text-neutral-500 font-sans uppercase tracking-wide">
Team Members
</span>
</div>
<div class="flex flex-col p-8 border-r border-white/5 items-center md:items-start text-center md:text-left">
<span class="text-4xl lg:text-5xl font-bricolage font-light text-white mb-2">
12M
</span>
<span class="text-sm text-neutral-500 font-sans uppercase tracking-wide">
Posts Analyzed
</span>
</div>
<div class="flex flex-col p-8 items-center md:items-start text-center md:text-left">
<span class="text-4xl lg:text-5xl font-bricolage font-light text-white mb-2">
$8.5M
</span>
<span class="text-sm text-neutral-500 font-sans uppercase tracking-wide">
Capital Raised
</span>
</div>
</div>
</main>
<!-- Mission & Values Section -->
<section class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] py-0 relative">
<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-10 pr-10 pb-10 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">
OUR VALUES
</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 font-normal text-white tracking-tight font-bricolage">
The Luminous
<span class="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-orange-600">
Difference
</span>
</h2>
<p class="leading-relaxed text-base text-neutral-400 max-w-2xl">
We illuminate your social strategy. These principles are the
foundation of our automation, ensuring every post and campaign
shines.
</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
</button>
</div>
</div>
</div>
<div class="hidden lg:flex gap-x-2 gap-y-2">
<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>
<div class="max-w-7xl mr-auto ml-auto pr-0 pl-0">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mt-12 mb-12 gap-x-4 gap-y-4">
<div class="group overflow-hidden bg-neutral-900 h-[600px] border-white/5 border rounded-xl relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c4caf266-1e33-4d76-bbc4-823b55ad71e2_800w.webp" alt="Clarity" class="transition-all duration-700 group-hover:scale-110 opacity-60 mix-blend-overlay group-hover:opacity-100 group-hover:mix-blend-normal w-full h-full object-cover absolute top-0 right-0 bottom-0 left-0" style="">
<div
class="absolute inset-0 bg-gradient-to-t from-[#ff3300]/20 via-transparent to-transparent opacity-60 group-hover:opacity-0 transition-opacity duration-500"
style=""></div>
<div class="flex flex-col z-10 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0" style="">
<h3 class="text-2xl font-medium text-white tracking-tight mb-auto">
CLARITY
</h3>
<ul class="space-y-0 text-[13px] font-medium tracking-wide text-neutral-300 mb-12">
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
INSIGHT-DRIVEN STRATEGY
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
PERFORMANCE VISIBILITY
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
AUDIENCE ILLUMINATION
</li>
</ul>
<span class="text-6xl font-bold text-orange-500 font-bricolage opacity-90 absolute right-6 bottom-4">
01
</span>
</div>
</div>
<div class="group relative h-[600px] rounded-xl overflow-hidden bg-neutral-900 border border-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/98e225ab-8f55-4e51-bac4-633a832f3414_800w.webp" alt="Effortless" class="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-overlay transition-all duration-700 group-hover:scale-110 group-hover:opacity-100 group-hover:mix-blend-normal" style="">
<div
class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/90 group-hover:opacity-0 transition-opacity duration-500">
</div>
<div class="flex flex-col z-10 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0">
<h3 class="text-2xl font-sans font-medium text-white tracking-tight mb-auto">
EFFORTLESS
</h3>
<ul class="space-y-0 text-[13px] font-medium tracking-wide text-neutral-300 mb-12">
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
SEAMLESS SCHEDULING
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
INTEGRATED WORKFLOW
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
TIMELESS AUTOMATION
</li>
</ul>
<span class="text-6xl font-bold text-orange-500 font-bricolage opacity-90 absolute right-6 bottom-4">
02
</span>
</div>
</div>
<div class="group relative h-[600px] rounded-xl overflow-hidden bg-neutral-900 border border-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/802276b8-f03f-4229-9a50-e17e9668ae60_800w.jpg" alt="Impact" class="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-overlay transition-all duration-700 group-hover:scale-110 group-hover:opacity-100 group-hover:mix-blend-normal" style="">
<div class="flex flex-col z-10 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0">
<h3 class="text-2xl font-sans font-medium text-white tracking-tight mb-auto">
IMPACT
</h3>
<ul class="space-y-0 text-[13px] font-medium tracking-wide text-neutral-300 mb-12">
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
MAXIMIZED ENGAGEMENT
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
CONVERSION FOCUS
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
BRAND RESONANCE
</li>
</ul>
<span class="text-6xl font-bold text-orange-500 font-bricolage opacity-90 absolute right-6 bottom-4">
03
</span>
</div>
</div>
<div class="group relative h-[600px] rounded-xl overflow-hidden bg-neutral-900 border border-white/5">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/50d632bf-3c80-474f-b372-707c22f7d109_800w.webp" alt="Growth" class="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-overlay transition-all duration-700 group-hover:scale-110 group-hover:opacity-100 group-hover:mix-blend-normal">
<div
class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/90 group-hover:opacity-0 transition-opacity duration-500">
</div>
<div
class="absolute inset-0 bg-gradient-to-t from-[#ff3300]/20 via-transparent to-transparent opacity-60 group-hover:opacity-0 transition-opacity duration-500">
</div>
<div class="flex flex-col z-10 pt-8 pr-8 pb-8 pl-8 absolute top-0 right-0 bottom-0 left-0">
<h3 class="text-2xl font-sans font-medium text-white tracking-tight mb-auto">
GROWTH
</h3>
<ul class="space-y-0 text-[13px] font-medium tracking-wide text-neutral-300 mb-12">
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
ADAPTIVE AI OPTIMIZATION
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
FUTURE-PROOF SCALING
</li>
<li
class="py-3 border-b border-dashed border-white/20 flex items-center justify-between group-hover:text-white transition-colors">
CONTINUOUS IMPROVEMENT
</li>
</ul>
<span class="text-6xl font-bold text-orange-500 font-bricolage opacity-90 absolute right-6 bottom-4">
04
</span>
</div>
</div>
</div>
</div>
<!-- Main Grid -->
<!-- Bottom Features -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-12 border-white/5 border-t pt-12 gap-x-12 gap-y-12">
<!-- Value 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-zap text-neutral-400 mb-5 group-hover:text-orange-500 transition-colors duration-300">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
<h3 class="text-xl text-white mb-3 font-sans" style="">
Relentless Innovation
</h3>
<p class="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors font-sans"
style="">
We constantly challenge the status quo, pushing the boundaries of
AI to deliver predictive tools that keep you ahead of the curve.
</p>
</div>
<!-- Value 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-users text-neutral-400 mb-5 group-hover:text-orange-500 transition-colors duration-300">
<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>
<h3 class="text-xl text-white mb-3 font-sans" style="">
Community First
</h3>
<p class="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors font-sans"
style="">
We build for people, not just metrics. Our tools are designed to
foster genuine human connections and meaningful engagement.
</p>
</div>
<!-- Value 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"
class=""></path>
<path d="m9 12 2 2 4-4"></path>
</svg>
<h3 class="text-xl text-white mb-3 font-sans" style="">
Ethical Standards
</h3>
<p class="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors font-sans"
style="">
We prioritize privacy and data integrity above all else, ensuring
your brand is protected by enterprise-grade safety protocols.
</p>
</div>
</div>
</section>
</section>
<section class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] py-0 relative">
<section
class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] max-w-7xl mr-auto ml-auto pr-6 pl-6 py-0">
<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-10 pr-10 pb-10 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 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">
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: Predictive -->
<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/0 hover:shadow-[0_0_40px_-10px_rgba(249,115,22,0.3)]">
<!-- Hover Gradient Background -->
<div
class="absolute inset-0 bg-gradient-to-br from-orange-500 via-orange-600 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
<!-- Initial Dark Background Radial -->
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none group-hover:opacity-0 transition-opacity duration-500 z-0">
</div>
<!-- Top Row -->
<div class="flex justify-between items-start z-10 w-full mb-auto relative">
<div
class="w-12 h-12 rounded-full flex items-center justify-center border transition-colors duration-500 bg-white/5 border-white/10 text-neutral-400 group-hover:bg-white/10 group-hover:border-white/20 group-hover:text-white">
<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="font-mono text-sm tracking-wider transition-colors duration-500 text-neutral-600 group-hover:text-orange-100/80">
/ 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 max-w-md font-sans border-t pt-6 transition-colors duration-500 text-neutral-500 border-white/5 group-hover:text-orange-50/90 group-hover:border-white/20">
While others analyze the past, Luminous predicts the future.
Our AI identifies viral vectors 48 hours before they peak.
</p>
</div>
<!-- Hover 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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
</div>
<!-- Card 2: Autonomous -->
<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/0 hover:shadow-[0_0_40px_-10px_rgba(249,115,22,0.3)]">
<!-- Hover Gradient Background -->
<div
class="absolute inset-0 bg-gradient-to-br from-orange-500 via-orange-600 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
<!-- Initial Dark Background Radial -->
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none group-hover:opacity-0 transition-opacity duration-500 z-0">
</div>
<div class="flex justify-between items-start z-10 w-full mb-auto relative">
<div
class="w-12 h-12 rounded-full flex items-center justify-center border transition-colors duration-500 bg-white/5 border-white/10 text-neutral-400 group-hover:bg-white/10 group-hover:border-white/20 group-hover:text-white">
<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">
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
</div>
<span class="font-mono text-sm tracking-wider transition-colors duration-500 text-neutral-600 group-hover:text-orange-100/80">
/ 02
</span>
</div>
<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">
Autonomous Velocity
</h3>
<p
class="text-base font-medium leading-relaxed max-w-md font-sans border-t pt-6 transition-colors duration-500 text-neutral-500 border-white/5 group-hover:text-orange-50/90 group-hover:border-white/20">
Speed wins. Luminous executes engagement strategies 24/7,
ensuring you capture attention the moment it becomes
available.
</p>
</div>
<!-- Hover 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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
</div>
<!-- Card 3: Safety -->
<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/0 hover:shadow-[0_0_40px_-10px_rgba(249,115,22,0.3)]">
<!-- Hover Gradient Background -->
<div
class="absolute inset-0 bg-gradient-to-br from-orange-500 via-orange-600 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
<!-- Initial Dark Background Radial -->
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none group-hover:opacity-0 transition-opacity duration-500 z-0">
</div>
<div class="flex justify-between items-start z-10 w-full mb-auto relative">
<div
class="w-12 h-12 rounded-full flex items-center justify-center border transition-colors duration-500 bg-white/5 border-white/10 text-neutral-400 group-hover:bg-white/10 group-hover:border-white/20 group-hover:text-white">
<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">
<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="font-mono text-sm tracking-wider transition-colors duration-500 text-neutral-600 group-hover:text-orange-100/80">
/ 03
</span>
</div>
<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">
Safety by Design
</h3>
<p
class="text-base font-medium leading-relaxed max-w-md font-sans border-t pt-6 transition-colors duration-500 text-neutral-500 border-white/5 group-hover:text-orange-50/90 group-hover:border-white/20">
Aggressive growth, zero risk. Our context-aware AI ensures
every interaction aligns with your brand values and safety
guidelines.
</p>
</div>
<!-- Hover 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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
</div>
<!-- Card 4: Omnichannel -->
<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/0 hover:shadow-[0_0_40px_-10px_rgba(249,115,22,0.3)]">
<!-- Hover Gradient Background -->
<div
class="absolute inset-0 bg-gradient-to-br from-orange-500 via-orange-600 to-orange-700 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
<!-- Initial Dark Background Radial -->
<div
class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_rgba(255,255,255,0.05),_transparent_40%)] pointer-events-none group-hover:opacity-0 transition-opacity duration-500 z-0">
</div>
<div class="flex justify-between items-start z-10 w-full mb-auto relative">
<div
class="w-12 h-12 rounded-full flex items-center justify-center border transition-colors duration-500 bg-white/5 border-white/10 text-neutral-400 group-hover:bg-white/10 group-hover:border-white/20 group-hover:text-white">
<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">
<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="font-mono text-sm tracking-wider transition-colors duration-500 text-neutral-600 group-hover:text-orange-100/80">
/ 04
</span>
</div>
<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">
Omnichannel Scale
</h3>
<p
class="text-base font-medium leading-relaxed max-w-md font-sans border-t pt-6 transition-colors duration-500 text-neutral-500 border-white/5 group-hover:text-orange-50/90 group-hover:border-white/20">
Build once, deploy everywhere. Luminous adapts your content
strategy across X, LinkedIn, and Instagram simultaneously.
</p>
</div>
<!-- Hover 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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</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 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0">
</div>
</div>
</div>
</section>
</section>
</section>
<section class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] py-0 relative">
<section
class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] max-w-7xl mr-auto ml-auto pr-6 pl-6 py-0">
<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-10 pr-10 pb-10 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">
FEATURES
</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">
Powerful Tools for
<span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-orange-600">
Modern Growth
</span>
</h2>
<p class="leading-relaxed text-base text-neutral-400 max-w-2xl">
Everything you need to scale your social presence, built
into one cohesive platform driven by intelligence.
</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">
Explore Features
</button>
</div>
</div>
</div>
<div class="hidden lg:flex gap-x-2 gap-y-2">
<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">
View All
<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>
<!-- Feature Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
<!-- Feature 1 -->
<div
class="group p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/30 transition-all hover:bg-white/10">
<div
class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mb-6 group-hover:bg-orange-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-wand-2 text-orange-500">
<path
d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72Z">
</path>
<path d="m14 7 3 3"></path>
<path d="M5 6v4"></path>
<path d="M19 14v4"></path>
<path d="M10 2v2"></path>
<path d="M7 8H3"></path>
<path d="M21 16h-4"></path>
<path d="M11 3H9"></path>
</svg>
</div>
<h3 class="text-xl text-white font-bricolage mb-3">
AI Content Studio
</h3>
<p class="text-neutral-400 text-sm leading-relaxed font-sans">
Generate high-converting posts, threads, and captions in seconds
with our context-aware AI engine.
</p>
</div>
<!-- Feature 2 -->
<div
class="group p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/30 transition-all hover:bg-white/10">
<div
class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mb-6 group-hover:bg-orange-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-bar-chart-2 text-orange-500">
<line x1="18" x2="18" y1="20" y2="10"></line>
<line x1="12" x2="12" y1="20" y2="4"></line>
<line x1="6" x2="6" y1="20" y2="14"></line>
</svg>
</div>
<h3 class="text-xl text-white font-bricolage mb-3">
Deep Analytics
</h3>
<p class="text-neutral-400 text-sm leading-relaxed font-sans">
Go beyond vanity metrics. Understand sentiment, audience
demographics, and conversion pathways.
</p>
</div>
<!-- Feature 3 -->
<div
class="group p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/30 transition-all hover:bg-white/10">
<div
class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mb-6 group-hover:bg-orange-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-calendar-clock text-orange-500">
<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="M21 17h-5"></path>
<path d="m19 19 2 2"></path>
</svg>
</div>
<h3 class="text-xl text-white font-bricolage mb-3">
Smart Scheduling
</h3>
<p class="text-neutral-400 text-sm leading-relaxed font-sans">
Automatically queue content for times when your specific
audience is most active and engaged.
</p>
</div>
<!-- Feature 4 -->
<div
class="group p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/30 transition-all hover:bg-white/10">
<div
class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mb-6 group-hover:bg-orange-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-users-2 text-orange-500">
<path d="M14 19a6 6 0 0 0-12 0"></path>
<circle cx="8" cy="9" r="4"></circle>
<path d="M22 19a6 6 0 0 0-6-6 4 4 0 1 0 0-8"></path>
</svg>
</div>
<h3 class="text-xl text-white font-bricolage mb-3">
Audience Personas
</h3>
<p class="text-neutral-400 text-sm leading-relaxed font-sans">
Create and track multiple audience personas to tailor content
for different segments of your market.
</p>
</div>
<!-- Feature 5 -->
<div
class="group p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/30 transition-all hover:bg-white/10">
<div
class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mb-6 group-hover:bg-orange-500/20 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="1.5" 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>
</div>
<h3 class="text-xl text-white font-bricolage mb-3">
Trend Prediction
</h3>
<p class="text-neutral-400 text-sm leading-relaxed font-sans">
Get ahead of the curve with AI that identifies rising trends in
your niche before they go viral.
</p>
</div>
<!-- Feature 6 -->
<div
class="group p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-orange-500/30 transition-all hover:bg-white/10">
<div
class="w-12 h-12 rounded-full bg-orange-500/10 flex items-center justify-center mb-6 group-hover:bg-orange-500/20 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="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-globe text-orange-500">
<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>
</div>
<h3 class="text-xl text-white font-bricolage mb-3">
Multi-Channel Sync
</h3>
<p class="text-neutral-400 text-sm leading-relaxed font-sans">
Seamlessly manage and synchronize your brand voice across
LinkedIn, Twitter, and Instagram.
</p>
</div>
</div>
</section>
</section>
</section>
<section class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] pt-0 pb-0 relative">
<section
class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both] max-w-7xl mr-auto ml-auto pr-6 pl-6 py-0">
<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-10 pr-10 pb-10 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="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">
OUR TEAM
</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">
Meet Our
<span class="bg-clip-text text-transparent bg-gradient-to-r from-orange-400 to-orange-600">
Leadership Team
</span>
</h2>
<p class="leading-relaxed text-base text-neutral-400 max-w-2xl">
A collective of dedicated founders and operational experts
driving the future of plat-form.
</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 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">
Contact Us
<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 class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-2 lg:gap-6 lg:h-[600px] mt-12 gap-x-4 gap-y-4">
<!-- Card 1: Improved Title Section -->
<div
class="order-1 lg:col-span-4 lg:row-span-1 lg:col-start-1 lg:row-start-1 bg-[#0A0A0A] border border-white/10 rounded-[32px] p-8 flex flex-col justify-between group hover:border-orange-500/30 transition-colors relative overflow-hidden">
<div
class="absolute inset-0 bg-gradient-to-br from-orange-500/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none">
</div>
<div class="flex items-center justify-between relative z-10">
<div
class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/5 backdrop-blur-sm">
<div class="w-1.5 h-1.5 rounded-full bg-orange-500 animate-pulse"></div>
<span class="text-[11px] font-sans font-normal text-neutral-400 uppercase tracking-widest">
Leadership
</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-sparkles text-neutral-700 group-hover:text-orange-500/50 transition-colors">
<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>
<div class="relative z-10 pt-8">
<h2 class="leading-tight text-4xl font-light text-white tracking-tight font-bricolage">
Meet the
<span class="text-white/50 group-hover:text-white/70 transition-colors duration-500">
Luminous Team
</span>
</h2>
</div>
</div>
<!-- Card 2: Navigation -->
<div
class="order-3 lg:col-span-2 lg:row-span-1 lg:col-start-11 lg:row-start-1 flex gap-6 group hover:border-orange-500/30 transition-colors bg-[#0A0A0A] border-white/10 border rounded-[32px] pt-8 pr-8 pb-8 pl-8 gap-x-6 gap-y-6 items-center justify-center">
<button id="team-prev-btn" class="flex hover:text-white hover:bg-white/10 hover:border-white/20 transition-all text-neutral-400 bg-white/5 w-12 h-12 border-white/5 border rounded-full items-center justify-center cursor-pointer active:scale-95">
<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-arrow-left">
<path d="m12 19-7-7 7-7" class=""></path>
<path d="M19 12H5" class=""></path>
</svg>
</button>
<button id="team-next-btn" class="w-12 h-12 flex items-center justify-center rounded-full border border-white/5 bg-white/5 text-white hover:bg-orange-500 hover:border-orange-500 hover:text-white transition-all cursor-pointer active:scale-95">
<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-arrow-right">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg>
</button>
</div>
<!-- Card 3: Info -->
<div
class="order-4 lg:col-span-4 lg:row-span-1 lg:col-start-1 lg:row-start-2 md:p-10 flex flex-col group hover:border-orange-500/30 transition-colors bg-[#0A0A0A] border-white/10 border rounded-[32px] pt-8 pr-8 pb-8 pl-8 justify-end min-h-[240px]">
<div class="mb-auto hidden lg:block"></div>
<div class="space-y-4">
<div class="">
<h2 id="team-name"
class="text-3xl lg:text-4xl font-light text-white tracking-tight font-bricolage mb-1 transition-opacity duration-300">
Marina Bella
</h2>
<p id="team-role"
class="text-orange-500 font-sans text-xs font-medium uppercase tracking-widest transition-opacity duration-300">
Chief AI Architect
</p>
</div>
<p id="team-desc"
class="leading-relaxed text-base text-neutral-400 transition-opacity duration-300 min-h-[80px]">
Leading the engineering of Luminous’s core predictive model.
Focusing on sophisticated algorithms that analyze social data
points for surgical precision.
</p>
</div>
</div>
<!-- Card 4: Main Image -->
<div
class="order-2 lg:col-span-6 lg:row-span-2 lg:col-start-5 lg:row-start-1 relative overflow-hidden rounded-[32px] border border-white/10 h-[400px] lg:h-auto bg-neutral-900">
<img id="team-image" src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5ced5c5d-a2b0-4a8c-889e-6a93fae67dd0_1600w.webp" alt="Team Member" class="w-full h-full object-cover transition-opacity duration-500 ease-in-out">
<div
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent z-10 pointer-events-none">
</div>
</div>
<!-- Card 5: Socials -->
<div
class="order-5 lg:col-span-2 lg:row-span-1 lg:col-start-11 lg:row-start-2 bg-[#0A0A0A] border border-white/10 rounded-[32px] p-8 flex lg:flex-col items-center justify-center gap-6 group hover:border-orange-500/30 transition-colors">
<a href="#" class="text-neutral-500 hover:text-white transition-colors hover:scale-110 duration-200">
<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>
</a>
<a href="#" class="text-neutral-500 hover:text-white transition-colors hover:scale-110 duration-200">
<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>
</a>
<a href="#" class="text-neutral-500 hover:text-white transition-colors hover:scale-110 duration-200">
<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>
</a>
<a href="#" class="text-neutral-500 hover:text-white transition-colors hover:scale-110 duration-200">
<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-mail">
<rect width="20" height="16" x="2" y="4" rx="2"></rect>
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
</svg>
</a>
</div>
</div>
<script>
(function() {
const teamData = [
{
name: "Marina Bella",
role: "Chief AI Architect",
desc: "Leading the engineering of Luminous’s core predictive model. Focusing on sophisticated algorithms that analyze social data points for surgical precision.",
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5ced5c5d-a2b0-4a8c-889e-6a93fae67dd0_1600w.webp"
},
{
name: "Alex Thorne",
role: "Head of Product",
desc: "Architecting the user experience to bridge the gap between complex AI capabilities and intuitive human interaction. Obsessed with workflow optimization.",
img: "https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&q=80"
},
{
name: "Sarah Jenkins",
role: "VP of Operations",
desc: "Ensuring our infrastructure scales seamlessly with your growth. Dedicated to building robust systems that handle millions of requests without friction.",
img: "https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80"
}
];
let currentIndex = 0;
const nameEl = document.getElementById('team-name');
const roleEl = document.getElementById('team-role');
const descEl = document.getElementById('team-desc');
const imgEl = document.getElementById('team-image');
const prevBtn = document.getElementById('team-prev-btn');
const nextBtn = document.getElementById('team-next-btn');
function updateContent(index) {
if(!nameEl || !roleEl || !descEl || !imgEl) return;
const item = teamData[index];
// Fade out
nameEl.style.opacity = '0';
roleEl.style.opacity = '0';
descEl.style.opacity = '0';
imgEl.style.opacity = '0';
setTimeout(() => {
nameEl.textContent = item.name;
roleEl.textContent = item.role;
descEl.textContent = item.desc;
imgEl.src = item.img;
// Fade in
nameEl.style.opacity = '1';
roleEl.style.opacity = '1';
descEl.style.opacity = '1';
imgEl.style.opacity = '1';
}, 300);
}
if(prevBtn) {
prevBtn.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + teamData.length) % teamData.length;
updateContent(currentIndex);
});
}
if(nextBtn) {
nextBtn.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % teamData.length;
updateContent(currentIndex);
});
}
})();
</script>
</section>
</section>
</section>
<!-- Team Section -->
<!-- Join CTA -->
<section class="max-w-7xl mx-auto px-6 mb-24 animate-on-scroll [animation:animationIn_0.8s_ease-out_0.2s_both]">
<div class="relative overflow-hidden rounded-[32px] bg-neutral-900 border border-white/10">
<!-- Background Glow -->
<div
class="absolute top-0 right-0 w-[500px] h-[500px] bg-orange-600/10 blur-[120px] rounded-full pointer-events-none">
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 p-12 lg:p-16 items-center relative z-10">
<div class="">
<h2 class="text-4xl text-white font-bricolage font-light mb-6">
Want to build the future?
</h2>
<p class="text-neutral-400 text-lg leading-relaxed mb-8">
We're always looking for talented engineers, designers, and
visionaries to join our remote-first team.
</p>
<div class="flex flex-wrap gap-4">
<button class="px-8 py-3 rounded-full bg-gradient-to-t from-orange-600 to-orange-500 text-white font-medium hover:brightness-110 transition-all shadow-lg shadow-orange-900/20">
View Open Positions
</button>
<button class="px-8 py-3 rounded-full bg-white/5 border border-white/10 text-white hover:bg-white/10 transition-colors">
Read Our Culture Doc
</button>
</div>
</div>
<!-- Careers Stats -->
<div class="grid grid-cols-2 gap-4">
<div class="bg-black/40 border border-white/10 p-6 rounded-2xl">
<div class="text-3xl text-white font-bricolage mb-1">100%</div>
<div class="text-xs text-neutral-500 uppercase tracking-wider">
Remote Work
</div>
</div>
<div class="bg-black/40 border border-white/10 p-6 rounded-2xl">
<div class="text-3xl text-white font-bricolage mb-1">4.9/5</div>
<div class="text-xs text-neutral-500 uppercase tracking-wider">
Glassdoor
</div>
</div>
<div class="bg-black/40 border border-white/10 p-6 rounded-2xl">
<div class="text-3xl text-white font-bricolage mb-1">Unltd</div>
<div class="text-xs text-neutral-500 uppercase tracking-wider">
PTO Policy
</div>
</div>
<div class="bg-black/40 border border-white/10 p-6 rounded-2xl">
<div class="text-3xl text-white font-bricolage mb-1">2x</div>
<div class="text-xs text-neutral-500 uppercase tracking-wider">
Annual Retreats
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer
class="bg-center animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll 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"
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="leading-relaxed text-base text-neutral-400 max-w-lg mr-auto mb-8 ml-auto">
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>