DearBird by Luvbird: a global pen pal product that brings back the feeling of waiting for a letter.

luvbird.app · Next.js 15 · React 19 · TypeScript · Tailwind CSS

---

Overview

Luvbird is the company. DearBird is its first product: a global letter, not a messenger. People find someone by country, language, interests, and why they want to write, then send a photo and a piece of their day. The letter travels for 24 hours, and the other person replies when they are ready.

This repository contains two things:

• The DearBird marketing landing page at the repo root (app/, components/). It explains the product and does not create accounts or send letters.

• The earlier functional MVP in legacy-mvp/: an Expo app and an Express API for accounts, matching, letters, and reports. Scope and limits are in CURSOR_HANDOFF.md and FEATURES_IMPLEMENTED.md.

• Live product site: https://www.luvbird.app/

• This repository: the DearBird landing page (Next.js, static build)

Problem

Messaging became instant. Read receipts, endless feeds, and disposable conversations make communication efficient, but they also make it shallow. The small anticipation of opening a letter from far away has almost disappeared.

People aged 18–35 who want international friends, language exchange, or cultural discovery mostly have two options: fast chat apps or social feeds built around followers and likes. Neither encourages slow, considered conversation with one person.

Solution

DearBird treats waiting as part of the experience rather than a delay to remove.

• Each letter takes 24 hours to arrive.
• There are no read receipts, so nobody feels pressure to reply instantly.
• Profiles show the city, not the precise location.
• A letter can carry a photo and words meant for one person.
• There are no followers and no likes. The product centers on people and their stories, not engagement.

The landing page's job is to communicate this philosophy clearly and honestly to first-time visitors.

Core Features

The landing page (app/page.tsx) is composed of small section components in components/.

Section	What it does
Navbar	Sticky header with anchor links and a mobile hamburger menu (aria-expanded, aria-controls).
Hero	App-listing header, store buttons, and the real mailbox screen inside a phone frame. A "24h" stamp moves subtly on scroll.
Problem	Frames why a slow letter app exists: instant messages, read receipts, endless feeds, disposable conversations.
Inside the app	Switches among four real screens: pen pals, write, mailbox, open letter. Lists the four places in the app.
How it works	Four moments, in order: Find, Write, Wait, Reply.
The rules	Four limits that stay at launch: 24 hours, no read receipts, city-level location, one letter to one person.
Physical letter vision	Clearly labeled as "A future chapter": paper mail is not part of the app launch.
Final CTA	App Store and Google Play buttons that say the app is coming soon. They do not collect data or open a store listing.
Footer	Brand mark and section links. Privacy, Terms, and Contact are placeholders and are not linked yet.

Implementation details:

• Smooth anchor scrolling with a scroll offset for the sticky header. Smooth scrolling and the stamp motion are both disabled when the user prefers reduced motion.
• Semantic sections, descriptive image alt text, visible focus states.
• Page metadata and an OpenGraph image generated at build time (app/opengraph-image.tsx).
• Fully static output: no backend, no database, no environment secrets.

User Flow

The product flow that the landing page communicates:

flowchart LR
    A[Find someone<br/>country, language, interests, purpose] --> B[Write a letter<br/>with a photo]
    B --> C[Letter in transit<br/>about 24 hours]
    C --> D[Letter arrives<br/>no read receipt]
    D --> E[Reply when ready]
    E --> C

Loading

How a visitor moves through the landing page:

flowchart TD
    H[Hero] -->|See the app| A[Inside the app]
    H -->|Get the app| CTA[Final CTA]
    P[Problem] --> A --> W[How it works] --> R[The rules] --> V[Physical letter vision] --> CTA
    CTA --> S[Status message:<br/>stores open at launch]

Loading

Tech Stack

Area	Choice
Framework	Next.js 15 (App Router), React 19
Language	TypeScript
Styling	Tailwind CSS 3, custom airmail tokens (paper, ink, coral, sky, envelope)
UI primitive	shadcn/ui-style Button (Radix Slot + class-variance-authority)
Icons	lucide-react
Images	next/image with real app screenshots in public/screens/

Product Decisions

• Waiting is the feature. The 24-hour delay is the core value, so it appears in the hero, a dedicated stamp, the features list, and the "Wait" step.
• No read receipts, city-level location only. These choices reduce reply pressure and protect privacy, and the page states them explicitly.
• Honest CTA. The CTA never implies signup, letter delivery, or physical mail. Clicking it shows a "preparing for launch" message instead of a fake form.
• Current features vs. vision. Physical mail is labeled as a future chapter so visitors don't mistake it for a shipped feature.
• Real screens over mockups. The product preview uses actual DearBird app screenshots rather than illustrated placeholders.
• Design direction. Vintage airmail motifs (envelopes, stamps, postmarks) with a modern editorial layout. The design deliberately avoids the generic AI-SaaS look: no heavy gradients, no glassmorphism, no dashboard layout.
• Accessibility as a default. Reduced-motion support, keyboard-visible focus, labeled navigation, and an accessible mobile menu.

My Role

Founder / Product Lead

• Product planning: defined DearBird's concept, target audience, and product philosophy.
• UX: structured the landing narrative from problem, to principles, to flow, to real screens, to vision, to CTA.
• MVP scope: kept the page to what is true today and moved physical mail into a clearly marked vision section.
• AI-assisted development: built the page with an AI coding assistant, guided by a written product brief (CLAUDE.md) that sets product rules, design principles, and delivery checks.
• Deployment: prepared the project for Vercel deployment (NEXT_PUBLIC_SITE_URL for canonical and OpenGraph URLs).

Collaboration

• The landing page was implemented through AI-assisted development. CLAUDE.md is the working brief that defines the service, audience, design principles, and non-negotiable rules (for example, "Do not imply account signup, letter delivery, or physical mail works from this landing page").
• The product screens in public/screens/ come from the earlier DearBird app. Its source is preserved in legacy-mvp/mobile/.

Current Status

• Quality check passed. npm run typecheck and npm run build pass, and every route is prerendered as static content. The page has one h1, no horizontal overflow on desktop or a 390px screen, and the letter moves in order: Find, Write, Wait, Reply.
• The CTA is a launch placeholder. The landing page has no signup or waitlist. Accounts and letters live in legacy-mvp/ and are not connected to this page.
• Footer Privacy, Terms, and Contact entries are placeholders.
• Physical mail is a future vision, not a shipped feature.
• luvbird.app is Luvbird's live product site. This landing page is a separate codebase and is not the site served at that domain.

Screenshots

Landing page

Desktop	Mobile

DearBird app screens used on the page

Discover	Write	In transit	Receive

Run locally

Requires Node.js 20 or newer.

npm install
npm run dev

Open http://localhost:3000.

Verify the production build:

npm run typecheck
npm run build

Optional: copy .env.example to .env.local and set NEXT_PUBLIC_SITE_URL to the deployed HTTPS origin so canonical and OpenGraph URLs point to it.