Landstro

<p align="center"> <img src="landstro.png" alt="Landstro Logo" width="250" /> </p> <p align="center"> <strong>Modern landing page starter built with Astro, TailwindCSS, and TypeScript</strong> </p> <p align="center"> <em>Landstro is offered by <a href="https://benav.io" target="_blank">benav.io</a></em> </p>

Landstro is a feature-rich, production-ready landing page starter designed to help you quickly launch beautiful websites in minutes, not days. With dark mode, SEO optimization, contact forms, and built-in email collection, it provides everything you need to showcase your product, start collecting leads, and launch your business right away.

• To see what it looks like in practice, click here!
• To understand why it was built, read our 7 Landing Page Mistakes Killing Your Conversions blog post.

Table of Contents

• Features
• Project Overview
  • Project Structure
  • Automated Build Process
• Getting Started: Technical Setup
  • Initial Installation
  • Creating Environment Variables
  • Previewing and Building
• Landing Page Components
  • Hero Section
  • Benefits Section
  • Social Proof Section
  • Pricing Tables
  • FAQ Section
• Customization Guide
  • Automatic Customizations
  • Essential Files to Modify
  • Advanced Customization
• Setting Up External Services
  • Domain Management
  • Email Communication with Postmark
  • Analytics with Google
• Deployment Options
  • Self-Hosted with Docker
  • Deploying on Digital Ocean
  • Setting Up Cloudflare
• Troubleshooting
• License

Features

• 🚀 Built with Astro - Super fast static site generator
• 💨 TailwindCSS - Utility-first CSS framework
• 🌙 Dark Mode - Automatic and manual dark mode support
• 📱 Responsive Design - Mobile-first approach
• 🔍 SEO Optimized - Meta tags, Open Graph, JSON-LD, automatic sitemap generation
• 📧 Contact Form - Ready-to-use contact form with database storage
• 📊 Waitlist & Early Access - Built-in signup forms with database storage
• 📩 Email Notifications - Automatic contact and notifications with Postmark
• 🔒 Security Headers - CSP, CORS, and other security best practices
• 📊 Analytics Ready - Google Analytics integration
• 🤖 Automation - Database initialization, image optimization, favicon generation, and more
• 🎨 Modern UI Components:
  • Hero Section
  • Features/Benefits
  • Social Proof
  • Pricing Tables
  • FAQ Section
  • Contact Modal
  • Footer

<br> <a href="https://fastro.ai"> <img width="1394" height="403" alt="fastroai-banner" src="https://github.com/user-attachments/assets/53db61f8-2fa7-46a2-ae91-8d131e0166d4" /> </a> <br>

Project Overview

Project Structure

src/
├── components/     # Reusable UI components
├── layouts/        # Page layouts
├── pages/          # Route pages
├── lib/            # Utilities and database
├── styles/         # Global styles
└── data/           # Static data

public/
├── favicon/        # Favicon files (generated automatically)
├── images/         # Images and assets
│   ├── icon/       # Place your logo.png here
│   └── companies/  # Partner/client logos

Built-in Automations

Landstro eliminates hours of tedious setup work with powerful built-in automations:

• Database Setup: Automatic SQLite initialization for contact forms and waitlist storage
• Image Optimization: All images are automatically compressed and converted to modern formats
• Favicon Generation: Complete favicon sets are created from your single logo file
• Sitemap Creation: SEO-friendly XML sitemap is generated during build
• Security Headers: Proper security configurations are automatically applied
• Mobile Responsiveness: All components are automatically responsive without extra work

These automations happen automatically during the build process (npm run build), saving you countless hours of configuration and optimization work that would normally be required when setting up a professional landing page.

For deployment, the npm run prepare-prod command creates a complete production build with all required files:

Getting Started: Technical Setup

Initial Installation

1. Use the Landstro Template:

   • Click the Use this template button in the GitHub repository
   • Create a repository using Landstro as your template
   • Clone your new repository:

   git clone https://github.com/yourusername/yourrepo.git
   cd yourrepo
   

2. Install dependencies:

   npm install
   

3. Add your logo:

   • Create a logo.png file with your company logo
   • Place it in public/images/icon/logo.png
   • This logo will be used to generate all favicons and site branding
   • Recommendation: Use a square logo with at least 512×512px dimensions

