Getting Started with Your Landing Page

Welcome to your new Next.js landing page boilerplate! This template is designed to help you launch a professional marketing site quickly.

What's Included?

This boilerplate comes with everything you need for a modern landing page:

• Modern Tech Stack: Next.js 15, TypeScript, Tailwind CSS 4
• UI Components: Pre-built sections using shadcn/ui
• Dark Mode: Built-in theme switching
• SEO Optimized: Meta tags, Open Graph, and structured data
• Analytics Ready: Google Analytics 4 integration
• MDX Blog: Optional blog functionality

Quick Customization

1. Update Site Configuration

Edit src/config/site.ts to customize your branding:

export const site = {
  name: "Your SaaS Name",
  description: "Your compelling description",
  mailSupport: "support@yoursaas.com",
  links: {
    twitter: "https://twitter.com/yourhandle",
    github: "https://github.com/AlaiStack/saas-marketing-template",
  }
}

2. Replace Assets

Update the following files in the /public directory:

• logo.svg - Your logo
• favicon.ico - Browser favicon
• og.jpg - Social media preview image (1200x630px)

3. Customize Sections

All marketing sections are in src/components/layout/sections/:

• Hero: Main headline and call-to-action
• Features: Product features grid
• Pricing: Pricing tiers and plans
• FAQ: Frequently asked questions
• Testimonials: Customer testimonials
• Contact: Contact form

Simply edit these files to match your content.

Environment Setup

Create a .env.local file:

NEXT_PUBLIC_APP_URL="http://localhost:3000"
NEXT_PUBLIC_GA_ID="" # Optional: Your Google Analytics ID
NEXT_PUBLIC_ENABLE_COOKIE_CONSENT="true"

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

Deployment Options

Vercel (Recommended)

1. Push your code to GitHub
2. Import project at vercel.com
3. Configure environment variables
4. Deploy!

Docker

docker build -f docker/Dockerfile -t my-landing-page .
docker run -p 3000:3000 my-landing-page

Next Steps

1. Customize the hero section with your unique value proposition
2. Update pricing plans with your actual tiers
3. Add your own content to all sections
4. Set up Google Analytics (optional)
5. Configure contact form backend
6. Deploy to production

Need Help?

• Check the README for detailed documentation
• Review the component files for examples
• Explore the existing sections for inspiration

Ready to launch? Start customizing and ship your landing page today!