Fix mobile responsive issues across all landing page components

Comprehensive mobile optimization for screens from 320px to 768px:

**HeroCodePreview:**
- Reduced terminal title margin from 4rem to 2rem to prevent layout issues
- Added horizontal overflow handling for code blocks
- Added 768px breakpoint: smaller fonts, reduced padding
- Added 480px breakpoint: compact terminal header, smaller buttons (10px)

**CodeShowcase:**
- Added horizontal padding to section (4rem 1rem)
- Enabled smooth scrolling for tabs on mobile (-webkit-overflow-scrolling)
- Made tabs scrollable on mobile (nowrap at 768px)
- Added 480px breakpoint: compact layout, equal-width tabs, smaller fonts
- Added overflow-x handling for code blocks

**FeatureGrid:**
- Added horizontal padding to prevent edge-to-edge layout
- Enhanced 768px breakpoint with better spacing
- Added 480px breakpoint: reduced padding, smaller fonts, compact cards

**QuickStartSteps:**
- Added section padding for better mobile layout
- Enhanced 768px breakpoint: smaller copy button, better spacing
- Improved 480px breakpoint: more compact design, smaller fonts/spacing

**GitHubStats:**
- Added 480px breakpoint for ultra-small screens
- Reduced stat sizes and gaps for better mobile display

**Landing Page (index.tsx):**
- Improved badge wrapping with flex alignment
- Added max-width to badge images to prevent overflow
- Enhanced 480px breakpoint: reduced padding/gaps throughout
- Smaller badge images (18px) on tiny screens

All components now render properly on mobile devices without:
- Horizontal overflow
- Text too large for viewport
- Buttons/tabs too small to tap
- Excessive padding wasting screen space

Author: claude

src/components/CodeShowcase/styles.module.css

@@ -1,5 +1,5 @@
 .showcaseSection {
-  padding: 4rem 0;
+  padding: 4rem 1rem;
   background: var(--ifm-background-surface-color);
 }
 
@@ -36,6 +36,7 @@
   border-bottom: 2px solid var(--ifm-color-emphasis-200);
   overflow-x: auto;
   flex-wrap: wrap;
