Landing Page

Replace the default Next.js starter with a professional coming‑soon landing page for your idea – styled consistently with Tailwind and shadcn/ui, and shaped around a design direction you choose.

1. Your Home Page

The page visitors land on first is your home page – that's what we're replacing. You don't need to go hunting for files; Claude knows where your home page lives and will edit it for you. Your job is to describe what you want and react to what it builds.

Outcome: You understand that this lesson rebuilds your app's home page.

I know we're rebuilding my app's home page

2. Make Sure Claude Has Your Concept

Your landing page should speak to the problem, audience, and solution you defined in the Your Idea lesson – so let's make sure Claude has your concept in mind before designing.

Confirm Claude has my concept
Read my concept (it lives in the docs folder) and tell it back to me in a sentence or two, so I know you have my product's problem, audience, and solution in mind before we design the landing page.
If you can't find it, ask me to paste my concept and save it for the project first.

Outcome: Claude has your concept loaded for the design work.

I confirmed Claude has my concept

3. Choose a Design Direction and Build

Now build the landing page. Rather than spelling out a design, let Claude ask you a few quick questions first so the result fits your taste – then it builds with our style system (Tailwind + shadcn/ui) so everything stays consistent as your app grows.

Design and build my coming‑soon landing page
Build a professional coming‑soon landing page for my home page, based on my concept.
First, ask me a few quick design questions so it fits my taste – for example:
- Light or dark look (or both)?
- A color direction or vibe (calm and professional, bold and energetic, warm, minimal/monochrome…) or a specific brand color?
- Overall style – sleek and modern, playful, or classic and editorial?
- Any app or site whose look I admire?
Wait for my answers, then build it:
- Use **Tailwind and shadcn/ui** for all styling and components (install any shadcn components you need) so the design stays consistent with the rest of my app.
- Sections: a hero with my product's tagline and a one‑line subheading; a short problem + audience section; a short solution section; and a simple email sign‑up call to action (no backend yet).
- Write the copy from my concept, keep it accessible (proper labels and heading order), mobile‑first, and tastefully spaced.
When it's done, show it to me in the preview, point me to where I can tweak copy and styling, and offer to refine it based on my feedback.

Outcome: Claude's preview shows a polished coming‑soon landing page, designed to your taste and built on Tailwind + shadcn/ui.

I see a polished coming‑soon landing page in my taste