finperiti.com, redesign

This is a complete rebuild of the official website https://www.finperiti.com/. The content (texts, pages, links, form, metadata and images) comes from the live site. The visual identity comes from the Finperiti.Web.V2 reference project: tokens, typography, header, buttons, cards, sections, motion and logo.

• Stack: static HTML, CSS and vanilla JavaScript. It has zero runtime dependencies, which is the same architecture as V2 and as the current live site (static files on GitHub Pages).
• Build: one Node script with no npm packages. It assembles the pages from shared partials (header, footer, CTA, icon sprite), bundles and minifies the CSS into one file, gives CSS/JS content-hashed names (so they can be cached forever) and writes dist/.
• Output: 8 pages plus a 404 page (home, finperiti AML, finperiti IQ, about, pricing, contact, privacy, terms). Total size is about 0.7 MB, most of it fonts and team photos.

Quick start

Requirements: Node.js 18.17 or later. Nothing needs installing to build or run the site.

npm run build       # → dist/  (static site, ready to upload)
npm run dev         # build + serve on http://localhost:5174 (clean URLs, 404 page, production CSP);
                    # rebuilds and reloads the browser whenever src/ or site.config.json changes
npm run preview     # serve an existing dist/ without rebuilding

Run the QA suite (uses Playwright, a dev dependency only):

npm install         # installs Playwright
npx playwright install chromium webkit   # first time only (WebKit = the iPhone/Safari checks)
npm test            # build + 243 automated checks (incl. pricing calculators, idle performance, reduced motion, iPhone layout); writes docs/screenshots/*.jpg and docs/qa-results.json

Project structure

src/
  pages/                 one file per page; a <!--meta {json}--> block sets title, description, path, CTA copy
    index.html  aml.html  iq.html  about.html  pricing.html  contact.html
    privacy-policy.html  terms-and-conditions.html  404.html
  partials/              reusable components, included with {{> name}}
    head.html            <head>: SEO, Open Graph, Twitter, favicons, fonts, CSS
    header.html          fixed nav, mobile menu, skip link (+ sprite)
    sprite.html          SVG icon set (V2 icons + additions)
    page-hero-bg.html    hero waves, dot field, glow
    cta-simple.html      final call-to-action band
    footer.html          shared footer · footer-home.html (home variant) · footer-bottom.html
  public/                copied as-is to dist/
    assets/css/          fonts · tokens · base · components · sections + dashboard (from V2) · pages (new, token-based)
    assets/js/           main.js (nav, reveal, timeline, globe, prefetch) · forms.js (shared form sending) · contact.js (form) · pricing.js (calculators, estimate emails)
    assets/img/          brand/ og/ team/ partners/   (dots/ is generated by the build)
    assets/fonts/        Manrope + JetBrains Mono (variable woff2, self-hosted)
    robots.txt  CNAME
scripts/build.mjs        build: partials + variables + prices + nav state + expired links + dot-field SVGs + CSS bundle + hashed assets + sitemap + host header files → dist/
scripts/carry-over-assets.mjs   deploy step: keeps the live release's hashed CSS/JS/SVG in dist/
scripts/serve.mjs        local server with production routing and security headers
tests/qa.mjs             automated QA (Playwright)
site.config.json         site URL, sign-in app URL, form endpoint + public form key, prices, calculator assumptions
nginx.conf, Dockerfile   container hosting option
.github/workflows/deploy-pages.yml   GitHub Pages deployment
docs/DESIGN-SYSTEM.md    analysis of the V2 reference (typography, colours, header, layout, components, motion)
docs/CONTENT-INVENTORY.md   page map, assets, limitations
docs/screenshots/        QA screenshots for each page at 375 / 768 / 1280 / 1920 px + V2 comparison

Design system

All colours, type sizes, spacing, radii, shadows and motion values live in src/public/assets/css/tokens.css, copied unchanged from V2. Change a token there and every page follows. New components in pages.css only use these tokens. See docs/DESIGN-SYSTEM.md.

Editing content

• Prices: change them once in site.config.json → prices.

• Time-limited links: add data-expires="YYYY-MM-DD" to a link (e.g. an event invitation); it disappears from that date, at build time and in the browser.

• CSS: edit the files in src/public/assets/css/; the build combines them in the order listed in cssOrder (scripts/build.mjs).

• Text: edit the page in src/pages/.

• Navigation and footer: edit src/partials/header.html or footer*.html. These apply to every page.

• Current-page highlight: the build marks the current page in the navigation automatically.

Configuration (site.config.json, or environment variables at build time)

Key	Env var	Default	Used for
siteUrl	SITE_URL	https://www.finperiti.com	canonical, Open Graph, sitemap, robots
appUrl	APP_URL	https://kind-river-07dda5b03.6.azurestaticapps.net	footer "Sign in" link (/signup)
formEndpoint	FORM_ENDPOINT	https://api.web3forms.com/submit	contact form
formAccessKey	FORM_ACCESS_KEY	key copied from the live contact page	contact form (Web3Forms public key)
robots	ROBOTS	index, follow	meta robots (set noindex, nofollow for staging)
legalUpdated	–	17 October 2026	"Last updated" date on the privacy notice and terms
prices.*	–	AML 199 / 399, IQ 99 / 119 / 169	every price on the site, the calculator and the structured data ({{priceAmlEssentials}} etc. in pages)
calculator.*	–	80% automated, 7.5-hour day, 40 clients / 15 h / 5 funds	pricing calculator assumptions and default slider values (shown without JavaScript too)

以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