Instructions

How to use the Ferea Next.js template

Ferea is built with Next.js 16, React 19 and TypeScript, and every page is prerendered to static HTML. Run npm install, then npm run dev to work on it and npm run build to build it, and deploy to Netlify, Vercel or any host that runs Next.js.

Where things live:

  • Every page is a page.tsx in src/app, one folder per address.
  • public/assets/css/styles.css holds all of the styling, src/components/ferea-scripts.tsx the behaviour and src/components/cart the basket.
  • Images and fonts are in public/assets/images and public/assets/fonts; the menu and the blog are in src/content.

Customizing colors

The design is driven by CSS custom properties declared once in :root at the top of the design section of styles.css. Change a value there and every element that uses it follows.

The key colors:

  • --_color---burnt-sienna — headings, body copy and the dark sections (#7E4124)
  • --_color---copper-brown — buttons, labels and the hero band (#AC6D36)
  • --_color---pale-cream — the page background (#F3EFEA)
  • --_color---warm-ivory — cards and panels (#E7DFD3)
  • --_color---golden-amber and --_color---soft-taupe — accents

Icons and stickers are SVG files in public/assets/images. To recolor one, open it in a text editor and replace its HEX value.

Changing fonts

Ferea uses two families, both self-hosted in public/assets/fonts and declared in public/assets/fonts/fonts.css: Fira Sans Extra Condensed for headings and Akshar for body copy, labels and buttons.

To change a font:

  • Add your WOFF2 files to public/assets/fonts and declare them in fonts.css
  • Point --_base---font-family--your-heading-font or --_base---font-family--your-body-font at the new family
  • The heading and text sizes are the --h1--font-size to --h6--font-size and --text-regular--font-size families beside them

Pages and content

Every page shares the same header and footer, each one component in src/components/layout, and the same .container spacing, so a new page is a copy of an existing one with its sections swapped.

To create a new page:

  • Duplicate the folder closest to what you need in src/app, for example about
  • Rename it, and update the title and description it passes to pageMetadata
  • Replace the sections, copy, images and links
  • Link it from the header or the footer, in src/components/layout

Menu items, categories and blog posts:

  • Each item is one entry: the menu in src/content/products.json and categories.json, and each article a Markdown file in src/content/blog; one template draws each kind of page
  • To add one, copy an existing entry and edit it (an article's name also goes in the list in src/lib/content.ts); its cards then appear on the menu, its category page and the blog by themselves

Cart and checkout

The cart is a working front-end basket kept in the visitor's browser (localStorage). Each product page's .add-to-cart-form carries the item's name, price and picture in data-product-name, data-product-price and data-product-image, read from its entry in src/content/products.json; change the entry and the page, its cards, the cart, the checkout summary and the order confirmation follow.

Place Order on /checkout saves the order and opens /order-confirmation. No payment is taken: connect the checkout form to your payment provider before going live.

Interactions and animations

All motion is hand-written in src/components/ferea-scripts.tsx and section 4 of styles.css. No library is loaded; each effect is switched on by an attribute already in the markup.

What drives what:

  • data-fade-up, data-fade, data-fade-left and data-fade-right — the scroll reveals; add one to any element to reveal it the same way
  • data-fade-group on a wrapper and data-fade-item on its children — a staggered reveal
  • data-label-pop — the section labels that drop in
  • data-roll — the label roll on a button's hover
  • data-load — the opening sequence at the top of each page
  • data-marquee — the running word strip
  • data-spin and data-sway — the turning badge and the swaying stickers
  • data-slider — the home page's menu slider; its arrows, swipe and autoplay are in ferea-scripts.tsx
  • .faq-item — the FAQ accordion

Visitors who ask their system for reduced motion get every section shown at once, with no reveals, loops or smooth scrolling.

Forms

The newsletter, contact and password forms are front-end demos: they validate, then show their success (or, for the password box, error) message. Every field keeps its name.

To connect a real service:

  • Give the <form> an action and method from your provider
  • Remove its data-demo-form attribute so ferea-scripts.tsx stops answering it

Before you publish

Recommended checks:

  • Update each page's title, meta description and social image
  • Add meaningful alt text to every image that carries content
  • Compress new photos; the template ships AVIF, SVG and PNG
  • Review every page on desktop, tablet and mobile
  • Remove the pages and sections you do not use

Still have questions?

If anything here is unclear, or you would like a hand adapting the template, get in touch at contact@kaziehsan.com. We are happy to help.