English Landing Page Rules

A checklist for building new English landing pages on attuned.ai (e.g., /recruiting-agencies/, /plumbing/, /recruitment/). Use the existing pages as reference templates.

1. Voice & Copy

These are the rules you've explicitly given. Double-check anything new against them.

[ ] No em-dashes. Neither the unicode — nor the HTML entity —. Use commas, periods, or colons instead. (En-dashes – / – are fine for number ranges like 12–18 months.)
[ ] No "it's not X, it's Y" sentence structures. Avoid the negation-then-replacement pattern in any form: It's not A. It's B. / These aren't A. They're B. / Not a A. Not a B. / is a B problem, not an A problem. Rewrite to assert the positive directly.
[ ] Single <h1> per page. Sub-sections use <h2> / <h3>.
[ ] Marketing copy stays specific. Stats with sources, named customer quotes, named blog posts. No generic claims without a citation or example.
[ ] Include at least one Mastroianni-style metaphor. Borrow a precise, domain-specific concept from the buyer's world (or a related field) and use it to illuminate the abstract problem of motivation, disengagement, or hiring. The metaphor should feel like a small, slightly funny aside that earns a second of stillness from the reader. Place it in the Mechanism section or near a major emotional turn. Examples already in the canon:
- plumbing/index.html: "There is, incidentally, a precise technical term in the plumbing trade for undetected pressure loss that quietly empties a system while every surface reading appears normal. We note this. We do not dwell."
- Mastroianni quote (used on recruitment pages): "How are you?" is a ritual question that expects a ritual answer. Both parties understand: what's being exchanged is a performance of connection, not connection itself.
- recruiting-agencies/index.html: an aside about candidate ghosting (offer accepted, then silence) used as a mirror for the recruiter who says "I'm good" while quietly disengaging.
If you can't find a metaphor in the buyer's domain, take one from physics, biology, or game theory. The point is to surprise the reader without breaking voice.

2. Tracking (mandatory)

Every English LP must have all three trackers, gated on user consent.

[ ] Google Analytics 4 — measurement ID G-J02EJQ6NWP (EN site; G-FB2TDQ8J1G is the JP site)
[ ] HubSpot — portal ID 44136903, script https://js.hs-scripts.com/44136903.js
[ ] Leadfeeder — site ID JMvZ8gzWgVPa2pOd
[ ] All three load only after the user accepts cookies. Default state on first load is fully denied.
[ ] Use Google Consent Mode v2 (gtag('consent', 'default', { ... })) before any tracking script loads.
[ ] GA4 anonymizes IPs by default. No anonymize_ip config needed.
[ ] Every CTA button has a data-cta="<unique-id>" attribute. UTM params are added by the tracking script automatically (per TRACKING.md).
[ ] Track cta_click, link_click, and scroll_depth (25/50/75/100%) events.
[ ] Default UTM source / campaign use the LP slug (e.g., recruiting-agencies-lp / recruiting-agencies).

3. GDPR / Privacy

[ ] Use the shared CookieConsent library (/assets/cookieconsent.umd.js + /assets/cookieconsent-config.js + /assets/cookieconsent-theme.css). Do not build a bespoke cookie banner.
[ ] Gate tracking scripts with type="text/plain" and data-category="analytics" or data-category="marketing". CookieConsent auto-enables them on consent.
[ ] "Cookie Settings" button in the footer uses data-cc="show-preferencesModal".
[ ] Privacy Policy link is reachable from every page footer: https://www.attuned.ai/privacy-policy.
[ ] Banner copy names every third party (Google Analytics, HubSpot, Leadfeeder).
[ ] YouTube embeds use the facade pattern: render a click-to-play placeholder, load the iframe only after click, and use the youtube-nocookie.com domain.

4. CTAs

Every English LP has at least these three CTA destinations:

