refactor: add centered intro sections and update typography imports in CloudPros and NetworkPros

- Added Eyebrow, H3, and P imports to CloudPros and NetworkPros
- Replaced raw h3 and p tags with typography components in CloudPros
- Added centered "Why It's Revolutionary" intro section to NetworkPros with eyebrow, heading, and description
- Updated NetworkPros grid with top margin (mt-8) for spacing
- Changed Homepod eyebrow text from "MYCELIUM PODS" to "Mycelium Pods - Coming Soon"

src/pages/network/NetworkPros.tsx

@@ -1,4 +1,4 @@
-import { Small } from '@/components/Texts'
+import { Eyebrow, H3, P, Small } from '@/components/Texts'
 
 const highlights = [
   {
@@ -36,7 +36,21 @@ export function NetworkPros() {
 
       {/* 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">
+        {/* 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">
+            WHY
+          </Eyebrow>
+
+          <H3 className="mt-4 text-white">
+            Why It’s Revolutionary
+          </H3>
+
+          <P className="mt-4 text-gray-300 text-base leading-relaxed">
+            Mycelium redefines how digital systems connect, scale, and stay secure in a world moving beyond the limits of traditional cloud
+          </P>
+        </div>
+        <div className="grid lg:grid-cols-4 mt-8">
           {highlights.map((item) => (
             <div
               key={item.title}