Issue 24 Box on index page

Author: OStefan2001

public/css/app.css

@@ -614,11 +614,6 @@ html[data-theme="light"] .theme-toggle {
   gap: 18px;
 }
 
-.other-skeletons-grid {
-  grid-template-columns: repeat(2, 1fr);
-  max-width: 800px;
-}
-
 .card {
   background: var(--surface);
   border: 1px solid var(--border);
@@ -1003,6 +998,10 @@ footer {
 }
 
 @media (max-width: 700px) {
+  .wrap {
+    padding: 0 16px;
+  }
+
   .hero h1 {
     font-size: 32px;
   }

src/App/assets/scss/components/_custom.scss

@@ -148,17 +148,49 @@
             </div>
         </div>
     </section>
-
     <section>
+        <div class="wrap">
+            <div class="section-head">
+                <span class="eyebrow">Local Development</span>
+                <h2>Set up your workspace</h2>
+                <p>Get a production-like environment running on your machine in minutes, ready for building and testing before anything reaches your users.</p>
+            </div>
+
+            <div class="products-grid">
+
+                <div class="card" style="--accent:var(--brand-red)">
+                    <div class="card-top">
+                        <div><span class="kicker">Environment</span><h3>Development</h3></div>
+                    </div>
+                    <p class="desc">A controlled, safe, and efficient local workspace for building and testing applications before release. Runs AlmaLinux on Windows Subsystem for Linux (WSL2) for a RHEL-compatible, enterprise-grade setup, with an install script that pre-configures PHP, Apache, MariaDB, Git, Composer, Node.js, and phpMyAdmin - every essential tool, ready to go.</p>
+                    <div class="card-btns">
+                        <a class="btn btn-ghost btn-sm" href="https://github.com/dotkernel/development" target="_blank" rel="noopener">GitHub</a>
+                    </div>
+                </div>
+
+                <div class="card" style="--accent:var(--brand-red)">
+                    <div class="card-top">
+                        <div><span class="kicker">Environment . Coming soon</span><h3>DevBox</h3></div>
+                    </div>
+                    <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam quis nostrud exercitation.</p>
+                    <div class="card-btns">
+                        <span class="btn btn-ghost btn-sm" aria-disabled="true">Coming Soon</span>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </section>
+
+    <section style="background:var(--surface-2);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);">
         <div class="wrap">
             <div class="section-head">
                 <span class="eyebrow">Other skeletons</span>
                 <h2>For projects outside the platform</h2>
                 <p>Not every project needs a headless platform. These two skeletons stand on their own, outside the API/Admin/Queue bundle above.</p>
             </div>
 
-            <div class="products-grid other-skeletons-grid">
-
+            <div class="products-grid">
                 <div class="card" style="--accent:var(--brand-red)">
                     <div class="card-top">
                         <div><span class="kicker">Skeleton . Didactic</span><h3>Light</h3></div>