feat(web): add affiliates landing page

[AchoArnold]

Summary

Adds a dedicated /affiliates landing page and replaces the external Affiliates footer link with an internal link to it.

Changes

• New page web/app/pages/affiliates/index.vue (route /affiliates), using the website layout and the site's dark theme + gradient identity with Vuetify 4 components:
  • Hero with headline, up to \/sale copy, and a primary CTA
  • Why promote httpSMS benefit cards
  • How it works 3-step section
  • FAQ shown directly in a two-column grid on desktop (single column on mobile)
  • Closing CTA banner
• All CTAs link to the LemonSqueezy signup: https://affiliates.lemonsqueezy.com/programs/httpsms
• Edited web/app/layouts/website.vue — footer Affiliates link now points to the internal /affiliates page instead of the external LemonSqueezy URL.

Verification

• pnpm eslint and pnpm prettier --check pass on changed files
• /affiliates renders on the dev server (200, no compile/runtime errors)

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity · 0 duplication

Metric	Results
Complexity	0
Duplication	0

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}

[greptile-apps]

Greptile Summary

This PR adds a new /affiliates landing page (web/app/pages/affiliates/index.vue) and updates the footer in web/app/layouts/website.vue to replace the external LemonSqueezy link with an internal NuxtLink to the new page.

• The new page follows the site's dark theme and gradient identity, with a hero, benefits grid, how-it-works steps, FAQ section, and two CTA buttons linking to the LemonSqueezy affiliate sign-up URL.
• The footer change is minimal and correct: the <a href="..."> is replaced with <NuxtLink to="/affiliates"> using the same CSS classes.

Confidence Score: 4/5

Safe to merge — the footer change is a one-line swap and the new page introduces no logic that touches data, auth, or existing routes.

Both changed files are purely presentational. The footer edit is a straightforward swap from an external anchor to an internal NuxtLink. The new affiliates page follows established patterns for layout, composables, SEO meta, and CSS gradients. The only note is a semantic heading concern in the hero that has no functional impact.

No files require special attention.

Important Files Changed

Filename	Overview
web/app/layouts/website.vue	Footer Affiliates link replaced with NuxtLink to /affiliates; minimal, correct change.
web/app/pages/affiliates/index.vue	New affiliates landing page; follows codebase patterns for layout, SEO meta, useDisplay auto-import, and CSS gradients; minor semantic heading concern in hero section.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant Footer as website.vue Footer
    participant Page as affiliates/index.vue
    participant LS as LemonSqueezy Signup

    Note over Footer: Before PR: external anchor tag
    User->>Footer: clicks Affiliates
    Footer-->>LS: redirect to httpsms.lemonsqueezy.com/affiliates

    Note over Footer: After PR: internal NuxtLink
    User->>Footer: clicks Affiliates
    Footer->>Page: navigate to /affiliates
    Page-->>User: render landing page
    User->>Page: clicks Become an affiliate CTA
    Page-->>LS: open affiliates.lemonsqueezy.com/programs/httpsms

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant Footer as website.vue Footer
    participant Page as affiliates/index.vue
    participant LS as LemonSqueezy Signup

    Note over Footer: Before PR: external anchor tag
    User->>Footer: clicks Affiliates
    Footer-->>LS: redirect to httpsms.lemonsqueezy.com/affiliates

    Note over Footer: After PR: internal NuxtLink
    User->>Footer: clicks Affiliates
    Footer->>Page: navigate to /affiliates
    Page-->>User: render landing page
    User->>Page: clicks Become an affiliate CTA
    Page-->>LS: open affiliates.lemonsqueezy.com/programs/httpsms

Loading

_{Reviews (1): Last reviewed commit: "feat(web): add affiliates landing page" | Re-trigger Greptile}

[greptile-apps]

Hero tagline uses <h2> instead of <p>

The hero description ("Earn up to $70 for every customer…") is tagged as <h2>, giving it the same heading level as the five semantic section headings that follow ("Why promote httpSMS", "How it works", etc.). Screen readers and SEO crawlers build a document outline from <h> tags, so a descriptive paragraph styled as <h2> flattens the hierarchy. A <p> tag with the same Vuetify typography classes would convey the same visual appearance while keeping the heading structure meaningful. The same four classes (text-headline-small font-weight-light text-medium-emphasis mb-8) work on a <p> element.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!