GPT Image 2 + Veo 3 + Lovable Marketing Site

Access ALL prompts for stunning animated websites in one click: 

# PROMPT: Recreate this landing page exactly

Build a production-quality marketing landing page for a thoughtful newsletter platform called "Mindloop" as a Vite + React + TypeScript app using Tailwind CSS, shadcn/ui, framer-motion, and lucide-react. The aesthetic is calm, editorial, cinematic — black background, white foreground, serif italic accents, ambient looping background videos, and a signature "liquid glass" effect on interactive surfaces. No purple/indigo hues.

## Stack & dependencies

- Vite + React 18 + TypeScript
- Tailwind CSS with shadcn/ui design tokens (HSL CSS variables)
- `framer-motion` for animation
- `lucide-react` for icons
- `@fontsource/inter` (400, 500, 600, 700) and `@fontsource/instrument-serif` (400, 400-italic) for fonts
- Do NOT install other UI libraries

## Global theme (src/index.css)

Import fontsource CSS at top, then Tailwind layers. Pure black/white palette via HSL vars:

```css
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/600.css";
@import "@fontsource/inter/700.css";
@import "@fontsource/instrument-serif/400.css";
@import "@fontsource/instrument-serif/400-italic.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 5%;
    --popover-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%;
    --radius: 0.5rem;
  }
}

@layer base {
  * { @apply border-border; }
  html, body {
    margin: 0; padding: 0;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body { @apply bg-background text-foreground; }
}

.font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; }

/* Liquid glass effect — frosted surface with inset highlight + animated gradient border */
.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;
}
```

Tailwind config extends `fontFamily.sans = Inter`, `fontFamily.serif = "Instrument Serif"`, and maps all colors to the HSL vars. Dark mode is class-based (but the whole site is black by default).

## Shared animation helper (src/lib/animations.ts)

```ts
export const fadeUp = (delay: number = 0) => ({
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, margin: "-100px" },
  transition: { duration: 0.6, delay, ease: "easeOut" as const },
});
```

## App structure (src/App.tsx)

```tsx
<div className="bg-background text-foreground min-h-screen font-sans">
  <Navbar />
  <main>
    <Hero />
    <SearchChanged />
    <Mission />
    <Solution />
    <CTA />
  </main>
  <Footer />
</div>
```

## Logo component

The logo is a PNG placed at `public/image.png`. Component renders `<img src="/image.png" className="h-7 w-auto" />` with an optional `className` prop to resize it (e.g. `h-12 w-auto` in the CTA).

---

## Section 1 — Navbar (fixed, shrinks to liquid-glass pill on scroll)

- `fixed top-0 left-0 right-0 z-50`, centered flex wrapper `pt-4 px-4`.
- Inner container: `max-w-6xl rounded-full`, transitions over 500ms between two states:
  - Not scrolled: `bg-transparent px-6 py-3`
  - Scrolled (>20px): `liquid-glass px-5 py-2.5`
- Left: `<Logo />` only (no text).
- Center (desktop): links "Home", "How It Works", "Philosophy", "Use Cases" in `text-muted-foreground`, hover to `foreground`, with an animated underline that grows from width 0 to full on hover.
- Right (desktop): three circular 9x9 icon buttons for Instagram / LinkedIn / Twitter (lucide), strokeWidth 1.5, hover bg `white/5`.
- Mobile: hamburger (`Menu`) that toggles a `liquid-glass rounded-2xl` dropdown panel below the bar.

## Section 2 — Hero (fullscreen, looping background video)

- Section: `relative min-h-screen w-full overflow-hidden`.
- Full-bleed autoplay/muted/loop/playsInline `<video>` covering the viewport:
  - src: ``
- Bottom fade overlay: `absolute bottom-0 h-64 bg-gradient-to-t from-background to-transparent z-[1]`.
- Content `z-10 pt-28 md:pt-32` centered column:
  1. Social proof row (fade+slide in): three overlapping round avatars (`w-8 h-8 rounded-full border-2 border-background`) from Pexels (use IDs 415829, 774909, 1222271 with `?auto=compress&cs=tinysrgb&w=100&h=100&fit=crop`) + muted text "7,000+ people already subscribed".
  2. H1: `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] max-w-5xl leading-[1.02]`, content: `Get <span className="font-serif italic font-normal">Inspired</span> with Us`.
  3. Subhead in `--hero-subtitle` color, `text-lg max-w-2xl mt-8`: "Join our feed for meaningful updates, news around technology and a shared journey toward depth and direction."
  4. Email capture form: `liquid-glass rounded-full p-2 max-w-lg w-full mt-10 flex items-center gap-2`. Transparent input, pill button `bg-foreground text-background rounded-full px-8 py-3 text-xs font-semibold tracking-[2px]` labeled "SUBSCRIBE" with framer hover scale 1.03 / tap 0.98.
