From e5ed88b67625299832bd901cc09422a68aea88b2 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 19 Nov 2025 12:56:36 +0100
Subject: [PATCH] refactor: update DevHub and DownloadHero layout with
 consistent borders and spacing

- Changed DevHub from div to section with max-w-8xl container
- Added top spacing divider with py-6 and gray-800 borders to DevHub
- Added top and side borders (border-t, border-l, border-r) to DevHub content area
- Changed DevHub background to #111111 with reduced padding (py-12)
- Added bottom border and spacing divider to DevHub matching NetworkDownload pattern
- Changed DownloadHero from div to section with i
---
 src/pages/download/DevHub.tsx       | 16 ++++++++++++----
 src/pages/download/DownloadHero.tsx | 19 ++++++++++++-------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/pages/download/DevHub.tsx b/src/pages/download/DevHub.tsx
index 2b63877..65a92b6 100644
--- a/src/pages/download/DevHub.tsx
+++ b/src/pages/download/DevHub.tsx
@@ -36,8 +36,12 @@ const features = [
 
 export function DevHub() {
   return (
-    <div className="bg-[#121212]  py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
+      {/* Top spacing + border */}
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
+
+      <div className="relative px-6 lg:px-6 py-12 bg-[#111111] border border-t-0 border-b-0 border-gray-800 max-w-7xl mx-auto">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">
             <h2 className="mb-2 text-base font-semibold leading-7 text-cyan-500">Get Started</h2>
@@ -63,7 +67,11 @@ export function DevHub() {
             ))}
           </dl>
         </div>
-      </div>
-    </div>
+        </div>
+
+      {/* Bottom horizontal line with spacing (match NetworkDownload) */}
+      <div className="w-full border-b  border-gray-800" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+    </section>
   )
 }
diff --git a/src/pages/download/DownloadHero.tsx b/src/pages/download/DownloadHero.tsx
index e4c8e35..a61d420 100644
--- a/src/pages/download/DownloadHero.tsx
+++ b/src/pages/download/DownloadHero.tsx
@@ -40,14 +40,14 @@ const features = [
 
 export function DownloadHero() {
   return (
-    <div className="py-16 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+    <section id="download" className="w-full max-w-8xl mx-auto bg-transparent">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8 bg-white pt-24 pb-12 border border-t-0 border-b-0 border-gray-100">
         <div className="mx-auto max-w-2xl lg:mx-0">
           <motion.h2
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            className="text-5xl font-medium tracking-tight text-gray-900 lg:text-6xl"
+            className="text-4xl font-medium tracking-tight text-gray-900 lg:text-5xl"
           >
             Download Mycelium Network
           </motion.h2>
@@ -55,7 +55,7 @@ export function DownloadHero() {
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.2 }}
-            className="mt-6 text-lg text-gray-600 lg:leading-8"
+            className="mt-8 text-lg text-gray-600 lg:leading-8"
           >
             Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
             <a
@@ -68,8 +68,9 @@ export function DownloadHero() {
             </a>
           </motion.p>
         </div>
-        <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
-          <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
+
+        <div className="mx-auto mt-8 max-w-2xl lg:mt-12 lg:max-w-none">
+          <dl className="grid max-w-xl grid-cols-1 gap-x-8 lg:gap-y-16 gap-y-8 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
             {features.map((feature) => (
               <div
                 key={feature.name}
@@ -99,6 +100,10 @@ export function DownloadHero() {
           </dl>
         </div>
       </div>
-    </div>
+
+      {/* Bottom horizontal line with spacing (match NetworkDownload) */}
+      <div className="w-full border-b  border-gray-100" />
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+    </section>
   )
 }