Presentation Branding System

Summary

Build a presentation branding system that displays a company logo and copyright notice across all slides, with slide numbers that update per-slide. The system should use appropriate component placement strategies to ensure branding elements appear consistently throughout the presentation.

Context

You are building a branded presentation tool. The presentation needs to display company branding (logo) that persists across all slides, along with a copyright notice at the bottom of every slide. Additionally, each slide should show its current slide number, which needs to be unique per slide instance.

Requirements

Create a presentation branding system with the following elements:

1. Persistent Logo Banner: Display a logo banner at the top of all slides that remains consistent as users navigate through the presentation. The banner should:

   • Show the text "ACME Corp" in a styled header
   • Use a blue background (#1e40af) and white text
   • Be positioned at the top of every slide
   • Persist across slide navigation without re-rendering

2. Dynamic Slide Numbers: Each slide should display its current slide number in the format "Slide X" where X is the slide number. This element should:

   • Be positioned in the top-right corner
   • Update correctly for each individual slide
   • Have a semi-transparent gray background
   • Be unique per slide instance (not shared across slides)

3. Copyright Footer: Display a copyright notice "© 2024 ACME Corp - All Rights Reserved" at the bottom of every slide that:

   • Uses a light gray background (#f3f4f6)
   • Centers the text
   • Persists across all slides without re-rendering

4. Test Slides: Create a simple presentation with at least 3 slides to demonstrate the branding system works correctly.

Dependencies { .dependencies }

@slidev/cli { .dependency }

Provides the presentation framework with layout wrapper capabilities.

vue { .dependency }

Provides reactive component system for branding elements.

Constraints

• The logo banner and copyright footer should render once and persist across slides (not re-render for each slide)
• Slide numbers must update correctly for each slide and be unique instances per slide
• Use appropriate file naming and component placement conventions
• The solution should work with the standard Slidev presentation lifecycle

Evaluation Criteria

Solutions will be evaluated on:

• Correct use of component placement for persistent vs per-slide elements
• Proper implementation of dynamic slide numbering
• Appropriate file structure and naming
• Functional branding that displays correctly across all slides

Test Cases

Test 1: Logo Banner Persistence @test

Input: Navigate between slides 1, 2, and 3 Expected Output: Logo banner "ACME Corp" remains visible at the top with consistent styling across all slides

Test 2: Slide Number Updates @test

Input: Navigate from slide 1 to slide 2 to slide 3 Expected Output:

• Slide 1 displays "Slide 1"
• Slide 2 displays "Slide 2"
• Slide 3 displays "Slide 3"

Test 3: Footer Persistence @test

Input: Navigate through all slides in the presentation Expected Output: Copyright footer "© 2024 ACME Corp - All Rights Reserved" appears at the bottom of every slide with consistent styling

Test 4: Component Layering @test

Input: Create a slide with content that fills most of the screen Expected Output: Logo banner appears above slide content, copyright footer appears below slide content, slide number is visible and doesn't overlap with other elements