Refresh hero visuals and brand colors#8
Conversation
- Remove ABHA references from hero subtitle and link - Change background from blue-gray gradient to clean white - Deepen primary brand color from sky blue to teal (#0891b2) - Increase hero heading weight from bold (700) to black (900) - Add smooth gradient transition from hero into FeatureShowcase - Update navbar background to match new base color Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! 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 implements a significant visual refresh across key sections of the application, focusing on creating a more impactful and modern aesthetic. The changes involve updating the global brand colors to a cleaner white background and a deeper teal primary color, alongside specific adjustments to the hero and feature showcase sections to enhance visual hierarchy and user experience. The goal is to present a bolder and more commanding first impression, inspired by contemporary design trends. Highlights
Changelog
Activity
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully implements a visual refresh for the hero section and brand colors, creating a cleaner and more modern look. The changes align well with the stated goals. I've identified a few minor opportunities to improve maintainability and code consistency by replacing hardcoded values with established design tokens and fixing a small indentation issue. Overall, great work on the refresh!
|
|
||
| return ( | ||
| <section className="w-full bg-muted border-y border-border/60"> | ||
| <section className="w-full bg-gradient-to-b from-background to-[#F7F9FC] border-b border-border/60"> |
There was a problem hiding this comment.
The gradient uses a hardcoded hex color #F7F9FC. To maintain consistency with the existing design system and improve maintainability (e.g., for dark mode theming), it's better to define this color as a CSS variable in src/index.css and reference it here through the Tailwind config. For example, you could add a new variable for it in index.css and then extend the theme in tailwind.config.ts.
| className="space-y-8" | ||
| > | ||
| <h1 className="text-4xl sm:text-5xl lg:text-7xl font-bold leading-tight tracking-tight"> | ||
| <h1 className="text-4xl sm:text-5xl lg:text-7xl font-black leading-tight tracking-tight text-[#0f172a]"> |
There was a problem hiding this comment.
The hardcoded color text-[#0f172a] is equivalent to the foreground color in your design system. To ensure consistency and maintainability, please use the theme-aware utility text-foreground instead.
| <h1 className="text-4xl sm:text-5xl lg:text-7xl font-black leading-tight tracking-tight text-[#0f172a]"> | |
| <h1 className="text-4xl sm:text-5xl lg:text-7xl font-black leading-tight tracking-tight text-foreground"> |
| </a> | ||
|
|
||
| <div className="flex items-center justify-center gap-8 pt-8 border-t border-border/50 max-w-2xl mx-auto"> | ||
| <div className="flex items-center justify-center gap-8 pt-8 border-t border-border/50 max-w-2xl mx-auto"> |
There was a problem hiding this comment.
This div element appears to be missing indentation. For better code readability and to maintain a consistent JSX structure, it should be indented to align with the other child elements of the motion.div.
| <div className="flex items-center justify-center gap-8 pt-8 border-t border-border/50 max-w-2xl mx-auto"> | |
| <div className="flex items-center justify-center gap-8 pt-8 border-t border-border/50 max-w-2xl mx-auto"> |
1 participant
Overview
Visual refresh of the hero section and global brand colors to create a bolder, more commanding first impression.
Why is this change needed?
The previous design used a washed-out blue-gray background with a lighter sky-blue primary color that lacked visual impact. The hero section needed stronger typography, a cleaner background, and a deeper brand color to command attention -- inspired by reference sites like easehealth.com and mailwand.app.
What changes were made?
Summary: Shifted the site to a clean white background with deeper teal primary and bolder hero typography, plus a smooth gradient transition into the FeatureShowcase section.
src/index.css: Changed--backgroundfrom blue-grayhsl(210 40% 98%)to pure whitehsl(0 0% 100%). Deepened--primaryfromhsl(199 89% 48%)(sky blue) tohsl(191 91% 37%)(deeper teal, #0891b2).src/components/Hero-nextjs.tsx: Removed ABHA subtitle text and "Learn more about ABHA" link. Replaced gradient background with solidbg-background. Increased h1 fromfont-boldtofont-blackwith explicit dark colortext-[#0f172a].src/components/Navbar-nextjs.tsx: Changed from hardcodedbg-white/95tobg-background/95so it stays in sync with the design token.src/components/FeatureShowcase.tsx: Changed frombg-mutedto a gradientfrom-background to-[#F7F9FC]for a smooth cream-to-cool transition between sections.Tests
Success criteria:
text-primaryelements (logo, buttons, stats) use the new deeper tealTest coverage: