Access ALL prompts for stunning animated websites in one click: motionsites.ai # 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 ``` ## Logo component The logo is a PNG placed at `public/image.png`. Component renders `` 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: `` 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 `