From 100cae988c7e6f7d44c87eb370b031d5e6da35c3 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 7 Nov 2025 23:21:55 +0100
Subject: [PATCH] refactor: adjust network page styling and typography

- Changed heading levels from H3 to H4 in NetworkCapabilities for better hierarchy
- Updated PrimaryFeatures section with darker background and consistent border styling
- Removed text-lg class from paragraph for standard sizing
---
 src/pages/network/Features.tsx            |  1 +
 src/pages/network/NetworkCapabilities.tsx |  8 ++++----
 src/pages/network/PrimaryFeatures.tsx     | 14 ++++++++++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/pages/network/Features.tsx b/src/pages/network/Features.tsx
index 7a7fa29..b450cff 100644
--- a/src/pages/network/Features.tsx
+++ b/src/pages/network/Features.tsx
@@ -8,6 +8,7 @@ import { H2, P, H3, CT, CP, Eyebrow } from '@/components/Texts'
 export function Features() {
   return (
     <section className="w-full max-w-8xl mx-auto bg-transparent">
+      
 
       {/* ✅ Top spacer + full-width line */}
       <div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
diff --git a/src/pages/network/NetworkCapabilities.tsx b/src/pages/network/NetworkCapabilities.tsx
index c4fdca9..72ddf74 100644
--- a/src/pages/network/NetworkCapabilities.tsx
+++ b/src/pages/network/NetworkCapabilities.tsx
@@ -5,7 +5,7 @@ import {
   NoSymbolIcon,
 } from '@heroicons/react/24/solid'
 
-import { Eyebrow, H3, P } from '@/components/Texts'
+import { Eyebrow, H4, P } from '@/components/Texts'
 
 export function NetworkCapabilities() {
   return (
@@ -22,11 +22,11 @@ export function NetworkCapabilities() {
         <div className="max-w-xl ">
           <Eyebrow>WHAT IT ENABLES</Eyebrow>
 
-          <H3 className="mt-6 text-white">
+          <H4  className="mt-6 text-white">
             A Private Networking Layer for Everything You Run
-          </H3>
+          </H4>
 
-          <P className="mt-6 text-lg text-gray-200">
+          <P className="mt-6 text-gray-200">
             Mycelium Network is the backbone for secure, autonomous connectivity
             across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
           </P>
diff --git a/src/pages/network/PrimaryFeatures.tsx b/src/pages/network/PrimaryFeatures.tsx
index e8c02e3..1a55560 100644
--- a/src/pages/network/PrimaryFeatures.tsx
+++ b/src/pages/network/PrimaryFeatures.tsx
@@ -407,10 +407,13 @@ export function PrimaryFeatures() {
     <section
       id="howitworks"
       aria-label="Features for investing all your money"
-      className="bg-gray-900 py-20 sm:py-32"
+      className="bg-[#121212]"
     >
-      <Container>
-        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
+      {/* ✅ Top horizontal line with spacing */}
+      <div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
+      <div className="w-full border-t border-l border-r border-gray-800" />
+      <Container className="pt-12 border border-t-0 border-b-0 border-gray-800">
+        <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl ">
           <Eyebrow color="accent">How It Works</Eyebrow>
           <SectionHeader color="white" className="mt-2">
             How Mycelium Operates
@@ -425,9 +428,12 @@ export function PrimaryFeatures() {
       <div className="mt-16 md:hidden">
         <FeaturesMobile />
       </div>
-      <Container className="hidden md:mt-20 md:block">
+      <Container className="hidden pt-12 pb-12 md:block border border-t-0 border-b-0 border-gray-800">
         <FeaturesDesktop />
       </Container>
+       {/* ✅ bottom border + bottom spacer to match */}
+      <div className="w-full border-b border-gray-800" />
+      <div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
     </section>
   )
 }