feat(web): add affiliates landing page by AchoArnold · Pull Request #942 · NdoleStudio/httpsms

AchoArnold · 2026-07-05T09:24:48Z

Summary

Adds a dedicated /affiliates landing page and replaces the external Affiliates footer link with an internal link to it. Also adds a beginner-friendly /getting-started onboarding page that walks new users through sending their first SMS.

Changes

Affiliates page

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.

Getting started page

New page web/app/pages/getting-started.vue (route /getting-started), using the website layout. A short, dummy-proof onboarding flow aimed at non-technical users:
- Hero — "Send your first SMS in 5 minutes" with two CTAs: download the Android APK and create a free account
- Four numbered steps: create account & copy API key → download & install the app → sign in on the phone → send your first SMS
- Reuses existing blog images (settings.png, android-app.png) and adds three dashed-border GIF placeholders under /img/getting-started/ (install-app.gif, sign-in.gif, send-sms.gif) for screen recordings to be added later
- Info alert linking to the Android 15+ SMS permissions guide
- "Ready to automate?" grid linking to the existing how-to blog posts (Python, Excel, CSV, Zapier, Webhook, Encryption)
Discoverability:
- web/app/layouts/website.vue — added a Getting Started link to the footer Resources section
- web/app/pages/threads/index.vue — added a "New here? Get started" CTA below the Discord message in the desktop empty state
Added web/public/img/getting-started/README.md documenting the expected GIF assets.

Verification

pnpm eslint, pnpm stylelint, and pnpm prettier --check pass on changed files
/affiliates and /getting-started render on the dev server (200, no compile/runtime errors)

codacy-production · 2026-07-05T09:25:48Z

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 · 2026-07-05T09:28:21Z

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

%%{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

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

greptile-apps · 2026-07-05T09:28:24Z

+              variant="tonal"
+              class="ma-2"
+              @click="scrollToHowItWorks"
+            >
+              See how it works
+              <VIcon end :icon="mdiChevronDown" />
+            </VBtn>
+          </div>
+        </VCol>


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!

Add a /affiliates marketing page with hero, benefit cards, how-it-works steps, a two-column FAQ, and a closing CTA. All CTAs point to the LemonSqueezy signup, and the external Affiliates footer link now uses an internal NuxtLink. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Rewrite the /affiliates page to match the site's visual language (gradient headings, highlights strip, VSheet sections). Use the real Lemon Squeezy affiliate FAQ copy in a two-column grid and surface the 20% commission alongside the up-to-\ payout. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Drop the gradient-header and gradient-underline treatments (reserved for the homepage hero). Keep the title at text-display-large and use the theme primary color for emphasis instead. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Add /getting-started page walking new users through downloading, installing, signing in and sending their first SMS. Reuses blog images, adds GIF placeholders, links to how-to posts, and adds discoverability via a footer link and a CTA on the threads empty state. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 236dddd8-bdf2-4e0a-ac56-0ce8ab98d88e

The floating "version: 11" in pnpm/action-setup resolved to 11.12.0, whose self-installer crashes with "Cannot use 'in' operator to search for 'integrity' in undefined" and fails the Validate job. Pin to 11.3.0 to match the local dev version that generated the lockfile. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Copilot-Session: 236dddd8-bdf2-4e0a-ac56-0ce8ab98d88e

greptile-apps Bot reviewed Jul 5, 2026

View reviewed changes

AchoArnold and others added 4 commits July 13, 2026 22:29

AchoArnold force-pushed the AchoArnold/affiliates-page branch from 8511345 to 31d1c72 Compare July 13, 2026 19:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(web): add affiliates landing page#942

feat(web): add affiliates landing page#942
AchoArnold wants to merge 5 commits into
mainfrom
AchoArnold/affiliates-page

AchoArnold commented Jul 5, 2026 •

edited

Loading

Uh oh!

codacy-production Bot commented Jul 5, 2026

Uh oh!

greptile-apps Bot commented Jul 5, 2026

Uh oh!

greptile-apps Bot Jul 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

AchoArnold commented Jul 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Affiliates page

Getting started page

Verification

Uh oh!

codacy-production Bot commented Jul 5, 2026

Up to standards ✅

Uh oh!

greptile-apps Bot commented Jul 5, 2026

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps Bot Jul 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

AchoArnold commented Jul 5, 2026 •

edited

Loading