Best Lovable Prompts
for Websites
& Landing Pages
PromptsLovable is an AI app builder that turns a written prompt into a working React and Tailwind website. These Lovable prompts cover landing pages, hero sections and SaaS products.
How we picked them: most name the stack, the design system, the sections and what not to generate. Two are short starters and one is a migration prompt. The selection is our own judgement, not a benchmark.
The “Open Lovable” buttons on this page are invite links. If you sign up through one, we may receive Lovable credits.
Lovable prompts.
Lovable landing page prompts
Full multi-section pages: SaaS, startup, agency, NFT and portfolio. Swap the brand name, colors and copy before you generate.
> Developer Portfolio
Build a single-page developer portfolio using React + Vite + Tailwind CSS + TypeScript + Framer Motion (motion/react) + lucide-react. The aesthetic is luxury terminal — black backgrounds, monospace accents, serif editorial headings, liquid glass cards, and cinematic video hero. ANTI-PATTERNS (do NOT add) * No colorful gradients — dark only * No hamburger menu — hide nav links on mobile, show only logo + Let's Talk CTA * No parallax or scroll-hijacking * No particle effects or ambient canvas * No React Router — single page smooth scroll * No component libraries beyond lucide-react FONTS: Instrument Serif (font-display, italic hero), IBM Plex Mono (font-mono accents), Inter (font-body) COLOR: --background: 0 0% 4%, --foreground: 0 0% 95%, --accent: 145 80% 56% (terminal green — ONLY on blinking cursor, availability dot, project link hover underlines) SECTIONS 1. NAVBAR — fixed z-50, logo alex.dev with green pulse dot, center pill nav (hidden mobile), Let's Talk CTA with liquid-glass-strong 2. HERO — min-h-screen video background (autoPlay muted loop). Animated title ticker cycling the web / startups / humans / the future with blur enter/exit. Blinking green cursor. 3. SELECTED WORK — 3 project cards alternating left/right 60/40. Each: video (IntersectionObserver play/pause), liquid-glass, number, title, description, tech tags, accent underline link. 4. ABOUT — 40/60 split. Left: portrait video aspect-[3/4]. Right: bio + stats (8+ years, 50+ projects, 3 startups, 100K+ users). 5. TECH STACK — 3-column grid, 6 liquid-glass cards, category label + tech list with proficiency dots. 6. EXPERIENCE — 4-entry vertical timeline, company+duration (30%) | role+description (70%). 7. CONTACT — Let's build something. Email mailto CTA, GitHub/Twitter/LinkedIn icons. 8. FOOTER — copyright left, links right. PERFORMANCE: Hero video preload=auto. All others preload=none, IntersectionObserver (play 50%, pause 10%). Framer Motion ease [0.16,1,0.3,1]. useReducedMotion() on all animated elements. DEPS: motion ^12.35.0, lucide-react ^0.462.0
> Product Launch Page
Build a single-page product launch landing page using React + Vite + Tailwind CSS + TypeScript + Framer Motion (motion/react) + lucide-react. Product: Aura Pro premium wireless headphones. Aesthetic: Apple meets Dieter Rams — white/light backgrounds, bold editorial typography, massive product video, generous whitespace, liquid glass accents. LIGHT theme only. ANTI-PATTERNS (do NOT add) * No dark mode toggle — light only * No decorative gradient blobs or aurora effects * No hamburger menu — hide nav links on mobile, show only logo + Buy Now CTA * No parallax or scroll-hijacking * No component libraries beyond lucide-react * No gradients on text * No border-radius larger than 1.5rem FONTS: Instrument Serif (font-display), Inter (font-body) COLOR: --background: 0 0% 100%, --foreground: 0 0% 8%, --accent: 225 80% 56% (blue — ONLY on Add to Bag CTA, price text, selected color swatch ring) LIQUID GLASS (light): .liquid-glass { background: rgba(255,255,255,0.5); backdrop-filter: blur(20px); border: 1px solid rgba(0,0,0,0.06); } SECTIONS 1. NAVBAR — sticky z-50 liquid-glass, logo aura PRO, center links (hidden mobile), dark Buy pill with ShoppingBag icon. 2. HERO — Aura Pro at text-9xl Instrument Serif, product video (aspect-[16/10] max-w-4xl rounded-3xl), price $549 in accent blue, Add to Bag (accent) + Learn more CTAs. 3. FEATURES — bg-card section, video banner (aspect-[21/9]), 4-card grid: Spatial Audio (Volume2), 40-Hour Battery (Battery), Crystal Voice (Mic), Seamless Switch (Bluetooth). 4. PRODUCT DEEP DIVE — 55/45 split. Lifestyle video left. Right: Designed to be forgotten + 3 blocks (Materials, Adaptive Fit, Sustainability). 5. SPECS — bg-card, 8-cell gap-px grid: 40mm, 20Hz-40kHz, 40hrs, 254g, Bluetooth 5.3, 30dB ANC, USB-C, 3 devices. 6. REVIEWS — 3 cards, 5 filled Star icons each, blockquote, reviewer name + role. 7. BUY CTA — DARK inverted section (bg-foreground). Color picker (Midnight/Silver/Ivory, useState). $549. White Add to Bag button. 8. FOOTER — copyright, Privacy/Terms/Support links, Twitter/Instagram/Youtube icons. PERFORMANCE: Hero video preload=auto. Others preload=none, IntersectionObserver. Mobile: Framer Motion disabled below 768px. DEPS: motion ^12.35.0, lucide-react ^0.462.0> SaaS Landing Page
Design a SaaS landing page hero section that feels premium and cinematic. Use the Ocean Depth palette (#0A1628 background, #1E3A5F accents, #64B5F6 highlights). Glassmorphism hero section with gradient overlay. Floating feature cards with hover animations. Bento grid layout for the testimonials section. Smooth micro-interactions throughout. Reference quality: Linear, Stripe, Framer. Include proper shadcn/ui integration with custom variants. Font: Inter for body, Space Grotesk for headlines. Make it responsive with mobile-first breakpoints.
> Brutalist Startup Page
Build a landing page with a rigid grid, raw serif headlines, stark black/white theme, and interactive hover-reveal on cards. Style: Neo-brutalist with heavy 2px black borders and zero-blur hard shadows. Layout: Bento-style grid with asymmetric card shapes. Typography: Cabinet Grotesk for display headlines (oversized, 72px+), Satoshi for body. High contrast, aggressive visual hierarchy. Colors: Primary yellow #FFE17C, deep charcoal #171E19. Animations: Marquee scroll on social proof bar, punchy hover scale on cards. Include a hero with edge-to-edge display type, 3-column feature grid below with numbered benefit cards, and a single bold CTA button.
> SEO Agency Landing Page
Build a dark, premium, single-page landing page for an AI-powered Modern SEO agency using React + Vite + Tailwind CSS + shadcn/ui + Framer Motion (motion/react). The page has a luxury editorial aesthetic black backgrounds, white text, liquid glass (glassmorphism) effects, and cinematic video backgrounds. ## VISUAL HIERARCHY (global eye flow) Hero heading → Hero CTA → Start section heading → Feature rows → Stats numbers → Testimonial quotes → Final CTA ## ANTI-PATTERNS (do NOT add) * No decorative gradient blobs, mesh gradients, or aurora effects * No dark/light mode toggle dark only * No hamburger menu hide nav links on mobile, show only logo + "Get Started" CTA * No parallax or scroll-hijacking * No particle effects, cursor trails, or ambient canvas animations * No React.lazy, code splitting, or lazy loading for components single bundle * No skeleton screens or loading spinners * No additional box-shadows beyond what liquid-glass and liquid-glass-strong provide * No border-radius beyond what is explicitly specified * No emoji in any UI text * No React Router pages single page, all sections in one file or imported components --- ## FONTS Import URL: ``` https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&display=swap ``` Role assignments: * Headings: `Instrument Serif` (italic) → Tailwind class `font-heading` * Body: `Barlow` (weights 300, 400, 500, 600) → Tailwind class `font-body` Tailwind config: ```js fontFamily: { heading: ["'Instrument Serif'", "serif"], body: ["'Barlow'", "sans-serif"], } ``` `font-display: swap` on all families. Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`. --- ## COLOR THEME (:root, HSL format) ```css :root { --background: 213 45% 67%; --foreground: 0 0% 100%; --card: 213 45% 62%; --card-foreground: 0 0% 100%; --primary: 0 0% 100%; --primary-foreground: 213 45% 67%; --secondary: 213 45% 72%; --secondary-foreground: 0 0% 100%; --muted: 213 35% 60%; --muted-foreground: 0 0% 100% / 0.7; --accent: 213 45% 72%; --accent-foreground: 0 0% 100%; --destructive: 0 84.2% 60.2%; --border: 0 0% 100% / 0.2; --input: 0 0% 100% / 0.2; --ring: 0 0% 100% / 0.3; --radius: 9999px; --glass-bg: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.25); --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); --glass-blur: 16px; } ``` All component colors use `hsl(var(--token))` no raw hex in JSX. --- ## SPACING RHYTHM ``` Section vertical padding: py-24 md:py-32 lg:py-40 (all inner sections) Section horizontal padding: px-6 md:px-8 lg:px-16 Content max-width: max-w-6xl mx-auto Badge to heading: mb-4 Heading to body text: mt-4 md:mt-6 Body text to CTA: mt-6 md:mt-8 Card internal padding: p-6 md:p-8 Card grid gap: gap-6 Dividers between sections: none (video bg sections create natural breaks) ``` --- ## Z-INDEX STACK ``` z-0 background videos, poster images z-[1] gradient overlays on videos (top/bottom fades) z-10 all section content (text, cards, buttons, badges) z-50 fixed navbar ``` --- ## EASING CURVES ```css :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); } ``` All Framer Motion entrance animations use `ease: [0.16, 1, 0.3, 1]`. All CSS hover transitions use `transition-all duration-200` unless specified otherwise. --- ## LIQUID GLASS CSS (index.css, @layer components) ### .liquid-glass (subtle, used on nav pills, badges, cards): ```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; } ``` ### .liquid-glass-strong (prominent, used on CTA buttons): ```css .liquid-glass-strong { background: rgba(255, 255, 255, 0.01); background-blend-mode: luminosity; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border: none; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } .liquid-glass-strong::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.4px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 80%, rgba(255, 255, 255, 0.5) 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; } ``` The `::before` pseudo-element creates a gradient border effect using the mask-composite trick (thin glowing border that fades in the middle). --- ## ASSETS & MEDIA Hero background video (MP4, CloudFront): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4 ``` Poster image: `/images/hero_bg.jpeg` (local file in `public/images/`) Attributes: `autoPlay, loop, muted, playsInline, preload="auto"` StartSection video (HLS via Mux): ``` https://stream.mux.com/9JXDljEVWYwWu01PUkAemafDugK89o01BR6zqJ3aS9u00A.m3u8 ``` Stats section video (HLS via Mux, displayed desaturated): ``` https://stream.mux.com/NcU3HlHeF7CUL86azTTzpy3Tlb00d6iF3BmCdFslMJYM.m3u8 ``` CTA/Footer section video (HLS via Mux): ``` https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8 ``` Feature GIFs (imported from `src/assets/`): * `feature-1.gif` used in FeaturesChess row 1 (right side) * `feature-2.gif` used in FeaturesChess row 2 (left side) Logo icon: `src/assets/logo-icon.png` (h-12 w-12) All HLS videos: use `hls.js` library for playback. `autoPlay, loop, muted, playsInline`. All below-fold videos: `preload="none"`, play/pause via IntersectionObserver (play when >50% visible, pause when <10% visible). --- ## SECTION-BY-SECTION BREAKDOWN --- ### SECTION 1: NAVBAR (`<nav>`, `aria-label="Main navigation"`) Visual hierarchy: Logo → Nav links pill → "Get Started" CTA Container: `fixed top-4 left-0 right-0 z-50 px-8 lg:px-16 py-3` **Left Logo:** `<a href="#hero">` Logo image: `src/assets/logo-icon.png`, `h-12 w-12` Hover: `hover:opacity-80 transition-opacity duration-200` **Center Links** (desktop only: `hidden md:flex`): Wrapped in `liquid-glass rounded-full px-1.5 py-1` pill container, `flex items-center` Links (`<a>` elements): "Home", "Services", "Work", "Process", "Pricing" Each link: `px-3 py-2 text-sm font-medium text-foreground/90 font-body rounded-full` Hover: `hover:text-foreground hover:bg-white/[0.04] transition-all duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` Last item is NOT a link it's the "Get Started" button: **"Get Started" button** (inside the pill): `<a href="#cta">` styled as button Text: "Get Started" with ArrowUpRight icon (14px) from lucide-react Styling: `bg-white text-black rounded-full px-3.5 py-1.5 text-sm font-body font-medium flex items-center gap-1` Hover: `hover:bg-white/90 transition-colors duration-200` Active: `active:scale-[0.97]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 ring-offset-2 ring-offset-black outline-none` --- ### SECTION 2: HERO (`<section id="hero">`, `aria-label="Hero"`) Visual hierarchy: Heading → CTA buttons → Badge pill → Partners bar → Subtext Container: `relative overflow-visible` with fixed `height: 1000px` **Background video layer (z-0):** `<video>` tag with hero CloudFront MP4 URL Positioned: `absolute left-0 w-full h-auto object-contain z-0` with `top: 20%` Poster: `/images/hero_bg.jpeg` Attributes: `autoPlay, loop, muted, playsInline, preload="auto"` Dark overlay: `absolute inset-0 bg-black/5 z-0` Bottom gradient fade: `absolute bottom-0 left-0 right-0` with `height: 300px`, `background: linear-gradient(to bottom, transparent, black)`, `pointer-events-none z-[1]` **Content** (`relative z-10`, centered, `paddingTop: 150px`): **Badge pill:** Framer Motion: `{ opacity: 0, y: 12 } → { opacity: 1, y: 0 }, duration: 0.5, ease: [0.16, 1, 0.3, 1]` `liquid-glass rounded-full px-1 py-1 inline-flex items-center gap-2` Inner white badge: `bg-white text-black rounded-full px-3 py-1 text-xs font-semibold font-body` "New" Adjacent text: `text-xs font-body text-white/80 pr-3` "Introducing AI-powered web design." **Heading** (`<h1>`, only h1 on the page uses BlurText component): Text: "The Website Your Brand Deserves" Styling: `text-6xl md:text-7xl lg:text-[5.5rem] font-heading italic text-foreground leading-[0.8] max-w-2xl tracking-[-4px]` Animation: word-by-word stagger from bottom with gaussian blur dissolve, triggered by IntersectionObserver, delay 100ms between words **BlurText component internals:** Splits text by words (or letters, configurable) Uses IntersectionObserver (`threshold: 0.1`) to trigger on scroll, fires once Each word is a `<motion.span>` with 3-step keyframe animation: Step 1: `{ filter: 'blur(10px)', opacity: 0, y: 50 }` Step 2: `{ filter: 'blur(5px)', opacity: 0.5, y: -5 }` Step 3: `{ filter: 'blur(0px)', opacity: 1, y: 0 }` Staggered by index with configurable delay (default 200ms per element) Step duration: 0.35s per keyframe step Easing: `[0.16, 1, 0.3, 1]` per step **Subtext** (`<p>`): Framer Motion: `{ filter: 'blur(10px)', opacity: 0, y: 20 } → { filter: 'blur(0px)', opacity: 1, y: 0 }, duration: 0.6, delay: 0.8, ease: [0.16, 1, 0.3, 1]` Text: "Stunning design. Blazing performance. Built by AI, refined by experts. This is web design, wildly reimagined." Styling: `text-sm md:text-base text-white font-body font-light leading-tight max-w-md` **CTA buttons** (`<div>`): Framer Motion: same blur-in pattern, `delay: 1.1s` Flex row, `gap-4 mt-8` Primary "Get Started": `<a href="#cta">` styled as button `liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-body text-white flex items-center gap-2` ArrowUpRight icon (14px) Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` Secondary "Watch the Film": `<button>` text-only style `text-sm font-body text-white flex items-center gap-2` Play icon (14px, `fill-white`) from lucide-react Hover: `hover:opacity-70 transition-opacity duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 rounded-full outline-none` **Partners bar** (`mt-auto pb-8 pt-16`): "Trusted by the teams behind" `liquid-glass rounded-full px-3.5 py-1 text-xs font-body text-white/60` 5 partner names in a flex row (`gap-12 md:gap-16 mt-6`): Each: `text-2xl md:text-3xl font-heading italic text-white` "Stripe", "Vercel", "Linear", "Notion", "Figma" --- ### SECTION 3: START SECTION / "How It Works" (`<section>`, `aria-labelledby="start-heading"`) Visual hierarchy: Heading → Subtext → CTA Container: `relative overflow-hidden` **Background:** HLS video via hls.js library `<video>` with StartSection Mux URL `absolute inset-0 w-full h-full object-cover z-0` Attributes: `autoPlay, loop, muted, playsInline` Top gradient fade: `absolute top-0 left-0 right-0 h-[200px] bg-gradient-to-b from-black to-transparent pointer-events-none z-[1]` Bottom gradient fade: `absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-black to-transparent pointer-events-none z-[1]` **Content** (`relative z-10, flex flex-col items-center justify-center text-center, minHeight: 500px, py-24 md:py-32 px-6`): Badge: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body mb-5` "How It Works" Heading (`<h2 id="start-heading">`): "You dream it. We ship it." Styling: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]` Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.7, ease: [0.16, 1, 0.3, 1]` Subtext (`<p>`): "Share your vision. Our AI handles the rest wireframes, design, code, launch. All in days, not quarters." Styling: `text-white/60 font-body font-light text-sm md:text-base max-w-lg mt-5 leading-relaxed` Framer Motion: `{ opacity: 0, y: 20 } → { opacity: 1, y: 0 }, duration: 0.6, delay: 0.15` CTA: `<a>` "Get Started" `liquid-glass-strong rounded-full px-6 py-3 text-sm font-body text-white flex items-center gap-2 mt-8` ArrowUpRight icon (14px) Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` --- ### SECTION 4: FEATURES CHESS / Alternating Rows (`<section>`, `aria-labelledby="capabilities-heading"`) Visual hierarchy: Feature GIF/image → Feature title → Body text → "Learn more" button Container: `py-24 md:py-32 lg:py-40 px-6 md:px-8 lg:px-16 bg-black` Inner: `max-w-6xl mx-auto` **Section header:** Badge: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body mb-5` "Capabilities" Heading (`<h2 id="capabilities-heading">`): "Pro features. Zero complexity." Styling: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9]` Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.7` **Row 1** (`flex flex-col md:flex-row gap-8 md:gap-12 items-center mt-16 md:mt-20`): Framer Motion: `{ opacity: 0, y: 50 } → { opacity: 1, y: 0 }, duration: 0.8` Left Content (`md:w-1/2`): Title (`<h3>`): "Designed to convert. Built to perform." `text-2xl md:text-3xl font-heading italic text-white tracking-tight leading-[1]` Body (`<p>`): "Every pixel is intentional. Our AI studies what works across thousands of top sites then builds yours to outperform them all." `text-sm text-white/60 font-body font-light leading-relaxed mt-4` Button: `<a>` "Learn more" `liquid-glass-strong rounded-full px-5 py-2.5 text-sm font-body text-white inline-flex items-center gap-2 mt-6` ArrowUpRight icon (14px) Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` Right Image (`md:w-1/2`): `liquid-glass rounded-2xl overflow-hidden` `<img src={feature1Gif} alt="AI-powered conversion optimization" className="w-full h-auto object-cover" loading="lazy" />` GIF URL for download: `https://motionsites.ai/assets/hero-finlytic-preview-CV9g0FHP.gif` **Row 2** (`flex flex-col md:flex-row-reverse gap-8 md:gap-12 items-center mt-16 md:mt-20`): Framer Motion: `{ opacity: 0, y: 50 } → { opacity: 1, y: 0 }, duration: 0.8, delay: 0.1` Same structure but reversed layout (content right, image left). Right Content: Title: "It gets smarter. Automatically." same styling Body: "Your site evolves on its own. AI monitors every click, scroll, and conversion then optimizes in real time. No manual updates. Ever." Button: "See how it works" same styling Left Image: GIF URL for download: `https://motionsites.ai/assets/hero-wealth-preview-B70idl_u.gif` Same liquid-glass container, `loading="lazy"` --- ### SECTION 5: FEATURES GRID / "Why Us" (`<section>`, `aria-labelledby="why-us-heading"`) Visual hierarchy: Icon → Card title → Card description Container: `py-24 md:py-32 lg:py-40 px-6 md:px-8 lg:px-16 bg-black` Inner: `max-w-6xl mx-auto` **Section header:** Badge: `liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body mb-5` "Why Us" Heading (`<h2 id="why-us-heading">`): "The difference is everything." Same heading styling. **Grid** (`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-14`): Framer Motion stagger: 0.08s per card, `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.6` Each card: `liquid-glass rounded-2xl p-6` Card contents: Icon container: `liquid-glass-strong rounded-full w-10 h-10 flex items-center justify-center mb-4` Icon: lucide-react icon, 18px, `text-white` Title (`<h3>`): `text-base font-body font-medium text-white mt-0` Description (`<p>`): `text-sm text-white/60 font-body font-light leading-relaxed mt-2` 4 cards: 1. Icon: `Zap` "Days, Not Months" "Concept to launch at a pace that redefines fast. Because waiting isn't a strategy." 2. Icon: `Palette` "Obsessively Crafted" "Every detail considered. Every element refined. Design so precise, it feels inevitable." 3. Icon: `BarChart3` "Built to Convert" "Layouts informed by data. Decisions backed by performance. Results you can measure." 4. Icon: `Shield` "Secure by Default" "Enterprise-grade protection comes standard. SSL, DDoS mitigation, compliance. All included." --- ### SECTION 6: STATS (`<section>`, `aria-label="Statistics"`) Visual hierarchy: Stat numbers → Stat labels → Background video Container: `relative overflow-hidden py-24 md:py-32` **Background:** HLS video via hls.js `<video>` with Stats Mux URL `absolute inset-0 w-full h-full object-cover z-0` CSS filter: `filter: saturate(0)` (desaturated / B&W) Attributes: `autoPlay, loop, muted, playsInline` Top gradient: `h-[200px] bg-gradient-to-b from-black to-transparent z-[1]` Bottom gradient: `h-[200px] bg-gradient-to-t from-black to-transparent z-[1]` **Content** (`relative z-10 px-6 md:px-8 lg:px-16`): Inner: `max-w-6xl mx-auto` Card: `liquid-glass rounded-3xl p-12 md:p-16` Framer Motion: `{ opacity: 0, y: 40 } → { opacity: 1, y: 0 }, duration: 0.8` Grid inside card: `grid grid-cols-2 lg:grid-cols-4 gap-8` 4 stats: Each stat: Value: `text-4xl md:text-5xl lg:text-6xl font-heading italic text-white` Label: `text-white/60 font-body font-light text-sm mt-1` 1. "200+" / "Sites launched" 2. "98%" / "Client satisfaction" 3. "3.2x" / "More conversions" 4. "5 days" / "Average delivery" --- ### SECTION 7: TESTIMONIALS (`<section>`, `aria-labelledby="testimonials-heading"`) Visual hierarchy: Quote text → Reviewer name → Role Container: `py-24 md:py-32 lg:py-40 px-6 md:px-8 lg:px-16 bg-black` Inner: `max-w-6xl mx-auto` **Section header:** Badge: "What They Say" Heading (`<h2 id="testimonials-heading">`): "Don't take our word for it." **Grid** (`grid grid-cols-1 md:grid-cols-3 gap-6 mt-14`): Framer Motion stagger: 0.1s per card, `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.6` Each card: `liquid-glass rounded-2xl p-8` Card contents: Quote (`<blockquote>`): `text-white/80 font-body font-light text-sm italic leading-relaxed` Name: `text-white font-body font-medium text-sm mt-5` Role: `text-white/50 font-body font-light text-xs` 3 cards: 1. "A complete rebuild in five days. The result outperformed everything we'd spent months building before." "Sarah Chen" / "CEO, Luminary" 2. "Conversions up 4x. That's not a typo. The design just works differently when it's built on real data." "Marcus Webb" / "Head of Growth, Arcline" 3. "They didn't just design our site. They defined our brand. World-class doesn't begin to cover it." "Elena Voss" / "Brand Director, Helix" --- ### SECTION 8: CTA + FOOTER (`<section id="cta">` + `<footer>`) Visual hierarchy: CTA heading → CTA buttons → Footer links Container: `relative overflow-hidden` **Background:** HLS video via hls.js `<video>` with CTA/Footer Mux URL `absolute inset-0 w-full h-full object-cover z-0` Top gradient: `h-[200px] bg-gradient-to-b from-black to-transparent z-[1]` Bottom gradient: `h-[200px] bg-gradient-to-t from-black to-transparent z-[1]` **CTA Content** (`relative z-10 flex flex-col items-center text-center py-24 md:py-32 px-6`): Heading (`<h2>`): "Your next website starts here." Styling: `text-5xl md:text-6xl lg:text-7xl font-heading italic text-white leading-[0.85] tracking-tight` Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.8` Subtext (`<p>`): "Book a free strategy call. See what AI-powered design can do. No commitment, no pressure. Just possibilities." `text-white/60 font-body font-light text-sm md:text-base max-w-lg mt-5 leading-relaxed` Buttons (`flex items-center gap-4 mt-8`): Primary "Book a Call": `liquid-glass-strong rounded-full px-6 py-3 text-sm font-body text-white flex items-center gap-2` ArrowUpRight icon (14px) Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` Secondary "View Pricing": `bg-white text-black rounded-full px-6 py-3 text-sm font-body font-medium` Hover: `hover:bg-white/90 transition-colors duration-200` Active: `active:scale-[0.97]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 outline-none` **Footer** (`<footer>` inside the same section wrapper): `mt-32 pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4` Left: `text-white/40 text-xs font-body` "© 2026 Studio. All rights reserved." Right: `flex items-center gap-6` Links (`<a>`): "Privacy", "Terms", "Contact" `text-white/40 text-xs font-body` Hover: `hover:text-white/70 transition-colors duration-200` --- ## DESIGN PATTERNS USED THROUGHOUT ``` Every section badge: liquid-glass rounded-full px-3.5 py-1 text-xs font-medium text-white font-body Every section heading: text-4xl md:text-5xl lg:text-6xl font-heading italic text-white tracking-tight leading-[0.9] Every body text: text-white/60 or text-white/70, font-body font-light text-sm md:text-base Primary CTA: liquid-glass-strong rounded-full with ArrowUpRight icon Secondary CTA: bg-white text-black rounded-full Card containers: liquid-glass rounded-2xl Video overlay fades: always linear-gradient(to bottom/top, black, transparent) with pointer-events-none ``` --- ## RESPONSIVE BEHAVIOR | Element | Mobile (<768px) | Tablet (768-1023px) | Desktop (1024px+) | |------------------|----------------------------|-------------------------|----------------------------| | Navbar links | Hidden | Visible in pill | Visible in pill | | Navbar CTA | Hidden (inside pill) | Visible | Visible | | Hero heading | text-6xl | text-7xl | text-[5.5rem] | | Hero badge | Visible | Visible | Visible | | Partners bar | Scrollable horizontal | Visible, gap-12 | Visible, gap-16 | | Feature chess | Stacked vertically | Side-by-side | Side-by-side | | Features grid | 1 column | 2 columns | 4 columns | | Stats grid | 2x2 grid | 4 columns | 4 columns | | Testimonials | 1 column | 3 columns | 3 columns | | CTA buttons | Stacked | Row | Row | | Footer | Stacked, centered | Row, space-between | Row, space-between | | HLS videos | Autoplay (muted OK) | Autoplay | Autoplay | --- ## PERFORMANCE * Hero video: `preload="auto"` (above fold, critical) * All HLS videos: `preload="none"`, initialized via hls.js only when IntersectionObserver fires (>50% visible) * Feature GIFs: `loading="lazy"` on `<img>` tags * Fonts: `font-display: swap`, preconnect to Google Fonts * Backdrop-filter: limit to visible-viewport elements. Off-screen liquid-glass cards should not trigger composite layers * Reduced motion: ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` Framer Motion: check `useReducedMotion()`, set initial states to final values * Stats video `filter: saturate(0)` this is a CSS filter, not a canvas operation, so GPU-accelerated --- ## OVERALL PAGE STRUCTURE ``` <div className="bg-black"> <div className="relative z-10"> <Navbar /> ← fixed floating nav, z-50 <Hero /> ← 1000px tall, CloudFront MP4 video bg <div className="bg-black"> <StartSection /> ← HLS video bg, "How It Works" <FeaturesChess /> ← alternating text/gif rows <FeaturesGrid /> ← 4-card grid <Stats /> ← HLS video bg (desaturated), stats card <Testimonials /> ← 3-card grid <CtaFooter /> ← HLS video bg, CTA + footer </div> </div> </div> ``` --- ## KEY DEPENDENCIES ```json { "motion": "^12.35.0", "hls.js": "^1.6.15", "lucide-react": "^0.462.0", "react-router-dom": "^6.30.1" } ``` Icons from lucide-react: `ArrowUpRight, Play, Zap, Palette, BarChart3, Shield` --- ## ACCEPTANCE CRITERIA ``` [ ] Hero video autoplays on Chrome, Safari, Firefox desktop without user interaction [ ] Hero video poster image shows before video loads [ ] Liquid-glass ::before gradient border is visible on all nav pills, badges, cards, and CTA buttons [ ] Liquid-glass-strong has noticeably stronger blur (50px vs 4px) than liquid-glass [ ] Navbar stays fixed on scroll, always above all content at z-50 [ ] All 5 partner names visible in hero without horizontal scroll on 375px mobile [ ] Font-heading italic renders as Instrument Serif Italic, not faux italic [ ] BlurText animation triggers only once on first scroll-into-view [ ] HLS videos load and play on Safari (webkit) hls.js handles this [ ] Stats video renders fully desaturated (B&W) via CSS filter [ ] Feature GIFs load lazily (network tab confirms no load until scrolled) [ ] No horizontal scrollbar on any viewport width between 320px and 2560px [ ] All text is readable (WCAG AA contrast) against its background [ ] Tab navigation reaches all interactive elements in logical order [ ] prefers-reduced-motion disables blur + translate animations, shows all content immediately [ ] All ::before pseudo-elements on glass components have pointer-events: none ```> Asme: Multi-Section Landing
Build a single-page landing site using React + TypeScript + Vite + Tailwind CSS + Framer Motion (motion/react) + lucide-react. The entire page has a `bg-black` background. Cinematic editorial aesthetic with Instrument Serif typography and liquid glass UI. ## VISUAL HIERARCHY (global eye flow) Hero heading → Email input → About heading → Featured video → Philosophy heading → Services cards ## ANTI-PATTERNS (do NOT add) * No dark/light mode toggle dark only * No hamburger menu hide nav links on mobile, show only logo + "Login" CTA * No parallax or scroll-hijacking * No React Router single page, all sections in one component tree * No component libraries beyond lucide-react * No skeleton screens or loading spinners * No additional box-shadows beyond what liquid-glass provides * No gradient blobs or mesh backgrounds (only the subtle radial gradients specified in About and Services sections) * No emoji in UI text --- ## FONTS Import URL: ``` @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap'); ``` All heading/display text uses `fontFamily: "'Instrument Serif', serif"` inline. Body/UI text uses system sans-serif (default Tailwind). `font-display: swap`. --- ## COLOR THEME ``` Background: black (#000000 / bg-black) Text primary: white Text secondary: white/80, white/70, white/60, white/50, white/40 Borders: white/10 Accent overlays: radial gradients using rgba(255,255,255,0.03) and rgba(255,255,255,0.02) ``` No CSS custom properties Tailwind opacity modifiers handle the hierarchy. --- ## SPACING RHYTHM ``` Hero: min-h-screen About: pt-32 md:pt-44 pb-10 md:pb-14 Featured Video: pt-6 md:pt-10 pb-20 md:pb-32 Philosophy: py-28 md:py-40 Services: py-28 md:py-40 All sections: px-6 Content max-width: max-w-6xl mx-auto (featured video, philosophy, services) ``` --- ## Z-INDEX STACK ``` z-0 background videos z-[1] gradient overlays on videos z-10 section content z-20 navbar ``` --- ## EASING CURVES Framer Motion: `ease: [0.16, 1, 0.3, 1]` for all entrance animations. Hover transitions: `transition-all duration-200` or `transition-colors duration-200`. --- ## LIQUID GLASS CSS (index.css, @layer components) ```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; } ``` --- ## ASSETS Hero video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_074625_a81f018a-956b-43fb-9aee-4d1508e30e6a.mp4 ``` Attributes: `muted, autoPlay, playsInline, preload="auto"`. Starts at `opacity: 0`. Featured section video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260402_054547_9875cfc5-155a-4229-8ec8-b7ba7125cbf8.mp4 ``` Philosophy left video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260307_083826_e938b29f-a43a-41ec-a153-3d4730578ab8.mp4 ``` Services card 1 video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 ``` Services card 2 video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260324_151826_c7218672-6e92-402c-9e45-f1e0f454bdc4.mp4 ``` All below-fold videos: `preload="none"`, `muted, autoPlay, loop, playsInline`. Play/pause via IntersectionObserver. --- ## SECTION 1: HERO (`<section>`, `aria-label="Hero"`, in Index.tsx) Visual hierarchy: Heading → Email input → Subtitle → Manifesto button Container: `min-h-screen relative flex flex-col overflow-hidden` **Background video (z-0):** `absolute inset-0 w-full h-full object-cover object-bottom z-0` Starts at `opacity: 0` (inline style). **Video fade logic** (vanilla JS via useRef, NOT CSS transitions): `onCanPlay`: play the video, then animate opacity 0→1 over 500ms using `requestAnimationFrame` `onTimeUpdate`: when `remaining time <= 0.55s`, animate opacity current→0 over 500ms `onEnded`: set opacity to 0, wait 100ms (`setTimeout`), reset `currentTime = 0`, play again, fade 0→1 over 500ms This creates a seamless loop with smooth crossfade to black between plays. **Navbar** (`<nav>`, `aria-label="Main navigation"`, `relative z-20 px-6 py-6`): Inner: `liquid-glass rounded-full max-w-5xl mx-auto px-6 py-3 flex items-center justify-between` Left: `flex items-center gap-2` Globe icon (lucide-react, 24px, white) + "Asme" text (`text-white font-semibold text-lg`) Hidden on mobile (`hidden md:flex gap-8 ml-8`): links "Features", "Pricing", "About" Each: `text-white/80 text-sm font-medium` Hover: `hover:text-white transition-colors duration-200` Focus: `focus-visible:text-white outline-none` Right: `flex items-center gap-4` "Sign Up" `text-white text-sm font-medium cursor-pointer` Hover: `hover:opacity-80 transition-opacity duration-200` "Login" `liquid-glass rounded-full px-6 py-2 text-white text-sm font-medium` Hover: `hover:bg-white/5 transition-colors duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` **Hero content** (`relative z-10 flex-1 flex flex-col items-center justify-center px-6 py-12 text-center`, with `-translate-y-[20%]`): Heading (`<h1>`): "Know it then" `<em className="italic">all</em>` "." Styling: `text-7xl md:text-8xl lg:text-9xl text-white tracking-tight whitespace-nowrap` Font: `fontFamily: "'Instrument Serif', serif"` inline Email input: `max-w-xl w-full mt-8` Container: `liquid-glass rounded-full pl-6 pr-2 py-2 flex items-center gap-3` `<input>`: `bg-transparent border-none outline-none text-white placeholder:text-white/40 text-sm flex-1 w-full` Placeholder: "Enter your email" Focus: no visible ring (parent pill handles visual focus via liquid-glass) Autofill override: `[-webkit-autofill] bg-transparent text-white` Submit button: `bg-white rounded-full p-3 text-black flex-shrink-0` ArrowRight icon (lucide-react, 20px) Hover: `hover:bg-gray-100 transition-colors duration-200` Active: `active:scale-[0.95]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 outline-none` Subtitle (`<p>`): "Stay updated with the latest news and insights. Subscribe to our newsletter today and never miss out on exciting updates." `text-white text-sm leading-relaxed px-4 mt-4 max-w-md` Manifesto button: `liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium mt-6` Hover: `hover:bg-white/5 transition-colors duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` **Social icons footer** (`relative z-10 flex justify-center gap-4 pb-12`): 3 buttons, each: `liquid-glass rounded-full p-4 text-white/80` Icons (lucide-react, 20px): Instagram, Twitter, Globe Hover: `hover:text-white hover:bg-white/5 transition-all duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` --- ## SECTION 2: ABOUT (AboutSection.tsx) Visual hierarchy: Heading → Label Container: `bg-black pt-32 md:pt-44 pb-10 md:pb-14 px-6 overflow-hidden` Overlay: `bg-[radial-gradient(ellipse_at_top,_rgba(255,255,255,0.03)_0%,_transparent_70%)]` Uses Framer Motion `useInView(ref, { once: true, margin: "-100px" })`. Label: "About Us" `text-white/40 text-sm tracking-widest uppercase` Framer Motion: `{ opacity: 0, y: 20 } → { opacity: 1, y: 0 }, duration: 0.6` Heading (`<h2>`): `text-4xl md:text-6xl lg:text-7xl text-white leading-[1.1] tracking-tight` Font: `fontFamily: "'Instrument Serif', serif"` inline Framer Motion: `{ opacity: 0, y: 40 } → { opacity: 1, y: 0 }, duration: 0.8, delay: 0.1` Text structure: "Pioneering " then `<em className="italic text-white/60">ideas</em>` " for" `<br className="hidden md:block" />` "minds that " then `<em className="italic text-white/60">create, build, and inspire.</em>` --- ## SECTION 3: FEATURED VIDEO (FeaturedVideoSection.tsx) Visual hierarchy: Video → Overlay card → "Explore more" button Container: `bg-black pt-6 md:pt-10 pb-20 md:pb-32 px-6 overflow-hidden` Inner: `max-w-6xl mx-auto` Video container: `rounded-3xl overflow-hidden relative aspect-video` Framer Motion: `{ opacity: 0, y: 60 } → { opacity: 1, y: 0 }, duration: 0.9` `<video>`: `w-full h-full object-cover`, featured section video URL Attributes: `muted, autoPlay, loop, playsInline, preload="none"` (IntersectionObserver) Gradient overlay: `absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent pointer-events-none` Bottom overlay (`absolute bottom-0 left-0 right-0 p-6 md:p-10 flex flex-col md:flex-row items-end justify-between gap-4`): Left info card: `liquid-glass rounded-2xl p-6 md:p-8 max-w-md` Label: "Our Approach" `text-white/50 text-xs tracking-widest uppercase mb-3` Body: "We believe in the power of curiosity-driven exploration. Every project starts with a question, and every answer opens a new door to innovation." `text-white text-sm md:text-base leading-relaxed` Right button: `<a>` "Explore more" `liquid-glass rounded-full px-8 py-3 text-white text-sm font-medium` Framer Motion: `whileHover={{ scale: 1.05 }}, whileTap={{ scale: 0.95 }}` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` --- ## SECTION 4: PHILOSOPHY (PhilosophySection.tsx) Visual hierarchy: "Innovation x Vision" heading → Left video → Right text blocks Container: `bg-black py-28 md:py-40 px-6 overflow-hidden` Inner: `max-w-6xl mx-auto` Heading (`<h2>`): `text-5xl md:text-7xl lg:text-8xl text-white tracking-tight mb-16 md:mb-24` Font: `fontFamily: "'Instrument Serif', serif"` Framer Motion: `{ opacity: 0, y: 40 } → { opacity: 1, y: 0 }, duration: 0.8` Text: "Innovation " `<em className="italic text-white/40">x</em>` " Vision" Grid: `grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12` Left Video: `rounded-3xl overflow-hidden aspect-[4/3]` Framer Motion: `{ opacity: 0, x: -40 } → { opacity: 1, x: 0 }, duration: 0.8` `<video>` with philosophy video URL. `w-full h-full object-cover` Attributes: `muted, autoPlay, loop, playsInline, preload="none"` (IntersectionObserver) Right Content: Framer Motion: `{ opacity: 0, x: 40 } → { opacity: 1, x: 0 }, duration: 0.8, delay: 0.1` Two text blocks separated by `w-full h-px bg-white/10 my-8` Block 1: Label: "Choose your space" `text-white/40 text-xs tracking-widest uppercase mb-4` Body: "Every meaningful breakthrough begins at the intersection of disciplined strategy and remarkable creative vision. We operate at that crossroads, turning bold thinking into tangible outcomes that move people and reshape industries." `text-white/70 text-base md:text-lg leading-relaxed` Block 2: Label: "Shape the future" Body: "We believe that the best work emerges when curiosity meets conviction. Our process is designed to uncover hidden opportunities and translate them into experiences that resonate long after the first impression." --- ## SECTION 5: SERVICES (ServicesSection.tsx) Visual hierarchy: Card video → Card title → Card description Container: `bg-black py-28 md:py-40 px-6 overflow-hidden` Overlay: `bg-[radial-gradient(ellipse_at_center,_rgba(255,255,255,0.02)_0%,_transparent_60%)]` Inner: `max-w-6xl mx-auto` Header row: `flex items-center justify-between mb-12` Left: "What we do" `text-3xl md:text-5xl text-white tracking-tight` Font: `fontFamily: "'Instrument Serif', serif"` Right (hidden mobile): "Our services" `text-white/40 text-sm` Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.7` Grid: `grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8` Each card: `liquid-glass rounded-3xl overflow-hidden group` Framer Motion stagger: 0.15s, `{ opacity: 0, y: 50 } → { opacity: 1, y: 0 }, duration: 0.8` Card video area: `aspect-video overflow-hidden` `<video>`: `w-full h-full object-cover transition-transform duration-700 group-hover:scale-105` Gradient: `absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none` Card body (`p-6 md:p-8`): Top row: `flex items-center justify-between mb-4` Tag: `text-white/40 text-xs tracking-widest uppercase` Icon: ArrowUpRight (lucide-react, 16px) in `liquid-glass rounded-full p-2 text-white` Title (`<h3>`): `text-white text-xl md:text-2xl tracking-tight mb-3` Description: `text-white/50 text-sm leading-relaxed` Card 1: Video: services card 1 URL Tag: "Strategy" Title: "Research & Insight" Description: "We dig deep into data, culture, and human behavior to surface the insights that drive meaningful, lasting change." Card 2: Video: services card 2 URL Tag: "Craft" Title: "Design & Execution" Description: "From concept to launch, we obsess over every detail to deliver experiences that feel effortless and look extraordinary." --- ## RESPONSIVE BEHAVIOR | Element | <768px | 768-1023px | ≥1024px | |------------------|-----------------------|-----------------------|------------------------| | Navbar links | Hidden | Visible | Visible | | Hero heading | text-7xl | text-8xl | text-9xl | | Email input | Full width | max-w-xl | max-w-xl | | About heading | text-4xl | text-6xl | text-7xl | | Philosophy | Stacked | Side-by-side | Side-by-side | | Services cards | 1 column | 2 columns | 2 columns | | Social icons | Visible | Visible | Visible | --- ## PERFORMANCE * Hero video: `preload="auto"` (above fold). Custom fade logic via `requestAnimationFrame` no CSS transitions on opacity. * All other videos: `preload="none"`, IntersectionObserver play/pause (threshold 0.5 play, 0.1 pause) * Fonts: `font-display: swap`. Only one external font (Instrument Serif) * Reduced motion: ```css @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` Framer Motion: `useReducedMotion()` → set initial to final state --- ## KEY DEPENDENCIES ```json { "motion": "^12.35.0", "lucide-react": "^0.462.0" } ``` Icons: `Globe, ArrowRight, Instagram, Twitter, ArrowUpRight` --- ## OVERALL PAGE STRUCTURE ``` <div className="bg-black"> <section> → Hero (min-h-screen, video bg with custom fade) <nav> → Navbar (liquid-glass pill, z-20) <div> → Hero content (heading, email, subtitle) <div> → Social icons footer </section> <AboutSection /> → bg-black, radial gradient overlay <FeaturedVideoSection /> → bg-black, rounded video with overlay card <PhilosophySection /> → bg-black, 2-col grid (video + text) <ServicesSection /> → bg-black, 2-card grid with hover video zoom </div> ``` --- ## ACCEPTANCE CRITERIA ``` [ ] Hero video fades in smoothly on canplay (0→1 over 500ms) [ ] Hero video fades out before end (1→0 over 500ms when remaining ≤ 0.55s) [ ] Hero video resets and replays seamlessly with no visible jump [ ] "Know it then all." renders with "all" in Instrument Serif italic [ ] Email input has no browser autofill yellow background [ ] Navbar liquid-glass pill has visible ::before gradient border [ ] About section heading only animates once (useInView once: true) [ ] Featured video has bottom gradient overlay (from-black/60) [ ] Philosophy section two-column layout stacks on mobile [ ] Services card videos scale up on hover (scale-105, 700ms) [ ] No horizontal scrollbar on 320px–2560px [ ] Tab order: nav links → login → email input → submit → manifesto → socials → rest of page [ ] prefers-reduced-motion: all content visible, no animations ```> Orbis.Nft: NFT Landing Page
Build a single-page NFT landing page called "Orbis.Nft" using React + TypeScript + Vite + Tailwind CSS + lucide-react. Dark space theme with 4 sections: Hero, About, Collection Grid, and CTA. Uses video backgrounds, liquid glass UI, and a specific color/font system. ## VISUAL HIERARCHY (global eye flow) Hero heading → NFT card grid → CTA heading → About heading ## ANTI-PATTERNS (do NOT add) * No dark/light mode toggle dark only * No hamburger menu hide nav links on mobile, show only logo * No parallax, scroll-hijacking, or page transitions * No React Router single page * No component libraries beyond lucide-react * No skeleton screens or loading spinners * No gradient blobs or aurora effects * No additional box-shadows beyond liquid-glass * No 3D transforms or WebGL * No background music or sound effects --- ## FONTS (Google Fonts) Import URL: ``` https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap ``` Role assignments: * Headings / navigation: `Anton` → Tailwind class `font-grotesk` * Cursive accents: `Condiment` → Tailwind class `font-condiment` * Body / description text: system monospace → Tailwind class `font-mono` Tailwind config: ```js fontFamily: { grotesk: ["'Anton'", "sans-serif"], condiment: ["'Condiment'", "cursive"], } ``` `font-display: swap` on both families. --- ## COLOR THEME (Tailwind config) ```js colors: { background: '#010828', // deep dark navy blue cream: '#EFF4FF', // off-white, all text neon: '#6FFF00', // bright green, cursive accents + underline bars } ``` Usage rules: * `neon` (#6FFF00) appears ONLY on: Condiment cursive text, underline bars in the "SEE ALL CREATORS" button, and nowhere else. * All text is `cream` unless specified otherwise. * All backgrounds are `background` (#010828) unless a video covers the section. --- ## SPACING RHYTHM ``` Max content width: max-w-[1831px] mx-auto (all sections) Section horizontal padding: px-4 sm:px-6 md:px-10 lg:px-16 Hero: min-h-screen About: py-16 md:py-24 Collection: py-16 md:py-24 CTA: relative (sized by video aspect ratio) ``` --- ## Z-INDEX STACK ``` z-0 background videos z-10 section content z-50 texture overlay (pointer-events-none) ``` --- ## LIQUID GLASS CSS (index.css, @layer components) ```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; } ``` --- ## TEXTURE OVERLAY Full-screen fixed overlay on top of everything: `fixed inset-0 z-50 pointer-events-none` Uses `/texture.png` (in `public/`) `background-size: cover`, `mix-blend-mode: lighten`, `opacity: 0.6` If `/texture.png` is not available, create a subtle noise texture using CSS: ```css background-image: url("data:image/svg+xml,..."); /* inline noise SVG */ ``` Or skip the texture if the file is missing the page works without it. --- ## ASSETS Hero video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4 ``` About video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4 ``` NFT card video 1 (Score: 8.7/10): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 ``` NFT card video 2 (Score: 9/10): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 ``` NFT card video 3 (Score: 8.2/10): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 ``` CTA video: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4 ``` All videos: `autoPlay, loop, muted, playsInline`. Hero + About: `preload="auto"` (above fold or near). NFT cards + CTA: `preload="none"`, IntersectionObserver play/pause. --- ## SECTION 1: HERO (`<section>`, `aria-label="Hero"`) Visual hierarchy: Heading → Cursive accent → Social icons → Nav links Container: `relative min-h-screen overflow-hidden rounded-b-[32px]` **Background video:** `absolute inset-0 w-full h-full object-cover z-0` Hero video URL. Inner: `relative z-10 max-w-[1831px] mx-auto px-4 sm:px-6 md:px-10 lg:px-16` **Header** (`flex items-center justify-between py-6`): Left Logo: `<a href="#">` Text: "Orbis.Nft" `font-grotesk text-[16px] uppercase text-cream` Hover: `hover:opacity-80 transition-opacity duration-200` Center Nav (`hidden lg:block`): `liquid-glass rounded-[28px] px-[52px] py-[24px]` Links (`<a>`): "Homepage", "Gallery", "Buy NFT", "FAQ", "Contact" Each: `font-grotesk text-[13px] uppercase text-cream` Hover: `hover:text-neon transition-colors duration-200` Focus: `focus-visible:text-neon outline-none` **Hero Content** (`flex flex-col justify-center min-h-[70vh] relative`): Heading (`<h1>`): `font-grotesk uppercase text-cream leading-[1.05] lg:leading-[1]` Size: `text-[40px] sm:text-[60px] md:text-[75px] lg:text-[90px]` Max width: `max-w-[780px] lg:ml-32` Text: ``` Beyond earth and ( its ) familiar boundaries ``` Cursive accent (positioned absolute to the right of heading): Text: "Nft collection" `font-condiment text-neon text-[24px] sm:text-[36px] md:text-[48px]` `absolute -rotate-1 mix-blend-exclusion opacity-90` Position: right side of heading, slightly above center **Social icons Desktop** (`hidden lg:flex flex-col gap-3 absolute top-1/4 right-0`): 3 buttons, each: `liquid-glass rounded-[1rem] w-[56px] h-[56px] flex items-center justify-center` Icons (lucide-react, 20px): Mail, Twitter, Github `text-cream` Hover: `hover:bg-white/10 transition-colors duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` **Social icons Mobile** (`flex lg:hidden justify-center gap-3 mt-8`): Same 3 buttons, centered horizontally. --- ## SECTION 2: ABOUT / INTRO (`<section>`, `aria-label="About"`) Visual hierarchy: Heading → Paragraph → Decorative text Container: `relative min-h-screen overflow-hidden` **Background video:** `absolute inset-0 w-full h-full object-cover z-0` About video URL. Inner: `relative z-10 max-w-[1831px] mx-auto px-4 sm:px-6 md:px-10 lg:px-16 py-16 md:py-24` **Top row** (`flex flex-col lg:flex-row items-start justify-between gap-8`): Left Heading (`<h2>`, `relative`): `font-grotesk uppercase text-cream text-[32px] sm:text-[48px] md:text-[60px]` Text: ``` Hello! I'm orbis ``` Cursive overlay: "Orbis" in `font-condiment text-neon text-[36px] sm:text-[52px] md:text-[68px] absolute -rotate-1 mix-blend-exclusion` positioned at bottom-right of heading. Right Paragraph: `font-mono text-[14px] md:text-[16px] uppercase text-cream max-w-[266px] leading-relaxed` Text: "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space" **Bottom row** (`flex justify-between mt-16 lg:mt-24`): Two columns, each containing 2 paragraphs of the same monospace text at `opacity-10` (decorative, nearly invisible). Right column: `hidden lg:block` On mobile: text uses `text-[#010828]` (same as background = invisible). --- ## SECTION 3: NFT COLLECTION GRID (`<section>`, `aria-labelledby="collection-heading"`) Visual hierarchy: NFT card videos → Rarity scores → Heading → "SEE ALL CREATORS" button Container: `bg-[#010828] py-16 md:py-24` Inner: `max-w-[1831px] mx-auto px-4 sm:px-6 md:px-10 lg:px-16` **Header row** (`flex flex-col lg:flex-row items-start lg:items-end justify-between gap-8 mb-12`): Left Heading (`<h2 id="collection-heading">`): `font-grotesk uppercase text-cream text-[32px] sm:text-[48px] md:text-[60px] leading-[1.1]` Text: ``` Collection of Space objects ``` "Space" `font-condiment text-neon normal-case` "objects" `font-grotesk uppercase` Second line indented: `ml-12 md:ml-24 lg:ml-32` Right "SEE ALL CREATORS" button (`<a>` or `<button>`): Layout: "SEE" large (`text-[32px] sm:text-[48px] md:text-[60px] font-grotesk uppercase text-cream`) + "ALL" / "CREATORS" stacked smaller (`text-[20px] sm:text-[28px] md:text-[36px]`) beside it Below text: neon green bar (`bg-neon w-full`, height `h-[6px] sm:h-[8px] md:h-[10px]`) Hover: `hover:opacity-80 transition-opacity duration-200` **NFT Card Grid** (`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6`): Each card: `liquid-glass rounded-[32px] p-[18px] group` Hover: `hover:bg-white/10 transition-colors duration-300` Video container: `relative pb-[100%] rounded-[24px] overflow-hidden` `<video>`: `absolute inset-0 w-full h-full object-cover` Respective NFT video URL. `autoPlay, loop, muted, playsInline, preload="none"` (IntersectionObserver) Overlay bar at bottom of video: `absolute bottom-4 left-4 right-4` `liquid-glass rounded-[20px] px-5 py-4 flex items-center justify-between` Left: "RARITY SCORE:" label (`text-[11px] text-cream/70 font-mono uppercase`) + score value (`text-[16px] text-cream font-mono font-bold`) Right: circular button (`w-12 h-12 rounded-full bg-gradient-to-br from-[#b724ff] to-[#7c3aed] flex items-center justify-center`) Chevron right SVG inside (white, 16px) `shadow-lg shadow-purple-500/50` Hover: `hover:scale-110 transition-transform duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-purple-400 outline-none` 3 cards with scores: 1. Video 1 Score: "8.7/10" 2. Video 2 Score: "9/10" 3. Video 3 Score: "8.2/10" --- ## SECTION 4: CTA / FINAL (`<section>`, `aria-label="Call to action"`) Visual hierarchy: Heading → Cursive accent → Social icons Container: `relative overflow-hidden` **Background video:** NOT object-cover uses `w-full h-auto block` (native aspect ratio) CTA video URL. **Text overlay** (`absolute inset-0 flex items-center`): Inner: `w-full px-4 sm:px-6 md:px-10 lg:pr-[20%] lg:pl-[15%] text-right` Cursive accent: "Go beyond" `font-condiment text-neon text-[17px] sm:text-[36px] md:text-[48px] lg:text-[68px] mix-blend-exclusion absolute` positioned above heading. Heading (`<h2>`): `font-grotesk uppercase text-cream text-[16px] sm:text-[32px] md:text-[48px] lg:text-[60px] leading-[1.2]` Text: ``` JOIN US. REVEAL WHAT'S HIDDEN. DEFINE WHAT'S NEXT. FOLLOW THE SIGNAL. ``` "JOIN US." has `mb-4 sm:mb-6 md:mb-8 lg:mb-12` before the remaining lines. **Social icons** (`absolute left-[8%] bottom-[12%] sm:bottom-[15%] md:bottom-[18%] lg:bottom-[20%]`): Vertical `liquid-glass rounded-[0.5rem] sm:rounded-[0.75rem] md:rounded-[1rem] lg:rounded-[1.25rem]` container 3 stacked icon buttons (Mail, Twitter, Github) Responsive widths: `w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem]` Similar responsive heights Separated by `border-b border-white/10` (last has no border) Hover: `hover:bg-white/10 transition-colors duration-200` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` --- ## RESPONSIVE BEHAVIOR | Element | <640px | 640-767px | 768-1023px | ≥1024px | |--------------------|---------------------|---------------------|---------------------|----------------------| | Navbar | Logo only | Logo only | Logo only | Logo + pill nav | | Hero heading | 40px | 60px | 75px | 90px | | Social icons | Centered row below | Centered row below | Centered row below | Vertical, top-right | | NFT grid | 1 column | 2 columns | 2 columns | 3 columns | | About layout | Stacked | Stacked | Stacked | Side-by-side | | CTA text | 16px | 32px | 48px | 60px | | CTA social icons | Small, bottom-left | Medium | Medium | Large, bottom-left | --- ## PERFORMANCE * Hero + About videos: `preload="auto"` (above/near fold) * NFT card videos + CTA video: `preload="none"`, IntersectionObserver (threshold 0.5 play, 0.1 pause) * Fonts: `font-display: swap`, preconnect to Google Fonts * Texture overlay: single CSS layer, `pointer-events: none` negligible perf cost * Reduced motion: ```css @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` --- ## KEY DEPENDENCIES ```json { "lucide-react": "^0.462.0" } ``` Icons: `Mail, Twitter, Github` No additional packages needed beyond Vite + React + Tailwind. --- ## ACCEPTANCE CRITERIA ``` [ ] Hero section has rounded-b-[32px] bottom corners clipping the video [ ] All text is uppercase except Condiment cursive accents [ ] Neon green (#6FFF00) appears ONLY on Condiment text and the "SEE ALL CREATORS" underline bar [ ] Texture overlay is visible on top of all content but doesn't block interaction [ ] NFT card rarity score bar has visible liquid-glass effect [ ] Purple gradient button on each card has purple glow shadow [ ] CTA video displays at native aspect ratio (not cropped/covered) [ ] "JOIN US." line has extra bottom margin before remaining lines [ ] Nav links have hover:text-neon transition [ ] Max content width is 1831px on all sections [ ] No horizontal scrollbar on 320px–2560px [ ] All interactive elements keyboard-accessible with visible focus [ ] prefers-reduced-motion: all content visible, no hover transitions [ ] Below-fold videos only play when visible (IntersectionObserver) ```> Nexora: SaaS Dashboard Hero
Build a SaaS landing page hero section using React + Vite + Tailwind CSS + TypeScript + Framer Motion (motion/react) + lucide-react + shadcn/ui Button. The entire page fills exactly 100vh with no scroll. Light theme. The hero includes a fully coded (not an image) dashboard preview. ## VISUAL HIERARCHY (eye flow) Dashboard preview (coded UI) → Headline → CTA buttons → Badge → Subheadline → Navbar ## ANTI-PATTERNS (do NOT add) * No dark mode light only * No hamburger menu hide nav links on mobile, show only logo + CTA * No parallax or scroll effects (page doesn't scroll) * No React Router single static page * No skeleton screens or loading spinners * No gradient blobs, mesh gradients, or aurora effects * No additional box-shadows beyond what is specified * No charting libraries SVG chart is hand-crafted * No real data fetching all dashboard data is hardcoded * No interactive dashboard elements the preview is `select-none pointer-events-none` * The dashboard is NOT an image or screenshot it MUST be coded in React --- ## FONTS Import URL: ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap'); ``` CSS variables: ```css :root { --font-display: 'Instrument Serif', serif; --font-body: 'Inter', sans-serif; } ``` Tailwind config: ```js fontFamily: { display: ['var(--font-display)'], body: ['var(--font-body)'] } ``` `font-display: swap`. --- ## COLOR THEME (:root, HSL) ```css :root { --background: 0 0% 100%; /* white */ --foreground: 210 14% 17%; /* dark charcoal */ --primary: 210 14% 17%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 96%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96%; --muted-foreground: 184 5% 55%; --accent: 239 84% 67%; /* indigo/blue CTA + chart */ --accent-foreground: 0 0% 100%; --border: 0 0% 90%; --ring: 239 84% 67%; --radius: 0.5rem; --shadow-dashboard: 0 25px 80px -12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06); } ``` Accent usage: * `--accent` (indigo blue) appears ONLY on: "Send" action button, SVG chart stroke + fill, and "Book a demo" primary button. Nowhere else. * All component colors use `hsl(var(--token))` no raw hex. --- ## SPACING RHYTHM ``` Page: h-screen flex flex-col overflow-hidden Navbar: px-6 md:px-12 lg:px-20 py-5 Hero: flex-1 flex flex-col items-center pt-8 Badge to heading: mb-6 Heading to subheading: mt-4 Subheading to CTA: mt-5 CTA to dashboard: mt-8 Dashboard padding: p-3 md:p-4 ``` --- ## Z-INDEX STACK ``` z-0 background video z-10 all content (navbar, hero, dashboard) ``` --- ## EASING CURVES Framer Motion: `ease: [0.16, 1, 0.3, 1]` for all entrance animations. --- ## ASSETS Background video (MP4): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260319_015952_e1deeb12-8fb7-4071-a42a-60779fc64ab6.mp4 ``` Attributes: `autoPlay, loop, muted, playsInline, preload="auto"` Position: `absolute inset-0 w-full h-full object-cover z-0` --- ## SECTION 1: NAVBAR (`<nav>`, `aria-label="Main navigation"`) Visual hierarchy: Logo → CTA → Nav links Container: `flex items-center justify-between px-6 md:px-12 lg:px-20 py-5 font-body` **Left Logo:** `<a href="#">` Text: "✦ Nexora" `text-xl font-semibold tracking-tight text-foreground` Hover: `hover:opacity-80 transition-opacity duration-200` **Center Links** (`hidden md:flex gap-8`): `<a>` elements: "Home", "Pricing", "About", "Contact" Each: `text-sm text-muted-foreground font-body` Hover: `hover:text-foreground transition-colors duration-200` Focus: `focus-visible:text-foreground outline-none` **Right CTA:** shadcn/ui `<Button>` component Styling: `rounded-full px-5 text-sm font-medium` using primary variant Text: "Get Started" Focus: default shadcn focus ring --- ## SECTION 2: HERO (`<section>`, `aria-label="Hero"`) Container: `relative flex-1 flex flex-col items-center w-full overflow-hidden` **Background video:** `absolute inset-0 w-full h-full object-cover z-0` **Content wrapper:** `relative z-10 flex flex-col items-center w-full pt-8` **1. Badge:** Framer Motion: `{ opacity: 0, y: 10 } → { opacity: 1, y: 0 }, duration: 0.5, ease: [0.16, 1, 0.3, 1]` `inline-flex items-center gap-1.5 rounded-full border border-border bg-background px-4 py-1.5 text-sm text-muted-foreground font-body mb-6` Text: "Now with GPT-5 support ✨" **2. Headline** (`<h1>`, only h1): Framer Motion: `{ opacity: 0, y: 16 } → { opacity: 1, y: 0 }, duration: 0.6, delay: 0.1` `text-center font-display text-5xl md:text-6xl lg:text-[5rem] leading-[0.95] tracking-tight text-foreground max-w-xl` Text: "The Future of " `<em className="italic">Smarter</em>` " Automation" "Smarter" renders in Instrument Serif italic. **3. Subheadline** (`<p>`): Framer Motion: `{ opacity: 0, y: 16 } → { opacity: 1, y: 0 }, duration: 0.6, delay: 0.2` `mt-4 text-center text-base md:text-lg text-muted-foreground max-w-[650px] leading-relaxed font-body` Text: "Automate your busywork with intelligent agents that learn, adapt, and executeso your team can focus on what matters most." **4. CTA Buttons:** Framer Motion: `{ opacity: 0, y: 16 } → { opacity: 1, y: 0 }, duration: 0.6, delay: 0.3` `mt-5 flex items-center gap-3` Primary "Book a demo": shadcn `<Button>` `rounded-full px-6 py-5 text-sm font-medium font-body` Uses primary variant. Focus: default shadcn focus ring Play button: shadcn `<Button variant="ghost">` `h-11 w-11 rounded-full border-0 bg-background` `shadow-[0_2px_12px_rgba(0,0,0,0.08)]` Hover: `hover:bg-background/80` Play icon (lucide-react): `h-4 w-4 fill-foreground` Focus: default shadcn focus ring **5. Dashboard Preview** (THE CENTERPIECE fully coded in React): Framer Motion: `{ opacity: 0, y: 30 } → { opacity: 1, y: 0 }, duration: 0.8, delay: 0.5` Container: `mt-8 w-full max-w-5xl` Frosted glass wrapper: `rounded-2xl overflow-hidden p-3 md:p-4` with inline styles: ``` background: rgba(255, 255, 255, 0.4) border: 1px solid rgba(255, 255, 255, 0.5) boxShadow: var(--shadow-dashboard) ``` All dashboard internals: `text-[11px] select-none pointer-events-none font-body` **Dashboard layout (flex row):** **Top bar** (full width): Left: Logo "N" in `w-5 h-5 rounded bg-foreground text-background text-[9px] font-bold flex items-center justify-center` + "Nexora" text + ChevronDown icon Center: Search bar `rounded-full bg-secondary px-3 py-1 text-muted-foreground` with "Search..." + "⌘K" Right: "Move Money" button (text-[10px]) + Bell icon + Avatar circle "JB" (`w-6 h-6 rounded-full bg-accent text-white text-[9px] flex items-center justify-center`) **Sidebar** (`w-40 border-r border-border pr-3`): Items (each `py-1.5 px-2 rounded text-[11px]`): "Home" active: `bg-secondary font-medium` "Tasks" with badge "10" (`bg-accent text-white text-[8px] rounded-full px-1.5`) "Transactions", "Payments" (with ChevronRight), "Cards", "Capital", "Accounts" (with ChevronRight) Section divider + "Workflows" label (`text-[9px] text-muted-foreground uppercase tracking-wider`) "Trake rutes", "Payments", "Notifications", "Settings" **Main content** (`flex-1 bg-secondary/30 rounded-lg p-4`): Greeting: "Welcome, Jane" `text-sm font-semibold text-foreground` Action buttons row (`flex gap-2 mt-3`): "Send" `bg-accent text-white rounded-full px-3 py-1 text-[10px]` "Request", "Transfer", "Deposit", "Pay Bill", "Create Invoice" `bg-secondary rounded-full px-3 py-1 text-[10px]` "Customize" text (`text-[10px] text-muted-foreground`) **Two cards side by side** (`flex gap-3 mt-3`, each card `flex-1 basis-0 bg-background rounded-lg p-3 border border-border`): Balance card: Header: "Mercury Balance" with CheckCircle icon (green, 10px) Amount: `text-lg font-semibold` "$8,450,190" + `<span className="text-xs text-muted-foreground">.32</span>` Stats row: "Last 30 Days" label, "+$1.8M" (green), "-$900K" (red) all `text-[10px]` SVG area chart (`h-20 w-full mt-2`): Hand-crafted cubic Bézier path: `M0,60 C30,55 60,40 90,35 C120,30 150,45 180,30 C210,15 240,25 270,20 C300,15 330,10 360,15 L360,80 L0,80 Z` Fill: `linearGradient` from `hsl(var(--accent))` at 15% opacity (top) to transparent (bottom) Stroke: `hsl(var(--accent))`, `strokeWidth="1.5"`, `fill="none"` for the line Separate path with same coordinates for the gradient fill area Accounts card: Header: "Accounts" with Plus and MoreHorizontal icons 3 rows (each `py-3 flex items-center justify-between text-xs`): No visible dividers between rows "Credit" "$98,125.50" "Treasury" "$6,750,200.00" "Operations" "$1,592,864.82" **Transactions table** (below cards, `mt-3`): Header: "Recent Transactions" `text-xs font-medium` Table columns: Date, Description, Amount, Status `text-[10px] text-muted-foreground` 4 rows (`text-[11px]`, alternating `bg-secondary/30`): 1. "Mar 15" / "AWS" / "-$5,200" / "Pending" (amber badge: `bg-amber-100 text-amber-700 rounded-full px-2 py-0.5 text-[8px]`) 2. "Mar 14" / "Client Payment" / "+$125,000" (green text) / "Completed" (green badge: `bg-green-100 text-green-700`) 3. "Mar 13" / "Payroll" / "-$85,450" / "Completed" (green badge) 4. "Mar 12" / "Office Supplies" / "-$1,200" / "Completed" (green badge) The dashboard overflows toward the bottom of the viewport and is clipped by `overflow-hidden` on the page container. This is intentional the bottom of the table fades behind the viewport edge. --- ## RESPONSIVE BEHAVIOR | Element | <768px | 768-1023px | ≥1024px | |------------------|-----------------------|--------------------|----------------------| | Nav links | Hidden | Visible | Visible | | Headline size | text-5xl | text-6xl | text-[5rem] | | Subheadline | text-base | text-lg | text-lg | | Dashboard | Scaled down, overflow | Full sidebar | Full layout | | Dashboard sidebar| Hidden on mobile | Visible | Visible | | CTA buttons | Row | Row | Row | --- ## PERFORMANCE * Video: `preload="auto"` (only one video, ambient background) * Dashboard: pure HTML/CSS rendered in React, no JS interactivity (pointer-events-none) lightweight * SVG chart: single path element with gradient no DOM overhead * Fonts: `font-display: swap`, preconnect * Reduced motion: ```css @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` Framer Motion: `useReducedMotion()` → set initial to final state * Page does not scroll no scroll event listeners needed --- ## KEY DEPENDENCIES ```json { "motion": "^12.35.0", "lucide-react": "^0.462.0", "tailwindcss-animate": "*" } ``` shadcn/ui: `Button` component only. Icons from lucide-react: `Play, ChevronDown, ChevronRight, Bell, CheckCircle, Plus, MoreHorizontal, Search` --- ## OVERALL PAGE STRUCTURE ``` <div className="h-screen flex flex-col bg-background overflow-hidden"> <nav> → Navbar (logo + links + CTA) <section> → Hero (relative, flex-1) <video> → z-0, ambient background <div> → z-10, content wrapper Badge Headline Subheadline CTA Buttons Dashboard Preview (coded UI, clipped at bottom) </div> </section> </div> ``` --- ## ACCEPTANCE CRITERIA ``` [ ] Page fills exactly 100vh no scrollbar [ ] Dashboard is fully coded in React (NOT an image) [ ] Dashboard is non-interactive (select-none, pointer-events-none) [ ] Dashboard bottom overflows past viewport and is clipped cleanly [ ] SVG chart renders smooth cubic Bézier curve with accent-colored gradient fill [ ] "Smarter" in headline renders in Instrument Serif italic [ ] Badge "Now with GPT-5 support ✨" has border and white bg [ ] Accent color (indigo) appears ONLY on: Send button, chart, "Book a demo" button [ ] Status badges: "Pending" = amber, "Completed" = green [ ] Tasks badge shows "10" in accent color pill [ ] Frosted glass wrapper on dashboard has visible box-shadow [ ] Video autoplays behind all content without blocking interaction [ ] No horizontal scrollbar on 320px–2560px [ ] Tab order: logo → nav links → nav CTA → "Book a demo" → play button [ ] prefers-reduced-motion: all content visible immediately [ ] All typography uses semantic tokens (font-display, font-body) not raw font names ```
Hero section prompts
A single above-the-fold section each, with the typography, background and motion spelled out. Use one as the first message of a new project.
> Cinematic Hero: Velorah
Build a single-page cinematic hero section using React + Vite + Tailwind CSS + TypeScript + shadcn/ui. Dark theme. Minimalist editorial aesthetic the video does all the visual work; the UI stays restrained. ## VISUAL HIERARCHY (eye flow) H1 headline → Hero CTA → Navbar logo → Nav links → Subtext ## ANTI-PATTERNS (do NOT add) * No decorative blobs, mesh gradients, or radial gradient overlays * No dark/light mode toggle dark only * No hamburger menu hide nav links on mobile, keep only logo + CTA visible * No parallax, scroll-jacking, or scroll-triggered animations * No React.lazy, code splitting, or router single static page * No extra box-shadows beyond what .liquid-glass provides * No floating particles, cursor effects, or ambient animations * No skeleton loaders or suspense * No emoji in UI text --- ## FONTS Import URL: ``` https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500&display=swap ``` Tokens (CSS custom properties): ``` --font-display: 'Instrument Serif', serif → headings, logo --font-body: 'Inter', sans-serif → nav links, body text, buttons ``` Tailwind config: ```js fontFamily: { display: ['var(--font-display)'], body: ['var(--font-body)'] } ``` `font-display: swap` on both families. Preconnect to `fonts.googleapis.com` and `fonts.gstatic.com`. --- ## COLOR THEME (:root, HSL) ```css :root { --background: 201 100% 13%; /* deep navy */ --foreground: 0 0% 100%; /* white */ --muted-foreground: 240 4% 66%; /* muted gray secondary text, inactive nav */ --primary: 0 0% 100%; --primary-foreground: 0 0% 4%; --secondary: 0 0% 10%; --muted: 0 0% 10%; --accent: 0 0% 10%; --border: 0 0% 18%; --input: 0 0% 18%; } ``` All component colors reference `hsl(var(--token))` no raw hex in JSX. --- ## SPACING RHYTHM ``` Section padding: px-6 md:px-8 Content max-width: max-w-7xl mx-auto Heading to subtext: mt-8 Subtext to CTA: mt-12 ``` --- ## Z-INDEX STACK ``` z-0 <video> background z-10 all foreground content (navbar, hero text, CTA) ``` --- ## EASING CURVES ```css :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } ``` All entrance animations use this curve. --- ## LIQUID GLASS CSS (index.css, @layer components) ```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; } ``` --- ## ANIMATIONS (index.css) ```css @keyframes fade-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-rise { animation: fade-rise 0.8s var(--ease-out-expo) both; } .animate-fade-rise-delay { animation: fade-rise 0.8s var(--ease-out-expo) 0.2s both; } .animate-fade-rise-delay-2 { animation: fade-rise 0.8s var(--ease-out-expo) 0.4s both; } @media (prefers-reduced-motion: reduce) { .animate-fade-rise, .animate-fade-rise-delay, .animate-fade-rise-delay-2 { animation: none; opacity: 1; transform: none; } } ``` --- ## ASSETS Hero video (MP4): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260314_131748_f2ca2a28-fed7-44c8-b9a9-bd9acdd5ec31.mp4 ``` Attributes: `autoPlay, loop, muted, playsInline, preload="auto"` Position: `absolute inset-0 w-full h-full object-cover z-0` --- ## SECTION 1: NAVBAR (`<nav>`, `aria-label="Main navigation"`) Visual hierarchy: Logo → Nav links → CTA Container: `relative z-10 flex items-center justify-between px-8 py-6 max-w-7xl mx-auto` **Left Logo:** `<a href="#">` Text: "Velorah®" ® as `<sup className="text-xs">` Styling: `text-3xl tracking-tight text-foreground font-display` Hover: `hover:opacity-80 transition-opacity duration-200` **Center Links** (`hidden md:flex gap-8`): `<a>` elements: "Home", "Studio", "About", "Journal", "Reach Us" Each: `text-sm font-body text-muted-foreground` "Home" is active: `text-foreground` Hover: `hover:text-foreground transition-colors duration-200` Focus: `focus-visible:text-foreground outline-none` **Right CTA:** `<a>` styled as button Text: "Begin Journey" Styling: `liquid-glass rounded-full px-6 py-2.5 text-sm font-body text-foreground` Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 ring-offset-2 ring-offset-[hsl(var(--background))] outline-none` --- ## SECTION 2: HERO (`<section>`, `aria-label="Hero"`) Container: `relative z-10 flex flex-col items-center justify-center text-center px-6 pt-32 pb-40 py-[90px]` **Heading** (`<h1>`, only h1 on the page): Text: "Where dreams rise through the silence." Emphasis: "dreams" and "through the silence." wrapped in `<em className="not-italic text-muted-foreground">` Styling: `text-5xl sm:text-7xl md:text-8xl leading-[0.95] tracking-[-2.46px] max-w-7xl font-normal font-display text-foreground` Animation: `animate-fade-rise` **Subtext** (`<p>`): Text: "We're designing tools for deep thinkers, bold creators, and quiet rebels. Amid the chaos, we build digital spaces for sharp focus and inspired work." Styling: `text-muted-foreground text-base sm:text-lg max-w-2xl mt-8 leading-relaxed font-body` Animation: `animate-fade-rise-delay` **CTA** (`<a>` styled as button): Text: "Begin Journey" Styling: `liquid-glass rounded-full px-14 py-5 text-base font-body text-foreground mt-12 cursor-pointer` Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 outline-none` Animation: `animate-fade-rise-delay-2` --- ## RESPONSIVE BEHAVIOR | Element | <768px | ≥768px | ≥1024px | |--------------|-----------------|-----------------|-----------------| | Nav links | Hidden | Visible (md:flex) | Visible | | Nav CTA | Visible | Visible | Visible | | H1 size | text-5xl | text-7xl | text-8xl | | Subtext size | text-base | text-lg | text-lg | | Hero CTA | px-10 py-4 | px-14 py-5 | px-14 py-5 | | Video | object-cover | object-cover | object-cover | --- ## PERFORMANCE * Video: `preload="auto"` (only one video on the page) * Backdrop-filter: only 2 elements (nav CTA + hero CTA) no perf concern * Fonts: `font-display: swap`. Preconnect to Google Fonts * Reduced motion: all CSS animations disabled via `@media` query (defined above) --- ## ACCEPTANCE CRITERIA ``` [ ] Video autoplays on Chrome, Safari, Firefox desktop without interaction [ ] Video fills viewport edge-to-edge with no letterboxing [ ] "Velorah®" renders in Instrument Serif, not system serif [ ] ® superscript is noticeably smaller than the logo text [ ] Nav links invisible below 768px, visible at 768px+ [ ] "dreams" and "through the silence." render in muted gray, rest in white [ ] liquid-glass ::before gradient border visible on both CTA buttons [ ] No horizontal scrollbar on 320px–2560px viewports [ ] Tab key reaches: logo → nav links → nav CTA → hero CTA (logical order) [ ] prefers-reduced-motion: all elements visible immediately, no animation ```> VEX: Venture Capital Hero
Build a modern hero section using React + TypeScript + Vite + Tailwind CSS. Dark theme. Bold VC aesthetic full-bleed video, confident typography, glassmorphic navigation. ## VISUAL HIERARCHY (eye flow) Main heading (character animation) → Action buttons → Tag element → Subheading → Navbar ## ANTI-PATTERNS (do NOT add) * No decorative blobs, gradient meshes, or radial overlays * No dark/light mode toggle dark only * No hamburger menu hide nav links on mobile, show only logo + CTA * No parallax, scroll-jacking, or page transitions * No React Router single static page * No particle effects, cursor trails, or ambient canvas * No extra box-shadows beyond what .liquid-glass provides * No skeleton screens or loading spinners * No component libraries beyond lucide-react --- ## FONTS Typography: `'Helvetica Neue', Helvetica, Arial, sans-serif` Font smoothing: `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale` Applied globally to `body` in index.css. --- ## COLOR THEME ``` Background: black (#000000) Text primary: white (#FFFFFF) Text secondary: gray-300 (#D1D5DB) Borders: white with 20% opacity (border-white/20) ``` No CSS custom properties needed simple black/white palette. --- ## SPACING RHYTHM ``` Page padding: p-4 md:p-6 Navbar internal padding: px-6 py-3 Hero content padding: px-6 md:px-12 lg:px-16 Heading to subheading: mt-6 Subheading to buttons: mt-8 ``` --- ## Z-INDEX STACK ``` z-0 <video> background z-10 navbar, hero content, tag element ``` --- ## EASING CURVES All CSS transitions use `ease-out` (default). Character animation: `transition-all duration-500 ease-out` --- ## LIQUID GLASS CSS (index.css, @layer components) ```css .liquid-glass { background: rgba(0, 0, 0, 0.4); 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.3) 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.1) 80%, rgba(255,255,255,0.3) 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; } ``` Note: this variant uses `rgba(0,0,0,0.4)` background darker than the white-bg version in other prompts. --- ## ASSETS Hero video (MP4): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260403_050628_c4e32401-fab4-4a27-b7a8-6e9291cd5959.mp4 ``` Attributes: `autoPlay, loop, muted, playsInline, preload="auto"` Position: `absolute inset-0 w-full h-full object-cover z-0` --- ## SECTION 1: NAVBAR (`<nav>`, `aria-label="Main navigation"`) Visual hierarchy: Logo → CTA → Nav links Container: `relative z-10 p-4 md:p-6` Inner wrapper: `liquid-glass rounded-xl flex items-center justify-between px-6 py-3` **Left Logo:** `<a href="#">` Text: "VEX" `text-2xl font-semibold tracking-tight text-white` Hover: `hover:opacity-80 transition-opacity duration-200` **Center Links** (`hidden md:flex gap-8`): `<a>` elements: "Story", "Investing", "Building", "Advisory" Each: `text-sm text-gray-300 font-medium` Hover: `hover:text-white transition-colors duration-200` Focus: `focus-visible:text-white outline-none` **Right CTA:** `<a>` styled as button Text: "Start a Chat" Styling: `bg-white text-black rounded-lg px-4 py-2 text-sm font-medium` Hover: `hover:bg-gray-100 transition-colors duration-200` Active: `active:scale-[0.97]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 outline-none` --- ## SECTION 2: HERO (`<section>`, `aria-label="Hero"`) Container: `relative z-10 min-h-screen` Layout: `grid grid-cols-1 lg:grid-cols-2 gap-8 px-6 md:px-12 lg:px-16 py-20 items-end` **Left column Content:** **Main Heading** (`<h1>`, only h1): Text: "Shaping tomorrow\nwith vision and action." (two lines via `\n` or `<br>`) Styling: `text-4xl sm:text-5xl md:text-6xl xl:text-7xl text-white font-semibold tracking-[-0.04em] leading-tight` Character-by-character animation: Each character wrapped in `<span>` with inline style: Initial: `opacity: 0; transform: translateX(-18px)` Final: `opacity: 1; transform: translateX(0)` Timing: `transition: all 500ms ease-out` Stagger: 30ms delay per character (`transitionDelay: ${index * 30}ms`) Animation starts after 200ms page load delay Spaces rendered as ` ` in separate non-animated spans **Subheading** (`<p>`): Text: "We back visionaries and craft ventures that define what comes next." Styling: `text-gray-300 text-base lg:text-lg mt-6` Animation: CSS `opacity: 0 → 1`, starts at 800ms, duration 1000ms, `ease-out`, `animation-fill-mode: both` **Action Buttons** (`flex gap-3 mt-8`): Animation: same fade-in, starts at 1200ms, duration 1000ms Button 1 "Start a Chat": `bg-white text-black rounded-lg px-5 py-2.5 text-sm font-medium` Hover: `hover:bg-gray-100 transition-colors duration-200` Active: `active:scale-[0.97]` Focus: `focus-visible:ring-2 focus-visible:ring-white/30 outline-none` Button 2 "Explore Now": `liquid-glass rounded-lg px-5 py-2.5 text-sm font-medium text-white border border-white/20` Hover: `hover:bg-white/10 transition-colors duration-200` Active: `active:scale-[0.97]` Focus: `focus-visible:ring-2 focus-visible:ring-white/20 outline-none` **Right column Tag element** (aligned to bottom-right: `self-end justify-self-end`): Animation: fade-in at 1400ms, duration 1000ms Text: "Investing. Building. Advisory." Styling: `liquid-glass rounded-xl px-6 py-4 text-white text-lg lg:text-2xl font-light border border-white/20` --- ## RESPONSIVE BEHAVIOR | Element | <768px | 768-1023px | ≥1024px | |----------------|-------------------|--------------------|----------------------| | Nav links | Hidden | Visible | Visible | | Heading size | text-4xl | text-6xl | text-7xl | | Layout | 1 column | 1 column | 2 column grid | | Tag element | Below content | Below content | Bottom-right column | | Buttons | Full width, stack | Row | Row | --- ## PERFORMANCE * Single video: `preload="auto"` acceptable for single-page hero * Fonts: system fonts (Helvetica Neue) no external load * Character animation: pure CSS transitions, no JS animation library needed * Reduced motion: ```css @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } ``` --- ## ACCEPTANCE CRITERIA ``` [ ] Video autoplays fullscreen on Chrome, Safari, Firefox [ ] Video covers entire viewport with no letterboxing [ ] Character animation runs left-to-right with stagger on page load [ ] Each character has exactly 30ms delay between them [ ] "Start a Chat" button in navbar matches hero button style [ ] Liquid-glass navbar has dark tinted background (rgba(0,0,0,0.4)) [ ] Tag element sits bottom-right on desktop, below content on mobile [ ] No horizontal scrollbar on 320px–2560px viewports [ ] All buttons keyboard-accessible with visible focus ring [ ] prefers-reduced-motion: all content visible immediately ```> Aethera: Light Cinematic Hero
Build a fullscreen single-page hero section using React + Vite + Tailwind CSS + TypeScript. Light theme. Cinematic editorial aesthetic with custom video fade loop logic. ## VISUAL HIERARCHY (eye flow) H1 headline → Hero CTA → Video background (ambient) → Logo → Nav links ## ANTI-PATTERNS (do NOT add) * No dark mode or theme toggle light only * No hamburger menu hide nav links on mobile, show only logo + CTA * No parallax, scroll-jacking, or scroll-triggered animations * No React Router single static page * No glassmorphism (no backdrop-filter) this is a clean, light design * No gradient blobs, mesh gradients, or decorative overlays * No particles, cursor effects, or ambient canvas * No skeleton screens, loading spinners, or suspense --- ## FONTS Import in `/src/styles/fonts.css`: ```css @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500&display=swap'); ``` CSS variables: ```css :root { --font-display: 'Instrument Serif', serif; --font-body: 'Inter', sans-serif; } ``` `font-display: swap`. Preconnect to Google Fonts. --- ## COLOR THEME ``` Background: white (#FFFFFF) Headlines / logos / buttons: black (#000000) Descriptions / inactive nav: gray (#6F6F6F) Button text: white (#FFFFFF) ``` No CSS custom properties needed simple black/white/gray palette applied directly. --- ## SPACING RHYTHM ``` Navbar: px-8 py-6, max-w-7xl mx-auto Hero: paddingTop: 'calc(8rem - 75px)', pb-40, px-6 Heading to subtext: mt-8 Subtext to CTA: mt-12 ``` --- ## Z-INDEX STACK ``` z-0 <video> background z-[1] gradient overlay on video z-10 navbar, hero content ``` --- ## EASING CURVES ```css :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } ``` --- ## ANIMATIONS (in `/src/styles/theme.css`) ```css @keyframes fade-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-rise { animation: fade-rise 0.8s var(--ease-out-expo) both; } .animate-fade-rise-delay { animation: fade-rise 0.8s var(--ease-out-expo) 0.2s both; } .animate-fade-rise-delay-2 { animation: fade-rise 0.8s var(--ease-out-expo) 0.4s both; } @media (prefers-reduced-motion: reduce) { .animate-fade-rise, .animate-fade-rise-delay, .animate-fade-rise-delay-2 { animation: none; opacity: 1; transform: none; } } ``` --- ## ASSETS Hero video (MP4): ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4 ``` Position: `absolute z-0` with `top: '300px'` and `inset: 'auto 0 0 0'` NOT using `autoPlay loop` uses custom fade-in/fade-out loop logic. --- ## VIDEO FADE LOOP LOGIC (React useEffect + useRef) This creates a seamless manual loop with smooth fade transitions. Do NOT use the native `loop` attribute. ``` On mount (useEffect): Get videoRef.current Set initial opacity to 0 Use requestAnimationFrame loop to continuously monitor: If currentTime < 0.5s → fade in (opacity 0→1 over 0.5s) If (duration - currentTime) < 0.5s → fade out (opacity 1→0 over 0.5s) On 'ended' event: Set opacity to 0 Wait 100ms (setTimeout) Reset currentTime = 0 Call play() Fade in 0→1 over 0.5s On 'canplay' event: Call play() ``` Video attributes: `muted, playsInline, preload="auto"` (NO `autoPlay`, NO `loop` handled manually). Gradient overlays on video: `absolute inset-0 bg-gradient-to-b from-white via-transparent to-white z-[1] pointer-events-none` (Uses `from-background` where background = white) --- ## SECTION 1: NAVBAR (`<nav>`, `aria-label="Main navigation"`) Visual hierarchy: Logo → CTA → Nav links Container: `relative z-10 flex items-center justify-between px-8 py-6 max-w-7xl mx-auto` **Left Logo:** `<a href="#">` Text: "Aethera®" ® as `<sup className="text-xs">` Styling: `text-3xl tracking-tight` with `fontFamily: var(--font-display)`, `color: #000000` Hover: `hover:opacity-70 transition-opacity duration-200` **Center Links** (`hidden md:flex gap-8`): `<a>` elements: "Home", "Studio", "About", "Journal", "Reach Us" Each: `text-sm font-body` with `color: #6F6F6F` "Home" is active: `color: #000000` Hover: `hover:text-black transition-colors duration-200` Focus: `focus-visible:text-black outline-none` **Right CTA:** `<a>` styled as button Text: "Begin Journey" Styling: `rounded-full px-6 py-2.5 text-sm font-body bg-black text-white` Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-black/20 ring-offset-2 ring-offset-white outline-none` --- ## SECTION 2: HERO (`<section>`, `aria-label="Hero"`) Container: `relative z-10 flex flex-col items-center justify-center text-center px-6` Padding: `paddingTop: 'calc(8rem - 75px)'`, `pb-40` **Heading** (`<h1>`, only h1): Text: "Beyond silence, we build the eternal." Emphasis: "silence," and "the eternal." wrapped in `<em className="not-italic">` with `color: #6F6F6F` Styling: `text-5xl sm:text-7xl md:text-8xl max-w-7xl font-normal leading-[0.95] tracking-[-2.46px]` Font: `fontFamily: var(--font-display)`, `color: #000000` Animation: `animate-fade-rise` **Subtext** (`<p>`): Text: "Building platforms for brilliant minds, fearless makers, and thoughtful souls. Through the noise, we craft digital havens for deep work and pure flows." Styling: `text-base sm:text-lg max-w-2xl mt-8 leading-relaxed font-body` Color: `#6F6F6F` Animation: `animate-fade-rise-delay` **CTA** (`<a>` styled as button): Text: "Begin Journey" Styling: `rounded-full px-14 py-5 text-base font-body bg-black text-white mt-12` Hover: `hover:scale-[1.03] transition-transform duration-200` Active: `active:scale-[0.98]` Focus: `focus-visible:ring-2 focus-visible:ring-black/20 outline-none` Animation: `animate-fade-rise-delay-2` --- ## RESPONSIVE BEHAVIOR | Element | <768px | ≥768px | ≥1024px | |--------------|-----------------|-----------------|------------------| | Nav links | Hidden | Visible (md:flex) | Visible | | H1 size | text-5xl | text-7xl | text-8xl | | Subtext | text-base | text-lg | text-lg | | Hero CTA | px-10 py-4 | px-14 py-5 | px-14 py-5 | | Video | Visible, cropped| Visible | Visible | --- ## PERFORMANCE * Video: `preload="auto"` (only one video, above fold) * No backdrop-filter on this page no glass perf concern * Fonts: `font-display: swap`, preconnect * Reduced motion: all CSS animations disabled via `@media` query --- ## OVERALL PAGE STRUCTURE ``` <div className="relative min-h-screen w-full overflow-hidden bg-white"> <video> → z-0, custom fade loop, top: 300px <div> → z-[1], gradient overlay (white → transparent → white) <nav> → z-10, navbar <section> → z-10, hero content </div> ``` --- ## ACCEPTANCE CRITERIA ``` [ ] Video does NOT use native loop attribute manual fade loop via JS [ ] Video fades in over 0.5s at start, fades out over 0.5s before end [ ] Video restarts seamlessly with no visible flicker between loops [ ] Video is positioned at top: 300px (not flush with top of viewport) [ ] Gradient overlay fades video edges to white (top and bottom) [ ] "silence," and "the eternal." render in #6F6F6F, rest in #000000 [ ] "Home" nav link is #000000, all others #6F6F6F [ ] Both CTA buttons are black bg with white text [ ] No horizontal scrollbar on 320px–2560px [ ] Tab order: logo → nav links → nav CTA → hero CTA [ ] prefers-reduced-motion: all content visible immediately [ ] Font-display renders Instrument Serif (not system serif) ```
Designing in Claude instead? See the Claude Design prompts
Starter template and Next.js migration
A fill-in-the-blanks starter for any project, and a prompt for moving a finished Lovable app to Next.js.
> Universal Starter Template
I need a [TYPE OF INTERFACE] for [PURPOSE/AUDIENCE]. Tech stack: React, Vite, Tailwind CSS, TypeScript, shadcn/ui. Design direction: - Style: [2-3 buzzwords, e.g., 'minimal, clinical, rounded'] - Color palette: [specific hex values for primary, secondary, bg, accent] - Typography: [headline font] for display, [body font] for body text - Layout: [grid system or layout pattern] - Reference quality: [2-3 brand/product references, e.g., Stripe, Notion] - Interactions: [hover states, transitions, animations with timing] Component structure: - [Section 1]: [atomic description of elements, content, behavior] - [Section 2]: [atomic description] - [Section 3]: [atomic description] Constraints: - [Spacing/sizing values] - [What NOT to include] - Always make things responsive on all breakpoints, with mobile first. - Use semantic design tokens, never direct colors like text-white or bg-black. Use real content no lorem ipsum or placeholder text. Ask me any questions you need to fully understand this feature.
> Lovable to Next.js Conversion
You are a senior Next.js engineer migrating a Lovable project (React + Vite + Tailwind) to Next.js App Router — keeping the UI pixel-identical while gaining SSR, file-based routing, and next/image. I will paste my Lovable project structure and key files. Migrate it in this exact order: 1. Map the project first — list every route in the Lovable app (react-router paths) and its target app/ directory equivalent (e.g. /about → app/about/page.tsx). Flag any dynamic routes. 2. Scaffold — output the new structure: app/layout.tsx (fonts moved from index.css to next/font, metadata from index.html <head>), app/globals.css (Tailwind directives + design tokens carried over exactly), and one page.tsx per route. 3. Convert components — for each component: keep JSX and Tailwind classes untouched; mark "use client" ONLY on components that use useState/useEffect/event handlers; leave the rest as Server Components. List which got the directive and why. 4. Swap the primitives — react-router <Link to> → next/link <Link href>; <img> → next/image with width/height; useNavigate → useRouter from next/navigation; import.meta.env.VITE_* → process.env.NEXT_PUBLIC_*. 5. Verify — end with a migration checklist: every route renders, no hydration warnings, fonts load via next/font (no FOUT), all images have dimensions, build passes with zero "use client" on purely presentational components. Rules: - Pixel-identical output — do not "improve" the design during migration - No new dependencies beyond next itself unless a react-router feature has no native equivalent (then say so) - Keep the same Tailwind config and design tokens — copy, don't rewrite - If a file is too long to output fully, output it in labeled parts, never truncate silently Paste your Lovable project files below. Start with the route map.
How to use Lovable prompts.
Browse the prompt library
Find a prompt matching your use case. Each card shows its use case, and its vote score once people have voted on it.
Copy the full prompt
Click the copy button on any card. The whole prompt, with its tech stack, design system, sections and constraints, goes to your clipboard.
Open Lovable and paste
Go to lovable.dev, start a new project, and paste the prompt into the chat. Hit generate and Lovable scaffolds the full React + Tailwind app.
Iterate with follow-ups
Ask Lovable for changes in plain English, such as 'make the hero darker', 'add a pricing section' or 'switch to Geist'. It updates the app as you go.
What to include in a Lovable prompt.
A one-line prompt gets a generic app.
Vague prompts leave Lovable guessing at the tech stack, the design system, the component tree. Structured prompts hand it the answers up front, so the first build needs less cleanup.
"build me a landing page"
- − no tech stack
- − no design system
- − no component breakdown
- − more cleanup
Stack + design system + sections + constraints
- + React + Tailwind + shadcn
- + exact hex values
- + section-by-section order
- + less cleanup after the first try
Tech stackDesign systemSectionsConstraints
Landing pages, SaaS dashboards, portfolios, product pages, brutalist layouts
Full React + Tailwind app, ready to deploy or hand off for refinement.
Thumbs up or down on any card. A prompt's score shows once it has votes.
Lovable vs v0, Bolt, and Replit Agent.
| Lovable | v0 | Bolt | Replit Agent | |
|---|---|---|---|---|
| Output | Full React + Tailwind app | Full-stack Next.js apps | Full-stack app | Full-stack in-browser app |
| Best for | Landing pages + SaaS apps | Apps on the Vercel stack | Quick full-stack prototypes | Apps that run in Replit |
| Editing | Chat + visual editor | Chat + Design Mode + code | Chat + code | Code editor + chat |
| Deploy | Built-in + GitHub sync | Vercel deploy + GitHub | Built-in hosting | Replit-hosted |
Lovable suits marketing sites and SaaS apps where the visual editor and GitHub sync matter. v0 suits apps on the Vercel stack. Bolt and Replit Agent lean toward full-stack. We have not benchmarked the four against each other.
Lovable FAQ.
What is Lovable AI and what can I build with it?
Lovable is an AI-powered app builder that generates full React + Tailwind applications from plain-English descriptions. You can build landing pages, SaaS dashboards, portfolios, and product pages, all without writing code. The quality of output depends almost entirely on the quality of your prompt.
Why does my Lovable prompt produce messy or broken UI?
Vague prompts give Lovable no constraints to work with. If you write 'build me a landing page,' Lovable invents the design system, component breakdown, and layout from scratch, and the result is often generic. Most of our prompts specify the tech stack, exact colour values, section order, and what NOT to generate, so the first output needs less cleanup.
What should I include in a Lovable prompt for a landing page?
Every high-quality Lovable landing page prompt needs four parts: (1) the tech stack: React, Tailwind and shadcn; (2) the design system: background, foreground and accent hex values with font pairings; (3) the sections in order: hero, features, social proof, CTA; (4) the constraints: no placeholder images, no lorem ipsum, no mock data. Copy any prompt from this library to see the exact format.
How do I get Lovable to use a specific color palette?
Pass exact hex values in your prompt. Lovable reads color specifications literally. Write: 'background: #0a0a0a, foreground: #f5f5f5, accent: #b5ff4d' so it has exact tokens to apply. Avoid color names like 'dark green', because Lovable can interpret them differently each time.
Can Lovable build full SaaS apps, not just landing pages?
Yes. Lovable can scaffold multi-page SaaS apps with auth flows, dashboards, and settings pages. The prompts in this library cover landing pages and hero sections. For a full app, start with the Universal Starter Template, then prompt each page separately.
Are these Lovable prompts free to use?
Yes. This is an open-access library with no account and no paywall. Every prompt is copy-paste ready. Lovable itself requires an account and has a free tier with limited generations.
More from the library
- Claude Design promptsPrompts for websites, landing pages, dashboards, app UI and pitch decks in Claude Design.
- Claude design skillsHand-checked agent skills for UI, motion and typography, to install once and reuse.
- Claude Code skills for developersHand-checked skills for testing, debugging, code review, security and performance.
- GLM and Kimi promptsPrompts for the open-weight coding models from Zhipu AI and Moonshot AI.
Anything not
We'll fix it
