Instruction

Follow the steps below to install the theme, connect the Strapi CMS and customize the content and animations. Everything you need to edit lives in the src/config folder and in Strapi.

1. Install and run the site

Requires Node.js 22.12 or newer. The site runs with the bundled demo content, so Strapi is optional for a first look.

npm install
npm run dev        # http://localhost:4321
npm run build      # production build in ./dist

2. Start the Strapi CMS

Strapi lives in the ./strapi folder. On first start it creates the Blog, Project and Service collections and imports the demo content and images.

cd strapi
npm install
cp .env.example .env
npm run develop    # admin: http://localhost:1337/admin

3. Connect Astro to Strapi

Create a .env file in the project root. When STRAPI_URL is set, every page reads its content from Strapi at build time.

STRAPI_URL=http://localhost:1337
STRAPI_API_TOKEN=          # optional read-only token
SITE_URL=https://example.com
PUBLIC_FORM_ENDPOINT=      # e.g. a Formspree endpoint

4. Edit site settings and animations

Brand, contact details, navigation and FAQs live in src/config. Animations use GSAP and are opt-in through attributes such as page-load-1, page-scroll-2 or heading-style-1 (see src/scripts/animations.ts).

src/config/config.json   # site name, SEO, contact, footer
src/config/menu.json     # header, footer and social links
src/config/faq.json      # FAQ section

<h2 heading-style-2="">Animated heading</h2>
<div page-scroll-1="">Fades up when scrolled into view</div>

Instruction

Share your goals with us, and we'll help you find the perfect solution for your business.