feat: add network download section and update network page styling

- Created NetworkDownload component with platform-specific download cards for iOS, macOS, Windows, Android, and Linux
- Added hover effects and external links to app stores and GitHub releases
- Replaced NetworkUsecases with NetworkDownload in NetworkPage component order
- Renamed CloudPros to NetworkPros for consistency
- Updated NetworkPros styling from light theme to dark theme with improved contrast and hover states
- Change

src/pages/network/NetworkDownload.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+import appleIcon from '@/images/apple.svg'
+import windowsIcon from '@/images/windows.svg'
+import androidIcon from '@/images/android.svg'
+import linuxIcon from '@/images/linux.svg'
+
+import { H3, P, Eyebrow, CT, CP } from '@/components/Texts'
+
+const features = [
+  {
+    name: 'Download for iOS & MacOS',
+    description: 'Download Mycelium App from the Apple Store.',
+    href: 'https://apps.apple.com/us/app/mycelium-network/id6504277565',
+    icon: appleIcon,
+    alt: 'Apple logo',
+  },
+  {
+    name: 'Download for Windows',
+    description: 'Download the Mycelium App for Windows directly from its Github repository.',
+    href: 'https://github.com/threefoldtech/myceliumflut/releases',
+    icon: windowsIcon,
+    alt: 'Windows logo',
+  },
+  {
+    name: 'Download for Android',
+    description: 'Download Mycelium from the Google Play Store.',
+    href: 'https://play.google.com/store/apps/details?id=tech.threefold.mycelium&pli=1',
+    icon: androidIcon,
+    alt: 'Android logo',
+  },
+  {
+    name: 'Download for Linux',
+    description: 'Download the Mycelium binary for Linux directly from its Github repository.',
+    href: 'https://github.com/threefoldtech/mycelium/releases',
+    icon: linuxIcon,
+    alt: 'Linux logo',
+  },
+]
+
+export function NetworkDownload() {
+  return (
+   <section className="w-full max-w-8xl mx-auto bg-transparent">
+
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      <div className="w-full border border-l border-r border-gray-100" />
+      
+      <div className="mx-auto max-w-7xl px-6 lg:px-8 bg-white py-12 border border-t-0 border-b-0 border-gray-100">
+        <div className="mx-auto max-w-2xl lg:mx-0">
+          <motion.H3
+            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"
+          >
+            Download Mycelium Network
+          </motion.H3>
+          <motion.P
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            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>
+          </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">
+            {features.map((feature) => (
+              <div
+                key={feature.name}
+                className="flex flex-col rounded-lg border border-gray-100 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
+              >
+                <dt className="text-base font-semibold leading-7 text-gray-900">
+                  <div className="mb-6 flex h-10 w-10 items-center justify-center">
+                    <img src={feature.icon} alt={feature.alt} className="h-10 w-10" />
+                  </div>
+                  {feature.name}
+                </dt>
+                <dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600">
+                  <CP className="flex-auto mt-2">{feature.description}</CP>
+                  <CT className="mt-4">
+                    <a
+                      href={feature.href}
+                      className="text-sm font-semibold leading-6 text-cyan-500 transition-colors hover:text-cyan-400"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Download Now <span aria-hidden="true">→</span>
+                    </a>
+                  </CT>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+      {/* ✅ Bottom horizontal line with spacing */}
+      <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>
+  )
+}

src/pages/network/NetworkPage.tsx

@@ -5,8 +5,8 @@ import { PrimaryFeatures } from './PrimaryFeatures'
 import { SecondaryFeatures } from './SecondaryFeatures'
 import { CallToAction } from './CallToAction'
 import { NetworkCapabilities } from './NetworkCapabilities'
-import { NetworkUsecases } from './NetworkUsecases'
+import { NetworkDownload } from './NetworkDownload'
-import { CloudPros } from './NetworkPros'
+import { NetworkPros } from './NetworkPros'
 
 
 export default function NetworkPage() {
@@ -33,14 +33,14 @@ export default function NetworkPage() {
       </AnimatedSection>
 
       <AnimatedSection>
-        <CloudPros />
+        <NetworkPros />
       </AnimatedSection>
 
+
       <AnimatedSection>
-        <NetworkUsecases />
+        <NetworkDownload />
       </AnimatedSection>
 
-
       <AnimatedSection>
         <CallToAction />
       </AnimatedSection>

src/pages/network/NetworkPros.tsx

@@ -27,33 +27,34 @@ const highlights = [
   },
 ]
 
-export function CloudPros() {
+export function NetworkPros() {
   return (
-    <section className="relative w-full bg-[#FDFDFD] overflow-hidden">
+    <section className="bg-[#121212] w-full max-w-8xl mx-auto">
       {/* Top spacing line */}
-      <div className="max-w-7xl bg-[#FDFDFD] mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
+      <div className="max-w-7xl py-6 mx-auto border border-t-0 border-b-0 border-gray-800" />
-      <div className="w-full border-t border-l border-r border-gray-200" />
+      <div className="w-full border-t border-l border-r border-gray-800" />
 
-      <div className="bg-[#FDFDFD] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-200">
+      {/* Main framed content */}
+      <div className="bg-[#121212] w-full max-w-7xl mx-auto border border-t-0 border-b-0 border-gray-800">
         <div className="grid lg:grid-cols-4">
           {highlights.map((item) => (
             <div
               key={item.title}
-              className="group relative overflow-hidden border border-gray-200 bg-white p-8 transition hover:border-cyan-400/40 hover:bg-white"
+              className="group relative overflow-hidden border border-white/10 bg-white/4 p-8 backdrop-blur-sm transition hover:border-cyan-300/50 hover:bg-white/8"
             >
               {/* Hover glow */}
-              <div className="absolute inset-0 bg-linear-to-br from-cyan-200/0 via-cyan-100/20 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-500/0 via-white/5 to-cyan-300/20 opacity-0 transition group-hover:opacity-100" />
 
               <div className="relative">
-                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-600">
+                <Small className="text-xs uppercase tracking-[0.16em] text-cyan-200">
                   {item.label}
                 </Small>
 
-                <h3 className="mt-4 text-lg font-semibold leading-tight text-black">
+                <h3 className="mt-4 text-lg font-semibold text-white">
                   {item.title}
                 </h3>
 
-                <p className="mt-4 text-sm leading-relaxed text-gray-600">
+                <p className="mt-4 text-sm leading-relaxed text-gray-300">
                   {item.description}
                 </p>
               </div>
@@ -62,8 +63,9 @@ export function CloudPros() {
         </div>
       </div>
 
-      <div className="w-full border-b border-gray-200 bg-[#FDFDFD]" />
+      {/* Bottom spacing line */}
-      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
+      <div className="w-full border-b border-gray-800 bg-[#121212]" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800" />
     </section>
   )
 }