Skip to content

Feature/join card#89

Open
becky-n wants to merge 3 commits into
mainfrom
feature/join-card
Open

Feature/join card#89
becky-n wants to merge 3 commits into
mainfrom
feature/join-card

Conversation

@becky-n
Copy link
Copy Markdown
Contributor

@becky-n becky-n commented May 23, 2026

What does this PR do?

Implementation of the sign-up card. Paragraph is from figma, probably should be changed and only using placeholder image for now. Is also responsive.

Type of change

  • Feature

Checklist

  • My branch follows the naming convention (feature/, fix/, chore/, hotfix/)
  • My commit messages follow the conventional commits format
  • CI checks pass

Linked Issues

Closes #73

Copilot AI review requested due to automatic review settings May 23, 2026 12:17
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Implements the “Join SSA” call-to-action banner/card on the homepage (Issue #73), adding a new reusable component and rendering it on the home route.

Changes:

  • Added a new JoinCard component with heading, subtext, CTA, and a (currently placeholder) image area.
  • Rendered the JoinCard on the home page (/) between the highlight section and Instagram feed.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File Description
web/src/components/JoinCard.tsx Adds the new Join SSA CTA card component and its responsive layout/styles.
web/src/app/page.tsx Imports and renders JoinCard on the homepage.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +5 to +6
<div className="px-4 sm:px-6 md:px-8">
<section className="mx-auto w-full max-w-230 overflow-hidden rounded-4xl bg-ssa-card shadow-[0px_3px_4px_1px_#00000040,1px_-5px_4.3px_0px_#D5D5D54D]">
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could u look into these comments asw @becky-n

Comment on lines +27 to +29
<div className="flex flex-1 items-center justify-center bg-ssa-white p-4 sm:p-5 md:p-6 lg:p-7">
<div className="flex aspect-4/3 w-full max-w-70 items-center justify-center rounded-2xl border-2 border-dashed border-ssa-muted-gold/40 bg-white text-center shadow-inner sm:max-w-80 lg:max-w-90">
<span className="px-4 font-averia text-xl font-bold text-ssa-muted-gold sm:text-2xl">
Comment thread web/src/components/JoinCard.tsx
Comment thread web/src/components/JoinCard.tsx
Comment thread web/src/components/JoinCard.tsx
Copy link
Copy Markdown
Collaborator

@joengy joengy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The join widget looks good to me.

Copy link
Copy Markdown
Collaborator

@oorjagandhi oorjagandhi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

Some feedback, could you please...

  • make the component span the same width as the 'upcoming event' card
  • change the colour of the right side to match Figma (it should be a slightly darker yellow)
  • on mobile view the image half should disappear, instead of going under
  • can u add this image in for now (so it looks polished for milestone - we can change it later)
Image

Thank you!

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.

HOME-05 - Join SSA banner

4 participants