Skip to content

feat: apply transparency layout to /about, /join-us, and /contact#255

Merged
marco-souza merged 9 commits intomainfrom
feat/254-apply-transparency-layout
Apr 26, 2026
Merged

feat: apply transparency layout to /about, /join-us, and /contact#255
marco-souza merged 9 commits intomainfrom
feat/254-apply-transparency-layout

Conversation

@marco-souza
Copy link
Copy Markdown
Contributor

Summary

Apply the transparency page's elegant visual design to the /about, /join-us, and /contact pages, addressing issue #254.

Changes

  • New reusable UI components (src/components/ui/):

    • HeroSection.astro - Gradient hero with blur orbs, badge, and stats
    • SectionHeader.astro - Icon + title + subtitle with gradient icon container
    • StatCard.astro - Icon + value + label for quick stats
    • IconCard.astro - Metric card with rotated decorative background
    • Badge.astro - Pill-shaped badge with icon support
  • Redesigned /about page:

    • New gradient hero section with stats
    • Icon headers for each section
    • Color-coded value cards with hover effects
    • Channel cards with icons
  • Redesigned /join-us page:

    • HeroSection with stats (3 channels, 300+ members, weekly encounters)
    • Channel cards with hover effects
    • 5-step roadmap with numbered icons
    • GitHub section with CTA button
  • Redesigned /contact page:

    • Complete rewrite from stub to full page
    • Hero with response time stats
    • Contact methods, inquiry types, social links sections
    • CTA with mailto link
  • E2E tests: 15 new tests for the redesigned pages (28 total passing)

Checklist

  • Pages are now as gorgeous as /transparency
  • Components created to avoid code duplication
  • E2E tests created for updated pages
  • Quality checks pass (lint, typecheck, build, e2e)

Testing

bun run e2e  # 28 tests passing

- Create reusable UI components (HeroSection, SectionHeader, StatCard, IconCard, Badge)
- Redesign /about page with gradient hero, stats, icon headers, and hover effects
- Redesign /join-us page with stats hero, channel cards, steps section, and contact CTA
- Redesign /contact page from stub to full page with hero, contact methods, inquiries, and social links
- Add comprehensive E2E tests for all three pages
- Add i18n translations for new contact page content

Closes #254
- Use more specific selectors to avoid strict mode violations
- Match actual translation text in contact page tests
- Add .first() where multiple matching elements exist
@marco-souza marco-souza self-assigned this Apr 26, 2026
@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

- Add card container with subtle gradient background
- Add border and rounded corners for visual consistency
- Remove unnecessary pl-2 padding
- Remove rotating bg on channel cards
- Remove rotating bg on project cards
- Remove group-hover transitions that looked weird
@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

Comment thread src/pages/about.astro
- Add ~150 i18n keys to ui.ts (marketing, home, about, joinUs, etc)
- Refactor marketing.ts to export key references instead of text
- Simplify useTranslations() - no params, uses defaultLang internally
- Update pages to call t() directly for all display text
- Update components (TestimonialGrid, HowToHelp, ActivityGrid) to resolve keys
- Remove ta() helper (not needed with flat keys)
- Fix arrays in ui.ts to indexed flat keys (.0, .1, .2)

Quality: lint ✅ typecheck ✅ build ✅ e2e 28/28 ✅
@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

Allows backward compatibility with components that pass lang.
Fixes typecheck failures in Header, Footer, MobileMenu, Layout.
@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

@marco-souza marco-souza merged commit 545bdb1 into main Apr 26, 2026
2 checks passed
@marco-souza marco-souza deleted the feat/254-apply-transparency-layout branch April 26, 2026 16:42
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