[ ] Primary: Google Calendar booking link → https://calendar.app.google/R53Cwb9YeHNRuaaL6
[ ] Secondary: A relevant whitepaper or report download (e.g., https://www.attuned.ai/wp-how-to-prevent-unwanted-employee-turnover-download/)
[ ] Tertiary: Link to the page's anchor case study (the named customer story used on the page)
[ ] Hero, mid-page, sticky-mobile, and final-CTA sections all have at least one CTA.
[ ] Every CTA has a data-cta attribute with a unique, descriptive ID.
[ ] CTAs open in a new tab (target="_blank" rel="noopener").

5. Content Structure (plumbing-style narrative arc)

The plumbing page is the canonical reference. Sections in order:

Nav with logo + primary CTA
Hero with headline, sub, two CTAs, optional logo strip, dashboard mockup
Story arc (4 cards: Background / Challenge / Solution / Result of the case study customer)
Industry stats (4 stat cards, each with a source attribution)
Personas ("sound familiar?" — 2 buyer profiles with pain bullets and a quote)
ROI / cost (the dollar value of the problem you solve)
YouTube video (intrinsic vs extrinsic motivation explainer, facade pattern)
Mechanism / disengagement visual (the science of why this happens)
Industry challenges (4 reasons the industry has this problem)
How it works (Step 0 + Steps 1-5: assessment → profiles → coaching → ramp → retain)
Mid-page CTA strip
Featured case study (real, named customer with quotes and metrics)
Resources (whitepaper + 4-6 relevant blog posts)
Why Attuned (4 reason cards)
FAQ (6-8 questions, each as <details> and mirrored in JSON-LD FAQPage)
Final CTA (split: emotional pitch left, conversion card right)
Footer with privacy / terms / cookie settings
Sticky mobile CTA

6. SEO / AEO

[ ] <title> under 60 chars, includes primary keyword + brand.
[ ] <meta name="description"> under 160 chars, action-oriented.
[ ] <meta name="keywords"> with 6-10 audience-relevant terms.
[ ] <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />.
[ ] Canonical link to the LP's own URL.
[ ] hreflang set to en and x-default.
[ ] Open Graph + Twitter Card tags with a 1200x630 image.
[ ] JSON-LD blocks (four <script> blocks, five schema types):
- Organization
- WebPage (with @graph containing BreadcrumbList)
- SoftwareApplication (Attuned, with offer link to the calendar)
- FAQPage (mirrors the visible FAQ)
[ ] Every image has descriptive alt text. Decorative images use alt="".
[ ] Hero image has fetchpriority="high" and is preloaded with <link rel="preload">.
[ ] All other images have loading="lazy" and width/height attributes.

7. Images

(Per CLAUDE.md)

[ ] AVIF preferred, WebP accepted. No PNG/JPG except OG image and favicon.
[ ] No + in filenames (S3 treats + as a space, file 404s on CloudFront). Use hyphens or spaces.
[ ] Reuse /plumbing/ assets where appropriate (dashboard, motivator-report, assessment, disengagement, satisfaction-trend, attuned-logo) instead of duplicating.
[ ] OG image at /<lp-name>/og-image.png (PNG is fine for OG).

8. Deployment

[ ] Add an empty .landing-page marker file at <lp-name>/.landing-page.
[ ] No workflow change needed: .github/workflows/deploy.yml syncs all of _site/ to S3 on every push to main.
[ ] Add <lp-name> to the for dir in loops in scripts/validate-content.sh sections 4 and 6 (per CLAUDE.md) so CI validates your new page.
[ ] Run npm run build locally and confirm zero errors before pushing.
[ ] Run scripts/validate-content.sh and confirm zero errors (warnings on large legacy images are OK).

9. Mobile

[ ] Sticky bottom CTA on mobile (visible below 768px).
[ ] Hamburger nav menu replaces full nav below 760px.
[ ] Hero/sub copy uses clamp() for responsive type scaling.
[ ] All grids collapse to single column on narrow viewports.

10. Accessibility

[ ] Cookie banner is role="dialog" with aria-label.
[ ] Hamburger button is aria-expanded toggled.
[ ] YouTube facade is keyboard-activated (role="button", Enter/Space handler).
[ ] All interactive elements (buttons, links) have visible focus styles by default.
[ ] prefers-reduced-motion respected for any decorative animations.

CLAUDE.md — repo-wide conventions and architecture
TRACKING.md — full GA4 + UTM passthrough implementation guide
plumbing/index.html — canonical reference template
recruiting-agencies/index.html — most recent build, includes consent-gated GDPR + HubSpot