feat: Hero section UI enhancement by central alignments#42
Open
reach2saksham wants to merge 1 commit intoDjedAlliance:mainfrom
Open
feat: Hero section UI enhancement by central alignments#42reach2saksham wants to merge 1 commit intoDjedAlliance:mainfrom
reach2saksham wants to merge 1 commit intoDjedAlliance:mainfrom
Conversation
📝 WalkthroughWalkthroughThe Home component's hero section has been redesigned to center content vertically and horizontally, introducing a low-opacity background image as a decorative element while removing the previously positioned right-side logo. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/pages/home/Home.tsx (2)
22-22: Consider using Tailwind's arbitrary value syntax for height.The inline
style={{ height: '90vh' }}works but mixing inline styles with Tailwind classes reduces consistency. Tailwind supportsh-[90vh]for arbitrary values.♻️ Proposed fix
-<section className="relative flex items-center justify-center bg-transparent my-24 overflow-hidden" id="home" style={{ height: '90vh' }}> +<section className="relative flex items-center justify-center bg-transparent my-24 overflow-hidden h-[90vh]" id="home">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/home/Home.tsx` at line 22, Replace the inline style height in the Home component's section element with Tailwind's arbitrary value class: remove style={{ height: '90vh' }} and add h-[90vh] to the section's className (the section element in Home.tsx with id="home"); ensure spacing/order of classes remains correct and no other inline styles rely on that style.
23-27: Remove ineffective flex classes and improve accessibility for decorative image.The
justify-center items-centerclasses on line 26 are flexbox properties that have no effect on an<img>element (it's not a flex container). Additionally, since this is a purely decorative background element, the alt text should be empty andaria-hidden="true"added to exclude it from the accessibility tree.♻️ Proposed fix
<img src="/gallery/Alliance.png" - alt="Djed Alliance Logo Background" - className="absolute w-[640px] md:w-[768px] lg:w-[900px] max-w-none opacity-[0.04] pointer-events-none select-none p-6 justify-center items-center" + alt="" + aria-hidden="true" + className="absolute w-[640px] md:w-[768px] lg:w-[900px] max-w-none opacity-[0.04] pointer-events-none select-none p-6" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/pages/home/Home.tsx` around lines 23 - 27, The decorative background <img> element should be made inaccessible and cleaned of ineffective flex classes: remove the unused flex-related classes "justify-center" and "items-center" from the element's className, set its alt attribute to an empty string (alt="") and add aria-hidden="true" to exclude it from the accessibility tree; locate the <img src="/gallery/Alliance.png" ... /> instance in Home.tsx (the image element with className containing "opacity-[0.04] pointer-events-none select-none") and apply these changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/pages/home/Home.tsx`:
- Line 22: Replace the inline style height in the Home component's section
element with Tailwind's arbitrary value class: remove style={{ height: '90vh' }}
and add h-[90vh] to the section's className (the section element in Home.tsx
with id="home"); ensure spacing/order of classes remains correct and no other
inline styles rely on that style.
- Around line 23-27: The decorative background <img> element should be made
inaccessible and cleaned of ineffective flex classes: remove the unused
flex-related classes "justify-center" and "items-center" from the element's
className, set its alt attribute to an empty string (alt="") and add
aria-hidden="true" to exclude it from the accessibility tree; locate the <img
src="/gallery/Alliance.png" ... /> instance in Home.tsx (the image element with
className containing "opacity-[0.04] pointer-events-none select-none") and apply
these changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Addressed Issues:
Fixes #41
Screenshots/Recordings:
Additional Notes:
This PR introduces a modern redesign of the Hero section.
Changes include:
The new layout enhances first impressions, strengthens brand identity, and creates a cleaner, more modern landing experience.
Checklist
Summary by CodeRabbit