refactor(home): improve homepage layout and responsive design

components/HomePage/ConfigSection/index.jsx

@@ -11,46 +11,52 @@ 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}>
-          {/* 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}>
-              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>
 
-            <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>
+            <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 => (
+                  <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>
+
+          <div className={styles.codePanel}>{children}</div>
         </div>
       </div>
     </section>

components/HomePage/ConfigSection/index.module.css

@@ -2,70 +2,122 @@
 
 .configSection {
   @apply flex
-    justify-center
     w-full
-    py-20
-    border-neutral-200
-    bg-neutral-100
-    dark:border-neutral-800
+    justify-center
+    bg-[#f8fafc]
+    py-21
     dark:bg-[#070c13];
 }
 
 .container {
   @apply flex
-    w-[80%]
+    w-[84%]
     max-w-7xl
-    flex-col
-    gap-3;
+    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-4
+  @apply mb-9
     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;
+  @apply mb-7
+    max-w-2xl
+    font-semibold
+    leading-[0.98]
+    tracking-tight
+    text-[#0f172a]
+    dark:text-[#f8fafc];
+
+  font-size: 2.2rem;
 }
 
 .subtext {
-  @apply mb-8
+  @apply mb-0
+    max-w-[32rem]
     text-lg
     leading-relaxed
-    text-neutral-800
-    dark:text-neutral-500;
+    text-[#334155]
+    dark:text-[#cbd5e1];
 }
 
 .configGrid {
-  @apply flex
+  @apply grid
     w-full
-    flex-col
-    items-start
+    grid-cols-1
+    items-center
     gap-12
-    lg:flex-row
-    lg:items-start;
+    lg:grid-cols-2
+    lg:gap-16;
 }
 
 .configGrid > * {
   @apply w-full
-    min-w-0
-    lg:flex-1;
+    min-w-0;
+}
+
+.codePanel {
+  @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
+    shadow-sm
+    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;
+}
+
+.codePanel :global(is-land[data-island-name='CodeBox']) > div {
+  @apply rounded-none
+    border-0;
 }
 
 .configGrid code {
@@ -75,24 +127,30 @@
 
 .features {
   @apply flex
-    flex-1
-    flex-col;
+    order-3
+    flex-col
+    border-l-2
+    border-blue-500
+    pl-5
+    dark:border-blue-400
+    lg:col-start-1
+    lg:row-start-2;
 }
 
 .featuresTitle {
-  @apply mb-4
+  @apply mb-6
     text-2xl
-    font-normal
-    text-neutral-900
-    dark:text-white;
+    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 +165,8 @@
     gap-3
     text-sm
     font-medium
-    text-neutral-800
-    dark:text-neutral-300;
+    text-[#1e293b]
+    dark:text-[#e2e8f0];
 }
 
 .checkIcon {

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>

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 {

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}>