From 503fe2630324687fa6402a7dee8fe93ada51be2b Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 18 Nov 2025 12:23:16 +0100
Subject: [PATCH] refactor: improve Hero and NetworkDownload mobile
 responsiveness and layout

- Reduced Hero section bottom padding from pb-24 to pb-12 on mobile
- Added mt-8 top margin to Hero image container on mobile
- Hidden BackgroundIllustration on mobile using hidden md:block
- Removed fixed height from Hero image container and added flex centering
- Changed Hero image from w-auto to w-full for better mobile scaling
- Removed manual link and simplified NetworkDownload description text
- Reduced NetworkDownload gri
---
 src/pages/network/Hero.tsx            | 10 +++++-----
 src/pages/network/NetworkDownload.tsx | 14 +++-----------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/pages/network/Hero.tsx b/src/pages/network/Hero.tsx
index 62cd01b..b08e627 100644
--- a/src/pages/network/Hero.tsx
+++ b/src/pages/network/Hero.tsx
@@ -76,7 +76,7 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
 
 export function Hero() {
   return (
-    <div className="overflow-hidden pb-24 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
+    <div className="overflow-hidden pb-12 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
       <Container>
         <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
@@ -108,13 +108,13 @@ export function Hero() {
               </Button>
             </div>
           </div>
-          <div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
-            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
-            <div className="mx-auto h-[460px] max-w-[520px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
+          <div className="relative mt-8 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
+            <BackgroundIllustration className="hidden md:block absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
+            <div className="mx-auto max-w-[520px] flex items-center justify-center mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
               <img
                 src={phoneFrame}
                 alt="Mycelium application demo"
-                className="mx-auto w-auto max-w-[366px]"
+                className="mx-auto w-full max-w-[366px] h-auto"
                 width={366}
                 height={729}
               />
diff --git a/src/pages/network/NetworkDownload.tsx b/src/pages/network/NetworkDownload.tsx
index 85f77c9..587f084 100644
--- a/src/pages/network/NetworkDownload.tsx
+++ b/src/pages/network/NetworkDownload.tsx
@@ -7,7 +7,7 @@ import windowsIcon from '@/images/windows.svg'
 import androidIcon from '@/images/android.svg'
 import linuxIcon from '@/images/linux.svg'
 
-import { CT, CP } from '@/components/Texts'
+import { CT, CP, H3, P } from '@/components/Texts'
 
 const features = [
   {
@@ -64,19 +64,11 @@ export function NetworkDownload() {
             transition={{ duration: 0.5, delay: 0.2 }}
             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
-              href="https://threefold.info/mycelium_network/docs/"
-              className="font-semibold text-gray-900 underline transition-colors hover:text-cyan-500"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Read the manual.
-            </a>
+            Get Mycelium Network for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. 
           </motion.p>
         </div>
         <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 gap-y-16 md:grid-cols-2 lg:max-w-none lg:grid-cols-4">
+          <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}