Project: Landing Page that Converts
Project Overview
Welcome to Module IV. Everything you have learned so far --- prompt engineering, CLAUDE.md configuration, Git workflows, debugging, frontend patterns, backend APIs --- comes together right here. We are building a real project from scratch: a complete, professional landing page for a fictional SaaS product called FlowTask, a productivity and task management application.
By the end of this lesson you will have a fully deployed, responsive landing page with a hero section, feature highlights, a "how it works" walkthrough, a pricing table with monthly/annual toggle, customer testimonials, an FAQ accordion, a contact form, and a footer. The page will be live on Vercel with analytics tracking.
This is not a toy project. The page we build here is the kind of thing startups pay agencies thousands of dollars to produce. You are going to ship it in a single session using vibe coding.
What the Final Result Looks Like
Picture a clean, modern single-page site. At the top, a bold gradient hero with a headline, subheadline, and a bright call-to-action button. Below that, a six-card feature grid. Then a three-step "how it works" section, followed by a pricing table with three tiers. Next, a testimonials section with real-looking quotes. An FAQ accordion handles objections, and a final CTA section with an email capture form closes the deal. A minimal footer ties everything together.
Skills Applied
- Prompt engineering for UI generation
- Component-based frontend architecture
- Responsive design with Tailwind CSS
- Git version control
- Deployment to Vercel
- Basic analytics integration
Planning the Landing Page
Before writing a single prompt, you need to know what you are building. A landing page has a clear structure, and every section serves a conversion purpose.
Here is the section breakdown:
- Hero --- First impression. Headline communicates the value proposition. Subheadline adds detail. CTA button drives action.
- Features --- Shows what the product does. Six cards with icons, titles, and short descriptions.
- How It Works --- Removes complexity. Three simple steps that show the user journey.
- Pricing --- Answers "how much?" Removes ambiguity. Three tiers: Free, Pro, Enterprise.
- Testimonials --- Social proof. Real people saying the product works.
- FAQ --- Handles objections. Answers common questions before the user has to ask.
- Final CTA --- Last chance to convert. Email capture form.
- Footer --- Navigation links, social media, legal pages.
Wireframe in Words
Think of the page as a vertical scroll. Each section takes approximately one viewport height. The hero is full-width with a gradient background. Features use a three-column grid on desktop, stacking to one column on mobile. "How It Works" alternates content left and right. Pricing shows three cards side by side. Testimonials are a horizontal row of quote cards. The FAQ is a centered column of expandable items. The final CTA is a bold, contrasting section. The footer is dark with columns of links.
This mental wireframe is your roadmap. When you give prompts to AI, you can reference specific sections by name, and the AI will know exactly what you mean because you have established the vocabulary up front.
The Initial Prompt
Let us start by scaffolding the entire project. Here is the full prompt you would give Claude Code:
Create a Next.js landing page for a SaaS product called "FlowTask" — a task
management app for teams. Use Tailwind CSS for styling. The page should be a
single-page layout with these sections in order:
1. Navigation bar with logo "FlowTask" and links: Features, Pricing, FAQ, and
a "Get Started" button
2. Hero section with gradient background (indigo to purple), large headline,
subheadline, CTA button, and a placeholder for a hero image
3. Features grid with 6 feature cards (icon placeholder, title, description)
4. "How It Works" section with 3 numbered steps
5. Pricing table with 3 tiers (Free, Pro $12/mo, Enterprise $49/mo) with a
monthly/annual toggle (annual = 20% discount)
6. Testimonials section with 3 quote cards (avatar, name, role, quote)
7. FAQ accordion with 6 questions
8. Final CTA section with email capture form
9. Footer with logo, navigation columns, and social links
Make it fully responsive. Use modern design patterns: rounded corners, subtle
shadows, smooth hover transitions. The color scheme is indigo/purple primary
with slate grays for text.
Why Each Part Matters
Notice the prompt structure. We name the product, describe what it does, and specify the tech stack. Then we list every section in order with enough detail for the AI to generate meaningful content, but not so much that we constrain the design. We close with global style guidelines.
This is the "architect" prompt pattern from our prompt engineering lessons. One comprehensive prompt that establishes the full scope, letting the AI make intelligent design decisions within your constraints.
Building the Hero Section
The initial scaffold will give you something functional, but the hero section deserves special attention because it is the first thing visitors see.
The Prompt
Improve the hero section. Use a gradient from indigo-600 to purple-700. The
headline should be "Manage Tasks Like Never Before" in white, bold, text-5xl
on desktop. Subheadline: "FlowTask brings your team's work together in one
beautiful, intuitive space. Plan, track, and ship faster." Add a "Start Free
Trial" button (white background, indigo text, rounded-full, shadow-lg, hover
scale effect) and a "Watch Demo" secondary button (white outline). Below the
buttons, add a browser mockup placeholder (rounded rectangle with a subtle
shadow to suggest a screenshot). Make the section min-h-screen with content
centered vertically.
Reviewing the Output
The AI will generate a hero component with Tailwind utility classes. Check these things:
- Contrast: White text on an indigo/purple gradient should pass WCAG accessibility standards. If the gradient is too light, ask the AI to darken it.
- Button hierarchy: The primary CTA should be visually dominant. The secondary button should be clearly secondary.
- Responsive behavior: On mobile, the headline should scale down to text-3xl and the buttons should stack vertically.
- Spacing: Generous padding (py-20 or more) gives the section breathing room.
If anything is off, iterate:
The hero headline is too small on mobile. Make it text-3xl on mobile and
text-5xl on desktop. Also increase the vertical padding to py-24.
Features Grid
The features section communicates what FlowTask does. We want six cards arranged in a responsive grid.
The Prompt
Create the features section with the heading "Everything Your Team Needs".
Use a 3-column grid on desktop (md:grid-cols-3), 2 columns on tablet
(sm:grid-cols-2), and 1 column on mobile. Each card should have: an icon
placeholder (a colored circle with an emoji or Heroicon), a bold title, and
a 2-sentence description. The 6 features are:
1. Smart Task Boards - Kanban boards that adapt to your workflow
2. Real-Time Collaboration - See changes as your team makes them
3. Automated Workflows - Set triggers and let FlowTask handle the rest
4. Time Tracking - Built-in timers and time reports
5. Analytics Dashboard - Insights into team productivity
6. Integrations - Connect with 100+ tools your team already uses
Add subtle hover effects: lift the card slightly (hover:-translate-y-1) with
a shadow increase.
Iteration
After reviewing the output, you might notice the cards lack visual variety. Try:
Add a different background color tint to each feature card icon circle. Use
indigo-100, purple-100, pink-100, blue-100, green-100, and amber-100. This
gives each feature a distinct visual identity while maintaining cohesion.
How It Works Section
This section simplifies the product into three steps. It reduces perceived complexity and moves the visitor closer to conversion.
Create a "How It Works" section with 3 steps in a horizontal timeline layout
on desktop. Each step has a large number (01, 02, 03) in indigo, a title,
and a description. Connect the steps with a dashed line or arrow. On mobile,
stack vertically. The steps are:
1. Create Your Workspace - Set up your team in under 2 minutes
2. Add Your Tasks - Import from existing tools or start fresh
3. Ship Faster - Watch your team's productivity take off
Use alternating left-right layout on desktop for visual interest.
The connecting line between steps is a nice design detail. If the AI does not implement it well on the first try, you can specify:
Add a horizontal dashed line connecting the three step circles on desktop.
Use border-dashed with border-indigo-300. On mobile, use a vertical dashed
line instead.
Pricing Table
The pricing section is one of the most conversion-critical parts of any landing page. It needs to be crystal clear.
The Prompt
Build a pricing section with the heading "Simple, Transparent Pricing". Add a
monthly/annual toggle at the top (annual shows 20% discount). Display 3 pricing
cards side by side:
Free ($0/mo):
- Up to 5 users
- 3 projects
- Basic task boards
- 1 GB storage
- CTA: "Get Started Free"
Pro ($12/mo, $10/mo annual):
- Up to 25 users
- Unlimited projects
- Advanced boards + automation
- 50 GB storage
- Priority support
- CTA: "Start Free Trial"
- This card should be visually highlighted (larger, border-indigo-500, "Most
Popular" badge)
Enterprise ($49/mo, $39/mo annual):
- Unlimited users
- Unlimited everything
- Custom workflows
- 500 GB storage
- Dedicated account manager
- SSO and audit logs
- CTA: "Contact Sales"
Use check marks for included features. The Pro card should be scaled slightly
larger (scale-105) and have a colored border to draw attention.
The Monthly/Annual Toggle
The toggle is interactive. The AI should generate a component with state management:
const [isAnnual, setIsAnnual] = useState(false);
const prices = {
pro: isAnnual ? 10 : 12,
enterprise: isAnnual ? 39 : 49,
};
If the AI generates the toggle without proper state management, prompt it:
The pricing toggle should use React useState. When "Annual" is selected,
show the discounted prices and add a "Save 20%" badge next to the annual
option.
Testimonials Section
Social proof drives conversions. Even with placeholder content, the structure matters.
Create a testimonials section with the heading "Loved by Teams Worldwide".
Show 3 testimonial cards in a row on desktop. Each card has: a circular
avatar placeholder (gray circle with initials), a quote in italics, the
person's name in bold, their role and company. Use subtle card styling with
rounded-xl and shadow-sm. Add quotation mark decorations (a large
semi-transparent quote icon in the background of each card).
Testimonial content:
1. "FlowTask transformed how our team works. We shipped our product two
weeks ahead of schedule." — Sarah Chen, Product Manager at TechCorp
2. "The automation features alone saved us 10 hours per week. It's a
game-changer." — Marcus Johnson, Engineering Lead at StartupXYZ
3. "Finally, a project management tool that doesn't require a PhD to use."
— Lisa Park, Founder at DesignStudio
FAQ Accordion
An accordion component lets visitors find answers without scrolling through a wall of text.
Build an FAQ section with the heading "Frequently Asked Questions". Create an
accordion component where clicking a question reveals the answer with a smooth
height transition. Use a plus/minus icon or chevron that rotates on open. Style
with divide-y for clean separation. Include these questions:
1. What is FlowTask? — A task management platform for teams...
2. Is there a free plan? — Yes, our Free plan includes...
3. Can I import from other tools? — Absolutely. We support import from...
4. How does billing work? — We offer monthly and annual billing...
5. Is my data secure? — Yes, we use industry-standard encryption...
6. What kind of support do you offer? — Free plans get community support...
Each answer should be 2-3 sentences.
The accordion needs proper state management. Each item should track whether it is open or closed:
const [openIndex, setOpenIndex] = useState<number | null>(null);
const toggle = (index: number) => {
setOpenIndex(openIndex === index ? null : index);
};
Contact Form and CTA
The final CTA section should create urgency and make it dead simple to take action.
Create a final CTA section with a dark background (slate-900) and white text.
Heading: "Ready to Transform Your Team's Productivity?" Subheading: "Join
10,000+ teams already using FlowTask." Add an email input field with a "Start
Free Trial" submit button on the same line (inline form). Add form validation
for email format. Below the form, add a small note: "No credit card required.
14-day free trial." Style the section with generous padding and center
everything.
Form Handling
For a landing page, you have several options for handling form submissions:
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
// Option 1: Send to an API route
// Option 2: Send to a service like Formspree
// Option 3: Store in a database
// For now, just show a success message
setSubmitted(true);
};
Ask the AI to add basic email validation and a success state:
Add email validation to the CTA form. Show an error message if the email
format is invalid. After successful submission, replace the form with a
"Thanks! Check your inbox" message with a checkmark icon.
Responsive Design Review
With all sections built, it is time to test responsiveness. This is where many AI-generated landing pages need the most iteration.
Testing Approach
Open your browser dev tools and test at three breakpoints:
- Mobile (375px wide) --- everything should stack vertically
- Tablet (768px wide) --- some sections can use 2-column grids
- Desktop (1280px wide) --- full layouts with 3+ columns
Common Issues and Prompts
If the pricing cards overflow on mobile:
The pricing cards are overflowing on mobile screens. Make them stack vertically
on screens below md breakpoint. Remove the scale-105 on the Pro card on mobile.
If text is too large on small screens:
Reduce all heading sizes by one step on mobile. text-5xl becomes text-3xl,
text-3xl becomes text-2xl. Add responsive text classes throughout.
If horizontal padding is too tight:
Add px-4 on mobile and px-6 on tablet to all section containers. The content
is touching the edges on small screens.
Run through every section methodically. A landing page with broken mobile layout will lose most of its potential conversions.
Deploying to Vercel
With the landing page complete and responsive, let us ship it.
Git Setup and Push
git add .
git commit -m "feat: complete FlowTask landing page"
git push origin main
Vercel Auto-Deploy
If you have connected your GitHub repository to Vercel (which we covered in the deployment lesson), pushing to main triggers an automatic deployment. Within about 60 seconds, your site will be live.
If you have not set up Vercel yet:
npx vercel
Follow the prompts to link your project and deploy.
Custom Domain
In the Vercel dashboard, go to your project settings and add a custom domain. Vercel will guide you through updating your DNS records. Once propagated, your landing page will be accessible at your own domain.
Verify the Live Site
Open your deployed URL and check:
- All sections render correctly
- The pricing toggle works
- The FAQ accordion opens and closes
- The form validates and shows the success state
- Navigation links scroll to the correct sections
- The page loads fast (check with Lighthouse)
Analytics Setup
A landing page without analytics is flying blind. You need to know what is working and what is not.
Vercel Analytics
Add Vercel Analytics to the project. Install @vercel/analytics and add the
Analytics component to the root layout.
The AI will generate:
import { Analytics } from "@vercel/analytics/react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
);
}
Google Analytics
For more detailed tracking:
Add Google Analytics 4 to the project. Create a GoogleAnalytics component
that loads the gtag script. Add it to the root layout. Use the measurement
ID from an environment variable NEXT_PUBLIC_GA_ID.
Tracking CTA Clicks
The most important metric for a landing page is CTA click-through rate. Track it:
const handleCtaClick = () => {
if (typeof window.gtag !== "undefined") {
window.gtag("event", "cta_click", {
event_category: "engagement",
event_label: "hero_start_trial",
});
}
};
Add similar tracking to every CTA button, the pricing cards, and the email form submission. This data tells you which sections are driving conversions and which need improvement.
What's Next
You have built and deployed a professional landing page that would cost thousands from an agency. You did it in a fraction of the time using vibe coding.
In the next lesson, we go much deeper. We are building FlowTask as a full-stack SaaS application --- with authentication, a database, CRUD operations, and a dashboard. The landing page you just built becomes the front door to a real product. Let us build the product behind it.