+  -webkit-overflow-scrolling: touch;
 }
 
 .tab {
@@ -123,6 +124,7 @@
 .outputBlock pre {
   margin: 0 !important;
   border-radius: 0 !important;
+  overflow-x: auto !important;
 }
 
 @keyframes fadeIn {
@@ -137,20 +139,82 @@
 }
 
 @media screen and (max-width: 768px) {
+  .showcaseSection {
+    padding: 3rem 1rem;
+  }
+
   .showcaseHeader h2 {
     font-size: 2rem;
   }
 
   .showcaseSubtitle {
     font-size: 1rem;
+    padding: 0 1rem;
   }
 
   .tabs {
     gap: 0.25rem;
+    flex-wrap: nowrap;
   }
 
   .tab {
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
+    min-width: fit-content;
+  }
+
+  .exampleDescription {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .showcaseSection {
+    padding: 2rem 0.75rem;
+  }
+
+  .showcaseHeader {
+    margin-bottom: 2rem;
+  }
+
+  .showcaseHeader h2 {
+    font-size: 1.75rem;
+  }
+
+  .showcaseSubtitle {
+    font-size: 0.95rem;
+  }
+
+  .tabs {
+    gap: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .tab {
+    padding: 0.625rem 0.75rem;
+    font-size: 0.8rem;
+    flex: 1;
+    min-width: auto;
+    text-align: center;
+  }
+
+  .exampleDescription {
+    font-size: 0.95rem;
+    margin-bottom: 1rem;
+  }
+
+  .codeOutputGrid {
+    gap: 1rem;
+  }
+
+  .codeBlockHeader {
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .codeBlock pre,
+  .outputBlock pre {
+    font-size: 0.8rem !important;
   }
 }

src/components/FeatureGrid/styles.module.css

@@ -1,5 +1,5 @@
 .featureSection {
-  padding: 4rem 0;
+  padding: 4rem 1rem;
   background: var(--ifm-background-color);
 }
 
@@ -111,6 +111,10 @@
 }
 
 @media screen and (max-width: 768px) {
+  .featureSection {
+    padding: 3rem 1rem;
+  }
+
   .grid {
     grid-template-columns: 1fr;
     gap: 1.5rem;
@@ -122,6 +126,7 @@
 
   .subtitle {
     font-size: 1rem;
+    padding: 0 1rem;
   }
 
   .featureCard {
@@ -136,3 +141,49 @@
     font-size: 1.25rem;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .featureSection {
+    padding: 2rem 0.75rem;
+  }
+
+  .header {
+    margin-bottom: 2rem;
+  }
+
+  .header h2 {
+    font-size: 1.75rem;
+  }
+
+  .subtitle {
+    font-size: 0.95rem;
+  }
+
+  .grid {
+    gap: 1rem;
+  }
+
+  .featureCard {
+    padding: 1.25rem;
+  }
+
+  .featureIcon {
+    font-size: 2.25rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .featureTitle {
+    font-size: 1.125rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .featureDescription {
+    font-size: 0.9rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .featureCode pre {
+    font-size: 0.7rem !important;
+    padding: 0.625rem !important;
+  }
+}

src/components/GitHubStats/styles.module.css

@@ -44,3 +44,22 @@
     font-size: 0.75rem;
   }
 }
+
+@media screen and (max-width: 480px) {
+  .statsContainer {
+    gap: 0.75rem;
+    margin: 1rem 0;
+  }
+
+  .statItem {
+    gap: 0.125rem;
+  }
+
+  .statValue {
+    font-size: 1.25rem;
+  }
+
+  .statLabel {
+    font-size: 0.65rem;
+  }
+}

src/components/HeroCodePreview/styles.module.css

@@ -58,7 +58,7 @@
   font-family: var(--ifm-font-family-monospace);
   flex: 1;
   text-align: center;
-  margin-right: 4rem;
+  margin-right: 2rem;
 }
 
 .codeWrapper {
@@ -71,6 +71,7 @@
   margin: 0 !important;
   padding: 1.5rem !important;
   background: transparent !important;
+  overflow-x: auto !important;
 }
 
 @keyframes fadeInUp {
@@ -94,3 +95,44 @@
     max-height: 300px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .terminalTitle {
+    font-size: 0.75rem;
+    margin-right: 1rem;
+  }
+
+  .codeWrapper {
+    max-height: 250px;
+  }
+
+  .codeWrapper pre {
+    padding: 1rem !important;
+    font-size: 0.875rem !important;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .terminalHeader {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .terminalTitle {
+    font-size: 0.7rem;
+    margin-right: 0.5rem;
+  }
+
+  .terminalButton {
+    width: 10px;
+    height: 10px;
+  }
+
+  .codeWrapper {
+    max-height: 200px;
+  }
+
+  .codeWrapper pre {
+    padding: 0.75rem !important;
+    font-size: 0.8rem !important;
+  }
+}

src/components/QuickStartSteps/styles.module.css

@@ -1,5 +1,5 @@
 .quickStartSection {
-  padding: 4rem 0;
+  padding: 4rem 1rem;
   background: linear-gradient(180deg, var(--ifm-background-color) 0%, var(--ifm-background-surface-color) 100%);
 }
 
@@ -143,6 +143,23 @@
 }
 
 @media screen and (max-width: 768px) {
+  .quickStartSection {
+    padding: 3rem 1rem;
+  }
+
+  .header {
+    margin-bottom: 2rem;
+  }
+
+  .header h2 {
+    font-size: 2rem;
+  }
+
+  .subtitle {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+
   .step {
     gap: 1rem;
   }
@@ -161,36 +178,75 @@
     font-size: 1.25rem;
   }
 
-  .header h2 {
-    font-size: 2rem;
-  }
-
-  .subtitle {
-    font-size: 1rem;
-  }
-
   .stepConnector {
     left: 25px;
   }
+
+  .copyButton {
+    font-size: 0.75rem;
+    padding: 0.4rem 0.8rem;
+  }
 }
 
 @media screen and (max-width: 480px) {
+  .quickStartSection {
+    padding: 2rem 0.75rem;
+  }
+
+  .header h2 {
+    font-size: 1.75rem;
+  }
+
+  .subtitle {
+    font-size: 0.95rem;
+  }
+
   .step {
     flex-direction: column;
     gap: 1rem;
+    margin-bottom: 1.5rem;
   }
 
   .stepNumber {
+    width: 45px;
+    height: 45px;
+    font-size: 1.375rem;
     align-self: flex-start;
   }
 
+  .stepContent {
+    padding: 0.875rem;
+  }
+
+  .stepTitle {
+    font-size: 1.125rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .stepDescription {
+    font-size: 0.9rem;
+    margin-bottom: 0.75rem;
+  }
+
   .stepConnector {
     display: none;
   }
 
+  .copyButton {
+    font-size: 0.7rem;
+    padding: 0.375rem 0.75rem;
+    top: 0.375rem;
+    right: 0.375rem;
+  }
+
+  .codeContainer pre {
+    font-size: 0.8rem !important;
+  }
+
   .ctaContainer {
     flex-direction: column;
     align-items: stretch;
+    margin-top: 2rem;
   }
 
   .ctaContainer a {