feat: add download snippet at home page

components/HomePage/Hero/index.jsx

@@ -1,7 +1,7 @@
 import styles from './index.module.css';
 import { version } from '#theme/config';
 import Logo from '../../Icons/Webpack';
-export default () => {
+export default ({ children }) => {
   return (
     <section className={styles.hero}>
       <div className={styles.webpackContainer}>
@@ -20,6 +20,8 @@ export default () => {
               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}>
               <a href="/guides/getting-started" className={styles.primaryBtn}>

components/HomePage/Hero/index.module.css

@@ -40,7 +40,7 @@
 }
 
 .preTitle {
-  @apply mb-4
+  @apply mb-2
     flex
     items-center
     justify-center
@@ -64,7 +64,7 @@
 }
 
 .title {
-  @apply mb-4
+  @apply mb-2
     font-normal
     text-5xl
     leading-[1.1]
@@ -77,13 +77,22 @@
 }
 
 .subtext {
-  @apply mb-8
+  @apply mb-6
     text-lg
     leading-relaxed
     text-neutral-800
     dark:text-neutral-500;
 }
 
+.codeWrapper {
+  @apply mb-8
+    w-full
+    max-w-[26rem]
+    mx-auto
+    lg:mx-0
+    text-left;
+}
+
 .actions {
   @apply flex
     items-center

layouts/Home/index.jsx

@@ -1,16 +1,14 @@
 import Footer from '../../components/Footer';
 import NavBar from '../../components/NavBar';
-import Hero from '../../components/HomePage/Hero';
 import FeaturesSection from '../../components/HomePage/FeaturesSection';
 import HomeSponsorSection from '../../components/HomePage/HomeSponsorSection';
-import ConfigSection from '../../components/HomePage/ConfigSection';
 
 export default ({ metadata, children }) => {
   return (
     <>
       <NavBar metadata={metadata} />
-      <Hero />
-      <ConfigSection>{children}</ConfigSection>
+      {/* rendering hero + configSection described at root index.md*/}
+      {children}
       <FeaturesSection />
       <HomeSponsorSection />
       <Footer />

pages/index.md

@@ -3,6 +3,32 @@ layout: home
 mdx: true
 ---
 
+<Hero>
+
+```bash displayName="npm"
+npm install webpack webpack-cli --save-dev
+```
+
+```bash displayName="yarn"
+yarn add webpack webpack-cli --dev
+```
+
+```bash displayName="pnpm"
+pnpm add webpack webpack-cli -D
+```
+
+```bash displayName="bun"
+bun add -d webpack webpack-cli
+```
+
+```bash displayName="deno"
+deno add npm:webpack npm:webpack-cli
+```
+
+</Hero>
+
+<ConfigSection>
+
 ```javascript displayName="webpack.config.js"
 const path = require('path');
 
@@ -44,3 +70,5 @@ const config: Configuration = {
 
 export default config;
 ```
+
+</ConfigSection>

scripts/html/doc-kit.config.mjs

@@ -82,6 +82,15 @@ export default {
       '#theme/Navigation': join(ROOT, 'components/NavBar.jsx'),
       '#theme/Footer': join(ROOT, 'components/Footer/index.jsx'),
       '#theme/Logo': join(ROOT, 'components/Icons/Webpack.jsx'),
+      '#theme/Home/Hero': join(ROOT, 'components/HomePage/Hero/index.jsx'),
+      '#theme/Home/ConfigSection': join(
+        ROOT,
+        'components/HomePage/ConfigSection/index.jsx'
+      ),
+    },
+    components: {
+      Hero: '#theme/Home/Hero',
+      ConfigSection: '#theme/Home/ConfigSection',
     },
     lightningcss: {
       resolver: {