PAGE interactive

PAGE Interactive – projektujemy i wdrażamy responsywne strony www w technologii no-code z użyciem Framera.

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8z7CJ

# 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: `https://t.co/vLGyuhZQn1`
- 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 `<https://t.co/NJiokE1Fxr>` with parallax: `y` transforms from `-6%` to `6%` across scroll progress, and `scale` bounces `1.08 → 1.02 → 1.08`. Video src: `https://t.co/Bi4tIQWNLX`
- 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: `https://t.co/zSgt077wm7`
- 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: `https://t.co/xs9g35rNfA`
- 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: `https://t.co/vLGyuhZQn1`
- Mission: `https://t.co/Bi4tIQWNLX`
- Solution: `https://t.co/zSgt077wm7`
- CTA: `https://t.co/xs9g35rNfA`

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

[Omakase @omakasedesign]

Our 23rd template just landed in the Framer Marketplace 🔥

Operator - Perfect for AI Automation Agencies.

For next 48 hours, its FREE ($99 after that)

1⃣ Like this post
2⃣ RT
3⃣ Comment Operator

And we'll DM you the remix link!

Preview below 👇

(Make sure to follow in case your DMs are closed)

[PAGE interactive @PAGEinteractive]

@omakasedesign @arjunsh1607 Operator

[Muharrem Şenyıl @senyil]

https://t.co/H8VuWhdzJ3 just got a big update!

- Waay faster
- A new deck every single day
- Explore by slide type (intro, pricing, team…)
- No membership, no paywall

Free, forever.

[PAGE interactive @PAGEinteractive]

Another win in Season 2 of the @framer challenge 🚀

Now officially at $2,000 earned on the road to $5,000. Momentum is growing, progress is real, and I’m just getting started.

https://t.co/WbGM5qKXhb #FramerChallenge

[PAGE interactive @PAGEinteractive]

$1,000 milestone reached in Season 2 of the @framer challenge 🎉

A strong first step toward my $5,000 revenue goal. Excited to keep building in public and sharing the journey week by week.

https://t.co/WbGM5qKXhb #FramerChallenge

[PAGE interactive @PAGEinteractive]

I’m applying for Season 2 of the @framer challenge with a goal of $5000 in revenue. Building in public over the next few weeks. https://t.co/QtoFX8bqTB #FramerChallenge.

[PAGE interactive @PAGEinteractive]

@HeyAliux @figma Design

[PAGE interactive @PAGEinteractive]

@AnilKody @framer Concept

[PAGE interactive @PAGEinteractive]

@adrianlampart @framer Raelle

[PAGE interactive @PAGEinteractive]

@Izabysof @framer Awesome

[PAGE interactive @PAGEinteractive]

@bashar_me1 @framer @airdokanservice Klyro

[PAGE interactive @PAGEinteractive]

@mhmudalii @framer Arkal

[PAGE interactive @PAGEinteractive]

@pentaclay Mitchy

[PAGE interactive @PAGEinteractive]

@pentaclay Miechy

[PAGE interactive @PAGEinteractive]

@_mayweather @framer Karta

[PAGE interactive @PAGEinteractive]

@learnframer @framer Unroll

[PAGE interactive @PAGEinteractive]

@Motion_Viz Gemini

[PAGE interactive @PAGEinteractive]

@designs_yusuf @figma Landing 1

[PAGE interactive @PAGEinteractive]

@uxui_arthur @framer Evotrack