Instructions

How to Use the Rendani Astro Template

Rendani is an Astro 7 site styled with Tailwind CSS v4 and written in TypeScript. Install the dependencies with npm install, start the development server with npm run dev, and open http://localhost:4321. npm run build produces the production site in dist/ — every page is static HTML.

This guide covers the file layout, the design token system, the content files and the animation scripts. Read it before making structural changes.

File Structure

Everything the template needs ships inside the project folder:

• src/pages/ - one file per route — 14 pages plus the [slug].astro routes that generate a page per collection entry.
• src/layouts/Base.astro - the document head, the header, and the page shell every route sits in.
• src/components/layout/ - the header, footer, call-to-action block and container.
• src/components/sections/ - one file per section of the design.
• src/components/cards/ and ui/ - project, blog, case-study, team and pricing cards; buttons, headings and form pieces.
• src/content/ - the collections as MDX files — blog, projects, services and case studies. src/content.config.ts declares their schemas.
• src/lib/site.ts - site name, contact details, navigation and the form endpoint, in one place.
• src/scripts/ - the small engines the interactive pieces share — reveal and counters, scroll-scrubbing, the accordion, form submission and smooth scrolling.
• src/styles/ - the design tokens (variables.css) and the Tailwind theme mapped onto them (theme.css).
• public/assets/ - local images and the Inter Display webfont.
• scripts/ - audit:classes, which checks every Tailwind class in the project against the compiled stylesheet.

Design System & Tokens

All styling flows from CSS custom properties declared in src/styles/variables.css, and src/styles/theme.css exposes each one to Tailwind. Change a token once and every utility that references it updates. Many tokens change value at 480, 768 and 992px, so a class such as text-h1 is already responsive — there is no need to add breakpoint prefixes to it.

Tokens are grouped by prefix:

• --rd-color- - palette entries — used as bg-cloud, text-heading, border-block-20.
• --rd-fs-, --rd-leading-, --rd-tracking-, --rd-weight- - type — text-x2, leading-x7, tracking-x4, font-500.
• --rd-space- and --rd-gap- - padding/margin steps (pt-sx10) and grid/flex gaps (gap-gx5).
• --rd-container- - container max-width and gutter — max-w-site, px-gutter.
• --rd-h1- through --rd-h6- - per-heading typography, composed from the base tokens — text-h1 … text-h6.

Customizing Colors

Open src/styles/variables.css and edit the --rd-color- entries. Because components reference the tokens rather than literal values, one edit propagates across every page.

The accent green used by buttons, icons and the accordions is --rd-color-yellow (#9ce069) — the token keeps the name the design gave it. It is referenced everywhere through that token, including the hover copies of button labels, so it only needs changing in that one place.

SVG Element Color

Icons and logos are standalone .svg files in public/assets/images/. To recolour one, open it in a text editor, replace the hex value in the fill or stroke attribute and save. The menu, close and caret icons in the header are inline SVG drawn in currentColor, so they follow the text colour.

Changing Fonts

Inter Display is self-hosted: the files are in public/assets/fonts/ and declared in fonts.css beside them. IBM Plex Mono, used for labels, is declared in astro.config.mjs through Astro's Fonts API, which downloads and serves it from this site — nothing is requested from Google at runtime.

To swap a family, register the new font the same way and point --rd-font-heading or --rd-font-tag at it — the heading token in src/styles/variables.css, the label token in src/styles/globals.css.

Content & Collections

Blog posts, projects, services and case studies are MDX files under src/content/. The fields at the top of each file fill the cards and detail pages; the text underneath is the article body. Add a file to add an entry — its listing card and its own page at /blog/your-slug are generated at build time.

order sets the position in every listing. Body images are written as <Figure src="…" alt="…" /> rather than markdown image syntax. The fields each collection accepts are declared in src/content.config.ts, so a typo fails the build instead of rendering blank.

Animations

There is no animation library. Motion is built from four small pieces:

• data-reveal - add this attribute to any element and it rises and fades in when it scrolls into view.
• data-counter - add it to an element containing a number and it counts up from zero, keeping any suffix such as + or %.
• Hover effects - are Tailwind group-hover: classes on the components themselves — 0.3s, ease-sine-in-out.
• scrub - in src/scripts/scrub.ts ties an animation to scroll position. The home values panel, the inking paragraphs and the settling images use it.
• Smooth scrolling - is Lenis, started from src/scripts/smooth-scroll.ts. Drop that call from Base.astro to turn it off.

Accessibility & Reduced Motion

Every interactive widget is keyboard operable and carries ARIA state: the mobile menu, the All Pages panel, the testimonial carousel and both accordions. Keyboard focus shows a two-tone ring that stays visible on dark and light backgrounds alike.

Visitors who set prefers-reduced-motion get the finished layout with no entrance animation, no ambient loops, no pinned scrolling and native scroll. Without JavaScript the page is fully visible — nothing waits on a script to appear.

Forms

The contact form and the footer sign-up both submit through src/scripts/form.ts, which posts to formEndpoint in src/lib/site.ts. Out of the box that is a placeholder, and a form pointed at it shows the error state instead of pretending the message was sent. Set it to your own handler — Formspree, Basin, or an Astro endpoint in this project — before going live.

The password page is a design, not a gate. To make it real, check the password on the server and set a cookie.

Notes & Tips

Tailwind's default scales are switched off, so p-4 or text-lg produce no CSS. Use the design's own tokens, or an arbitrary value such as p-[18px]. Nothing warns you when a class does not exist — npm run build && npm run audit:classes checks every class in the project against the stylesheet the build produced.

Replace the demo contact details, the copyright line and the site URL in src/lib/site.ts — and the matching site value in astro.config.mjs, which drives the canonical tags. Favicons: replace the icon set in public/assets/images/ — favicon, favicon-dark, favicon-48, webclip and webclip-180/192.

Template Support

Support for this template is provided through the marketplace you bought it from. Use the support or contact option on the template's listing page, and include the page and the screen width where you see the problem.

Before writing in, CODE.md in the project root answers most how-does-this-work questions — including the most common one, a Tailwind class that appears to do nothing.

License

Your right to use this template is the licence granted by the marketplace at purchase; its terms apply in full. Images, icons, fonts and third-party code each carry their own licence — see the License page for the attributions.