How To Customize AlphaWave

Getting Started

AlphaWave is an Astro theme with a Strapi CMS for blog posts, jobs and services. Follow these steps to make it yours.

• Run npm install, then npm run cms:install, npm run cms:seed and npm run cms:dev to start Strapi with the demo content. Copy .env.example to .env and run npm run dev in a second terminal.
• Open the Style Guide page first. It shows every heading, text style, color, button and form field the template uses.
• Set your site name, URL, logo, default SEO and footer text in src/config/config.json, the navigation in src/config/menu.json and the social links in src/config/social.json.
• Update the SEO title and meta description of each page in its file in src/pages.

Colors, Spacing & Typography

Every color, font, size, line height, letter spacing, spacer and radius is a CSS variable at the top of src/styles/alphawave.css. Change a variable once and the whole site updates.

• Color Palette holds the raw shades (Primary, Secondary, Gray, White, Black and accent colors).
• Theme Colors holds the semantic tokens used by the styles: Text Color, BG Color, Border Color and Button Color. Point a theme token at a different palette shade to rebrand.
• Typography holds font families, sizes, weights, line heights and letter spacing, with tablet and mobile values in the media queries. Two Google Fonts are self-hosted by the Astro Fonts API (astro.config.mjs): Inter for headings, body text, navigation and buttons, and Literata, the accent font used for the italic highlight words in headings.
• Base collection holds spacers, radius, container sizes and blur. Its responsive values are applied on the page-wrapper class.

Components

Repeated pieces are Astro components in src/components. Edit a component once to update every page that uses it.

• Header, Footer and CTA appear on every page (src/components/layout and src/components/sections/shared). Their links and texts come from the files in src/config.
• Buttons (PrimaryButton, SecondaryButton and LinkButton in src/components/ui) take a label and a link.
• Cards (BlogCard, JobCard and ServiceCard in src/components/cards) render the CMS content everywhere it appears, so a change to a card applies to every list.

CMS Collections

Strapi feeds the dynamic content. Add, edit or unpublish entries in the Strapi admin, then rebuild the site and every list updates on its own.

• Blog Posts feed the blog lists on Home, About, Services and Blogs, plus the article page for each post. Featured posts appear at the top of the Blogs page.
• Services feed the services slider on Home and the Services page, plus the details page for each service. Sort order sets their position.
• Jobs and Companies feed the job listings on Home and the Jobs page, plus the page for each role. Each job links to the company that publishes it.

Forms

The Contact form, the Style Guide form and the Footer newsletter post to the endpoint in the PUBLIC_FORM_ENDPOINT environment variable, so any form service such as Formspree or Basin works without code changes.

• Every field has a visible label. Rename a field with its name attribute so submissions stay readable.
• Success and error messages use the form-message class (and form-message is-error). Edit their text directly in the component.

SVG Icons

Button arrows, slider arrows, social icons, contact icons (phone, email, office) and card icons are inline SVG code. Each SVG uses currentColor, width 100% and height 100%, so the class around it controls its size and color.

• Change the color of every button icon: edit the Button Icon Dark or Button Icon Light variable in the theme colors.
• Change other icons: edit the color variable used by the icon class (for example contact-info-icon uses Text Color Primary Dark, contact-location-icon uses Text Color Dark).
• Replace an icon: paste your new SVG in place of the old one and set its fill or stroke to currentColor and its width and height to 100%. Keep aria-hidden="true" for decorative icons. Social icons live in src/components/ui/SocialIcon.astro.

FAQ Accordion

Each FAQ item opens and closes with the Toggle FAQ answer interaction included in public/js/webflow.js. It is scoped to the item, so every FAQ works on its own.

• Clicking the question animates the answer height from 0 to auto and rotates the plus icon 45 degrees. A second click plays it in reverse.
• To add a question, copy an existing FAQ item in the FAQ section and change its question and answer text. No extra setup is needed.

Animations

The animations run on GSAP through the interaction runtime in public/js/webflow.js, and most of them are attached with attributes, so you can add or remove motion on any element in the markup. Visitors who turn on reduced motion in their operating system see every element in its final state, with no movement.

Interactions and What They Do

• Hero Load Animation (page load): elements with page-load-1, page-load-2, page-load-3 or page-load-4 fade in and rise 60px, starting 0s, 0.2s, 0.4s and 0.6s after load (page-load-5 = 0.8s).
• Hero Title Animation (page load): the page H1 with hero-title splits into letters that rise and fade in one after another.
• Reveal Animation 0.0s / 0.2s / 0.4s / 0.6s / 0.8s Delay (scroll): elements with Reveal-anim-1 to Reveal-anim-5 fade in and rise 60px when they reach 90% of the viewport. Use 1 for eyebrows, 2 for intro text and button wrappers, 3 to 5 for cards in a row.
• Opacity Reveal (0.2s Delay) (scroll): elements with Reveal-2s fade in without moving.
• Section Title Animation (scroll): section H2s with section-title split into letters that rise in as the heading enters the screen.
• Partners Logo Loop (page load): the logo strip on Home and Contact scrolls left forever (50 seconds per loop).
• Hero Image Scrolling (scroll, Home): the hero photo moves slowly inside its frame as you scroll. It is turned off on mobile.
• Blog Image Hover, Featured Blog Hover, Service Card Hover, Job Card Hover and Values Card Hover (hover): show the arrow badge, the mint overlay, the image zoom or the color change on cards, and play back when the mouse leaves.
• Toggle FAQ answer on click (click): opens and closes each FAQ item.
• Number counters: any element with data-counter counts up from 0 when it scrolls into view (src/scripts/animations.ts).

Add or Remove an Animation

• Add the attribute to the element in its component, for example Reveal-anim-2="" or section-title="". Names must match exactly.
• To remove an animation, delete the attribute. The element then simply shows without motion.
• Put reveals on wrappers, never on a Primary or Secondary Button itself, so the button hover lift keeps working. Inside CMS lists, put the attribute on the list item.

Smooth Scrolling

• Smooth scrolling uses Lenis. Change its settings (lerp, wheel multiplier) in src/scripts/animations.ts.
• Every page keeps its data-wf-page id in src/pages: the interaction runtime uses it to load that page's animations, so keep it when you edit a page.

Logo Marquee Structure

logos-track-wrap (overflow hidden) holds two identical logos-track rows. Each row moves from 0% to -100% of its own width, so the second row slides in behind the first and the loop never jumps. Each row has right padding equal to its gap. If you add or replace a logo, change it in both rows. The second row is hidden from screen readers with aria-hidden.