Terra — Premium Matcha E-commerce
Terra is a single-product storefront for a ceremonial matcha brand, built with Next.js 16 and Tailwind CSS 4. The home page tells the product story from origin and process to ingredient details, a testimonial, size selection and an FAQ, on a warm light layout with Playfair Display headings. A slide-out cart lets shoppers change quantities and see how close they are to free shipping.
Key Features
Editorial hero with a slow-zoom product image and a direct buy button
Size picker with three variants and a quantity control that adds to the cart
Slide-out cart with quantity, remove, subtotal and a free-shipping threshold
Sticky image section for ingredient details, with scroll-in reveal animations
FAQ accordion, guarantee block and newsletter form
Color tokens in one CSS file for easy re-theming
What's Included
One-page home: hero, trust bar, benefits, process, product details, testimonial, purchase section, FAQ, guarantee, newsletter
Navbar, footer and cart drawer
Who It's For
Single-product brands such as matcha, coffee or supplements
Small direct-to-consumer brands launching one hero product
Developers who want a focused product page with a working cart
- Download Counts:
- 0+
- Rating:
- 0(0)
- Framework:
- next.js
- Updated:
- 05/10/2026
- Released:
- 05/10/2026
No reviews yet
Be the first to review this template!