How To Customise Fexiva

Getting Started

Fexiva is an Astro theme. Every page is static HTML generated at build time, and the Blog and Integrations content is pulled from a Strapi CMS. The original interactions run on the bundled webflow.js, GSAP and Lenis scripts, so no extra setup is needed.

1. Start Strapi from the strapi folder with npm run develop, then start the theme from the Astro folder with npm run dev.
2. Open the Style Guide page first. It shows every heading, text size, colour, button and form field the theme uses.
3. Edit src/config/site.ts to change the site name, default SEO text, navigation, footer links and social profiles.
4. Replace the logo files in public/images (fexiva-logo.svg and fexiva-wordmark.svg) and the favicons next to them.

Environment variables

# Astro/.env
STRAPI_URL=http://localhost:1337
STRAPI_API_TOKEN=your-read-only-api-token
PUBLIC_FORM_ENDPOINT=https://example.com/api/forms
SITE_URL=https://example.com

Colours, Spacing & Typography

Every colour, font, size, spacer and radius is a CSS custom property declared at the top of src/styles/fexiva.webflow.css. Change the variable once and the whole site updates.

• Color holds the primitives (Primary, Gray, White and Accent scales) and the semantic tokens that reference them: Text Color, Background Color, Border Color and Button Color.
• Sizes holds the Spacer scale, container widths and radius tokens, with media-query overrides for tablet and both mobile widths.
• Typography holds the two font families, weights, the H1 to H6 and paragraph sizes, line heights and letter spacing.

Components

Every page in src/pages is assembled from section components in src/components/sections. Edit a shared component once to update every page that uses it.

• Header and Footer live in src/components/global and read their links from src/config/site.ts. The current page is highlighted automatically.
• CTA, FAQ, Blog section and Utility hero live in src/components/sections/shared.
• Blog card, Post meta and Integration card render CMS items and are reused across the Home, About, Blog and detail pages.
• The BaseLayout in src/layouts sets the SEO tags, fonts, favicons and scripts for every page.

Strapi CMS

Three Strapi collection types power the dynamic pages. Each blog post and integration gets its own page at /blog/slug and /integrations/slug, with SEO tags filled from the entry. Until STRAPI_URL is set, the theme renders the bundled sample content from src/data, so it works out of the box.

• Blog Posts: title, slug, excerpt, main image, category, author, published date, read time, rich-text body, article images, continued body and a featured switch used by the Blog page hero.
• Authors: name, photo, role and bio. Each post links to one author.
• Integrations: name, slug, logo (SVG), short description, category, rich-text body, article images and continued body.

Forms

All forms post to the URL in the PUBLIC_FORM_ENDPOINT environment variable, so you can connect any form backend. Without it, the forms run in demo mode and show the success message without sending data.

• Contact form on the Contact page with name, email, service select and message fields. Success and error messages are styled with the contact-form-success and contact-form-error classes.
• Newsletter form inside the Footer component.
• Password form on the 401 page. It is a design-only page: add protection on your host (for example basic auth) if you need it.

SVG Icons

Interface icons are inline SVG elements inside the section components. They use the current text colour, so you recolour an icon by changing the color of the icon or its parent in CSS.

1. Find the icon in its section component (for example feature-card-icon-svg or contact-info-icon-svg).
2. To swap the glyph, paste a new SVG that uses stroke or fill set to currentColor, then give it the same class so it keeps its size.
3. Social icons in the Footer and Contact page are SVG files in public/images. Replace the files or change the paths in src/config/site.ts.

How To Edit GSAP Animations

Fexiva uses one small GSAP script: a number counter that counts each statistic up from zero the first time it scrolls into view. It lives in src/components/global/Scripts.astro, under the comment “Counter animation”.

Element map

• Home → Hero → hero-stats-number (2 elements, “120K”)
• Home → About → about-stat-number (3 elements, “$5B”, “120”, “75”)
• Each of these carries the attribute data-counter = true. The script reads the visible text, keeps any prefix (“$”) and suffix (“K”, “B”, “%”), and animates only the number in between. Thousands separators and one decimal place are preserved automatically.

Adding a counter

<!-- any element whose text contains a number -->
<div data-counter="true">$5B</div>
<div data-counter="true">98%</div>
<div data-counter="true">1,200+</div>

Values you can change

• duration: 1.8 — how many seconds the count takes. Keep it between 0.8 and 3.
• ease: "power2.out" — the easing curve. Try "power1.out" for a gentler finish or "expo.out" for a snappier one.
• start: "top 88%" — when the count begins. "top 88%" fires as the number reaches the lower part of the viewport; "top 100%" fires the moment it enters.
• once: true — the count plays a single time. Set it to false to replay every time the number scrolls back into view.
• toFixed(1) — decimals shown for values such as “4.9”. Change the 1 to 2 for two decimal places.

How to remove it safely

1. Open src/components/global/Scripts.astro.
2. Delete the script block that starts with the comment “Counter animation”. Do not touch the scripts above it.
3. The statistics now render as static text with exactly the same layout, spacing and styling — nothing on the page depends on the script.
4. Optional: remove the data-counter attributes from the number elements so the site carries no unused attributes.