fix(website): homepage visibility, color contrast, keyboard a11y, mobile overflow (#414)

ajitpratap0 · Ajit Pratap Singh · claude · web-flow · commit 612cae43ea46 · 2026-03-19T21:12:50.000+05:30
- #396: Confirmed all home sections use FadeIn with animate (not whileInView); no scroll-triggered opacity:0 issues exist in current code. - #399: Upgrade text-zinc-400/text-zinc-500 → text-zinc-300 on readable content (Footer links/description/copyright, StatsBar labels, FeatureGrid descriptions, VscodeSection description, McpSection subtitle, docs breadcrumb nav) to meet WCAG AA 4.5:1 contrast ratio. Decorative elements and hover states unchanged. - #400: Add tabIndex={0}, role="region", aria-label, and focus:ring styles to both scrollable <pre> blocks in Hero.tsx (SQL input and AST output panels). mdx-components.tsx pre already had tabIndex={0} — no change needed there. - #401: Fix StatsBar min-w-[140px] causing overflow on 320px viewports by replacing with w-full and removing justify-items-center. Add overflow-x-hidden to <body> in layout.tsx (globals.css already sets it on html/body via CSS but Tailwind class ensures it applies before CSS loads). Closes #396, #399, #400, #401 Co-authored-by: Ajit Pratap Singh <ajitpratapsingh@Ajits-Mac-mini-2655.local> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
diff --git a/website/src/app/docs/[...slug]/page.tsx b/website/src/app/docs/[...slug]/page.tsx
@@ -105,7 +105,7 @@ export default async function DocPage({ params }: PageProps) {
       {/* Main content */}
       <main className="min-w-0 flex-1 px-6 py-10 lg:px-12">
         {/* Breadcrumbs */}
-        <nav aria-label="Breadcrumb" className="mb-6 text-sm text-zinc-500">
+        <nav aria-label="Breadcrumb" className="mb-6 text-sm text-zinc-300">
           <ol className="flex items-center gap-2">
             <li>
               <Link href="/docs" className="hover:text-white transition-colors">
diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -51,7 +51,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className={`${instrumentSans.variable} ${jetbrainsMono.variable}`}>
-      <body className="font-sans">
+      <body className="font-sans overflow-x-hidden">
         <a
           href="#main-content"
           className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-black focus:shadow-lg focus:outline-none"
diff --git a/website/src/components/home/FeatureGrid.tsx b/website/src/components/home/FeatureGrid.tsx
@@ -63,7 +63,7 @@ export function FeatureGrid() {
                   {icons[feature.icon]}
                 </div>
                 <h3 className="text-lg font-semibold text-white mb-1">{feature.title}</h3>
-                <p className="text-sm text-zinc-400">{feature.description}</p>
+                <p className="text-sm text-zinc-300">{feature.description}</p>
               </GlassCard>
             </FadeIn>
           ))}
