Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. The design must be responsive and follow these precise specifications:

1. Background & Layout:

Background: Implement a full-screen background video using the HLS stream: https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8. Use hls.js and set enableWorker: false to ensure stability in sandboxed environments.

Overlays: Set the video to 60% opacity. Add a dark linear gradient from the left (#070b0a to transparent) and a bottom-up gradient for readability.

Grid System: Add three thin vertical grid lines (white/10 opacity) at the 25%, 50%, and 75% marks across the screen (visible on desktop).

Central Glow: Place a large horizontal SVG ellipse glow in the center-top area with a cyan/dark green hue, using a 25px Gaussian blur filter.

2. The Liquid Glass Card:

Component: Create a 200x200px floating card positioned above the main headline, shifted exactly 50px upwards using translate-y-[-50px].

CSS Styling (Liquid Glass):

background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.

backdrop-filter: blur(4px).

box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).

Border Effect: A ::before pseudo-element with inset: 0, padding: 1.4px, and a 180-degree white linear gradient. Use -webkit-mask-composite: xor and mask-composite: exclude to create a sharp, high-end border frame.

Content: '[ 2025 ]' tag (14px), 'Taught by Industry Professionals' headline (18px, using Instrument Serif italic for 'Industry'), and a small description (11px).

3. Hero Content & Typography:

Eyebrow: 'Career-Ready Curriculum' in Plus Jakarta Sans, bold, 11px, color #5ed29c.

Main Headline: 'LAUNCH YOUR CODING CAREER.' in Inter Extra Bold, uppercase, tracking-tight. Scale from 40px (mobile) to 72px (desktop). The final period must be green (#5ed29c).

Description: 'Master in-demand coding skills...' in Inter, 14px, 70% white opacity, max-width 512px.

Primary CTA: 'Get Started' button with an ArrowRight icon. Rounded-full, background #5ed29c, text #070b0a, uppercase, bold.

4. Global Navigation:

Header: Sticky/Absolute header with a white minimalist logo.

Desktop Menu: Links for 'PROJECTS', 'BLOG', 'ABOUT', 'RESUME' in Inter, 16px. Hover state: #5ed29c.

Mobile Menu: A functional hamburger menu that toggles a full-screen dark overlay.

5. Required Imports:

Fonts: Inter, Plus Jakarta Sans, and Instrument Serif (italic).

Icons: lucide-react (ArrowRight, Menu, X).

Library: hls.js for video streaming.

Build a Hero section for a DeFi dashboard named RIVR showcasing a sleek, glassmorphism aesthetic. Please mimic these exact specifications to ensure a premium UI.

Dependencies: 

- Use `lucide-react` for icons.

- Use `motion` (imported from `'motion/react'`) for animations.

1. Global Styles (`src/index.css`)

Import the custom 'Helvetica Regular' font, set the Tailwind theme properly, and reset the body. Exact CSS to include:

@import "tailwindcss";

@font-face {

  font-family: "Helvetica Regular";

  src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot");

  src: url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix")format("embedded-opentype"),

  url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2")format("woff2"),

  url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff")format("woff"),

  url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf")format("truetype"),

  url("https://db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular")format("svg");

}

@theme {

 --font-helvetica: "Helvetica Regular", ui-sans-serif, system-ui, sans-serif;

}

:root {

 font-family: var(--font-helvetica);

}

body {

 margin: 0;

 overflow-x: hidden;

 background-color: #f0f0f0;

}

2. App Structure (`src/App.tsx`)

Create a single `<main className="min-h-screen bg-[#f0f0f0]">` instance that returns the `<Hero />` component.

3. Hero Component (`src/components/Hero.tsx`)

Outer wrapper: `<div className="w-full h-screen flex items-center justify-center p-3 md:p-5 bg-[#f0f0f0]">`.

Inner container: `<section className="relative w-full max-w-[1536px] h-full rounded-[1.5rem] md:rounded-[3rem] overflow-hidden shadow-none flex flex-col items-center bg-white/10 group">`

Inside the `<section>`:

- The Video Background: 

 A `<video>` element with `autoPlay muted loop playsInline`. 

 Classes: `absolute inset-0 w-full h-full object-cover object-[65%] lg:object-center z-0`. 

 Source URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260428_193507_4286c423-2fd9-4efd-92bd-91a939453fc1.mp4` (Must use exactly this URL).

- The Content Layer:

 A `<div className="relative z-10 w-full h-full flex flex-col items-center">`.

 Inside it, place: `<Navbar />`, the text container, `<BottomLeftCard />`, and `<BottomRightCorner />`.

- Text Container:

 `<div className="w-full flex flex-col items-center pt-8 px-6 text-center max-w-4xl">`. Inside it:

 - `<HeroBadge />`

 - A `<motion.h1>` with class: `text-4xl sm:text-5xl md:text-6xl lg:text-[80px] font-normal text-[#5E6470] mb-2 tracking-tight leading-[1.05]`. Text: "Fluid Asset Streams". Animation: initial={{ opacity: 0, scale: 0.98 }}, animate={{ opacity: 1, scale: 1 }}, transition={{ duration: 0.8, delay: 0.2 }}.

 - A `<motion.p>` with class: `text-sm sm:text-base md:text-lg text-[#5E6470] opacity-80 leading-relaxed max-w-xl font-normal`. Text: "Access Smart Vaults, stake RIVR, NFTs, transform rigid holdings into liquid cash instantly.". Animation: initial={{ opacity: 0 }}, animate={{ opacity: 1 }}, transition={{ duration: 0.8, delay: 0.4 }}.

4. Navbar Component (`src/components/Navbar.tsx`)

Wrapper: `<nav className="flex items-center justify-between py-6 px-6 md:px-10 w-full relative z-10">`.

- Left Side (hidden spacer for centering): `<div className="flex-1 hidden md:block" />`

- Center Menu: `<ul className="hidden md:flex items-center gap-8 text-[rgb(45,45,45)] font-normal text-sm">`. Include items: Ecosystem, Economics (hasDropdown), Developers, Governance (hasDropdown). List items need: `cursor-pointer hover:opacity-70 transition-opacity flex items-center gap-1 group`. Append a `ChevronRight` icon (classes: `w-4 h-4 transition-transform group-hover:translate-x-0.5`) if hasDropdown is true.

- Mobile Logo: `<div className="md:hidden"><span className="font-regular tracking-tighter text-xl text-[rgba(30,50,90,0.9)]">RIVR</span></div>`

- Right Button: `<div className="flex-1 flex justify-end">` wrapping a `<motion.button>` (whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}). 

 Button classes: `flex items-center bg-[rgba(30,50,90,0.8)] text-white rounded-full pl-2 pr-4 md:pr-6 py-1.5 md:py-2 gap-2 md:gap-3 hover:bg-[rgba(30,50,90,1)] transition-colors group`. Inside button: Add an icon wrapper `<div className="bg-white/20 p-1 md:p-1.5 rounded-full flex items-center justify-center">` containing `ArrowUpRight` (w-4 h-4 md:w-5 md:h-5 text-white), and a text node "Book Demo" (`text-xs md:text-sm font-normal`).

5. HeroBadge Component (`src/components/HeroBadge.tsx`)

Returns a `<motion.div>` (initial opacity 0, y 20; animate opacity 1, y 0; transition duration 0.6, ease "easeOut").

Classes: `flex items-center gap-2 px-4 py-2 rounded-full bg-white/60 backdrop-blur-md border border-white/20 mx-auto mb-3 w-fit`.

Contents: `<Sparkles className="w-4 h-4 text-[rgba(30,50,90,0.8)]" />` and text `<span className="text-[14px] font-normal text-[rgba(30,50,90,0.9)]">Fluid Staking</span>`.

6. BottomLeftCard Component (`src/components/BottomLeftCard.tsx`)

Returns a `<motion.div>` (initial x: -20, opacity: 0; animate x: 0, opacity: 1; transition: duration 0.8, delay 0.2).

Position/Styling: `absolute bottom-28 right-4 left-auto md:left-6 md:right-auto md:bottom-6 lg:bottom-10 lg:left-10 p-3 md:p-4 lg:p-5 rounded-[1.2rem] md:rounded-[1.5rem] lg:rounded-[2.2rem] bg-white/30 backdrop-blur-xl flex flex-col gap-2 lg:gap-3 min-w-[140px] md:min-w-[150px] lg:min-w-[180px] w-fit`.

- Top text block: column with "5.2K" (classes: `text-2xl md:text-3xl font-normal text-[rgba(30,50,90,0.9)] tracking-tight`) and "Active Yielders" (classes: `text-[10px] md:text-[12px] font-normal text-[rgba(30,50,90,0.6)] uppercase tracking-wider`).

- Join Discord `<motion.button>` (hover/tap scale 1.02/0.98). Classes: `flex items-center bg-white rounded-full pl-1.5 pr-5 py-1.5 gap-2 hover:bg-white/90 transition-colors self-start group`. Inside: wrap `ArrowUpRight` in `<div className="bg-[rgba(30,50,90,0.1)] p-1 rounded-full ...">` (using `text-[rgba(30,50,90,0.9)]` for icon) and append "Join Discord" text (`text-[14px] font-normal text-[rgba(30,50,90,0.9)]`).

7. BottomRightCorner Component (`src/components/BottomRightCorner.tsx`)

This requires a complex faux-cutout layout. Use a `<motion.div>` (initial y: 20, opacity: 0; animate y: 0, opacity: 1; duration: 0.8, delay: 0.4).

Classes: `absolute bottom-0 right-0 p-3 pt-5 pl-8 sm:p-4 sm:pt-6 sm:pl-10 md:p-6 md:pt-8 md:pl-14 bg-[#f0f0f0] rounded-tl-[1.5rem] sm:rounded-tl-[2rem] md:rounded-tl-[3.5rem] flex items-center gap-3 sm:gap-4 md:gap-6`.

CRITICAL corner masks to include inside this container:

- Top intersection mask: `<div className="absolute -top-[1.5rem] sm:-top-[2rem] md:-top-[3.5rem] right-0 w-[1.5rem] sm:w-[2rem] md:w-[3.5rem] h-[1.5rem] sm:h-[2rem] md:h-[3.5rem] pointer-events-none"><svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M56 56V0C56 30.9279 30.9279 56 0 56H56Z" fill="#f0f0f0"/></svg></div>`

- Left intersection mask: `<div className="absolute bottom-0 -left-[1.5rem] sm:-left-[2rem] md:-left-[3.5rem] w-[1.5rem] sm:w-[2rem] md:w-[3.5rem] h-[1.5rem] sm:h-[2rem] md:h-[3.5rem] pointer-events-none"><svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M56 56H0C30.9279 56 56 30.9279 56 0V56Z" fill="#f0f0f0"/></svg></div>`

Content: 

- Circle Icon: A div with `bg-[rgba(30,50,90,0.05)] w-10 h-10 md:w-14 md:h-14 rounded-full flex items-center justify-center border border-[rgba(30,50,90,0.1)]` using `ArrowUpRight` (`text-[rgba(30,50,90,0.8)]`).

- Info column containing title "Documentation" (`text-[16px] md:text-[20px] font-normal text-[rgba(30,50,90,0.95)]`). Below it, a line containing text "Library" and a `ChevronRight` icon wrapped in `<div className="flex items-center gap-1 text-[rgba(30,50,90,0.6)] cursor-pointer hover:text-[rgba(30,50,90,0.8)] transition-colors"><span className="text-[12px] md:text-[15px] font-normal">...`

Build a dark monochrome landing page called Mindloop — a newsletter/content platform. Use React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Framer Motion. Fonts: Inter (sans) and Instrument Serif (serif, used for italic accent words). The entire theme is pure black (#000) background with white foreground — no colors or gradients beyond monochrome. Install hls.js and framer-motion.

Design System (index.css)

All CSS variables in HSL (no hsl() wrapper in the variable, just the values):

--background: 0 0% 0%

--foreground: 0 0% 100%

--card: 0 0% 5%

--card-foreground: 0 0% 100%

--primary: 0 0% 100%

--primary-foreground: 0 0% 0%

--secondary: 0 0% 12%

--secondary-foreground: 0 0% 85%

--muted: 0 0% 15%

--muted-foreground: 0 0% 65%

--accent: 170 15% 45%

--accent-foreground: 0 0% 100%

--border: 0 0% 20%

--input: 0 0% 18%

--ring: 0 0% 40%

--hero-subtitle: 210 17% 95%

Liquid Glass Effect (global CSS class .liquid-glass)

.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;

}

Animation Pattern

All sections use a reusable fadeUp helper with staggered delays:

const fadeUp = (delay: number) => ({

 initial: { opacity: 0, y: 20 },

 whileInView: { opacity: 1, y: 0 },

 viewport: { once: true, margin: "-100px" },

 transition: { duration: 0.6, delay, ease: "easeOut" },

});

Page Structure (top to bottom)

1. Navbar (fixed, transparent)

Left: Logo (concentric circles icon — outer w-7 h-7 with border-2 border-foreground/60, inner w-3 h-3 with border border-foreground/60) + "Mindloop" bold text.

Center-left: Nav links ["Home", "How It Works", "Philosophy", "Use Cases"] separated by • dots. Links are text-muted-foreground hover:text-foreground.

Right: 3 social icons (Instagram, Linkedin, Twitter from lucide-react) in liquid-glass circular buttons (w-10 h-10 rounded-full).

No background — fully transparent, fixed top-0 z-50, padding px-8 md:px-28 py-4.

2. Hero Section (full viewport height)

Background: autoplaying looping muted MP4 video covering the entire section.

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_120549_0cd82c36-56b3-4dd9-b190-069cfc3a623f.mp4

Bottom gradient: h-64 bg-gradient-to-t from-background to-transparent for smooth fade to black.

Content (centered, z-10, pt-28 md:pt-32):

Avatar row: 3 overlapping circular avatars (-space-x-2, w-8 h-8 rounded-full border-2 border-background) + "7,000+ people already subscribed" in text-muted-foreground text-sm.

Heading: text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] — "Get Inspired with Us" where "Inspired" is font-serif italic font-normal.

