I improved the contrast in both sections. For the hero, I increased the white overlay opacity from 60% to 75% and changed the heading to text-stone-800 and the description to text-stone-600 for better readability against the background image. For the footer decorative text, I changed from text-muted/30 to text-stone-300 which provides much better visibility while still maintaining a subtle decorative appearance.

The code looks correct - useState("Lattes") is set and the menuItems object has a Lattes key. The fallback || [] is also present. The error might be due to a type mismatch. Let me refactor the component to use a more explicit type approach:

I refactored the menu component to use proper TypeScript types. I created a Category type from the categories array using as const, typed the menuItems object with Record<Category, ...>, and typed the useState hook with useState<Category>("Lattes"). This ensures type safety and guarantees that activeCategory will always be a valid key in menuItems.

I made all three changes: removed the "Light Bites" category from the menu (keeping only Lattes, Matcha & Tea, and Pastries), changed the heading from "A Different Kind of Library" to "A Different Kind of Cafe", condensed the three paragraphs into one concise paragraph, and removed the "Est. 2020" decorative element entirely.