Documentation

Everything you need to build beautiful marketing sites with Mostra.

Quick Start

Clone the repository and install dependencies:

git clone https://github.com/dpawelec84/sofondo-mostra.git my-project
cd my-project
npm install
npm run dev

Your site will be running at http://localhost:4321

Using a Recipe

Instantly transform the template with pre-configured themes:

# Initialize with a specific recipe
npm run init:recipe -- --recipe=corporate

# Free recipes: corporate, startup, nonprofit
# Premium recipes: agency, product-launch, app-download, newsletter

See the Recipes documentation for detailed descriptions. Premium recipes are free to use with an optional support prompt.

Project Structure

src/
├── components/          # Reusable components
│   ├── Header.astro     # Site header with navigation
│   ├── Footer.astro     # Site footer (multiple layouts)
│   ├── Logo.astro       # Logo (multiple styles)
│   ├── SEO.astro        # SEO meta tags, OG, Twitter Cards
│   ├── SubNav.astro     # Sticky sub-navigation
│   ├── FadeInOnScroll.astro
│   └── Navigation.tsx   # React mega menu navigation
├── config/
│   └── site.ts          # All site configuration
├── layouts/
│   ├── Layout.astro     # Main layout (includes SEO)
│   └── ShowcaseLayout.astro  # Recipe showcase layout
├── recipes/
│   └── index.ts         # Recipe definitions
├── pages/               # Page routes
└── styles/
    ├── global.css       # Global styles & CSS variables
    └── mobile-menu.css  # Mobile menu styles

Key Features

  • Recipe System - Pre-configured themes for different use cases
  • Multiple Header Layouts - Standard, centered, or minimal navigation
  • Logo Options - Text-only, icon+text, gradient-box, emoji, or SVG icons
  • Mega Menu Navigation - Multi-column dropdowns with sections
  • Multiple Footer Layouts - Grid, flex-row, flex-sections, or minimal
  • Smooth Scrolling - Lenis-powered smooth scroll (opt-in)
  • Custom Scrollbar - Theme-aware custom scrollbar (opt-in)
  • View Transitions - Smooth page transitions (opt-in)
  • Dark Theme Support - Full dark mode with themed components
  • SEO Suite - Meta tags, Open Graph, Twitter Cards, structured data, sitemap

Documentation Sections

Configuration

Learn about all available configuration options in site.ts

Components

Explore the reusable components and how to use them

SEO

Search engine optimization and social sharing features

Customization

Customize colors, fonts, and styling to match your brand

Recipes

Pre-configured themes for different use cases

Deployment

Deploy to Vercel, Netlify, Cloudflare Pages, and more

Troubleshooting

Common issues and how to fix them