Subtitle: text-lg in hsl(var(--hero-subtitle)) color — "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction."

Email form: liquid-glass rounded-full p-2 max-w-lg container with email input and a white bg-foreground text-background rounded-full px-8 py-3 "SUBSCRIBE" button with whileHover scale 1.03 and whileTap scale 0.98.

3. "Search has changed" Section

Top padding pt-52 md:pt-64, bottom padding pb-6 md:pb-9.

Heading: text-5xl md:text-7xl lg:text-8xl — "Search has changed. Have you?" with "changed." in serif italic.

Subtitle: text-muted-foreground text-lg max-w-2xl mx-auto mb-24.

3 platform cards (grid md:grid-cols-3 gap-12 md:gap-8 mb-20): Each card has a 200x200 icon image centered, platform name (font-semibold text-base), and description (text-muted-foreground text-sm).

ChatGPT icon: local asset icon-chatgpt.png

Perplexity icon: local asset icon-perplexity.png

Google AI icon: local asset icon-google.png

Bottom tagline: "If you don't answer the questions, someone else will." in text-muted-foreground text-sm text-center.

4. Mission Section

Padding pt-0 pb-32 md:pb-44.

Video: Large 800x800 looping autoplaying muted video centered.

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_132944_a0d124bb-eaa1-4082-aa30-2310efb42b4b.mp4

Scroll-driven word-by-word reveal using useScroll and useTransform from framer-motion:

Paragraph 1 (text-2xl md:text-4xl lg:text-5xl font-medium tracking-[-1px]): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." Words "curiosity", "meets", "clarity" are highlighted in --foreground, rest in --hero-subtitle.

Paragraph 2 (text-xl md:text-2xl lg:text-3xl font-medium mt-10): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved."

Each word transitions opacity from 0.15 to 1 based on scroll progress.

5. Solution Section

Padding py-32 md:py-44, border-t border-border/30.

Label: "SOLUTION" in text-xs tracking-[3px] uppercase text-muted-foreground.

Heading: text-4xl md:text-6xl — "The platform for meaningful content" (serif italic on "meaningful").

Video: Rounded rounded-2xl, aspect-[3/1] object-cover.

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260325_125119_8e5ae31c-0021-4396-bc08-f7aebeb877a2.mp4

4-column feature grid (md:grid-cols-4 gap-8): Curated Feed, Writer Tools, Community, Distribution — each with title (font-semibold text-base) and description (text-muted-foreground text-sm).

6. CTA Section

Padding py-32 md:py-44, border-t border-border/30, overflow-hidden.

Background video (HLS via hls.js): absolute inset-0 object-cover z-0.

HLS URL: https://stream.mux.com/8wrHPCX2dC3msyYU9ObwqNdm00u3ViXvOSHUMRYSEe5Q.m3u8

Uses Hls.isSupported() check with fallback to native HLS for Safari.

Overlay: absolute inset-0 bg-background/45 z-[1].

Content (z-10, centered):

Concentric circles logo icon (w-10 h-10 outer, w-5 h-5 inner).

Heading: "Start Your Journey" (serif italic).

Subtitle in text-muted-foreground.

Two buttons: "Subscribe Now" (bg-foreground text-background rounded-lg px-8 py-3.5) and "Start Writing" (liquid-glass rounded-lg).

7. Footer

Simple py-12 px-8 md:px-28 footer.

Left: "© 2026 Mindloop. All rights reserved." in text-muted-foreground text-sm.

Right: Privacy, Terms, Contact links in text-muted-foreground text-sm hover:text-foreground.

Key Dependencies

framer-motion for all animations

hls.js for the CTA background video streaming

@fontsource/inter (400, 500, 600, 700)

@fontsource/instrument-serif (400, 400-italic)

lucide-react for icons

tailwindcss-animate plugin

Assets Needed

3 avatar images (avatar-1.png, avatar-2.png, avatar-3.png)

3 platform icons (icon-chatgpt.png, icon-perplexity.png, icon-google.png)

Create an NFT landing page called "Orbis.Nft" with 4 sections, using a dark space theme. The page uses video backgrounds served from CloudFront, a liquid glass UI effect, and a specific color/font system. Recreate it exactly as described below.

FONTS (Google Fonts)

Anton - Used for all headings and navigation text (aliased as font-grotesk in Tailwind)

Condiment - A cursive script used for accent/overlay text (aliased as font-condiment in Tailwind)

System monospace font (font-mono) - Used for body/description paragraphs

Load via Google Fonts in index.html:

https://fonts.googleapis.com/css2?family=Anton&family=Condiment&display=swap

COLOR SYSTEM (Tailwind config)

Background: #010828 (deep dark navy blue)

cream: #EFF4FF (off-white, used for all text)

neon: #6FFF00 (bright green, used for accent cursive text and underline bars)

LIQUID GLASS CSS EFFECT

Applied via a .liquid-glass class. This is used on the navbar, social icon buttons, NFT cards, and card overlays:

.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

A full-screen fixed texture overlay sits on top of everything (z-50, pointer-events-none). It uses a /texture.png image with mix-blend-mode: lighten at opacity: 0.6, covering the entire viewport with background-size: cover.

SECTION 1: HERO (Full viewport)

Background: Full-bleed looping muted autoplaying video covering the entire section with object-cover

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_045634_e1c98c76-1265-4f5c-882a-4276f2080894.mp4

