Open
Conversation
- initial site redesign to serve as base for future development
ShugKnight24
requested review from
compassdetroit,
Copilot,
hodasolati-uxdesign,
shimasolatiuxdesign-lab,
shrinkray and
soham02
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR implements a full site redesign for the COMPASS Detroit website, replacing the previous single-page conference layout with a multi-page dark-themed design. It introduces 7 new pages (Home, About, Programs, Community, Events, Get Involved, Resources), new shared layout components (SiteNavbar, SiteFooter, SiteLayout), a scroll progress button, data visualizations, and an infinite logo marquee — all built with a cohesive dark surface color palette and gold accent design system via Tailwind CSS.
Changes:
- Added 7 new page components with dark-themed UI, data visualizations (animated stat counters, bar charts, funnel diagrams, radial gauges, donut charts), and a dual-row infinite logo marquee on the homepage
- Created new shared components (SiteNavbar, SiteFooter, SiteLayout, ScrollProgressButton) with a dark surface design system defined in Tailwind config
- Restructured routing in App.jsx to use new redesign pages as primary routes, moving the legacy Home page to
/legacy
Reviewed changes
Copilot reviewed 13 out of 15 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
tailwind.config.js |
Adds Inter font family, dark surface background/border color tokens |
src/index.css |
Adds Google Fonts Inter import, marquee keyframe animations, and logo card hover effects |
src/App.jsx |
Imports new pages, replaces / route with HomePage, moves legacy Home to /legacy |
src/layouts/SiteLayout.jsx |
New layout wrapper with dark bg, SiteNavbar, SiteFooter, and ScrollProgressButton |
src/components/SiteNavbar.jsx |
New sticky dark navbar with desktop/mobile navigation and active state |
src/components/SiteFooter.jsx |
New dark footer with program links, community links, and contact info |
src/components/ui/ScrollProgressButton.jsx |
New scroll-to-top button with circular progress ring and top progress bar |
src/pages/HomePage.jsx |
New homepage with hero, marquee, animated stats, visualizations, events preview, and CTA |
src/pages/AboutPage.jsx |
New about page with animated growth rings, diversity donut, mission section, coalition orgs, and traction data |
src/pages/ProgramsPage.jsx |
New programs page detailing Innovation Summits, Hack Michigan, DevFest, and Career Pathways |
src/pages/CommunityPage.jsx |
New community page showcasing coalition organizations and stats |
src/pages/EventsPage.jsx |
New events page with navigator journey flow, timeline, and program details |
src/pages/GetInvolvedPage.jsx |
New get-involved page with pathways for navigators, employers, partners, and sponsors |
src/pages/ResourcesPage.jsx |
New resources page with community-driven topic proposals and process overview |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- rename MegaphoneIcon to BellIcon (SVG is a bell icon) - remove unused display field from stats array - clarify GrowthRing label: 3-Yr Growth (234%) - add prefers-reduced-motion for marquee (WCAG 2.1 AA) - filter past events from upcoming sections - extract CheckIcon, ArrowRightIcon, MapPinIcon to ui/ - self-host Inter font via local @font-face
- Add ThemeProvider + ThemeSwitcher for light/dark mode - CSS custom properties for theme colors with localStorage - Tailwind darkMode: 'class' with surface/border/text vars - PlaceholderImage component with gradient presets - Hero redesigns: animated orbs, gradient text, pill badges - Enhanced CTA sections with shine effects and gradients - hero-grid-pattern CSS class for dotted grid overlays - AboutPage: use shared CheckIcon, add placeholder image - CommunityPage/ProgramsPage/GetInvolvedPage hero upgrades - HomePage: placeholder images in mission + traction - All pages: consistent gradient CTAs with hover effects - prefers-reduced-motion respected across all animations
Author
|
Updated UI 
|
- Add site-wide font selector with 5 options (Montserrat, Inter, BioRhyme, Orbitron, Asimovian) - Create FontSwitcher dropdown component alongside existing ThemeSwitcher - Wire font switching through CSS custom properties (--site-font, --heading-font) - Add dynamic font-heading utility class for section headings - Replace all hardcoded font-biorhyme classes with dynamic font-heading - Fix root font-family to respect font selector (was hardcoded to font-inter) - Fix light mode text contrast: darken gold/primary text to pass WCAG AA - Add light mode overrides for primary borders and hover states - Self-host all @font-face declarations, remove duplicates - Expand PlaceholderImage with 4 new presets (mentorship, workshop, hackathon, impact) - Add placeholder art across HomePage, EventsPage, ProgramsPage, GetInvolvedPage, ResourcesPage Thanks to @soham02 for the feedba - and ideas on font variety and aesthetics 🙏
ShugKnight24
force-pushed
the
refactor/redesign
branch
from
508b32d to
33640cf
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR: Site Redesign
Description:
Summary
site redesign with a dark aesthetic, new pages, and data visualizations to serve as a base for future COMPASS Detroit website development. Resolves #11. I know IWD is the current thing in the pipeline, wanted to take care of this
Similar to my work for IWD site, not married to anything here - mostly a scaffold that will serve as a base. Open to feedback
What Changed
New Pages: HomePage, AboutPage, EventsPage, CommunityPage, ProgramsPage, GetInvolvedPage, ResourcesPage
New Components: SiteNavbar, SiteFooter, SiteLayout, ScrollProgressButton
Design System: Dark background, gold primary, Inter font, surface card tokens
Data Visualizations (temp placeholders until we decide what to show):
Animated stat counters (intersection observer)
TalentGapViz bar chart (Michigan talent pipeline)
PipelineViz funnel (COMPASS model)
RetentionGauge radial gauge (navigator return rate)
GrowthRing animated SVG circles (community demographics)
DiversityDonut segmented chart (racial/ethnic breakdown)
Marquee: Dual-row infinite logo marquee with GPU-composited animation, rounded logo cards for dark bg visibility, hover glow effect
Events: Navigator Journey flow diagram showing how Engage → Build → Connect → Hire stages map to each event
Resources: Community-driven placeholder messaging — content shaped by membership input
Screenshots