From 73d816522f1ff28358f64ed71b9c1dcf712cf94a Mon Sep 17 00:00:00 2001
From: Sameer Chore <sameerchore5@gmail.com>
Date: Thu, 17 Sep 2026 22:20:04 +0530
Subject: [PATCH 1/5] config section imorvement with same component height only
 chnaged the layout as it more readable now

Signed-off-by: Sameer Chore <sameerchore5@gmail.com>
---
 components/HomePage/ConfigSection/index.jsx   |   5 +-
 .../HomePage/ConfigSection/index.module.css   | 103 +++++++++++++-----
 2 files changed, 79 insertions(+), 29 deletions(-)

diff --git a/components/HomePage/ConfigSection/index.jsx b/components/HomePage/ConfigSection/index.jsx
index ce988eed..1588af58 100644
--- a/components/HomePage/ConfigSection/index.jsx
+++ b/components/HomePage/ConfigSection/index.jsx
@@ -23,8 +23,6 @@ export default ({ children }) => {
         </div>
 
         <div className={styles.configGrid}>
-          {/* rendering the code block described at root index.md*/}
-          {children}
           <div className={styles.features}>
             <h3 className={styles.featuresTitle}>Loaders for any input</h3>
             <p className={styles.featuresText}>
@@ -51,6 +49,9 @@ export default ({ children }) => {
               ))}
             </ul>
           </div>
+
+          {/* rendering the code block described at root index.md*/}
+          <div className={styles.codePanel}>{children}</div>
         </div>
       </div>
     </section>
diff --git a/components/HomePage/ConfigSection/index.module.css b/components/HomePage/ConfigSection/index.module.css
index be07719a..2a4abe44 100644
--- a/components/HomePage/ConfigSection/index.module.css
+++ b/components/HomePage/ConfigSection/index.module.css
@@ -4,11 +4,14 @@
   @apply flex
     justify-center
     w-full
