feat: improve light theme contrast and visual fidelity

[vmorps]

Summary

• Improves visual contrast for the light theme on the marketing homepage to match the approved light-theme mock (design/light-theme-mock.html)
• Updates primary accent from bright cyan (#22D3EE) to darker teal (#0891B2) across all landing page buttons, badges, icons, and hover states for better contrast on white surfaces
• Changes install command fields from black (#0A0C10) to light gray (#F1F5F9) with subtle borders and dark text
• Replaces heading gradient (cyan→purple) with solid #0891B2 in light mode
• Converts code window glow from cyan to a subtle dark shadow
• Fixes "JS Quickstart" button label to "Quickstart" (links to general quickstart, not JS-specific)

All 6 landing page sections affected: Hero, ProblemSolution, DeveloperFirst, Standards, Community, FinalCTA — plus shared landing.css utilities. Dark mode is unchanged.

Refs #199

Test plan

• Toggle to light mode on the homepage and compare against design/light-theme-mock.html
• Verify primary buttons use darker teal (#0891B2) with white text
• Verify install command fields in SDK section are light gray, not black
• Verify heading "Protect the Data," is solid teal, not a gradient
• Verify code window and TDF diagram stay dark in both modes
• Toggle back to dark mode and confirm no regressions
• Check docs pages (e.g. /introduction) render correctly in both modes

🤖 Generated with Claude Code

[gemini-code-assist]

Summary of Changes

Hello @vmorps, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a comprehensive visual refresh for the light theme across the marketing homepage. The primary goal is to improve contrast and visual fidelity by updating the accent color to a darker teal, refining the appearance of interactive components like buttons and badges, and adjusting background patterns and text styles. These changes ensure the light theme adheres to the latest design specifications, providing a cleaner and more accessible user experience. Additionally, a minor text correction was made to a quickstart button label.

Highlights

• Improved Light Theme Contrast: Enhanced visual contrast for the light theme on the marketing homepage to align with approved design mocks.
• Color Palette Update: Changed the primary accent color from bright cyan (#22D3EE) to a darker teal (#0891B2) across various UI elements for better contrast on white surfaces.
• Install Command Field Redesign: Updated install command fields from a dark background to a light gray (#F1F5F9) with subtle borders and dark text.
• Heading Style Adjustment: Replaced the heading gradient (cyan→purple) with a solid darker teal (#0891B2) in light mode.
• Code Window Glow Refinement: Converted the code window glow from cyan to a more subtle dark shadow.
• Button Label Correction: Fixed the 'JS Quickstart' button label to simply 'Quickstart' as it links to a general quickstart guide.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• src/components/landing/Community.module.css
  • Added light mode hover styles for cards, card icons, and card titles to incorporate the new darker teal accent.
• src/components/landing/DeveloperFirst.module.css
  • Introduced new light mode styles for badges, SDK name hover states, install command fields, and copy buttons to enhance contrast and visual consistency.
  • Updated primary and secondary button styles for light mode, including hover effects.
  • Removed a comment indicating that install command and copy buttons should intentionally stay dark.
• src/components/landing/DeveloperFirst.tsx
  • Updated the text label for the quickstart button from 'JS Quickstart' to 'Quickstart'.
• src/components/landing/FinalCTA.module.css
  • Applied new light mode styling for primary and secondary buttons, including hover states, to match the updated color scheme.
• src/components/landing/Hero.module.css
  • Added light mode styles for badges, badge dots, and primary buttons.
  • Updated the hover color for secondary buttons in light mode to the new darker teal.
• src/components/landing/ProblemSolution.module.css
  • Implemented light mode hover effects for cards and general buttons.
  • Styled icon wrappers and card icons with the new darker teal accent.
• src/components/landing/Standards.module.css
  • Added light mode styling for check icons and hover effects for secondary buttons.
• src/css/landing.css
  • Modified the bg-grid background image colors to use the darker teal.
  • Introduced new bg-mesh and bg-mesh-reverse background styles.
  • Removed gradient styling from text-gradient and applied a solid darker teal color.
  • Updated the glow-cyan box-shadow to a subtle dark shadow.
  • Added hover effects for sdk-card elements.
• static/img/filecontents.svg
  • Added a new SVG image representing file contents.

Activity

• No specific activity (comments, reviews, etc.) was found in the provided context.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request effectively improves the light theme contrast and visual fidelity across various landing page components, aligning with the approved mock-up. The changes to colors and hover states enhance readability and user experience. The fix for the 'JS Quickstart' button label is also a good improvement for clarity.

[gemini-code-assist]

The comment /* Light mode overrides */ is less descriptive than the previous one. Consider restoring some of the original context about the install command and copy button intentionally staying dark if that is still the case, or update it to reflect the new changes accurately.

Suggested change

	/* Light mode overrides */
	/* Light mode overrides — install cmd and copy button are now light */

[gemini-code-assist]

This new SVG file seems to be a diagram illustrating file contents. Ensure that this SVG is optimized for web use to minimize file size and improve loading performance. Consider using tools to minify the SVG and remove unnecessary metadata.