Landing Page

The landing page (/) is the main homepage of your marketing site. It showcases your product with multiple sections designed to convert visitors into customers.

Page Structure

The landing page is located at app/page.tsx and consists of the following sections:

• Hero Section - Main headline, value proposition and call-to-action buttons
• Pre-built Section - Highlights key features and benefits
• Features Section - Detailed feature list
• Auth Section - Authentication capabilities showcase
• Multi-tenancy Section - Organization management features
• Billing Section - Payment and subscription features
• Code Section - Developer experience highlights
• Trusted Section - Social proof and testimonials
• Pricing Section - Pricing preview with call-to-action
• FAQ Section - Frequently asked questions

Customization

Update Hero Content

Edit the HeroSection component to change the headline, description and CTA buttons:

export function HeroSection(): React.JSX.Element {
  return (
    <section>
      <h1>Your Headline</h1>
      <p>Your value proposition</p>
      <Button>Get Started</Button>
    </section>
  );
}

Modify Sections

Each section is a separate component in components/sections/. You can:

• Reorder sections - Change the order in app/page.tsx
• Remove sections - Comment out or delete unused sections
• Add custom sections - Create new section components and add them to the page
• Customize styling - Update Tailwind classes in each section component

Update Metadata

Modify the page metadata in app/page.tsx:

export const metadata: Metadata = {
  title: 'Your App Name',
  description: 'Your app description'
  // ... other metadata
};

SEO

The landing page includes structured data (JSON-LD) for:

• Website schema
• Software application schema
• FAQ schema
• Site navigation schema

These are automatically generated and help with search engine optimization.

Best Practices

1. Clear value proposition - Make it immediately clear what your product does
2. Strong CTAs - Use action-oriented button text (e.g., "Get Started", "Start Free Trial")
3. Social proof - Include testimonials, logos or usage statistics
4. Mobile responsive - Ensure all sections work well on mobile devices
5. Fast loading - Optimize images and use Next.js Image component