- Each element fades in sequentially (delays 0, 0.1, 0.25, 0.4s).

## Section 3 — SearchChanged (the shift)

- `pt-52 md:pt-64 pb-20 px-6 md:px-8`.
- Header grid (12 col): left 7 — eyebrow "THE SHIFT" (uppercase tracking-[3px]) + H2 `text-5xl md:text-7xl lg:text-8xl font-medium tracking-[-2px] leading-[0.95]` reading `Search has <italic serif>changed.</italic><br/>Have you?`. Right 5 — body copy: "The way people discover ideas has quietly shifted. Answers arrive synthesized, personal, and instant — and the old playbook of SEO keywords is running on borrowed time."
- Three-card grid using 1px `bg-border/40` gaps inside a `rounded-3xl overflow-hidden` wrapper so the divider lines look like hairlines. Each card `bg-background p-8 md:p-10` with hover `bg-white/[0.02]`.
  - Card header: `liquid-glass` rounded-2xl 12x12 icon tile (left) + `ArrowUpRight` (right) that translates up/right on group hover.
  - Big stat `text-4xl md:text-5xl font-medium tracking-[-1px]` + muted label.
  - Name (semibold) + muted description.
  - Cards: ChatGPT / 400M weekly users / "Conversational answers…"; Perplexity / 15M daily queries / "Cited, sourced responses…"; Google AI / 2B+ AI overviews / mo / "Generative overviews replacing classic search result pages."
- Below: centered quote framed by two `h-px w-12 bg-border` hairlines: `If you don't answer the questions, <foreground>someone else will.</foreground>`
- Every block animates with `fadeUp` staggered.

## Section 4 — Mission (scroll-driven word reveal over parallax video)

- Outer: `relative w-full`, inner wrapper `h-[130vh] md:h-[150vh] overflow-hidden`.
- Background `<>` with parallax: `y` transforms from `-6%` to `6%` across scroll progress, and `scale` bounces `1.08 → 1.02 → 1.08`. Video src: ``
- Overlays for legibility:
  - `bg-gradient-to-b from-background via-transparent to-background` + `bg-background/25`
  - Top `h-32` and bottom `h-40` fades to background.
- Sticky content container `sticky top-0 h-screen flex items-end justify-center pb-16 md:pb-24`.
  - Eyebrow: hairline + "OUR MISSION" (uppercase tracking-[3px]).
  - Two stacked paragraphs where each word animates from `opacity 0.2 → 1` and `blur(6px) → blur(0)` based on its own slice of `useScroll({ target, offset: ["start 0.85","end 0.2"] })` progress.
  - Paragraph 1 (large `text-2xl md:text-4xl lg:text-6xl font-medium tracking-[-1.5px] leading-[1.12]`): "We're building a space where curiosity meets clarity — where readers find depth, writers find reach, and every newsletter becomes a conversation worth having." The words **curiosity**, **meets**, **clarity** are highlighted full-white with a slightly stronger text-shadow; other words use `--hero-subtitle` color with a soft text-shadow `0 2px 20px rgba(0,0,0,0.6)`.
  - Paragraph 2 (smaller `text-xl md:text-2xl lg:text-3xl`): "A platform where content, community, and insight flow together — with less noise, less friction, and more meaning for everyone involved."
  - Tag row with bullet dots: `Depth`, `Reach`, `Meaning` (uppercase tracking-[3px] muted).

## Section 5 — Solution (sticky 12-col grid)

- `py-32 md:py-44 border-t border-border/30 px-6 md:px-8`.
- Left column (`lg:col-span-5 lg:sticky lg:top-32`):
  - Eyebrow "SOLUTION".
  - H2 `text-4xl md:text-5xl lg:text-6xl font-medium tracking-[-1px]`: `The platform for <italic serif>meaningful</italic> content`.
  - Body: "Four tools, one quiet ecosystem — built so writing, reading, and discovering all reward the same thing: depth."
  - Video card `rounded-2xl overflow-hidden aspect-video` with src: ``
