Repository navigation
feat: updated landing page - #251
Alessandro100 wants to merge 19 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟡 Changes recommended
Accessibility, French localization, and globe geometry issues remain unresolved.
6 open findings
What changed in this PR
Introduces a redesigned, SEO-friendly landing page with animated transit visuals, global coverage maps, refreshed branding, and updated header/footer styling. Vercel React performance guidance was applied.
Changes:
- Adds the animated journey hero, feature gallery, and interactive coverage globe/map.
- Expands metadata, structured data, crawler documentation, and social previews.
- Renames user-facing “MobilityDatabase” references to “Mobility Database.”
| File | Description |
|---|---|
package.json |
Adds 3D geometry dependencies. |
yarn.lock |
Locks new dependencies. |
eslint.config.mjs |
Excludes preprocessing scripts. |
public/llms.txt |
Documents catalog for automated readers. |
messages/en.json |
Adds English landing-page copy. |
messages/fr.json |
Adds French landing-page copy. |
src/app/Theme.ts |
Exports raw theme palettes. |
src/app/styles/TextShimmer.css |
Removes obsolete shimmer styling. |
src/app/utils/frame-cap.ts |
Caps decorative scene rendering. |
src/app/utils/frame-cap.spec.ts |
Tests frame-rate limiting. |
src/app/components/Header.tsx |
Refreshes branding and scroll border. |
src/app/components/HeaderMobileDrawer.tsx |
Updates mobile branding. |
src/app/components/Footer.tsx |
Reorganizes footer layout and socials. |
src/app/components/FooterElements.tsx |
Adjusts footer link typography. |
src/app/screens/Feed/FeedView.tsx |
Updates admin heading branding. |
src/app/components/WorldGlobe/CountryStatsPopup.tsx |
Adds country statistics popup. |
src/app/components/WorldGlobe/MapToolbar.tsx |
Adds map presentation controls. |
src/app/components/WorldGlobe/feed-stats.ts |
Provides feed statistics helpers. |
src/app/components/WorldGlobe/flat-map-geometry.ts |
Implements map projection and zoom. |
src/app/components/WorldGlobe/flat-map-geometry.spec.ts |
Tests flat-map geometry. |
src/app/components/WorldGlobe/fullscreen.ts |
Adds fullscreen compatibility helpers. |
src/app/components/WorldGlobe/geo-shapes.ts |
Decodes and processes geography. |
src/app/components/WorldGlobe/globe-colors.ts |
Resolves theme-aware globe colors. |
src/app/components/WorldGlobe/globe-countries.ts |
Builds globe country data. |
src/app/components/WorldGlobe/globe-geometry.ts |
Generates 3D globe geometry. |
src/app/components/WorldGlobe/iso-numeric.ts |
Maps numeric country codes. |
src/app/components/WorldGlobe/popup-placement.ts |
Fits popups within map bounds. |
src/app/components/WorldGlobe/popup-placement.spec.ts |
Tests popup placement. |
src/app/components/WorldGlobe/tour.ts |
Implements weighted country tours. |
src/app/components/WorldGlobe/useGlobeColors.ts |
Tracks globe color scheme. |
src/app/components/WorldGlobe/useTourMode.ts |
Manages automatic tour state. |
src/app/[locale]/page.tsx |
Expands home metadata and JSON-LD. |
src/app/[locale]/layout.tsx |
Updates metadata and Firebase hints. |
src/app/[locale]/components/HomePage.tsx |
Rebuilds the landing page. |
src/app/[locale]/components/HomeStructuredData.tsx |
Adds schema.org entities. |
src/app/[locale]/components/SearchBox.tsx |
Redesigns the hero search field. |
src/app/[locale]/components/SearchBorderShine.css |
Adds search-border animation. |
src/app/[locale]/components/SectionHeading.tsx |
Adds reusable section headings. |
src/app/[locale]/components/FeaturePromo.tsx |
Adds feature gallery cards. |
src/app/[locale]/components/FeaturePreviewsLazy.tsx |
Defers decorative previews. |
src/app/[locale]/components/CoverageMap.tsx |
Adds globe/map coverage switcher. |
src/app/[locale]/components/GlobePlaceholder.tsx |
Adds server-rendered globe placeholder. |
src/app/[locale]/components/hero-animation/HeroBackground.tsx |
Lazily loads the WebGL hero. |
src/app/[locale]/components/hero-animation/HeroGridPlaceholder.tsx |
Adds initial hero placeholder. |
src/app/[locale]/components/hero-animation/JourneyStandardChips.tsx |
Adds feed-standard links. |
src/app/[locale]/components/hero-animation/journey-basemap.ts |
Builds the tiled hero basemap. |
src/app/[locale]/components/hero-animation/journey-palette.ts |
Defines journey theme colors. |
src/app/[locale]/components/hero-animation/journey-pins.ts |
Draws journey markers. |
src/app/[locale]/components/hero-animation/journey-style.ts |
Centralizes journey styling. |
src/app/[locale]/components/hero-animation/journey-tiles.ts |
Resolves and preloads tiles. |
src/app/[locale]/components/hero-animation/montreal-journey.spec.ts |
Tests journey projection and timing. |
src/app/[locale]/components/hero-animation/journey-network.spec.ts |
Tests network simplification. |
src/app/[locale]/components/hero-animation/stop-pins.ts |
Implements animated stop pins. |
src/app/[locale]/components/hero-animation/surface-palette.ts |
Defines surface color ramps. |
src/app/[locale]/components/hero-animation/surface-shading.ts |
Implements surface shaders. |
src/app/[locale]/about/page.tsx |
Updates brand metadata. |
src/app/[locale]/contact-us/page.tsx |
Updates brand metadata. |
src/app/[locale]/contribute-faq/page.tsx |
Updates brand metadata. |
src/app/[locale]/email-verification/page.tsx |
Updates brand metadata. |
src/app/[locale]/faq/page.tsx |
Updates brand metadata. |
src/app/[locale]/feeds/page.tsx |
Updates brand metadata. |
src/app/[locale]/gbfs-validator/page.tsx |
Updates brand metadata. |
src/app/[locale]/gtfs-feature-tracker/page.tsx |
Updates brand metadata. |
src/app/[locale]/privacy-policy/page.tsx |
Updates brand metadata. |
src/app/[locale]/seal-of-reliability/page.tsx |
Updates brand metadata. |
src/app/[locale]/seal-of-reliability/how-it-is-calculated/page.tsx |
Updates brand metadata. |
src/app/[locale]/terms-and-conditions/page.tsx |
Updates brand metadata. |
cypress/e2e/home.cy.ts |
Updates branding assertion. |
cypress/e2e/signin.cy.ts |
Updates branding assertion. |
🧠 Review effort: Balanced
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const outer = rings[0] ? unwrapRingLongitudes(rings[0]) : null; | ||
| if (!outer || outer.length < 4) return []; |
|
*Lighthouse ran on https://mobilitydatabase-fernbajms-mobility-data.vercel.app/ * (Desktop)
*Lighthouse ran on https://mobilitydatabase-fernbajms-mobility-data.vercel.app/feeds * (Desktop)
*Lighthouse ran on https://mobilitydatabase-fernbajms-mobility-data.vercel.app/feeds/gtfs/mdb-2126 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-fernbajms-mobility-data.vercel.app/feeds/gtfs_rt/mdb-2585 * (Desktop)
*Lighthouse ran on https://mobilitydatabase-fernbajms-mobility-data.vercel.app/feeds/gbfs/gbfs-flamingo_porirua * (Desktop)
|
|
Looks great to me! The animation is so fun. Noticing on 1470 x 740 display that the display file names and formats overlap with the CTA buttons: 
|
abigailmbd
left a comment
abigailmbd
left a comment
There was a problem hiding this comment.
This looks really cool!! A couple notes:
Crowded Buttons/Search Bar
The file names are interfering with the usability of the buttons, so I'm not too sure we need them, especially since the little wayfinding points are already links. Cutting them out, and potentially moving the animated background image down a scooch (if possible?) so that the Realtime waypoint doesn't cover the browse feeds button would streamline it a bit.
Super minor, and I couldn't find in the code where to put it, but we'll need a comma after "explore."
Finally, in dark mode, the globe inverts colours, which looks cool, but it also messes with convention a bit because then light = high density, and dark = low density. For the countries that have 0 feeds, it isn't that confusing, but for that North America spread, where there's a marked difference between Canada, US, and Mexico, it reads a bit counter intuitive. It looks like Mexico has a lot of feeds, even more than Canada, when that isn't the case.
|
|
||
| > The Mobility Database is an open catalog of over 6000 public transit feeds | ||
| > from more than 100 countries, maintained by MobilityData, a non-profit that | ||
| > stewards the GTFS, GTFS-Realtime and GBFS data formats. Every feed entry |
There was a problem hiding this comment.
Instead of stewards we're moving to saying "maintains and develops"
|
LGTM! |
Summary:
Brand new landing page + header and footer styling updates
Expected behavior:
Testing tips:
Go on the landing page and play around with screen sizes, light mode , dark mode, functionality, browsers, etc
(Go on other pages to assure the new header and footer are good)
Follow up tickets
Please make sure these boxes are checked before submitting your pull request - thanks!
yarn testto make sure you didn't break anything