Now I have the design direction. Let me build the full presentation component.

Now let me update the globals.css, layout.tsx, and create all the components.

Now let me update globals.css to reference the correct font variables and add some cartoon styles:

Now let me create all the slide components and the main presentation:

Now let me create the main Presentation wrapper component and the page:

Now let me also update globals.css to wire up the CSS variables for the font correctly:

Everything looks good. The fonts are correctly wired. Let me verify the Presentation component looks complete and do a final check on the layout to ensure the font variables are loaded properly:

The layout looks great. The fonts are loaded as CSS variables but I need to make sure the @theme inline block properly exposes them so they cascade to the component styles. The --font-display and --font-body CSS vars are set via the Next.js font variable option, so all the var(--font-display) references in the inline styles will work correctly. Everything is wired up! Here's a summary of what was built:

10 interactive slides built as separate React components, orchestrated by a Presentation.tsx wrapper with full prev/next navigation, dot indicators (clickable!), and keyboard arrow key support.

The Simpsons aesthetic is applied throughout — Bangers display font for all headings, Nunito for body text, bold 3px black outlines, box-shadow: 4px 4px 0px #1A1A1A cartoon press-depth effect, and the #FDD835 / #2196F3 / #4CAF50 color trio on every element. Each slide has its own background color that smoothly transitions as you navigate, and a slide-in animation plays on every transition.