System / Role

Act as a world-class frontend engineer and UI/UX designer. You are building a super minimalist, editorial-style landing page for a fictional product called Foldex.

Product Context

Foldex is a small, beautiful, dual-screen e-ink device built for deep reading and active learning.

• Form-factor: A folding clamshell. Left side renders books/articles in crisp e-ink text, right side is a writing surface with a stylus for notes/diagrams.
• Intelligence: It has an on-device local AI tutor to ask questions privately.
• Synthesis: It connects all your notes into a searchable knowledge graph.
• Anti-features: No apps, no browser, no notifications.

Aesthetic & Styling (Clean Minimalism)

• Theme: E-ink, editorial, architectural, and brutalist-lite.
• Colors: Background must be a subtle off-white (#F9F9F7), and text must be a deep black (#121212). Use these exact hex codes. Support selection colors that invert this (black background, white text).
• Typography: Use three specific Google Fonts:
  • Serif (Playfair Display): For large, impactful headings and logos.
  • Sans-serif (Inter): For highly legible, thin body copy.
  • Monospace (JetBrains Mono): For metadata, labels, secondary buttons, and technical tags in all-caps with wide tracking.
• Borders: Use thin, subdued borders (border-black/10) to create a strict grid and separate sections, columns, and rows. Wrap the entire main container in a max-width layout (e.g., max-w-[1440px]) with left and right borders.

Technical Stack

Use React, Tailwind CSS, motion/react (Framer Motion) for animations, and lucide-react for icons.

Section-by-Section Requirements:

1. Navigation:
   • A bottom border.
   • Left side: "Foldex." in large Serif text.
   • Right side: A dark, filled "Waitlist" button showing monospace, uppercase, tracked-out text.
2. Hero Section:
   • Split layout with a thin border between columns.
   • Left Column (45% width):
     • A small monospace tag at the top left reading [ Chapter 01 ].
     • A massive, tight-tracking Serif headline: "Deep reading." (with reading italicized), "Active learning." (with learning italicized). Animate this in from the bottom using Framer Motion.
     • A thin, standard Sans paragraph introducing the device.
     • A "Reserve yours" text link with a growing underline and an arrow icon.
   • Right Column (55% width):
     • Top of the column: A tiny status bar with dark background and light text reading "Status: Offline" and "Focus: 100%".
     • The rest of the column: An image container that fully fills the space. Use https://i.ibb.co/XMhWD8k/Chat-GPT-Image-Apr-28-2026-03-13-37-PM.png as the image. Set it to object-cover, width and height 100%, and apply mix-blend-multiply so it seamlessly merges with the off-white background. Put a soft blurred pseudo-element behind it to act as a shadow.
3. Ticker / Marquee Section:
   • A full-width horizontal ticker using Framer motion to scroll infinitely.
   • The text should be purely monospace, uppercase, wide tracking, reading: "No Apps / No Browser / No Notifications".
4. Features Grid:
   • A 3-column grid separated by vertical and horizontal borders.
   • Each card contains:
     • A top row featuring a rounded pill badge with a number and title (e.g., "01. Form Factor") and a Lucide icon (PenTool, BrainCircuit, Search).
     • A medium Serif heading ("Two displays. One purpose.").
     • A small Sans-serif paragraph.
   • Interaction: On hover, the entire box must transition to a black background with white text (hover:bg-[#121212] hover:text-[#F9F9F7]) with a 500ms duration.