Fix hero description text overlap on medium screens

[rahman-D3V]

What was fixed

The hero section description text was overlapping with the yellow decorative background at medium screen widths, reducing readability.

Cause

The decorative background is absolutely positioned, and at the md breakpoint the text container did not have sufficient spacing to avoid overlap.

Fix.overlap.mp4

Related issue

Fixes #544

Summary by CodeRabbit

• Style

  • Refined layout, spacing, and responsive behavior across the hero, background image, main content, and project grid.
  • Updated logo alignment, heading typography, paragraph wrapping, and small spacing tweaks for icons and CTA.
  • Removed the final banner from the page.

• Refactor

  • Reorganized container and content ordering to improve visual flow and maintainability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@rahman-D3V is attempting to deploy a commit to the AOSSIE Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors the homepage JSX layout and responsive classes to adjust hero/background positioning, explicit responsive heights, typography, and spacing to prevent decorative background overlap on medium screens; restructures button and counts blocks and removes the final Banner render. No exported API changes.

Changes

Cohort / File(s)

Summary

Hero & Page Layout src/pages/index.jsx

Reordered container classes and flex/grid alignment; moved background image to an absolutely positioned right-aligned block with explicit md/lg height rules; adjusted hero heading, paragraph wrapping, and logo alignment; restructured link/button block and social icons spacing; reorganized green counts band (z-index, flex flow, text sizing); removed final Banner render; whitespace and class reordering across sections (+35/-26).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I hopped through classes, nimbly bright,

I nudged the yellow from the light,
Lines now breathe, no overlap to fear,
Buttons and counts all set to cheer,
A tiny rabbit fixes what was tight.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR includes additional changes beyond the hero overlap fix: Banner component removal, Projects section typography updates, and green band reorganization appear unrelated to the overlap issue.	Isolate hero overlap fixes to the PR scope; move unrelated changes (Banner removal, Projects/green band updates) to separate PRs or justify their necessity for fixing the overlap.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically addresses the main issue being fixed: hero description text overlapping on medium screens.
Linked Issues check	✅ Passed	The PR implements changes to fix text overlap in the hero section at medium breakpoints by adjusting layout, spacing, and positioning, directly addressing issue #544's requirements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/pages/index.jsx`:
- Around line 36-39: The Tailwind height utility in the className on the
top-right background div is missing a unit so `lg:h-[650]` is ignored; update
the className on that div (the element with className starting " absolute 
right-0 top-[-230px]...") to use an explicit unit, e.g. replace `lg:h-[650]`
with `lg:h-[650px]` so the large breakpoint height is applied correctly.

🧹 Nitpick comments (1)

src/pages/index.jsx (1)

57-57: Simplify the dark mode text color class.

The arbitrary value dark:text-[rgb(161 161 170/var(--tw-text-opacity))] relies on --tw-text-opacity being set, but Tailwind doesn't automatically set this CSS variable when using arbitrary color values. This could cause the color to not render as expected.

Consider using the built-in utility dark:text-zinc-400, which produces the same color (rgb 161, 161, 170) and handles opacity correctly.

♻️ Proposed fix

-                <p className="dark:text-[rgb(161 161 170/var(--tw-text-opacity))] mt-8 font-mono text-xl leading-7 text-zinc-600  md:dark:text-[`#FED41E`]">
+                <p className="mt-8 font-mono text-xl leading-7 text-zinc-600 dark:text-zinc-400 md:dark:text-[`#FED41E`]">

[pranav-n29]

@rahman-D3V whats ur status is it approved?

[pranav-n29]

Thanks for the fix! I originally reported this issue (#544).
I’ve tested these changes locally at medium screen sizes and they
resolve the overlap. Happy to help with further tweaks if needed.

[rahman-D3V]

@rahman-D3V whats ur status is it approved?

I guess not yet