Container: max-w-[1831px] centered with responsive horizontal padding

Section has rounded-b-[32px] bottom corners, clipping the video

Header:

Left: "Orbis.Nft" logo text in Anton, 16px, uppercase

Center: Navigation bar with liquid-glass effect, rounded-[28px], px-[52px] py-[24px]. Contains 5 links: Homepage, Gallery, Buy NFT, FAQ, Contact. Each link is Anton 13px uppercase. Links have hover:text-neon transition. Nav is hidden on mobile (hidden lg:block).

Hero Content:

Large heading in Anton font, responsive sizing: 40px mobile / 60px sm / 75px md / 90px lg. Uppercase. leading-[1.05] mobile, leading-[1] tablet+. Max width 780px on desktop, offset with lg:ml-32.

Text reads:

Beyond earth

and ( its ) familiar boundaries

Overlaid cursive accent text "Nft collection" in Condiment font (24px-48px responsive), positioned absolute to the right side of the heading, slightly rotated (-rotate-1), in neon green (text-neon), with mix-blend-exclusion and opacity-90.

Social Icons (Desktop):

3 square buttons (56x56px) stacked vertically in top-right corner, each with liquid-glass and rounded-[1rem]. Icons: Mail, Twitter, Github from lucide-react (20x20px). hover:bg-white/10 transition.

Social Icons (Mobile):

Same 3 buttons but centered horizontally below the heading, shown only below lg breakpoint.

SECTION 2: ABOUT / INTRO (Full viewport)

Background: Full-bleed looping muted autoplaying video with object-cover

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_151551_992053d1-3d3e-4b8c-abac-45f22158f411.mp4

Container: Same max-w-[1831px] centered, with generous vertical padding (64px-96px responsive)

Top Row (flex row on desktop, column on mobile):

Left: Heading in Anton, responsive 32px-60px, uppercase:

Hello!

I'm orbis

With an overlaid "Orbis" in Condiment cursive, neon green, mix-blend-exclusion, 36px-68px responsive, positioned absolute at bottom-right of heading, slightly rotated.

Right: Short paragraph in monospace 14px-16px, uppercase, cream color, max-width 266px: "A digital object fixed beyond time and place. An exploration of distance, form, and silence in space"

Bottom Row (flex row, space-between):

