ok

src/components/CallTo.tsx

@@ -4,26 +4,25 @@ export  function CallTo() {
         <div className="mx-auto max-w-7xl py-24 px-6 lg:px-4">
           <div className="relative isolate overflow-hidden bg-stat-gradient  py-16 text-center after:pointer-events-none after:absolute after:inset-0 sm:rounded-3xl sm:px-16">
             <div className="mx-auto max-w-2xl lg:max-w-2xl">
-            <h2 className="text-2xl font-semibold tracking-tight leading-tight text-white lg:text-4xl">
+            <h2 className="text-3xl font-semibold tracking-tight leading-tight text-white lg:text-5xl">
             Say Hello to Decentralized AI Agents that are Truly Yours
             </h2>
-            <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+            <p className="mx-auto mt-6 mb-4 max-w-xl text-base font-light text-pretty text-white lg:text-lg">
             Why hand out your intelligence to centralized giants when you can build your own?
             </p>
-            <p className="mx-auto mt-6 max-w-xl text-sm font-light text-pretty text-white lg:text-base">
+            <p className="mx-auto max-w-xl text-base font-light text-pretty text-white lg:text-lg">
             With Project Mycelium’s Decentralized Agentic Cloud, you’re not just adopting AI—you’re claiming your own sovereign, autonomous AI infrastructure that grows and evolves with you.
             </p>
             <div className="mt-10 flex items-center justify-center gap-x-6">
               <a
                 href="#"
-                className="rounded-md bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-white/15"
+                className="rounded-md bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white hover:bg-white/15"
               >
                 {' '}
                 Book a Meeting{' '}
               </a>
-              <a href="#" className="text-sm/6 font-semibold text-white">
+              <a href="#" className="rounded-md bg-white/10 px-3.5 py-2.5 text-base font-semibold text-white hover:bg-white/15">
               Join the Waitlist
-                <span aria-hidden="true">→</span>
               </a>
             </div>
             <svg

src/components/ClickableGallery.tsx

@@ -75,7 +75,7 @@ export function ClickableGallery() {
         </div>
       </div>
       <section
-        className="relative w-full flex items-center justify-center overflow-hidden bg-background -mt-32"
+        className="relative w-full flex items-center justify-center overflow-hidden bg-background -mt-16 pt-0 pb-32"
         onMouseEnter={() => setHovering(true)}
         onMouseLeave={() => setHovering(false)}
       >

src/components/Steps.tsx

@@ -33,7 +33,7 @@ const features = [
 
 export function Steps() {
   return (
-    <section id="benefits" className="bg-white pt-0 pb-12 dark:bg-gray-900">
+    <section id="benefits" className="bg-white pt-0 pb-24 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-6 lg:px-0">
         <div className="mx-auto max-w-5xl lg:mx-0">
           <H2 className="text-3xl font-medium tracking-tight">

src/components/UseCases.tsx

@@ -15,7 +15,7 @@ import {
 } from '@heroicons/react/24/solid'
 
 import { Container } from '@/components/Container'
-import { H2, P } from '@/components/Texts'
+import { H2, P, CT, CP } from '@/components/Texts'
 
 interface Review {
   title: string
@@ -93,11 +93,11 @@ function Review({
       {...props}
     >
       <blockquote className="text-gray-900">
-        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-gray-700 mb-2" })}
-        <p className="mt-4 text-lg/6 font-semibold">
+        {React.createElement(getReviewIcon(title), { className: "h-6 w-6 text-[#2F3178] mb-2" })}
+        <CT as="h3" color="primary" className="mt-4 text-lg/6 font-semibold">
           {title}
-        </p>
-        <p className="mt-3 text-sm text-gray-600">{body}</p>
+        </CT>
+        <CP color="custom" className="mt-3 text-sm">{body}</CP>
       </blockquote>
 
     </figure>
@@ -217,13 +217,14 @@ export function UseCases() {
     <section
       id="usecases"
       aria-labelledby="usecases-title"
-      className="pt-20 pb-16 sm:pt-32 sm:pb-24"
+      className="py-12"
     >
       <Container className=''>
         <div className="mx-auto max-w-2xl  lg:max-w-5xl">
           <H2
             id="usecases-title" 
-            color="custom"
+            color="primary"
+            className="text-center"
           >
             Coming Soon: The Future of Mycelium
           </H2>