Conversation
…ction buttons, and a trusted companies section.
…ges, update button text, and disable the analytics section.
… section using the Counter component in AnimatedHeroClient.
…associated images.
|
@maheswar-dileep is attempting to deploy a commit to the lamsta Team on Vercel. A member of the Team first needs to authorize it. |
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 significantly upgrades the landing page's visual design and interactivity. The primary goal was to transform the main hero section into a more engaging and premium experience, incorporating dynamic elements and social proof. Concurrently, the "Compare" component received a styling overhaul to ensure responsiveness and a polished appearance, contributing to a more modern and confident aesthetic for the platform. Highlights
🧠 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
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 significantly revamps the landing page's hero section and improves the 'Compare' slider, resulting in a more modern and interactive user experience. A security audit found no significant vulnerabilities, with only minor, low-risk issues like potential client-side request manipulation noted. However, there are opportunities to improve maintainability, accessibility, and functionality, including suggestions to remove dead code, refactor hardcoded values, fix a non-functional button, and enhance accessibility.
| <button className="bg-white border text-gray-700 border-gray-200 px-8 py-3.5 rounded-full text-base font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 shadow-sm"> | ||
| <GitFork className="w-4 h-4 text-black" /> Contribute | ||
| </button> |
There was a problem hiding this comment.
The 'Contribute' button is currently a non-interactive <button> element. To make it functional, it should be an anchor (<a>) tag that links to the project's GitHub repository. This is important for encouraging community contributions.
<a href="https://github.com/sunithvs/devb.io" target="_blank" rel="noopener noreferrer" className="bg-white border text-gray-700 border-gray-200 px-8 py-3.5 rounded-full text-base font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 shadow-sm">
<GitFork className="w-4 h-4 text-black" /> Contribute
</a>
| import Image from 'next/image'; | ||
| import { useEffect, useState } from 'react'; | ||
| import GitHubModal from '../github-modal/client'; | ||
| import { Info, Github, GitFork } from 'lucide-react'; |
There was a problem hiding this comment.
The Info icon is imported from lucide-react but is not used within the component. To maintain a clean codebase, it's best to remove unused imports.
| import { Info, Github, GitFork } from 'lucide-react'; | |
| import { Github, GitFork } from 'lucide-react'; |
| <div className="flex -space-x-3 shrink-0"> | ||
| <Image | ||
| src="https://avatars.githubusercontent.com/u/63339782?v=4" | ||
| alt="Customer 1" | ||
| width={36} | ||
| height={36} | ||
| priority | ||
| className="w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative z-0" | ||
| /> | ||
| <Image | ||
| src="https://avatars.githubusercontent.com/u/93549213?v=4" | ||
| alt="Customer 2" | ||
| width={36} | ||
| height={36} | ||
| priority | ||
| className="w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative z-10" | ||
| /> | ||
| <Image | ||
| src="https://avatars.githubusercontent.com/u/135146135?v=4" | ||
| alt="Customer 3" | ||
| width={36} | ||
| height={36} | ||
| priority | ||
| className="w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white bg-purple-100 object-cover shadow-sm relative z-20" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
The contributor avatars are hardcoded, which makes them difficult to update. To improve maintainability, you could define them as an array of objects and then map over them to render the Image components. This also makes the JSX cleaner.
For example, you could define a constant outside your component:
const contributorAvatars = [
{
src: "https://avatars.githubusercontent.com/u/63339782?v=4",
alt: "Customer 1",
zIndex: "z-0",
extraClass: ""
},
{
src: "https://avatars.githubusercontent.com/u/93549213?v=4",
alt: "Customer 2",
zIndex: "z-10",
extraClass: ""
},
{
src: "https://avatars.githubusercontent.com/u/135146135?v=4",
alt: "Customer 3",
zIndex: "z-20",
extraClass: "bg-purple-100"
},
];Then use it in your component like this:
<div className="flex -space-x-3 shrink-0">
{contributorAvatars.map((avatar, index) => (
<Image
key={index}
src={avatar.src}
alt={avatar.alt}
width={36}
height={36}
priority
className={`w-7 h-7 md:w-9 md:h-9 rounded-full border-2 border-white object-cover shadow-sm relative ${avatar.zIndex} ${avatar.extraClass}`}
/>
))}
</div>
| <motion.span | ||
| animate={{ y: [4, -8, 4] }} | ||
| transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }} | ||
| className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white rotate-6 items-center justify-center bg-indigo-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-md" | ||
| > | ||
| 👨💻 | ||
| </motion.span> |
There was a problem hiding this comment.
This floating emoji is decorative. To prevent screen readers from announcing it and potentially confusing users with visual impairments, you should add aria-hidden="true" to the motion.span element. This accessibility improvement should also be applied to the other decorative emojis in this component (lines 99-105 and 109-115).
<motion.span
aria-hidden="true"
animate={{ y: [4, -8, 4] }}
transition={{ repeat: Infinity, duration: 4, ease: "easeInOut" }}
className="inline-flex relative -top-1 md:-top-2 border-2 md:border-[3px] border-white rotate-6 items-center justify-center bg-indigo-50 w-10 h-10 md:w-16 md:h-16 rounded-xl md:rounded-2xl mx-1 shadow-inner text-[22px] md:text-3xl shadow-md"
>
👨💻
</motion.span>
| <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4 divide-y md:divide-y-0 md:divide-x divide-gray-100"> | ||
| <div className="flex flex-col items-center justify-center pt-4 md:pt-0"> | ||
| <span className="text-4xl md:text-5xl font-bold tracking-tight text-[#111] mb-2 flex items-center"> | ||
| <Counter from={0} to={6010} duration={2} />+ | ||
| </span> | ||
| <span className="text-xs md:text-sm font-medium text-gray-500 uppercase tracking-widest text-center"> | ||
| Profiles Generated | ||
| </span> | ||
| </div> | ||
| <div className="flex flex-col items-center justify-center pt-8 md:pt-0"> | ||
| <span className="text-4xl md:text-5xl font-bold tracking-tight text-[#111] mb-2 flex items-baseline"> | ||
| <Counter from={0} to={8} duration={2} /> | ||
| <span className="text-3xl font-semibold text-gray-300 ml-1">mo</span> | ||
| </span> | ||
| <span className="text-xs md:text-sm font-medium text-gray-500 uppercase tracking-widest text-center"> | ||
| Continuously Active | ||
| </span> | ||
| </div> | ||
| <div className="flex flex-col items-center justify-center pt-8 md:pt-0"> | ||
| <span className="text-4xl md:text-5xl font-bold tracking-tight text-[#111] mb-2"> | ||
| Global | ||
| </span> | ||
| <span className="text-xs md:text-sm font-medium text-gray-500 uppercase tracking-widest text-center"> | ||
| Developer Reach | ||
| </span> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
The metrics in this section are hardcoded. To improve maintainability and readability, consider defining this data in an array of objects and then mapping over it to render the metric items. This makes it easier to add, remove, or update stats in the future.
For example, you could create a data structure like this:
const metrics = [
{
value: { from: 0, to: 6010, duration: 2 },
suffix: '+',
label: 'Profiles Generated',
},
{
value: { from: 0, to: 8, duration: 2 },
suffix: <span className="text-3xl font-semibold text-gray-300 ml-1">mo</span>,
label: 'Continuously Active',
},
{
value: 'Global',
label: 'Developer Reach',
},
];Then you can loop through metrics to render each stat, which would make this section much cleaner and easier to manage.
1 participant
Summary
Revamped the landing page's main Hero section and improved the "Compare" slider's aspect ratio and styling.
Description
This PR introduces a significant visual level-up to
AnimatedHeroClientand theCompareslider component:motion.spanelements.Countercomponent to add smooth shuffling number animations on mount for the6010+ Profiles Generatedand8mo Activemetrics.w-[400px] h-[400px]constraints in favor of a responsive 16:9-like wide aspect ratio. Cleaned up styling by applying standardrounded-lgclip-paths and an elegant gray border.Motivation and Context
The landing page's initial design served its purpose, but moving towards a premium, balanced, and interactive aesthetic helps signal confidence visually. Using real contributor avatars directly inside the "Trusted by" UI establishes immediate social proof, while the floating animations and dynamic counter tickers draw maximum attention to platform velocity.
How has this been tested?
Compareblock maintains its new aspect ratio without cutting off inner images.<Counter />component elegantly ticks upwards correctly.<Image />assets load correctly from/public/imagesand/public/logo.Screenshots (if appropriate):
Types of changes
Checklist: