Instructions

How to use the Ferea Astro template

Ferea is built with Astro 7 and TypeScript, and every page is written to static HTML at build time. Run npm install, then npm run dev to work on it and npm run build to build it, and deploy the dist/ folder to Netlify, Vercel or any static host.

Where things live:

  • Every page is an .astro file in src/pages, one per address.
  • public/assets/css/styles.css holds all of the styling, src/scripts/ferea.ts the behaviour and src/components/cart the basket.
  • Images and fonts are in public/assets/images and public/assets/fonts; the menu is in src/data, the blog 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, the same head block from src/layouts/BaseLayout.astro, 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 file closest to what you need in src/pages, for example about.astro
  • Rename it, and update the title and description it passes to BaseLayout
  • 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/data/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/data/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/scripts/ferea.ts 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.ts
  • .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.ts 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.