Skip to content

fix(hero): improve accessibility, contrast, and spacing on responsive viewports #714

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

Open
reach2saksham wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(hero): improve accessibility, contrast, and spacing on responsive viewports #714

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02dd7ac
fix(hero): improve accessibility, contrast, and spacing on responsive…
reach2saksham Mar 27, 2026
ededbc2
fix: edge cases of the dark mode heading and body text between md to lg
reach2saksham Mar 27, 2026
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
22 changes: 11 additions & 11 deletions src/app/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Home() {
<div className="relative">

{/* Background Image */}
<div className="hidden absolute md:block z-0 bg-[url('../images/background.png')] dark:bg-[url('../images/background-dark.png')] right-0 top-[-230px] w-full h-[-webkit-fill-available] bg-cover bg-center mb-20 pointer-events-none"></div>
<div className="hidden absolute lg:block z-0 bg-[url('../images/background.png')] dark:bg-[url('../images/background-dark.png')] right-0 top-[-230px] w-full h-[-webkit-fill-available] bg-cover bg-center mb-20 pointer-events-none"></div>

{/* Main Content */}
<div className="flex flex-col lg:flex-row relative z-10 mb-16 gap-12 items-center">
Expand All @@ -67,15 +67,15 @@ export default function Home() {
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="font-mono text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-[#00843d] md:text-[#FED41E] dark:text-[#FED41E] md:dark:text-black leading-tight relative lg:-top-[30px] text-center lg:text-left"
className="font-mono text-5xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-[#00843d] md:text-[#FED41E] dark:text-[#FED41E] lg:dark:text-black leading-tight relative lg:-top-[30px] text-center pb-8 lg:text-left"
>
We Innovate <br /> We Educate
</motion.h1>
<motion.p
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="mt-8 font-mono text-xl leading-8 text-zinc-600 dark:text-zinc-300 md:dark:text-[#FED41E]/90 bg-white/50 md:bg-transparent dark:bg-zinc-900/50 md:dark:bg-transparent backdrop-blur-sm md:backdrop-blur-none rounded-xl p-4 md:p-0 text-center lg:text-left"
className="mt-8 font-mono text-xl leading-8 text-zinc-500 lg:text-zinc-800 dark:text-zinc-300 lg:dark:text-[#FED41E]/90 bg-white/50 md:bg-transparent dark:bg-zinc-900/50 md:dark:bg-transparent backdrop-blur-sm md:backdrop-blur-none rounded-xl p-4 md:p-0 text-center lg:text-left"
>
We are an Australian not-for-profit umbrella organization for
open-source projects. We believe the open-source philosophy
Expand All @@ -92,7 +92,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
aria-label="Contact by Mail"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 lg:text-zinc-800 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="mailto:aossie.oss@gmail.com"
>
<FontAwesomeIcon icon={faEnvelope} size="2xl" />
Expand All @@ -101,7 +101,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
aria-label="Follow on GitHub"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 lg:text-zinc-800 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://github.com/AOSSIE-Org"
>
<FontAwesomeIcon icon={faGithub} size="2xl" />
Expand All @@ -110,7 +110,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
aria-label="Join on Discord"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 lg:text-zinc-800 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://discord.gg/hjUhu33uAn"
>
<FontAwesomeIcon icon={faDiscord} size="2xl" />
Expand All @@ -119,7 +119,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
aria-label="Follow on LinkedIn"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 lg:text-zinc-800 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://www.linkedin.com/company/aossie/"
>
<FontAwesomeIcon icon={faLinkedin} size="2xl" />
Expand All @@ -128,7 +128,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
aria-label="Follow on X (Twitter)"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 lg:text-zinc-800 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://x.com/aossie_org"
>
<FontAwesomeIcon icon={faXTwitter} size="2xl" />
Expand All @@ -137,7 +137,7 @@ export default function Home() {
target="_blank"
rel="noopener noreferrer"
aria-label="Subscribe on YouTube"
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
className="text-zinc-500 lg:text-zinc-800 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://www.youtube.com/@AOSSIE-Org"
>
<FontAwesomeIcon icon={faYoutube} size="2xl" />
Expand Down Expand Up @@ -194,13 +194,13 @@ export default function Home() {
</svg>
</div>
<div className="col-span-8 mt-3 self-center lg:col-start-2">
<h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">
<h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-500 lg:text-zinc-800 dark:text-white">
Our Projects
</h1>
Comment on lines +197 to 199
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 27, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

This change reduces contrast outside the hero section.

The "Our Projects" section isn't part of the hero area and doesn't have a yellow background. Changing from text-zinc-800 to text-zinc-500 on smaller viewports reduces contrast on what is likely a white/neutral background. The PR objectives specifically target the hero section's yellow background.

Consider reverting this to maintain the original contrast:

💡 Suggested fix 
-                <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-500 lg:text-zinc-800 dark:text-white">
+                <h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">
📝 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
<h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-500 lg:text-zinc-800 dark:text-white">
Our Projects
</h1>
<h1 className="font-mono pl-3 text-5xl font-black capitalize tracking-tighter text-zinc-800 dark:text-white">
Our Projects
</h1>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/app/page.jsx` around lines 197 - 199, Revert the small-viewport text
color change on the "Our Projects" heading: update the h1 with className
containing "Our Projects" so it uses text-zinc-800 for normal/smaller viewports
(keeping any existing lg: or dark: variants intact) instead of text-zinc-500,
ensuring the non-hero section retains the original higher contrast; locate the
h1 element in page.jsx and replace the small-viewport token in the className
back to text-zinc-800.

</div>
</div>

<p className=" font-mono text-lg text-zinc-600 dark:text-zinc-400 text-center ">
<p className=" font-mono text-lg text-zinc-500 lg:text-zinc-800 dark:text-zinc-400 text-center ">
Our Projects span a wide range of themes, such as:
open money; decentralized economic and financial stability;
trust; education; sustainability; communication; governance and management;
Expand Down