diff --git a/src/components/CodeShowcase/styles.module.css b/src/components/CodeShowcase/styles.module.css
index 4b16f08..81672f1 100644
--- a/src/components/CodeShowcase/styles.module.css
+++ b/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,152 @@
 }
 
 @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;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .showcaseSection {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .showcaseHeader {
+    margin-bottom: 1.5rem;
+  }
+
+  .showcaseHeader h2 {
+    font-size: 1.5rem;
+  }
+
+  .showcaseSubtitle {
+    font-size: 0.875rem;
+    padding: 0 0.5rem;
+  }
+
+  .tabContainer {
+    max-width: 100%;
+    overflow: hidden;
+  }
+
+  .tabs {
+    gap: 0;
+    margin-bottom: 1.25rem;
+    flex-wrap: nowrap;
+    padding-bottom: 0.5rem;
+  }
+
+  .tab {
+    padding: 0.5rem 0.5rem;
+    font-size: 0.7rem;
+    flex: 1 1 auto;
+    min-width: 0;
+    text-align: center;
+    white-space: nowrap;
+  }
+
+  .exampleDescription {
+    font-size: 0.875rem;
+    margin-bottom: 0.875rem;
+    padding: 0 0.25rem;
+  }
+
+  .codeOutputGrid {
+    gap: 0.75rem;
+  }
+
+  .codeBlockHeader {
+    font-size: 0.7rem;
+    padding: 0.375rem 0.5rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .codeBlock,
+  .outputBlock {
+    overflow: hidden;
+  }
+
+  .codeBlock pre,
+  .outputBlock pre {
+    font-size: 0.7rem !important;
+    padding: 0.5rem !important;
+    overflow-x: auto !important;
   }
 }
diff --git a/src/components/FeatureGrid/styles.module.css b/src/components/FeatureGrid/styles.module.css
index 27ac552..138e17b 100644
--- a/src/components/FeatureGrid/styles.module.css
+++ b/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,98 @@
     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;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .featureSection {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .header {
+    margin-bottom: 1.5rem;
+  }
+
+  .header h2 {
+    font-size: 1.5rem;
+  }
+
+  .subtitle {
+    font-size: 0.875rem;
+    padding: 0 0.5rem;
+  }
+
+  .grid {
+    gap: 0.875rem;
+  }
+
+  .featureCard {
+    padding: 1rem;
+  }
+
+  .featureIcon {
+    font-size: 2rem;
+    margin-bottom: 0.625rem;
+  }
+
+  .featureTitle {
+    font-size: 1rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .featureDescription {
+    font-size: 0.85rem;
+    margin-bottom: 0.625rem;
+    line-height: 1.4;
+  }
+
+  .featureCode pre {
+    font-size: 0.65rem !important;
+    padding: 0.5rem !important;
+    overflow-x: auto !important;
+  }
+}
diff --git a/src/components/GitHubStats/styles.module.css b/src/components/GitHubStats/styles.module.css
index 7415797..a3a01c1 100644
--- a/src/components/GitHubStats/styles.module.css
+++ b/src/components/GitHubStats/styles.module.css
@@ -44,3 +44,41 @@
     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;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .statsContainer {
+    gap: 0.5rem;
+    margin: 0.75rem 0;
+  }
+
+  .statItem {
+    gap: 0.1rem;
+  }
+
+  .statValue {
+    font-size: 1.125rem;
+  }
+
+  .statLabel {
+    font-size: 0.6rem;
+  }
+}
diff --git a/src/components/HeroCodePreview/styles.module.css b/src/components/HeroCodePreview/styles.module.css
index cfc88d1..35a0f6a 100644
--- a/src/components/HeroCodePreview/styles.module.css
+++ b/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,85 @@
     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;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .codePreview {
+    max-width: calc(100vw - 1rem);
+    margin: 1.5rem 0;
+  }
+
+  .terminalHeader {
+    padding: 0.375rem 0.5rem;
+  }
+
+  .terminalTitle {
+    font-size: 0.65rem;
+    margin-right: 0.25rem;
+  }
+
+  .terminalButtons {
+    gap: 0.375rem;
+  }
+
+  .terminalButton {
+    width: 8px;
+    height: 8px;
+  }
+
+  .codeWrapper {
+    max-height: 180px;
+  }
+
+  .codeWrapper pre {
+    padding: 0.5rem !important;
+    font-size: 0.75rem !important;
+    word-break: break-all;
+    white-space: pre-wrap !important;
+  }
+
+  .codeWrapper pre code {
+    word-break: break-all;
+    white-space: pre-wrap !important;
+  }
+}
diff --git a/src/components/QuickStartSteps/styles.module.css b/src/components/QuickStartSteps/styles.module.css
index de36d46..00152e4 100644
--- a/src/components/QuickStartSteps/styles.module.css
+++ b/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,39 +178,150 @@
     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 {
     width: 100%;
   }
 }
