From 3c5c274265a3455781ce0d71dfcc476ca4b7cf06 Mon Sep 17 00:00:00 2001
From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com>
Date: Mon, 24 Aug 2026 19:06:14 +0530
Subject: [PATCH 1/6] fix(seo): add sr-only descriptive text to 'Learn more'
 links

---
 landing-page/src/components/EverywhereFeatures.tsx | 2 +-
 landing-page/src/components/Features.tsx           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/landing-page/src/components/EverywhereFeatures.tsx b/landing-page/src/components/EverywhereFeatures.tsx
index 4bc6c8c0..3bb6d612 100644
--- a/landing-page/src/components/EverywhereFeatures.tsx
+++ b/landing-page/src/components/EverywhereFeatures.tsx
@@ -104,7 +104,7 @@ export function EverywhereFeatures() {
 
                 <div>
                   <Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer hover:scale-105 hover:shadow-lg transform focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
-                    Learn more
+                    Learn more<span className="sr-only"> about {card.title}</span>
                   </Link>
                 </div>
               </div>
diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index 2e0c9d63..78b0d894 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -36,7 +36,7 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
 
         <div>
           <Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
-            Learn more
+            Learn more<span className="sr-only"> about {card.title}</span>
           </Link>
         </div>
       </div>

From 8a4506903e563a4e8f27182c6ace5a3829eb50dc Mon Sep 17 00:00:00 2001
From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com>
Date: Tue, 25 Aug 2026 08:46:32 +0530
Subject: [PATCH 2/6] fix(a11y): exclude aria-hidden duplicate cards from
 keyboard tab order

---
 landing-page/src/components/Features.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index 78b0d894..fed0cd67 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -9,9 +9,10 @@ interface FeatureCardProps {
   index: number;
   rotatedCard: number | null;
   handleCardClick: (index: number) => void;
+  tabIndex?: number;
 }
 
-function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardProps) {
+function FeatureCard({ card, index, rotatedCard, handleCardClick, tabIndex }: FeatureCardProps) {
   return (
     <div
       onClick={() => handleCardClick(index)}
@@ -35,7 +36,7 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick }: FeatureCardP
         </p>
 
         <div>
-          <Link href="/docs" className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
+          <Link href="/docs" tabIndex={tabIndex} className="inline-block text-xs sm:text-sm font-bold px-4 sm:px-6 py-2 sm:py-3 bg-black text-white dark:bg-white dark:text-black rounded-full shadow-xs hover:opacity-80 transition cursor-pointer focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
             Learn more<span className="sr-only"> about {card.title}</span>
           </Link>
         </div>
@@ -119,7 +120,7 @@ export function Features() {
           </div>
           <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true">
             {cards.map((card, i) => (
-              <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
+              <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} tabIndex={-1} />
             ))}
           </div>
         </div>

From 3351ce6114fdcd5e4b88affc5ffc4e5b1d51a4b6 Mon Sep 17 00:00:00 2001
From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com>
Date: Tue, 25 Aug 2026 09:48:22 +0530
Subject: [PATCH 3/6] fix(a11y): improve color contrast across components

---
 landing-page/src/app/not-found.tsx            |  2 +-
 landing-page/src/components/CodeShowcase.tsx  |  4 ++--
 .../src/components/EverywhereFeatures.tsx     |  2 +-
 landing-page/src/components/Features.tsx      |  2 +-
 landing-page/src/components/Footer.tsx        | 12 +++++------
 landing-page/src/components/Hero.tsx          | 10 +++++-----
 landing-page/src/components/Playground.tsx    | 20 +++++++++----------
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/landing-page/src/app/not-found.tsx b/landing-page/src/app/not-found.tsx
index ff503d1b..8be2b073 100644
--- a/landing-page/src/app/not-found.tsx
+++ b/landing-page/src/app/not-found.tsx
@@ -22,7 +22,7 @@ export default function NotFound() {
       <SiteNavbar />
       <main className="flex-1 flex flex-col items-center justify-center text-center px-4 pt-16">
         <h1 className="text-5xl sm:text-6xl font-serif font-bold mb-4">404</h1>
-        <p className="text-lg text-neutral-500 mb-8">
+        <p className="text-lg text-neutral-600 mb-8">
           {notFoundCopy.message}
         </p>
         <div className="flex flex-wrap gap-4 justify-center">
diff --git a/landing-page/src/components/CodeShowcase.tsx b/landing-page/src/components/CodeShowcase.tsx
index 61ed9a26..a5db1e40 100644
--- a/landing-page/src/components/CodeShowcase.tsx
+++ b/landing-page/src/components/CodeShowcase.tsx
@@ -14,7 +14,7 @@ export function CodeShowcase() {
             <h2 className="text-4xl md:text-5xl font-serif font-bold tracking-tight text-balance mb-6">
               30-second<br />setup.<br />Any framework.
             </h2>
-            <p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg font-medium">
+            <p className="text-neutral-700 dark:text-neutral-300 mb-8 max-w-lg font-medium">
               Fully typed, tree-shakable, and designed to match your application's design system out of the box.
             </p>
             
@@ -60,7 +60,7 @@ export function CodeShowcase() {
                   {"\n  "}
                   <code className="text-[#00C853]">return</code> <code className="text-white">(</code>
                   {"\n    "}
-                  <code className="text-neutral-500 font-medium">{"// Just drop it wherever you need it"}</code>
+                  <code className="text-neutral-700 font-medium">{"// Just drop it wherever you need it"}</code>
                   {"\n    "}
                   <code className="text-white">{"<"}</code>
                   <code className="text-[#FFCC00]">SocialShare</code>
diff --git a/landing-page/src/components/EverywhereFeatures.tsx b/landing-page/src/components/EverywhereFeatures.tsx
index 3bb6d612..61181ee4 100644
--- a/landing-page/src/components/EverywhereFeatures.tsx
+++ b/landing-page/src/components/EverywhereFeatures.tsx
@@ -92,7 +92,7 @@ export function EverywhereFeatures() {
                 <div className={`absolute top-0 left-0 w-full h-full bg-linear-to-r from-transparent via-white/20 to-transparent ${hoveredCard === i ? 'animate-shine' : ''}`} />
               </div>
               
-              <span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
+              <span aria-hidden="true" className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-60 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor} transition-transform duration-300 ${hoveredCard === i ? 'scale-110 rotate-12' : ''}`}>
                 {card.num}
               </span>
               
diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index fed0cd67..41c8e532 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -25,7 +25,7 @@ function FeatureCard({ card, index, rotatedCard, handleCardClick, tabIndex }: Fe
         perspective: '1000px',
       }}
     >
-      <span className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-30 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
+      <span aria-hidden="true" className={`text-5xl sm:text-6xl md:text-7xl font-serif opacity-60 absolute top-4 sm:top-6 right-6 sm:right-8 font-bold ${card.textColor}`}>
         {card.num}
       </span>
 
diff --git a/landing-page/src/components/Footer.tsx b/landing-page/src/components/Footer.tsx
index 148c583c..a9b8cd8f 100644
--- a/landing-page/src/components/Footer.tsx
+++ b/landing-page/src/components/Footer.tsx
@@ -33,7 +33,7 @@ export function Footer() {
               <br />
               Right <span className="text-[#00C853]">now.</span>
             </h2>
-            <p className="text-neutral-500 max-w-sm text-sm font-medium leading-relaxed mt-6">
+            <p className="text-neutral-400 max-w-sm text-sm font-medium leading-relaxed mt-6">
               Two CDN tags, one function call. No account, no API key, no
               <br className="hidden sm:block" />
               build step. Your users will be sharing in under 30
@@ -132,14 +132,14 @@ export function Footer() {
               <div className="flex flex-wrap gap-6">
                 <a
                   aria-label="Contact by Mail"
-                  className="text-neutral-500 hover:text-[#FFCC00] transition"
+                  className="text-neutral-600 hover:text-[#FFCC00] transition"
                   href="mailto:contact@aossie.org"
                 >
                   <Mail className="w-6 h-6" />
                 </a>
                 <a
                   aria-label="Join on Discord"
-                  className="text-neutral-500 hover:text-[#FFCC00] transition"
+                  className="text-neutral-600 hover:text-[#FFCC00] transition"
                   href="https://discord.gg/hjUhu33uAn"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -148,7 +148,7 @@ export function Footer() {
                 </a>
                 <a
                   aria-label="Follow on LinkedIn"
-                  className="text-neutral-500 hover:text-[#FFCC00] transition"
+                  className="text-neutral-600 hover:text-[#FFCC00] transition"
                   href="https://www.linkedin.com/company/aossie/"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -157,7 +157,7 @@ export function Footer() {
                 </a>
                 <a
                   aria-label="Subscribe on YouTube"
-                  className="text-neutral-500 hover:text-[#FFCC00] transition"
+                  className="text-neutral-600 hover:text-[#FFCC00] transition"
                   href="https://www.youtube.com/@AOSSIE-Org"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -174,7 +174,7 @@ export function Footer() {
       {/* Bottom bar */}
       <div className="border-t border-neutral-900 py-8">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center">
-          <div className="text-sm text-neutral-500 text-center">
+          <div className="text-sm text-neutral-400 text-center">
             Open Source under MIT License &middot; &copy; 2016-
             {new Date().getFullYear()} AOSSIE. All rights reserved.
           </div>
diff --git a/landing-page/src/components/Hero.tsx b/landing-page/src/components/Hero.tsx
index 77a68814..d889ad30 100644
--- a/landing-page/src/components/Hero.tsx
+++ b/landing-page/src/components/Hero.tsx
@@ -54,7 +54,7 @@ export function Hero() {
                 whileTap={{ scale: 0.9 }}
                 href="/docs/manual"
                 onClick={(e) => handleNavigate(e, '/docs/manual')}
-                className="bg-[#00C853] text-white px-6 py-3 rounded-full font-bold hover:brightness-110 transition-all border-2 border-transparent dark:border-none flex items-center gap-2 cursor-pointer group"
+                className="bg-[#00C853] text-black px-6 py-3 rounded-full font-bold hover:brightness-110 transition-all border-2 border-transparent dark:border-none flex items-center gap-2 cursor-pointer group"
               >
                 Add Manually <span className="group-hover:translate-x-1 transition-transform">→</span>
               </motion.a>
@@ -79,11 +79,11 @@ export function Hero() {
           <div className="relative mx-auto w-full max-w-md lg:max-w-none lg:ml-auto perspective-1000">
             <div className="rounded-xl border-2 border-[#FFCC00] bg-card p-6 shadow-[0_0_30px_rgba(255,204,0,0.15)] transform-gpu hover:-translate-y-2 transition-transform duration-500">
               <div className="flex items-center justify-between mb-8 cursor-move">
-                <h3 className="font-serif text-2xl font-bold text-center w-full text-[#00C853]">Share this Page</h3>
+                <h2 className="font-serif text-2xl font-bold text-center w-full text-[#00C853]">Share this Page</h2>
                 <button className="absolute right-4 top-4 text-neutral-400 hover:text-foreground">✕</button>
               </div>
 
-              <p className="text-center text-sm text-neutral-500 mb-6">Where do you want to share this link?</p>
+              <p className="text-center text-sm text-card-foreground/70 mb-6">Where do you want to share this link?</p>
 
               <div className="grid grid-cols-5 gap-4 mb-8">
                 {/* Mock Icons */}
@@ -98,13 +98,13 @@ export function Hero() {
                     <div className={`w-10 h-10 md:w-12 md:h-12 rounded-full ${network.bg} flex items-center justify-center text-white shadow-lg transition-transform group-hover:-translate-y-1`}>
                       {network.name[0]}
                     </div>
-                    <span className="text-[10px] md:text-xs text-neutral-500">{network.name}</span>
+                    <span className="text-[10px] md:text-xs text-card-foreground/70">{network.name}</span>
                   </div>
                 ))}
               </div>
 
               <div className="flex items-center gap-2 bg-background rounded-full p-1 pl-4 border-2 border-[#FFCC00]">
-                <span className="text-xs md:text-sm text-neutral-500 truncate flex-1 hidden sm:block">social-share-button.aossie.org</span>
+                <span className="text-xs md:text-sm text-foreground/70 truncate flex-1 hidden sm:block">social-share-button.aossie.org</span>
                 <button className="bg-[#FFCC00] text-black px-4 py-2 rounded-full text-sm font-bold">
                   Copy Link
                 </button>
diff --git a/landing-page/src/components/Playground.tsx b/landing-page/src/components/Playground.tsx
index d7708be8..f1b47331 100644
--- a/landing-page/src/components/Playground.tsx
+++ b/landing-page/src/components/Playground.tsx
@@ -114,14 +114,14 @@ export function Playground() {
               </div>
 
               {!isIconOnly && (
-                <p className={`text-center text-sm mb-8 font-medium ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
+                <p className={`text-center text-sm mb-8 font-medium ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
                   Share this page to your social networks:
                 </p>
               )}
 
               <div className={`gap-4 mb-10 justify-center ${isCompact || isIconOnly ? "flex flex-wrap" : "grid grid-cols-5"}`}>
                 {activePlatforms.length === 0 && (
-                  <p className="text-xs text-neutral-500">No platforms selected — turn one on in the panel →</p>
+                  <p className="text-xs text-neutral-700">No platforms selected — turn one on in the panel →</p>
                 )}
                 {activePlatforms.map((network, i) => (
                   <div key={i} className="flex flex-col items-center gap-3">
@@ -132,7 +132,7 @@ export function Playground() {
                       {network.icon}
                     </div>
                     {!isIconOnly && (
-                      <span className={`text-[11px] font-medium ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
+                      <span className={`text-[11px] font-medium ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
                         {network.name}
                       </span>
                     )}
@@ -146,7 +146,7 @@ export function Playground() {
                     isDark ? "border-neutral-600" : "border-neutral-300"
                   }`}
                 >
-                  <span className={`text-sm truncate flex-1 ${isDark ? "text-neutral-400" : "text-neutral-500"}`}>
+                  <span className={`text-sm truncate flex-1 ${isDark ? "text-neutral-300" : "text-neutral-700"}`}>
                     https://socialsharebutton.com
                   </span>
                   <button
@@ -207,7 +207,7 @@ export function Playground() {
 
                 {/* Theme Config */}
                 <div>
-                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Theme</h4>
+                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Theme</h4>
                    <div className="flex rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-[#0a0a0a] p-1">
                      <button
                        onClick={() => setTheme("light")}
@@ -234,7 +234,7 @@ export function Playground() {
 
                 {/* Button Style Config */}
                 <div>
-                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Button Style</h4>
+                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Button Style</h4>
                    <div className="grid grid-cols-2 gap-2">
                      {BUTTON_STYLES.map((s) => (
                        <button
@@ -243,7 +243,7 @@ export function Playground() {
                          className={`py-2 text-sm rounded-md transition-colors ${
                            style === s.key
                              ? "font-bold text-black bg-[#FFCC00] shadow-xs"
-                             : "font-medium text-neutral-500 dark:text-neutral-400 border border-neutral-200 dark:border-neutral-800"
+                             : "font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-200 dark:border-neutral-800"
                          }`}
                        >
                          {s.label}
@@ -254,7 +254,7 @@ export function Playground() {
 
                 {/* Platforms Config */}
                 <div>
-                  <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Platforms</h4>
+                  <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Platforms</h4>
                   <div className="space-y-2">
                     {platforms.map((platform, i) => (
                       <button
@@ -273,7 +273,7 @@ export function Playground() {
                           >
                             {platform.icon}
                           </div>
-                          <span className={`text-xs font-medium ${platform.active ? "text-foreground" : "text-neutral-500"}`}>
+                          <span className={`text-xs font-medium ${platform.active ? "text-foreground" : "text-neutral-700 dark:text-neutral-300"}`}>
                             {platform.name}
                           </span>
                         </div>
@@ -299,7 +299,7 @@ export function Playground() {
 
                 {/* Button Color Config */}
                 <div>
-                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-500 mb-3 uppercase">Button Color</h4>
+                   <h4 className="text-[10px] font-mono tracking-widest text-neutral-700 dark:text-neutral-300 mb-3 uppercase">Button Color</h4>
                    <div className="flex gap-2">
                      {COLORS.map((c) => (
                        <button

From d2e5da3ceb6b4691e587ff121ba21f01e0723ea0 Mon Sep 17 00:00:00 2001
From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com>
Date: Tue, 25 Aug 2026 14:26:00 +0530
Subject: [PATCH 4/6] fix(a11y): address additional coderabbit contrast and
 inert feedback

---
 landing-page/src/app/not-found.tsx           | 2 +-
 landing-page/src/components/CodeShowcase.tsx | 2 +-
 landing-page/src/components/Features.tsx     | 2 +-
 landing-page/src/components/Footer.tsx       | 8 ++++----
 landing-page/src/components/Playground.tsx   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/landing-page/src/app/not-found.tsx b/landing-page/src/app/not-found.tsx
index 8be2b073..c67b883b 100644
--- a/landing-page/src/app/not-found.tsx
+++ b/landing-page/src/app/not-found.tsx
@@ -22,7 +22,7 @@ export default function NotFound() {
       <SiteNavbar />
       <main className="flex-1 flex flex-col items-center justify-center text-center px-4 pt-16">
         <h1 className="text-5xl sm:text-6xl font-serif font-bold mb-4">404</h1>
-        <p className="text-lg text-neutral-600 mb-8">
+        <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8">
           {notFoundCopy.message}
         </p>
         <div className="flex flex-wrap gap-4 justify-center">
diff --git a/landing-page/src/components/CodeShowcase.tsx b/landing-page/src/components/CodeShowcase.tsx
index a5db1e40..b7235338 100644
--- a/landing-page/src/components/CodeShowcase.tsx
+++ b/landing-page/src/components/CodeShowcase.tsx
@@ -60,7 +60,7 @@ export function CodeShowcase() {
                   {"\n  "}
                   <code className="text-[#00C853]">return</code> <code className="text-white">(</code>
                   {"\n    "}
-                  <code className="text-neutral-700 font-medium">{"// Just drop it wherever you need it"}</code>
+                  <code className="text-neutral-300 font-medium">{"// Just drop it wherever you need it"}</code>
                   {"\n    "}
                   <code className="text-white">{"<"}</code>
                   <code className="text-[#FFCC00]">SocialShare</code>
diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index 41c8e532..04a3455b 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -118,7 +118,7 @@ export function Features() {
               <FeatureCard key={i} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
             ))}
           </div>
-          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true">
+          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert>
             {cards.map((card, i) => (
               <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} tabIndex={-1} />
             ))}
diff --git a/landing-page/src/components/Footer.tsx b/landing-page/src/components/Footer.tsx
index a9b8cd8f..7bc6de7e 100644
--- a/landing-page/src/components/Footer.tsx
+++ b/landing-page/src/components/Footer.tsx
@@ -132,14 +132,14 @@ export function Footer() {
               <div className="flex flex-wrap gap-6">
                 <a
                   aria-label="Contact by Mail"
-                  className="text-neutral-600 hover:text-[#FFCC00] transition"
+                  className="text-neutral-500 hover:text-[#FFCC00] transition"
                   href="mailto:contact@aossie.org"
                 >
                   <Mail className="w-6 h-6" />
                 </a>
                 <a
                   aria-label="Join on Discord"
-                  className="text-neutral-600 hover:text-[#FFCC00] transition"
+                  className="text-neutral-500 hover:text-[#FFCC00] transition"
                   href="https://discord.gg/hjUhu33uAn"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -148,7 +148,7 @@ export function Footer() {
                 </a>
                 <a
                   aria-label="Follow on LinkedIn"
-                  className="text-neutral-600 hover:text-[#FFCC00] transition"
+                  className="text-neutral-500 hover:text-[#FFCC00] transition"
                   href="https://www.linkedin.com/company/aossie/"
                   target="_blank"
                   rel="noopener noreferrer"
@@ -157,7 +157,7 @@ export function Footer() {
                 </a>
                 <a
                   aria-label="Subscribe on YouTube"
-                  className="text-neutral-600 hover:text-[#FFCC00] transition"
+                  className="text-neutral-500 hover:text-[#FFCC00] transition"
                   href="https://www.youtube.com/@AOSSIE-Org"
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/landing-page/src/components/Playground.tsx b/landing-page/src/components/Playground.tsx
index f1b47331..d0744088 100644
--- a/landing-page/src/components/Playground.tsx
+++ b/landing-page/src/components/Playground.tsx
@@ -121,7 +121,7 @@ export function Playground() {
 
               <div className={`gap-4 mb-10 justify-center ${isCompact || isIconOnly ? "flex flex-wrap" : "grid grid-cols-5"}`}>
                 {activePlatforms.length === 0 && (
-                  <p className="text-xs text-neutral-700">No platforms selected — turn one on in the panel →</p>
+                  <p className={`text-xs ${isDark ? 'text-neutral-300' : 'text-neutral-700'}`}>No platforms selected — turn one on in the panel →</p>
                 )}
                 {activePlatforms.map((network, i) => (
                   <div key={i} className="flex flex-col items-center gap-3">

From fdfdc7fe0794b254e2b5f675b670bd9b16496251 Mon Sep 17 00:00:00 2001
From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com>
Date: Tue, 25 Aug 2026 14:40:02 +0530
Subject: [PATCH 5/6] fix(a11y): use string value for inert attribute to
 support React 18

---
 landing-page/src/components/Features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index 04a3455b..035119fb 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -118,7 +118,7 @@ export function Features() {
               <FeatureCard key={i} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
             ))}
           </div>
-          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert>
+          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert="">
             {cards.map((card, i) => (
               <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} tabIndex={-1} />
             ))}

From 571cafea1a2ebc1040db08cbfd1e4b195149cba0 Mon Sep 17 00:00:00 2001
From: Aman kumar vishwakrma <186990161+amankv1234@users.noreply.github.com>
Date: Tue, 25 Aug 2026 14:59:48 +0530
Subject: [PATCH 6/6] fix typescript error

---
 landing-page/src/components/Features.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/landing-page/src/components/Features.tsx b/landing-page/src/components/Features.tsx
index 035119fb..eed39517 100644
--- a/landing-page/src/components/Features.tsx
+++ b/landing-page/src/components/Features.tsx
@@ -118,7 +118,7 @@ export function Features() {
               <FeatureCard key={i} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} />
             ))}
           </div>
-          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert="">
+          <div className="flex gap-4 sm:gap-6 md:gap-8 w-max animate-scroll-left group-hover:[animation-play-state:paused] pr-4 sm:pr-6 md:pr-8" aria-hidden="true" inert={true}>
             {cards.map((card, i) => (
               <FeatureCard key={`dup-${i}`} card={card} index={i} rotatedCard={rotatedCard} handleCardClick={handleCardClick} tabIndex={-1} />
             ))}