Waida Studio
A café's website has one job before anything else: to make a visitor want to come in, or order now. Ferea is built around that appetite — big warm headlines in a tall condensed face, copper bands and tilted sticker labels, cut-out cups and coffee beans that drift as the page scrolls, and a menu that reads like a menu board. Built on the Next.js 16 App Router with React 19 and TypeScript in strict mode, it ships 17 page templates covering 42 fully static pages, with a working online menu — Add to Cart, two cart drawers, checkout and an order confirmation — and the menu, categories and blog driven by JSON and MDX files you edit directly. No CMS or backend required.
Whether you run an independent café, a specialty coffee roaster, a bakery or patisserie, a tea or juice bar, a coffee chain's local branch or any food and drink brand, Ferea gives you every page the shop needs — a home page with a menu slider and scroll-linked scenes, an about page whose story timeline draws itself as you read, a tabbed menu, fourteen menu item pages, five category pages, nine full-length articles and a contact page with opening hours. Content lives in JSON and MDX files: re-price a latte and it is re-priced on the menu, its category page, the home slider and in the basket at once. Launch in hours.
Tech Stack
Next.js 16 — App Router, every page prerendered to static HTML at build time
React 19 — server components throughout, with small client islands for the basket and the interaction layer
TypeScript — strict mode, `npm run typecheck` clean
Hand-crafted CSS — one plain stylesheet driven by CSS custom properties, no utility framework and no build-time CSS pipeline
Self-hosted webfonts — Fira Sans Extra Condensed and Akshar as woff2, no third-party font requests at runtime
JSON and MDX content layer — the menu and categories as JSON, the articles as MDX with gray-matter frontmatter and a Markdown parser that renders into the design's own markup
Front-end shop — a React cart store in `localStorage`: Add to Cart, quantities, two cart drawers, checkout and order confirmation
Zero animation libraries — no jQuery, no GSAP, no Lenis: the opening sequence, the scroll reveals, the five scroll-linked scenes, the menu slider, the mega menu and the smooth wheel scroll are one TypeScript file
Included Pages and Templates
Core pages
Home with the swinging hero cup, the "more than coffee" paragraph that reads in letter by letter, a menu slider with arrows, swipe and autoplay, feature cards that trade places, the place and special-offer sections, a running word strip, a testimonial deck that throws its cards aside, the four newest articles and the FAQ
About with the story timeline that draws itself as you scroll, the rating and why-choose sections, the team and the FAQ
Menu with a tab per category and an ALL tab listing every item by category
Contact with a labelled enquiry form, the address and the opening hours
Menu and shop
14 menu item pages, each with its price, sizes, three facts, a full-size picture viewer, Add to Cart and three suggested items
5 menu category pages: Espresso, Brewed Coffee, Matcha, Non-Caffeinated and Pastries
Checkout, PayPal checkout and an order confirmation that prints the order placed
Blog
Blog index and 9 full-length articles, each with an author, a picture gallery, share links and three related articles
Utility pages
Style guide, instructions, licenses, changelog, a 401 password-protected page and a 404 page
17 page templates. 42 static pages.
Easy Content Editing
Everything you change lives in `src/content/`. Edit a file, rebuild, done.
`src/content/products.json` — the 14 menu items: the name, the description, the price and what it buys, the sizes, the picture, the three facts, the category and the three suggested items
`src/content/categories.json` — the 5 menu categories
`src/content/blog/*.mdx` — the 9 articles: the title, category, date, author, the card, banner and gallery pictures, the related articles and the body
Every card reads the item's own entry, so a re-priced latte is re-priced on the menu, on its category page, in the home slider and under every item that suggests it — and Add to Cart reads the entry too, so the basket charges what the page shows. File an item under a category and it appears under that tab and on that category's page by itself.
Article bodies are Markdown: section headings, small headings and paragraphs, before and after the picture gallery. A parser places each block inside the design's own markup, so the words stay editable and the layout stays exact. Reach past that grammar, or name a category or suggestion that does not exist, and the build stops and names the file.
Theming is one file. Every brand colour, font, spacing step and type size is a CSS custom property in the `:root` block of `public/assets/css/styles.css`. Change a value there and it propagates across every page.
Verified Against the Original
All 42 pages were compared against the original template tag for tag, attribute for attribute and text run for text run — in the body and in the head — and lay out to the same height at four widths. The stylesheet is the original, unchanged; every page was swept for horizontal overflow from 320 to 1920 pixels wide with the menu open and closed, and every interaction — the whole shop included, from Add to Cart to the order confirmation — was driven on the original and on the port and left the same state on the page. The header, the footer, 1,262 copies of three repeated primitives and 125 menu and article cards are components that render the original markup exactly.
Performance and SEO
Every page prerendered as static HTML, ready for a CDN
Per-page title, description and Open Graph and Twitter card metadata
Absolute share-image URLs so link previews resolve
Self-hosted fonts with `font-display: swap` and zero third-party requests
AVIF imagery with responsive `srcset` sizes, lazy-loaded below the fold
Semantic markup with one H1 per page, real buttons and landmarks
Keyboard-reachable menus, ARIA tabs with arrow-key support, a labelled slider and cart dialogs, and FAQ rows built on real buttons
Full `prefers-reduced-motion` support, and readable with JavaScript off
Deployment
Deploys to Netlify (`netlify.toml` included), Vercel, Cloudflare Pages or any host that runs a Next.js build. `npm run build` prerenders every page; there is no server, no database and no API to configure.
What You Get
The complete Next.js 16 project source
17 page templates covering 42 static pages
14 menu items, 5 categories and 9 articles as editable JSON and MDX
A working front-end cart, checkout and order confirmation
The original stylesheet and self-hosted webfonts
Full HTML documentation
Changelog and third-party license file
Requirements
Node.js 20 or newer
npm 10 or newer, or pnpm, yarn or bun