Conversation
- Add InspirationalHero with 4 quote layout variants and per-woman color palettes - Redesign speaker cards with taller portraits and overlaid info - Add 3D flip cards for partner section - Apply glass card treatment site-wide - Add 6-theme color system with light/dark toggle - Add dual-marquee attendee section - Normalize spacing and responsive grids
ShugKnight24
requested review from
compassdetroit,
Copilot,
hodasolati-uxdesign,
shimasolatiuxdesign-lab,
shrinkray and
soham02
There was a problem hiding this comment.
Pull request overview
This PR delivers a comprehensive visual overhaul of the IWD Innovation Summit 2026 site, transitioning from a light-themed design to a dark glassmorphic aesthetic with gold accents. It introduces multi-theme support (6 color themes + light/dark mode toggle), a new cinematic inspirational quotes section, updated speaker data, and modernized UI components throughout.
Changes:
- Dark mode glassmorphic redesign across all sections (Landing, Attendees, Sessions, Speakers, etc.) with animated gradient backgrounds, accent glows, and hover effects
- New theme system with 6 color palettes (blue, purple, coral, emerald, gold, magenta) and light/dark mode toggle moved into the navbar
- New
InspirationalHerocomponent with auto-cycling quotes,AboutSectioncontent overhaul, populated 2026 speaker data (24 speakers), and restructuredPreviousEventspage with event cards
Reviewed changes
Copilot reviewed 39 out of 54 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/index.css | Adds 4 new theme palettes, light/dark mode CSS overrides, animations for landing orbs, paint strokes, word drift, and glow effects |
| src/components/ui/ThemeContext.jsx | Expands from 2-theme toggle to 6-theme selection + light/dark mode state with localStorage persistence |
| src/components/ui/ThemeSwitcher.jsx | Replaces floating toggle button with navbar-embedded color picker dropdown and light/dark mode button |
| src/components/Navbar.jsx | Adds ThemeSwitcher to navbar, adds scroll progress indicator, converts to dark theme styling |
| src/App.jsx | Removes ThemeSwitcher from root (moved to Navbar), cleans up indentation |
| src/pages/Home.jsx | Adds InspirationalHero and AboutSection components, populates track names for sessions |
| src/layouts/LandingSection.jsx | Complete rewrite with animated gradient orbs, mouse-tracking parallax, and modernized hero layout |
| src/layouts/AttendeeSection.jsx | Splits marquee into two counter-scrolling rows, adds company name overlays on hover |
| src/layouts/LocationSection.jsx | Redesigns "When & Where" as two glassmorphic info cards |
| src/layouts/SessionsSection.jsx | Updates to dark theme with eyebrow text, gradient heading, and restyled tab navigation |
| src/layouts/MembersSection.jsx | Converts to dark glassmorphic cards grid layout with gradient headings |
| src/layouts/SponsorsSection.jsx | Replaces hover overlay with accessible <a> tags, updates sponsor email to compassdetroit.org |
| src/layouts/PartnersSection.jsx | Adds 3D card flip animation for partner logos, updates partner email |
| src/layouts/JobBoardSection.jsx | Glassmorphic restyling of job cards with eyebrow pattern |
| src/layouts/TeamSection.jsx | Renames dev.devfest to dev.team, dark theme styling for cards and modal |
| src/layouts/Footer.jsx | Dark theme with gradient borders, logo grid, and refined link styling |
| src/layouts/AboutSection.jsx | Complete rewrite removing old image, adding multi-paragraph about content |
| src/layouts/OrganizersSection.jsx | Dark theme with accent glow and eyebrow pattern |
| src/layouts/FacilitatorsSection.jsx | Dark theme with accent glow and eyebrow pattern |
| src/layouts/DevTeamSection.jsx | Dark theme with card grid and hover slide-up info panel |
| src/pages/PreviousEvents.jsx | Replaces prose text with 6 event cards in a responsive grid |
| src/data/2026/speakers.js | Adds 24 speakers with full session data, bios, and avatar imports |
| src/data/2026/team.js | Renames devfest field to team across all entries |
| src/data/2026/inspirationalQuotes.js | Expands quotes collection with images, rewritten with additional tech/science pioneers |
| src/components/ui/ProfileCard.jsx | Redesigned speaker cards with 3:4 portrait aspect ratio and overlaid info |
| src/components/ui/GenericCard.jsx | Dark glassmorphic styling with gold gradient avatar ring |
| src/components/ui/CTAButton.jsx | Modernized to glassmorphic gold-accent style |
| src/components/ui/LinkedInHandle.jsx | Dark theme icon styling |
| src/components/ui/InstagramHandle.jsx | Dark theme icon styling, fixed aria-label from "Mastodon" to "Instagram" |
| src/components/ui/GithubHandle.jsx | Dark theme icon styling |
| src/components/ui/FlippableChevronIcon.jsx | Smaller, refined chevron sizing |
| src/components/speakers/SpeakersContent.jsx | Dark theme with eyebrow/gradient heading pattern |
| src/components/speakers/SpeakerDetails.jsx | Dark theme modal with dark backgrounds |
| src/components/sessions/SessionCard.jsx | Dark glassmorphic card styling with time/room badges |
| src/components/sessions/ActivityCard.jsx | Dark glassmorphic card with calendar icon |
| src/components/sessions/EventCard.jsx | Updated track color mapping for dark theme |
| src/components/sessions/NoSessionsAvailable.jsx | Dark theme empty state |
| src/components/dev/DevTeamCard.jsx | Rounded cards with slide-up info panel |
| src/components/InspirationalHero.jsx | New 879-line component with cinematic quote cycling, mural backgrounds, and 4 layout variants |
| src/assets/images/quotes/RuthBaderGinsburg_Square.jpg | New portrait image |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Throttle LandingSection mousemove handler with requestAnimationFrame - Conditionally render 'Visit Site' in PartnersSection only when partner.url exists - Add sectionFadeUp animation to PreviousEvents cards (animationDelay had no effect) - Remove dead renderInfo code from ProfileCard (duplicated by image overlay) - Replace defunct Argo AI with May Mobility in speaker data - Add light mode overrides for border-white and bg-white opacity utilities
- Staggered entrance animations with cubic-bezier easing on all content - Floating particles layer - Horizontal light sweep on page load - Countdown timer to event date (March 28, 2026) - don't have actual date - Rotating inspirational taglines - Impact stats row - Shimmer on headline text - Dual CTA buttons (primary + secondary ghost) - Enhanced scroll indicator - Countdown cells - Full prefers-reduced-motion support for accessibility
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
72449f9 to
d4c0b06
Compare
|
Really cool Redesign Shug I really like the partner section for IWD. The Color pallet also looks great. The red quotes section kinda looks out of place but could easily be fixed with a blueish background. I like the countdown for the site/event. The font seems very utilitarian but could be an easy fix. |
|
@soham02 thank you for the feedback sir - agree, if you've got any ideas, go ahead and build upon this I'm open to suggestions, can wait until the meeting on wednesday if you're busy |
…t improvements - Add site-wide font selector with 5 presets (Classic, Editorial, Tech, Script, Modern) - Create FontContext provider and FontSwitcher dropdown component - Wire font switching through CSS custom properties for instant site-wide updates - Add theme-colored backgrounds to inspirational quote carousel - Fix light mode text contrast by remapping accent colors to darker shades - Replace all hardcoded font classes with dynamic font-heading/font-body utilities - Remove mouse-following cursor gradient from landing section - Fix root font-family to respect font selector (was hardcoded to Montserrat) Thanks to @soham02 for the feedback and ideas on font variety and color coordination 🙏
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Updated the landing based on our convo yesterday merged in @soham02's video work Updated Preview
|
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
488fbff to
2f09088
Compare
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
2f09088 to
e42c34a
Compare
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
e42c34a to
1caab5e
Compare
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
1caab5e to
3ff2b8f
Compare
- update themes - improve location - adding scheduling tool for sessions - add break the pattern branding - change quotes into masonry mural wall - update team cards - add `/playground` route - optimize assets
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
3ff2b8f to
5d389e0
Compare
Changes
These were small changes but should help |
refactor: replace map
|
|
@compassdetroit @shrinkray @soham02 @hodasolati-uxdesign @shimasolatiuxdesign-lab Please review and let me know how things are looking Think I got all the speakers and sessions corrected as well as a minor scheduler bug and some UI polish Will wait until after the event to get the assets for the galleries etc, added in the initial scaffolding |
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
ea0693e to
7792262
Compare
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
7792262 to
a00fc84
Compare
- add 5 new curated venue images to carousel - redesign carousel with sleek bottom control strip and animated progress bar - reposition carousel title and adjust vignettes for readability - build reusable EventGallery component with masonry layout and lightbox (commented out pending photos) - fix my-schedule sidebar to show saved conference activities - correct speaker track assignments and session metadata across all tracks - update career signup URLs
ShugKnight24
force-pushed
the
refactor/improve_landing
branch
from
a00fc84 to
9e04d43
Compare
I will review this morning and publish. |
- fix issues - edit schedule - add/remove speakers - evaluate each room - add photos - remove placeholders
- content & formatting
refactor: edit and update speakers
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 84 out of 189 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const currentScrollY = window.scrollY | ||
| const totalHeight = | ||
| document.documentElement.scrollHeight - window.innerHeight | ||
| const progress = (currentScrollY / totalHeight) * 100 | ||
| setScrollProgress(progress) | ||
| } |
There was a problem hiding this comment.
totalHeight can be 0 when the page isn't scrollable, which makes progress become NaN/Infinity and yields an invalid width style. Guard against totalHeight <= 0 and clamp progress to [0, 100] before calling setScrollProgress.
| {onOpen && ( | ||
| <button | ||
| className={`inline-flex items-center rounded-lg bg-gray-50 px-3 py-2 text-xs font-medium text-gray-700 opacity-0 transition-all duration-200 hover:bg-gray-100 group-hover:opacity-100 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 ${ | ||
| onOpen && | ||
| 'cursor-pointer transition-all duration-300 hover:-translate-y-1 hover:scale-[1.025]' | ||
| }`} | ||
| onClick={onOpen} | ||
| onKeyDown={handleKeyDown} | ||
| role={onOpen ? 'button' : undefined} | ||
| tabIndex={onOpen ? 0 : undefined} | ||
| aria-label={onOpen ? `View details for ${name}` : undefined} | ||
| className="inline-flex items-center gap-1 rounded-lg border border-white/[0.08] bg-white/[0.04] px-4 py-2 text-xs font-medium text-gray-300 opacity-0 backdrop-blur-sm transition-all duration-300 hover:-translate-y-0.5 hover:border-iwd-gold-400/30 hover:bg-iwd-gold-400/10 hover:text-iwd-gold-300 group-hover:opacity-100" | ||
| tabIndex={-1} | ||
| > | ||
| View Details | ||
| <IoChevronForward className="ml-1 size-3" /> | ||
| <IoChevronForward className="size-3" /> | ||
| </button> |
There was a problem hiding this comment.
This nested <button> is rendered inside a clickable <div role="button"> and has no type attribute. Defaulting to type="submit" can cause accidental form submissions if the card is ever used within a <form>. Consider either making the outer container a real <button type="button"> (and removing the inner button), or set type="button" here and convert this inner element to a non-interactive element if it’s purely presentational.
- fix contrast for track name in light bg - fix class order for twitter handle
- drop dark:text-gray-900 - inactive links stay text-gray-900 in light mode - dark:text-white/40 in dark mode, - hover:text-white unchanged on hover - totalHeight calc bug - use clamp so the value stays in [0, 100] - even if scrollY overshoots slightly
- spelling - An sr-only primary heading added, aria-labelledby resolves - the page still has a proper document
PR: Improve Site UI
Summary
This PR delivers a visual overhaul of the IWD Innovation Summit 2026 site base so team's graphic designers @hodasolati-uxdesign & @shimasolatiuxdesign-lab have something as the base to compared their improved to their redesign and illustrate "what is possible" from a development perspective
@soham02 this is something of what I was thinking about the quotes - didn't execute as cleanly as I would have liked and the end product shows
I have a few 4 different layouts for the quotes. I wanted to have images as a background, but wasn't able to make it work. I was basically thinking of having a "digital mural", with some sort of "impactful" or "historical" scene and building that out. I got a mix of ladies from different sectors, can narrow the scope or add more
What do others think? Far from perfect, so if you have ideas or want to play around, go ahead. Not married to anything here - more a quick and dirty base to get ideas going
What Changed
light & dark mode as well as theme switcher in nav
Cinematic mural / 4 quote variants that cycle automatically / women are a mix of prominent names and technologists and historical figures
updated attendees to two rows move in opposite directions
played w/ sessions and speakers appearance a little bit to get a fresh take
How to Review
clone repo
cd- change directory into the where you've stored the reponpminstall &&npm run devtest site on port that it's running (should be localhost:5173 by default)
Screenshots
Full site (preview looks bad / view full size and adjust sizing to see details better)
Quote Wall
Attendees