Skip to content

fixed "Get started" button fully not seen issue in hero section. #301

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Bikash-jha11 wants to merge 1 commit into from
+7 −4
Closed

fixed "Get started" button fully not seen issue in hero section. #301

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions apps/web/src/components/landing-sections/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,12 +71,15 @@ const Hero = () => {
</div>
</Link>
</motion.div>
<motion.h1
<motion.div
initial="hidden"
animate="visible"
variants={itemVariants}
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
>
Only platform you need to get into Open Source
</motion.h1>
<h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
Only platform you need to get into Open Source
</h1>
</motion.div>
Comment on lines +74 to +82
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Inconsistency between commit message and implementation; redundant animation props.

The commit message states "Fix LCP by removing animation from H1," but the h1 is still animated through the motion.div wrapper. Animating the LCP element (typically the main heading) delays when the browser considers it painted, negatively impacting the LCP metric.

Additionally, the motion.div has redundant animation props: when using variants={itemVariants} that already define "hidden" and "visible" states, the explicit initial="hidden" and animate="visible" props are unnecessary. The parent container at line 49 already orchestrates staggered animations through containerVariants.

If the goal is to improve LCP performance, remove the animation entirely from the h1 block. Otherwise, simplify by removing the redundant initial and animate props.

🔎 Proposed fix to remove animation for LCP improvement

If the goal is to improve LCP, remove the motion.div wrapper:

-        <motion.div
-          initial="hidden"
-          animate="visible"
-          variants={itemVariants}
-        >
-          <h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
+        <h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
           Only platform you need to get into Open Source
-          </h1>
-        </motion.div>
+        </h1>

Alternatively, if animation is desired, remove the redundant props:

         <motion.div
-          initial="hidden"
-          animate="visible"
           variants={itemVariants}
         >
           <h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
             Only platform you need to get into Open Source
           </h1>
         </motion.div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<motion.div
initial="hidden"
animate="visible"
variants={itemVariants}
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
>
Only platform you need to get into Open Source
</motion.h1>
<h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
Only platform you need to get into Open Source
</h1>
</motion.div>
<h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
Only platform you need to get into Open Source
</h1>
Suggested change
<motion.div
initial="hidden"
animate="visible"
variants={itemVariants}
className="text-5xl text-[2.8rem] lg:text-7xl lg:text-[6rem] font-medium tracking-tighter [will-change:transform,opacity] motion-reduce:transition-none motion-reduce:transform-none"
>
Only platform you need to get into Open Source
</motion.h1>
<h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
Only platform you need to get into Open Source
</h1>
</motion.div>
<motion.div
variants={itemVariants}
>
<h1 className="text-5xl lg:text-7xl font-medium tracking-tighter">
Only platform you need to get into Open Source
</h1>
</motion.div>
🤖 Prompt for AI Agents 
In apps/web/src/components/landing-sections/Hero.tsx around lines 74-82, the H1
is still wrapped in a motion.div which animates the LCP element (hurting LCP)
and also redundantly specifies initial="hidden" and animate="visible" while
using variants; to fix, remove the motion.div wrapper and render the plain h1 so
it is not animated (best for LCP), or if you must keep the animation, retain the
motion.div but delete the explicit initial and animate props so the parent
containerVariants control the animation.

<motion.p
initial={{ opacity: 0, y: 30, filter: "blur(10px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
Expand Down