+
+@media screen and (max-width: 360px) {
+  .quickStartSection {
+    padding: 1.5rem 0.5rem;
+  }
+
+  .header {
+    margin-bottom: 1.5rem;
+  }
+
+  .header h2 {
+    font-size: 1.5rem;
+  }
+
+  .subtitle {
+    font-size: 0.875rem;
+    padding: 0 0.5rem;
+  }
+
+  .stepsContainer {
+    max-width: 100%;
+  }
+
+  .step {
+    margin-bottom: 1.25rem;
+    gap: 0.75rem;
+  }
+
+  .stepNumber {
+    width: 40px;
+    height: 40px;
+    font-size: 1.25rem;
+  }
+
+  .stepContent {
+    padding: 0.75rem;
+  }
+
+  .stepTitle {
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .stepDescription {
+    font-size: 0.85rem;
+    margin-bottom: 0.625rem;
+    line-height: 1.4;
+  }
+
+  .copyButton {
+    font-size: 0.65rem;
+    padding: 0.3rem 0.6rem;
+    top: 0.25rem;
+    right: 0.25rem;
+  }
+
+  .codeContainer pre {
+    font-size: 0.7rem !important;
+    padding: 0.625rem !important;
+    overflow-x: auto !important;
+  }
+
+  .ctaContainer {
+    margin-top: 1.5rem;
+    gap: 0.5rem;
+  }
+
+  .ctaContainer a {
+    font-size: 0.9rem;
+    padding: 0.625rem 1rem;
+  }
+}
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index efa30bb..4f5ff1c 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -83,10 +83,17 @@
   gap: 1rem;
   flex-wrap: wrap;
   animation: fadeInDown 0.6s ease-out 0.3s backwards;
+  align-items: center;
+}
+
+.badges a {
+  display: inline-flex;
+  align-items: center;
 }
 
 .badges img {
   height: 20px;
+  max-width: 100%;
 }
 
 .heroCode {
@@ -179,6 +186,22 @@
 }
 
 @media screen and (max-width: 480px) {
+  .heroBanner {
+    padding: 1.5rem 0.75rem;
+  }
+
+  .heroContent {
+    gap: 2rem;
+  }
+
+  .heroText {
+    gap: 1rem;
+  }
+
+  .heroTitleContainer {
+    gap: 0.75rem;
+  }
+
   .heroLogo {
     width: 40px;
     height: 40px;
@@ -191,4 +214,67 @@
   .heroSubtitle {
     font-size: 1rem;
   }
+
+  .buttonGroup {
+    gap: 0.75rem;
+  }
+
+  .badges {
+    gap: 0.5rem;
+    font-size: 0.875rem;
+  }
+
+  .badges img {
+    height: 18px;
+  }
+}
+
+@media screen and (max-width: 360px) {
+  .heroBanner {
+    padding: 1.25rem 0.5rem;
+  }
+
+  .heroContent {
+    gap: 1.5rem;
+  }
+
+  .heroText {
+    gap: 0.875rem;
+  }
+
+  .heroTitleContainer {
+    gap: 0.5rem;
+  }
+
+  .heroLogo {
+    width: 36px;
+    height: 36px;
+  }
+
+  .heroTitle {
+    font-size: 1.75rem;
+    word-break: break-word;
+  }
+
+  .heroSubtitle {
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  .buttonGroup {
+    gap: 0.5rem;
+  }
+
+  .buttonGroup a {
+    font-size: 0.9rem;
+    padding: 0.625rem 1rem;
+  }
+
+  .badges {
+    gap: 0.375rem;
+  }
+
+  .badges img {
+    height: 16px;
+  }
 }