diff --git a/website/src/components/home/Hero.tsx b/website/src/components/home/Hero.tsx
@@ -131,7 +131,12 @@ export function Hero() {
                     <span className="text-xs text-zinc-500 font-mono ml-2">query.sql</span>
                   </div>
                   <div className="relative">
-                    <pre className="p-4 text-[13px] leading-relaxed font-mono text-zinc-300 overflow-x-auto max-h-[320px]">
+                    <pre
+                      tabIndex={0}
+                      role="region"
+                      aria-label="SQL query input"
+                      className="p-4 text-[13px] leading-relaxed font-mono text-zinc-300 overflow-x-auto max-h-[320px] focus:outline-none focus:ring-2 focus:ring-accent-indigo/50"
+                    >
                       <code>{SAMPLE_SQL}</code>
                     </pre>
                     <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-zinc-950/60 to-transparent pointer-events-none md:hidden" aria-hidden="true" />
@@ -144,7 +149,12 @@ export function Hero() {
                     <span className="text-xs text-zinc-500 font-mono">AST Output</span>
                     <span className="ml-auto text-[10px] text-emerald-400/70 font-mono">parsed in &lt;1ms</span>
                   </div>
-                  <pre className="p-4 text-[13px] leading-relaxed font-mono text-zinc-400 overflow-x-auto max-h-[320px]">
+                  <pre
+                    tabIndex={0}
+                    role="region"
+                    aria-label="AST output"
+                    className="p-4 text-[13px] leading-relaxed font-mono text-zinc-400 overflow-x-auto max-h-[320px] focus:outline-none focus:ring-2 focus:ring-accent-indigo/50"
+                  >
                     <code>{SAMPLE_AST}</code>
                   </pre>
                 </div>
diff --git a/website/src/components/home/McpSection.tsx b/website/src/components/home/McpSection.tsx
@@ -22,7 +22,7 @@ export function McpSection() {
           <h2 className="text-3xl font-bold text-white mb-4">
             AI-Ready SQL Tools
           </h2>
-          <p className="text-zinc-400 mb-10 max-w-xl mx-auto">
+          <p className="text-zinc-300 mb-10 max-w-xl mx-auto">
             Connect 7 SQL tools to Claude, Cursor, or any MCP client — no installation, no API key.
           </p>
         </FadeIn>
diff --git a/website/src/components/home/StatsBar.tsx b/website/src/components/home/StatsBar.tsx
@@ -15,17 +15,17 @@ export function StatsBar() {
   return (
     <section className="py-20">
       <div className="max-w-6xl mx-auto px-4">
-        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 md:gap-8 justify-items-center">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 md:gap-8">
           {stats.map((stat, i) => (
             <FadeIn key={stat.label} delay={i * 0.1}>
-              <GlassCard className="p-6 text-center min-w-[140px]">
+              <GlassCard className="p-6 text-center w-full">
                 <div className="flex items-baseline justify-center gap-0.5">
                   {stat.prefix && (
                     <span className={`text-4xl font-bold ${stat.color}`}>{stat.prefix}</span>
                   )}
                   <AnimatedCounter value={stat.value} suffix={stat.suffix} color={stat.color} />
                 </div>
-                <p className="text-sm text-zinc-400 mt-1">{stat.label}</p>
+                <p className="text-sm text-zinc-300 mt-1">{stat.label}</p>
               </GlassCard>
             </FadeIn>
           ))}
diff --git a/website/src/components/home/VscodeSection.tsx b/website/src/components/home/VscodeSection.tsx
@@ -15,7 +15,7 @@ export function VscodeSection() {
               <h2 className="text-3xl font-bold text-white mb-4">
                 IDE Integration
               </h2>
-              <p className="text-zinc-400 mb-6 max-w-md">
+              <p className="text-zinc-300 mb-6 max-w-md">
                 Real-time SQL validation, formatting, and linting in VS Code. Catch errors as you type with full multi-dialect support.
               </p>
               <Button
diff --git a/website/src/components/layout/Footer.tsx b/website/src/components/layout/Footer.tsx
@@ -41,7 +41,7 @@ export function Footer() {
                 <Image src="/images/logo.webp" alt="" width={28} height={28} />
                 <span className="text-lg font-semibold text-white">GoSQLX</span>
               </Link>
-              <p className="mt-3 text-sm text-zinc-400 max-w-xs">
+              <p className="mt-3 text-sm text-zinc-300 max-w-xs">
                 Production-ready SQL parsing SDK for Go. Zero-copy, thread-safe, multi-dialect.
               </p>
             </div>
@@ -58,14 +58,14 @@ export function Footer() {
                           href={link.href}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors duration-200"
+                          className="text-sm text-zinc-300 hover:text-zinc-100 transition-colors duration-200"
                         >
                           {link.label}
                         </a>
                       ) : (
                         <Link
                           href={link.href}
-                          className="text-sm text-zinc-400 hover:text-zinc-100 transition-colors duration-200"
+                          className="text-sm text-zinc-300 hover:text-zinc-100 transition-colors duration-200"
                         >
                           {link.label}
                         </Link>
@@ -78,7 +78,7 @@ export function Footer() {
           </div>
 
           <div className="mt-12 pt-8 border-t border-white/[0.06] text-center">
-            <p className="text-sm text-zinc-400">
+            <p className="text-sm text-zinc-300">
               Built with love by the GoSQLX community &middot; &copy; {new Date().getFullYear()} GoSQLX
             </p>
           </div>
