Live Demo

This entire site is a live demo of what we build. Every feature you see here can be customized for your business. Use the navigation to explore and interact with the features.

Multi-language Support

Language Switching

Try switching languages using the selector in the header. Notice how:

• URLs change - English: /docs, German: /de/docs, French: /fr/docs
• Navigation updates - Sidebar reflects translated content
• Search works - Full-text search across all languages
• Fallback handling - Missing translations show English with a notice

Translation Structure

Content is organized by language:

content/
├── 1.docs/          # English documentation
├── 3.blog/          # English blog
├── de/              # German translations
│   ├── 1.docs/
│   └── 3.blog/
└── fr/              # French translations
    ├── 1.docs/
    └── 3.blog/

Each section maintains the same structure across languages, making content management intuitive.

Content Sections (Doc Roots)

Flexible Organization

This demo includes two doc roots:

• 📚 Documentation (/docs) - Main documentation and guides
• 🛠️ Tools (/tools) - Additional resources and tools

You can have unlimited doc roots. Common examples:

• Tutorials - Step-by-step guides for users
• API Reference - Technical API documentation
• Help Center - Support articles and FAQs
• Changelog - Product updates and release notes

Auto-generated Navigation

The sidebar automatically updates when you:

• Add new pages
• Reorganize folders
• Update page titles
• Add new doc roots

No manual navigation configuration needed!

Promotional Cards

Check out the floating panel on the right (on desktop) or the promotions section (on mobile). It demonstrates three interaction modes:

1. Card Action: Link

Entire card is clickable - Great for simple CTAs where you want maximum clickable area.

Example use cases:

• "View on GitHub" cards
• "Try our demo" promotions
• External resource links

2. Card Action: Modal

Card opens detailed modal - Perfect when you need to show more information before the user commits to an action.

Example use cases:

• Feature explanations with detailed benefits
• Contact forms with context
• Product showcases with multiple features

Click the "Demo: Card Action Modal" card to see the modal with:

• Rich content and descriptions
• Feature grid with icons
• Primary action button
• Multi-language support

3. Card Action: Button

Only button is clickable - Best for passive display cards where the card itself provides information.

Example use cases:

• Simple informational cards
• Single-purpose CTAs
• Non-interactive announcements

Markdown Features

Rich Text Formatting

All standard Markdown is supported:

• Bold and italic text
• Inline code and code blocks
• Lists, tables, and blockquotes
• Images and links
• Headings and horizontal rules

MDC Components

Use Vue components directly in Markdown:

Code Blocks

Syntax-highlighted code with language labels:

export default defineAppConfig({
  content: {
    site: {
      name: 'My SaaS'
    }
  }
})

Search Functionality

Try the search (press / or click the search icon):

• Fast full-text search across all content
• Multi-language aware - Searches current language
• Keyboard shortcuts - Navigate with arrow keys
• Instant results - No page reload needed

Blog System

Navigate to the Blog section to see:

• Post listings - Chronological display of articles
• Author info - Profile images and names
• Categories/tags - Organize content by topic
• Reading time - Automatic calculation
• Multi-language posts - Translated blog content

Dark Mode

Toggle dark mode using the button in the header:

• Automatic detection - Respects system preferences
• Manual override - Let users choose their preference
• Persistent - Remembers user choice
• Smooth transitions - Professional theme switching

Mobile Responsive

Resize your browser or view on mobile to see:

• Adaptive layout - Optimized for all screen sizes
• Touch-friendly - Larger tap targets on mobile
• Mobile menu - Collapsible navigation
• Performance - Fast loading on slow connections

Performance Features

Every page we build includes:

• Lazy loading - Images and components load on demand
• Code splitting - Only load what's needed for each page
• Optimized images - Automatic compression and modern formats
• Caching - Smart caching strategy for repeat visits
• Preloading - Critical resources loaded first

SEO Optimized

Built-in SEO best practices:

• Meta tags - Proper title, description, and keywords
• Open Graph - Rich social media previews
• Sitemap - Auto-generated XML sitemap
• Hreflang tags - Language variant declarations
• Semantic HTML - Proper heading hierarchy

What You Can Customize

When we build your landing page, you can customize:

✅ Branding - Logo, colors, fonts, and styling ✅ Content structure - Docs, blog, tools, tutorials, etc. ✅ Languages - Add any number of target languages ✅ Promotions - Highlight features and CTAs ✅ Navigation - Organize sections your way ✅ Analytics - Integrate tracking tools ✅ Domain - Use your custom domain ✅ Theme - Light/dark modes or custom themes

Ready to Get Started?