Fix: center align down arrow in hero section

[Pratith544]

Fixes Issue

Closes #2722

Summary

This PR fixes the alignment of the down arrow in the homepage hero section.

Problem

The down arrow was previously placed inside the left content column, causing it to appear left-aligned instead of centered relative to the entire hero section.

Changes Made

• Moved the DownArrow component outside the text column.
• Made the hero section relative to support proper positioning.
• Centered the arrow using absolute positioning at the bottom of the hero section.
• Added click behaviour to scroll to the next section.
• Improved accessibility by updating alt text.

Result

The arrow is now properly centered across all screen sizes and behaves as a scroll indicator.

Screenshots

Summary by CodeRabbit

• Style
  • Redesigned hero section to occupy the full viewport with vertically centered content for improved visual presentation.
  • Moved the down-arrow indicator into a separate overlay at the bottom of the section to enhance visual hierarchy and navigation cues.
• Bug Fixes
  • Improved accessibility for the navigation overlay with aria attributes and clearer focus/interaction behavior.

[vercel]

@Pratith544 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Home page Hero section is restructured to a full-viewport layout (min-h-screen) with centered content; the DownArrow was moved out of the inline content into an absolutely positioned, bottom-centered overlay element with accessibility attributes.

Changes

Cohort / File(s)	Summary
Hero Section Layout Restructure src/User/pages/Home/Home.jsx	Hero converted to full-viewport (min-h-screen) flex/center layout; added overlay element and moved DownArrow from content container to an absolutely positioned bottom-center button; minor accessibility attribute added (aria-label).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• UI Improvement : Alignment of Down Arrow in Home page #2722: UI Improvement — center-align down arrow in Home page (this PR implements that alignment).
• Center scroll indicator and enhance hero section on homepage #2721: Adjusts DownArrow positioning in the same Hero component; changes appear to target the same behavior (absolute centered overlay).

Possibly related PRs

• Added top to down arrow in vigyBag Page #1623: Adds DownArrow component and base styles which this PR repositions.
• Made DownArrow Responsive #1656: Modifies DownArrow presentation/positioning; closely related to the layout changes here.

Suggested labels

good first issue, level1, gssoc

Suggested reviewers

• codervivek5

Poem

🐰 I hopped in code with bright delight,
Centered the arrow to shine in the light,
Hero stretched tall from top to floor,
An overlay button—a tidy decor! ✨
Small hop, big change, now alignment's right.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: centering the down arrow in the hero section, which matches the primary objective of the PR.
Description check	✅ Passed	The PR description is comprehensive and well-structured, including issue reference, problem statement, changes made, results, and a screenshot demonstrating the fix.
Linked Issues check	✅ Passed	The PR successfully addresses issue #2722 by implementing the requested center-alignment of the down arrow in the hero section through absolute positioning.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the down arrow alignment in the hero section; no out-of-scope modifications were detected beyond the stated objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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/User/pages/Home/Home.jsx`:
- Around line 246-248: The down-arrow is rendered as a non-focusable <div> and
never calls scrollToSection; replace the <div> wrapper with a focusable control
(e.g., a <button> element) around <DownArrow /> and wire its onClick to call
scrollToSection, add keyboard support by handling Enter/Space via onKeyDown (or
rely on button default behavior), and include an accessible label
(aria-label="Scroll to next section") so DownArrow is both clickable and
keyboard accessible; keep the existing className ("absolute bottom-6 left-1/2
transform -translate-x-1/2") and ensure the handler references the existing
scrollToSection function.

[inderjeetsinghbajaj123]

@codervivek5 Please assign to me.Myself OPEN SOURCE CONTRIBUTOR.

[Pratith544]

Hi @codervivek5
This PR is ready for review.

It fixes the hero down-arrow alignment and adds scroll + accessibility improvements.
Please let me know if any changes are required.

Thanks for your time!

[sagargkunte]

This issue was raised by me. @Pratith544 should wait for assignment before submitting a PR. Kindly wait until the author assigns the issue.

[Pratith544]

Thank you for pointing that out .
My apologies, I’ll make sure to wait for assignment before working on an issue next time.
I really appreciate the guidance!

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vigybag	Ready	Preview, Comment	Feb 14, 2026 3:23pm

[codervivek5]

This issus is raised by someone else so due to the policy I need to assign this to the first come person