Creating Environment Variables

1. Copy the example environment file:

   cp env.example .env
   

2. Update required settings:

   # Application Settings (Required)
   APP_NAME=Your Company Name
   APP_DOMAIN=your-domain.com
   SITE_URL=https://your-domain.com
   ADMIN_EMAIL=your-email@example.com
   

3. Configure optional features:

   # Contact Form Settings (Optional)
   CONTACT_FORM_ENABLED=true  # Set to false to disable
   CONTACT_FORM_NOTIFY_EMAIL=your-email@example.com
   
   # Waitlist Settings (Optional)
   WAITLIST_ENABLED=true  # Set to false to disable
   WAITLIST_NOTIFY_EMAIL=your-email@example.com
   
   # Email Notifications via Postmark (Optional)
   POSTMARK_API_KEY=your_postmark_api_key_here  # Leave empty to disable email notifications
   POSTMARK_FROM=no-reply@your-domain.com
   POSTMARK_TO=support@your-domain.com
   
   # Analytics (Optional)
   GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX  # Leave empty to disable analytics
   ANALYTICS_DOMAINS=https://www.googletagmanager.com https://www.google-analytics.com
   
   # Social Media Links (Optional)
   # Omit or leave empty to hide the corresponding social media icons
   GITHUB_URL=https://github.com/your-company
   LINKEDIN_URL=https://linkedin.com/company/your-company
   TWITTER_URL=https://twitter.com/your_company
   FACEBOOK_URL=https://facebook.com/your-company
   INSTAGRAM_URL=https://instagram.com/your_company
   
   # Feature Flags (Optional)
   ENABLE_NAVBAR=true  # Set to false to hide the navigation bar
   
   # Pricing (in USD, Optional)
   # Set to "FREE" to display a free tier
   # Leave empty or omit to display "Contact Us" instead of a price
   PRICE_BASIC=9
   PRICE_PRO=29
   PRICE_ENTERPRISE=99
   
   # Pricing Tier Names (Optional)
   BASIC_TIER_NAME=Basic
   PRO_TIER_NAME=Pro
   ENTERPRISE_TIER_NAME=Enterprise
   
   # Deployment (Optional)
   MAINTAINER=Your Name
   CREATOR=Your Company Name
   

Note: Most features can be toggled on/off through these environment variables without changing code. The database will be automatically initialized based on which features you enable.

Previewing and Building

1. Preview your site locally:

   npm run dev
   

2. Build for production:

   npm run build
   

Landing Page Components

Landstro includes several pre-built components that you can customize to create an effective landing page.

Hero Section

The hero section (src/components/Hero.astro) is the first thing visitors see on your landing page:

• Headline and subheadline for your value proposition
• Primary and secondary call-to-action buttons
• Optional product demonstration image or video
• Trust indicators such as client logos or testimonials

Benefits Section

The benefits section (src/components/Benefits.astro) showcases your product's key advantages:

• Icon-based feature highlights
• Concise benefit descriptions
• Organized in a responsive grid layout
• Optional statistics or metrics

Social Proof Section

The social proof section (src/components/SocialProof.astro) builds credibility:

• Customer testimonials with attribution
• Partner or client logos
• User statistics and metrics
• Optional integration with review platforms

Pricing Tables

The pricing section (src/components/Pricing.astro) presents your pricing options:

• Multiple pricing tiers with feature comparison
• Highlighted recommended plan
• Monthly/annual toggle option
• Custom enterprise option with CTA

FAQ Section

The FAQ section (src/components/FAQ.astro) addresses common questions:

• Expandable accordion-style questions and answers
• Categorized questions for easier navigation
• Call-to-action for additional support
• Customizable layout and styling

Customization Guide

Automatic Customizations

The build process automatically handles several customizations based on your .env settings:

1. Company Name and Branding: Set via environment variables:

   • APP_NAME - Updates the navbar brand name and SEO metadata site name
   • COMPANY_TAGLINE - Updates the main headline in the hero section
   • Various references throughout the site use these values

2. Social Media Links: Set via environment variables to appear in the navbar and footer:

   • Each platfo