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

@@ -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