Загрузка...
Шаблон лендинга для курса по 3D Motion Design. Современный дизайн, адаптивный. Идеален для онлайн-школ и образовательных проектов.
<html lang="en" class="scroll-smooth"><head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLUX - 3D Motion Design Course</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Iconify for Solar Duotone Icons -->
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body {
background-color: #0B0C15;
color: #E2E8F0;
}
.text-glow {
text-shadow: 0 0 30px rgba(255,255,255,0.1);
}
</style>
<link id="all-fonts-link-font-geist" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist">
.font-geist { font-family: 'Geist', sans-serif !important; }
</style><link id="all-fonts-link-font-roboto" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-roboto">
.font-roboto { font-family: 'Roboto', sans-serif !important; }
</style><link id="all-fonts-link-font-montserrat" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-montserrat">
.font-montserrat { font-family: 'Montserrat', sans-serif !important; }
</style><link id="all-fonts-link-font-poppins" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-poppins">
.font-poppins { font-family: 'Poppins', sans-serif !important; }
</style><link id="all-fonts-link-font-playfair" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap"><style id="all-fonts-style-font-playfair">
.font-playfair { font-family: 'Playfair Display', serif !important; }
</style><link id="all-fonts-link-font-instrument-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-instrument-serif">
.font-instrument-serif { font-family: 'Instrument Serif', serif !important; }
</style><link id="all-fonts-link-font-merriweather" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap"><style id="all-fonts-style-font-merriweather">
.font-merriweather { font-family: 'Merriweather', serif !important; }
</style><link id="all-fonts-link-font-bricolage" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-bricolage">
.font-bricolage { font-family: 'Bricolage Grotesque', sans-serif !important; }
</style><link id="all-fonts-link-font-jakarta" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-jakarta">
.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-manrope" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-manrope">
.font-manrope { font-family: 'Manrope', sans-serif !important; }
</style><link id="all-fonts-link-font-space-grotesk" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-space-grotesk">
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
</style><link id="all-fonts-link-font-work-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-work-sans">
.font-work-sans { font-family: 'Work Sans', sans-serif !important; }
</style><link id="all-fonts-link-font-pt-serif" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap"><style id="all-fonts-style-font-pt-serif">
.font-pt-serif { font-family: 'PT Serif', serif !important; }
</style><link id="all-fonts-link-font-geist-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-geist-mono">
.font-geist-mono { font-family: 'Geist Mono', monospace !important; }
</style><link id="all-fonts-link-font-space-mono" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"><style id="all-fonts-style-font-space-mono">
.font-space-mono { font-family: 'Space Mono', monospace !important; }
</style><link id="all-fonts-link-font-quicksand" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-quicksand">
.font-quicksand { font-family: 'Quicksand', sans-serif !important; }
</style><link id="all-fonts-link-font-nunito" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap"><style id="all-fonts-style-font-nunito">
.font-nunito { font-family: 'Nunito', sans-serif !important; }
</style><link id="all-fonts-link-font-newsreader" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap"><style id="all-fonts-style-font-newsreader">.font-newsreader { font-family: 'Newsreader', serif !important; }</style><link id="all-fonts-link-font-google-sans-flex" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap"><style id="all-fonts-style-font-google-sans-flex">.font-google-sans-flex { font-family: 'Google Sans Flex', sans-serif !important; }</style><link id="all-fonts-link-font-oswald" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-oswald">.font-oswald { font-family: 'Oswald', sans-serif !important; }</style><link id="all-fonts-link-font-dm-sans" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-dm-sans">.font-dm-sans { font-family: 'DM Sans', sans-serif !important; }</style><link id="all-fonts-link-font-cormorant" rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap"><style id="all-fonts-style-font-cormorant">.font-cormorant { font-family: 'Cormorant Garamond', 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="antialiased selection:bg-indigo-500/30">
<!-- Background (component) added by Aura -->
<div class="aura-background-component top-0 w-full -z-10 absolute h-[800px] hue-rotate-90 brightness-125 opacity-40" data-alpha-mask="80" style="; mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent)">
<div class="aura-background-component top-0 w-full -z-10 absolute h-full">
<div data-us-project="HzcaAbRLaALMhHJp8gLY" class="absolute w-full h-full left-0 top-0 -z-10"></div>
<script type="text/javascript">
!function(){if(!window.UnicornStudio){window.UnicornStudio={isInitialized:!1};var i=document.createElement("script");i.src="https://cdn.jsdelivr.net/gh/hiunicornstudio/unicornstudio.js@v1.4.29/dist/unicornStudio.umd.js",i.onload=function(){window.UnicornStudio.isInitialized||(UnicornStudio.init(),window.UnicornStudio.isInitialized=!0)},(document.head || document.body).appendChild(i)}}();
</script>
</div>
</div>
<!-- Background Grid -->
<div class="fixed inset-0 z-0 bg-grid-pattern bg-[length:4rem_4rem] pointer-events-none"></div>
<!-- Navigation -->
<nav class="sticky bg-[#0b0c15]/60 w-full z-50 border-white/5 border-b top-0 backdrop-blur-lg">
<div class="flex md:h-20 md:px-6 z-50 bg-transparent h-16 max-w-7xl mr-auto ml-auto pr-4 pl-4 relative items-center justify-between">
<!-- Logo & Desktop Navigation -->
<div class="flex items-center gap-12">
<a href="/home" class="inline-flex items-center justify-center bg-center transition-opacity hover:opacity-80 w-[120px] h-[30px] md:w-[140px] md:h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3b763a66-5dbf-4079-af7e-a616cc333698_320w.png)] bg-cover rounded-full"></a>
<div class="hidden md:flex gap-8 uppercase text-xs font-medium text-slate-400 tracking-widest items-center">
<a href="/curriculum" class="hover:text-white transition-colors duration-200">
Curriculum
</a>
<a href="/workshops" class="hover:text-white transition-colors duration-200">
Workshops
</a>
<a href="/mentors" class="hover:text-white transition-colors duration-200">
Mentors
</a>
<a href="/community" class="hover:text-white transition-colors duration-200">
Community
</a>
</div>
</div>
<!-- Right Actions -->
<div class="flex items-center gap-6">
<a href="/login" class="hidden md:block uppercase hover:text-white transition-colors text-xs font-medium text-slate-400 tracking-widest">
Log In
</a>
<!-- Mobile Toggle Button -->
<button id="mobile-menu-toggle" class="text-white md:hidden p-2 -mr-2 hover:text-orange-400 transition-colors focus:outline-none group" aria-label="Toggle Menu">
<!-- Open Icon (Menu) -->
<svg id="icon-menu" 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-menu block transition-all duration-300 group-hover:scale-110">
<line x1="4" x2="20" y1="12" y2="12"></line>
<line x1="4" x2="20" y1="6" y2="6"></line>
<line x1="4" x2="20" y1="18" y2="18"></line>
</svg>
<!-- Close Icon (X) -->
<svg id="icon-close" 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-x hidden transition-all duration-300 rotate-90 scale-75 opacity-0 group-hover:scale-110">
<path d="M18 6 6 18"></path>
<path d="m6 6 12 12"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Overlay Menu -->
<div class="fixed hidden flex-col -translate-y-2 transition-all duration-300 ease-out md:top-20 md:hidden z-40 bg-[#000000] opacity-0 border-white/5 border-t top-16 right-0 bottom-0 left-0 backdrop-blur-xl" id="mobile-menu-overlay">
<div class="flex flex-col bg-[#000000] h-full pt-5 pb-5">
<nav class="flex flex-col bg-[#000000] pt-2 pr-5 pl-5">
<a href="/curriculum" class="mobile-nav-item flex items-center justify-between hover:text-white transition-all duration-500 ease-out text-lg font-medium text-slate-200 tracking-tight opacity-0 border-white/5 border-b py-3 translate-y-4">
Curriculum
<iconify-icon icon="solar:arrow-right-linear" class="text-xl text-orange-500"></iconify-icon>
</a>
<a href="/workshops" class="mobile-nav-item flex items-center justify-between hover:text-white transition-all duration-500 ease-out text-lg font-medium text-slate-200 tracking-tight opacity-0 border-white/5 border-b py-3 translate-y-4">
Workshops
<iconify-icon icon="solar:arrow-right-linear" class="text-xl text-orange-500"></iconify-icon>
</a>
<a href="/mentors" class="mobile-nav-item flex items-center justify-between hover:text-white transition-all duration-500 ease-out text-lg font-medium text-slate-200 tracking-tight opacity-0 border-white/5 border-b py-3 translate-y-4">
Mentors
<iconify-icon icon="solar:arrow-right-linear" class="text-xl text-orange-500"></iconify-icon>
</a>
<a href="/community" class="mobile-nav-item flex items-center justify-between hover:text-white transition-all duration-500 ease-out text-lg font-medium text-slate-200 tracking-tight opacity-0 border-white/5 border-b py-3 translate-y-4">
Community
<iconify-icon icon="solar:arrow-right-linear" class="text-xl text-orange-500"></iconify-icon>
</a>
</nav>
<div class="mobile-nav-item transition-all duration-500 ease-out bg-[#000000] opacity-100 mt-auto pt-4 pr-5 pb-8 pl-5 translate-y-4" style="mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, black 0%, black 80%, transparent);">
<a href="/login" class="flex items-center justify-center w-full py-3 text-xs font-semibold uppercase tracking-widest bg-white text-black hover:bg-slate-200 transition-colors mb-6 rounded-full">
Log In
</a>
<div class="flex items-center justify-center gap-8">
<a href="#" class="text-slate-500 hover:text-white 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-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-slate-500 hover:text-white 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-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-slate-500 hover:text-white 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-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>
</div>
</div>
</div>
</div>
<script class="">
(function() { const toggleBtn = document.getElementById('mobile-menu-toggle'); const overlay = document.getElementById('mobile-menu-overlay'); const iconMenu = document.getElementById('icon-menu'); const iconClose = document.getElementById('icon-close'); let isOpen = false; if(toggleBtn && overlay) { toggleBtn.addEventListener('click', () => { isOpen = !isOpen; const navItems = overlay.querySelectorAll('.mobile-nav-item'); if (isOpen) { overlay.classList.remove('hidden'); void overlay.offsetWidth; overlay.classList.remove('opacity-0', '-translate-y-2'); overlay.classList.add('opacity-100', 'translate-y-0'); iconMenu.classList.add('hidden', 'rotate-90', 'scale-75', 'opacity-0'); iconClose.classList.remove('hidden', 'rotate-90', 'scale-75', 'opacity-0'); document.body.style.overflow = 'hidden'; navItems.forEach((item, index) => { item.style.transitionDelay = `${index * 100}ms`; item.classList.remove('opacity-0', 'translate-y-4'); }); } else { overlay.classList.remove('opacity-100', 'translate-y-0'); overlay.classList.add('opacity-0', '-translate-y-2'); navItems.forEach((item) => { item.style.transitionDelay = '0ms'; item.classList.add('opacity-0', 'translate-y-4'); }); setTimeout(() => { overlay.classList.add('hidden'); }, 300); iconClose.classList.add('hidden', 'rotate-90', 'scale-75', 'opacity-0'); iconMenu.classList.remove('hidden', 'rotate-90', 'scale-75', 'opacity-0'); document.body.style.overflow = ''; } }); } })();
</script>
</nav>
<!-- Hero Section -->
<header class="overflow-hidden z-10 border-white/5 border-b pt-20 pb-32 relative">
<!-- Abstract Decoration -->
<div class="max-w-7xl mx-auto px-6 relative">
<div class="max-w-3xl">
<div class="flex items-center gap-3 mb-6">
<span class="inline-flex items-center justify-center w-2 h-2 rounded-full animate-pulse bg-orange-500"></span>
<span class="text-xs font-medium tracking-widest uppercase text-orange-300">
Next Cohort: Oct 12, 2024
</span>
</div>
<h1 class="text-6xl md:text-8xl font-medium tracking-tighter leading-[0.9] text-white mb-8 text-glow" style="">
Advanced
<br>
Kinetic
<br>
Systems 3D
</h1>
<p class="text-lg text-slate-400 max-w-md leading-relaxed mb-10">
Master procedural modeling and kinetic animation techniques. A
12-week deep dive into the future of motion design.
</p>
</div>
<!-- Hero 3D Element Placeholder -->
<div class="absolute top-1/2 -right-20 -translate-y-1/2 w-[600px] h-[600px] hidden lg:block">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a6add742-6a55-445d-b07d-92ef48d3c652_1600w.jpg" class="opacity-90 w-full h-full object-contain rounded-full drop-shadow-2xl" alt="Sphere">
</div>
</div>
</header>
<!-- Weeks Grid -->
<section class="border-b border-white/5 relative z-20 bg-dark/50 backdrop-blur-md">
<div class="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-white/5 max-w-7xl mx-auto">
<!-- Week 1 -->
<div class="p-8 group hover:bg-white/[0.02] transition-colors cursor-pointer">
<span class="text-xs font-medium text-slate-500 uppercase tracking-widest mb-2 block">
Module 01
</span>
<h3 class="text-xl font-medium text-white tracking-tight mb-1 transition-colors group-hover:text-orange-400" style="">
Foundations
</h3>
<p class="text-sm text-slate-400">Topology & Forms</p>
</div>
<!-- Week 2 -->
<div class="p-8 group hover:bg-white/[0.02] transition-colors cursor-pointer">
<span class="text-xs font-medium text-slate-500 uppercase tracking-widest mb-2 block">
Module 02
</span>
<h3 class="text-xl font-medium text-white tracking-tight mb-1 transition-colors group-hover:text-orange-400" style="">
Shading
</h3>
<p class="text-sm text-slate-400">Advanced Textures</p>
</div>
<!-- Week 3 -->
<div class="p-8 group hover:bg-white/[0.02] transition-colors cursor-pointer">
<span class="text-xs font-medium text-slate-500 uppercase tracking-widest mb-2 block">
Module 03
</span>
<h3 class="text-xl font-medium text-white tracking-tight mb-1 transition-colors group-hover:text-orange-400" style="">
Dynamics
</h3>
<p class="text-sm text-slate-400">Physics Engines</p>
</div>
<!-- Week 4 (Active) -->
<div class="relative p-8 bg-panel border-b-2 md:border-b-0 md:border-t-2 border-orange-500 md:border-t-orange-500">
<div class="absolute inset-0 bg-orange-500/5"></div>
<span class="relative text-xs font-medium uppercase tracking-widest mb-2 block text-orange-400">
Module 04
</span>
<h3 class="relative text-xl font-medium text-white tracking-tight mb-1" style="">
Lighting
</h3>
<p class="relative text-sm text-slate-400">Cinematic Render</p>
</div>
</div>
</section>
<!-- Feature Detail Section -->
<section class="overflow-hidden border-white/5 border-b relative">
<div class="grid grid-cols-1 lg:grid-cols-2 min-h-[600px] max-w-7xl mr-auto ml-auto">
<!-- Graphic Side -->
<div class="lg:border-b-0 lg:border-r flex border-white/5 border-b pt-12 pr-12 pb-12 pl-12 relative items-center justify-center">
<!-- Abstract Composition -->
<div class="aspect-square w-full max-w-md relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e135f35b-eaeb-4b52-b2df-a9690249ff63_1600w.jpg" class="transition-all duration-500 ease-out transform mix-blend-lighten w-full h-full object-cover" alt="Futuristic red-lit VR headset portrait" id="crs-img-v2">
<div id="crs-num-v2" class="absolute bottom-10 left-10 text-9xl font-semibold text-white/5 select-none transition-all duration-500 ease-out transform">
01
</div>
</div>
<script>
(function() {
// New Data Configuration with updated images
const newData = [
{
id: "01",
sub: "Module 01",
title: "Foundations of<br>Topology",
desc: "Master the basics of 3D geometry. Learn proper edge flow, polygon management, and how to build clean models ready for animation and complex deformation.",
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e135f35b-eaeb-4b52-b2df-a9690249ff63_1600w.jpg"
},
{
id: "02",
sub: "Module 02",
title: "Advanced Shading<br>Techniques",
desc: "Dive deep into material creation. Understand PBR workflows, procedural textures, and node-based shader construction to create realistic surfaces.",
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/16d38370-5873-45cf-bab1-60a7b923dc6e_1600w.jpg"
},
{
id: "03",
sub: "Module 03",
title: "Physics & Kinetic<br>Dynamics",
desc: "Bring your scenes to life with rigid body simulations, soft body dynamics, and particle systems that obey the laws of physics for organic movement.",
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f30f4f2-b81c-4bf1-88c7-86b1dc41acd1_1600w.jpg"
},
{
id: "04",
sub: "Deep Dive",
title: "Cinematic Lighting<br>Essentials",
desc: "Understand the physical properties of light. Learn to construct studio setups, volumetric environments, and dramatic moods that elevate your renders from flat to photorealistic.",
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/81a14d03-8b28-415a-b8d8-bf76b3206731_1600w.webp"
}
];
// Initialize Carousel
const initCarousel = () => {
let current = 0;
const img = document.getElementById('crs-img-v2');
const num = document.getElementById('crs-num-v2');
// Access sibling elements
const sub = document.getElementById('crs-sub');
const title = document.getElementById('crs-title');
const desc = document.getElementById('crs-desc');
const dots = document.getElementById('crs-dots');
const btnPrev = document.getElementById('btn-prev');
const btnNext = document.getElementById('btn-next');
if (!img || !num || !sub || !btnPrev) return;
function renderDots() {
dots.innerHTML = '';
newData.forEach((_, i) => {
const btn = document.createElement('button');
btn.innerText = '0' + (i + 1);
btn.className = i === current ? 'text-white transition-colors duration-300' : 'text-slate-600 hover:text-slate-400 transition-colors duration-300';
btn.onclick = () => go(i);
dots.appendChild(btn);
});
}
function go(index) {
if (index === current) return;
current = index;
// Animate Out
img.classList.remove('opacity-80');
img.classList.add('opacity-0', 'scale-105');
[sub, title, desc, num].forEach(el => el.classList.add('opacity-0', 'translate-y-4'));
setTimeout(() => {
const d = newData[current];
img.src = d.img;
num.innerText = d.id;
sub.innerText = d.sub;
title.innerHTML = d.title;
desc.innerText = d.desc;
renderDots();
// Animate In
requestAnimationFrame(() => {
img.classList.remove('opacity-0', 'scale-105');
img.classList.add('opacity-80');
[sub, title, desc, num].forEach(el => el.classList.remove('opacity-0', 'translate-y-4'));
});
}, 300);
}
// Clone buttons to strip old event listeners
const newBtnPrev = btnPrev.cloneNode(true);
const newBtnNext = btnNext.cloneNode(true);
if (btnPrev.parentNode) btnPrev.parentNode.replaceChild(newBtnPrev, btnPrev);
if (btnNext.parentNode) btnNext.parentNode.replaceChild(newBtnNext, btnNext);
newBtnPrev.addEventListener('click', () => {
const next = (current - 1 + newData.length) % newData.length;
go(next);
});
newBtnNext.addEventListener('click', () => {
const next = (current + 1) % newData.length;
go(next);
});
renderDots();
};
// Wait for DOM content to be ready (ensure sibling elements exist)
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initCarousel);
} else {
initCarousel();
}
})();
</script>
</div>
<!-- Content Side -->
<div class="p-12 lg:p-20 flex flex-col justify-center">
<span id="crs-sub" class="text-xs font-medium uppercase tracking-widest mb-6 text-orange-400 block transition-all duration-300 ease-out transform">
Module 01
</span>
<h2 class="lg:text-5xl transition-all duration-300 ease-out min-h-[2.4em] transform text-4xl font-medium text-white tracking-tight mb-6" id="crs-title">
Foundations of Topology
</h2>
<p id="crs-desc" class="text-lg text-slate-400 mb-10 leading-relaxed font-light transition-all duration-300 ease-out min-h-[6em] transform">
Master the basics of 3D geometry. Learn proper edge flow, polygon
management, and how to build clean models ready for animation and
complex deformation.
</p>
<div class="flex items-center gap-8 mb-16">
<button class="text-dark uppercase hover:bg-slate-700 transition-colors text-xs font-semibold tracking-widest bg-slate-800 pt-4 pr-8 pb-4 pl-8">
View Syllabus
</button>
<a href="#" class="text-xs font-semibold tracking-widest uppercase text-white border-b border-white/30 pb-1 hover:border-white transition-colors" style="">
Download Assets
</a>
</div>
<!-- Navigation Controls -->
<div class="flex items-center gap-1 border border-white/10 w-fit p-1">
<button class="flex hover:bg-white/5 hover:text-white transition-colors group text-slate-400 w-12 h-12 border-white/5 border-r items-center justify-center" id="btn-prev">
<iconify-icon icon="solar:arrow-left-linear" width="20" class="group-hover:-translate-x-0.5 transition-transform"></iconify-icon>
</button>
<button class="flex hover:bg-white/5 hover:text-white transition-colors group text-slate-400 w-12 h-12 items-center justify-center" id="btn-next">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="1em" viewBox="0 0 24 24" class="group-hover:translate-x-0.5 transition-transform w-[20px] h-[16px]" data-icon-set="solar" data-solar="arrow-right-linear" stroke-width="2" data-icon-replaced="true" style="width: 20px; height: 16px; color: rgb(255, 255, 255)">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6" class=""></path>
</svg>
</button>
</div>
<div id="crs-dots" class="mt-4 flex gap-6 text-xs text-slate-600 font-medium"><button class="text-white transition-colors duration-300">01</button><button class="text-slate-600 hover:text-slate-400 transition-colors duration-300">02</button><button class="text-slate-600 hover:text-slate-400 transition-colors duration-300">03</button><button class="text-slate-600 hover:text-slate-400 transition-colors duration-300">04</button></div>
</div>
</div>
<script class="">
(function() {
const data = [
{
id: "01",
sub: "Module 01",
title: "Foundations of<br>Topology",
desc: "Master the basics of 3D geometry. Learn proper edge flow, polygon management, and how to build clean models ready for animation and complex deformation.",
img: "https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&q=80"
},
{
id: "02",
sub: "Module 02",
title: "Advanced Shading<br>Techniques",
desc: "Dive deep into material creation. Understand PBR workflows, procedural textures, and node-based shader construction to create realistic surfaces.",
img: "https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80"
},
{
id: "03",
sub: "Module 03",
title: "Physics & Kinetic<br>Dynamics",
desc: "Bring your scenes to life with rigid body simulations, soft body dynamics, and particle systems that obey the laws of physics for organic movement.",
img: "https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=2160&q=80"
},
{
id: "04",
sub: "Deep Dive",
title: "Cinematic Lighting<br>Essentials",
desc: "Understand the physical properties of light. Learn to construct studio setups, volumetric environments, and dramatic moods that elevate your renders from flat to photorealistic.",
img: "https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d3d4d588-f8cc-4129-8a9b-d0f004d15ab4_1600w.webp"
}
];
let current = 3;
const img = document.getElementById('crs-img');
const num = document.getElementById('crs-num');
const sub = document.getElementById('crs-sub');
const title = document.getElementById('crs-title');
const desc = document.getElementById('crs-desc');
const dots = document.getElementById('crs-dots');
function renderDots() {
dots.innerHTML = '';
data.forEach((_, i) => {
const btn = document.createElement('button');
btn.innerText = '0' + (i + 1);
btn.className = i === current ? 'text-white transition-colors duration-300' : 'text-slate-600 hover:text-slate-400 transition-colors duration-300';
btn.onclick = () => go(i);
dots.appendChild(btn);
});
}
function go(index) {
if (index === current) return;
current = index;
// Animate Out
img.classList.remove('opacity-80');
img.classList.add('opacity-0', 'scale-105');
[sub, title, desc, num].forEach(el => el.classList.add('opacity-0', 'translate-y-4'));
setTimeout(() => {
// Update content
const d = data[current];
img.src = d.img;
num.innerText = d.id;
sub.innerText = d.sub;
title.innerHTML = d.title;
desc.innerText = d.desc;
renderDots();
// Animate In
requestAnimationFrame(() => {
img.classList.remove('opacity-0', 'scale-105');
img.classList.add('opacity-80');
[sub, title, desc, num].forEach(el => el.classList.remove('opacity-0', 'translate-y-4'));
});
}, 300);
}
document.getElementById('btn-prev').addEventListener('click', () => {
const next = (current - 1 + data.length) % data.length;
go(next);
});
document.getElementById('btn-next').addEventListener('click', () => {
const next = (current + 1) % data.length;
go(next);
});
renderDots();
})();
</script>
</section>
<section class="overflow-hidden bg-[#0B0C15] border-white/5 border-b pt-24 pb-24 relative">
<!-- Background Glow -->
<div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-[500px] h-[500px] bg-orange-500/10 blur-[100px] rounded-full pointer-events-none"></div>
<div class="z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
<!-- Section Header -->
<div class="flex flex-col md:flex-row md:items-end gap-8 mb-16 gap-x-8 gap-y-8 justify-between">
<div class="max-w-2xl">
<h2 class="text-4xl md:text-5xl font-medium text-white tracking-tight leading-none mb-6">
The Creative Platform
</h2>
<p class="text-lg text-slate-400 leading-relaxed max-w-md font-light">
More than just video tutorials. Access a complete ecosystem
designed to accelerate your mastery of 3D motion design.
</p>
</div>
<div class="flex items-center gap-4 text-xs font-medium tracking-widest uppercase mb-2 text-orange-400">
<span class="w-8 h-[1px] bg-orange-500"></span>
Included in all plans
</div>
</div>
<!-- Bento Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 overflow-hidden bg-white/10 z-20 border-white/5 border gap-x-px gap-y-px">
<!-- Card 1: Asset Library (Wide) -->
<div class="md:col-span-2 group overflow-hidden min-h-[320px] bg-[#0B0C15] z-20 relative">
<div class="overflow-hidden z-20 w-2/3 h-full absolute top-0 right-0">
<div class="z-10 bg-gradient-to-r from-[#0B0C15] via-[#0B0C15]/50 to-transparent absolute top-0 right-0 bottom-0 left-0"></div>
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e2a6572b-2fda-41e6-833d-041a0b24681f_1600w.webp" class="group-hover:opacity-60 group-hover:grayscale-0 transition-all duration-700 ease-out transform group-hover:scale-105 opacity-40 w-full h-full object-cover z-20 grayscale" alt="Assets">
</div>
<div class="z-20 flex flex-col h-full pt-10 pr-10 pb-10 pl-10 relative justify-between">
<div class="flex group-hover:border-orange-500/50 group-hover:text-orange-400 transition-colors text-white bg-white/5 w-12 h-12 border-white/10 border rounded-full mb-6 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="1em" viewBox="0 0 24 24" class="" style="" data-icon-set="solar" data-solar="box-minimalistic-bold-duotone">
<path fill="currentColor" d="M8.422 20.618C10.178 21.54 11.056 22 12 22V12L2.638 7.073l-.04.067C2 8.154 2 9.417 2 11.942v.117c0 2.524 0 3.787.597 4.801c.598 1.015 1.674 1.58 3.825 2.709z" class=""></path>
<path fill="currentColor" d="m17.577 4.432l-2-1.05C13.822 2.461 12.944 2 12 2c-.945 0-1.822.46-3.578 1.382l-2 1.05C4.318 5.536 3.242 6.1 2.638 7.072L12 12l9.362-4.927c-.606-.973-1.68-1.537-3.785-2.641" opacity=".7" class=""></path>
<path fill="currentColor" d="m21.403 7.14l-.041-.067L12 12v10c.944 0 1.822-.46 3.578-1.382l2-1.05c2.151-1.129 3.227-1.693 3.825-2.708c.597-1.014.597-2.277.597-4.8v-.117c0-2.525 0-3.788-.597-4.802" opacity=".5" class=""></path>
</svg>
</div>
<div class="">
<h3 class="text-2xl font-medium text-white tracking-tight mb-2">
Production Assets
</h3>
<p class="text-sm text-slate-400 max-w-xs leading-relaxed">
Download over 500GB of project files, 4K textures, HDRI maps,
and procedural nodes. Yours to keep and use in commercial
work.
</p>
</div>
</div>
</div>
<!-- Card 2: 4K Streaming (Tall/Standard) -->
<div class="bg-[#0B0C15] group relative overflow-hidden min-h-[320px]">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-white/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-20 p-10 flex flex-col justify-between h-full">
<div class="flex group-hover:border-orange-500/50 group-hover:text-orange-400 transition-colors text-white bg-white/5 w-12 h-12 border-white/10 border rounded-full mb-6 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="1em" viewBox="0 0 24 24" class="" data-icon-set="solar" data-solar="infinity-bold-duotone">
<path fill="currentColor" fill-rule="evenodd" d="M2.75 12a4.25 4.25 0 0 1 6.8-3.4a.75.75 0 1 0 .901-1.2A5.75 5.75 0 1 0 7 17.75c.784 0 1.464-.143 2.064-.435s1.079-.714 1.489-1.215c.66-.804 1.196-1.894 1.776-3.074l.339-.689a.755.755 0 0 0-.339-1.008a.745.745 0 0 0-1.003.337l-.366.743c-.584 1.183-1.027 2.082-1.567 2.74c-.307.375-.624.64-.986.817s-.81.284-1.407.284A4.25 4.25 0 0 1 2.75 12" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M12.67 12.335a.755.755 0 0 0-.34-1.006a.746.746 0 0 0-.975.284q.162-.323.316-.639c.58-1.18 1.117-2.27 1.776-3.074c.41-.501.89-.923 1.49-1.215S16.217 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.596 0-1.045.107-1.406.284c-.363.176-.68.442-.987.816c-.54.66-.983 1.558-1.567 2.741q-.174.355-.369.744z" opacity=".5" class=""></path>
</svg>
</div>
<div class="">
<h3 class="text-2xl font-medium text-white tracking-tight mb-2">
4K HDR Player
</h3>
<p class="text-sm text-slate-400 leading-relaxed">
Experience every detail with our custom high-bitrate streaming
player. Smart chapters and timestamped discussions included.
</p>
</div>
</div>
</div>
<!-- Card 3: Community (Standard) -->
<div class="bg-[#0B0C15] group relative overflow-hidden min-h-[320px]">
<div class="z-20 flex flex-col h-full pt-10 pr-10 pb-10 pl-10 relative justify-between">
<div class="flex group-hover:border-orange-500/50 group-hover:text-orange-400 transition-colors text-white bg-white/5 w-12 h-12 border-white/10 border rounded-full mb-6 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 24" style="color: rgb(251, 146, 60); width: 24px; height: 16px" class="w-[24px] h-[16px]" data-solar="users-group-rounded-bold-duotone" data-icon-set="solar" data-icon-replaced="true" stroke-width="2">
<circle cx="15" cy="6" r="3" fill="#fb923c" opacity=".4" class=""></circle>
<ellipse cx="16" cy="17" fill="#fb923c" opacity=".4" rx="5" ry="3"></ellipse>
<circle cx="9.001" cy="6" r="4" fill="#fb923c"></circle>
<ellipse cx="9.001" cy="17.001" fill="#fb923c" rx="7" ry="4"></ellipse>
</svg>
</div>
<div class="">
<h3 class="text-2xl font-medium text-white tracking-tight mb-2">
Private Discord
</h3>
<p class="text-sm text-slate-400 leading-relaxed">
Join 5,000+ alumni. Get feedback on your work, find
collaboration partners, and access exclusive job postings.
</p>
</div>
</div>
</div>
<!-- Card 4: Updates (Wide) -->
<div class="md:col-span-2 bg-[#0B0C15] group relative overflow-hidden min-h-[320px]">
<!-- Abstract Decoration -->
<div class="-bottom-24 -right-24 transition-all duration-700 group-hover:opacity-40 group-hover:rotate-12 opacity-20 w-96 h-96 absolute">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ea262fd9-14f0-4917-be69-86fd3b302ccd_800w.webp" class="mask-image-radial group-hover:opacity-60 group-hover:grayscale-0 transition-all duration-700 ease-out transform group-hover:scale-105 opacity-40 mix-blend-screen w-full h-full object-cover z-20 rounded-full grayscale" alt="Abstract">
</div>
<div class="flex flex-col z-20 h-full pt-10 pr-10 pb-10 pl-10 relative justify-between">
<div class="flex group-hover:border-orange-500/50 group-hover:text-orange-400 transition-colors text-white bg-white/5 w-12 h-12 border-white/10 border rounded-full mb-6 items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="1em" viewBox="0 0 24 24" class="" data-icon-set="solar" data-solar="infinity-bold-duotone">
<path fill="currentColor" fill-rule="evenodd" d="M2.75 12a4.25 4.25 0 0 1 6.8-3.4a.75.75 0 1 0 .901-1.2A5.75 5.75 0 1 0 7 17.75c.784 0 1.464-.143 2.064-.435s1.079-.714 1.489-1.215c.66-.804 1.196-1.894 1.776-3.074l.339-.689a.755.755 0 0 0-.339-1.008a.745.745 0 0 0-1.003.337l-.366.743c-.584 1.183-1.027 2.082-1.567 2.74c-.307.375-.624.64-.986.817s-.81.284-1.407.284A4.25 4.25 0 0 1 2.75 12" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M12.67 12.335a.755.755 0 0 0-.34-1.006a.746.746 0 0 0-.975.284q.162-.323.316-.639c.58-1.18 1.117-2.27 1.776-3.074c.41-.501.89-.923 1.49-1.215S16.217 6.25 17 6.25a5.75 5.75 0 1 1-3.45 10.35a.75.75 0 0 1 .9-1.2A4.25 4.25 0 1 0 17 7.75c-.596 0-1.045.107-1.406.284c-.363.176-.68.442-.987.816c-.54.66-.983 1.558-1.567 2.741q-.174.355-.369.744z" opacity=".5" class=""></path>
</svg>
</div>
<div class="max-w-lg relative">
<h3 class="text-2xl font-medium text-white tracking-tight mb-2">
Lifetime Curriculum Updates
</h3>
<p class="text-sm text-slate-400 leading-relaxed">
The industry moves fast. We push quarterly updates to cover
new features in Blender, Cinema 4D, and Unreal Engine 5 at no
extra cost to enrolled students.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Mentors Section -->
<section class="z-10 border-white/5 border-b pt-24 pb-24 relative">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-8">
<div class="">
<h2 class="text-4xl md:text-5xl font-medium text-white tracking-tight leading-none mb-4" style="">
Industry Mentors
</h2>
</div>
<div class="flex items-center gap-4 text-xs font-medium tracking-widest uppercase mb-2 text-orange-400">
<span class="w-8 h-[1px] bg-orange-500"></span>
Learn from the best
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-px bg-white/5 border border-white/5">
<!-- Mentor 1 -->
<div class="bg-panel p-0 group relative overflow-hidden">
<div class="aspect-[4/3] bg-slate-800 relative overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/15caab24-bf25-496e-99c0-b00f6f4de74f_1600w.webp" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 opacity-60 group-hover:opacity-100" alt="Mentor">
<!-- Abstract geometric overlay -->
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-panel via-transparent to-transparent"></div>
</div>
<div class="pt-10 pr-10 pb-10 pl-10 relative">
<div class="-top-6 flex gap-2 absolute right-8 gap-x-2 gap-y-2">
<a href="#" class="flex items-center justify-center hover:bg-slate-600 transition-colors text-white bg-slate-700 w-10 h-10 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="1em" viewBox="0 0 24 24" class="" data-icon-set="solar" data-solar="basketball-bold">
<path fill="currentColor" fill-rule="evenodd" d="M6.865 20.583A9.96 9.96 0 0 1 3.339 17A9.96 9.96 0 0 1 2 12.159l.145.028c2.949.581 6.304-.469 9.061-2.162q.545-.334 1.065-.706c.413.516.783 1.04 1.08 1.556c.375.647.713 1.417 1.015 2.24q-.778.377-1.508.822c-2.792 1.699-5.174 4.176-5.992 6.644zm9.395.465a10 10 0 0 1-8.04.21l.069-.204c.663-2.002 2.72-4.237 5.348-5.836q.592-.36 1.206-.667c.252.83.471 1.671.655 2.462a51 51 0 0 1 .699 3.597l.008.053l.002.012v.004z" clip-rule="evenodd" class=""></path>
<path fill="currentColor" d="M16.226 13.943c1.887-.72 3.811-.996 5.477-.63l.204.045a10 10 0 0 1-.71 2.57a9.95 9.95 0 0 1-3.538 4.317l-.013-.079a52 52 0 0 0-.687-3.494a40 40 0 0 0-.733-2.73m-2.773-5.545c1.728-1.469 3.087-3.21 3.672-4.949l.01-.03A9.96 9.96 0 0 1 20.66 7A9.95 9.95 0 0 1 22 11.842c-1.995-.431-4.186-.1-6.256.68c-.32-.864-.685-1.687-1.094-2.397a14 14 0 0 0-1.197-1.728M8.319 3.454a35 35 0 0 0-.6-.465l-.023-.016a9.95 9.95 0 0 1 5.5-.902c.887.107 1.757.333 2.584.67l-.077.229c-.477 1.418-1.65 2.95-3.228 4.29a32 32 0 0 0-2.203-2.16A42 42 0 0 0 8.32 3.453m2.1 5.294c-2.586 1.588-5.55 2.449-7.987 1.969l-.342-.068a10 10 0 0 1 4.19-6.853l.328.239l.002.001l.01.007l.039.029l.154.115a40 40 0 0 1 2.456 2.03c.66.592 1.358 1.26 2.013 1.965q-.42.293-.863.566" class=""></path>
</svg>
</a>
</div>
<h3 class="text-3xl font-medium text-white tracking-tight mb-1" style="">
Elena Rostova
</h3>
<p class="text-xs uppercase tracking-widest mb-4 text-orange-400">
Lead Art Director
</p>
<p class="text-sm text-slate-500">Polygon Studios</p>
</div>
</div>
<!-- Mentor 2 -->
<div class="bg-panel p-0 group relative overflow-hidden">
<div class="aspect-[4/3] bg-slate-800 relative overflow-hidden">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4f4590c0-f760-4c47-8347-9ed5701903e6_1600w.webp" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500 opacity-60 group-hover:opacity-100" alt="Mentor">
<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-panel via-transparent to-transparent"></div>
</div>
<div class="p-10 relative">
<div class="-top-6 flex gap-2 absolute right-8 gap-x-2 gap-y-2">
<a href="#" class="flex items-center justify-center hover:bg-slate-600 transition-colors text-white bg-slate-700 w-10 h-10 rounded-full">
<iconify-icon icon="solar:basketball-bold" width="18" class=""></iconify-icon>
</a>
</div>
<h3 class="text-3xl font-medium text-white tracking-tight mb-1" style="">
Marcus Thorne
</h3>
<p class="text-xs uppercase tracking-widest mb-4 text-orange-400">
Senior Motion Dev
</p>
<p class="text-sm text-slate-500">Spectra Inc.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Student Showcase -->
<section class="overflow-hidden pt-24 pb-24 relative">
<div class="max-w-7xl mr-auto ml-auto pr-6 pl-6">
<div class="flex flex-col md:flex-row border-white/5 border-b mb-16 pb-8 items-end justify-between">
<div class="flex gap-8 text-sm font-medium">
<button class="text-slate-500 hover:text-white transition-colors year-btn" data-year="2022">
2022
</button>
<button class="text-slate-500 hover:text-white transition-colors year-btn" data-year="2023">
2023
</button>
<button class="-mb-8.5 text-orange-400 border-orange-400 border-b-2 year-btn active-year" data-year="2024">
2024
</button>
<button class="text-slate-500 hover:text-white transition-colors year-btn" data-year="2025">
2025
</button>
</div>
<h2 class="text-4xl md:text-6xl font-medium text-white tracking-tight mt-8 md:mt-0">
Student Showcase
</h2>
<script>
(function() {
const yearBtns = document.querySelectorAll('.year-btn');
yearBtns.forEach(btn => {
btn.addEventListener('click', function() {
yearBtns.forEach(b => {
b.classList.remove('text-orange-400', 'border-orange-400', 'border-b-2', '-mb-8.5', 'active-year');
b.classList.add('text-slate-500');
});
this.classList.remove('text-slate-500');
this.classList.add('text-orange-400', 'border-orange-400', 'border-b-2', '-mb-8.5', 'active-year');
const year = this.dataset.year;
console.log('Selected year:', year);
});
});
})();
</script>
</div>
<!-- Carousel Container with Alpha Masks -->
<div class="relative">
<!-- Left Alpha Mask -->
<div class="absolute left-0 top-0 bottom-0 w-24 z-10 pointer-events-none" style="background: linear-gradient(to right, #0B0C15 0%, transparent 100%);"></div>
<!-- Right Alpha Mask -->
<div class="absolute right-0 top-0 bottom-0 w-24 z-10 pointer-events-none" style="background: linear-gradient(to left, #0B0C15 0%, transparent 100%);"></div>
<!-- Carousel Track -->
<div class="overflow-hidden">
<div class="flex transition-transform duration-500 ease-out gap-x-8 gap-y-8" style="transform: translateX(0px);" id="showcase-carousel">
<!-- Card 1 -->
<div class="group relative flex-shrink-0 w-full md:w-[calc(33.333%-1.33rem)]">
<div class="aspect-[4/5] bg-slate-800 overflow-hidden relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/96e3ccfa-3799-4c9c-9f2a-263c0ff6a449_800w.webp" class="transition-transform duration-700 group-hover:scale-105 w-full h-full object-cover" alt="Art">
<div class="bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute bottom-6 left-6 right-6">
<h4 class="text-2xl font-medium text-white mb-2" style="">
Sarah Jenkins
</h4>
<div class="flex justify-between items-end">
<span class="text-xs uppercase tracking-widest text-slate-300">
Kinetic Typography
</span>
<button class="bg-white/10 backdrop-blur-md px-3 py-1 rounded text-xs text-white border border-white/10" style="">
View
</button>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="group flex-shrink-0 md:w-[calc(33.333%-1.33rem)] w-full relative">
<div class="aspect-[4/5] overflow-hidden border-white/5 border relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a032328b-a082-425f-8870-b5222565e31f_800w.webp" class="transition-transform duration-700 group-hover:scale-105 mix-blend-lighten w-full h-full object-cover" alt="Art" style="">
<!-- Stylized Letter R -->
<div class="flex absolute top-0 right-0 bottom-0 left-0 items-center justify-center" style="">
<span class="text-[180px] font-bold text-white opacity-75 mix-blend-overlay">
R
</span>
</div>
<div class="absolute bottom-6 left-6 right-6">
<h4 class="text-2xl font-medium text-white mb-2" style="">
David Kim
</h4>
<div class="flex justify-between items-end">
<span class="text-xs uppercase tracking-widest text-slate-300">
Abstract Geo
</span>
<button class="px-3 py-1 rounded text-xs text-white shadow-lg bg-orange-600 shadow-orange-500/30" style="">
Winner
</button>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="group relative flex-shrink-0 w-full md:w-[calc(33.333%-1.33rem)]">
<div class="aspect-[4/5] bg-slate-800 overflow-hidden relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Art" style="">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60"></div>
<div class="absolute bottom-6 left-6 right-6">
<h4 class="text-2xl font-medium text-white mb-2" style="">
Alex Chen
</h4>
<div class="flex justify-between items-end">
<span class="text-xs uppercase tracking-widest text-slate-300">
Product Vis
</span>
<button class="bg-white/10 backdrop-blur-md px-3 py-1 rounded text-xs text-white border border-white/10" style="">
View
</button>
</div>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="group relative flex-shrink-0 w-full md:w-[calc(33.333%-1.33rem)]">
<div class="aspect-[4/5] bg-slate-800 overflow-hidden relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/448cc80c-2ef0-44f1-aa35-fb915bd39852_800w.webp" class="transition-transform duration-700 group-hover:scale-105 w-full h-full object-cover" alt="Art">
<div class="bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute bottom-6 left-6 right-6">
<h4 class="text-2xl font-medium text-white mb-2">
Maya Thompson
</h4>
<div class="flex justify-between items-end">
<span class="text-xs uppercase tracking-widest text-slate-300">
3D Composition
</span>
<button class="bg-white/10 backdrop-blur-md px-3 py-1 rounded text-xs text-white border border-white/10">
View
</button>
</div>
</div>
</div>
</div>
<!-- Card 5 -->
<div class="group relative flex-shrink-0 w-full md:w-[calc(33.333%-1.33rem)]">
<div class="aspect-[4/5] bg-slate-800 overflow-hidden relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/dee707e7-67d1-4c28-9ed8-e0f71b46347b_800w.webp" class="transition-transform duration-700 group-hover:scale-105 w-full h-full object-cover" alt="Art">
<div class="bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute bottom-6 left-6 right-6">
<h4 class="text-2xl font-medium text-white mb-2">
Jordan Lee
</h4>
<div class="flex justify-between items-end">
<span class="text-xs uppercase tracking-widest text-slate-300">
Motion Graphics
</span>
<button class="bg-white/10 backdrop-blur-md px-3 py-1 rounded text-xs text-white border border-white/10">
View
</button>
</div>
</div>
</div>
</div>
<!-- Card 6 -->
<div class="group relative flex-shrink-0 w-full md:w-[calc(33.333%-1.33rem)]">
<div class="aspect-[4/5] bg-slate-800 overflow-hidden relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4d3f4658-ecfd-47b7-8318-ab5e0f7dba77_800w.webp" class="transition-transform duration-700 group-hover:scale-105 w-full h-full object-cover" alt="Art">
<div class="bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-60 absolute top-0 right-0 bottom-0 left-0"></div>
<div class="absolute bottom-6 left-6 right-6">
<h4 class="text-2xl font-medium text-white mb-2">
Emma Wilson
</h4>
<div class="flex justify-between items-end">
<span class="text-xs uppercase tracking-widest text-slate-300">
Digital Art
</span>
<button class="bg-white/10 backdrop-blur-md px-3 py-1 rounded text-xs text-white border border-white/10">
View
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Arrows -->
<div class="flex justify-center gap-4 mt-16">
<button id="showcase-prev" class="flex hover:bg-white hover:text-dark transition-all text-slate-400 w-12 h-12 border-white/10 border items-center justify-center">
<iconify-icon icon="solar:arrow-left-linear" width="20" class=""></iconify-icon>
</button>
<button class="flex hover:bg-white hover:text-dark transition-all text-slate-400 w-12 h-12 border-white/10 border items-center justify-center" id="showcase-next">
<iconify-icon icon="solar:arrow-right-linear" width="20" class=""></iconify-icon>
</button>
</div>
</div>
<script class="">
(function() {
const carousel = document.getElementById('showcase-carousel');
const prevBtn = document.getElementById('showcase-prev');
const nextBtn = document.getElementById('showcase-next');
let currentIndex = 0;
const totalCards = 6;
const visibleCards = window.innerWidth >= 768 ? 3 : 1;
const maxIndex = totalCards - visibleCards;
function getCardWidth() {
const card = carousel.children[0];
if (card) {
return card.offsetWidth + 32; // card width + gap
}
return 0;
}
function updateCarousel() {
const cardWidth = getCardWidth();
carousel.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
}
prevBtn.addEventListener('click', function() {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = maxIndex;
}
updateCarousel();
});
nextBtn.addEventListener('click', function() {
if (currentIndex < maxIndex) {
currentIndex++;
} else {
currentIndex = 0;
}
updateCarousel();
});
window.addEventListener('resize', function() {
const newVisibleCards = window.innerWidth >= 768 ? 3 : 1;
const newMaxIndex = totalCards - newVisibleCards;
if (currentIndex > newMaxIndex) {
currentIndex = newMaxIndex;
}
updateCarousel();
});
})();
</script>
</section>
<section class="overflow-hidden border-white/5 border-b pt-32 pb-32 relative">
<!-- Ambient Background Effect -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-4xl h-[500px] blur-[120px] rounded-full pointer-events-none mix-blend-screen bg-orange-900/10"></div>
<div class="z-10 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8">
<div class="max-w-2xl">
<div class="flex items-center gap-3 mb-4">
<span class="w-1 h-1 rounded-full bg-orange-500"></span>
<span class="text-xs font-medium tracking-widest uppercase text-orange-400">
Enrollment Open
</span>
</div>
<h2 class="md:text-6xl text-4xl font-medium text-white tracking-tight mb-6" style="">
Invest in your creative future
</h2>
<p class="text-lg text-slate-400 leading-relaxed max-w-md">
Choose the learning path that fits your schedule. All plans
include lifetime access to course materials and project files.
</p>
</div>
<!-- Plan Toggle -->
<div class="flex bg-white/5 border-white/5 border rounded-full p-1 backdrop-blur-sm items-center relative isolation-auto">
<!-- Active Pill Background -->
<div id="active-pill" class="absolute top-1 bottom-1 left-1 w-32 bg-[#ffffff]/10 rounded-full shadow-lg shadow-white/5 transition-transform duration-300 ease-out z-0" style="transform: translateX(0%); --border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 9999px;"></div>
<button id="btn-monthly" class="relative z-10 w-32 py-2.5 text-xs font-semibold tracking-widest uppercase text-white transition-colors duration-300" onclick="switchPlan('monthly')">
Monthly
</button>
<button id="btn-yearly" class="relative z-10 w-32 py-2.5 text-xs font-medium tracking-widest uppercase text-slate-400 hover:text-white transition-colors duration-300" onclick="switchPlan('yearly')">
Yearly
</button>
</div>
</div>
<!-- Pricing Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Card 1: Independent -->
<div class="group md:p-10 hover:bg-white/[0.02] transition-all duration-300 flex flex-col overflow-hidden bg-gradient-to-br from-gray-500/10 via-gray-500/0 to-gray-500/10 pt-8 pr-8 pb-8 pl-8 relative" style="position: relative; --border-gradient: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))">
<div class="mb-8">
<span class="text-xs font-semibold tracking-widest text-slate-500 uppercase mb-4 block">
Independent
</span>
<div class="flex items-baseline gap-1 transition-opacity duration-300" id="price-card-1">
<span class="text-4xl font-medium text-white tracking-tight price-amount">
$49
</span>
<span class="text-sm text-slate-500 font-medium price-period">
/mo
</span>
</div>
</div>
<p class="text-sm text-slate-400 mb-8 pb-8 border-b border-white/5 leading-relaxed">
Perfect for self-driven learners who want to master the curriculum
at their own pace.
</p>
<ul class="flex flex-col gap-4 mb-10 flex-1">
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Full 12-Week Curriculum</span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Project Files & Assets</span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Lifetime Updates</span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-500 line-through decoration-slate-600/50">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="text-slate-600 mt-0.5 text-lg shrink-0" style="" data-icon-set="solar" data-solar="close-circle-linear">
<g fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"></circle>
<path stroke-linecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
</g>
</svg>
<span class="">Mentor Feedback</span>
</li>
</ul>
<button class="uppercase hover:bg-slate-800 hover:text-dark transition-all duration-300 group-hover:border-white text-xs font-semibold text-white tracking-widest w-full border-white/10 border pt-4 pb-4">
Start Learning
</button>
</div>
<!-- Card 2: Cohort (Featured) -->
<div class="md:p-10 flex flex-col overflow-hidden bg-orange-950/10 pt-8 pr-8 pb-8 pl-8 relative" style="position: relative; --border-gradient: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(234, 88, 12, 0.5), rgba(255, 255, 255, 0)); mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);">
<!-- Shine Effect -->
<div class="absolute inset-0 bg-gradient-to-b via-transparent to-transparent pointer-events-none from-orange-500/5"></div>
<div class="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent to-transparent opacity-50 via-orange-500"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex justify-between items-start mb-8">
<div class="">
<span class="text-xs font-semibold tracking-widest uppercase mb-4 block text-orange-400">
Live Cohort
</span>
<div class="flex items-baseline gap-1 transition-opacity duration-300" id="price-card-2">
<span class="text-4xl font-medium text-white tracking-tight text-glow price-amount">
$99
</span>
<span class="text-sm text-slate-400 font-medium price-period">
/mo
</span>
</div>
</div>
<span class="text-white text-[10px] font-semibold uppercase tracking-widest px-2 py-1 rounded shadow-lg bg-orange-500 shadow-orange-500/20" style="">
Popular
</span>
</div>
<p class="text-sm mb-8 pb-8 border-b leading-relaxed text-orange-100/70 border-orange-500/20">
The complete experience. Join a global class of artists with
weekly live sessions and reviews.
</p>
<ul class="flex flex-col gap-4 mb-10 flex-1">
<li class="flex items-start gap-3 text-sm text-white" style="">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Everything in Independent</span>
</li>
<li class="flex items-start gap-3 text-sm text-white" style="">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Weekly Live Q&A Sessions</span>
</li>
<li class="flex items-start gap-3 text-sm text-white" style="">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Professional Assignment Review</span>
</li>
<li class="flex items-start gap-3 text-sm text-white" style="">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span>Private Discord Community</span>
</li>
</ul>
<button class="w-full py-4 text-white text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-lg bg-orange-600 hover:bg-orange-500 shadow-orange-600/20 hover:shadow-orange-600/40" style="">
Secure Your Spot
</button>
</div>
</div>
<!-- Card 3: Mentorship -->
<div class="group md:p-10 hover:bg-white/[0.02] transition-all duration-300 flex flex-col overflow-hidden bg-gradient-to-br from-gray-500/10 via-gray-500/0 to-gray-500/10 px-8 py-8 relative" style="position: relative; --border-gradient: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0))">
<div class="mb-8">
<span class="text-xs font-semibold tracking-widest text-slate-500 uppercase mb-4 block">
Mentorship
</span>
<div class="flex items-baseline gap-1 transition-opacity duration-300" id="price-card-3">
<span class="text-4xl font-medium text-white tracking-tight price-amount">
$249
</span>
<span class="text-sm text-slate-500 font-medium price-period">
/mo
</span>
</div>
</div>
<p class="text-sm text-slate-400 mb-8 pb-8 border-b border-white/5 leading-relaxed">
Direct 1-on-1 guidance for professionals looking to fast-track
their career growth.
</p>
<ul class="flex flex-col gap-4 mb-10 flex-1">
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Everything in Cohort</span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">4x 1-on-1 Strategy Calls</span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span>Portfolio Direction</span>
</li>
<li class="flex items-start gap-3 text-sm text-slate-300">
<iconify-icon icon="solar:check-circle-bold" class="mt-0.5 text-lg shrink-0 text-orange-400"></iconify-icon>
<span class="">Agency Referral Network</span>
</li>
</ul>
<button class="uppercase hover:bg-slate-800 hover:text-dark transition-all duration-300 group-hover:border-white text-xs font-semibold text-white tracking-widest w-full border-white/10 border pt-4 pb-4">
Apply for Mentorship
</button>
</div>
</div>
<!-- Alumni Section -->
<div class="mt-20 pt-10 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-8">
<p class="text-xs font-medium tracking-widest text-slate-500 uppercase">
Trusted by artists at top studios
</p>
<div class="flex flex-wrap justify-center gap-8 md:gap-12 opacity-30 grayscale mix-blend-screen select-none">
<span class="text-lg font-bold text-white tracking-tight">
Google
</span>
<span class="text-lg font-bold font-serif text-white" style="">
Apple
</span>
<span class="text-lg font-bold font-sans text-white tracking-tighter" style="">
Meta
</span>
<span class="text-lg font-bold font-mono text-white" style="">
Netflix
</span>
<span class="text-lg font-bold font-sans text-white italic" style="">
Nike
</span>
<span class="text-lg font-bold font-sans text-white" style="">
Buck
</span>
</div>
</div>
<script>
function switchPlan(plan) {
const btnMonthly = document.getElementById('btn-monthly');
const btnYearly = document.getElementById('btn-yearly');
const activePill = document.getElementById('active-pill');
const card1 = document.getElementById('price-card-1');
const card2 = document.getElementById('price-card-2');
const card3 = document.getElementById('price-card-3');
// Configuration
const prices = {
monthly: ['$49', '$99', '$249'],
yearly: ['$499', '$999', '$2,499']
};
const periods = {
monthly: '/mo',
yearly: '/year'
};
// UI State Update
if (plan === 'monthly') {
activePill.style.transform = 'translateX(0%)';
btnMonthly.classList.add('text-white', 'font-semibold');
btnMonthly.classList.remove('text-slate-400', 'font-medium');
btnYearly.classList.add('text-slate-400', 'font-medium');
btnYearly.classList.remove('text-white', 'font-semibold');
} else {
activePill.style.transform = 'translateX(100%)';
btnYearly.classList.add('text-white', 'font-semibold');
btnYearly.classList.remove('text-slate-400', 'font-medium');
btnMonthly.classList.add('text-slate-400', 'font-medium');
btnMonthly.classList.remove('text-white', 'font-semibold');
}
// Content Update with Fade Transition
const updateText = () => {
[card1, card2, card3].forEach((card, index) => {
card.querySelector('.price-amount').textContent = prices[plan][index];
card.querySelector('.price-period').textContent = periods[plan];
});
};
// Animation Sequence
[card1, card2, card3].forEach(card => card.classList.add('opacity-0'));
setTimeout(() => {
updateText();
[card1, card2, card3].forEach(card => card.classList.remove('opacity-0'));
}, 300);
}
</script>
</div>
</section>
<!-- Footer -->
<footer class="overflow-hidden border-white/5 border-t pt-20 pb-10 relative">
<!-- 3D Abstract Footer Element -->
<div class="-translate-x-1/2 pointer-events-none bg-gradient-to-b from-blue-500/0 via-blue-500/10 to-blue-500/0 opacity-30 w-[800px] h-[800px] rounded-full absolute bottom-0 left-1/2 blur-3xl translate-y-1/3" style=""></div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-24 mb-20">
<div class="flex flex-col justify-between h-full">
<a href="#" class="inline-flex items-center justify-center bg-center w-[140px] h-[36px] bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/3b763a66-5dbf-4079-af7e-a616cc333698_320w.png)] bg-cover rounded-full"></a>
<div class="mt-auto">
<div class="flex gap-4 mb-8">
<a href="#" class="flex items-center justify-center hover:text-white hover:border-white transition-all bg-center text-slate-400 w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/e66c0296-2c66-4807-ab74-9626c9bf90ca_320w.webp)] bg-cover border-white/10 border rounded-full">
<iconify-icon icon="solar:facebook-bold" width="16"></iconify-icon>
</a>
<a href="#" class="flex items-center justify-center hover:text-white hover:border-white transition-all bg-center text-slate-400 w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c3f33b24-5083-4ed7-890e-acca5261bec4_320w.webp)] bg-cover border-white/10 border rounded-full">
<iconify-icon icon="solar:twitter-bold" width="16"></iconify-icon>
</a>
<a href="#" class="flex items-center justify-center hover:text-white hover:border-white transition-all bg-center text-slate-400 w-10 h-10 bg-[url(https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/45346b2f-1ebf-4fd1-ad60-5f4c935b534f_320w.webp)] bg-cover border-white/10 border rounded-full">
<iconify-icon icon="solar:instagram-bold" width="16"></iconify-icon>
</a>
</div>
<p class="text-xs text-slate-600">
Copyright © FLUX 2024. All rights reserved.
</p>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<!-- Links -->
<div class="flex flex-col gap-4">
<h5 class="text-xs font-bold uppercase tracking-widest text-orange-400">
Platform
</h5>
<a href="#" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
Courses
</a>
<a href="/workshops" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
Workshops
</a>
<a href="#" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
Podcast
</a>
</div>
<div class="flex flex-col gap-4">
<h5 class="text-xs font-bold uppercase tracking-widest text-orange-400">
Company
</h5>
<a href="#" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
About
</a>
<a href="#" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
Careers
</a>
<a href="#" class="text-xs font-medium text-slate-400 hover:text-white transition-colors">
Contact
</a>
</div>
<!-- Newsletter -->
<div class="col-span-2 md:col-span-2 pt-8 md:pt-0 border-t md:border-t-0 border-white/5">
<h5 class="text-xs font-bold text-white uppercase tracking-widest mb-4" style="">
Subscribe to updates
</h5>
<form class="flex flex-col gap-4">
<input type="email" placeholder="Enter your email" class="bg-white/5 border border-white/10 px-4 py-3 text-sm text-white placeholder-slate-600 focus:outline-none transition-colors w-full focus:border-orange-500" style="">
<button class="uppercase hover:bg-slate-800 hover:text-dark transition-all duration-300 group-hover:border-white text-xs font-semibold text-white tracking-widest w-full border-white/10 border pt-4 pb-4">
Subscribe
</button>
</form>
</div>
</div>
</div>
</div>
<!-- Bottom Abstract Sphere -->
</footer>
</body></html>