Verdant Roast Coffee Shop Landing Page

Description

A landing page template for Verdant Roast, a fictional premium coffee shop, with a bold dark green look and plenty of motion. The page covers a hero product switcher, a menu with category tabs and a carousel, an "Unmatched Quality" section with layered typography, popular drinks, branch locations with map thumbnails, a contact form, and a newsletter footer.

Visitors can pick options for each drink, add it to a cart with an animated badge and toast, and change quantities in a slide-over cart. The menu carousel works with arrows, the keyboard, and swipe, and the contact form is validated with React Hook Form and Zod. Reduced-motion settings turn off parallax and marquees, and the tabs, dialogs, and carousel follow ARIA patterns.

Built with Next.js, TypeScript, Tailwind CSS, Framer Motion, and Zustand as a resellable template. Colors live in one theme file and all products, branches, and copy in one data file, so a buyer can rebrand it without touching the components. Product photos are CC0 stock images with the background removed, and the branch maps come from OpenStreetMap.