Demo

6 of 9

Demo Templates

Choose a template to create a multi-screen demo experience. Each template includes 4-6 screens with rich text content and random images.

Product Showcase

Showcase a product with 5 detailed screens

Tutorial Flow

Step-by-step guide with 4 screens

Portfolio Gallery

Showcase your work in 6 screens

Features Overview

Highlight key features in 5 screens

Case Study

Tell a customer success story

How to Use Templates

1. Select a template from the options above that best fits your use case.

2. Navigate between screens using the Previous/Next buttons at the top of the demo page.

3. View progress with the dot indicators and page counter to track your position.

4. Each screen includes engaging text content, a random image from an API, and optional metadata.

💡 Want to Create Your Own Template?

Its easy! Templates are defined in src/lib/demo-templates.ts

// Add a new template like this:
export const MY_TEMPLATE: DemoPageTemplate = {
  name: 'My Custom Demo',
  description: 'Description of what this template shows',
  screens: [
    {
      id: '1',
      title: 'Screen Title',
      description: 'Short description',
      content: 'Your content here...',
    },
    // Add more screens...
  ],
};

// Then add it to DEMO_TEMPLATES object
export const DEMO_TEMPLATES = {
  // ... existing templates
  MY_TEMPLATE: MY_TEMPLATE,
};