Building a Landing Page

Learn how to create a beautiful, conversion-optimized landing page with Craft. This step-by-step guide walks through the entire process.

What We'll Build#

A professional landing page with:

Hero section with headline and CTA
Feature highlights
Social proof (testimonials)
Pricing section
FAQ accordion
Newsletter signup
Footer

Step 1: Project Setup#

Start a new project and set the context:

Create a landing page for "Flowstate" - a productivity app
that helps remote teams stay in flow. The design should be
modern, clean, and use purple as the primary color.

Step 2: Hero Section#

The hero is the first thing visitors see:

Create a hero section with:
- Large headline: "Stay in Flow, Ship Faster"
- Subheadline explaining the product value
- "Start Free Trial" primary button
- "Watch Demo" secondary button
- Hero image or illustration on the right
- Animated gradient background

Tips for Great Heroes#

Keep headlines concise (5-8 words)
Focus on benefits, not features
Use action-oriented CTAs
Add social proof near the CTA

Step 3: Feature Section#

Highlight key features:

Add a features section with 6 features in a 3x2 grid:
1. Focus Timer - Deep work sessions with breaks
2. Team Sync - See when teammates are in flow
3. Distraction Blocker - Block notifications
4. Analytics - Track productivity trends
5. Integrations - Connect your tools
6. Mobile App - Focus anywhere

Each feature should have an icon, title, and description.

Feature Best Practices#

Use icons for visual interest
Keep descriptions brief
Group related features
Highlight unique differentiators

Add credibility with testimonials:

Create a testimonials section with 3 customer quotes:
1. "Flowstate increased our team's output by 40%"
   - Sarah Chen, Engineering Lead at TechCorp
2. "Finally, a tool that respects deep work"
   - Marcus Johnson, Founder of StartupXYZ
3. "Our remote team feels more connected than ever"
   - Elena Rodriguez, CEO of DesignStudio

Include photos, names, titles, and company logos.
Add a subtle sliding animation.

Testimonial Tips#

Use real names and photos
Include specific results
Feature recognizable companies
Keep quotes concise

Step 5: Pricing Section#

Present clear pricing options:

Create a pricing section with 3 tiers:

Starter - $0/month
- Up to 5 team members
- Basic focus timer
- Limited analytics

Pro - $12/month per user
- Unlimited team members
- All focus features
- Full analytics
- Integrations
Mark this as "Most Popular"

Enterprise - Custom pricing
- Everything in Pro
- SSO & SAML
- Dedicated support
- Custom integrations
- SLA guarantee

Add monthly/annual toggle with 20% annual discount.

Pricing Best Practices#

Start with free tier
Highlight the recommended option
Be transparent about what's included
Make upgrade path clear

Step 6: FAQ Section#

Address common questions:

Add an FAQ accordion with these questions:
1. How does the free trial work?
2. Can I change plans later?
3. Is my data secure?
4. Do you offer refunds?
5. What integrations are available?
6. How does team billing work?

Make it an expandable accordion with smooth animations.

FAQ Tips#

Answer real customer questions
Keep answers concise
Link to detailed docs
Group related questions

Capture leads with a signup form:

Create a newsletter section with:
- Headline: "Join 10,000+ productive teams"
- Subheadline: "Get weekly tips on remote productivity"
- Email input field
- "Subscribe" button
- Privacy note: "We respect your inbox. Unsubscribe anytime."

Step 8: Footer#

Complete with a professional footer:

Create a footer with:
- Company logo and tagline
- Links organized in columns:
  - Product: Features, Pricing, Integrations, Changelog
  - Company: About, Blog, Careers, Press
  - Resources: Documentation, Help Center, API
  - Legal: Privacy, Terms, Security
- Social media icons (Twitter, LinkedIn, GitHub)
- Copyright notice

Step 9: Polish and Animation#

Add finishing touches:

Add these animations and polish:
1. Fade-in animations on scroll for each section
2. Hover effects on all buttons and links
3. Smooth scrolling when clicking navigation links
4. Loading animation for the page
5. Ensure all sections are mobile responsive

Step 10: SEO and Meta#

Optimize for search:

Add proper SEO meta tags:
- Title: "Flowstate - Focus Tool for Remote Teams"
- Description: "Help your remote team stay in flow and ship faster with Flowstate's focus timer, team sync, and analytics."
- Open Graph image
- Twitter card

Mobile Optimization#

Test and optimize mobile:

Review the mobile experience and:
1. Ensure the hero looks good on phones
2. Stack features in single column
3. Make pricing cards scrollable horizontally
4. Simplify navigation to hamburger menu
5. Increase touch target sizes

Performance Check#

Optimize loading:

Optimize the landing page for performance:
1. Lazy load images below the fold
2. Optimize all images for web
3. Remove unused CSS
4. Add proper loading states

Final Review#

Before launching, verify:

[ ] All links work
[ ] Forms submit correctly
[ ] Mobile experience is smooth
[ ] Load time is under 3 seconds
[ ] No spelling errors
[ ] CTA buttons are prominent

Next Steps#

Deployment - Launch your landing page
Environment Variables - Configure services
Working with APIs - Add form handling