✅ Pre-Launch Page Link to heading

This is the first public page for the idea. Keep it simple, fast, and readable. No apps. No forms. Just a clear message people can find and that Google can index.

Spend your time on alignment: voice, mission, style, and visuals. That is what makes it feel real.

Do not over‑protect the idea. You can stay high‑level, but you still need to put something real out there. If the idea has to stay hidden to survive, slow down and rethink the edge: an established competitor can copy a surface‑level idea faster than you can. You need something interesting, unique, or hard to copy beyond the headline. If you still want privacy, keep the page unlisted until you are ready to share it.

🧭 Why This Step Exists Link to heading

You need a real URL that represents the idea. It should be clear enough for a stranger and stable enough to share in person. This is the smallest version of that. If you still need the pipeline, start with Skeleton Site + Deploy Pipeline.

It also gives you a starting point for Google Search Console and Google Analytics. You can measure impressions, click‑through rate, and where the page appears in search. That data, plus real feedback, should drive message tuning and feature priorities.

Some of that measurement is covered later in the series, but this step makes it possible.

🔀 Pre-Launch Git Flow Link to heading

Start on a pre-launch branch. When the page is ready, run a local build to catch errors, then merge to main and push to origin to trigger the Amplify deploy.

# create the branch
git checkout -b pre-launch

# ...edit content and commit on pre-launch...

# build locally before deploy
npm run build

# merge and push
git switch main
git merge pre-launch
git push origin main

🧱 1) What the Page Must Do Link to heading

  • Say what it is and who it is for
  • Make the benefit obvious in 10 seconds
  • Be optimized for SEO from day one

🧱 2) One‑Page Structure Link to heading

Keep the structure tight. One screen should answer the first questions.

  • Hero: one‑sentence offer + short tagline + one link
  • Proof: short credibility line or signal
  • How it works: 3 short steps
  • FAQ: common objections in plain language
  • Final CTA: same link as the hero

✍️ 3) Write the Copy Blocks Link to heading

Anchor everything to your voice and positioning.

  • Use short sentences
  • Avoid feature lists until the offer is clear
  • Keep the hero literal, not clever

If you have three message pillars, make sure each one shows up once.

🎯 4) Visual Alignment Link to heading

Make the page look like the promise it makes. Color, imagery, and layout should match the message and the audience.

  • Choose a simple, intentional color palette
  • Decide whether you want an image‑heavy page or a text‑forward one
  • If a logo makes sense, introduce a simple version now
  • Add a favicon early so the page looks complete (https://realfavicongenerator.net is a solid option)

Aim for professional, not flashy. A sloppy page can distort feedback.

🎯 5) Keep the CTA Honest Link to heading

The priority is speed. Ship a working page quickly, and avoid dead links.

If you have a real destination, use a single CTA that you can support. If you do not, skip the CTA and keep the page informational. A fake button is worse than no button.

Examples that work when they exist:

  • “Learn more” → a real page
  • “See progress” → a real update log

Low friction beats cleverness at this stage. Keep it simple and real.

🧱 6) Lay Out the Repo for What Comes Next Link to heading

If you are already on Next.js + Amplify, keep the app at the repo root so Amplify builds stay simple. Then carve out space for shared code as you grow.

Suggested layout:

src/
  app/
  components/
  lib/
  server/
  styles/
packages/
  domain/
  api/
  ui/

What each folder is for:

  • src/app/ — Next.js routes and pages
  • src/components/ — web-only UI components
  • src/lib/ — shared helpers and utilities
  • src/server/ — server-only integrations and clients
  • src/styles/ — global styles and theme tokens
  • packages/domain/ — pure domain types and business rules
  • packages/api/ — API DTOs and contracts (domain only)
  • packages/ui/ — React UI primitives (no Next.js)

Start with empty folders if needed. The point is to make growth easy without changing your deployment path.

🧪 7) Clarity Check Link to heading

Read the hero out loud. Then ask two questions:

  • Who is this for?
  • What do they get?

If you hesitate, rewrite the hero first.

✅ Output Checklist Link to heading

  • One‑page outline
  • Draft copy blocks (hero, proof, CTA, FAQ)
  • First version of the page

Next up: Connect Domain + Deploy.