Skip to content

Add "Get Thunderbird" CTAs in footer + home hero - #95

Merged
ronaldtse merged 1 commit into
mainfrom
feat/thunderbird-cta
Jul 22, 2026
Merged

ronaldtse merged 1 commit into
mainfrom
feat/thunderbird-cta

Conversation

@ronaldtse

Copy link
Copy Markdown
Contributor

Summary

  • Footer: pill CTA next to the existing "Powering e2e email encryption in Mozilla Thunderbird" blurb, with full-color bird icon and animated arrow. The inline link in the blurb is replaced with <strong> emphasis — the button below is the single obvious action (no two links to the same URL 30px apart).
  • Home hero: third CTA between "Get started" and "Contribute" — white button with full-color bird, blue-tinted shadow, drop-shadow on the bird itself for depth. Groups the two "Get…" actions (dev path + user path).
  • ThunderbirdBird component: extracted the bird SVG into src/components/brand/ThunderbirdBird.astro with an idPrefix prop so footer + hero can coexist without SVG mask/filter/gradient ID collisions, plus a silhouette prop for single-color rendering via fill="currentColor".

Header was considered and intentionally skipped — full reasoning in the conversation: header is already dense (logo + 5 nav + search + GitHub + theme + mobile menu), and the Thunderbird logo's multi-hue gradients would read as a banner ad in the nav.

Test plan

  • curl http://localhost:4322/ — both CTAs render, no SSR errors, all 9 footer bird paint-server refs properly closed
  • No bird ID collisions (footer uses tb-* prefix, hero uses tbh-*)
  • Visual review on a real screen

Footer:
- Pill CTA next to the existing "Powering end-to-end email encryption
  in Mozilla Thunderbird" blurb, with full-color bird icon and an
  animated arrow; chrome stays muted to match the footer's register.
- Inline link in the blurb replaced with <strong> emphasis (button
  below is the single obvious action — no two links to the same URL).

Home hero:
- Third CTA between "Get started" and "Contribute" — white button with
  full-color Thunderbird bird, blue-tinted shadow, drop-shadow on the
  bird for depth. Groups the two "Get..." actions (dev path + user
  path).

ThunderbirdBird component:
- Extracted the bird SVG into src/components/brand/ThunderbirdBird.astro
  with an idPrefix prop so multiple instances on a page don't collide
  on SVG mask/filter/gradient IDs.
- silhouette prop for single-color rendering via fill=currentColor.
@ronaldtse
ronaldtse merged commit 8a5395b into main Jul 22, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant