A React-based interactive presentation tool for Elastic field teams. Walk prospects through Elastic's platform, capabilities, and value with a polished, customizable presentation — all running locally in the browser.

• Getting Started
• Tech Stack
• Project Structure
• Scenes
• Customization
  • Scene Settings
  • Team Settings
  • Per-Scene Content
• Navigation
• Theming
• Persistence

# Install dependencies
npm install

# Start the development server
npm run dev

# Build for production
npm run build

# Preview the production build
npm run preview

The app runs at http://localhost:5173 by default and uses hash-based routing (/#/scene-id).

presentation-2.0/
├── public/                     # Static assets (fonts, logos, images)
├── src/
│   ├── main.jsx                # App entry — HashRouter setup
│   ├── App.jsx                 # Scene registry, routing, global nav, inline scenes
│   ├── index.css               # Tailwind base, fonts, custom keyframes
│   ├── components/
│   │   ├── SceneSettings.jsx   # Settings panel + useSceneConfiguration hook
│   │   ├── Navigation.jsx      # Global prev/next nav buttons
│   │   ├── ProgressBar.jsx     # Bottom progress indicator
│   │   └── ErrorBoundary.jsx
│   ├── context/
│   │   ├── ThemeContext.jsx     # Dark/light mode
│   │   └── TeamContext.jsx      # Team member data
│   ├── scenes/                 # All active scene components
│   │   └── _backup/            # Archived older versions
│   ├── animations/             # Reusable animation utilities
│   └── hooks/                  # Custom React hooks
├── tailwind.config.js
└── vite.config.js

The presentation is made up of scenes — individual full-screen slides. Scenes are registered in App.jsx and can be enabled, disabled, reordered, and customized via the Settings panel.

Scenes can be grouped under a shared agenda entry using the group metadata field in Scene Settings. All scenes sharing the same group name will appear as a single item on the Agenda slide.

All customization is done through the Settings panel, accessible via the gear icon in the top navigation bar. Settings are automatically saved to localStorage and persist across sessions.

The Scenes tab lets you:

• Enable / disable individual scenes — disabled scenes are hidden from the presentation and the agenda
• Reorder scenes by dragging them up and down the list
• Set custom durations shown on the Agenda slide
• Assign a group to cluster scenes under a single agenda entry

The Team tab lets you configure the people presenting. Each team member has:

Team members with the role Account Executive, Solutions Architect, or Customer Architect are automatically surfaced in the Next Steps scene contact panel.

The Customizations tab exposes content fields for each scene. Select a scene from the dropdown to edit its fields. Here's what each scene supports:

• Previous / Next buttons move between scenes globally
• Dot indicators along the bottom show your position; hover for scene names
• Progress bar at the very bottom fills as you advance through the deck
• Some scenes have internal stages advanced with their own controls (e.g. Data Mesh, Security, Services Zero Downtime Demo)
• The Services scene includes a Reset button in the nav bar when the Zero Downtime Demo is active

URL routing uses the hash: /#/<scene-id> — you can deep-link directly to any scene.

The app supports dark mode (default) and light mode, toggled via the moon/sun icon in the nav bar.

• Dark mode uses the full Elastic dark palette — deep blue backgrounds, teal and white accents
• Light mode uses white surfaces with Elastic blue and ink tones
• All scenes and components respond to the active theme
• The selected theme is persisted to localStorage under the key presentation-theme

All user configuration is saved automatically to localStorage:

To reset everything to defaults, use the Reset option available in the Settings panel, or clear localStorage in your browser's developer tools.