- Right column (`lg:col-span-7`): vertical list of 4 feature rows separated by `border-b border-border/40` (no border on last). Each row has a `liquid-glass` 12x12 rounded-2xl icon tile, title `text-xl md:text-2xl font-semibold tracking-[-0.5px]`, right-aligned index `01–04` in muted tracking-[2px], and muted description under the title. Icons + copy:
  1. `Compass` — Curated Feed — "Editorial-quality recommendations that match your pace and depth."
  2. `PenLine` — Writer Tools — "A calm canvas with the scaffolding serious writers ask for."
  3. `Users` — Community — "Thoughtful readers and creators rewarded for their attention."
  4. `Radio` — Distribution — "Reach built on signal, not noise — measured by meaning."

## Section 6 — CTA (video background + centered content)

- `relative py-32 md:py-44 border-t border-border/30 overflow-hidden px-6 md:px-8`.
- Background video (cover, z-0) src: ``
- Overlay `absolute inset-0 bg-background/45 z-[1]`.
- Centered content (max-w-3xl):
  - `<Logo className="h-12 w-auto" />` at the top.
  - H2 `text-4xl md:text-6xl lg:text-7xl font-medium tracking-[-1px] mt-8 leading-[1.05]`: `<italic serif>Start</italic> Your Journey`.
  - Muted lede: "Step into a quieter internet. Join the readers and writers shaping what comes next."
  - Buttons row (hover scale 1.03, tap 0.98):
    - Primary: `bg-foreground text-background rounded-lg px-8 py-3.5 text-sm font-semibold` — "Subscribe Now".
    - Secondary: `liquid-glass rounded-lg px-8 py-3.5 text-sm font-semibold` — "Start Writing".
- Each element `fadeUp` with delays 0, 0.1, 0.2, 0.3.

## Section 7 — Footer

- `border-t border-border/30 px-6 md:px-8`, inner `max-w-7xl pt-20 pb-12`.
- Top block: 12-col grid split 5/7, with a `border-b border-border/30 pb-16`.
  - Left 5 cols: `<Logo />` only (no "Mindloop" text) + paragraph "A quieter internet for readers and writers. Meaningful updates, every week." + row of three `liquid-glass` 10x10 rounded-full icon buttons (Instagram, LinkedIn, Twitter).
  - Right 7 cols: three link columns, each with a uppercase tracking-[3px] muted heading and 4 links:
    - Product: How It Works, Philosophy, Use Cases, Changelog
    - Resources: Writer Guide, Reader FAQ, Press Kit, Brand
    - Company: About, Careers, Contact, Journal
- Bottom bar `pt-8 flex md:flex-row items-center justify-between`: `© 2026 Mindloop. All rights reserved.` left; Privacy / Terms / Cookies right.
- Giant decorative watermark: a non-interactive div rendering the word `mindloop` at `text-[18vw] leading-none font-serif italic text-foreground/[0.04] tracking-[-0.02em] text-center -mb-[4vw]`, giving a subtle oversized serif backdrop behind the footer.

## Video URLs summary (use exactly these)

- Hero: ``
- Mission: ``
- Solution: ``
- CTA: ``

## Animation rules

- All reveal animations use `fadeUp(delay)` (`y: 20 → 0`, `opacity: 0 → 1`, 0.6s easeOut, once, `margin: -100px`).
- Hero elements animate in on mount, not on scroll.
- Navbar transitions between transparent and liquid-glass over 500ms when `window.scrollY > 20`.
- Buttons use `whileHover={{ scale: 1.03 }}`, `whileTap={{ scale: 0.98 }}`.
- Mission section uses `useScroll` + per-word `useTransform` for opacity and blur (`6px → 0px`).
- SearchChanged cards: `ArrowUpRight` group-hover translates `-translate-y-0.5 translate-x-0.5`, underline links grow via `w-0 → w-full`.

## Typography rules

- Body: Inter, line-height ~1.5.
- Headings: Inter `font-medium` with very tight negative tracking (`-2px` on display, `-1.5px`/`-1px` on section heads).
- Italic accent words wrap in `<span className="font-serif italic font-normal">…</span>` using Instrument Serif to contrast with the geometric sans.
- Eyebrows use `text-xs uppercase tracking-[3px] text-muted-foreground`.

## Quality bar

- Fully responsive down to 375px mobile; grids collapse to single column; fonts scale with `md:` / `lg:` variants.
- Keep black (`#000`) background consistent; all text white or muted grays — no purple/indigo.
- Videos must be `autoplay muted loop playsInline` and `object-cover`.
- No external images besides the three Pexels avatars and the logo at `/image.png`.
- Build must pass `npm run build` without TS errors.