` to `Lumenvox Atelier`. ## Global CSS (src/index.css) ```css @tailwind base; @tailwind components; @tailwind utilities; body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ``` ## Custom CSS Classes (in index.css) ### Liquid Glass Button Effect ```css .liquid-glass { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: none; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .liquid-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } ``` ### Hero Heading Font ```css .hero-heading { font-family: 'PP Editorial New Ultralight', serif; font-weight: 200; line-height: 0.85; letter-spacing: -0.02em; } ``` ### Keyframe Animations ```css @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-down { animation: slideDown 0.8s ease-out forwards; } ``` ### Mobile Menu Overlay (full-screen, dark #030318 background) ```css .menu-overlay { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #030318; opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.5s; } .menu-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } .menu-overlay.is-closing { opacity: 0; transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, visibility 0s linear 0.55s; } ``` ### Menu Lines (horizontal dividers that scale in) ```css .menu-overlay .menu-line { display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.1); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .menu-overlay.is-open .menu-line { transform: scaleX(1); } ``` Stagger delays for menu lines: `0.05s, 0.15s, 0.25s, 0.35s` (nth-child 1-4). ### Menu Items (staggered slide-up) ```css .menu-overlay .menu-item { opacity: 0; transform: translateY(30px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .menu-overlay.is-open .menu-item { opacity: 1; transform: translateY(0); } .menu-overlay.is-closing .menu-item { opacity: 0; transform: translateY(-20px); transition: opacity 0.3s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } ``` Opening stagger delays: 0.1s, 0.17s, 0.24s, 0.31s, 0.38s (nth-child 1-5). Closing stagger delays: 0.12s, 0.09s, 0.06s, 0.03s, 0s (nth-child 1-5). ### Hamburger Icon ```css .hamburger-line { display: block; width: 24px; height: 1.5px; background: white; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; transform-origin: center; } .hamburger-open .hamburger-line:nth-child(1) { transform: translateY(5px) rotate(45deg); } .hamburger-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger-open .hamburger-line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } ``` ## StaggeredFade Component (src/components/StaggeredFade.tsx) A component that splits text into individual letters and animates each letter with a staggered fade-up using framer-motion. Props: `text` (string), `delay` (per-letter delay, default 0.05), `className` (optional). - Uses `useInView` from framer-motion with `once: true` to trigger when scrolled into view. - Each letter starts at `{ opacity: 0, y: 8 }` and animates to `{ opacity: 1, y: 0 }`. - Per-letter transition: `{ delay: i * delay, duration: 0.4, ease: [0.22, 1, 0.36, 1] }`. - Spaces are rendered as non-breaking spaces (`\u00A0`). ## Page Structure (App.tsx) ### State - `menuOpen` (boolean) — controls mobile menu visibility - `menuClosing` (boolean) — controls closing animation phase - On `menuOpen` change: set `body.style.overflow` to `'hidden'` or `''` - `handleCloseMenu`: sets `menuClosing=true`, then after 550ms sets `menuOpen=false` and `menuClosing=false` - `toggleMenu`: if open & not closing → close; if not closing → open ### Nav Items Array ``` ['REEL WORK', 'PROCESS & METHODS', 'INNER WORKSHOP'] ``` ### Layout (root div: `relative w-full h-screen overflow-hidden`) **1. Background Video** (absolute, full-cover): ```html <video className="absolute inset-0 w-full h-full object-cover" src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260717_084049_407d831b-67ef-4e76-9330-45386e0a9915.mp4" autoPlay loop muted playsInline /> ``` **2. Bottom Gradient Overlay** (for text contrast): ```html <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-[#030318]/80 to-transparent pointer-events-none" /> ``` **3. Content Container** (`relative z-10 flex flex-col h-full px-4 sm:px-6 md:px-10 lg:px-14 py-4 sm:py-5 md:py-8`): **3a. Desktop Navbar** (`hidden lg:flex items-center justify-between w-full animate-slide-down`): - Brand text: `LUMENVOX ATELIER` — white, 10px, tracking-[0.15em], uppercase, font-medium - 3 nav links (from array): white/80, 10px, tracking-[0.15em], uppercase, hover→white, 300ms transition - CTA link: `START A PROJECT` + ArrowUpRight icon (size 12) — white, 10px, tracking-[0.15em], uppercase, hover→white/80 **3b. Mobile/Tablet Navbar** (`flex lg:hidden items-center justify-between w-full animate-slide-down relative z-50`): - Brand text: `LUMENVOX ATELIER` (same styling) - Hamburger button: 40×40px, 3 lines (24px × 1.5px, white), gap-[5px]. Class `hamburger-open` applied when `menuOpen && !menuClosing`. **3c. Mobile Menu Overlay** (class `menu-overlay` + `is-open` when open + `is-closing` when closing): - Full-screen flex column, centered, `#030318` background - Each nav item wrapped with `menu-line` dividers (1px, white/10%, scaleX animation) - Nav items: white, `text-xl sm:text-2xl`, tracking-[0.25em], uppercase, `py-6 sm:py-8`, hover→white/70 - Final item: `START A PROJECT` + ArrowUpRight (size 18), flex with gap-3 **3d. Spacer** (`flex-1`) **3e. Hero Content** (bottom-aligned): **Row 1 — Large Typography** (`flex flex-col md:flex-row md:justify-between md:items-end mb-4 sm:mb-6 md:mb-8`): Left column: - `<p>`: `hero-heading`, `text-[6vw] sm:text-[5vw] md:text-[3.5vw] lg:text-[3vw]`, white, `mb-2 sm:mb-4 md:mb-6`. Text: `Visions So` via StaggeredFade (delay=0.06) - `<h1>`: `hero-heading`, `text-[14vw] sm:text-[13vw] md:text-[10vw] lg:text-[9vw]`, white, `leading-none`. Text: `UNDENIABLE` via StaggeredFade (delay=0.05) Right column (`text-right mt-2 sm:mt-3 md:mt-0`): - `<p>`: `hero-heading`, `text-[14vw] sm:text-[13vw] md:text-[10vw] lg:text-[9vw]`, white, `mb-2 sm:mb-4 md:mb-6`, `leading-none`. Text: `So` via StaggeredFade (delay=0.08) - `<h1>`: same sizing. Text: `RESIST` via StaggeredFade (delay=0.05) **Row 2 — Bottom Bar** (`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-6 pt-4 sm:pt-5 md:pt-6`): Left column (`flex items-start gap-4 sm:gap-5 md:gap-8`): - **Logo image** (framer-motion `motion.div`): - Animation: `initial={{ opacity: 0, scale: 0.8 }}` → `animate={{ opacity: 1, scale: 1 }}`, `transition={{ delay: 0.6, duration: 0.6, ease: [0.22, 1, 0.36, 1] }}` - Sizing: `w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20`, `rounded-2xl`, `overflow-hidden`, `flex-shrink-0`, `border border-white/20` - Image src: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260717_095034_599c0e43-e5a1-48c0-b169-f1267d71a58c.png&w=1280&q=85` - Image class: `w-full h-full object-cover`, alt="Logo" - **Info columns** (`hidden sm:flex items-start gap-6 md:gap-14`): - Column 1 (framer-motion `motion.div`, delay=0.8, y:16→0, duration 0.6, same ease): - Label: `01 — OUR CRAFT` — white, `text-[10px] sm:text-[11px] md:text-[13px]`, tracking-[0.15em], uppercase, `mb-1 sm:mb-1.5` - Description: `Visual systems, immersive platforms and artistic vision forged into one cohesive entity.` — white/80, `text-[9px] sm:text-[10px] md:text-[11px]`, `leading-relaxed`, uppercase, tracking-wide, `max-w-[220px] md:max-w-[260px]` - Column 2 (framer-motion, delay=1.0, same animation): - Label: `02 — OUR APPROACH` (same label styling) - Description: `Intention shapes the story. Form amplifies the mood. Detail seals it in memory.` (same desc styling) Right column — **CTA Button** (framer-motion `motion.a`, delay=1.2, y:16→0, duration 0.6, same ease): - Class: `liquid-glass rounded-full px-5 py-2.5 sm:px-6 sm:py-3 md:px-8 md:py-4 flex items-center gap-2 sm:gap-3 text-white text-[9px] sm:text-[10px] md:text-xs tracking-[0.2em] uppercase hover:bg-white/5 transition-all duration-300 group` - Text: `START A PROJECT` - Icon: ArrowUpRight (size 14), class: `group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform duration-300` ## Animation Timing Summary | Element | Animation | Delay | Duration | Ease | |---------|-----------|-------|----------|------| | Navbar | slideDown | 0s | 0.8s | ease-out | | Hero letters | staggered fade-up | per-letter × delay | 0.4s | [0.22,1,0.36,1] | | Logo image | scale 0.8→1 + fade | 0.6s | 0.6s | [0.22,1,0.36,1] | | Info col 1 | y:16→0 + fade | 0.8s | 0.6s | [0.22,1,0.36,1] | | Info col 2 | y:16→0 + fade | 1.0s | 0.6s | [0.22,1,0.36,1] | | CTA button | y:16→0 + fade | 1.2s | 0.6s | [0.22,1,0.36,1] | | Mobile menu items | y:30→0 + fade | 0.1-0.38s stagger | 0.5s | [0.22,1,0.36,1] | | Menu lines | scaleX 0→1 | 0.05-0.35s stagger | 0.6s | [0.22,1,0.36,1] | ## Colors - Background: `#030318` (dark navy) - Text primary: white - Text secondary: `white/80` - Borders/dividers: `white/20`, `white/10` - Gradient overlay: `from-[#030318]/80 to-transparent` ## Exact Copy (all text on the page) - Brand: `LUMENVOX ATELIER` - Nav: `REEL WORK`, `PROCESS & METHODS`, `INNER WORKSHOP` - Hero: `Visions So` / `UNDENIABLE` / `So` / `RESIST` - Info 1 label: `01 — OUR CRAFT` - Info 1 desc: `Visual systems, immersive platforms and artistic vision forged into one cohesive entity.` - Info 2 label: `02 — OUR APPROACH` - Info 2 desc: `Intention shapes the story. Form amplifies the mood. Detail seals it in memory.` - CTA: `START A PROJECT` ## Responsive Breakpoints - **<640px (mobile)**: hamburger menu, info columns hidden, smallest font sizes, single-column hero - **640-1023px (tablet)**: hamburger menu, info columns visible, medium sizes - **≥1024px (desktop)**: full desktop navbar, all elements visible, largest sizes ---2d:T40c4,### Stack - **Vite** + **React 18** + **TypeScript** - **Tailwind CSS 3.4** - **lucide-react** for icons (`LogIn`, `UserPlus`, `Play`, `Sparkles`, `Menu`, `X`) - No Framer Motion -- all animations are CSS `transition-*` classes --- ### Fonts (loaded in `index.html`) ```html <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;700&display=swap" rel="stylesheet" /> <link href="https://db.onlinewebfonts.com/c/6e47ef470dd19698c911332a9b4d1cf4?family=Neue+Haas+Grotesk+Text+Pro" rel="stylesheet" /> <link href="https://db.onlinewebfonts.com/c/dec0d9b4e22ca588dc20e1e2e09a59b5?family=Neue+Haas+Grotesk+Display+Pro+55+Roman" rel="stylesheet" /> ``` Body/root font stack (in `index.css`): ```css html, body, #root { height: 100%; margin: 0; font-family: 'Neue Haas Grotesk Display Pro 55 Roman', 'Neue Haas Grotesk Text Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } ``` --- ### Video URL (CloudFront) ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_131941_d136af49-e243-493a-be14-6ff3f24e09e6.mp4 ``` --- ### Color Palette | Token | Hex | |-------|-----| | Dark green (text, buttons) | `#1f2a1d` | | Medium dark green | `#2d3a2a` | | Button hover | `#2a3827` | | Body text green | `#4b5b47` | | Heading primary | `#336443` | | Heading accent | `#85AB8B` | | Bottom-left text | `#3d5638` | | Bottom-left button bg | `#3d5638`, hover `#2d4228` | --- ### Architecture Two files: 1. **`BoomerangVideoBg.tsx`** -- captures video frames into canvas, then plays them forward/backward in a seamless boomerang loop at 30fps (960px max capture width). 2. **`App.tsx`** -- the full hero section. --- ### `BoomerangVideoBg.tsx` (exact) ```tsx import { useEffect, useRef, useState } from 'react'; type Props = { src: string; className?: string; }; export default function BoomerangVideoBg({ src, className }: Props) { const videoRef = useRef<HTMLVideoElement>(null); const displayCanvasRef = useRef<HTMLCanvasElement>(null); const [framesReady, setFramesReady] = useState(false); const framesRef = useRef<HTMLCanvasElement[]>([]); useEffect(() => { const video = videoRef.current; if (!video) return; const frames: HTMLCanvasElement[] = []; let capturing = true; let lastTime = -1; const MAX_WIDTH = 960; const captureFrame = () => { if (!capturing || video.readyState < 2) return; if (video.currentTime === lastTime) return; lastTime = video.currentTime; const vw = video.videoWidth; const vh = video.videoHeight; if (!vw || !vh) return; const scale = Math.min(1, MAX_WIDTH / vw); const w = Math.round(vw * scale); const h = Math.round(vh * scale); const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); if (!ctx) return; ctx.drawImage(video, 0, 0, w, h); frames.push(canvas); }; type VFCVideo = HTMLVideoElement & { requestVideoFrameCallback?: (cb: () => void) => number; }; const vfcVideo = video as VFCVideo; const hasVFC = typeof vfcVideo.requestVideoFrameCallback === 'function'; let rafId = 0; const rafLoop = () => { captureFrame(); if (capturing) rafId = requestAnimationFrame(rafLoop); }; const vfcLoop = () => { captureFrame(); if (capturing && vfcVideo.requestVideoFrameCallback) { vfcVideo.requestVideoFrameCallback(vfcLoop); } }; const onEnded = () => { capturing = false; if (frames.length > 0) { framesRef.current = frames; setFramesReady(true); } }; const onLoaded = () => { video.play().catch(() => {}); if (hasVFC) { vfcVideo.requestVideoFrameCallback!(vfcLoop); } else { rafId = requestAnimationFrame(rafLoop); } }; video.addEventListener('loadedmetadata', onLoaded); video.addEventListener('ended', onEnded); if (video.readyState >= 1) onLoaded(); return () => { capturing = false; cancelAnimationFrame(rafId); video.removeEventListener('loadedmetadata', onLoaded); video.removeEventListener('ended', onEnded); }; }, [src]); useEffect(() => { if (!framesReady) return; const canvas = displayCanvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const frames = framesRef.current; if (frames.length === 0) return; const first = frames[0]; canvas.width = first.width; canvas.height = first.height; let index = 0; let direction = 1; let last = performance.now(); const interval = 1000 / 30; let rafId = 0; const render = (now: number) => { if (now - last >= interval) { last = now; ctx.drawImage(frames[index], 0, 0); index += direction; if (index >= frames.length - 1) { index = frames.length - 1; direction = -1; } else if (index <= 0) { index = 0; direction = 1; } } rafId = requestAnimationFrame(render); }; rafId = requestAnimationFrame(render); return () => cancelAnimationFrame(rafId); }, [framesReady]); return ( <div className={className ?? 'absolute inset-0 w-full h-full'}> <video ref={videoRef} src={src} className="w-full h-full object-cover" style={{ display: framesReady ? 'none' : 'block' }} muted playsInline preload="auto" crossOrigin="anonymous" /> <canvas ref={displayCanvasRef} className="w-full h-full object-cover" style={{ display: framesReady ? 'block' : 'none' }} /> </div> ); } ``` --- ### `App.tsx` (exact) ```tsx import { useState, useEffect } from 'react'; import { LogIn, UserPlus, Play, Sparkles, Menu, X } from 'lucide-react'; import BoomerangVideoBg from './BoomerangVideoBg'; const BG_VIDEO = 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260511_131941_d136af49-e243-493a-be14-6ff3f24e09e6.mp4'; function App() { const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { if (menuOpen) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const navLinks = [ { href: '#mission', label: 'Purpose' }, { href: '#how', label: 'The Process' }, { href: '#pricing', label: 'Tariffs' }, ]; return ( <section className="relative w-full min-h-screen sm:h-screen overflow-hidden"> <BoomerangVideoBg src={BG_VIDEO} className="absolute inset-0 w-full h-full" /> <nav className="absolute top-0 left-0 right-0 z-30 flex items-center justify-between px-4 sm:px-6 md:px-10 py-4 sm:py-6"> <div className="flex items-center gap-2 text-[#2d3a2a]"> <span className="text-lg sm:text-xl md:text-2xl font-semibold tracking-tight"> LinkFlow<sup className="text-[10px] sm:text-xs font-medium">TM</sup> </span> </div> <div className="hidden lg:flex items-center gap-1 bg-white/70 backdrop-blur-md rounded-full pl-6 pr-1 py-1 shadow-sm border border-white/60"> {navLinks.map((link, i) => ( <a key={link.href} href={link.href} className={`text-sm px-3 py-2 transition-colors ${ i === 0 ? 'font-semibold text-[#1f2a1d]' : 'font-medium text-[#4b5b47] hover:text-[#1f2a1d]' }`} > {link.label} </a> ))} <button className="ml-2 bg-[#1f2a1d] hover:bg-[#2a3827] text-white text-sm font-medium px-5 py-2.5 rounded-full transition-colors"> Try it Live </button> </div> <div className="flex items-center gap-3 sm:gap-6 text-[#2d3a2a]"> <a href="#signup" className="hidden sm:flex items-center gap-2 text-sm font-medium hover:opacity-80 transition-opacity"> <UserPlus className="w-4 h-4" /> Sign Me Up! </a> <a href="#login" className="hidden sm:flex items-center gap-2 text-sm font-medium hover:opacity-80 transition-opacity"> <LogIn className="w-4 h-4" /> Enter </a> <button onClick={() => setMenuOpen((v) => !v)} className="lg:hidden relative flex items-center justify-center w-10 h-10 rounded-full bg-white/70 backdrop-blur-md border border-white/60 text-[#1f2a1d] transition-all duration-300 hover:bg-white/90" aria-label={menuOpen ? 'Close menu' : 'Open menu'} aria-expanded={menuOpen} > <Menu className={`w-5 h-5 absolute transition-all duration-300 ${ menuOpen ? 'opacity-0 rotate-90 scale-50' : 'opacity-100 rotate-0 scale-100' }`} /> <X className={`w-5 h-5 absolute transition-all duration-300 ${ menuOpen ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-50' }`} /> </button> </div> </nav> {/* Mobile menu overlay */} <div className={`lg:hidden fixed inset-0 z-20 transition-opacity duration-300 ${ menuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none' }`} onClick={() => setMenuOpen(false)} > <div className="absolute inset-0 bg-[#1f2a1d]/40 backdrop-blur-sm" /> </div> {/* Mobile menu drawer */} <div className={`lg:hidden fixed top-0 right-0 bottom-0 z-20 w-[85%] max-w-sm bg-white/95 backdrop-blur-xl shadow-2xl transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] ${ menuOpen ? 'translate-x-0' : 'translate-x-full' }`} > <div className="flex flex-col h-full pt-24 px-8 pb-8"> <div className="flex flex-col gap-1"> {navLinks.map((link, i) => ( <a key={link.href} href={link.href} onClick={() => setMenuOpen(false)} className={`text-2xl font-semibold text-[#1f2a1d] py-4 border-b border-[#1f2a1d]/10 transition-all duration-500 ${ menuOpen ? 'translate-x-0 opacity-100' : 'translate-x-8 opacity-0' }`} style={{ transitionDelay: menuOpen ? `${150 + i * 70}ms` : '0ms' }} > {link.label} </a> ))} </div> <div className={`mt-8 flex flex-col gap-4 transition-all duration-500 ${ menuOpen ? 'translate-x-0 opacity-100' : 'translate-x-8 opacity-0' }`} style={{ transitionDelay: menuOpen ? '400ms' : '0ms' }} > <a href="#signup" className="flex items-center gap-2 text-sm font-medium text-[#2d3a2a] sm:hidden"> <UserPlus className="w-4 h-4" /> Sign Me Up! </a> <a href="#login" className="flex items-center gap-2 text-sm font-medium text-[#2d3a2a] sm:hidden"> <LogIn className="w-4 h-4" /> Enter </a> <button className="mt-2 bg-[#1f2a1d] hover:bg-[#2a3827] text-white text-sm font-semibold px-5 py-3 rounded-full transition-colors"> Try it Live </button> </div> </div> </div> {/* Hero copy */} <div className="relative z-10 flex flex-col items-center text-center pt-24 sm:pt-28 md:pt-32 px-4 sm:px-6"> <h1 className="font-normal leading-[0.95] text-[#336443] text-[2rem] sm:text-4xl md:text-5xl lg:text-[4.75rem] xl:text-[5.25rem] max-w-5xl" style={{ fontFamily: '"Neue Haas Grotesk Display Pro 55 Roman", "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif', letterSpacing: '-0.035em' }} > Close the rift{' '} <span className="text-[#85AB8B]"> linking <br className="hidden sm:block" /> signals and action </span> </h1> <p className="mt-6 sm:mt-8 text-[#4b5b47] text-sm sm:text-base md:text-lg leading-relaxed max-w-md px-2"> Shape scattered signals into meaningful outcomes via AI-driven workflows. </p> </div> {/* Bottom-left CTA block */} <div className="absolute left-4 right-4 sm:right-auto sm:left-6 md:left-10 bottom-6 sm:bottom-8 md:bottom-10 z-10 max-w-sm"> <div className="flex items-center gap-2 text-[#3d5638] sm:text-white/95 mb-3"> <Sparkles className="w-4 h-4" /> <span className="text-sm font-semibold sm:font-medium"> FluxEngine<sup className="text-[10px]">TM</sup> </span> </div> <p className="text-[#3d5638]/90 sm:text-white/85 text-xs leading-relaxed mb-6 max-w-xs font-medium sm:font-normal"> LinkFlow smoothly unites your company systems, streamlining data paths between services without having to write custom scripts. </p> <div className="flex items-center gap-4 flex-wrap"> <button className="bg-[#3d5638] sm:bg-white hover:bg-[#2d4228] sm:hover:bg-white/90 text-white sm:text-[#1f2a1d] text-sm font-semibold px-5 sm:px-6 py-2.5 sm:py-3 rounded-full transition-colors shadow-sm"> Try it Live </button> <button className="text-[#3d5638] sm:text-white text-sm font-semibold sm:font-medium hover:opacity-80 transition-opacity"> Know More. </button> </div> </div> {/* Bottom-right video link */} <div className="hidden sm:flex absolute right-6 md:right-10 bottom-8 md:bottom-10 z-10 items-center gap-2 text-white/90 text-sm"> <button className="flex items-center justify-center w-6 h-6 rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors"> <Play className="w-3 h-3 fill-white text-white ml-0.5" /> </button> <span className="font-medium">How we build?</span> <span className="text-white/60">1:35</span> </div> </section> ); } export default App; ``` --- ### Animation Details (all CSS, no Framer Motion) | Element | Property | Values | |---------|----------|--------| | Hamburger Menu/X icon swap | `transition-all duration-300` | Open: Menu gets `opacity-0 rotate-90 scale-50`, X gets `opacity-100 rotate-0 scale-100`. Closed: reverse. | | Mobile overlay backdrop | `transition-opacity duration-300` | Open: `opacity-100 pointer-events-auto`. Closed: `opacity-0 pointer-events-none`. | | Mobile drawer slide | `transition-transform duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]` | Open: `translate-x-0`. Closed: `translate-x-full`. | | Mobile nav links stagger | `transition-all duration-500` | Open: `translate-x-0 opacity-100`, delay per item: `150ms + i * 70ms`. Closed: `translate-x-8 opacity-0`, delay `0ms`. | | Mobile CTA group | `transition-all duration-500` | Open: `translate-x-0 opacity-100`, delay `400ms`. Closed: `translate-x-8 opacity-0`, delay `0ms`. | | Nav buttons | `transition-colors` | Default Tailwind duration (150ms). | | Opacity links | `transition-opacity` | `hover:opacity-80`. | --- ### Key Layout/Spacing Notes - Root section: `relative w-full min-h-screen sm:h-screen overflow-hidden` - Navbar padding: `px-4 sm:px-6 md:px-10 py-4 sm:py-6` - Desktop pill nav: `bg-white/70 backdrop-blur-md rounded-full pl-6 pr-1 py-1 shadow-sm border border-white/60` - Hero heading: `pt-24 sm:pt-28 md:pt-32`, font sizes `text-[2rem] sm:text-4xl md:text-5xl lg:text-[4.75rem] xl:text-[5.25rem]`, `leading-[0.95]`, `letterSpacing: '-0.035em'` - Bottom-left block: `absolute left-4 right-4 sm:right-auto sm:left-6 md:left-10 bottom-6 sm:bottom-8 md:bottom-10` - Bottom-right video: `absolute right-6 md:right-10 bottom-8 md:bottom-10` --- ### Dependencies (package.json) ```json { "dependencies": { "lucide-react": "^0.344.0", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@vitejs/plugin-react": "^4.3.1", "autoprefixer": "^10.4.18", "postcss": "^8.4.35", "tailwindcss": "^3.4.1", "typescript": "^5.5.3", "vite": "^5.4.2" } } ```2e:T10d1,Build a React functional component using Tailwind CSS that replicates a cinematic, glassmorphic social media post or digital portfolio hero section. Structure & Layout: The main wrapper should take up the full screen (min-h-screen) with a solid black background (bg-[#000000]), centering its contents using flexbox. Inside, create a fixed aspect ratio card that is exactly 600px wide and 800px high using inline styles. It should have a black background, shadow-2xl, be relative, and have overflow-hidden. Background Media: Place a full-cover background <video> element filling the card (absolute inset-0 z-0 h-full w-full object-cover opacity-100). The video source must strictly use this exact URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_212252_7d25a6d2-cf7f-465c-9bd1-a1496112806e.mp4 Make sure the video is configured exactly with autoPlay, loop, muted, and playsInline. Do not put any dark opacity gradient overlays on top of the video directly. SVG Film Noise Overlay: Add an absolute layer over the video to create a grainy film effect. Set the classes to absolute inset-0 z-50 opacity-[0.06] mix-blend-overlay pointer-events-none. Use this exact inline style for the background image to dynamically generate the CSS noise: backgroundImage: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") Fonts Configuration (Global CSS): Import the "Inter" font (weights 100 to 500) from Google Fonts. Import the "Didot" font from this specific online web font URL: https://db.onlinewebfonts.com/c/251039e6849ad977a8bfc40b564dce89?family=Didot Configure Tailwind theme variables via @theme: set --font-serif to Didot (with fallbacks), and --font-sans to Inter. Typography & Content Container: Create a relative z-20 content container taking h-full w-full with padding px-12 py-10, using a flex column layout. Top Left Text: "Work fast. Live slow." styled with text-[22px], font-serif, tracking-normal, text-[#f0f0f0], and drop-shadow-md. Add a flex-1 spacer div to push the remaining content layout to the bottom. Bottom Content Block: Wrap in a flex flex-col mb-12 container. Title: "Create your digital reality." Styled with text-[38px] leading-tight font-serif text-white mb-2 tracking-normal drop-shadow-md whitespace-nowrap ml-[-0.3px]. Subtitle: "From nothing to everything, let's bring your vision to life." Styled with text-[15.5px] font-sans text-[#a3a3a3] mb-8 font-extralight tracking-wide. The Glassmorphic Button: Create a "Send a message" button inside a div wrapper. Give the button the classes: group relative px-6 py-[10px] rounded-full font-sans text-[14px] text-[#e0e0e0] font-light transition-all duration-300 overflow-hidden backdrop-blur-md Give the button the following complex inline styles: background: 'rgba(255, 255, 255, 0.03)' boxShadow: '0 4px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 140, 70, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 2px rgba(0, 0, 0, 0.8)' Inside the button, include an absolute top highlight effect: absolute inset-x-0 top-0 h-[20px] bg-gradient-to-b from-[#ff8c46]/10 to-transparent pointer-events-none z-0 rounded-t-full Add an inner hover radial glow layer inside the button (opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0) with the inline style: background: 'radial-gradient(circle at center, rgba(255, 120, 50, 0.1) 0%, transparent 70%)' The actual text inside the button should be wrapped in a span taking precedence (relative z-10 text-[14px] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] tracking-wide). Footer Layout: Set up a flex row with justify-between items-end w-full. Use classes: text-[15px] font-sans text-[#7a7a7a] font-light tracking-wide translate-y-[10px]. Left side: "your.name" with a hover:text-white transition-colors cursor-pointer. Right side: A flex container with items-center gap-3. Include "web", "product", "brand" (all having hover:text-white transition-colors cursor-default) separated by diamond layout dividers "✦" styled with text-[11px] text-[#555] opacity-80 mt-[-2px].2f:T1639,Build a 404 "Page Not Found" hero page as a single full-viewport (100vh, no scroll) React + Vite + Tailwind CSS application using the DM Sans font and Google Material Symbols Rounded icons. The page must match the following specification exactly: --- ## Fonts & External Resources - **Google Font:** DM Sans (all weights, variable: `opsz 9..40, wght 100..1000`) - **Google Material Symbols Rounded:** `opsz,wght,FILL,GRAD@24,400,1,0` - **Logo image:** `https://pub-f170a2592d2c4a1485466404c36807be.r2.dev/Tests/logoipsum-415.svg` (rendered with `filter: brightness(0)` to make it black, height 28px) - **Background spaceship image:** `https://pub-e68758f43067417dba612b2371819aa1.r2.dev/viktor-components/alien-spaceship.png` --- ## Layout The entire page is exactly `100vh` with `overflow: hidden` on html, body, and `#root`. No scrolling. The body uses `display: flex; flex-direction: column`. The `#root` div also uses `height: 100vh; display: flex; flex-direction: column; overflow: hidden`. --- ## Background Body has a layered background: 1. The spaceship PNG centered at `center 40%`, sized with `background-size: contain` 2. A `linear-gradient(to top left, #F5F5F5, #F7F7F7)` covering the full page Both are `background-attachment: fixed` and `no-repeat`. --- ## Color Variables (CSS custom properties) ``` --text-main: #1a1a1a --text-secondary: #888888 --bg-page: #F5F5F5 --card-bg: #ffffff ``` --- ## Navbar - Max-width `1100px`, centered, padding `28px 40px` - Has a dashed bottom border made with `background-image: linear-gradient(to right, rgba(0,0,0,0.08) 2px, transparent 2px); background-size: 6px 1px` on a `::after` pseudo-element - **Left:** Logo (the SVG image + the text "nexto." in 20px bold, -0.3px letter-spacing, color #111, flex with 9px gap) - **Center:** Nav links ("Our Team", "Solutions" with a dropdown arrow character, "Showcase", "News") - 14px, weight 400, opacity 0.65, hover to opacity 1, gap 36px - **Right:** CTA button "Let's Connect" - dark gradient button (`linear-gradient(180deg, #2c2c2c 0%, #111111 100%)`), white text 13px weight 500, border-radius 40px, padding `5px 16px 5px 5px`. Has a white circular arrow icon (24px circle) on the LEFT side with a chevron SVG inside. Box-shadow `0 4px 15px rgba(0,0,0,0.15)`. On hover: translateY(-1px), stronger shadow, brightness(1.1). - **Hamburger (mobile only):** 3 spans, 24px wide, 2px height, animates to X when active. Hidden on desktop, shown on mobile (`display: flex` at max-width 768px). --- ## Mobile Navigation - Fixed full-screen overlay, slides in from right with `transform: translateX(100%)` -> `translateX(0)`, cubic-bezier(0.77, 0, 0.175, 1) transition - On mobile: left-aligned, large links (38px, weight 800, letter-spacing -1.5px), each with bottom border, padding 24px 0 - Last link is the CTA button styled same as navbar but with 32px arrow circle --- ## Main Content Area - `flex: 1`, centered both ways (`align-items: center; justify-content: center`), max-width 700px, padding `20px 20px 30px` - **Lost text:** "Seems you've wandered off..." - 15px, color `--text-secondary`, weight 400, margin-bottom 12px - **Title wrapper:** `position: relative; display: inline-block; margin-bottom: 14px` - **Cloud decoration:** Material Symbols "cloud" icon, positioned `top: -18px; left: -24px`, font-size 42px, with gradient text fill (`linear-gradient(to bottom, #F7B2FB 50%, #786EF1 80%, #5588FB 100%)` using `-webkit-background-clip: text; -webkit-text-fill-color: transparent`), white drop-shadow outline, `floatSlow` animation (5s, 0.3s delay) - **Heart decoration:** Material Symbols "favorite" icon, positioned `bottom: -15px; right: 20px`, font-size 32px, same gradient fill, white drop-shadow outline, `floatSlow` animation (4.5s, 1s delay) - **Title:** "Whoops! Nothing here yet" - `font-size: clamp(34px, 5vw, 52px)`, weight 500, letter-spacing -1.5px, line-height 1.08, color #0f0f0f - **Subtext:** "Grab a 30-minute `chat` to explore your ideas, scope, and vision. We'll find common ground, sync and `define` a clear roadmap." - 14px, color `--text-secondary`, line-height 1.7, max-width 470px, margin-bottom 28px. The words "chat" and "define" are in highlighted tags (inline-flex, background #E0E2E7, 12.5px, weight 600, padding 2px 12px, border-radius 6px) --- ## Navigation Cards - Flex column, gap 12px, max-width 460px, positioned at bottom with `margin-top: auto` - **Card 1 "Main Page":** House SVG icon (path: `M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z` with door `M9 21V12h6v9` in white). Subtitle: "Back where it all begins..." - **Card 2 "Showcase":** Circle-dot SVG icon (circle r=9 filled, inner circle r=3.5 white). Subtitle: "Where we walk the walk" - Each card: white background, border-radius 18px, padding 18px 22px, flex between, 1px border rgba(0,0,0,0.05), shadow `0 2px 12px rgba(0,0,0,0.04)`. On hover: translateY(-3px), shadow `0 8px 28px rgba(0,0,0,0.08)`. - Icon container: 48px circle, background #eaecf0, scales 1.05 on card hover - Right chevron arrow (rsaquo character, 21px), translateX(6px) on hover - Card title: 15px weight 600, subtitle: 12px color `--text-secondary` --- ## Animations ```css @keyframes floatSlow { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(3deg); } } ``` --- ## Responsive Breakpoints **768px and below:** - Hide nav-links and desktop CTA button, show hamburger - Background-size: 90%, position: center 45% - Navbar padding: 20px - Title: 30px, decorations smaller - Cards: full width, gap 10px, smaller padding/icons **480px and below:** - Title: 26px - Background-size: 100% - Decorations even smaller ---30:Tb3a,Build a single-page hero section for a brand design agency called "Brandly" using React, Tailwind CSS, and Lucide React icons. The entire page is one viewport-height screen with no scrolling. It uses a fullscreen background video with all content layered on top. Fonts (loaded via Google Fonts in index.html): Inter (weights: 300, 400, 500, 600, 700) -- used as the base font for the entire page Anton (regular 400) -- used for all large uppercase headings Page Container: Full viewport height (h-screen), overflow-hidden, flex flex-col Background color: #F5F3EE (warm off-white/cream) Base font-family set via inline style: fontFamily: 'Inter, sans-serif' Background Video: A video element with autoPlay, loop, muted, playsInline Positioned fixed top-0 left-0 w-full h-full object-cover pointer-events-none with zIndex: 0 Video source URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_102305_3a7cab3b-7a86-46e8-a0f9-6937f035b087.mp4 Type: video/mp4 Header (zIndex: 10): relative, padding px-6 lg:px-12 py-4 lg:py-6, flex-shrink-0 Nav: flex items-center justify-between Left: Logo text "Brandly" -- text-2xl lg:text-3xl font-bold text-black Center (hidden on mobile, shown md+): Navigation links "About", "Features", "Pricing", "FAQ", "Help" -- flex items-center gap-8 text-base lg:text-lg, color #080808 Right: Two buttons side by side (flex items-center gap-3): "Sign Up" -- px-4 lg:px-6 py-2 text-base lg:text-lg hover:text-black transition, color #080808 "Log In" -- px-4 lg:px-6 py-2 bg-black text-white text-base lg:text-lg hover:bg-gray-800 transition Main Content Area (zIndex: 10): relative, padding px-6 lg:px-12 py-6 lg:py-8, flex-1 flex flex-col justify-between Top Row -- 2 column grid (grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12): Left column: Main heading (h1): "BUILDING / BRANDS THAT / RESONATE" in Anton font. text-5xl sm:text-6xl lg:text-6xl xl:text-7xl font-normal text-black leading-[0.80] tracking-tight mb-4 lg:mb-5. Subheading: "Thoughtful design that captivates, empowers, and creates lasting impact." text-lg lg:text-xl mb-4 lg:mb-5 max-w-md color #080808 CTA button: "Start today" with ArrowRight icon in white circle. flex items-center gap-3 pl-8 pr-1.5 py-1.5 bg-black text-white rounded-full hover:bg-gray-800 Right column (text-right): "50+ BRANDS LAUNCHED" heading in Anton, with description paragraph below. Middle Row -- 2 column grid: Left: Brand designer bio paragraph with social icons (Facebook filled, Instagram, Youtube) Right: "5+ YEARS IN THE INDUSTRY" heading in Anton with description Bottom Row -- Brand Logo Bar: 6 brand cards in grid-cols-6: Frame Blox, Supa Blox, Hype Blox, Hype Blox, Ultra Blox, Ship Blox Each with unique abstract icon and white bg rounded-lg card style Key: No animations, all text black/#080808, default Tailwind config, justify-between layout distribution.31:T8ed,Create a premium private jet landing page hero section with the following specifications: Video Background: Use this exact CloudFront video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_091828_e240eb17-6edc-4129-ad9d-98678e3fd238.mp4 Video should autoplay, be muted, loop continuously, and include playsInline attribute Video covers entire viewport (100vh) using object-cover Navigation Bar: Brand name "SkyElite" on the left (text-2xl, font-semibold, text-gray-900) Desktop menu items (hidden on mobile, visible md:flex): Start, Story, Rates, Benefits, FAQ Navigation links in gray-900 with hover:text-gray-700 transition Mobile hamburger menu button using Lucide React icons (Menu/X) Mobile menu appears as dropdown with white/95 opacity background, backdrop blur, rounded corners, shadow Max width 7xl, centered with px-8 py-6 Hero Content (centered, -mt-80 to pull up): Small uppercase label: "PRIVATE JETS" (text-sm, font-semibold, gray-600, tracking-wider, mb-4) Large two-line heading with overlapping effect: Line 1: "Premium." (text-6xl md:text-7xl lg:text-8xl, font-normal, text-gray-500, leading-none, tracking-tighter) Line 2: "Accessible." (same size, color: #202A36, negative margin-top: -12px for overlap) Subtitle: "Your dedication deserves recognition." (text-lg md:text-xl, gray-600, mb-6, max-w-2xl) Two call-to-action buttons (gap-4, centered): "Discover" button: px-4 py-2, rounded-full, bg-gray-300, text-gray-800, font-medium, hover:bg-gray-400 "Book Now" button: px-4 py-2, rounded-full, white text, bg-color #202A36, hover color #1a2229 with smooth transitions Typography: Use Inter font (import from Google Fonts: 400, 500, 600, 700 weights) Apply to entire body via CSS Technical Setup: React with TypeScript Tailwind CSS for styling Lucide React for icons useState hook for mobile menu toggle Full screen height container (h-screen) Responsive breakpoints: mobile-first, md, lg All transitions use transition-colors class Layout Structure: Outer container: min-h-screen, bg-gray-50 Hero section: relative, h-screen, overflow-hidden Content wrapper: relative, h-full, flex flex-col Main content area: flex-1, flex items-center justify-center Make it clean, modern, and premium-looking with smooth interactions.32:T1554,--- Build a **Site Footer** for an aerospace company called "EngineTech." This is a black-background footer with an animated dotted top border, a four-column nav grid with a large heading, an oversized wordmark brand row, and a legal line. --- ## ROOT CONTAINER (`.site-footer`) - Position relative, z-index 100, overflow hidden. - Background: `#000000`. Color: `#ffffff`. --- ## ANIMATED DOTS STRIP (`.footer-dots`) A decorative band at the very top of the footer with horizontally drifting dots. - Position relative, height 120px, overflow hidden, background `#000000`. - Has `aria-hidden="true"`. **Inside (`.footer-dots__line`):** - Position absolute, `left: 0; top: 50%`. Width **200%**, height 70px. - Opacity 0.75. `transform: translateY(-50%)`. - Background-image (three layered radial-gradient dot patterns): - `radial-gradient(circle, rgb(255 255 255 / 0.55) 1.5px, transparent 2px)` - `radial-gradient(circle, rgb(255 255 255 / 0.35) 1px, transparent 1.5px)` - `radial-gradient(circle, rgb(255 255 255 / 0.45) 1.2px, transparent 1.8px)` - Background-position: `0 8px, 24px 22px, 48px 14px`. - Background-size: `72px 38px, 110px 44px, 160px 52px`. - Animation: `footerDotsMove 18s linear infinite`. **Keyframes:** ``` @keyframes footerDotsMove { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-50%, -50%, 0); } } ``` --- ## FOOTER INNER (`.site-footer__inner`) - Width: `min(100% - 96px, var(--hero-max-width))` where `--hero-max-width: 1820px`. Margin `0 auto`. - Padding: `clamp(34px, 4vw, 66px) 0 clamp(18px, 2vw, 34px)`. --- ## TOP GRID (`.site-footer__top`) - Display grid. Columns: `minmax(320px, 1.25fr) repeat(3, minmax(150px, 0.42fr))`. - Gap: `clamp(28px, 4vw, 76px)`. Min-height: `clamp(220px, 24vw, 330px)`. ### H2 (first cell) - Text: "Proven Advanced Propulsion Technology". - Max-width 680px, margin 0, color `#ffffff`, `font-size: clamp(34px, 3.5vw, 62px)`, weight 220, letter-spacing 0, line-height 1.06. ### Nav columns (three `.site-footer__nav` elements) Each nav is `display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.35vw, 22px)`. Each link `<a>`: - Color `rgb(255 255 255 / 0.88)`, font-size 16px, weight 650, line-height 1.1. - Transition: `color 180ms ease, transform 180ms ease`. - Hover: color `#ffffff`, `transform: translateX(3px)`. **Nav 1 (`aria-label="Footer navigation"`):** - Company → `#company` - Technology → `#technology` - Solutions → `#solutions` - Our Edge → `#our-edge` - Investors → `#investors` **Nav 2 (`aria-label="Company links"`):** - Our Team → `#our-team` - News → `#news` - Careers → `#careers` - Contact Us → `#contact` **Nav 3 (`aria-label="Social links"`):** - LinkedIn → `https://www.linkedin.com` (`target="_blank" rel="noreferrer"`) - Follow Us on X → `https://x.com` (`target="_blank" rel="noreferrer"`) --- ## BRAND ROW (`.site-footer__brand-row`) - Width 100%. Margin-top: `clamp(18px, 3vw, 46px)`. **Brand link (`.site-footer__brand`):** - Anchor `href="/"`, `aria-label="EngineTech home"`. - Display flex, align-items center, width 100%, color `#ffffff`. **Brand mark (`.site-footer__mark`):** - Position relative, `flex: 0 0 clamp(58px, 6.1vw, 118px)`, `aspect-ratio: 1`. - Margin-right `clamp(14px, 1.6vw, 28px)`. Overflow hidden, border-radius 50%. - Background `#ffffff`. - `::before` pseudo: absolute `inset: -18%`, background `#000000`, with `clip-path: polygon(0 20%, 100% 8%, 100% 19%, 0 31%, 0 43%, 100% 31%, 100% 42%, 0 54%, 0 66%, 100% 54%, 100% 65%, 0 77%)`. This creates a zig-zag wave pattern inside the white circle. - Has `aria-hidden="true"`. **Brand wordmark (second `<span>`):** - Text: "EngineTech". - Display block, `flex: 1 1 auto`, min-width 0. - `font-size: clamp(58px, 11.1vw, 214px)`. Weight 760. `letter-spacing: -0.055em`. Line-height 0.78. - `white-space: nowrap`. --- ## LEGAL LINE (`.site-footer__legal`) - Flex row, wrap allowed, justify-content flex-start, gap `8px 18px`. - Margin-top: `clamp(14px, 1.4vw, 24px)`. - Color `rgb(255 255 255 / 0.52)`, font-size 9px, line-height 1.35. Contents: - `<p>`: "© 2026 EngineTech. All rights reserved." (margin 0) - `<a href="#privacy">`: "Privacy Policy" (color inherit, hover `#ffffff`) - `<a href="#terms">`: "Terms of Use" (same styling) --- ## RESPONSIVE BREAKPOINTS **At 980px:** - `.site-footer__inner` width: `min(100% - 48px, var(--hero-max-width))`. - Top grid: `grid-template-columns: 1fr 1fr` (two columns). - H2 spans full width: `grid-column: 1 / -1`. **At 560px:** - `.site-footer__inner` width: `min(100% - 32px, var(--hero-max-width))`. - Top grid: single column (`grid-template-columns: 1fr`). Min-height auto. - Nav links font-size 15px. - Brand mark flex-basis: `clamp(38px, 12vw, 58px)`. - Brand wordmark font-size: `clamp(45px, 18vw, 84px)`. --- ## GLOBAL STYLES **CSS custom property used:** `--hero-max-width: 1820px`. **Font stack:** `"Geist", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` with `-webkit-font-smoothing: antialiased` and `text-rendering: geometricPrecision`. **Anchor reset:** `a { color: inherit; text-decoration: none; }`. **Color palette:** No purple or violet. Pure black `#000000` background, pure white `#ffffff` text, with `rgb(255 255 255 / 0.88)` for nav links, `rgb(255 255 255 / 0.55)` / `0.45` / `0.35` for the dot pattern, and `rgb(255 255 255 / 0.52)` for legal text.33:T12a9,**Prompt to recreate the Submissions section:** > Build a full-viewport "Submissions" section using React with Tailwind CSS (no extra UI libraries). This is a single `<section>` with the following exact specifications: > > **Section container:** > - `id="nominations"` > - Background color: `#F0F0F0` > - `min-height: 100vh` > - Overflow hidden, position relative > - Padding: `py-20 sm:py-28 px-6 sm:px-10` > - Uses `flex flex-col justify-center` to vertically center content > > **Inner layout:** > - A single flex container: `flex flex-col lg:flex-row`, `items-start lg:items-stretch`, `justify-center`, `gap-10 lg:gap-12`, `max-w-5xl mx-auto`, position relative > - Three columns: left nomination cards, center video + heading, right nomination cards > - On mobile, the center column appears first (`order-1 lg:order-2`), left cards second (`order-2 lg:order-1`), right cards third (`order-3`) > > **Center column** (flex-1, flex-col, items-center, justify-start): > - A heading block with `uppercase`, color `#154359`, flex-col items-center gap-2: > - Small label: `<span>` with text `[submissions]`, font-size `12px`, letter-spacing `0.24em` > - Large heading: `<h2>` with text `submissions`, uses custom font class `.font-firs` (font-family: `'TT Firs Neue', 'Inter', system-ui, sans-serif`), font-size `44px sm:54px`, `font-semibold`, `tracking-tight` > - Below heading, a video container with `mt-6 sm:mt-8`, sized `w-[220px] sm:w-[380px] lg:w-[460px]` and `h-[220px] sm:h-[380px] lg:h-[460px]`: > - `<video>` element, `object-cover`, `w-full h-full`, autoPlay, loop, muted, playsInline > - Video source URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_154120_b89bfedd-530d-4ebb-9eb7-42eeafe08667.mp4` > > **Left nomination cards column:** > - `flex flex-col gap-4 items-center lg:items-start lg:mt-36` > - Contains 3 NominationCard components with these exact titles/subtitles: > 1. title: `"Lead"`, subtitle: `"AI venture for commerce"` > 2. title: `"Emerging innovations"`, subtitle: `"in food commerce"` > 3. title: `"The finest innovations"`, subtitle: `"for learners and young students"` > > **Right nomination cards column:** > - `flex flex-col gap-4 items-center lg:items-end lg:mt-36` > - Contains 3 NominationCard components: > 1. title: `"Innovations for advanced"`, subtitle: `"career training"` > 2. title: `"The finest innovations"`, subtitle: `"in finance"` > 3. title: `"Categories"`, subtitle: `"coming soon"` > > **NominationCard component** (each card): > - An `<a href="#">` tag, `group relative block w-full max-w-[20em] h-[5em]`, with `transition-transform hover:-translate-y-0.5` > - Inside, an SVG positioned `absolute inset-0 w-full h-full`, with `preserveAspectRatio="none"` and `viewBox="0 0 100 100"`: > - A single `<polygon>` with `points="14,0 100,0 100,86 86,100 0,100 0,14"` -- this creates a hexagonal/chamfered-corner shape > - `fill="none"`, `stroke="rgba(6, 99, 119, 0.25)"` (teal at 25% opacity), `strokeWidth="1"`, `vectorEffect="non-scaling-stroke"` > - Over the SVG, a `relative` div with `flex items-center justify-center w-full h-full`: > - Inner `text-center px-4` div, color `#154359`: > - Title line: `text-[13px] font-semibold leading-tight` > - Subtitle line: `text-[12px] font-normal leading-tight opacity-80` > > **Bottom fade overlay:** > - `pointer-events-none absolute inset-x-0 bottom-0 h-40 sm:h-56 z-10` > - Background: `linear-gradient(to bottom, rgba(240, 245, 247, 0) 0%, rgba(240, 245, 247, 0.7) 60%, #F0F5F7 100%)` -- fades from transparent to the next section's background color > > **Fonts required in CSS:** > ```css > html, body { > font-family: 'Inter', system-ui, -apple-system, sans-serif; > -webkit-font-smoothing: antialiased; > } > .font-firs { > font-family: 'TT Firs Neue', 'Inter', system-ui, sans-serif; > } > ``` > > **Color palette used:** > - Section background: `#F0F0F0` > - Text color: `#154359` (dark teal/navy) > - Card border stroke: `rgba(6, 99, 119, 0.25)` (muted teal) > - Bottom gradient target: `#F0F5F7` > > **Key design details:** > - The nomination cards use an SVG polygon border (not CSS border) to create chamfered/cut corners -- top-left and bottom-right corners are clipped at 14% of the viewBox > - The left and right card columns are pushed down with `lg:mt-36` so they sit roughly mid-way beside the taller center video, creating a staggered visual hierarchy > - The video has no border-radius and plays inline with no controls > - The entire section is responsive: stacks vertically on mobile (center first, then left cards, then right cards) and goes to a 3-column layout on `lg:` breakpoint > - No animations beyond the hover lift (`hover:-translate-y-0.5`) on the nomination cards ---34:T8d76,Create a high-performance, interactive 3D horizontal cylinder carousel showing premium animated bank cards. Core Features & Interactions: Use React (useState, useEffect, useRef), Tailwind CSS v4, and standard requestAnimationFrame for a smooth 60fps render loop. No external animation libraries needed. The scene should behave like a continuous circular scroll/carousel, updating a continuous progress variable. Add interactive 3D parallax tilt to the cards that smoothly responds to mouse cursor movement (mousemove), using inertia damping to lag slightly behind the cursor. The cards should have real volumetric 3D thickness (achieved by stacking multiple div layers close together, simulating 3D depth). The carousel math should push cards to the sides (using smoothstep interpolation) and hide them gracefully using perspective formulas as they move completely off-screen. Each card must have a front and back face. The front face includes an autoplaying video background, a silver metallic chip (SVG), an embedded JWT logo top-right, and intersecting circles bottom-right. The back face should blur the same video background, have a dark magnetic stripe across the top, and feature the cardholder name, number, and CVV in JetBrains Mono. Visual Styling: Use a pure black background (#000000). The application relies exclusively on the interactive 3D card layout (no text layers over the background). Make sure the scene's wrapper uses CSS perspective: 1350px; and standard transformStyle: preserve-3d. Please use the exact code below for src/App.tsx and src/index.css to build this exactly as requested. import React, { useState, useEffect, useRef } from 'react'; const CARD_VIDEOS = [ 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260506_030111_a9e15665-d379-4a7f-8116-695bbe452ad1.mp4', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260429_171347_f640c30d-ec21-426a-98bc-77e07c2c60cb.mp4', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260503_104800_bc43ae09-f494-43e3-97d7-2f8c1692cfd7.mp4', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260423_161253_c72b1869-400f-45ed-ac0c-52f68c2ed5bd.mp4', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260418_115655_b4d9cd77-feed-43cd-a198-af78ebdf1f7a.mp4', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4', 'https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_024928_1efd0b0d-6c02-45a8-8847-1030900c4f63.mp4' ]; // Nine beautiful premium solid colors to clearly track the cards const CARD_COLORS = [ '#FF3B30', // Apple Red '#FF9500', // Apple Orange '#FFCC00', // Apple Yellow '#34C759', // Apple Green '#007AFF', // Apple Blue '#5856D6', // Apple Purple '#FF2D55', // Apple Pink '#AF52DE', // Apple Violet '#00C7BE', // Apple Teal ]; // Different card details for each of the cards const CARD_DETAILS = [ { number: '4232 8908 1121 4892', name: 'ZACHARY MERCER', cvv: '382' }, { number: '4154 7831 9904 5124', name: 'SOPHIA MARTINEZ', cvv: '109' }, { number: '5457 4120 7733 9035', name: 'BENJAMIN CARTER', cvv: '764' }, { number: '4441 5567 1223 2468', name: 'EMILY MORRISON', cvv: '491' }, { number: '5375 8891 2234 7713', name: 'JACKSON REID', cvv: '255' }, ]; export default function App() { const cardCount = 5; const cardsRefs = useRef<(HTMLDivElement | null)[]>([]); const frameId = useRef<number>(0); // Continuous scroll progress const progress = useRef<number>(0); // Track mouse coordinates for interactive 3D parallax tilt with inertia damping const mouse = useRef({ x: 0, y: 0, targetX: 0, targetY: 0 }); // Responsive state containing card dimensions const [metrics, setMetrics] = useState({ cardW: 336, cardH: 211, // 1.59 standard credit card ratio }); // Typography metrics to prevent collisions beautifully across all viewports const [fontMetrics, setFontMetrics] = useState({ titleFontSize: '1.5rem', sigFontSize: '2.5rem', descFontSize: '14px', titleGap: '40px', pl: '0px' }); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { // Screen-space cursor offset relative to window center, clamped to [-1.0, 1.0] range const rx = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2); const ry = (e.clientY - window.innerHeight / 2) / (window.innerHeight / 2); mouse.current.targetX = Math.max(-1, Math.min(1, rx)); mouse.current.targetY = Math.max(-1, Math.min(1, ry)); }; const handleMouseLeave = () => { // Return gently to center orientation when mouse focus is lost or moves away mouse.current.targetX = 0; mouse.current.targetY = 0; }; window.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseleave', handleMouseLeave); return () => { window.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('mouseleave', handleMouseLeave); }; }, []); useEffect(() => { const handleResize = () => { const w = window.innerWidth; const h = window.innerHeight; // 1. Calculate Card Metrics (shrink cards if height is small to save vertical space) let cardW = Math.round(w * 0.16 + 130); const heightFactor = Math.min(1.0, Math.max(0.65, h / 850)); cardW = Math.round(cardW * heightFactor); cardW = Math.min(336, Math.max(150, cardW)); const cardH = Math.round(cardW / 1.5925); // Standard credit card ratio setMetrics({ cardW, cardH }); // 2. Calculate Typography Metrics (shrink font sizes aggressively if height or width is small) const isMobile = w < 640; let titleSize = ''; let sigSize = ''; let descSize = ''; let titleGap = '40px'; let plVal = '0px'; if (isMobile) { // Mobile style: centered, text size increased by 30% for high legibility titleSize = 'clamp(1.8rem, 5.2vw + 0.4rem, 2.2rem)'; sigSize = 'clamp(2.86rem, 7.8vw + 0.6rem, 3.5rem)'; descSize = 'clamp(0.72rem, 1.4vw + 0.35rem, 0.95rem)'; titleGap = '24px'; plVal = '0px'; } else { // Desktop / Tablet style: aligned bottom-left // Scale factor depends on width and height to shrink before hitting cards const scale = Math.min(1.0, Math.max(0.48, (w * 0.45 + h * 0.55) / 1300)); titleSize = `${Math.max(1.15, 3.5 * scale).toFixed(3)}rem`; sigSize = `${Math.max(1.5, 4.5 * scale).toFixed(3)}rem`; descSize = `${Math.max(11, 16 * scale).toFixed(1)}px`; titleGap = `${Math.max(16, Math.round(40 * scale))}px`; plVal = `${Math.min(6, Math.max(2.8, 3.5 * scale + 2.2)).toFixed(2)}rem`; } setFontMetrics({ titleFontSize: titleSize, sigFontSize: sigSize, descFontSize: descSize, titleGap, pl: plVal }); }; handleResize(); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); // Compute positions, rotations, and visual rules at 60fps const renderLoop = () => { // Upward flow speed of continuous transition - decreased speed by more than half for slower, premium, and calmer transitions progress.current += 0.0016; // Smoothly interpolate current mouse variables towards their target positions (damping/inertia logic) mouse.current.x += (mouse.current.targetX - mouse.current.x) * 0.08; mouse.current.y += (mouse.current.targetY - mouse.current.y) * 0.08; const cards = cardsRefs.current; const h = window.innerHeight; const { cardH } = metrics; const continuousProgress = progress.current; const roundedIndex = Math.round(continuousProgress); const diffFromRound = continuousProgress - roundedIndex; // ranges between [-0.5, 0.5] // Custom non-linear magnetic step logic // It creates a gorgeous brief "dwell/pause" at front center before accelerating to the next card const easedDiff = Math.sign(diffFromRound) * Math.pow(Math.abs(diffFromRound) * 2, 4.2) / 2; const virtualActiveIndex = roundedIndex + easedDiff; for (let i = 0; i < cardCount; i++) { const card = cards[i]; if (!card) continue; // Solve circular wrapping to get closest representation in [-cardCount/2, cardCount/2] let offset = i - virtualActiveIndex; const halfCount = cardCount / 2; while (offset > halfCount) offset -= cardCount; while (offset < -halfCount) offset += cardCount; const absOffset = Math.abs(offset); const sign = Math.sign(offset); // Allow cards to render completely off-screen smoothly up to offset 3.0. This prevents any clipping or sudden pop-outs. if (absOffset > 3.0) { card.style.visibility = 'hidden'; continue; } else { card.style.visibility = 'visible'; } // Spacing gap between center card and adjacent cards const gap = 36; const peekAmount = -55; // Push the card's edge 55px past the screen boundary to hide a premium portion of it! const D = 1350; // Perspective distance let y = 0; let z = 0; let rot = 0; if (absOffset <= 1) { // Smoothstep interpolation from 0 to 1 (Center card to first adjacent card) const t = absOffset; const easedT = t * t * (3 - 2 * t); // Y moves from 0 to (cardH + gap) const targetY = cardH + gap; y = -sign * (easedT * targetY); // Z moves from 400 (center) to 220 (adjacent) z = 400 + easedT * (220 - 400); // Rotation moves from 0 to 132 degrees (beautiful tilted back face) rot = easedT * 132; } else if (absOffset <= 2) { // Smoothstep interpolation from 1 to 2 (Adjacent card to peeking screen-edge card) const t = absOffset - 1; const easedT = t * t * (3 - 2 * t); const yStart = cardH + gap; const zStart = 220; const rotStart = 132; const zEnd = -60; const rotEnd = 175; // Perspective-aware formula for exact edge alignment at the screen boundary (peekAmount = 26px inside) const sEnd = D / (D - zEnd); const yEnd = (h / 2 - peekAmount) / sEnd - (cardH / 2); const currentY = yStart + easedT * (yEnd - yStart); y = -sign * currentY; z = zStart + easedT * (zEnd - zStart); rot = rotStart + easedT * (rotEnd - rotStart); } else { // Smoothstep interpolation from 2 to 3 (Peeking card to completely off-screen card) const t = Math.min(absOffset - 2, 1); const easedT = t * t * (3 - 2 * t); const zStart = -60; const rotStart = 175; const zEnd3 = -250; const rotEnd3 = 195; const sEnd2 = D / (D - zStart); const yEnd2 = (h / 2 - peekAmount) / sEnd2 - (cardH / 2); // Calculate yEnd3 dynamically so that the card's edge is completely 100px past the screen boundary const sEnd3 = D / (D - zEnd3); const yEnd3 = (h / 2 + 100) / sEnd3 + (cardH / 2); const currentY = yEnd2 + easedT * (yEnd3 - yEnd2); y = -sign * currentY; z = zStart + easedT * (zEnd3 - zStart); rot = rotStart + easedT * (rotEnd3 - rotStart); } const localCardRotation = -sign * rot; // Determine how close this card is to the exact center (1.0 = center, 0.0 = adjacent/offscreen) const centerFactor = Math.max(0, 1 - absOffset); // Vertical tilt (around X-axis) and horizontal tilt (around Y-axis) driven by mouse coordinates const maxTiltY = 15; // Max angle tilt left-to-right (degrees) const maxTiltX = 12; // Max angle tilt up-and-down (degrees) const activeTiltX = -mouse.current.y * maxTiltX * centerFactor; const activeTiltY = mouse.current.x * maxTiltY * centerFactor; const totalRotX = localCardRotation + activeTiltX; const totalRotY = activeTiltY; // Depth z-index layer card.style.zIndex = Math.round(z).toString(); card.style.opacity = '1'; // Inject translation matrix with the premium -3deg tilt combined with dynamic mouse-interactive 3D tilt card.style.transform = `translateY(${y.toFixed(2)}px) translateZ(${z.toFixed(2)}px) rotateX(${totalRotX.toFixed(2)}deg) rotateY(${totalRotY.toFixed(2)}deg) rotateZ(-3deg)`; } }; useEffect(() => { const tick = () => { renderLoop(); frameId.current = requestAnimationFrame(tick); }; frameId.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(frameId.current); }, [metrics]); // Slices for 3D volumetric depth with 30% reduced thickness // Span from -1.47px to 1.47px creates an extremely premium real 3D volume feel const thicknessLayers = [-1.47, -0.73, 0, 0.73, 1.47]; return ( <div className="absolute inset-0 bg-[#000000] text-white flex items-center justify-center overflow-hidden select-none"> {/* 3D perspective camera space */} <div className="relative w-full h-full flex items-center justify-center pointer-events-none" style={{ perspective: '1350px', }} > {/* Dynamic 3D coordinate viewport */} <div className="absolute" style={{ width: `${metrics.cardW}px`, height: `${metrics.cardH}px`, transformStyle: 'preserve-3d', }} > {Array.from({ length: cardCount }).map((_, i) => ( <div key={i} ref={(el) => { cardsRefs.current[i] = el; }} className="absolute inset-0" style={{ width: `${metrics.cardW}px`, height: `${metrics.cardH}px`, transformStyle: 'preserve-3d', backfaceVisibility: 'visible', }} > {/* Build physical 3D volumetric thickness by dense parallel layering */} {thicknessLayers.map((zOffset, layerIdx) => { const isFrontFace = layerIdx === thicknessLayers.length - 1; const isBackFace = layerIdx === 0; const videoSrc = CARD_VIDEOS[i % CARD_VIDEOS.length]; const baseBgColor = '#0f0f0f'; // Middle structural slice if (!isFrontFace && !isBackFace) { return ( <div key={layerIdx} className="absolute inset-0 rounded-[16px] border border-[#808080] pointer-events-none overflow-hidden" style={{ backgroundColor: '#808080', transform: `translateZ(${zOffset}px)`, }} /> ); } // Front face slice if (isFrontFace) { const frontBorderStyle = "border border-white/15"; return ( <div key={layerIdx} className={`absolute inset-0 rounded-[16px] ${frontBorderStyle} pointer-events-none overflow-hidden`} style={{ backgroundColor: baseBgColor, transform: `translateZ(${zOffset}px)`, backfaceVisibility: 'hidden', boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.15)', }} > <video src={videoSrc} autoPlay loop muted playsInline className="absolute inset-0 w-full h-full object-cover rounded-[16px]" /> <div className="absolute inset-0 p-5 sm:p-6 text-white h-full w-full font-sans z-10 bg-black/15"> {/* Golden/Silver Metallic Contact Chip - positioned mid-left (vertically centered on the card) with custom user vectors */} <div className="absolute left-5 sm:left-6 top-1/2 -translate-y-1/2"> <svg className="w-6 h-6 sm:w-[29px] sm:h-[29px]" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg" > <path fillRule="evenodd" clipRule="evenodd" d="M20 8H40V14C40.0016 14.5299 40.2128 15.0377 40.5875 15.4125C40.9623 15.7872 41.4701 15.9984 42 16H59V24H42C41.4701 24.0016 40.9623 24.2128 40.5875 24.5875C40.2128 24.9623 40.0016 25.4701 40 26V52H20V8ZM18 8H8.00039C4.47435 8 1.56576 10.6083 1.08 14H18V8ZM1 16V24V26V34V36V44H18V36H1V34H18V26H1V24H18V16H1ZM1.08 46C1.56576 49.3917 4.47435 52 8.00039 52H18V46H1.08ZM42 14V8H52.0004C55.5264 8 58.4342 10.6084 58.92 14H42ZM59 26H42V34H59V26ZM59 36H42V44H59V36ZM52.0004 52H42V46H58.92C58.4342 49.3916 55.5264 52 52.0004 52Z" fill={`url(#paint0_linear_1032_4_${i})`} /> <path fillRule="evenodd" clipRule="evenodd" d="M1.02453 14.4146C1.00608 14.609 0.998061 14.8045 1.00039 15C1.00039 14.8028 1.00854 14.6076 1.02453 14.4146ZM1.00039 45C0.998061 45.1955 1.00608 45.391 1.02453 45.5854C1.00854 45.3924 1.00039 45.1972 1.00039 45ZM59.0004 15C59.0026 14.8176 58.9955 14.6353 58.9794 14.4538C58.9933 14.634 59.0004 14.8162 59.0004 15ZM59.0004 45C59.0004 45.1838 58.9933 45.366 58.9794 45.5462C58.9955 45.3647 59.0026 45.1824 59.0004 45Z" fill="#B7B7B7" /> <defs> <linearGradient id={`paint0_linear_1032_4_${i}`} x1="30" y1="8" x2="30" y2="52" gradientUnits="userSpaceOnUse" > <stop stopColor="white" /> <stop offset="1" stopColor="#999999" /> </linearGradient> </defs> </svg> </div> {/* JWT Brand Logo - positioned at top-right */} <div className="absolute right-5 sm:right-6 top-5 sm:top-6 opacity-95"> <svg className="w-[84px] xs:w-[101px] sm:w-[120px] h-auto" viewBox="0 0 341 49" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M8.75294 47.68C6.10761 47.68 4.10227 47.04 2.73694 45.76C1.41427 44.48 0.582275 42.7733 0.240941 40.64C-0.100392 38.464 -0.0790588 36.0747 0.304941 33.472C0.731608 30.8267 1.37161 28.1813 2.22494 25.536C3.07827 22.848 3.99561 20.3307 4.97694 17.984C6.00094 15.5947 6.93961 13.5893 7.79294 11.968C8.26227 11.072 8.88094 10.56 9.64894 10.432C10.4169 10.2613 11.1423 10.368 11.8249 10.752C12.5503 11.136 13.0623 11.6907 13.3609 12.416C13.7023 13.1413 13.6383 13.9307 13.1689 14.784C11.2916 18.368 9.79828 21.7813 8.68894 25.024C7.57961 28.2667 6.85427 31.1467 6.51294 33.664C6.21427 36.1387 6.23561 38.1013 6.57694 39.552C6.96094 40.96 7.68628 41.664 8.75294 41.664C9.73428 41.664 10.8009 41.3013 11.9529 40.576C13.1049 39.8507 14.3423 38.5493 15.6649 36.672C17.0303 34.6667 18.3529 32.064 19.6329 28.864C20.9556 25.6213 22.1289 21.8667 23.1529 17.6C23.4089 16.6187 23.8783 15.9573 24.5609 15.616C25.2863 15.2747 26.0329 15.2107 26.8009 15.424C27.5689 15.6373 28.1876 16.064 28.6569 16.704C29.1263 17.3013 29.2543 18.0693 29.0409 19.008C27.9316 23.616 27.3769 27.5627 27.3769 30.848C27.4196 34.1333 27.7609 36.5227 28.4009 38.016C28.8703 39.0827 29.4249 39.8507 30.0649 40.32C30.7476 40.7893 31.4943 41.024 32.3049 41.024C33.1156 41.024 33.9689 40.7253 34.8649 40.128C35.8036 39.488 36.7209 38.4 37.6169 36.864C38.5556 35.328 39.3876 33.216 40.1129 30.528C37.6809 28.48 35.6756 25.7707 34.0969 22.4C32.5183 19.0293 31.7289 15.168 31.7289 10.816C31.7289 8.93867 31.9423 7.21067 32.3689 5.632C32.7956 4.05333 33.5209 2.79467 34.5449 1.856C35.5689 0.874666 36.9769 0.383999 38.7689 0.383999C40.9449 0.383999 42.7156 1.17333 44.0809 2.752C45.4463 4.288 46.4489 6.37867 47.0889 9.024C47.7289 11.6267 48.0063 14.5493 47.9209 17.792C47.8783 21.0347 47.5369 24.3413 46.8969 27.712C47.5369 28.0107 48.2196 28.2453 48.9449 28.416C49.7129 28.5867 50.4809 28.672 51.2489 28.672C52.9983 28.672 54.7903 28.416 56.6249 27.904C58.5023 27.3493 60.1023 26.6453 61.4249 25.792C62.2783 25.2373 63.0676 25.088 63.7929 25.344C64.5183 25.5573 65.0943 26.0053 65.521 26.688C65.9476 27.328 66.1183 28.0533 66.0329 28.864C65.9903 29.632 65.5636 30.272 64.7529 30.784C62.8756 32.0213 60.7423 33.0027 58.3529 33.728C56.0063 34.4533 53.6383 34.816 51.2489 34.816C49.2863 34.816 47.3449 34.4533 45.4249 33.728C44.1876 37.7387 42.5023 40.96 40.3689 43.392C38.2356 45.824 35.5476 47.04 32.3049 47.04C30.2569 47.04 28.3583 46.4427 26.6089 45.248C24.9023 44.0107 23.6223 42.4107 22.7689 40.448C22.5983 40.064 22.4276 39.6587 22.2569 39.232C22.1289 38.8053 22.0223 38.4 21.9369 38.016C21.7236 38.4 21.4889 38.7627 21.2329 39.104C21.0196 39.4453 20.7849 39.7867 20.5289 40.128C18.9503 42.3467 17.1796 44.16 15.2169 45.568C13.2969 46.976 11.1423 47.68 8.75294 47.68ZM41.5849 23.104C42.0116 19.9893 42.1183 17.3653 41.9049 15.232C41.6916 13.0987 41.3503 11.392 40.8809 10.112C40.4116 8.78933 39.9423 7.85067 39.4729 7.296C39.0463 6.69867 38.8116 6.4 38.7689 6.4C38.7689 6.4 38.6836 6.42133 38.5129 6.464C38.3849 6.464 38.2356 6.76267 38.0649 7.36C37.9369 7.91467 37.8729 9.06667 37.8729 10.816C37.8729 12.992 38.1929 15.168 38.8329 17.344C39.4729 19.4773 40.3903 21.3973 41.5849 23.104Z" 439: fill="white" 440: /> 441: <path 442: d="M91.5429 48.768C89.5376 48.768 87.9163 48.3627 86.6789 47.552C85.4843 46.784 84.6096 45.76 84.0549 44.48C83.5003 43.1573 83.2016 41.7493 83.1589 40.256C81.3243 42.4747 79.2763 44.224 77.0149 45.504C74.7963 46.7413 72.4709 47.36 70.0389 47.36C68.1189 47.36 66.3056 46.912 64.5989 46.016C62.8923 45.0773 61.5056 43.6907 60.4389 41.856C59.4149 39.9787 58.9029 37.6107 58.9029 34.752C58.9029 31.7653 59.5216 28.8427 60.7589 25.984C62.0389 23.0827 63.7669 20.48 65.9429 18.176C68.1616 15.8293 70.6789 13.9733 73.4949 12.608C76.3536 11.2 79.3403 10.496 82.4549 10.496C84.5029 10.496 86.5296 10.752 88.5349 11.264C90.5403 11.776 92.2896 12.5227 93.7829 13.504C94.6363 14.0587 95.1056 14.72 95.1909 15.488C95.2763 16.256 95.0843 16.9813 94.6149 17.664C94.1883 18.304 93.6123 18.752 92.8869 19.008C92.1616 19.264 91.3936 19.136 90.5829 18.624C89.7723 18.112 88.5563 17.6427 86.9349 17.216C85.3563 16.7467 83.8629 16.512 82.4549 16.512C80.0229 16.512 77.7616 17.0667 75.6709 18.176C73.5803 19.2853 71.7243 20.736 70.1029 22.528C68.5243 24.32 67.2869 26.2827 66.3909 28.416C65.4949 30.5493 65.0469 32.6613 65.0469 34.752C65.0469 35.8187 65.1749 36.864 65.4309 37.888C65.7296 38.8693 66.2416 39.7013 66.9669 40.384C67.6923 41.024 68.7163 41.344 70.0389 41.344C71.3189 41.344 72.7483 40.9173 74.3269 40.064C75.9483 39.168 77.4843 37.76 78.9349 35.84C79.8309 34.6453 80.7696 33.216 81.7509 31.552C82.7323 29.8453 83.6283 28.16 84.4389 26.496C85.2923 24.7893 85.9749 23.3387 86.4869 22.144C86.8283 21.2907 87.3403 20.736 88.0229 20.48C88.7483 20.224 89.4736 20.224 90.1989 20.48C90.9243 20.6933 91.5003 21.0987 91.9269 21.696C92.3536 22.2933 92.4816 23.04 92.3109 23.936L89.4949 37.632C89.1963 39.1253 89.1963 40.2347 89.4949 40.96C89.7936 41.6853 90.1776 42.176 90.6469 42.432C91.1163 42.6453 91.4149 42.752 91.5429 42.752C92.2256 42.752 93.1003 42.432 94.1669 41.792C95.2336 41.1093 96.5563 39.8507 98.1349 38.016C99.4576 36.5227 100.823 34.7733 102.231 32.768C103.682 30.72 105.068 28.6293 106.391 26.496C107.756 24.32 108.972 22.272 110.039 20.352C111.148 18.3893 112.023 16.768 112.663 15.488C113.09 14.592 113.687 14.0587 114.455 13.888C115.223 13.7173 115.948 13.824 116.631 14.208C117.356 14.5493 117.868 15.0827 118.167 15.808C118.508 16.4907 118.466 17.28 118.039 18.176C117.356 19.584 116.439 21.2907 115.287 23.296C114.178 25.3013 112.919 27.4347 111.511 29.696C110.146 31.9147 108.695 34.0907 107.159 36.224C105.666 38.3573 104.194 40.2773 102.743 41.984C101.036 43.9467 99.2869 45.568 97.4949 46.848C95.7456 48.128 93.7616 48.768 91.5429 48.768Z" 443: fill="white" 444: /> 445: <path 446: d="M118.45 48.448C115.549 48.448 113.351 47.6373 111.858 46.016C110.407 44.352 109.533 42.0267 109.234 39.04C108.978 36.0533 109.17 32.5547 109.81 28.544C110.493 24.5333 111.517 20.16 112.882 15.424C113.181 14.4427 113.693 13.8027 114.418 13.504C115.143 13.1627 115.89 13.12 116.658 13.376C117.426 13.632 118.023 14.08 118.45 14.72C118.919 15.36 119.026 16.1493 118.77 17.088C117.191 22.464 116.146 26.8373 115.634 30.208C115.165 33.536 115.037 36.096 115.25 37.888C115.463 39.6373 115.869 40.832 116.466 41.472C117.106 42.112 117.767 42.432 118.45 42.432C119.303 42.432 120.413 41.9413 121.778 40.96C123.143 39.936 124.594 38.5067 126.13 36.672C127.666 34.8373 129.138 32.7253 130.546 30.336C129.778 27.904 129.394 25.152 129.394 22.08C129.394 20.2027 129.501 18.176 129.714 16C129.97 13.7813 130.397 11.6907 130.994 9.728C131.634 7.76533 132.509 6.18667 133.618 4.992C134.77 3.79733 136.242 3.264 138.034 3.392C139.485 3.52 140.573 4.032 141.298 4.928C142.066 5.824 142.535 6.95467 142.706 8.32C142.919 9.68533 142.941 11.1573 142.77 12.736C142.599 14.272 142.343 15.808 142.002 17.344C141.661 18.8373 141.319 20.16 140.978 21.312C139.954 24.8107 138.781 28.032 137.458 30.976C138.61 33.024 140.061 34.432 141.81 35.2C143.559 35.968 145.33 36.2453 147.122 36.032C148.914 35.776 150.45 35.2427 151.73 34.432C152.583 33.8773 153.373 33.728 154.098 33.984C154.823 34.1973 155.399 34.6453 155.826 35.328C156.295 35.968 156.487 36.6933 156.402 37.504C156.317 38.272 155.869 38.912 155.058 39.424C152.967 40.7893 150.642 41.6427 148.082 41.984C145.565 42.3253 143.09 42.0907 140.658 41.28C138.226 40.4693 136.093 39.04 134.258 36.992C132.039 40.576 129.586 43.392 126.898 45.44C124.253 47.4453 121.437 48.448 118.45 48.448ZM135.666 18.112C136.391 15.5947 136.882 13.7173 137.138 12.48C137.394 11.2427 137.522 10.432 137.522 10.048C137.522 9.62133 137.522 9.408 137.522 9.408C137.522 9.408 137.394 9.68533 137.138 10.24C136.882 10.752 136.605 11.648 136.306 12.928C136.007 14.1653 135.794 15.8933 135.666 18.112Z" 447: fill="white" 448: /> 449: <path 450: d="M164.834 48.512C161.762 48.512 159.117 47.808 156.898 46.4C154.68 44.9493 152.973 43.008 151.778 40.576C150.584 38.1013 149.986 35.328 149.986 32.256C149.986 29.2267 150.562 26.3893 151.714 23.744C152.866 21.056 154.36 18.7093 156.194 16.704C158.072 14.656 160.056 13.0773 162.146 11.968C164.28 10.816 166.306 10.24 168.226 10.24C169.762 10.24 171.17 10.5387 172.45 11.136C173.73 11.7333 174.754 12.5867 175.522 13.696C176.333 14.8053 176.738 16.1493 176.738 17.728C176.738 20.0747 176.034 22.1227 174.626 23.872C173.261 25.5787 171.384 27.4773 168.994 29.568C167.202 31.1467 165.325 32.64 163.362 34.048C161.4 35.456 159.352 36.8427 157.218 38.208C158.584 41.0667 161.122 42.496 164.834 42.496C165.858 42.496 166.946 42.3467 168.098 42.048C169.25 41.7067 170.552 41.024 172.002 40C173.453 38.976 175.16 37.376 177.122 35.2C177.762 34.4747 178.466 34.1333 179.234 34.176C180.045 34.2187 180.749 34.5173 181.346 35.072C181.944 35.584 182.285 36.2453 182.37 37.056C182.498 37.824 182.242 38.5707 181.602 39.296C178.445 42.7947 175.458 45.2053 172.642 46.528C169.869 47.8507 167.266 48.512 164.834 48.512ZM156.13 31.744C157.752 30.6773 159.309 29.6107 160.802 28.544C162.296 27.4347 163.704 26.2827 165.026 25.088C167.245 23.1253 168.738 21.504 169.506 20.224C170.317 18.9013 170.722 18.0693 170.722 17.728C170.722 17.5573 170.594 17.28 170.338 16.896C170.082 16.4693 169.378 16.256 168.226 16.256C167.16 16.256 165.944 16.6613 164.578 17.472C163.256 18.24 161.954 19.328 160.674 20.736C159.437 22.144 158.392 23.7867 157.538 25.664C156.685 27.5413 156.216 29.568 156.13 31.744Z" 451: fill="white" 452: /> 453: <path 454: d="M201.487 13.248C204.773 13.248 207.717 13.9733 210.319 15.424C212.922 16.8747 214.949 18.9013 216.399 21.504C217.893 24.1067 218.639 27.1147 218.639 30.528C218.639 33.9413 217.893 36.9707 216.399 39.616C214.949 42.2187 212.922 44.2453 210.319 45.696C207.717 47.1467 204.773 47.872 201.487 47.872C198.97 47.872 196.666 47.3813 194.575 46.4C192.485 45.4187 190.757 43.9893 189.391 42.112V47.488H183.503V0H189.647V18.688C191.013 16.896 192.719 15.552 194.767 14.656C196.815 13.7173 199.055 13.248 201.487 13.248ZM200.975 42.496C203.151 42.496 205.093 42.0053 206.799 41.024C208.549 40 209.914 38.592 210.895 36.8C211.919 34.9653 212.431 32.8747 212.431 30.528C212.431 28.1813 211.919 26.112 210.895 24.32C209.914 22.4853 208.549 21.0773 206.799 20.096C205.093 19.1147 203.151 18.624 200.975 18.624C198.842 18.624 196.901 19.1147 195.151 20.096C193.402 21.0773 192.037 22.4853 191.055 24.32C190.074 26.112 189.583 28.1813 189.583 30.528C189.583 32.8747 190.074 34.9653 191.055 36.8C192.037 38.592 193.402 40 195.151 41.024C196.901 42.0053 198.842 42.496 200.975 42.496Z" 455: fill="white" 456: /> 457: <path 458: d="M256.568 13.568V47.488H250.68V42.112C249.315 43.9893 247.587 45.4187 245.496 46.4C243.406 47.3813 241.102 47.872 238.584 47.872C235.299 47.872 232.355 47.1467 229.752 45.696C227.15 44.2453 225.102 42.2187 223.608 39.616C222.158 36.9707 221.432 33.9413 221.432 30.528C221.432 27.1147 222.158 24.1067 223.608 21.504C225.102 18.9013 227.15 16.8747 229.752 15.424C232.355 13.9733 235.299 13.248 238.584 13.248C241.016 13.248 243.256 13.7173 245.304 14.656C247.352 15.552 249.059 16.896 250.424 18.688V13.568H256.568ZM239.096 42.496C241.23 42.496 243.171 42.0053 244.92 41.024C246.67 40 248.035 38.592 249.016 36.8C249.998 34.9653 250.488 32.8747 250.488 30.528C250.488 28.1813 249.998 26.112 249.016 24.32C248.035 22.4853 246.67 21.0773 244.92 20.096C243.171 19.1147 241.23 18.624 239.096 18.624C236.92 18.624 234.958 19.1147 233.208 20.096C231.502 21.0773 230.136 22.4853 229.112 24.32C228.131 26.112 227.64 28.1813 227.64 30.528C227.64 32.8747 228.131 34.9653 229.112 36.8C230.136 38.592 231.502 40 233.208 41.024C234.958 42.0053 236.92 42.496 239.096 42.496Z" 459: fill="white" 460: /> 461: <path 462: d="M283.745 13.248C288.055 13.248 291.468 14.5067 293.985 17.024C296.545 19.4987 297.825 23.1467 297.825 27.968V47.488H291.681V28.672C291.681 25.3867 290.892 22.912 289.313 21.248C287.735 19.584 285.473 18.752 282.529 18.752C279.201 18.752 276.577 19.7333 274.657 21.696C272.737 23.616 271.777 26.3893 271.777 30.016V47.488H265.633V13.568H271.521V18.688C272.759 16.9387 274.423 15.5947 276.513 14.656C278.647 13.7173 281.057 13.248 283.745 13.248ZM319.82 31.68L312.78 38.208V47.488H306.636V0H312.78V30.464L331.276 13.568H338.7L324.428 27.584L340.108 47.488H332.556L319.82 31.68Z" 463: fill="white" 464: /> 465: </svg> 466: </div> 467: 468: {/* Double intersecting circle Brand Logo - bottom right corner */} 469: <div className="absolute right-5 sm:right-6 bottom-5 sm:bottom-6 flex -space-x-3 items-center opacity-90"> 470: <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/20 backdrop-blur-[1px] border border-white/10" /> 471: <div className="w-5 h-5 sm:w-6 sm:h-6 rounded-full bg-white/35 backdrop-blur-[1px] border border-white/10" /> 472: </div> 473: </div> 474: </div> 475: ); 476: } 477: 478: // Back face slice 479: if (isBackFace) { 480: const backBorderStyle = "border border-white/15"; 481: const details = CARD_DETAILS[i % CARD_DETAILS.length]; 482: return ( 483: <div 484: key={layerIdx} 485: className={`absolute inset-0 rounded-[16px] ${backBorderStyle} pointer-events-none overflow-hidden`} 486: style={{ 487: backgroundColor: baseBgColor, 488: transform: `translateZ(${zOffset}px) rotateX(180deg)`, 489: backfaceVisibility: 'hidden', 490: boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.15)', 491: }} 492: > 493: {/* Render Video with premium 16px blur on the back face of the card */} 494: <div className="absolute inset-0 pointer-events-none" style={{ filter: 'blur(16px)', transform: 'scale(1.15)' }}> 495: <video 496: src={videoSrc} 497: autoPlay 498: loop 499: muted 500: playsInline 501: className="absolute inset-0 w-full h-full object-cover" 502: /> 503: </div> 504: 505: {/* Premium Real Magnetic stripe */} 506: <div className="absolute left-0 right-0 top-4 sm:top-5 h-7 sm:h-9 bg-black/85 backdrop-blur-md z-10" /> 507: 508: {/* Card holder info and details on the bottom-left */} 509: <div 510: className="absolute left-4 sm:left-6 bottom-4 sm:bottom-5 z-20 flex flex-col gap-0.5 sm:gap-1 text-left" 511: style={{ fontFamily: '"JetBrains Mono", monospace' }} 512: > 513: {/* Card Number */} 514: <div className="font-mono text-[10px] sm:text-[12px] font-medium tracking-[0.14em] text-white select-none"> 515: {details.number} 516: </div> 517: {/* Owner & CVV */} 518: <div className="font-mono text-[7px] sm:text-[9px] font-medium text-white/70 tracking-wide flex items-center gap-2 select-none"> 519: <span className="uppercase">{details.name}</span> 520: <span className="text-white/40 font-light">•</span> 521: <span>CVV: {details.cvv}</span> 522: </div> 523: </div> 524: </div> 525: ); 526: } 527: 528: return null; 529: })} 530: </div> 531: ))} 532: </div> 533: </div> 534: </div> 535: ); 536: }35:Tf85,Create a "Stellar.ai" landing page hero section using React, Tailwind CSS, and Lucide React icons. Use the Inter font (imported from Google Fonts). The page has a white background (bg-white), max-width max-w-7xl, and is centered with mx-auto. Font: Import Inter (weights 400, 500, 600, 700) from Google Fonts. Set font-family: 'Inter', sans-serif on the body. Custom CSS animations (in index.css): @keyframes fadeInUp -- from opacity: 0; transform: translateY(30px) to opacity: 1; transform: translateY(0). Class .animate-fade-in-up uses this with 0.6s ease-out forwards. @keyframes fadeInOverlay -- from opacity: 0 to opacity: 1. Class .animate-fade-in-overlay uses this with 0.4s ease-out forwards. @keyframes fadeInDialog -- from opacity: 0 to opacity: 1. Class .animate-slide-up-overlay uses this with 0.5s ease-out forwards and has transform: translate(-50%, -50%). Every major section uses .animate-fade-in-up with staggered animationDelay inline styles (starting at 0.1s and incrementing by 0.1s). Each element starts with opacity: 0 inline so the animation fills it to visible. Tailwind config: Default config with no custom theme extensions. Uses standard content paths. NAVIGATION (animationDelay: 0.1s): px-6 py-4 flex items-center justify-between max-w-7xl mx-auto Left: Lucide Star icon (w-5 h-5, fill-black) + "Stellar.ai" text (text-lg font-semibold) Center (hidden on mobile, hidden md:flex items-center gap-8): "Solutions" with ChevronDown, "For Teams" with ChevronDown, "About Us", "Learn Hub" -- all text-sm text-gray-700 hover:text-black Right: "Login" link (text-sm text-gray-700) + "Get started free" button (bg-black text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-gray-800 transition-colors) HERO SECTION (px-6 pt-24 pb-32 max-w-7xl mx-auto text-center): Reviews Badge (delay: 0.2s): inline-flex items-center gap-2 mb-8. Contains a bordered square (w-6 h-6 border border-gray-300 rounded) with a filled Star icon inside, plus "4.9 rating from 18.3K+ users" (text-sm font-medium text-black). Main Heading (delay: 0.3s): text-6xl md:text-7xl lg:text-[80px] font-normal leading-[1.1] tracking-tight mb-5. First line: "Work Smarter. Move Faster." Second line: "AI Powers You Up." with gradient text (bg-gradient-to-r from-black via-gray-500 to-gray-400 bg-clip-text text-transparent). Subheading (delay: 0.4s): text-lg md:text-xl text-gray-600 mb-8 max-w-2xl mx-auto. Text: "Intelligent automation syncs with the tools you love to streamline tasks, boost output, and save time." CTA Button (delay: 0.5s): bg-black text-white px-8 py-3 rounded-full text-base font-medium hover:bg-gray-800 transition-colors mb-12. Text: "Begin Free Trial". Tab Bar (delay: 0.6s): Centered bg-gray-100 rounded-lg p-1 container. Mobile (md:hidden): 2x2 grid with 4 buttons: Analyse (BarChart3), Train (BookOpen), Testing (Users), Deploy (Rocket). Active: bg-white text-black shadow-sm. Inactive: text-gray-600. Desktop (hidden md:flex): Same 4 buttons in row with vertical dividers (w-px h-5 bg-gray-300). Tabs auto-cycle every 4s using setInterval. State: useState('analyse'). Video + Overlay Section (delay: 0.7s): Container: relative rounded-3xl overflow-hidden h-[400px] md:h-[500px] Video: src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_165750_358b1e72-c921-48b7-aaac-f200994f32fb.mp4", autoPlay, loop, muted, playsInline, w-full h-full object-cover. 4 Conditional Overlays per tab with animate-fade-in-overlay outer and animate-slide-up-overlay inner card: a. Analyse: "Set Up Your AI Workspace" wizard with purple progress bar at 25%, 4 steps b. Train: "AI Model Training" with orange progress at 67%, 4 metrics c. Testing: "Test Suite Results" with green success, 127/127 tests d. Deploy: "Deploy to Production" with 4 checklist items, Deploy Now button Company Logos (delay: 0.8s): mt-24 flex with INTERSCOPE, SPOTIFY, Nexera (dot grid), M3 (serif italic), LAURA COLE (LC circle), vertex (dots)36:T23ce,Build a single-file HTML page with embedded CSS that recreates a premium dark-mode features section with three glassmorphic gradient cards. Match every specification below exactly. Page Setup DOCTYPE & meta: Standard HTML5 with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Title: Community Page — Test 3. Font: Load DM Sans from Google Fonts with this exact URL: https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap Base tag: Include <base target="_blank"> in the head so all links open in new tabs. Global Styles Apply universal box-sizing reset (*, *::before, *::after) with box-sizing: border-box; margin: 0; padding: 0. Body: Font: 'DM Sans', sans-serif Background color: #050505 (near black) Background image: dual linear-gradients creating a 60×60px grid of faint white lines: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) background-size: 60px 60px, background-position: top center Text color: #2d3148, min-height: 100vh, padding 48px 24px Section Structure <section class="features-section"> <div class="features-wrapper"> <div class="features-header">...</div> <div class="features-cards">[3 cards]</div> <div class="features-tags">[3 tags]</div> </div> </section> .features-section: padding 0 0 48px. .features-wrapper: max-width: 1100px, centered with margin: 0 auto, padding 60px 48px 40px, position: relative, overflow: hidden. Header .features-header: margin-bottom: 40px, position: relative, z-index: 1. <h2> with text How We Keep You Ahead® (use ® for the registered symbol). Font size 34px, weight 700, color #ffffff, margin-bottom: 12px, line-height: 1.2, letter-spacing: -0.01em. <p> with text: From quick daily updates to deep expert insights, we give you every advantage in the AI revolution. Font size 15px, color rgba(255, 255, 255, 0.55), line-height: 1.6, max-width: 380px, margin-bottom: 16px. <span class="features-subline"> with text: Here's how we deliver on that promise every day. (use ’ for the curly apostrophe). Font size 14px, color rgba(255, 255, 255, 0.35), weight 500. Cards Grid .features-cards: CSS Grid with grid-template-columns: repeat(3, 1fr), gap: 20px, margin-bottom: 40px, position: relative, z-index: 1. Card Structure (3-layer system, but only 2 are rendered) Each card uses this nested structure: <div class="feat-card [orange|blue|green]"> <div class="feat-card-main"> <div class="feat-icon">[svg]</div> <div class="feat-body"> <div class="feat-title">...</div> <div class="feat-desc">...</div> <a class="feat-link">...</a> </div> </div> </div> .feat-card: position: relative, min-height: 320px, flex column, transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1). On hover: transform: translateY(-4px) (lifts up 4px). .feat-card-main: This is the visible card body. position: relative, z-index: 1, flex: 1, border-radius: 24px, padding 28px, flex column with gap: 16px, min-height: 290px, overflow: hidden. Hide its ::before and ::after pseudo-elements with display: none. Card Color Variants All three variants share an inset bottom glow: box-shadow: inset 0 -4px 15px -2px rgba(255, 255, 255, 0.9) and border: none. The backgrounds layer a top-left radial glow over a vertical 5-stop gradient that fades from near-black at top to white at the very bottom. Orange (.feat-card.orange .feat-card-main): cssbackground: radial-gradient(circle at 10% 10%, #d9511b50 0%, transparent 40%), linear-gradient(180deg, #180D0B 0%, #180D0B 40%, #CF451E 80%, #e9d551 96%, #FFFFFF 100%); Blue (.feat-card.blue .feat-card-main): cssbackground: radial-gradient(circle at 10% 10%, rgba(80, 150, 255, 0.30) 0%, transparent 40%), linear-gradient(180deg, #0B0F17 0%, #0B0F17 40%, #4663BF 80%, #a1ccf7 96%, #FFFFFF 100%); Green (.feat-card.green .feat-card-main): cssbackground: radial-gradient(circle at 10% 10%, rgba(50, 200, 110, 0.30) 0%, transparent 40%), linear-gradient(180deg, #0B0B12 0%, #0B0B12 40%, #38D26B 80%, #aaf8cd 96%, #FFFFFF 100%); Icon Mini-Card .feat-icon: 44px × 44px, border-radius: 12px, flex-centered, flex-shrink: 0, margin-bottom: 6px, position: relative, z-index: 2, overflow: hidden. .feat-icon::before: Decorative top-left glow blob. position: absolute, top: -10px, left: -10px, 32px × 32px, border-radius: 50%, pointer-events: none, z-index: 0, opacity: 0.65. Per-color icon styling: Orange icon: Background: linear-gradient(145deg, rgba(40, 28, 18, 0.9) 0%, rgba(14, 12, 10, 0.98) 100%) Border: 1px solid rgba(232, 120, 40, 0.22) Box-shadow: 0 0 12px rgba(232, 76, 10, 0.12), inset 0 1px 0 rgba(255, 200, 150, 0.08) ::before background: radial-gradient(circle, rgba(255, 100, 20, 0.55) 0%, transparent 70%) Blue icon: Background: linear-gradient(145deg, rgba(20, 25, 45, 0.9) 0%, rgba(10, 12, 16, 0.98) 100%) Border: 1px solid rgba(80, 130, 255, 0.22) Box-shadow: 0 0 12px rgba(42, 106, 238, 0.12), inset 0 1px 0 rgba(180, 210, 255, 0.08) ::before background: radial-gradient(circle, rgba(60, 120, 255, 0.55) 0%, transparent 70%) Green icon: Background: linear-gradient(145deg, rgba(18, 35, 25, 0.9) 0%, rgba(10, 14, 12, 0.98) 100%) Border: 1px solid rgba(50, 200, 110, 0.22) Box-shadow: 0 0 12px rgba(18, 192, 104, 0.12), inset 0 1px 0 rgba(180, 255, 220, 0.08) ::before background: radial-gradient(circle, rgba(40, 220, 120, 0.55) 0%, transparent 70%) SVG inside icon: 20px × 20px, fill: none, stroke: rgba(255, 255, 255, 0.88), stroke-width: 2, stroke-linecap: round, stroke-linejoin: round, position: relative, z-index: 1. Card Body Text .feat-body: flex: 1, flex column with gap: 10px, position: relative, z-index: 2. .feat-title: DM Sans, 22px, weight 700, white, line-height: 1.3. .feat-desc: 14px, color rgba(255, 255, 255, 0.50), line-height: 1.65. .feat-link: 13.5px, weight 700, white, no underline, inline-flex with gap: 6px, margin-top: 4px. Transition: gap 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s. On hover: gap: 10px (arrow slides right) and opacity: 0.85. Three Cards — Exact Content Card 1 (orange): Document/lines icon — SVG with viewBox="0 0 24 24" containing <rect x="2" y="4" width="20" height="16" rx="2" ry="2" />, <path d="M6 8h4" />, <path d="M6 12h12" />, <path d="M6 16h12" />. Title: Daily Newsletter Desc: Your shortcut to staying ahead—delivered every morning. (em dash via —) Link: Get Daily Briefs → (arrow via →) Card 2 (blue): Link/chain icon — SVG viewBox="0 0 24 24" with path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z". Title: Curated Tools Desc: The most powerful AI apps and platforms—tested and reviewed for you. Link: Find My Tools → Card 3 (green): Cube/package icon — SVG viewBox="0 0 24 24" with path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z", plus <polyline points="3.27 6.96 12 12.01 20.73 6.96" /> and <line x1="12" y1="22.08" x2="12" y2="12" />. Title: Expert Insights Desc: Actionable analysis from researchers and founders shaping the future of AI. Link: Unlock Insights → Bottom Tag Row .features-tags: flex row, gap: 32px, items center, justify-content: flex-start, padding-top: 10px, position: relative, z-index: 1. .feat-tag: flex with gap: 8px, items center, font-size: 13px, color rgba(255, 255, 255, 0.45), weight 600. .feat-tag svg: 16px × 16px, fill: rgba(255, 255, 255, 0.6), stroke: none. Three tags in order: Lightning bolt (Always Current) — SVG viewBox="0 0 24 24", path d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.16-.28L11.66 2h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z". Settings/gear-circle (Focused for You) — SVG viewBox="0 0 24 24", path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z". Checkmark in circle (Actionable Steps) — SVG viewBox="0 0 24 24", path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z". Animations / Transitions Only two transitions exist — no keyframes, no scroll triggers, no entrance animations: Card lift on hover: transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) on .feat-card, lifting translateY(-4px). Link arrow slide on hover: transition: gap 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s on .feat-link, expanding gap from 6px to 10px and dropping opacity to 0.85. Responsive Breakpoints @media (max-width: 900px): .features-cards collapses to single column (grid-template-columns: 1fr) .features-wrapper padding becomes 48px 28px 32px @media (max-width: 560px): .features-header h2 shrinks to 28px .features-tags allows wrapping (flex-wrap: wrap) with gap: 16px8:["$","$L22",null,{"activeCategory":"$undefined","items":[{"category":"sections","id":405,"media":[{"id":442,"alt":"Interior Features","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:13.120Z","createdAt":"2026-08-13T14:06:13.120Z","url":"/api/media/file/sections-0025-01.webp","thumbnailURL":"/api/media/file/sections-0025-01-300x222.webp","filename":"sections-0025-01.webp","mimeType":"image/webp","filesize":1374828,"width":640,"height":474,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0025-01-300x222.webp","width":300,"height":222,"mimeType":"image/webp","filesize":477622,"filename":"sections-0025-01-300x222.webp"},"square":{"url":"/api/media/file/sections-0025-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1085254,"filename":"sections-0025-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0025-01-600x444.webp","width":600,"height":444,"mimeType":"image/webp","filesize":1249944,"filename":"sections-0025-01-600x444.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":428,"prompt":"$23","title":"Interior Features"},{"category":"sites","id":225,"media":[{"id":257,"alt":"Portfolio About","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:06.559Z","createdAt":"2026-08-13T11:43:06.559Z","url":"/api/media/file/sites-0205-01.webp","thumbnailURL":"/api/media/file/sites-0205-01-300x219.webp","filename":"sites-0205-01.webp","mimeType":"image/webp","filesize":124036,"width":640,"height":468,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0205-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":49060,"filename":"sites-0205-01-300x219.webp"},"square":{"url":"/api/media/file/sites-0205-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":92594,"filename":"sites-0205-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0205-01-600x439.webp","width":600,"height":439,"mimeType":"image/webp","filesize":120086,"filename":"sites-0205-01-600x439.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":427,"prompt":"$24","title":"Portfolio About"},{"category":"apps","id":446,"media":[{"id":483,"alt":"Mood Tracker","caption":null,"folder":null,"updatedAt":"2026-08-13T14:07:27.378Z","createdAt":"2026-08-13T14:07:27.378Z","url":"/api/media/file/apps-0440-01.mp4","thumbnailURL":null,"filename":"apps-0440-01.mp4","mimeType":"video/mp4","filesize":2039761,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":426,"prompt":"$25","title":"Mood Tracker"},{"category":"sections","id":406,"media":[{"id":443,"alt":"Community CTA","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:13.191Z","createdAt":"2026-08-13T14:06:13.191Z","url":"/api/media/file/sections-0024-01.webp","thumbnailURL":"/api/media/file/sections-0024-01-300x219.webp","filename":"sections-0024-01.webp","mimeType":"image/webp","filesize":10740,"width":480,"height":350,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0024-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":6596,"filename":"sections-0024-01-300x219.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":424,"prompt":"$26","title":"Community CTA"},{"category":"sections","id":407,"media":[{"id":444,"alt":"Rocket Pricing","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:15.138Z","createdAt":"2026-08-13T14:06:15.138Z","url":"/api/media/file/sections-0023-01.webp","thumbnailURL":"/api/media/file/sections-0023-01-300x221.webp","filename":"sections-0023-01.webp","mimeType":"image/webp","filesize":98136,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0023-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":46376,"filename":"sections-0023-01-300x221.webp"},"square":{"url":"/api/media/file/sections-0023-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":124058,"filename":"sections-0023-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0023-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":114204,"filename":"sections-0023-01-600x443.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":421,"prompt":"$27","title":"Rocket Pricing"},{"category":"sites","id":226,"media":[{"id":258,"alt":"Prisma Creative Studio","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:06.853Z","createdAt":"2026-08-13T11:43:06.853Z","url":"/api/media/file/sites-0204-01.webp","thumbnailURL":"/api/media/file/sites-0204-01-300x527.webp","filename":"sites-0204-01.webp","mimeType":"image/webp","filesize":29070,"width":455,"height":800,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0204-01-300x527.webp","width":300,"height":527,"mimeType":"image/webp","filesize":17158,"filename":"sites-0204-01-300x527.webp"},"square":{"url":"/api/media/file/sites-0204-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":17332,"filename":"sites-0204-01-500x500.webp"},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":"/api/media/file/sites-0204-01-1200x630.webp","width":1200,"height":630,"mimeType":"image/webp","filesize":19706,"filename":"sites-0204-01-1200x630.webp"}}}],"order":415,"prompt":"$28","title":"Prisma Creative Studio"},{"category":"sites","id":227,"media":[{"id":259,"alt":"NexaCore Control","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:10.314Z","createdAt":"2026-08-13T11:43:10.314Z","url":"/api/media/file/sites-0203-01.webp","thumbnailURL":"/api/media/file/sites-0203-01-300x219.webp","filename":"sites-0203-01.webp","mimeType":"image/webp","filesize":276272,"width":640,"height":468,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0203-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":108806,"filename":"sites-0203-01-300x219.webp"},"square":{"url":"/api/media/file/sites-0203-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":281830,"filename":"sites-0203-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0203-01-600x439.webp","width":600,"height":439,"mimeType":"image/webp","filesize":279336,"filename":"sites-0203-01-600x439.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":414,"prompt":"$29","title":"NexaCore Control"},{"category":"sites","id":228,"media":[{"id":261,"alt":"Beauty Products","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:13.211Z","createdAt":"2026-08-13T11:43:13.211Z","url":"/api/media/file/sites-0202-01.webp","thumbnailURL":"/api/media/file/sites-0202-01-300x221.webp","filename":"sites-0202-01.webp","mimeType":"image/webp","filesize":152748,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0202-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":52632,"filename":"sites-0202-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0202-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":130790,"filename":"sites-0202-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0202-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":140708,"filename":"sites-0202-01-600x443.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":410,"prompt":"$2a","title":"Beauty Products"},{"category":"sites","id":229,"media":[{"id":262,"alt":"Stillmind","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:13.246Z","createdAt":"2026-08-13T11:43:13.246Z","url":"/api/media/file/sites-0201-01.mp4","thumbnailURL":null,"filename":"sites-0201-01.mp4","mimeType":"video/mp4","filesize":2080361,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":408,"prompt":"$2b","title":"Stillmind"},{"category":"sites","id":230,"media":[{"id":263,"alt":"Immersive Studio","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:13.287Z","createdAt":"2026-08-13T11:43:13.287Z","url":"/api/media/file/sites-0200-01.mp4","thumbnailURL":null,"filename":"sites-0200-01.mp4","mimeType":"video/mp4","filesize":2139531,"width":null,"height":null,"focalX":null,"focalY":null,"sizes":{"thumbnail":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":406,"prompt":"$2c","title":"Immersive Studio"},{"category":"sites","id":231,"media":[{"id":264,"alt":"AI Workflow Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:24.500Z","createdAt":"2026-08-13T11:43:24.499Z","url":"/api/media/file/sites-0199-01.webp","thumbnailURL":"/api/media/file/sites-0199-01-300x220.webp","filename":"sites-0199-01.webp","mimeType":"image/webp","filesize":2025528,"width":640,"height":470,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0199-01-300x220.webp","width":300,"height":220,"mimeType":"image/webp","filesize":642162,"filename":"sites-0199-01-300x220.webp"},"square":{"url":"/api/media/file/sites-0199-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":1347324,"filename":"sites-0199-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0199-01-600x441.webp","width":600,"height":441,"mimeType":"image/webp","filesize":1775584,"filename":"sites-0199-01-600x441.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":404,"prompt":"$2d","title":"AI Workflow Hero"},{"category":"sections","id":408,"media":[{"id":445,"alt":"Digital Reality","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:15.193Z","createdAt":"2026-08-13T14:06:15.193Z","url":"/api/media/file/sections-0022-01.webp","thumbnailURL":"/api/media/file/sections-0022-01-300x219.webp","filename":"sections-0022-01.webp","mimeType":"image/webp","filesize":11106,"width":480,"height":350,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0022-01-300x219.webp","width":300,"height":219,"mimeType":"image/webp","filesize":6910,"filename":"sections-0022-01-300x219.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":403,"prompt":"$2e","title":"Digital Reality"},{"category":"sites","id":232,"media":[{"id":265,"alt":"Nexto 404","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:25.390Z","createdAt":"2026-08-13T11:43:25.390Z","url":"/api/media/file/sites-0198-01.png","thumbnailURL":"/api/media/file/sites-0198-01-300x218.png","filename":"sites-0198-01.png","mimeType":"image/png","filesize":1856045,"width":1986,"height":1446,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0198-01-300x218.png","width":300,"height":218,"mimeType":"image/png","filesize":61709,"filename":"sites-0198-01-300x218.png"},"square":{"url":"/api/media/file/sites-0198-01-500x500.png","width":500,"height":500,"mimeType":"image/png","filesize":225001,"filename":"sites-0198-01-500x500.png"},"small":{"url":"/api/media/file/sites-0198-01-600x437.png","width":600,"height":437,"mimeType":"image/png","filesize":220397,"filename":"sites-0198-01-600x437.png"},"medium":{"url":"/api/media/file/sites-0198-01-900x655.png","width":900,"height":655,"mimeType":"image/png","filesize":448170,"filename":"sites-0198-01-900x655.png"},"large":{"url":"/api/media/file/sites-0198-01-1400x1019.png","width":1400,"height":1019,"mimeType":"image/png","filesize":950317,"filename":"sites-0198-01-1400x1019.png"},"xlarge":{"url":"/api/media/file/sites-0198-01-1920x1398.png","width":1920,"height":1398,"mimeType":"image/png","filesize":1517594,"filename":"sites-0198-01-1920x1398.png"},"og":{"url":"/api/media/file/sites-0198-01-1200x630.png","width":1200,"height":630,"mimeType":"image/png","filesize":599853,"filename":"sites-0198-01-1200x630.png"}}}],"order":400,"prompt":"$2f","title":"Nexto 404"},{"category":"sites","id":233,"media":[{"id":266,"alt":"xPortfolio Hero","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:25.495Z","createdAt":"2026-08-13T11:43:25.495Z","url":"/api/media/file/sites-0197-01.webp","thumbnailURL":"/api/media/file/sites-0197-01-300x228.webp","filename":"sites-0197-01.webp","mimeType":"image/webp","filesize":17870,"width":480,"height":364,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0197-01-300x228.webp","width":300,"height":228,"mimeType":"image/webp","filesize":9844,"filename":"sites-0197-01-300x228.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":399,"prompt":"$30","title":"xPortfolio Hero"},{"category":"sites","id":234,"media":[{"id":267,"alt":"SkyElite Private Jets","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:25.597Z","createdAt":"2026-08-13T11:43:25.597Z","url":"/api/media/file/sites-0196-01.webp","thumbnailURL":"/api/media/file/sites-0196-01-300x228.webp","filename":"sites-0196-01.webp","mimeType":"image/webp","filesize":13704,"width":480,"height":364,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0196-01-300x228.webp","width":300,"height":228,"mimeType":"image/webp","filesize":8342,"filename":"sites-0196-01-300x228.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":396,"prompt":"$31","title":"SkyElite Private Jets"},{"category":"sites","id":235,"media":[{"id":268,"alt":"Stark Minimal Footer","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:28.772Z","createdAt":"2026-08-13T11:43:28.772Z","url":"/api/media/file/sites-0195-01.webp","thumbnailURL":"/api/media/file/sites-0195-01-300x221.webp","filename":"sites-0195-01.webp","mimeType":"image/webp","filesize":127068,"width":640,"height":472,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0195-01-300x221.webp","width":300,"height":221,"mimeType":"image/webp","filesize":73164,"filename":"sites-0195-01-300x221.webp"},"square":{"url":"/api/media/file/sites-0195-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":117442,"filename":"sites-0195-01-500x500.webp"},"small":{"url":"/api/media/file/sites-0195-01-600x443.webp","width":600,"height":443,"mimeType":"image/webp","filesize":133378,"filename":"sites-0195-01-600x443.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":395,"prompt":"$32","title":"Stark Minimal Footer"},{"category":"sections","id":409,"media":[{"id":446,"alt":"LaunchEx Submissions","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:18.710Z","createdAt":"2026-08-13T14:06:18.710Z","url":"/api/media/file/sections-0021-01.webp","thumbnailURL":"/api/media/file/sections-0021-01-300x217.webp","filename":"sections-0021-01.webp","mimeType":"image/webp","filesize":373950,"width":640,"height":464,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0021-01-300x217.webp","width":300,"height":217,"mimeType":"image/webp","filesize":137088,"filename":"sections-0021-01-300x217.webp"},"square":{"url":"/api/media/file/sections-0021-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":395880,"filename":"sections-0021-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0021-01-600x435.webp","width":600,"height":435,"mimeType":"image/webp","filesize":348820,"filename":"sections-0021-01-600x435.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":394,"prompt":"$33","title":"LaunchEx Submissions"},{"category":"sections","id":410,"media":[{"id":447,"alt":"Animated Cards","caption":null,"folder":null,"updatedAt":"2026-08-13T14:06:22.251Z","createdAt":"2026-08-13T14:06:22.251Z","url":"/api/media/file/sections-0020-01.webp","thumbnailURL":"/api/media/file/sections-0020-01-300x217.webp","filename":"sections-0020-01.webp","mimeType":"image/webp","filesize":484700,"width":640,"height":464,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sections-0020-01-300x217.webp","width":300,"height":217,"mimeType":"image/webp","filesize":186266,"filename":"sections-0020-01-300x217.webp"},"square":{"url":"/api/media/file/sections-0020-01-500x500.webp","width":500,"height":500,"mimeType":"image/webp","filesize":508916,"filename":"sections-0020-01-500x500.webp"},"small":{"url":"/api/media/file/sections-0020-01-600x435.webp","width":600,"height":435,"mimeType":"image/webp","filesize":447374,"filename":"sections-0020-01-600x435.webp"},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":392,"prompt":"$34","title":"Animated Cards"},{"category":"sites","id":236,"media":[{"id":269,"alt":"Stellar AI","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:28.873Z","createdAt":"2026-08-13T11:43:28.872Z","url":"/api/media/file/sites-0194-01.webp","thumbnailURL":"/api/media/file/sites-0194-01-300x265.webp","filename":"sites-0194-01.webp","mimeType":"image/webp","filesize":13696,"width":480,"height":424,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0194-01-300x265.webp","width":300,"height":265,"mimeType":"image/webp","filesize":8060,"filename":"sites-0194-01-300x265.webp"},"square":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"small":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"medium":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"large":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"xlarge":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null},"og":{"url":null,"width":null,"height":null,"mimeType":null,"filesize":null,"filename":null}}}],"order":389,"prompt":"$35","title":"Stellar AI"},{"category":"sites","id":237,"media":[{"id":270,"alt":"Keep Ahead Features","caption":null,"folder":null,"updatedAt":"2026-08-13T11:43:29.518Z","createdAt":"2026-08-13T11:43:29.518Z","url":"/api/media/file/sites-0193-01.png","thumbnailURL":"/api/media/file/sites-0193-01-300x223.png","filename":"sites-0193-01.png","mimeType":"image/png","filesize":721933,"width":1932,"height":1436,"focalX":50,"focalY":50,"sizes":{"thumbnail":{"url":"/api/media/file/sites-0193-01-300x223.png","width":300,"height":223,"mimeType":"image/png","filesize":46273,"filename":"sites-0193-01-300x223.png"},"square":{"url":"/api/media/file/sites-0193-01-500x500.png","width":500,"height":500,"mimeType":"image/png","filesize":132591,"filename":"sites-0193-01-500x500.png"},"small":{"url":"/api/media/file/sites-0193-01-600x446.png","width":600,"height":446,"mimeType":"image/png","filesize":134877,"filename":"sites-0193-01-600x446.png"},"medium":{"url":"/api/media/file/sites-0193-01-900x669.png","width":900,"height":669,"mimeType":"image/png","filesize":252294,"filename":"sites-0193-01-900x669.png"},"large":{"url":"/api/media/file/sites-0193-01-1400x1041.png","width":1400,"height":1041,"mimeType":"image/png","filesize":577040,"filename":"sites-0193-01-1400x1041.png"},"xlarge":{"url":"/api/media/file/sites-0193-01-1920x1427.png","width":1920,"height":1427,"mimeType":"image/png","filesize":867249,"filename":"sites-0193-01-1920x1427.png"},"og":{"url":"/api/media/file/sites-0193-01-1200x630.png","width":1200,"height":630,"mimeType":"image/png","filesize":414090,"filename":"sites-0193-01-1200x630.png"}}}],"order":388,"prompt":"$36","title":"Keep Ahead Features"}],"page":16,"query":"","totalDocs":455,"totalPages":23}] </article></body></html>

22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:T1291,Build a single interactive product card that swaps between a still photo (light mode) and a looping video (dark mode), with a slow crossfade between them. **Font** - Use `Neue Montreal` (custom `@font-face`, weights 400/500/700, `.woff2`), falling back to `sans-serif`. Load Material Icons from `https://fonts.googleapis.com/icon?family=Material+Icons`. **Container / card chrome** - The card lives in a grid `.cards` (`display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.2vw,20px); align-items:stretch;`). - Each card is wrapped in `.card-frame`: - `aspect-ratio:319 / 404;` - `border-radius:clamp(18px,1.7vw,28px);` - `overflow:hidden; background:#0e0d0c;` - `box-shadow:0 36px 70px -34px rgba(28,18,8,.42), 0 4px 14px -8px rgba(0,0,0,.18);` **Card internals** - `.direct-card`: `position:relative; width:100%; height:100%; overflow:hidden; background:#1a1714; isolation:isolate;` - A fixed-size artboard `.direct-card__artboard` (`#directCardTwoArtboard`) that is scaled to fit: - `position:absolute; top:50%; left:50%; width:660px; height:836px; border-radius:30px; overflow:hidden; background:#1a1714; isolation:isolate; container-type:inline-size; transform:translate(-50%,-50%) scale(var(--direct-scale,1)); transform-origin:center center;` - Compute `--direct-scale` in JS as `Math.min(card.clientWidth/660, card.clientHeight/836)` and recompute on load and `resize`. **Media layers (inside the artboard, in this order)** 1. Image `.direct-card__photo`: - `src="https://res.cloudinary.com/dgupuutfn/image/upload/v1780913983/room2_pihyox.png"` - `data-night-src="https://res.cloudinary.com/dgupuutfn/image/upload/v1780913982/room2_night_qc4qeq.png"` - `alt="Living room interior"` - CSS: `position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:0;` 2. Video `.direct2-video`: - `src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260609_072414_1e4448ec-537f-4f94-b56b-19e00c1550e8.mp4"` - attributes: `muted loop playsinline preload="auto"` - CSS: same box as photo (`position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; z-index:0;`) plus `opacity:0; pointer-events:none; transition:opacity 4.5s cubic-bezier(0.22, 1, 0.36, 1);` 3. Gradient scrim `.direct2-grade`: - `position:absolute; inset:0; z-index:1; pointer-events:none;` - `background:linear-gradient(to top, rgba(8,6,4,.92) 0%, rgba(8,6,4,.6) 13%, rgba(8,6,4,.1) 28%, rgba(8,6,4,0) 42%), linear-gradient(to bottom, rgba(20,14,8,.34) 0%, rgba(20,14,8,0) 20%);` **Footer block `.direct-footer`** (`position:absolute; z-index:4; left:6.2%; right:6.2%; bottom:5.4%; color:#fff;`): - `.direct-footer__head` (`display:flex; align-items:center; gap:3%; margin-bottom:3.2%;`) containing: - `.direct-footer__icon` round badge: `flex:none; width:9.6%; aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center;` with inline style `background:#3fae6b; color:#fff; box-shadow:0 10px 24px -10px rgba(63,174,107,.6);`, holding `construction` (icon sized `font-size:clamp(15px,5.6cqw,34px); line-height:1;`). - `.direct-footer__title` text "Build the room in real time": `font-weight:700; line-height:1.05; letter-spacing:-.6px; white-space:nowrap; font-size:clamp(18px,5.6cqw,36px);` - `.direct-footer__desc` text "Move pieces, explore finishes, and align with your studio on one shared canvas.": `color:#d7d2c9; font-weight:500; line-height:1.28; max-width:100%; font-size:clamp(13px,4.2cqw,27px);` (All footer text uses container query units `cqw`, so the artboard must set `container-type:inline-size`.) **Dark-mode behavior** - A `body.is-night` class toggles dark mode (driven by a theme switch elsewhere on the page). - When `body.is-night` is set: `.direct2-video { opacity:1; }` (fades in over 4.5s; the photo stays beneath). In light mode the video is `opacity:0`. - In the toggle handler, also `video.play()` (catch/ignore promise rejection) when entering night and `video.pause()` when leaving. - The still photo additionally swaps its `src` to `data-night-src` on entering night and back on day, with a matching `opacity 4.5s cubic-bezier(0.22, 1, 0.36, 1)` crossfade (fade to 0, swap on `load`, fade back to 1). **Responsiveness** - `@media (max-width:920px)`: page scrolls normally (`html,body{height:auto;overflow-y:auto;}`), `.cards` becomes `grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,24px);`. - `@media (max-width:540px)`: `.cards` becomes a single column, `max-width:380px; margin:0 auto;`. - The artboard scale (`--direct-scale`) keeps the 660×836 internal layout perfectly proportioned at any card size.24:T1537,**Prompt:** Create an "About Me" section using React, Tailwind CSS, and **framer-motion**. The site uses **Google Font "Kanit"** (weights 300-900) and a dark background `#0C0C0C`. **Section layout:** - Full-width section, `min-h-screen`, flexbox column, centered both axes - Padding: `px-5 sm:px-8 md:px-10 py-20` - Background: `#0C0C0C` (inherited from page) - `position: relative` -- the section has 4 decorative floating images placed absolutely in the corners **4 decorative corner images (absolute positioned, z-0):** 1. **Top-left** -- Moon icon - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png` - Position: `top-[4%] left-[1%] sm:left-[2%] md:left-[4%]` - Size: `w-[120px] sm:w-[160px] md:w-[210px] h-auto` - Fade-in animation: `delay: 0.1`, slides from left (`x: -80, y: 0`), `duration: 0.9` 2. **Bottom-left** -- 3D object - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png` - Position: `bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]` - Size: `w-[100px] sm:w-[140px] md:w-[180px] h-auto` - Fade-in animation: `delay: 0.25`, slides from left (`x: -80, y: 0`), `duration: 0.9` 3. **Top-right** -- Lego icon - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png` - Position: `top-[4%] right-[1%] sm:right-[2%] md:right-[4%]` - Size: `w-[120px] sm:w-[160px] md:w-[210px] h-auto` - Fade-in animation: `delay: 0.15`, slides from right (`x: 80, y: 0`), `duration: 0.9` 4. **Bottom-right** -- 3D group - URL: `https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png` - Position: `bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]` - Size: `w-[130px] sm:w-[170px] md:w-[220px] h-auto` - Fade-in animation: `delay: 0.3`, slides from right (`x: 80, y: 0`), `duration: 0.9` **Center content (relative z-10, max-w-4xl, centered):** Vertical layout with `gap-16 sm:gap-20 md:gap-24`, containing two groups: **Group 1 -- Heading + Animated Text** (gap `10 sm:14 md:16`): - **Heading "About me":** - `font-black uppercase leading-none tracking-tight text-center` - Font size: `clamp(3rem, 12vw, 160px)` - Uses a CSS class `hero-heading` which applies a gradient text fill: ```css .hero-heading { background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } ``` - Fade-in: `delay: 0, y: 40` - **Animated paragraph** (scroll-driven character-by-character reveal): - Text content: `"With more than five years of experience in design, i focus on branding, web design, and user experience, i truly enjoy working with businesses that aim to stand out and present their best image. Let's build something incredible together!"` - Styling: `text-[#D7E2EA] font-medium text-center leading-relaxed max-w-[560px]` - Font size: `clamp(1rem, 2vw, 1.35rem)` - **Animation behavior** (uses framer-motion `useScroll` + `useTransform`): - Each character is rendered as an individual `` with `position: relative; display: inline-block` - An invisible duplicate holds the space; the visible character is absolutely positioned on top - Scroll tracking: `useScroll({ target: containerRef, offset: ['start 0.8', 'end 0.2'] })` - Per-character opacity: calculate `charProgress = index / totalChars`, then `start = max(0, charProgress - 0.1)` and `end = min(1, charProgress + 0.05)`. Map `scrollYProgress` from `[start, end]` to opacity `[0.2, 1]` - Spaces are rendered as `\u00A0` (non-breaking space) - Characters start dim (opacity 0.2) and brighten to full opacity (1) as the user scrolls through the section, creating a progressive text reveal from left to right **Group 2 -- Contact Button:** - Fade-in: `delay: 0.3, y: 20` - Pill-shaped button (rounded-full), text "Contact Me" - Responsive padding: `px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4` - Text: `text-white font-medium uppercase tracking-widest`, size `text-xs sm:text-sm md:text-base` - Background gradient: `linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)` - Box shadow: `0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset` - Outline: `2px solid #E3E3E3` with `outlineOffset: -3px` - Hover: `opacity: 0.9`, Active: `opacity: 0.75`, transition 200ms - Links to `#contact` **FadeIn component (reusable, framer-motion):** - Props: `delay`, `duration` (default 0.7), `x` (default 0), `y` (default 30), `className`, `style`, `as` (HTML element tag, default `div`) - Uses `motion.create()` to make any HTML element animatable - Variants: `hidden` state sets `opacity: 0` + the x/y offsets; `visible` animates to `opacity: 1, x: 0, y: 0` - Easing: cubic bezier `[0.25, 0.1, 0.25, 1]` - Viewport trigger: `{ once: true, margin: "50px", amount: 0 }` **Font (loaded in HTML head):** ```html ``` CSS base: `font-family: 'Kanit', sans-serif` on html/body. ---25:T2a84,Create a wellness/mental health app mockup showing 3 iPhone screens side-by-side in realistic phone frames. The app is called "Soul Canvas". Use React with Tailwind CSS and lucide-react icons. Use Vite + TypeScript. --- ## TECHNICAL SETUP - **Font**: "Helvetica Neue ME" loaded from `https://db.onlinewebfonts.com/c/95cecf452d3208890088a5b4c19c7ecf?family=Helvetica+Neue+ME` (add in index.html ``). Set as `font-inter` in Tailwind config mapped to `'Helvetica Neue ME', sans-serif`. - **Icons**: lucide-react (Search, Home, Clock, LayoutGrid, Plus, ArrowRight, Info, ChevronLeft, Sun, Activity, Users, Moon, Minus) - **Dependencies**: react, react-dom, lucide-react, tailwindcss --- ## GLOBAL CSS (index.css) ```css @tailwind base; @tailwind components; @tailwind utilities; * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Helvetica Neue ME', sans-serif; margin: 0; padding: 0; } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .stagger-item { opacity: 0; animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .stagger-delay-1 { animation-delay: 0.1s; } .stagger-delay-2 { animation-delay: 0.2s; } .stagger-delay-3 { animation-delay: 0.35s; } .stagger-delay-4 { animation-delay: 0.5s; } .stagger-delay-5 { animation-delay: 0.65s; } .stagger-delay-6 { animation-delay: 0.8s; } .stagger-delay-7 { animation-delay: 0.95s; } .stagger-delay-8 { animation-delay: 1.1s; } ``` --- ## PAGE LAYOUT - White background (`bg-white`), `min-h-screen`, flexbox centered. - Direction: `flex-col` on mobile, `flex-row` on md+. - Gap: `gap-6 md:gap-8`. - `overflow-x-auto md:overflow-x-visible` for horizontal scroll on mobile. - `p-4 py-8 md:p-4`. --- ## PHONE FRAME (shared for all 3) Each phone is: - `w-[290px] h-[700px] md:w-[390px] md:h-[800px]` - `rounded-[45px] md:rounded-[60px]` - `bg-black shadow-2xl border-[9px] md:border-[12px] border-neutral-900 overflow-hidden flex-shrink-0` - Contains a **Dynamic Island**: `absolute top-3 left-1/2 -translate-x-1/2 w-[126px] h-[34px] bg-black rounded-full z-50` - Contains an **iOS Status Bar** (absolute top, z-50): time "9:41" on left, signal bars + WiFi SVG + battery on right. - Each has a looping **background video** (`absolute inset-0 w-full h-full object-cover`, autoPlay, muted, loop, playsInline). - Each has a **color overlay** div (`absolute inset-0`) with a specific color at 40% opacity. - Content container: `relative h-full flex flex-col px-6 pt-16 pb-2` (NO overflow-hidden on this div -- important for backdrop-filter to work). --- ## IMPORTANT: BACKDROP-FILTER RULE When using the `stagger-item` animation class (which uses `transform`), NEVER put it on a parent wrapper of elements that have `backdrop-blur-xl`. The transform creates a new stacking context that breaks backdrop-filter on children. Instead, put `stagger-item` directly on the element that also has `backdrop-blur-xl`. --- ## SCREEN 1: HOME / DAILY CHECK-IN **Video**: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260705_143518_88285de9-3f05-4256-9e49-025f75cb6bcb.mp4` **Overlay**: `bg-[#4C5930]/40` **Status bar**: White text/icons. **Elements top-to-bottom:** 1. **User Profile Pill + Search Button** (`stagger-item stagger-delay-1`, `mb-5`) - Left: Pill with avatar + "Lena Voss". Pill: `bg-white/20 backdrop-blur-xl rounded-full pl-0.5 py-0.5 pr-4`. Avatar: `https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=100`, `w-9 h-9 rounded-full object-cover`. Name: `text-white text-sm font-medium`. - Right: Search button `w-10 h-10 rounded-full bg-white/20 backdrop-blur-md`, Search icon size 18. 2. **Header Text** (`stagger-item stagger-delay-2`, `mb-1`) - Subtitle: `text-white/70 text-sm font-medium mb-1` -- "Morning ritual" - Title: `text-white text-[38px] leading-[1.1] font-normal tracking-[-0.03em]` -- "What is\nyour inner\nworld?" 3. **Section Header + Toggle** (`stagger-item stagger-delay-3`, `mt-4 mb-4`) - Left: `text-white text-lg font-semibold` -- "Your calm\nsnapshot" - Right: Toggle pill `bg-white/20 backdrop-blur-md rounded-full p-1`. Active tab: `px-4 py-1.5 bg-white rounded-full text-sm font-medium text-neutral-800` ("Today"). Inactive: `px-4 py-1.5 text-sm font-medium text-white/80` ("Week"). 4. **"Set your vibe" Card** (`stagger-item stagger-delay-4`) - Container: `bg-white/20 backdrop-blur-xl rounded-3xl p-5 mb-3 border border-white/20` - Top row: "Set your vibe" (`text-white font-medium text-base`) + Info button (`w-7 h-7 rounded-full bg-white/30`, Info icon size 14). - Bottom row: Italic text `text-white/60 text-sm italic leading-snug max-w-[200px]` -- "Share here what's in\nyour heart right now" + White circle button `w-12 h-12 rounded-full bg-white shadow-lg` with Plus icon (size 20, `text-neutral-700`). 5. **Bottom Cards Grid** (`grid grid-cols-2 gap-3` -- NO stagger-item on the grid wrapper) - Each card: `bg-white/20 backdrop-blur-xl rounded-3xl p-5 border border-white/20 flex flex-col justify-between aspect-square stagger-item stagger-delay-5` - Card 1: "Reflect on\nyour day" (`text-white font-medium text-base leading-snug`) + Plus button bottom-right. - Card 2: "See your\npatterns" + ArrowRight button bottom-right. - Buttons: Same white circle style as above. 6. **Spacer** (`flex-1`) 7. **Bottom Navigation** (`stagger-item stagger-delay-6`, `py-3`, `justify-around`) - Home icon (white, size 24) with dot below (`w-1 h-1 rounded-full bg-white`). - Clock icon (`text-white/50`, size 24). - LayoutGrid icon (`text-white/50`, size 24). 8. **Home Indicator**: `w-32 h-1 bg-white rounded-full`, centered, `pb-2`. --- ## SCREEN 2: INSIGHTS / PATTERNS **Video**: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260705_141850_7f43c95b-a2cd-4586-ae77-86a10221b9e1.mp4` **Overlay**: `bg-[#4A3968]/40` **Status bar**: White text/icons. **Elements top-to-bottom:** 1. **Top Bar** (`stagger-item stagger-delay-1`, `mb-6`) - Left: Back button `w-10 h-10 rounded-full bg-[#4A3968]/25 backdrop-blur-xl`, ChevronLeft icon size 20. - Right: Name pill `bg-[#4A3968]/25 backdrop-blur-xl rounded-full pl-4 py-0.5 pr-0.5`. Text "Lena Voss" + avatar (same Pexels URL). 2. **Header** (`stagger-item stagger-delay-2`, `mb-2`) - Title: `text-white text-[38px] leading-[1.1] font-normal tracking-[-0.03em] mb-2` -- "Your patterns" - Subtitle: `text-white/70 text-lg leading-snug` -- "Factors shaping\nyour state" 3. **Insight Cards** (`flex flex-col gap-3 mt-6`) -- each card gets its own stagger class: - Each card: `bg-[#4A3968]/25 backdrop-blur-xl rounded-3xl px-5 py-5 border border-white/20 flex items-center justify-between` - Left side: Icon (size 20, white) + label (`text-white font-medium text-[15px]`) - Right side: Percentage (`font-semibold text-lg`) + description (`text-white/60 text-xs`) Card data: - Sun icon, "Early sun exposure", `+28%` (color `#CBD89E`), "Boosts wellness" -- `stagger-delay-3` - Activity icon, "Regular movement", `+22%` (color `#CBD89E`), "Boosts wellness" -- `stagger-delay-4` - Users icon, "Social gathering", `+18%` (color `#CBD89E`), "Boosts wellness" -- `stagger-delay-5` - Moon icon, "Low rest", `+18%` (color `#F5B5B6`), "Drains wellness" -- `stagger-delay-6` 4. **Spacer** (`flex-1`) 5. **CTA Button** (`stagger-item stagger-delay-7`, `mb-4`) - `w-full bg-white rounded-2xl py-4 px-6 flex items-center justify-between shadow-lg` - Text: "Explore suggestions" (`text-neutral-800 font-medium text-base`) - ArrowRight icon (size 20, `text-neutral-700`) 6. **Home Indicator**: Same as screen 1. --- ## SCREEN 3: MOOD LOG / CHECK-IN FORM **Video**: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260705_142807_689d92ab-24f9-419b-a340-76863735ff03.mp4` **Overlay**: `bg-[#7f7160]/40` **Status bar**: Dark text/icons (`text-neutral-700`, `bg-neutral-700` for bars/battery). **State**: `selectedMood` (default 'well'), `notes` (string), `energyLevel` (default 4). **Elements top-to-bottom:** 1. **Top Bar** (`stagger-item stagger-delay-1`, `mb-6`) - Left: Back button `w-10 h-10 rounded-full bg-[#7f7160]/25 backdrop-blur-xl`, ChevronLeft. - Right: Name pill `bg-[#7f7160]/25 backdrop-blur-xl rounded-full pl-4 py-0.5 pr-0.5` + avatar. 2. **Title** (`stagger-item stagger-delay-2`, `mb-5`) - `text-white text-[28px] leading-[1.2] font-normal tracking-[-0.02em]` -- "What describes you?" 3. **Mood Selection Row** (`stagger-item stagger-delay-3`, `mb-6 px-1`, `justify-between`) - 4 mood buttons (Low, Worried, Settled, Well), each with a custom SVG face (64x64 viewBox): - Unselected: Circle stroke white, eyes white filled, mouth white stroke. - Selected: Circle filled white (no stroke), eyes `#6B6B6B`, mouth `#6B6B6B`. - Face expressions: - **Low**: Eyes at (22,26) and (42,26) r=3. Mouth: deep frown path `M20 44c3-5 8-8 12-8s9 3 12 8`. - **Worried**: Same eyes. Mouth: slight frown `M22 42c2.5-3 6-5 10-5s7.5 2 10 5`. - **Settled**: Same eyes. Mouth: straight line `M22 40h20`. - **Well**: Same eyes. Mouth: smile `M20 38c3 5 8 8 12 8s9-3 12-8`. - Labels below: `text-white text-xs`, `font-semibold` when selected, `font-medium` when not. 4. **"Jot your thoughts"** heading (`stagger-item stagger-delay-4`, `text-white text-[22px] leading-[1.2] font-normal tracking-[-0.02em] mb-3`) 5. **Notes Textarea** (`stagger-item stagger-delay-5`) - Container: `bg-[#7f7160]/20 backdrop-blur-xl rounded-2xl p-5 border border-white/30 mb-6` - Textarea: `w-full bg-transparent text-white text-[15px] leading-relaxed placeholder-white/50 resize-none outline-none min-h-[80px]`, rows=3. - Placeholder: "Tell us your day?\nWhat was the thing\nthat shifted your mood?" 6. **"Vitality Meter"** heading (`stagger-item stagger-delay-6`, `text-white text-[22px] leading-[1.2] font-normal tracking-[-0.02em] mb-4`) 7. **Energy Level Bars** (`stagger-item stagger-delay-7`, `flex items-stretch gap-2 mb-4`) - Minus button: `w-10 h-20 rounded-full bg-[#C5B9AA]`, Minus icon size 16. - 5 bars (`flex-1 flex items-end gap-1.5`): Each bar `flex-1 h-20 rounded-xl`. Filled (level <= energyLevel): `bg-white shadow-sm`. Empty: `border-2 border-white/40 bg-white/20`. - Plus button: `w-10 h-20 rounded-full bg-[#C5B9AA]`, Plus icon size 16. 8. **Spacer** (`flex-1`) 9. **Done Button** (`stagger-item stagger-delay-8`, `mb-4`) - Same style as "Explore suggestions" button but text says "Done". 10. **Home Indicator**: Same white bar. --- ## PROFILE IMAGE (used across all 3 screens) `https://images.pexels.com/photos/1239291/pexels-photo-1239291.jpeg?auto=compress&cs=tinysrgb&w=100`26:T19b6,Build a single-file HTML community CTA card section with the following exact specifications. Fonts & Setup Import DM Sans from Google Fonts with weights 400, 500, 600, 700, 800 (opsz 9..40) Use a universal *, *::before, *::after reset: box-sizing: border-box, zero margin/padding Body: DM Sans font family, background #f0f2f7, text color #1e2240, flex column centered, min-height: 100vh, padding 24px 16px Layout Structure

Subscribe to Our Community

Get exclusive access to cutting-edge tech insights, industry trends, and expert advice delivered straight to your inbox. Join our growing community today!

5,000+ happy members

Asset URLs Background video (set on

Subscribe to Our Community

Clear pricing plans that scale with you.

Clear pricing plans
that scale with you.