Porting a Montessori Brand Site to Astro Without Visual Drift

KumpulBalita is an Indonesian Montessori parenting brand. Its landing page was hand-written HTML, CSS and JavaScript. I ported it to Astro without changing how it looks, added an English version, and later built the sales page for its first ebook on the same codebase.

Rebuilt the page as Astro components and kept the old page untouched as the reference

Compared the result against the original through six verification gates, ending at a 0.02% pixel difference

Moved the animation layer to GSAP, writing the same CSS custom properties the old script did, so none of the CSS had to change

Output is still static HTML, with no framework runtime shipped to the browser

Indonesian and English published from one component tree, each on its own URL with hreflang tags

A type check fails the build if the English strings miss any Indonesian key

One command runs every check before a deploy, including structure checks, 24 WCAG contrast pairs and link checks

Playwright browser tests in WebKit, Chromium and Firefox, run with the production CSP

A separate motion test for the GSAP animation, reduced motion and the no-JavaScript fallback

Ebook sales page plus two campaign landing pages for ads, all leading to one checkout

GTM, GA4, Meta Pixel and TikTok Pixel, each allowed explicitly through the CSP

The site looks the same as the hand-coded original, now ships in two languages, and every change has to pass tests in three browsers before it goes live.