Coffee shop landing page

Landing page for a fictional business, responsive and accessible.

[personal]2026live

[visit the site]

Ladeira Café is a fictional coffee shop in Belo Horizonte, built to practice layout, responsiveness and attention to visual detail. The demo is live at /demos/cafeteria (the page itself is in Portuguese).

What’s on the page

• Hero section with a headline, call-to-action buttons and an illustration made only with SVG and CSS (no external images).
• Tabbed menu (espresso, filter coffee, iced drinks and food), with prices formatted in Brazilian reais.
• House beans, with tasting notes and a visual roast-level scale.
• Story, address and opening hours, plus a table booking form with in-browser validation.

Technical decisions

• Plain HTML, CSS and JavaScript, statically generated by Astro inside the portfolio itself. The page has its own layout and styles, separate from the rest of the site.
• Accessibility: skip link, WAI-ARIA tabs (arrow keys, Home and End), mobile menu with aria-expanded that closes with Esc, form errors tied to their fields and announced by screen readers, always-visible focus, and animations turned off for people who prefer reduced motion.
• Responsive from phone to desktop, using grid and clamp() for type.
• No confusion: a banner at the top says the business is fictional, the form sends nothing, and the page is noindex and left out of the sitemap so it doesn’t show up when people search for a real coffee shop.