-    py-20
-    border-neutral-200
-    bg-neutral-100
-    dark:border-neutral-800
-    dark:bg-[#070c13];
+    border-y
+    border-[#e2e8f0]
+    bg-[#f8fafc]
+    py-24
+    transition-colors
+    duration-200
+    dark:border-[#334155]
+    dark:bg-[#0f172a];
 }
 
 .container {
@@ -16,7 +19,7 @@
     w-[80%]
     max-w-7xl
     flex-col
-    gap-3;
+    gap-10;
 }
 
 .configHeader {
@@ -26,30 +29,43 @@
 }
 
 .preTitle {
-  @apply mb-4
+  @apply mb-8
     flex
     items-center
-    justify-center
-    text-[0.85rem]
-    font-normal
+    gap-3
+    text-[0.72rem]
+    font-semibold
     uppercase
-    tracking-wider
-    text-blue-700
-    dark:text-blue-500
-    lg:justify-start;
+    tracking-[0.18em]
+    text-blue-600
+    before:block
+    before:h-px
+    before:w-8
+    before:bg-blue-600
+    dark:text-blue-400
+    dark:before:bg-blue-400;
 }
 
 .title {
   @apply text-4xl
-    mb-4;
+    mb-6
+    max-w-2xl
+    font-serif
+    font-semibold
+    leading-[0.98]
+    tracking-tight
+    text-[#0f172a]
+    md:text-5xl
+    dark:text-[#f8fafc];
 }
 
 .subtext {
-  @apply mb-8
+  @apply mb-0
+    max-w-xl
     text-lg
     leading-relaxed
-    text-neutral-800
-    dark:text-neutral-500;
+    text-[#334155]
+    dark:text-[#cbd5e1];
 }
 
 .configGrid {
@@ -57,9 +73,9 @@
     w-full
     flex-col
     items-start
-    gap-12
+    gap-14
     lg:flex-row
-    lg:items-start;
+    lg:items-center;
 }
 
 .configGrid > * {
@@ -68,6 +84,33 @@
     lg:flex-1;
 }
 
+.codePanel {
+  @apply overflow-hidden
+    rounded-xl
+    border
+    border-[#cbd5e1]
+    bg-white
+    p-2
+    shadow-sm
+    transition-colors
+    duration-200
+    dark:border-[#334155]
+    dark:bg-[#020617]
+    dark:shadow-[0_0_32px_rgba(30,64,175,0.12)];
+}
+
+.codePanel > * {
+  @apply !m-0
+    !w-full
+    !max-w-none
+    rounded-lg;
+}
+
+.codePanel pre,
+.codePanel code {
+  @apply font-mono;
+}
+
 .configGrid code {
   align-content: start;
   min-height: 11lh;
@@ -76,23 +119,29 @@
 .features {
   @apply flex
     flex-1
-    flex-col;
+    flex-col
+    border-l-2
+    border-blue-500
+    pl-5
+    dark:border-blue-400;
 }
 
 .featuresTitle {
   @apply mb-4
     text-2xl
     font-normal
-    text-neutral-900
-    dark:text-white;
+    font-serif
+    font-semibold
+    text-[#0f172a]
+    dark:text-[#f8fafc];
 }
 
 .featuresText {
   @apply mb-4
     text-base
     leading-relaxed
-    text-neutral-800
-    dark:text-neutral-400;
+    text-[#475569]
+    dark:text-[#94a3b8];
 }
 
 .checkList {
@@ -107,8 +156,8 @@
     gap-3
     text-sm
     font-medium
-    text-neutral-800
-    dark:text-neutral-300;
+    text-[#1e293b]
+    dark:text-[#e2e8f0];
 }
 
 .checkIcon {

From 7ac0fcad32d0c342afd132104d8e1a2fb6d68123 Mon Sep 17 00:00:00 2001
From: Sameer Chore <sameerchore5@gmail.com>
Date: Thu, 17 Sep 2026 22:31:05 +0530
Subject: [PATCH 2/5] kept bg of config as previous bg

Signed-off-by: Sameer Chore <sameerchore5@gmail.com>
---
 components/HomePage/ConfigSection/index.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/HomePage/ConfigSection/index.module.css b/components/HomePage/ConfigSection/index.module.css
index 2a4abe44..9176dd57 100644
--- a/components/HomePage/ConfigSection/index.module.css
+++ b/components/HomePage/ConfigSection/index.module.css
@@ -11,7 +11,7 @@
     transition-colors
     duration-200
     dark:border-[#334155]
-    dark:bg-[#0f172a];
+    dark:bg-[#070c13];
 }
 
 .container {

From c209182b8d87c41dc32200a25d06f7d2b00f04c6 Mon Sep 17 00:00:00 2001
From: Sameer Chore <sameerchore5@gmail.com>
Date: Fri, 18 Sep 2026 16:15:38 +0530
Subject: [PATCH 3/5] refactor(home): clean up landing page components

Signed-off-by: Sameer Chore <sameerchore5@gmail.com>
---
 components/HomePage/ConfigSection/index.jsx   | 77 +++++++++---------
 .../HomePage/ConfigSection/index.module.css   | 79 +++++++++++--------
 components/HomePage/FeaturesSection/index.jsx |  4 +-
 .../HomePage/FeaturesSection/index.module.css | 27 +++++--
 components/HomePage/Hero/index.jsx            |  1 -
 components/HomePage/Hero/index.module.css     | 73 +++++++++++------
 6 files changed, 155 insertions(+), 106 deletions(-)

diff --git a/components/HomePage/ConfigSection/index.jsx b/components/HomePage/ConfigSection/index.jsx
index 1588af58..75a8b795 100644
--- a/components/HomePage/ConfigSection/index.jsx
+++ b/components/HomePage/ConfigSection/index.jsx
@@ -11,46 +11,51 @@ export default ({ children }) => {
   return (
     <section className={styles.configSection}>
       <div className={styles.container}>
-        <div className={styles.configHeader}>
-          <p className={styles.preTitle}>CONFIGURATION</p>
-          <h2 className={styles.title}>
-            Sensible defaults. Configurable when you need it.
-          </h2>
-          <p className={styles.subtext}>
-            A single config file is enough for most projects. Compose loaders to
-            transform any input; reach for plugins when behavior is non-trivial.
-          </p>
-        </div>
-
         <div className={styles.configGrid}>
-          <div className={styles.features}>
-            <h3 className={styles.featuresTitle}>Loaders for any input</h3>
-            <p className={styles.featuresText}>
-              Through loaders, modules can be CommonJS, AMD, ES6 modules, CSS,
-              Images, JSON, Coffeescript, LESS — and your custom stuff.
-            </p>
+          <div className={styles.copyColumn}>
+            <div className={styles.configHeader}>
+              <p className={styles.preTitle}>CONFIGURATION</p>
+              <h2 className={styles.title}>
+                Sensible defaults.
+                <br />
+                Configurable when you need it.
+              </h2>
+              <p className={styles.subtext}>
+                A single config file is enough for most projects. Compose
+                loaders and transforms around any input, then reach for plugins
+                when your build needs more control.
+              </p>
+            </div>
+
+            <div className={styles.features}>
+              <h3 className={styles.featuresTitle}>Loaders for any input</h3>
+              <p className={styles.featuresText}>
+                From CommonJS and ES modules to CSS, images, JSON, and custom
+                assets—webpack turns source files into a coherent build
+                pipeline.
+              </p>
 
-            <ul className={styles.checkList}>
-              {configFeatures.map((feature, index) => (
-                <li key={index} className={styles.checkItem}>
-                  <svg
-                    className={styles.checkIcon}
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                  {feature}
-                </li>
-              ))}
-            </ul>
+              <ul className={styles.checkList}>
+                {configFeatures.map(feature => (
+                  <li key={feature} className={styles.checkItem}>
+                    <svg
+                      className={styles.checkIcon}
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
           </div>
 
-          {/* rendering the code block described at root index.md*/}
           <div className={styles.codePanel}>{children}</div>
         </div>
       </div>
diff --git a/components/HomePage/ConfigSection/index.module.css b/components/HomePage/ConfigSection/index.module.css
index 9176dd57..6f151180 100644
--- a/components/HomePage/ConfigSection/index.module.css
+++ b/components/HomePage/ConfigSection/index.module.css
@@ -2,34 +2,35 @@
 
 .configSection {
   @apply flex
-    justify-center
     w-full
-    border-y
-    border-[#e2e8f0]
+    justify-center
     bg-[#f8fafc]
-    py-24
-    transition-colors
-    duration-200
-    dark:border-[#334155]
+    py-21
     dark:bg-[#070c13];
 }
 
 .container {
   @apply flex
-    w-[80%]
+    w-[84%]
     max-w-7xl
-    flex-col
-    gap-10;
+    flex-col;
+}
+
+.copyColumn {
+  @apply contents;
 }
 
 .configHeader {
   @apply w-full
-    max-w-xl
-    text-left;
+    order-1
+    max-w-[34rem]
+    text-left
+    lg:col-start-1
+    lg:row-start-1;
 }
 
 .preTitle {
-  @apply mb-8
+  @apply mb-9
     flex
     items-center
     gap-3
@@ -47,21 +48,20 @@
 }
 
 .title {
-  @apply text-4xl
-    mb-6
+  @apply mb-7
     max-w-2xl
-    font-serif
     font-semibold
     leading-[0.98]
     tracking-tight
     text-[#0f172a]
-    md:text-5xl
     dark:text-[#f8fafc];
+
+  font-size: 2.2rem;
 }
 
 .subtext {
   @apply mb-0
-    max-w-xl
+    max-w-[32rem]
     text-lg
     leading-relaxed
     text-[#334155]
@@ -69,31 +69,35 @@
 }
 
 .configGrid {
-  @apply flex
+  @apply grid
     w-full
-    flex-col
-    items-start
-    gap-14
-    lg:flex-row
-    lg:items-center;
+    grid-cols-1
+    items-center
+    gap-12
+    lg:grid-cols-2
+    lg:gap-16;
 }
 
 .configGrid > * {
   @apply w-full
-    min-w-0
-    lg:flex-1;
+    min-w-0;
 }
 
 .codePanel {
-  @apply overflow-hidden
+  @apply w-full
+    order-2
+    max-w-[32rem]
+    justify-self-start
+    lg:col-start-2
+    lg:row-start-1
+    lg:row-span-2
+    lg:justify-self-end
+    overflow-hidden
     rounded-xl
     border
     border-[#cbd5e1]
     bg-white
-    p-2
     shadow-sm
-    transition-colors
-    duration-200
     dark:border-[#334155]
     dark:bg-[#020617]
     dark:shadow-[0_0_32px_rgba(30,64,175,0.12)];
@@ -111,6 +115,11 @@
   @apply font-mono;
 }
 
+.codePanel :global(is-land[data-island-name='CodeBox']) > div {
+  @apply rounded-none
+    border-0;
+}
+
 .configGrid code {
   align-content: start;
   min-height: 11lh;
@@ -118,19 +127,19 @@
 
 .features {
   @apply flex
-    flex-1
+    order-3
     flex-col
     border-l-2
     border-blue-500
     pl-5
-    dark:border-blue-400;
+    dark:border-blue-400
+    lg:col-start-1
+    lg:row-start-2;
 }
 
 .featuresTitle {
-  @apply mb-4
+  @apply mb-6
     text-2xl
-    font-normal
-    font-serif
     font-semibold
     text-[#0f172a]
     dark:text-[#f8fafc];
diff --git a/components/HomePage/FeaturesSection/index.jsx b/components/HomePage/FeaturesSection/index.jsx
index db2dca6d..44b6b7eb 100644
--- a/components/HomePage/FeaturesSection/index.jsx
+++ b/components/HomePage/FeaturesSection/index.jsx
@@ -61,8 +61,8 @@ export default () => {
         </div>
 
         <div className={styles.gridContainer}>
-          {Features.map((feature, index) => (
-            <div key={index} className={styles.card}>
+          {Features.map(feature => (
+            <div key={feature.title} className={styles.card}>
               <div className={styles.iconWrapper}>{feature.icon}</div>
               <h3 className={styles.cardTitle}>{feature.title}</h3>
               <p className={styles.cardDesc}>{feature.description}</p>
diff --git a/components/HomePage/FeaturesSection/index.module.css b/components/HomePage/FeaturesSection/index.module.css
index f96ca7ad..32a49d28 100644
--- a/components/HomePage/FeaturesSection/index.module.css
+++ b/components/HomePage/FeaturesSection/index.module.css
@@ -26,19 +26,30 @@
   @apply mb-4
     flex
     items-center
-    justify-center
-    text-[0.85rem]
-    font-normal
+    justify-start
+    gap-3
+    text-[0.72rem]
+    font-semibold
     uppercase
-    tracking-wider
+    tracking-[0.18em]
     text-blue-600
-    dark:text-blue-500
-    lg:justify-start;
+    before:block
+    before:h-px
+    before:w-8
+    before:bg-blue-600
+    dark:text-blue-400
+    dark:before:bg-blue-400;
 }
 
 .title {
-  @apply text-4xl
-    mb-4;
+  @apply mb-4
+    max-w-2xl
+    text-[2.2rem]
+    font-semibold
+    leading-[1.4]
+    tracking-tight
+    text-[#32434a]
+    dark:text-[#f8fafc];
 }
 
 .subtext {
diff --git a/components/HomePage/Hero/index.jsx b/components/HomePage/Hero/index.jsx
index 667f0608..177e5b8f 100644
--- a/components/HomePage/Hero/index.jsx
+++ b/components/HomePage/Hero/index.jsx
@@ -20,7 +20,6 @@ export default ({ children }) => {
               splitting allows for loading parts of the application on demand —
               designed for modern JavaScript apps.
             </p>
-            {/* rendering the code block described at root index.md*/}
             <div className={styles.codeWrapper}>{children}</div>
 
             <div className={styles.actions}>
diff --git a/components/HomePage/Hero/index.module.css b/components/HomePage/Hero/index.module.css
index ac780b9a..4366d0e6 100644
--- a/components/HomePage/Hero/index.module.css
+++ b/components/HomePage/Hero/index.module.css
@@ -18,7 +18,7 @@
 }
 
 .webpack {
-  @apply pb-20
+  @apply pb-18
     flex
     max-w-6xl
     w-[75%]
@@ -28,14 +28,17 @@
     gap-16
     text-center
     lg:flex-row
-    lg:gap-10
+    lg:gap-5
     lg:text-left;
 }
 
 .description {
-  @apply w-full
+  @apply flex
+    flex-col
+    w-full
     max-w-full
     flex-1
+    gap-5
     lg:max-w-[520px];
 }
 
@@ -44,35 +47,36 @@
     flex
     items-center
     justify-center
-    text-[0.85rem]
-    font-normal
+    gap-2
+    text-[0.8rem]
+    font-semibold
     uppercase
-    tracking-wider
+    tracking-[0.16em]
     text-blue-600
     dark:text-blue-500
     lg:justify-start;
 }
 
 .dot {
-  @apply mr-2
-    inline-block
-    h-1.5
-    w-1.5
-    rounded-full
+  @apply inline-block
+    h-px
+    w-6
     bg-blue-600
     dark:bg-blue-500;
 }
 
 .title {
   @apply mb-2
-    font-normal
-    text-5xl
-    leading-[1.1]
-    md:text-6xl;
+    text-[3.5rem]
+    font-semibold
+    leading-none
+    tracking-tight
+    md:text-[3rem];
 }
 
 .highlight {
-  @apply text-blue-600
+  @apply font-semibold
+    text-blue-600
     dark:text-blue-500;
 }
 
@@ -176,19 +180,40 @@
 }
 
 .stats {
-  @apply flex
+  @apply grid
+    grid-cols-2
     w-[90%]
     max-w-350
-    flex-col
     items-center
     justify-center
-    gap-6
-    py-6
+    gap-0
+    py-3
     text-center
-    dark:border-neutral-800
-    lg:flex-row
-    lg:justify-around
-    lg:gap-0;
+    md:grid-cols-4;
+}
+
+.statItem {
+  @apply w-full
+    py-3;
+}
+
+.statItem:nth-child(even) {
+  border-left: 1px solid var(--color-neutral-200);
+}
+
+.statItem:nth-child(n + 3) {
+  border-top: 1px solid var(--color-neutral-200);
+}
+
+@media (min-width: 48rem) {
+  .statItem:nth-child(n + 3) {
+    border-top: 0;
+  }
+}
+
+:global([data-theme='dark']) .statItem:nth-child(even),
+:global([data-theme='dark']) .statItem:nth-child(n + 3) {
+  border-color: var(--color-neutral-800);
 }
 
 .statItem h2 {

From ed16ee8115f629fd937fff2be876618090ad29f4 Mon Sep 17 00:00:00 2001
From: Sameer Chore <sameerchore5@gmail.com>
Date: Fri, 18 Sep 2026 17:29:54 +0530
Subject: [PATCH 4/5] fix(home): restore desktop stats dividers

Signed-off-by: Sameer Chore <sameerchore5@gmail.com>
---
 components/HomePage/Hero/index.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/HomePage/Hero/index.module.css b/components/HomePage/Hero/index.module.css
index 4366d0e6..1da5805a 100644
--- a/components/HomePage/Hero/index.module.css
+++ b/components/HomePage/Hero/index.module.css
@@ -206,6 +206,10 @@
 }
 
 @media (min-width: 48rem) {
+  .statItem:nth-child(n + 2) {
+    border-left: 1px solid var(--color-neutral-200);
+  }
+
   .statItem:nth-child(n + 3) {
     border-top: 0;
   }

From 47168aeb3f52a0e6443e39d19371503882606502 Mon Sep 17 00:00:00 2001
From: Sameer Chore <sameerchore5@gmail.com>
Date: Fri, 18 Sep 2026 18:17:40 +0530
Subject: [PATCH 5/5] chore: retry Vercel preview deployment

Signed-off-by: Sameer Chore <sameerchore5@gmail.com>