Two columns (left and right), each containing 2 identical paragraphs. Same monospace text as above but at opacity-10 (nearly invisible, decorative). Right column hidden below lg. On mobile, text uses text-[#010828] (dark) so it's effectively invisible against the video.

SECTION 3: NFT COLLECTION GRID

Background: Solid #010828 (no video)

Container: Same max-w-[1831px] centered

Header Row:

Left: Heading in Anton, 32px-60px responsive, uppercase:

Collection of

 [indented] Space objects

Where "Space" is in Condiment cursive neon green, and "objects" is in Anton. The second line is indented with ml-12 / ml-24 / ml-32 responsive.

Right: A "SEE ALL CREATORS" button. "SEE" is large (32px-60px), "ALL" and "CREATORS" are stacked smaller (20px-36px) next to it. Below the text is a neon green bar (bg-neon, height 6px-10px responsive, full width of button).

NFT Card Grid:

3-column grid on desktop (lg:grid-cols-3), 2 on tablet, 1 on mobile. Gap 24px.

Each card: liquid-glass container with rounded-[32px], padding 18px, hover:bg-white/10 transition.

Inside each card: a square video container (pb-[100%] aspect ratio trick) with rounded-[24px] overflow hidden.

Video URLs:

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_053923_22c0a6a5-313c-474c-85ff-3b50d25e944a.mp4 (Score: 8.7/10)

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_054411_511c1b7a-fb2f-42ef-bf6c-32c0b1a06e79.mp4 (Score: 9/10)

https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055427_ac7035b5-9f3b-4289-86fc-941b2432317d.mp4 (Score: 8.2/10)

Each card has an overlay bar at the bottom: a liquid-glass bar with rounded-[20px], px-5 py-4, showing "RARITY SCORE:" label (11px, cream/70% opacity) and score value (16px). On the right side of the bar is a circular purple gradient button (48x48px, bg-gradient-to-br from-[#b724ff] to-[#7c3aed]) with a right-arrow chevron SVG inside, with shadow-lg shadow-purple-500/50 and hover:scale-110 transition.

SECTION 4: CTA / FINAL SECTION

Background: Full-width video (NOT object-cover, instead w-full h-auto block so it displays at native aspect ratio)

Video URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260331_055729_72d66327-b59e-4ae9-bb70-de6ccb5ecdb0.mp4

Text Content (positioned absolute over the video):

Right-aligned block, offset with lg:pr-[20%] lg:pl-[15%]

Small "Go beyond" text in Condiment cursive, neon green, mix-blend-exclusion, positioned absolute at top-left of the heading block. Sizes: 17px-68px responsive.

Heading in Anton, responsive 16px-60px, uppercase:

JOIN US.

REVEAL WHAT'S HIDDEN.

DEFINE WHAT'S NEXT.

FOLLOW THE SIGNAL.

"JOIN US." has extra bottom margin (mb-4 to mb-12 responsive) before the remaining lines.

Social Icons (Bottom-left, absolute positioned):

Positioned at left-[8%], bottom-[12%] to bottom-[20%] with responsive breakpoints.

A vertical liquid-glass container with rounded-[0.5rem] to rounded-[1.25rem] responsive, containing 3 stacked icon buttons (Mail, Twitter, Github).

Buttons have responsive widths using viewport units and rem values (e.g., w-[14vw] sm:w-[14.375rem] md:w-[10.78125rem] lg:w-[16.77rem]) and similar responsive heights.

Buttons are separated by border-b border-white/10 dividers (except the last one).

KEY TECHNICAL DETAILS

Framework: React + TypeScript + Vite + Tailwind CSS

Icons: lucide-react (Mail, Twitter, Github)

No additional packages needed beyond what Vite + React + Tailwind provides

All videos: autoPlay loop muted playsInline attributes

Responsive: Mobile-first with sm:, md:, lg: breakpoints throughout

Max content width: 1831px across all sections

All text is uppercase except the Condiment cursive accents which are normal-case

Create a bright, minimal, high-end editorial food photo of Soto Ayam. Clean white studio background, soft diffused lighting, generous negative space, airy and elegant composition. Place the bowl of Soto Ayam slightly lower in the frame on a clean wooden board with minimal props like a simple spoon and folded napkin. 

Professional food photography style, realistic, appetizing, premium feel. 

Text at top center: 

[SOTO AYAM]

[Haji Panciwati]

4:5 vertical ratio, social media ready.

Create a sophisticated illustrated travel poster of [Kota Malang] in a refined contemporary ink-and-wash travel journal style. Format: vertical 3:4 poster Design the image as an elegant hand-drawn travel scene that feels like a premium location sketch captured on site. The artwork should combine expressive black ink linework, loose architectural drawing, and flat hand-painted watercolor / gouache color blocking. Build the composition as one cohesive scenic view, not as separate isolated landmarks. Show the destination through a natural layered composition with: - a strong foreground element characteristic of the destination, such as classic vintage street lamps or a traditional becak - a clear middle ground with everyday local atmosphere along a leafy heritage street like Kayutangan - a background featuring the destination’s most recognizable architecture and landscape, such as the Tugu Monument, classic Dutch colonial buildings, and a faint silhouette of Mount Arjuno in the distance. The image should feel immersive and place-specific, as if viewed from a beautiful real vantage point within the destination. Style: - spontaneous yet confident black ink sketch lines - irregular hand-drawn contours - loose urban sketch / travel journal feeling - simplified but recognizable architecture - expressive line variation - painterly color fills placed beneath the ink drawing - visible white paper between color areas - slightly imperfect, handcrafted elegance - airy, tasteful, editorial composition Color treatment: Use a limited palette inspired by the destination, featuring cool highland greens, warm terracotta, and soft sky blues. Keep the colors restrained, curated, and harmonious. The image should feel fresh, bright, and elegant rather than loud or overly saturated. Background: Keep the background bright, clean, neutral white with abundant untouched white space. Do not use beige, yellowish, sepia, parchment, cream, or vintage paper tones. Typography: Place the destination name “KOTA MALANG” prominently at the top in large, elegant handwritten or brush-style lettering. Place the country or region name “EAST JAVA, INDONESIA” below it in smaller, clean uppercase sans-serif text. Optionally add a short, minimal travel tagline at the bottom in small uppercase text. Important: - Do not arrange landmarks as floating separate icons - Do not make it look like a flat vector poster - Do not make it photorealistic - Do not make it look like a children’s illustration - Do not overfill the image with excessive detail - Do not use a warm vintage paper texture - Preserve a refined editorial feeling with strong sense of place Overall impression: A premium, stylish, hand-drawn travel poster with elegant white space, expressive ink lines, painterly color blocking, and a vivid sense of Kota Malang.

https://vibeui.online/

Prompt: Cinematic Hero Section with Looping Video Background

Create a fullscreen single-page hero section using React + Vite + Tailwind CSS + TypeScript with the following specifications:

Fonts:

Display text (headings, logo): Instrument Serif

Body text (navigation, descriptions): Inter

Import both fonts in /src/styles/fonts.css

Video Background:

URL: https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260328_083109_283f3553-e28f-428b-a723-d639c617eb2b.mp4

Position: top: '300px' with inset: 'auto 0 0 0'

Implement custom fade-in/fade-out loop logic using React useEffect and useRef:

Use requestAnimationFrame to continuously monitor currentTime and duration

Fade in over 0.5s at the start (opacity 0 to 1)

Fade out over 0.5s before the end (opacity 1 to 0)

On ended event: set opacity to 0, wait 100ms, reset currentTime = 0, then play() again

This creates a seamless manual loop with smooth fade transitions

Add gradient overlays: absolute inset-0 bg-gradient-to-b from-background via-transparent to-background positioned over the video

Navigation Bar:

Logo: "Aethera®" (with registered trademark symbol as superscript)

Logo styling: text-3xl, tracking-tight, Instrument Serif, color #000000

Menu items: Home (color #000000), Studio, About, Journal, Reach Us (all others #6F6F6F)

Menu items: text-sm with transition-colors

CTA button: "Begin Journey", rounded-full, px-6 py-2.5, text-sm, black background (#000000), white text, hover scale 1.03

Layout: flex justify-between, px-8 py-6, max-w-7xl mx-auto

Hero Section:

Positioning: paddingTop: 'calc(8rem - 75px)', pb-40

Layout: centered (flex flex-col items-center justify-center text-center), px-6

Headline:

Text: "Beyond silence, we build the eternal."

Styling: text-5xl sm:text-7xl md:text-8xl, max-w-7xl, font-normal

Font: Instrument Serif

Line height: 0.95

Letter spacing: -2.46px

Color: #000000 for main text, #6F6F6F for italic emphasized words ("silence," and "the eternal.")

Animation: animate-fade-rise

Description:

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

Color: #6F6F6F

Animation: animate-fade-rise-delay

Hero CTA Button:

Text: "Begin Journey"

Styling: rounded-full, px-14 py-5, text-base, mt-12

Colors: black background (#000000), white text (#FFFFFF)

Hover: scale 1.03

Animation: animate-fade-rise-delay-2

Colors:

Background: white (#FFFFFF)

Headlines/logos/buttons: black (#000000)

Descriptions/menu items: gray (#6F6F6F)

Button text: white (#FFFFFF)

Animations (in /src/styles/theme.css):

fade-rise: opacity 0 to 1, translateY 20px to 0, duration 0.8s, ease-out

fade-rise-delay: same as fade-rise but with 0.2s delay

fade-rise-delay-2: same as fade-rise but with 0.4s delay

Layout Structure:

Container: relative min-h-screen w-full overflow-hidden

Background video layer (z-0)

Gradient overlay on video

Navigation bar (z-10)

Hero section (z-10)

All elements should be responsive and maintain the glassmorphic aesthetic with the specified padding, positioning, and smooth animations.

A vibrant, expressive painterly illustration of a bright blue vintage 1950s sedan parked on a winding dirt path in front of a charming single-story white Mediterranean-style house with red terracotta tile roof and cheerful bright yellow double doors. The house has blue-framed windows and a small porch. Lush tropical vegetation surrounds the scene: dense green bushes, tall palm trees, and striking trees with vibrant red-orange trunks bearing bright orange fruits. Black power lines crisscross the clear light blue sky. Bold, visible brush strokes, rich saturated colors, joyful and sunny atmosphere, high contrast, expressive style reminiscent of David Hockney and modern illustrative painting, energetic composition with the car positioned in the left foreground, house centered in the background, foliage framing the scene from both sides, warm daylight, highly detailed yet artistic, 8k resolution.

https://github.com/addyosmani/agent-skills

Create a vintage-inspired travel poster in a layered 3D paper-cut collage style, designed like a worn traveler’s scrapbook page. Use torn parchment paper with sepia textures, realistic paper layers, soft drop shadows, and an antique map subtly visible beneath. Arrange iconic landmarks in a balanced composition with delicate handwritten labels and arrows, complemented by lush greenery, cobblestone streets, and charming local architecture. Add whimsical travel details such as a paper airplane with a dotted flight path, flying birds, vintage postage stamps, postal marks, and a compass rose. Finish with elegant serif typography featuring the destination name in large spaced letters and a smaller line listing notable cities below. The overall mood should feel nostalgic, handcrafted, richly detailed, timeless, and suitable for a premium vintage travel poster.

Create a highly detailed 3D pop-up scrapbook scene inside an open leather-bound journal held in one hand, inspired by Malang's heritage and landscapes. A young explorer wearing a casual travel outfit, a backpack, and a camera stands on a stone path surrounded by the iconic Ijen Church (Gereja Ijen), the colorful houses of Kampung Warna-Warni Jodipan, and the historic Singosari temple ruins, with the majestic, misty peaks of Mount Bromo and Mount Semeru blending into the background. Decorate the pages with vintage travel labels, Train tickets (Stasiun Malang), postal stamps, parchment notes, elegant Javanese script (Aksara Jawa), a brass compass, Polaroid photos of apple orchards, pressed jasmine flowers, and tropical wildflowers, creating a realistic, cinematic, handcrafted travel journal with warm lighting, layered papercraft textures, and an adventurous, nostalgic atmosphere.

https://www.cta.gallery/

Close-up macro shot of a dark grey B-2 Spirit stealth bomber scale model resting on a warm wooden workbench. A pair of black precision tweezers held by human fingers inserts a grey pilot seat into a highly detailed cockpit featuring small colored instrument panel decals (yellow, green, red). Bright, even studio lighting. Shallow depth of field. Vertical format (9:16). Photorealistic, clean, sharp detail.

 Image-to-Video Prompt

Theme: Satisfying step-by-step assembly of a B-2 Spirit stealth bomber scale model on a wooden workbench

Visuals: Dark grey plastic fuselage, warm wooden table surface, black precision tweezers, light grey internal components (landing gear, bomb bay), clear canopy, tiny screws, colorful cockpit decals — macro lens captures fine panel lines and intricate detail throughout

Camera: Extreme close-up macro shots with shallow depth of field; hard cuts between assembly stages; occasional low-angle underside shots; bright, even lighting throughout

Style: Clean, precise, satisfying craftsmanship aesthetic — ASMR-adjacent model-building content, vertical 9:16 social media format, photorealistic

Action + Sound Design:

Black tweezers carefully insert a grey pilot seat into the detailed cockpit with colored instrument decals — soft plastic click + quiet ambient workshop hum cut

Tweezers attach the silver nose landing gear assembly into the nose section below the cockpit — subtle snap + faint plastic-on-plastic contact sound cut

Camera reveals the model’s underside — internal bomb bay structure and landing gear bays exposed in light grey plastic against dark grey fuselage, tweezers adjust a wing part — soft tapping + ambient silence cut

The top fuselage section is slowly lowered and pressed onto the lower half, covering the internal structure — gentle plastic press + satisfying click cut

The clear plastic canopy piece is carefully placed over the cockpit opening with tweezers — delicate placement sound + quiet breath cut

Extreme macro close-up: tweezers insert a tiny silver screw into a pre-drilled hole on the wing surface, fine panel lines visible — tiny metallic screwing sound cut

Tweezers place a small flat rectangular panel flush into a recess on the wing surface — soft click + placement tap cut

Low-angle underside shot of the left wing: main landing gear assembly with multiple wheels deploys downward from the gear bay, copper/metallic finish visible inside the door — mechanical deployment sound + soft whoosh cut

Final wide macro shot of the fully assembled B-2 Spirit model standing on its landing gear on the wooden table — a soft fluffy brush gently dusts the top wing surface — gentle brushing sound + calm exhale

System Prompt: High-Fidelity "Liquid Glass" Hero Section

Core Layout: Create a 1600px max-width landing page hero section. The background should be pure white with a subtle, layered gradient glow in the top-left (using blurred ellipses in light blue #60B1FF and #319AFF). The design must be fully responsive, transitioning from a single-column mobile view to a dual-column desktop layout.

Typography:

Headlines & Brand: Use Fustat (Bold).

Body & UI: Use Inter (Normal/Medium).

Hero Headline: "Work smarter, achieve faster" (75px, 1.05 line-height, -2px tracking).

The "Strong Liquid Glass" Navbar:

Position: Sticky at top-[30px], centered, w-fit.

Visuals: backdrop-blur-[50px], background rgba(255,255,255,0.3), rounded-[16px].

Fidelity Details:

Outer Stroke: 1px solid rgba(0,0,0,0.1).

Inner Highlight Shadow: inset 0px 4px 4px 0px rgba(255,255,255,0.25).

Items: Logo "Taskly" (Fustat), Nav links (Home, Features, Company, Pricing), and a glassy "SignUp" button with an arrow icon.

The Glassy Orb (Hero Right):

Source URL: https://future.co/images/homepage/glassy-orb/orb-purple.webm

Blending Mode: Must use mix-blend-screen to filter the black background.

Scaling: scale-125 to make it massive and bleed slightly off-center.

Exact Color Grade (CSS Filter): hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1). This transforms the purple asset into a vibrant, high-end "Electric Brand Blue" that matches the primary CTA.

Hero Content (Hero Left):

Social Proof: A "Rated 4.9/5 by 2700+ customers" badge with five orange #FF801E stars.

Subheadline: "Effortlessly manage your projects, collaborate with your team, and achieve your goals with our intuitive task management tool." (18px, Inter, -1px tracking).

Primary CTA: "Get Started Now" button.

Color: rgba(0,132,255,0.8) with backdrop-blur-[2px].

Details: rounded-[16px], white text, inner highlight shadow inset 0px 4px 4px 0px rgba(255,255,255,0.35), and a white circular arrow icon.

Animation: Scale 1.02 on hover with a smooth transition.

Footer Logos: Include a "Trusted by Top-tier product companies" section at the bottom with 5 grayscale SVG logos (e.g., placeholder logos for tech companies) spaced at gap-[100px].

Key Technical Specs for the Developer:

Video Tag: autoPlay loop muted playsInline.

Container: Use a relative wrapper for the background glow and a z-10 main container for the content.

Smoothing: Apply -webkit-font-smoothing: antialiased for the sharpest typography.

System Prompt: High-Fidelity "Liquid Glass" Hero Section

Core Layout: Create a 1600px max-width landing page hero section. The background should be pure white with a subtle, layered gradient glow in the top-left (using blurred ellipses in light blue #60B1FF and #319AFF). The design must be fully responsive, transitioning from a single-column mobile view to a dual-column desktop layout.

Typography:

Headlines & Brand: Use Fustat (Bold).

Body & UI: Use Inter (Normal/Medium).

Hero Headline: "Work smarter, achieve faster" (75px, 1.05 line-height, -2px tracking).

The "Strong Liquid Glass" Navbar:

Position: Sticky at top-[30px], centered, w-fit.

Visuals: backdrop-blur-[50px], background rgba(255,255,255,0.3), rounded-[16px].

Fidelity Details:

Outer Stroke: 1px solid rgba(0,0,0,0.1).

Inner Highlight Shadow: inset 0px 4px 4px 0px rgba(255,255,255,0.25).

Items: Logo "Taskly" (Fustat), Nav links (Home, Features, Company, Pricing), and a glassy "SignUp" button with an arrow icon.

The Glassy Orb (Hero Right):

Source URL: https://future.co/images/homepage/glassy-orb/orb-purple.webm

Blending Mode: Must use mix-blend-screen to filter the black background.

Scaling: scale-125 to make it massive and bleed slightly off-center.

Exact Color Grade (CSS Filter): hue-rotate(-55deg) saturate(250%) brightness(1.2) contrast(1.1). This transforms the purple asset into a vibrant, high-end "Electric Brand Blue" that matches the primary CTA.

Hero Content (Hero Left):

Social Proof: A "Rated 4.9/5 by 2700+ customers" badge with five orange #FF801E stars.

Subheadline: "Effortlessly manage your projects, collaborate with your team, and achieve your goals with our intuitive task management tool." (18px, Inter, -1px tracking).

Primary CTA: "Get Started Now" button.

Color: rgba(0,132,255,0.8) with backdrop-blur-[2px].

Details: rounded-[16px], white text, inner highlight shadow inset 0px 4px 4px 0px rgba(255,255,255,0.35), and a white circular arrow icon.

Animation: Scale 1.02 on hover with a smooth transition.

Footer Logos: Include a "Trusted by Top-tier product companies" section at the bottom with 5 grayscale SVG logos (e.g., placeholder logos for tech companies) spaced at gap-[100px].

Key Technical Specs for the Developer:

Video Tag: autoPlay loop muted playsInline.

Container: Use a relative wrapper for the background glow and a z-10 main container for the content.

Smoothing: Apply -webkit-font-smoothing: antialiased for the sharpest typography.

Build a React landing page exactly as specified below. Use React 19, Tailwind CSS v4, and motion/react for animations.

1. Fonts & Global CSS Setup:

In index.html, import these Google Fonts:

Instrument Serif (weights 400, italic 400)

Inter (weights 100 to 900)

In src/index.css, import this custom font for the Nokia text:

@import url('https://db.onlinewebfonts.com/c/440b53b1a1c65037f944ff19259d8014?family=Nokia+Cellphone+FC+Small');

Configure the Tailwind theme variables in index.css:

--font-instrument: "Instrument Serif", serif;

--font-serif: "Instrument Serif", serif;

--font-sans: "Inter", sans-serif;

--font-nokia: "Nokia Cellphone FC Small", monospace;

Create a @utility font-instrument { font-family: "Instrument Serif", serif; }

Set the root font-family to var(--font-sans) and apply anti-aliasing.

2. Component Structure:

Create one main App.tsx file containing 4 components: TypingMessages, Navbar, Hero, and App.

3. Navbar Component:

Container: Fixed to the top top-6, centered horizontally left-1/2 -translate-x-1/2, width 95% w-[95%] max-w-5xl. z-50, pointer-events-none.

Nav Tag: pointer-events-auto, backdrop blur, rounded full pill shape, transparent background with border border-black/10. Flex between items.

Logo: Text "dot." using font-instrument text-[28px] tracking-tight text-[#1a1a1a].

Links: "Philosophy", "Trust", "Access", "Tribe". Hidden on mobile, flex on desktop (gap-10). font-sans text-[14px] text-[#1a1a1a] with hover opacity fading.

CTA Button ("Link up"):

Background #0871E7, rounded full, white text font-sans text-[14px].

Shadow: shadow-[inset_0_-4px_4px_rgba(255,255,255,0.39)] outline-1 outline-[#0871E7] -outline-offset-1.

Add a subtle top glint effect using an absolutely positioned rectangle inside the button: w-[80%] h-4 left-[10%] top-[1px] bg-gradient-to-b from-[#DEF0FC] to-transparent rounded-[12px]. Make it scale wider on group hover (group-hover:scale-x-105).

4. Hero Component:

Container: min-h-screen bg-[#F3F4ED] pt-24 md:pt-32 flex column centered.

Video Background: Absolute positioning inset-0 z-0. Use an HTML5 <video> set to autoplay, loop, muted, playsInline, scaling with object-cover.

Video Source: EXACTLY https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260427_054418_a6d194f0-ac86-4df9-abe5-ded73e596d7c.mp4. Add an overlaid empty div with bg-white/5 for a slight tint.

Hero Text Container: Relative z-20, pointer-events-none, text-centered layout.

Main Headline: "Short notes. <br /> Daily calm."

Animate using motion.div (from opacity: 0, scale: 0.95 to opacity: 1, scale: 1 over 1.5s with ease [0.16, 1, 0.3, 1]).

Style: font-instrument text-[38px] md:text-[56px] lg:text-[72px] leading-[0.85] tracking-tight text-[#1a1a1a] mb-6.

Sub-headline: "Linked with a single anonymous peer. One message every day. A quiet rhythm in the digital noise."

Animate using motion.div (from opacity: 0, y: 20 to opacity: 1, y: 0 over 1.2s, delay: 0.3, ease [0.16, 1, 0.3, 1]).

Style: font-sans text-[16px] md:text-[18px] text-[#1a1a1a]/70 leading-relaxed font-normal max-w-xl mx-auto.

Include the TypingMessages component inside the hero to overlap on the phone screen in the video.

5. TypingMessages Component:

Logic: Cycle through an array of messages: ["Are you here?", "Yes, I am.", "Speak soon."].

Typing speed: 100ms. Deleting speed: 50ms. Pause before deleting: 2000ms.

Positioning: Absolute position it to sit perfectly on the phone screen inside the video:

absolute left-[48.5%] md:left-[47.5%] lg:left-[48.5%] -translate-x-1/2 bottom-[32%] z-30 w-[110px] sm:w-[130px] flex justify-start text-left.

Text Style: font-nokia text-[#2A3616] text-[10px] sm:text-[14px] leading-tight break-words min-h-[1.5em].

Cursor: Add a blinking Framer Motion cursor motion.span (w-1.5 h-3 bg-[#2A3616] ml-1 align-middle) animating opacity from 0 to 1 to 0 over 0.8s, repeating infinitely, linearly.

Create a single-page landing page for a creative design studio called "Viktor Oddy" using React, TypeScript, Vite, and Tailwind CSS. Use lucide-react for icons. The page has a white background throughout and uses two custom fonts: "PP Neue Montreal" (body text, loaded from Webflow CDN) and "PP Mondwest" (serif accent font, loaded from a local /PPMondwest-Regular.woff2 file). The body default font is PP Neue Montreal with system fallbacks.

The page consists of these sections in order:

1. HERO SECTION (centered, narrow column max-w-[440px], px-6, pt-12 md:pt-16)

Logo text: "Viktor Oddy" in PP Mondwest serif font, text-[32px] md:text-[40px] lg:text-[44px], font-semibold, color #051A24, tracking-tight, mb-4. Fades in with staggered animation (delay 0.1s).

Tagline: "The creative studio of Viktor Oddy" in monospace font (font-mono), text-xs md:text-sm, color #051A24, mb-2. Animation delay 0.2s.

Main Heading: Two lines: "Build the next wave," and "the bold way." where "next wave" and "bold way." are in PP Mondwest serif. Text is text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight, whitespace-nowrap. Animation delay 0.3s.

Description: Three paragraphs in a flex-col gap-6 container, text-sm md:text-base, color #051A24, leading-relaxed, mt-5 md:mt-6. Animation delay 0.4s.

Paragraph 1: "I spent seven years at Apple crafting products used by over a billion people. I founded Vortex Studio to bring that same level of thinking to innovators shaping what comes next."

Paragraph 2: "The studio is deliberately small. I guide the creative vision on every project, backed by a veteran design crew that moves fast without cutting corners."

Paragraph 3: "Projects start at $5,000 per month."

Two buttons in flex-col sm:flex-row, gap-3 md:gap-4, mt-5 md:mt-6. Animation delay 0.5s:

"Start a chat" (primary: bg-[#051A24], text white, rounded-full, px-7 py-3, with a complex multi-layered box-shadow including an inset highlight)

"View projects" (secondary: bg-white, text #051A24, no border, with subtle shadow)

2. INFINITE MARQUEE (full width, mt-16 md:mt-20, mb-16)

Horizontally scrolling image strip. Uses 8 GIF images duplicated (total 16) in a flex row with animate-marquee CSS animation (translateX(0) to translateX(-50%), 30s linear infinite on desktop, 10s on mobile). Images are h-[280px] md:h-[500px], object-cover, mx-3, rounded-2xl, shadow-lg.

Image URLs (all from motionsites.ai):

https://motionsites.ai/assets/hero-space-voyage-preview-eECLH3Yc.gif

https://motionsites.ai/assets/hero-portfolio-cosmic-preview-BpvWJ3Nc.gif

https://motionsites.ai/assets/hero-velorah-preview-CJNTtbpd.gif

https://motionsites.ai/assets/hero-asme-preview-B_nGDnTP.gif

https://motionsites.ai/assets/hero-transform-data-preview-Cx5OU29N.gif

https://motionsites.ai/assets/hero-aethera-preview-DknSlcTa.gif

https://motionsites.ai/assets/hero-orbit-web3-preview-BXt4OttD.gif

https://motionsites.ai/assets/hero-nexora-preview-cx5HmUgo.gif

3. TESTIMONIAL QUOTE SECTION (py-12, px-6, max-w-2xl, centered)

A quote icon (lucide-react Quote, w-6 h-6, text-slate-900). Animation delay 0.1s.

Large quote text: 'I left Apple to build the studio I always wanted to work with' where "Apple" is in PP Mondwest serif. Text sizing: text-[32px] md:text-[40px] lg:text-[44px], leading-[1.1], color #0D212C, tracking-tight. Animation delay 0.2s.

Author: "Viktor Oddy" in italic, text-sm, color #273C46. Animation delay 0.3s.

Three company logo names displayed as text: "Apple" (80px wide, 24px font), "IDEO" (83px wide, 24px font), "Polygon" (110px wide, 24px font). Font-medium, text-slate-900. Animation delay 0.4s.

Below logos: A parallax image (scrolls with a parallax effect based on viewport position, max offset 200px). The image URL is: https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260330_103804_7aa5494f-4d5b-432e-9dc7-20715275f143.png&w=1280&q=85. Alt text "Chris Halaska". w-full max-w-xs rounded-2xl shadow-lg. Animation delay 0.5s. The parallax uses IntersectionObserver + scroll listener with requestAnimationFrame.

4. PRICING SECTION (full width, py-12, px-6)

Two cards in a grid (grid-cols-1 md:grid-cols-2, gap-8), aligned right on desktop (md:justify-end, md:max-w-4xl). Each card has rounded-[40px], pl-10 pr-10 md:pr-24 pt-3 pb-10.

Card 1 (Dark): bg-[#051A24], inset shadow. Text color #F6FCFF / #E0EBF0. Animation delay 0.1s.

Title: "Monthly Partnership" (text-[22px], font-medium)

Description: "A dedicated creative design team. / You work directly with Viktor."

Price: "$5,000" (text-2xl, color #F6FCFF), "Monthly" below

Two buttons: "Start a chat" (primary) + "How it works" (secondary), both linking to https://halaskastudio.com/./book

Card 2 (Light): bg-white, shadow-[0_4px_16px_rgba(0,0,0,0.08)]. Animation delay 0.2s.

Title: "Custom Project" (text-[22px], font-medium)

Description: "Fixed scope, fixed timeline. / Same team, same standards."

Price: "$5,000" (text-2xl, color #0D212C), "Minimum" below

One button: "Start a chat" (tertiary variant: white bg with combined shadow)

5. TESTIMONIAL CAROUSEL (full width, py-20)

Header row (md:max-w-4xl, md:ml-auto): Title "What builders say" (where "builders" is in PP Mondwest serif, same large heading size) on left. On the right: 5 filled black star icons (lucide-react Star, w-5 h-5, fill-black) + "Clutch 5/5" text.

Auto-scrolling carousel (3s interval, pauses on hover) with prev/next circular buttons (w-12 h-12 rounded-full, border border-[#0D212C]/20, lucide ChevronLeft/ChevronRight).

Cards are 427.5px wide on desktop (full width minus 48px on mobile), gap-6, with exit animation (opacity fade + scale down). Each card: bg-white, rounded-[32px] md:rounded-[40px], shadow-[0_4px_16px_rgba(0,0,0,0.08)], px-6 md:pl-10 md:pr-24 py-8.

Card content: SVG quote mark icon (custom path), quote text (text-base, color #0D212C, leading-relaxed), author row with circular avatar (w-12 h-12), name (font-semibold, text-sm), role/company with arrow prefix.

Testimonials array uses Pexels avatar images. The testimonials are tripled for infinite scroll effect. Transform uses cubic-bezier(0.4, 0, 0.2, 1) with 0.8s transition.

5 testimonials:

Marcus Anderson, CEO, Data.storage - "With very little guidance team delivered designs that were consistently spot on..."

alexwu, Founder, Nexgate - "Viktor led the creation of our best fundraising deck to date!..."

James Mitchell, VP Product, LaunchPad - "Working with Viktor transformed our product vision..."

Rachel Foster, Co-founder, Nexus Labs - "The design quality exceeded our expectations..."

David Zhang, Head of Design, Paradigm Labs - "Incredible work from start to finish..."

6. PROJECTS SECTION (max-w-[1200px], px-6, py-12)

Vertical stack of 3 project items (gap-16 md:gap-20). Each has:

Text block offset left (ml-20 md:ml-28): Project name in PP Mondwest serif (text-2xl md:text-3xl, font-semibold, color #051A24) + description (text-sm md:text-base, color #051A24/70)

Full-width image below (rounded-2xl, shadow-lg, object-cover)

Each item independently triggers fade-in animation via IntersectionObserver.

Projects:

"evr" - "From idea to millions raised for a web3 AI product" - https://motionsites.ai/assets/hero-evr-ventures-preview-DZxeVFEX.gif

"Automation Machines" - "Streamlining industrial automation processes" - https://motionsites.ai/assets/hero-automation-machines-preview-DlTveRIN.gif

"xPortfolio" - "Modern portfolio management platform" - https://motionsites.ai/assets/hero-xportfolio-preview-D4A8maiC.gif

7. PARTNER SECTION (full width, py-12, px-6)

Large white container (max-w-7xl, py-48, rounded-[40px], subtle shadow). On mouse hover, GIF thumbnails (from the marquee images array) spawn at cursor position with random rotation (-10 to +10 deg), fade out over 1000ms with scale-down, spawning every 80ms minimum. Uses requestAnimationFrame-style cleanup.

Centered heading: "Partner with us" in PP Mondwest serif, text-[48px] md:text-[64px] lg:text-[80px], color #0D212C, mb-12.

CTA button: Dark pill with circular avatar image (Pexels photo 415829, w-10 h-10 rounded-full) + "Start chat with Viktor". Same primary button shadow style.

8. FOOTER (full width, py-12, px-6, max-w-[1200px])

Flex row (md:flex-row). Left side: "Start a chat" primary button. Right side: ArrowUpRight icon (lucide-react), then two columns of links:

Column 1: Services, Work, About (anchor links)

Column 2: x.com, LinkedIn (external links, target _blank)

All links: text-base, color #051A24, hover:opacity-70 transition.

9. COPYRIGHT BAR (max-w-[1200px], px-6, py-4)

Flex row justify-between: "Vortex Studio Limited" on left, "Austin, USA" on right. Text-sm, color #051A24.

10. FIXED BOTTOM NAV (z-50, centered)

Floating pill fixed to bottom (bottom-6, centered via left-1/2 -translate-x-1/2). White bg, rounded-full, px-8 py-2, complex layered shadow. Contains: "V" letter in PP Mondwest serif (text-2xl, font-semibold, color #051A24) + "Start a chat" primary button.

ANIMATIONS:

All sections use a custom useInViewAnimation hook (IntersectionObserver with threshold 0.1, triggers once). Elements get class animate-fade-in-up when in view (otherwise opacity-0). The animation is defined in CSS:

@keyframes fadeInUp {

 0% { opacity: 0; transform: translateY(30px); }

 100% { opacity: 1; transform: translateY(0); }

}

.animate-fade-in-up {

 animation: fadeInUp 0.8s ease-out forwards;

 opacity: 0;

}

Each element within a section has staggered animationDelay values (0.1s, 0.2s, 0.3s, etc.).

COLOR PALETTE:

Primary dark: #051A24

Secondary dark: #0D212C

Light text on dark: #F6FCFF, #E0EBF0

Body text: #051A24

Muted text: #273C46

Background: white throughout

BUTTON SHADOWS (critical for the design feel):

Primary: 0_1px_2px_0_rgba(5,26,36,0.1), 0_4px_4px_0_rgba(5,26,36,0.09), 0_9px_6px_0_rgba(5,26,36,0.05), 0_17px_7px_0_rgba(5,26,36,0.01), 0_26px_7px_0_rgba(5,26,36,0), inset_0_2px_8px_0_rgba(255,255,255,0.5)

Secondary: 0_0_0_0.5px_rgba(0,0,0,0.05), 0_4px_30px_rgba(0,0,0,0.08)

FONTS (CSS):

@font-face {

 font-family: 'PP Neue Montreal';

 src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9bb43e36419997ecfe_PPNeueMontreal-Book.otf') format('opentype');

 font-weight: 400;

 font-display: swap;

}

@font-face {

 font-family: 'PP Neue Montreal';

 src: url('https://assets.website-files.com/6009ec8cda7f305645c9d91b/60176f9b39c5673e51a86f5a_PPNeueMontreal-Medium.otf') format('opentype');

 font-weight: 500;

 font-display: swap;

}

@font-face {

 font-family: 'PP Mondwest';

 src: url('/PPMondwest-Regular.woff2') format('woff2');

 font-weight: 400;

 font-display: swap;

}

FILE STRUCTURE:

src/App.tsx - Main layout with hero, marquee, and section composition

src/components/Button.tsx - Reusable button (primary/secondary/tertiary variants)

src/components/TestimonialSection.tsx - Quote with parallax image

src/components/PricingSection.tsx - Two pricing cards

src/components/TestimonialCarousel.tsx - Auto-scrolling testimonial cards

src/components/ProjectsSection.tsx - Project showcase items

src/components/PartnerSection.tsx - Interactive mouse-trail CTA section

src/components/Footer.tsx - Footer with links

src/components/CopyrightBar.tsx - Copyright line

src/components/BottomNav.tsx - Fixed floating bottom nav

src/hooks/useInViewAnimation.ts - IntersectionObserver scroll-trigger hook

src/index.css - Font faces, marquee animation, fade-in-up animation

Create a high-end, dark-themed hero section for a coding education platform called 'CodeNest' using React and Tailwind CSS. The design must be responsive and follow these precise specifications:

1. Background & Layout:

Background: Implement a full-screen background video using the HLS stream: https://stream.mux.com/tLkHO1qZoaaQOUeVWo8hEBeGQfySP02EPS02BmnNFyXys.m3u8. Use hls.js and set enableWorker: false to ensure stability in sandboxed environments.

Overlays: Set the video to 60% opacity. Add a dark linear gradient from the left (#070b0a to transparent) and a bottom-up gradient for readability.

Grid System: Add three thin vertical grid lines (white/10 opacity) at the 25%, 50%, and 75% marks across the screen (visible on desktop).

Central Glow: Place a large horizontal SVG ellipse glow in the center-top area with a cyan/dark green hue, using a 25px Gaussian blur filter.

2. The Liquid Glass Card:

Component: Create a 200x200px floating card positioned above the main headline, shifted exactly 50px upwards using translate-y-[-50px].

CSS Styling (Liquid Glass):

background: rgba(255, 255, 255, 0.01) with background-blend-mode: luminosity.

backdrop-filter: blur(4px).

box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1).

Border Effect: A ::before pseudo-element with inset: 0, padding: 1.4px, and a 180-degree white linear gradient. Use -webkit-mask-composite: xor and mask-composite: exclude to create a sharp, high-end border frame.

Content: '[ 2025 ]' tag (14px), 'Taught by Industry Professionals' headline (18px, using Instrument Serif italic for 'Industry'), and a small description (11px).

3. Hero Content & Typography:

Eyebrow: 'Career-Ready Curriculum' in Plus Jakarta Sans, bold, 11px, color #5ed29c.

Main Headline: 'LAUNCH YOUR CODING CAREER.' in Inter Extra Bold, uppercase, tracking-tight. Scale from 40px (mobile) to 72px (desktop). The final period must be green (#5ed29c).

Description: 'Master in-demand coding skills...' in Inter, 14px, 70% white opacity, max-width 512px.

Primary CTA: 'Get Started' button with an ArrowRight icon. Rounded-full, background #5ed29c, text #070b0a, uppercase, bold.

4. Global Navigation:

Header: Sticky/Absolute header with a white minimalist logo.

Desktop Menu: Links for 'PROJECTS', 'BLOG', 'ABOUT', 'RESUME' in Inter, 16px. Hover state: #5ed29c.

Mobile Menu: A functional hamburger menu that toggles a full-screen dark overlay.

5. Required Imports:

Fonts: Inter, Plus Jakarta Sans, and Instrument Serif (italic).

Icons: lucide-react (ArrowRight, Menu, X).

Library: hls.js for video streaming.

Create a fullscreen cinematic hero section for a mindfulness/focus app called "Lumora" using React, Tailwind CSS, and Lucide React icons.

## Font

Use **Instrument Serif** (Google Fonts, italic for the logo). Load it in index.html:

```

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">

```

Set `font-family: 'Instrument Serif', serif` on html/body. Use `system-ui, sans-serif` inline for body text (subtext, buttons, stats, video labels).

---

## Background Video Layer

Stack 4 fullscreen looping videos absolutely positioned. Only the active one has `opacity-100`; others have `opacity-0`. Transition opacity over 1000ms ease-in-out. Videos autoPlay, muted, loop, playsInline.

**Video URLs (in order):**

1. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_081127_0992a171-d3c6-4978-8213-0ec5df8b6d63.mp4`

2. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_092026_dd05b805-ea0f-40b2-8c52-332b88502592.mp4`

3. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_081042_df7202bf-bd80-4b2b-bbc6-1f09ba2870e9.mp4`

4. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_080959_4cac5234-3573-464e-a5b7-76b94b8a7d61.mp4`

**Labels:** Golden Hour, Still Water, Deep Woods, Quiet Dawn

---

## Transparent PNG Overlay (z-index 1)

Place this image over the videos as an absolutely positioned overlay covering the full viewport:

```

https://soft-zoom-63098134.figma.site/_assets/v11/0b4a435b2df2747593c43d7a1c9b4578f7d8d90c.png

```

Apply a continuous "train-bob" animation: translateY oscillates between 0 and -6px over 3s ease-in-out infinite, with a constant scale(1.03) to prevent edges from showing during the motion.

---

## Liquid Glass Effect (CSS class `.liquid-glass`)

```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;

}

```

With a `::before` pseudo-element for a subtle gradient border:

```css

.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;

}

```

---

## Content Layer (z-index 2) - Flex Column Full Height

### Navigation (top)

- Left: "Lumora" in white, italic, text-xl (sm:text-2xl)

- Right (desktop md+): A `.liquid-glass` pill containing nav links ("How It Works", "Features", "Pricing", "Community") in white/90 text-sm with hover to white, plus a solid white "Get Started" button at the end

- Right (mobile): A `.liquid-glass` rounded hamburger button using Lucide `Menu`/`X` icons with a crossfade rotation animation (300ms). The Menu icon rotates out 90deg and scales to 75%; the X icon rotates in from -90deg

### Mobile Menu Overlay (fixed, z-50)

- Backdrop: `bg-black/60 backdrop-blur-sm`

- Centered fullscreen panel with staggered entrance (each link delays 50ms more: 100ms, 150ms, 200ms, 250ms, 300ms)

- Links: white text-3xl, translate-y-4 to 0 on open

- "Get Started" button at bottom with scale animation

- Cubic-bezier easing: `cubic-bezier(0.4,0,0.2,1)`, duration 500ms

### Hero Content (centered, below nav)

- **Badge**: `.liquid-glass` rounded-full pill with text "Over 10,000 minds already finding their clarity"

- **Heading**: "Clarity in an Endlessly / Noisy Universe" (line break after "Endlessly"). Sizes: text-4xl / sm:text-5xl / md:text-7xl / lg:text-[5.5rem], leading-[1.1], max-w-4xl

- **Subtext**: "Rise above the chaos of pings, infinite scrolling, and relentless demands. Discover how to protect your presence and create with intention." max-w-xl, leading-relaxed

- **Email Input**: `.liquid-glass` rounded-full pill containing a text input ("Your Best Email") and a solid white "Get Early Access" button. Max-width 320px on mobile, sm:max-w-sm

- **Video Switcher**: Row of 4 text buttons with labels. Active button has solid color + bottom border. Inactive buttons are 50% opacity with transparent border, hover to 80%

### Dark Mode for "Deep Woods" (3rd video, index 2)

When the 3rd video is active, all hero content (badge, heading, subtext, input, video switcher) transitions to dark color `#182C41` with 700ms duration. The navbar and bottom stats remain white always.

### Bottom Stats (pushed to bottom via flex-1 spacer)

- Row of stats separated by `|` dividers (hidden on mobile): "60+ Deep Sessions", "12,000+ Creators", "4.8 User Satisfaction", "Intentional-First Design"

- text-white/70, text-xs sm:text-sm, system-ui font

---

## Video Switching Logic

- Track `activeVideo` state (default 0) and `isTransitioning` boolean

- On click, if not already active and not mid-transition, set new active video and start a 1000ms cooldown (matching the CSS crossfade duration)

- During cooldown, ignore additional clicks

---

## Responsive Behavior

- Mobile: Smaller text sizes, tighter padding, hamburger nav, stats wrap naturally

- Tablet/Desktop: Larger heading, more padding, inline nav pill, stats with pipe separators

---

## Section Container

```html

<section className="relative w-full h-screen overflow-hidden bg-black">

```

Black background prevents flash before videos load. Everything is a single viewport-height section with no scroll.

---

That's the complete specification. The entire app lives in a single `App.tsx` component with the CSS in `index.css`.

Build a full-viewport hero section for a SaaS landing page called "Questly" using React, TypeScript, Tailwind CSS 3, and Vite. Use `lucide-react` for all icons. No other UI libraries.

---

FONT

Use the font "Nimbus Sans TW01" loaded from this stylesheet in `index.html`:

```

https://db.onlinewebfonts.com/c/bb5de19d87c09a95216dc6ccd96e37c6?family=Nimbus+Sans+TW01

```

Set the font stack in both `tailwind.config.js` and `index.css`:

```

'Nimbus Sans TW01', 'Helvetica Neue', Helvetica, Arial, sans-serif

```

Enable `-webkit-font-smoothing: antialiased` and `-moz-osx-font-smoothing: grayscale` on `html`.

---

BACKGROUND IMAGE

The full hero section uses this image as a `background-image` (cover, centered):

```

https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260611_133301_d5f2a94a-b22e-4e4a-a6b6-eacdddf1f5b0.png&w=1280&q=85

```

Applied via inline `style={{ backgroundImage: url(...) }}` on the `

`. The section is `relative min-h-[100svh] overflow-hidden bg-cover bg-center flex flex-col`.

---

GRASS OVERLAY

An absolutely positioned grass PNG sits at the bottom of the section, full width, `z-10`, pointer-events-none, select-none:

```

https://res.cloudinary.com/dy5er7kv5/image/upload/q_auto/f_auto/v1781191264/grass_eam204.png

```

Classes: `pointer-events-none absolute bottom-0 left-0 z-10 w-full select-none`

---

LOGO (SVG Component)

A custom SVG logo component used in the navbar and dashboard sidebar. It uses `currentColor` for fill so it inherits text color. ViewBox: `0 0 256 256`. Path data:

```

M 144 256 L 27.598 256 L 144 139.598 Z M 256 207.5 L 200 256 L 200 56 L 0 56 L 48 0 L 256 0 Z M 0 204.402 L 0 112 L 92.402 112 Z

```

---

NAVBAR

- Positioned with `animate-fade-down relative z-20`

- Flex row: logo left, nav links center, CTA + hamburger right

- Horizontal padding: `px-5 sm:px-8 lg:px-10`, vertical: `py-4 sm:py-5`

- Logo: `text-gray-900`, icon sized `w-5 h-5 sm:w-6 sm:h-6`

- Desktop nav links (hidden below `md`): `text-[13px] text-gray-700`, hover `text-gray-900`, gap-8. Items: "Toolkit" (with `ChevronDown` icon `w-3.5 h-3.5`), "Plans", "News"

- CTA button: `bg-gray-900 text-white text-[13px] font-medium px-4 sm:px-5 py-2 rounded-full hover:bg-gray-800`

- Hamburger (md:hidden): `w-9 h-9 rounded-full text-gray-900 hover:bg-gray-900/10`, toggles `Menu`/`X` icons (`w-5 h-5`)

- Mobile dropdown (when open): `absolute left-4 right-4 top-full rounded-2xl bg-white/80 backdrop-blur-xl ring-1 ring-gray-200 px-5 py-3 animate-fade-up`. Links: `text-[15px] text-gray-700 hover:text-gray-900 border-b border-gray-200 last:border-b-0`

---

HERO CONTENT (centered, text-center)

Spacing between navbar and content uses a flex spacer: `flex-1 min-h-8 sm:min-h-12 lg:min-h-16 shrink-0`

Headline (h1)

- `text-gray-900 font-normal leading-[1.05] tracking-tight`

- Sizes: `text-[40px] min-[400px]:text-[44px] sm:text-6xl lg:text-7xl xl:text-[80px]`

- Two lines, each a `` with staggered `animate-fade-up`:

 - Line 1: "Get cited." (no delay)

 - Line 2: "Effortlessly." (`[animation-delay:100ms]`)

### Search Bar (form)

- `animate-fade-up [animation-delay:220ms] mt-5 sm:mt-6 w-full max-w-xl`

- Pill container: `flex items-center gap-3 rounded-full bg-white/60 backdrop-blur-md ring-1 ring-gray-200 pl-5 pr-1.5 py-1.5`

- Input: `flex-1 bg-transparent text-sm sm:text-base text-gray-900 placeholder-gray-500 outline-none py-2`, placeholder: "What makes content rank in AI search?"

- Submit button: `w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-gray-900 text-white hover:scale-105 active:scale-95 transition-transform shrink-0`, contains `ArrowUp` icon `w-4 h-4 sm:w-[18px] sm:h-[18px]`

### Description

- `animate-fade-up [animation-delay:340ms] mt-4 sm:mt-5 text-gray-600 text-sm sm:text-base lg:text-lg leading-relaxed max-w-md`

- Text: "Ship articles that answer actual customer questions -- and be seen on [Sparkles icon] ChatGPT"

- Line break `

` before the dash

- `Sparkles` icon: `inline w-4 h-4 -mt-1`

### CTA Buttons

- `animate-fade-up [animation-delay:460ms] mt-4 sm:mt-5 flex flex-wrap items-center justify-center gap-3`

- **Primary**: `bg-gray-900 text-white text-sm font-medium px-6 py-2.5 rounded-full hover:bg-gray-800 hover:shadow-lg transition-all` -- "Try It Free"

- **Secondary**: `text-gray-700 text-sm font-medium px-6 py-2.5 rounded-full ring-1 ring-gray-300 hover:bg-gray-100 transition-colors` -- "Talk to sales"

---

## DASHBOARD MOCKUP (below the hero content)

Another flex spacer (`flex-1 min-h-10 sm:min-h-12 lg:min-h-16 shrink-0`) separates the content from the dashboard.

### Container

- `animate-hero-rise [animation-delay:620ms] relative z-0 w-[92%] sm:w-[84%] lg:w-[72%] max-w-4xl mx-auto shrink-0 -mb-10 sm:-mb-20 lg:-mb-32`

- Uses a **ScaledDashboard** wrapper: a `ResizeObserver`-based component that renders the mockup at a fixed design width of **896px** and scales it down via CSS `transform: scale()` to fit its container, with `transformOrigin: 'top left'`. The outer div's height is set to `inner.offsetHeight * scale` to prevent layout overflow.

### Mockup Chrome

- Outer: `rounded-t-2xl overflow-hidden bg-[#1a1a1c] shadow-[0_-20px_80px_rgba(0,0,0,0.35)] ring-1 ring-white/10 text-left`

- **Title bar**: `bg-[#242427] border-b border-white/5 px-4 py-2.5`

 - Traffic lights: three spans `w-2.5 h-2.5 rounded-full` colored `#ff5f57`, `#febc2e`, `#28c840`

 - Icons (all `w-3.5 h-3.5 text-white/40`): `PanelLeft`, `ChevronLeft`, `ChevronRight` (text-white/25)

 - Center URL bar: `bg-[#1a1a1c] rounded-md px-6 py-1 text-[10px] text-white/60` with `Monitor` icon -- text "questly.ai"

 - Right icons: `RotateCw`, `Share`, `Plus`, `Copy`

### Sidebar (22% width)

- `border-r border-white/5 bg-[#1e1e21] px-3 py-3.5`

- Logo icon `w-4 h-4 text-white/70` + `Grid` icon `w-3.5 h-3.5 text-white/30`

- Workspace badge: `w-4 h-4 rounded bg-[#e8553f]` with "C" letter, label "CareNest" `text-[10px] text-white/80`

- Nav items: Compass/Uncover, Layers/Subjects, ListTodo/Inbox -- `text-[10px] text-white/60`

- Recent articles list with "Ready to Release" green dots `text-[#28c840]/70`

### Main Content Area

- Header: workspace icon (larger `w-9 h-9 rounded-lg bg-[#e8553f]`), "CareNest" `text-sm font-medium text-white`, subtitle `text-[10px] text-white/45`, and a "Generate" button with `Sparkles` icon

- **Stats grid** (4 columns): `grid-cols-4 divide-x divide-white/5 rounded-xl bg-white/[0.03] ring-1 ring-white/5`

 - RELEASED: 62 / Posts indexed

 - BREADTH: 12 / Subject groups

 - REMAINING: 412 / Ready to draft

 - MAX REACH: 3,156,200 / Searches a month

 - Values: `text-xl font-medium text-white`, labels: `text-[8px] tracking-wider text-white/35`

- **Subject cards** (3 columns): Elder Care, Mobility, Home Safety -- `rounded-lg bg-white/[0.03] ring-1 ring-white/5`

- **Drafting inbox** table: 5 rows with question, volume, difficulty, status columns. "Drafting" status colored `text-[#febc2e]/80`

---

## ANIMATIONS (defined in index.css)

```css

@keyframes fade-up {

 from { opacity: 0; transform: translateY(24px); filter: blur(6px); }

 to { opacity: 1; transform: translateY(0); filter: blur(0); }

}

@keyframes fade-down {

 from { opacity: 0; transform: translateY(-16px); }

 to { opacity: 1; transform: translateY(0); }

}

@keyframes hero-rise {

 from { opacity: 0; transform: translateY(64px) scale(0.97); }

 to { opacity: 1; transform: translateY(0) scale(1); }

}

.animate-fade-up { animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

.animate-fade-down { animation: fade-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

.animate-hero-rise { animation: hero-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }

```

Staggered delays applied via inline `[animation-delay:Xms]` Tailwind arbitrary values. Respect `prefers-reduced-motion: reduce` by disabling all three animations.

---

RESPONSIVE BREAKPOINTS SUMMARY

| Element | Mobile (<640) | SM (640+) | MD (768+) | LG (1024+) | XL (1280+) |

|---|---|---|---|---|---|

| Headline | 40px / 44px@400 | 60px | -- | 70px | 80px |

| Nav links | Hidden (hamburger) | -- | Visible | -- | -- |

| Search bar width | full | -- | -- | -- | max-w-xl |

| Dashboard width | 92% | 84% | -- | 72% | -- |

| Dashboard bottom overlap | -mb-10 | -mb-20 | -- | -mb-32 | -- |

---

FILE STRUCTURE

```

src/

 App.tsx      -- renders <Hero />

 main.tsx      -- ReactDOM.createRoot

 index.css     -- Tailwind directives + custom keyframes

 components/

  Hero.tsx     -- main section with bg image, content, ScaledDashboard, grass overlay

  Navbar.tsx    -- top nav with mobile drawer

  Logo.tsx     -- SVG logo component

  DashboardMockup.tsx -- full browser-chrome dashboard mockup

```

Create a vintage-style travel poster illustration of [LOCATION], matching the composition and artistic style of classic retro tourism posters. Include elegant serif title text "[LOCATION NAME]" with a short heritage-focused subtitle. Feature a famous landmark or historic architecture inspired by the region, surrounded by authentic landscapes such as [NATURAL FEATURES]. Add a beautifully landscaped tourist area with pathways, local plants, flowers, cultural details, and visitors exploring the scene. Include people wearing traditional local clothing, capturing moments of photography, sketching, and sightseeing. Add regional signs, decorative architectural elements, and classic street furniture. Use clean outlines, flat colors with subtle gradients, a warm muted palette, and a nostalgic mid-century travel poster aesthetic

https://aif.cutcode.dev/

Zero-config AI development environment.

https://github.com/cin12211/orca-q/tree/main/.agent/skills

https://github.com/anshumanbh/securevibes/blob/main/packages/core/securevibes/skills/dast/sql-injection-testing/examples.md?plain=1

https://github.com/ciembor/agent-rules-books

AI agents Rules / Skills from

Programming Books v0.5

https://needmcp.com/

https://designmd.ai/

https://designmd.me/