Anna Serra | WaretaGarasuSkip to main content
WaretaGarasu
Language
Theme
Glass
Build notes

Build notes: annaserra.it

How I built the site for Anna Serra, Consulente del Lavoro in the Aeolian Islands.

2026Client workReact 18 · CSS · Web3Forms · Cloudflare WorkersLast updated: May 11, 2026annaserra.it (staging) ↗

The brief

Anna Serra is a registered Consulente del Lavoro (a certified Italian labour-law consultant) based in Lipari in the Aeolian Islands. Her clients are employees, retirees, freelancers, and small businesses: people who approach tax and social-security matters with some anxiety and need clear answers, not bureaucratic jargon. The studio had no web presence: a clean-slate project with full freedom over technical choices.

Goal: make the studio the digital reference point for the archipelago. Present services clearly, communicate trustworthiness, and make contact immediate. Italian only, since the audience is local. No technical overkill: no dashboard, no CMS.

Stack: React without npm

React via CDN (with in-browser Babel transpilation) was the right call because the site has components that update dynamically: the tax-deadline table loaded from JSON, the seasonal deadline banner, and a contact form with two submission modes. JSX makes these patterns readable without a build step.

Vite build to static assets, deployed on Cloudflare Workers. React for the UI, Web3Forms for mail, edge headers for security. Same delivery mindset as the vanilla client sites: small surface area, fast pages, no unnecessary dependencies.

GDPR: complete, not decorative

For a professional studio, privacy compliance is non-negotiable. The site has a cookie consent banner on first visit (localStorage key as_cookie_consent), plus a full Privacy Policy and Cookie Policy under EU Regulation 679/2016. Google Maps (the only third-party component) is blocked until the user consents: a placeholder with a direct link replaces the iframe.

Web3Forms is the only external data processor: declared in the Privacy Policy as the data processor for contact-form messages. No analytics, no tracking, no third-party cookies.

Tax deadlines from JSON

The Scadenze Fiscali (tax deadlines) page reads its dates from a data/scadenze.json file. Updating the calendar means editing JSON: no code changes needed. Each row has a date, a description, and a highlight flag for urgent entries. The table is assembled at runtime by React and adjusts automatically to however many entries are in the file.

Contact form: two ways

The form has two modes: email submission via Web3Forms (AJAX, no backend of our own) and a WhatsApp deep-link with the message pre-filled from the form fields. The user chooses. The WhatsApp message logic follows the same pattern as eolietech (the text already includes the sender's name and message) with a visible confirmation after Web3Forms submission.

Design system

The palette reflects the professional context: navy #1D4E6B as the primary color (authority, trust) and amber #C8922A for CTAs and badges (warmth, attention without aggression). Playfair Display for headings (a serif with character, less institutional than Times) and Inter for body text. Both self-hosted as variable .ttf files, cutting the Google Fonts dependency entirely.

The seasonal deadline banner

There's an amber bar above the navigation that surfaces the next relevant tax deadline, for example «Scadenza 730: il 30 settembre». Dismissible per session via a JS variable, no cookie. It's toggled on and off with an enabled flag in Nav.jsx: when there's no urgent deadline on the calendar, it goes dark. Small, but it's the kind of detail that makes a site feel alive instead of published once and forgotten.

Where it stands

The site is live at annaserra.waretagarasu-account.workers.dev, staging URL. The final domain annaserra.it is pending DNS configuration; this link will be updated when the cutover is complete.

If I started over

I'd look harder at Preact instead of React: same API, 3KB instead of 45KB, and the dynamic parts of the site (deadline table, seasonal banner, contact form) don't need the full React surface. I'd also set up the JSON-LD Article schema for the scadenze page from day one, since structured data for a date-driven resource is genuinely useful for search.