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/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>
-                  <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
+                  <CT className="mt-4  text-gray-900">{feature.name}</CT>
+                  <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>
-                  <p className="mt-1 max-w-lg text-sm/6 text-gray-600">
+                  <CT  className="mt-2 text-lg  lg:text-xl tracking-tight text-gray-950">{card.title}</CT>
+                  <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}`} />