refactor: standardize Tailwind class syntax and component usage

- Replaced arbitrary CSS values with standard Tailwind utilities (e.g., `bottom-[-18rem]` → `-bottom-72`, `mt-[-2rem]` → `-mt-8`)
- Fixed invalid gradient syntax by removing `bg-` prefix from gradient utilities
- Consolidated text styling by replacing inline elements with CT/CP text components
- Adjusted CT component typography from semibold to medium for better visual hierarchy

src/components/Texts.tsx

@@ -162,5 +162,5 @@ export const DownloadCardDescription = createTextComponent(
   'text-base/7 leading-normal tracking-normal'
 )
 
-export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold')
+export const CT = createTextComponent('span', 'text-base lg:text-lg font-medium')
 export const CP = createTextComponent('p', 'text-sm lg:text-base tracking-wide leading-tight font-light')

src/pages/agents/GallerySection.tsx

@@ -136,7 +136,7 @@ export function GallerySection() {
           </div>
 
           {/* Foreground pill (Desktop) */}
-          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] hidden md:block">
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-60 hidden md:block">
             <div className="flex items-center justify-between w-[1040px] gap-6 rounded-2xl bg-gray-100/80 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 backdrop-blur">
               <CP as="h4" className="max-w-[820px] h-[72px] flex items-center" color="dark">
                 <TypeAnimation

src/pages/compute/ComputeDesign.tsx

@@ -38,7 +38,7 @@ export function ComputeDesign() {
       <div className="mx-auto max-w-7xl border-gray-100">
           <dl className="grid grid-cols-1 gap-4 lg:gap-14  overflow-hidden  text-center  lg:grid-cols-3">
             {stats.map((stat) => (
-              <div key={stat.id} className="flex flex-col items-center bg-gray-400/5 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
+              <div key={stat.id} className="flex flex-col items-center bg-gray-100 py-8 px-12 border border-gray-100 lg:border-t-0 lg:border-b-0">
                 <stat.icon className="h-8 w-8 fill-cyan-500 mb-4" aria-hidden="true" />
                 <CT className="">{stat.value}</CT>
                 <CP className="mt-1">{stat.name}</CP>

src/pages/compute/ComputeOverview.tsx

@@ -31,9 +31,9 @@ export function ComputeOverview() {
         />
         <CircleBackground
           color="#22d3ee"
-          className="absolute bottom-[-18rem] left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
+          className="absolute -bottom-72 left-[15%] h-[420px] w-[420px] opacity-15 blur-3xl"
         />
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
+        <div className="absolute inset-0 bg-radial-gradient(circle_at_top,_rgba(0,0,0,0.03),_transparent_55%)]" />
       </div>
 
       <Container className="relative py-12 bg-white mx-auto s border border-t-0 border-b-0 border-gray-100">
@@ -69,7 +69,7 @@ export function ComputeOverview() {
               key={card.title}
               className="group relative overflow-hidden rounded-md border border-gray-100 bg-white p-10 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
             >
-              <div className="absolute inset-0 bg-gradient-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
+              <div className="absolute inset-0 bg-linear-to-br from-cyan-50 via-white to-cyan-100 opacity-0 transition group-hover:opacity-70" />
 
               <div className="relative">
                 <p className="text-[0.7rem] font-semibold uppercase tracking-[0.35em] text-cyan-600">

src/pages/home/HomeHosting.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Container } from '@/components/Container'
-import { Eyebrow, H3, P } from '@/components/Texts'
+import { CT, CP, Eyebrow, H3, P } from '@/components/Texts'
 
 /* ✅ Custom Icons (unchanged) */
 
@@ -142,8 +142,8 @@ export function HomeHosting() {
                     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-4 font-semibold text-gray-900">{feature.name}</h3>
+                  <CT className="mt-4  text-gray-900">{feature.name}</CT>
-                  <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
+                  <CP className="mt-2 text-gray-700 leading-snug">{feature.description}</CP>
                 </li>
               ))}
             </ul>

src/pages/home/HomeTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Link } from "react-router-dom";
-import { Eyebrow, H3, P } from "@/components/Texts";
+import { CP, CT, Eyebrow, H3, P } from "@/components/Texts";
 
 const bentoCards = [
   {
@@ -107,10 +107,10 @@ export function HomeTab() {
                 />
                 <div className="px-8 pt-4 pb-6">
                   <h3 className="text-sm/4 font-semibold text-cyan-500">{card.eyebrow}</h3>
-                  <p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">{card.title}</p>
+                  <CT  className="mt-2 text-lg  lg:text-xl tracking-tight text-gray-950">{card.title}</CT>
-                  <p className="mt-1 max-w-lg text-sm/6 text-gray-600">
+                  <CP className="mt-1 max-w-lg  text-gray-600">
                     {card.description}
-                  </p>
+                  </CP>
                 </div>
               </div>
               <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 ${card.rounded}`} />

src/pages/network/PrimaryFeatures.tsx

@@ -185,7 +185,7 @@ const bodyAnimation: MotionProps = {
 function InviteScreen() {
   return (
     <AppScreen className="w-full">
-      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="mt-[-2rem]" />
+      <img src={connectorImg} alt="Mycelium Connector" width="366" height="732" className="-mt-8" />
     </AppScreen>
   )
 }
@@ -193,7 +193,7 @@ function InviteScreen() {
 function StocksScreen() {
   return (
     <AppScreen className="w-full">
-      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="mt-[-2rem]" />
+      <img src={peersImg} alt="Mycelium Peers" width="366" height="732" className="-mt-8" />
     </AppScreen>
   )
 }
@@ -201,7 +201,7 @@ function StocksScreen() {
 function InvestScreen() {
   return (
     <AppScreen className="w-full">
-      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="mt-[-2rem]" />
+      <img src={settingImg} alt="Mycelium Settings" width="366" height="732" className="-mt-8" />
     </AppScreen>
   )
 }

src/pages/network/SecondaryFeatures.tsx

@@ -1,5 +1,6 @@
 import { useId } from 'react'
 import { Container } from '@/components/Container'
+import { CP } from '@/components/Texts'
 
 const features = [
   {
@@ -214,9 +215,9 @@ export function SecondaryFeatures() {
               className="rounded-2xl border border-gray-100 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
             >
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-gray-900">
+              <CP className="mt-6 font-semibold text-gray-900">
                 {feature.name}
-              </h3>
+              </CP>
               <p className="mt-2 text-gray-700">{feature.description}</p>
             </li>
           ))}

src/pages/pods/PodsPage.tsx

@@ -0,0 +1,11 @@
+import Homepod from './Homepod';
+
+const PodsPage = () => {
+  return (
+    <>
+      <Homepod />
+    </>
+  );
+};
+
+export default PodsPage;