Mira - SaaS Landing Page

Build a responsive landing page plus a small app demo for "Mira", a fictional AI dating coach. Stack: Vite + React 19 + TypeScript + TanStack Router, native CSS (no Tailwind), GSAP 3 + ScrollTrigger, @phosphor-icons/react. Self-host Geist and Geist Mono (OFL). Routes: "/" (landing) and "/app" (interactive demo, not linked from the landing).

Brand & tone

Mira is a warm, slightly cheeky AI coach for a male user. Every match, chat partner, and profile is a woman (Noor, Maya, Sarah, Kirana, Laras, Donita). Copy is short, honest, a little funny. Visual style: calm editorial, light grotesk display type, lots of whitespace, one warm accent. Do NOT copy any existing brand's layout or storytelling.

Design tokens (CSS variables)

--bg #F6F2EE (page), --surface #FFFFFF, --ink #2A1424, --ink-2 #6E5F68, --ink-3 #A99DA4, --line #ECE5E0, --accent #F0603F, --accent-tint #FFE8E1, --photo #E6DED8.
Mira orb (brand mark/avatar): circle with linear-gradient(135deg, #FFCCAD 0%, #F06B4D 50%, #9E85FF 100%). Never shift or animate its colors.
Type (Geist unless noted): Display web 88/92 Light -4% (clamp 44–88px), H2 56/60 Light -3.5%, H3 40/46 Light -3%, Lead 21/30, Web body 17/26, Nav 15/20 Medium. App: Display 34/40 Light, Name 28/32 Medium, Prompt 24/30, Headline 19/25, Title 16/20 Medium, Body 16/22, Small 14/20, Label 14/18 Medium, Caption 12/16, Tab 10/12 Medium. Micro labels: Geist Mono Medium 11/14, uppercase, +6% tracking.
Radii: cards 24, chapter cards 40, pills 99. Card shadow 0 16px 40px rgba(42,20,36,.10). Section side padding 120px (64 at ≤1200, 20 at ≤600).

Reusable pieces





Phone mockup: 417×876 frame, radius 66, #1C1219 with 2px inner #594D54 border and a deep shadow, 12px bezel, 393×852 screen with radius 54, dynamic island 122×36 at top 24. The screen is a real React component scaled with a ResizeObserver (--k = width/417), so mockups on the landing are the actual app screens (pointer-events off, inert).



Chat bubbles: user = ink background with white text, radius 20 20 6 20; Mira = white, radius 20 20 20 6. Typing indicator = 3 bouncing dots in a white bubble.



Chips: 12px, padding 6/10, pill; neutral (bg color), accent (accent-tint/accent), outline (white + 1px line).

App screens (393×852, status bar 54px, tab bar 84px: Discover / Mira / Likes / Chats / You with Phosphor regular↔fill icons, unread dot on Chats)





Discover: "mira" wordmark + filter button; "Noor, 26" + accent seal-check; meta row (Briefcase Nurse, MapPin 2 km away, Wine Sometimes); 420px photo with X (left) and Heart (right) 52px floating buttons; card "WHY MIRA PICKED NOOR" with orb + "You both plan Sundays around food and skip small talk. She replies within the hour, which your last three matches didn't." + chips "92% match" (accent), "Same humor", "Foodie"; Hinge-style prompt card "TYPICAL SUNDAY / Dumplings, a long walk, and pretending I'll do laundry later." Pass/like swipes through Noor, Sarah, Kirana in /app.



Ask Mira: orb 40 + "Mira / Your dating coach · remembers 4 chats"; context card "Reading your chat with Maya / Last message 2 days ago"; "Today 8:12 PM"; user bubble "Maya just replied "haha yeah". Is it over?"; Mira bubble "Not over. "haha yeah" is a closed door, not a locked one. Give her something easy and specific to answer."; white draft card with a 1px line border "DRAFT FOR MAYA / Okay, real question: best dumplings you've ever had, and would you defend that opinion in person?" with Rewrite (ghost) + Send to Maya (ink, paper plane); tip with accent lightning "Maya usually replies 7–9 PM. Send it tonight."; composer with outline chips Roast my bio / Plan a date / Red flag check and a pill input + mic + ink send circle. In /app, chips trigger a typing indicator then a canned reply.



Chats: "Chats" display + search; "NEW MATCHES · 4" row (accent-tint "12 likes" heart tile, then Noor and Sarah with 2px accent ring, Kirana, Laras); nudge card with orb "2 chats are going quiet / I drafted openers for Maya and Kirana."; "CONVERSATIONS" rows with 56px avatars: Noor "haha okay that's actually funny" 2m [Your move accent chip]; Sarah "Thursday works! 7pm?" 1h [Date · Thu outline chip with calendar]; Maya "You: hey" 2d; Donita "See you then :)" 3d; Kirana "Wait, you also do pottery??" 5d.

Landing (desktop 1440, in this order)





Fixed nav, height 96: "mira" wordmark white; center glass pill (white 12% + 24px backdrop blur) with How it works / Safety / Stories / Journal; white pill "Get the app". After the hero it becomes a 72px solid bar (bg 82% + blur, 1px bottom line), ink text, links flat (no pill), CTA turns ink.



Hero, height clamp(760px,100svh,980px): full-bleed golden-hour meadow photo (tall swaying grass, warm sunset sky), dark top gradient for legibility. Centered at top 168: glass tag (orb + "YOUR AI DATING COACH"), H1 one line "Date with a second opinion." white, sub "Mira reads the room so you don't overthink it." (85% white), CTAs white pill "Get Mira, it's free" + glass pill "See how it works →". Phone mockup (333px wide, Ask Mira screen) centered and rising from the bottom, cropped by the hero (top = max(100% − 420px, 500px)). Two floating white cards: left "92% MATCH · NOOR / You both skip small talk." at (50% − 470px, +160), right accent calendar tile "Date with Sarah / Thu, 7:00 PM · Night market" at (50% − 470px from right, +260).



Trust strip with top and bottom borders, 4 Micro items with icons: Star (fill) 4.8 on the App Store · Heart 2M+ first dates planned · Sparkle Built with relationship researchers · Lock Private by default. Single row on desktop; a seamless marquee at ≤900px with faded edges.



"How Mira works": centered intro (Micro, H2 "From first like to second date.", Lead "Four moments where most people overthink. Mira sits in on all of them."), then 4 white chapter cards (radius 40, padding 64, grid 420px text / 588px visual, alternating sides). Text = "0N" in accent + kicker Micro, H3, body, 3 check-circle bullets.
 01 Before the match - "Fewer swipes, better reasons." Visual: model photo (woman laughing, golden hour) at the left 68%, phone with the Discover screen at the right overlapping, top -8.7%.
 02 In the chat - "Say the thing, just better." Visual: photo (man smiling at his phone in a café) at the right 85%, white card bottom-left "MIRA SUGGESTS / "Chaos weekends deserve one calm dinner. Free Thursday?"" chips Opener score 8/10 (accent) + Warm, not pushy, buttons Rewrite / Send to Noor.
 03 Before the date - "Plans, not "we should hang sometime"." Visual: warm abstract illustration, Chats phone at the left, card "DATE PLAN FOR SARAH" with 4 rows (calendar Thursday 7:00 PM / You're both free after work; pin Night market on 5th St / 12 min for you, 9 for her; coffee Dessert spot after / 4 min walk, quiet tables; wine Drinks optional / She said "sometimes") + full-width "Send plan to Sarah".
 04 After the date - "An honest debrief." Visual: hand-drawn coffee-cups illustration panel with a chat: orb + "How did it go with Sarah?", user "Good I think? She laughed a lot.", card "MIRA'S DEBRIEF / She asked three questions about your Jogja trip. That's interest. Text her tomorrow morning, not tonight." chips Spark: high, Second date: likely, You talked 60%.



Statement: photo of a couple walking home after dinner at dusk (radius 40, height 640), H2 "Honest like your best friend. Private like your diary." max-width 480 at top-left 88px over a paper-colored scrim (left 82% → 0 at 55%). On mobile the headline moves to the bottom with a bottom-up scrim.



Privacy & control: header row (Micro + H2 "Your love life stays yours." left; body right). 3 white tiles, each with a 224px vignette panel then title + body:





"You choose what Mira reads": 3 stacked chat rows (Maya, Sarah, Noor) with real toggle switches; the active one is white, raised, toggle on, caption "Mira can read this" in accent.



"Nothing sends without you": dashed white draft "DRAFT FOR SARAH / Free Thursday? There's a night market on 5th." + ink circular send button with an accent ripple ring.



"Wipe her memory anytime" (body: "One tap clears everything Mira knows about you. No questions asked."): orb in the center, white chips Dumplings / Jogja trip / Dog person / No small talk around it, centered pill button "Clear memory" (trash icon).



Stories (white section): Micro + H2 "First dates, better ones." 3 cards (bg color, radius 28), each starts with orb + Mira bubble (label "MIRA" + what she said), then a quote with a small accent quote icon, then avatar + name + meta: Raka, 29 (Jakarta · 8 months together) / Dimas, 31 (Bandung · still dating) / Bima, 27 (Surabaya · 3 dates this month).



Download (#download): orb 72, display "Go on better ___" where the last words type, hold, backspace, and cycle: "first dates." / "coffee dates." / "second dates." / "dates, honestly." with a thin accent caret. Lead "Free on iPhone and Android. Mira Plus when you want more." App Store (ink) and Google Play (outline) pills. "Get Mira, it's free" and "Get the app" scroll here.



Footer: wordmark + "© 2026 Mira Labs. A demo brand made for a free website template." and three link columns.

Motion (GSAP, calm: power3.out, no bounce, no idle floating; skip everything under prefers-reduced-motion)





Hero intro: nav fade → tag → headline words rise in an overflow mask (stagger .05) → sub/CTAs → phone rises 120px (1.3s) → floating cards fade up → the chat inside the phone plays: user bubble, typing dots ~0.7s, Mira bubble, draft, tip (each fade + 8px rise).



Hero depth: on scroll the background moves slowest (yPercent 22), the phone stage −70px, the cards −150/−210px, and the copy fades up. On pointer devices, quickTo pointer parallax (bg −14px, phone 6, cards 16/22). The photo only drifts (scale 1.06 over 30s). No fake grass/cloud filters.



Chapters: text stagger + photo fade/scale 1.03 + phone rise 40 + card rise 14; chapter 04 plays its chat sequence.



Statement photo parallax (yPercent −6 → 6). Stories: each card rises, then its Mira bubble types in, then the quote and name; 0.3s between cards.



Privacy vignettes loop only while visible: (a) the active toggle moves Maya → Sarah → Noor every 2.4s; (b) the send button pulses, then a ripple, then the draft becomes a solid ink "Sent by you · just now" bubble, then resets; (c) "Clear memory" presses and turns ink, chips fly into the orb, the orb pulses, "Memory cleared" appears under it, then the chips return. Center absolute elements with zero-size flex boxes, not CSS translate (GSAP would override it).



Download orb: CSS scale 1→1.12 + rotate 40° alternate (3.2s); while the headline types, a subtle 4% "talking" pulse on the wrapper plus two soft 1px rings that expand to 1.5×.



Use the individual CSS translate/scale properties for hover so GSAP transforms never conflict.

Responsive

≤1080: chapters stack (text then visual, max 588). ≤900: hide nav links, privacy/stories go to 1 column, trust becomes a marquee. ≤600: hero phone 280px, floating cards hidden, chapter padding 28/20, visual cards compact, footer stacks. No horizontal scroll from 390px up.

Images (WebP, AI-generated, fictional adults)

meadow (hero), noor (portrait 4:5), cafe-man, abstract (warm terracotta shapes), coffee (watercolor line-art café table), couple (dusk street), avatars: maya, sarah, kirana, laras, donita, raka, dimas, bima. All warm golden-hour editorial photography, Southeast Asian adults, no text or watermarks.