From fb35ede79d23a4ecb448e60e6eba70fc4ceba416 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 17 Nov 2025 15:46:02 +0100
Subject: [PATCH] feat: add centered intro section to HomeDesign and hover
 effects to HomeTab cards

- Added centered "Who's it For" intro section to HomeDesign with eyebrow, heading, and description
- Imported Eyebrow, H3, and P components for consistent typography
- Updated HomeDesign grid item styling with top margin and adjusted border classes
- Added hover effects to all HomeTab cards with scale, border color, and shadow transitions
- Applied consistent hover styling (scale-105, cyan border, and cyan shadow)
---
 src/pages/home/HomeDesign.tsx | 22 +++++++++++++++++++---
 src/pages/home/HomeTab.tsx    |  8 ++++----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/HomeDesign.tsx b/src/pages/home/HomeDesign.tsx
index e12980b..d2311c8 100644
--- a/src/pages/home/HomeDesign.tsx
+++ b/src/pages/home/HomeDesign.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Eyebrow, H3, P } from "@/components/Texts";
+
 const benefits = [
   {
     id: 1,
@@ -27,18 +29,32 @@ const benefits = [
 export function HomeDesign() {
   return (
     <section className="w-full max-w-8xl mx-auto bg-white">
-
       {/* Top 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 border-l border-r border-gray-200" />
 
       {/* Content */}
-      <div className="mx-auto max-w-7xl border-gray-200">
+      <div className="mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-200">
+        {/* Centered intro */}
+        <div className="px-6 pt-12 pb-4 text-center max-w-4xl mx-auto ">
+          <Eyebrow className="uppercase tracking-[0.16em] text-cyan-600">
+            Who's it For
+          </Eyebrow>
+
+          <H3 className="mt-4 text-black">
+            Built for Real-World Impact
+          </H3>
+
+          <P className="mt-4 text-gray-700 text-base leading-relaxed">
+            Whether you’re deploying infrastructure, securing sensitive operations, or simply taking back control of your digital life, Mycelium provides the foundation to build confidently in a connected world.
+          </P>
+        </div>
+
         <dl className="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-0">
           {benefits.map((item) => (
             <div
               key={item.id}
-              className="group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 0 lg:border-t-0 lg:border-b-0"
+              className="mt-8 group flex items-start gap-2 bg-white px-8 py-12 border border-gray-200 lg:border-t lg:border-b border-l-0.5 border-r-0.5"
             >
               {/* Image on the LEFT */}
               <img
diff --git a/src/pages/home/HomeTab.tsx b/src/pages/home/HomeTab.tsx
index b3d84ce..45c57ec 100644
--- a/src/pages/home/HomeTab.tsx
+++ b/src/pages/home/HomeTab.tsx
@@ -26,7 +26,7 @@ export function HomeTab() {
           {/* ------------------ LEFT TALL CARD ------------------ */}
           <Link to="/network" className="relative lg:row-span-2 cursor-pointer">
             <div className="absolute inset-px rounded-lg bg-white lg:rounded-l-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)]">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-l-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
 
               <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">LIVE</h3>
@@ -56,7 +56,7 @@ export function HomeTab() {
           {/* ------------------ MIDDLE TOP ------------------ */}
           <Link to="/pods" className="relative cursor-pointer max-lg:row-start-1">
             <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-t-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)]">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
 
               <div className="px-8 pt-8 sm:px-10 sm:pt-10">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Coming Soon</h3>
@@ -81,7 +81,7 @@ export function HomeTab() {
           {/* ------------------ MIDDLE BOTTOM ------------------ */}
           <Link to="/agents" className="relative cursor-pointer max-lg:row-start-3 lg:col-start-2 lg:row-start-2">
             <div className="absolute inset-px rounded-lg bg-white" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
 
               <div className="px-8 pt-8 sm:px-10 sm:pt-10">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Q1 2026</h3>
@@ -105,7 +105,7 @@ export function HomeTab() {
           {/* ------------------ RIGHT TALL ------------------ */}
           <Link to="/cloud" className="relative lg:row-span-2 cursor-pointer">
             <div className="absolute inset-px rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-r-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)]">
+            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-r-[calc(2rem+1px)] transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20">
 
               <div className="px-8 pt-8 pb-3 sm:px-10 sm:pt-10 sm:pb-0">
                 <h3 className="text-sm/4 font-semibold text-cyan-500">Early Access</h3>