From 5f0c749f9427ab649c83e0b4c8ce06aeaf7dd570 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 6 Nov 2025 15:45:15 +0100
Subject: [PATCH] feat: add consistent border styling and improve layout
 spacing

- Applied border-gray-200 borders to main sections for visual consistency
- Restructured HomeTab component with full-width card grid layout
- Refined spacing and padding across hero, benefits, and hosting sections
---
 src/components/Header.tsx          |   4 +-
 src/pages/home/HomeAurora.tsx      |  29 ++++---
 src/pages/home/HomeBenefits.tsx    |   4 +-
 src/pages/home/HomeHosting.tsx     |  20 +++--
 src/pages/home/HomeTab.tsx         | 125 ++++++++++-------------------
 src/pages/home/archive/HomeNew.tsx |  51 ++++++++++++
 6 files changed, 124 insertions(+), 109 deletions(-)
 create mode 100644 src/pages/home/archive/HomeNew.tsx

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 70d29b1..dfa6042 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -27,8 +27,8 @@ export function Header() {
 
   return (
     <header className="bg-transparent">
-      <nav>
-                <Container className="flex bg-transparent justify-between py-4">
+      <nav className="border-b border-gray-200">
+        <Container className="flex bg-transparent justify-between py-4">
           <div className="relative z-10 flex items-center gap-16">
             <Link to="/" aria-label="Home">
               <img src={pmyceliumLogo} alt="Mycelium" className="h-8 w-auto" />
diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx
index 2f744be..e55cadd 100644
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -1,16 +1,17 @@
 import { H1, H5 } from "@/components/Texts"
 import { Button } from "@/components/Button"
 
-
 export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
   return (
-    <div
-      className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
-      style={{ backgroundImage: "url('/images/hero11.webp')" }}
-    >
-      <div className="mx-auto max-w-7xl lg:px-4">
-        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
-          <div className="mx-auto max-w-2xl lg:mx-0">
+    <div className="px-4">
+      {/* Boxed container */}
+      <div
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-200  overflow-hidden bg-contain bg-right bg-no-repeat"
+        style={{ backgroundImage: "url('/images/hero11.webp')" }}
+      >
+        {/* Inner padding */}
+        <div className="px-6 py-16 lg:py-24 ">
+          <div className="max-w-2xl lg:pl-6">
             <div className="hidden sm:flex">
               <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
                 Deploying at scale?{' '}
@@ -20,24 +21,26 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
                 </a>
               </div>
             </div>
+
             <H1 className="mt-8">
               The Sovereign Agentic Cloud
             </H1>
+
             <H5 className="mt-8 text-lg text-gray-600">
-              Host nodes, deploy workloads, or build private AI systems, 
-all on infrastructure you own and control.
+              Host nodes, deploy workloads, or build private AI systems,
+              all on infrastructure you own and control.
             </H5>
+
             <div className="mt-10 flex items-center gap-x-6">
               <Button
                 variant="solid"
-                className=""
                 color="cyan"
                 onClick={onGetStartedClick}
               >
-                 Start Hosting 
+                Start Hosting
               </Button>
               <Button to="#" variant="outline">
-                Deploy in Cloud <span aria-hidden="true"> →</span>
+                Deploy in Cloud →
               </Button>
             </div>
           </div>
diff --git a/src/pages/home/HomeBenefits.tsx b/src/pages/home/HomeBenefits.tsx
index 96c75bf..8436490 100644
--- a/src/pages/home/HomeBenefits.tsx
+++ b/src/pages/home/HomeBenefits.tsx
@@ -34,7 +34,7 @@ export function HomeBenefits() {
     },
   ];
   return (
-    <div className="relative z-20 bg-blackpy-10 lg:py-24 max-w-7xl mx-auto">
+    <div className="relative z-20 bg-blackpy-10 lg:py-24 max-w-7xl mx-auto border border-t-0 border-gray-200">
       <div className="px-12">
         <Eyebrow className="text-center text-cyan-500">
          Benefits
@@ -44,7 +44,7 @@ export function HomeBenefits() {
         </H2>
       </div>
 
-      <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
+      <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
           <div className="flex p-px lg:col-span-4">
             <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
                 <div className="flex items-center">
diff --git a/src/pages/home/HomeHosting.tsx b/src/pages/home/HomeHosting.tsx
index dd0bfec..3d9e3b6 100644
--- a/src/pages/home/HomeHosting.tsx
+++ b/src/pages/home/HomeHosting.tsx
@@ -1,7 +1,9 @@
+"use client";
+
 import { Container } from '../../components/Container'
 import { Eyebrow, H3, P } from '../../components/Texts'
 
-/* ✅ Custom Icons */
+/* ✅ Custom Icons (unchanged) */
 
 function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -106,11 +108,7 @@ const features = [
 
 export function HomeHosting() {
   return (
-    <section
-      id="comingsoon"
-      aria-label="Features"
-      className="py-20 sm:py-32"
-    >
+    <section className="mx-4 py-12 border-t-0 lg:mx-auto max-w-7xl border border-gray-200 lg:py-24">
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
           <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
@@ -126,18 +124,18 @@ export function HomeHosting() {
 
         <ul
           role="list"
-          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm 
-                     sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
+          className="mx-auto grid max-w-2xl grid-cols-1 gap-6 text-sm 
+                     lg:mt-12 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
         >
           {features.map((feature) => (
             <li
               key={feature.name}
-              className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out
+              className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
                          hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
             >
               <feature.icon className="h-14 w-14" />
-              <h3 className="mt-6 font-semibold text-gray-900">{feature.name}</h3>
-              <p className="mt-2 text-gray-700">{feature.description}</p>
+              <h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
+              <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
             </li>
           ))}
         </ul>
diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx
index dfef080..d0b983d 100644
--- a/src/pages/home/HomeTab.tsx
+++ b/src/pages/home/HomeTab.tsx
@@ -1,22 +1,15 @@
 "use client";
 
 import { useState } from "react";
-import { Button } from "@/components/Button";
 import { Eyebrow, H3, P } from "@/components/Texts";
 
-import cloudImage from "/images/pages/cloud.png";
-import networkImage from "/images/pages/network.png";
-import agentImage from "/images/pages/agent.png";
-import computeImage from "/images/pages/compute.png";
-
 const tabs = [
   {
     id: "cloud",
     label: "Kubernetes Clusters",
     title: "Mycelium Cloud",
     description: "Deploy Kubernetes clusters on sovereign infrastructure.",
-    image: "/images/pages/cloud.png",
-    bg: cloudImage,
+    image: "/images/testpic.png",
     link: "/cloud",
   },
   {
@@ -24,8 +17,7 @@ const tabs = [
     label: "Mesh Networking",
     title: "Mycelium Network",
     description: "Encrypted peer-to-peer mesh networking across the globe.",
-    image: "/images/pages/network.png",
-    bg: networkImage,
+    image: "/images/testpic.png",
     link: "/network",
   },
   {
@@ -33,8 +25,7 @@ const tabs = [
     label: "AI Agents",
     title: "Mycelium Agents",
     description: "Private, programmable AI systems that run on your hardware.",
-    image: "/images/pages/agent.png",
-    bg: agentImage,
+    image: "/images/testpic.png",
     link: "/agent",
   },
   {
@@ -42,8 +33,7 @@ const tabs = [
     label: "Compute & Storage",
     title: "Hardware Resources",
     description: "The resource layers powering the stack.",
-    image: "/images/pages/compute.png",
-    bg: computeImage,
+    image: "/images/testpic.png",
     link: "/compute",
   },
 ];
@@ -53,80 +43,53 @@ export function HomeTab() {
   const current = tabs.find((t) => t.id === active)!;
 
   return (
-    <section className="mx-4 px-6 lg:px-8 lg:mx-auto max-w-7xl py-24">
-      <div className="space-y-12 text-center">
+    <section className="mx-4 lg:mx-auto max-w-7xl py-24 border border-gray-200 bg-white">
 
-        {/* ✅ Replaced H1 + P with Eyebrow + H3 + P */}
-        <Eyebrow className="text-gray-500">Ecosystem</Eyebrow>
-
-        <H3 className="text-gray-900">
-          Mycelium Components
-        </H3>
-
-        <P className="text-gray-500 max-w-4xl mx-auto">
+      <div className="text-center px-6 lg:px-8">
+        <Eyebrow>Ecosystem</Eyebrow>
+        <H3 className="text-gray-900 mt-2">Mycelium Components</H3>
+        <P className="text-gray-500 max-w-4xl mx-auto mt-6">
           Each component can be used on its own or combined into a fully sovereign cloud.
         </P>
+      </div>
 
-        {/* ✅ Tabs & content centered */}
-        <div className="flex justify-center">
-          <div className="space-y-10 max-w-5xl w-full">
+      {/* ✅ FULL-WIDTH NO PADDING CARD ROW */}
+      <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 
+                      divide-y sm:divide-y-0 lg:divide-x divide-gray-200
+                      border-t border-b border-gray-200 w-full">
 
-            {/* ✅ Tabs */}
-            <div className="flex justify-center">
-              <div className="flex flex-wrap gap-3 bg-gray-50 rounded-full p-2 border border-gray-200">
-                {tabs.map((tab) => (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActive(tab.id)}
-                    className={`px-5 py-2 rounded-full text-sm font-medium transition-all
-                    ${
-                      active === tab.id
-                        ? "bg-white border border-gray-300 shadow-sm"
-                        : "text-gray-500 hover:text-gray-900"
-                    }`}
-                  >
-                    {tab.label}
-                  </button>
-                ))}
-              </div>
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActive(tab.id)}
+            className={`group transition-all text-left 
+              ${active === tab.id ? "bg-gray-50" : "bg-white"}
+              hover:bg-gray-50 focus:bg-gray-50
+              w-full`}
+          >
+            {/* ✅ Spacing only inside the card, not outside */}
+            <div className="p-6 flex flex-col gap-3">
+              <img
+                src={tab.image}
+                alt={tab.title}
+                className="w-full h-32 object-cover rounded-md border border-gray-200 shadow-sm"
+              />
+
+              <h4 className="text-base font-semibold text-gray-900">
+                {tab.title}
+              </h4>
+
+              <p className="text-sm text-gray-500">
+                {tab.description}
+              </p>
+
+              <span className="text-sm font-medium text-gray-900 group-hover:text-cyan-600">
+                Learn More →
+              </span>
             </div>
+          </button>
+        ))}
 
-            {/* ✅ 2-column layout */}
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-
-              {/* Left content */}
-              <div className="space-y-4 text-left mx-auto">
-                <h4 className="text-sm font-semibold text-gray-900 uppercase tracking-wide">
-                  {current.title}
-                </h4>
-
-                <p className="text-sm text-gray-500 leading-relaxed max-w-md">
-                  {current.description}
-                </p>
-
-                <Button
-                  variant="outline"
-                  color="gray"
-                  asChild
-                  className="mt-2"
-                >
-                  <a href={current.link}>Learn More</a>
-                </Button>
-              </div>
-
-              {/* Right content */}
-              <div className="flex items-center justify-center">
-                <img
-                  src={current.image}
-                  alt={current.title}
-                  className="w-full max-w-xs object-contain rounded-xl border border-gray-200 shadow-sm"
-                />
-              </div>
-
-            </div>
-
-          </div>
-        </div>
       </div>
     </section>
   );
diff --git a/src/pages/home/archive/HomeNew.tsx b/src/pages/home/archive/HomeNew.tsx
new file mode 100644
index 0000000..1d2750d
--- /dev/null
+++ b/src/pages/home/archive/HomeNew.tsx
@@ -0,0 +1,51 @@
+import { H1, H5 } from "@/components/Texts"
+import { Button } from "@/components/Button"
+
+export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
+  return (
+    <div className="px-4">
+      {/* Boxed container */}
+      <div
+        className="relative mx-auto max-w-7xl border border-t-0 border-gray-200  overflow-hidden bg-cover bg-right bg-no-repeat"
+        style={{ backgroundImage: "url('/images/hero11.webp')" }}
+      >
+        {/* Inner padding */}
+        <div className="px-6 pt-12 pb-24 sm:pb-32 lg:pt-40 lg:pb-48">
+          <div className="max-w-2xl">
+            <div className="hidden sm:flex">
+              <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
+                Deploying at scale?{' '}
+                <a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
+                  <span aria-hidden="true" className="absolute inset-0" />
+                  Book a call  <span>&rarr;</span>
+                </a>
+              </div>
+            </div>
+
+            <H1 className="mt-8">
+              The Sovereign Agentic Cloud
+            </H1>
+
+            <H5 className="mt-8 text-lg text-gray-600">
+              Host nodes, deploy workloads, or build private AI systems,
+              all on infrastructure you own and control.
+            </H5>
+
+            <div className="mt-10 flex items-center gap-x-6">
+              <Button
+                variant="solid"
+                color="cyan"
+                onClick={onGetStartedClick}
+              >
+                Start Hosting
+              </Button>
+              <Button to="#" variant="outline">
+                Deploy in Cloud →
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}