Homepage visual redesign

[aarondr77]

Description

This PR implements a comprehensive visual redesign of the trymito.io homepage, focusing on a modern, app-inspired aesthetic and improved user experience.

Key changes include:

• Full Light/Dark Theme System: Introduced a robust theme architecture (ThemeContext.tsx, FOUC prevention in _document.js, ThemeToggle.tsx in the header) and migrated all existing color variables to a new, consistent palette defined in styles/globals.css.
• Enhanced Homepage Layout: Implemented mobile-first CSS for all new and modified components. Sections now alternate between --color-background and --color-surface for visual rhythm, feature radial glow accents, and a subtle SVG dot-grid texture overlay.
• Scroll-Triggered Animations: Added a useInView hook and CSS classes to enable fade-in-up animations for homepage sections, with support for prefers-reduced-motion.
• Bento-Box Feature Grid: The FeatureSquares component has been redesigned into a 6-feature bento grid. The "AI Chat" card is prominently displayed as a 2x2 hero card on desktop. Each feature card now supports hover-to-play video behavior and unique accent color styling.
• New Content Sections:
  • "Connect to Your Data Sources" (DataSources.tsx): Showcases compatibility with major databases via a grid of logos.
  • "Enterprise LLM Providers" (EnterpriseLLM.tsx): Highlights enterprise-grade LLM integration capabilities with key points and provider logos.
• Component Visual Upgrades: Existing components like DownloadCTACard, FAQCard, CaseStudies, and MadeWithMito have received visual enhancements, including gradient backgrounds, smooth accordion animations, and improved hover effects.
• Polish: Section headings now feature gradient text, and subtle animated gradient lines act as section dividers.

The motivation behind these changes is to modernize the website's visual appeal, align it more closely with the Mito application's brand, improve user engagement through interactive elements and a consistent theme, and clearly communicate key product features and enterprise value propositions.

Testing

• Theme Functionality:

  • Verify the light/dark theme toggle button in the header correctly switches the site's theme.
  • Confirm all sections and components adapt visually to both dark and light themes.

• Mobile Responsiveness:

  • Test the site at various viewport widths (especially < 800px) to ensure the bento grid collapses to a single column, new sections stack properly, and all elements are accessible and well-formatted.

• FeatureSquares Interaction:

  • Hover over each bento card to confirm videos play on mouseenter and pause/reset on mouseleave.
  • On touch devices, tap cards to play/pause videos.

• New Sections:

  • Verify the "Connect to Your Data Sources" section displays all database logos correctly.
  • Confirm the "Enterprise LLM Providers" section presents its content and logos as expected.

• Scroll Animations:

  • Scroll through the homepage to observe sections animating into view.
  • Test with prefers-reduced-motion enabled (if possible in your browser/OS settings) to ensure animations are disabled.

• General Visual QA:

  • Check for any layout shifts (CLS) or scroll jank.
  • Ensure all component visual upgrades (CTA, FAQ, Case Studies, MadeWithMito) are correctly applied.

• I have tested this on real data that is reasonable and large (N/A for marketing site UI)

• If I changed the interaction with JupyterLab, I tested that it does not break other programs (like VS Code), and tested that it works "multiple times" in the same notebook. (N/A for marketing site UI)

Documentation

No new documentation is required for this visual redesign of the marketing site.

---

 

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
monorepo	Ready	Preview, Comment	Jan 27, 2026 9:08pm