Story 2129: Community Page V3

[julhoang]

Issue: #2129 , #2286

Summary & Context

Builds out the V3 community page with a responsive masonry layout that pulls together help, install, slack, contribute, library discovery, posts, mailing list, and thread archive cards. Introduces a CommunityView to supply demo data and refactors a few shared card components along the way.

• Figma link: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=3071-11044&m=dev
• Link to page: http://localhost:8000/community/

Changes

• Add templates/v3/community.html page with a 3-column masonry that collapses to 2-col (tablet) and 1-col (mobile)
• Add CommunityView in core/views.py with demo content; wire it up in config/urls.py (replaces the temporary TemplateView)
• Add new components and styles:
  • _help_card.html + help-card.css – speech-bubble grid of user quotes with author, description, and CTA
  • _library_discovery_card.html + library-discovery-card.css – extends _card_group.html to render compact library entries with categories and C++ version tag
  • _join_slack_card.html – thin wrapper around _vertical_card.html for the slack invite
• Refactor existing components:
  • _thread_archive_card.html – now delegates to _vertical_card.html; standalone CSS file removed
  • _basic_card.html – tighten variable docs; hide the CTA divider/section when no buttons are passed; mark dividers aria-hidden
  • _vertical_card.html – add image_alt variable (defaults to empty/decorative)
  • _hero_library.html – tags row and links row now collapse when no relevant data is passed; drop placeholder fallback tags
  • _field_text.html – add optional decorative icon_right slot (mutually exclusive with submit_icon)
• Update community page assets: remove community-placeholder.png; add avatar characters, slack/mailing-list/create-account preview images

Risks & Considerations

• The /community/ URL was previously a bare TemplateView rendering community.html; it now goes through CommunityView (V3 mixin).

Screenshots

Desktop	Tablet	Mobile

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

[herzog0]

Great work!
I'm just testing if the image path resolution will work fine in the server, as the URLs point to /community-page/... and the directory has a capital C /Community-page. Is MacOS I know this works fine, but I've deployed it to QA to test as well, just waiting to get a user with v3 access there.
Renaming the folder might be a good call too! But I wanna test as well just for the sake of knowledge.

Pre-approving!!

[herzog0]

Ooh indeed, some images are broken on QA 😭

Hero and achievements are good though

[julhoang]

Thanks a ton for catching it @herzog0 !! I was renaming the folder locally and didn't know git doesn't track capitalization changes. I've just pushed a commit to use git mv command to rename the folder so hopefully we're good now!

[herzog0]

Yeah git can be super weird sometimes. I think that in this case it's due to the OS though, as MacOS is case-insensitive for folders (if you create some-folder and Some-Folder for example it'll give you an error for the last one, I hate that lol).
Then the OS doesn't report any changes to git because of that, so git is essentially blind.

Also using git config core.ignorecase <true|false> can lead to so many bugs.. better to stick with git mv like you did.

Thanks for the fix!

[kattyode]

QA Approved