INSTRUCTIONS

Avande 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 Vercel, Netlify 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 and src/components/avande-scripts.tsx all of the behaviour.
• Images and fonts are in public/assets/images and public/assets/fonts.

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

Key global styles include:

• Heading sizes: --h1--font-size to --h6--font-size, with matching line heights and weights
• Body text: --text-regular--font-size and --text-small--font-size
• Spacing and gaps: the --_common-spacing---spacing--spacing-4x family
• Reusable parts: .primary-button, .section-wrap, .container and .section-title

The palette is a handful of variables. Replace a value in :root and every section that uses it updates.

The brand colors:

• --_color---main-color--green-neon — the neon accent (#D3FB43)
• --_color---main-color--pale — the page background (#F1EFE2)
• --_color---main-color--dark-pale — the darker cream of cards and tags (#DBDAC8)
• --_color---normal-color--black — text and dark sections

Some icons and decorative graphics are SVG files. To recolor one, open it in a text editor and replace its HEX value; the dashboard gauges are inline SVG inside src/app/page.tsx and are edited the same way.

Avande uses two families, both self-hosted in public/assets/fonts and declared in public/assets/fonts/fonts.css: Inter Tight for headings, body copy and buttons, and Stack Sans Notch for the notched labels and numerals.

To change a font:

• Add your WOFF2 font files to public/assets/fonts and declare them in fonts.css
• Point --_base---font-family--your-heading-font, --_base---font-family--your-body-font or --_base---font-family--third-family at the new family
• Every heading, paragraph and button follows the variable

Every page shares the same header, footer and .section-wrap / .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-us
• Rename it, update its <title> and meta description
• Replace the sections, copy, images and links
• Link it from the header .main-header-navigation or the footer

Blog posts, case studies and solutions:

• Each item is one Markdown file: src/content/blog, src/content/case-studies and src/content/solutions, and one template draws each family
• To add one, duplicate an existing file, edit it, and add its name to the matching list in src/lib/content.ts; its card then appears on /blogs, /case-study or /solutions by itself

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

What drives what:

• data-fade-up, data-scale-up and data-scale-y-up — scroll reveals; add one to any element to reveal it the same way
• .section-title and .utility-title — headings that rise in letter by letter
• .primary-button — the label roll on hover
• .faq-items — the FAQ accordion; the first item opens with the page
• data-slider — the testimonial and feature sliders

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

To add a question, duplicate a whole .faq-items block inside .faq-wrap and change its text. Give the new .faq-title-flex button and .faq-ans-box answer a matching pair of ids in aria-controls and id, so screen readers can connect them.

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 avande-scripts.tsx stops answering it

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 and JPG
• Review every page on desktop, tablet and mobile
• Remove the pages and sections you do not use

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.