From a362985d4ccf11a43ba294c885da6732441ed1a6 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 19 Sep 2025 01:09:08 +0200
Subject: [PATCH] style: improve text component spacing and center CTA content
 on mobile

---
 src/components/CallToAction.tsx | 4 ++--
 src/components/Texts.tsx        | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx
index 6389ae1..83b086b 100644
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -19,12 +19,12 @@ export function CallToAction() {
         <source src="/videos/cta.mp4" type="video/mp4" />
       </video>
       <div className="absolute top-0 left-0 w-full h-full bg-black opacity-40 z-10"></div>
-      <div className="absolute left-20 top-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
+            <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2 z-20">
         <CircleBackground color="#fff" className="animate-spin-slower" />
       </div>
       <Container className="relative z-20">
           <FadeIn>
-        <div className="mx-auto max-w-md sm:text-center">
+                <div className="mx-auto max-w-md text-center">
           <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
             Decentralized AI Agents that are Truly Yours
           </h2>
diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx
index 0e75aac..a58e0c7 100644
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -53,9 +53,9 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl')
 export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl')
 export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl')
-export const P  = createTextComponent('p', 'text-lg font-normal text-pretty lg:text-xl')
+export const P  = createTextComponent('p', 'text-lg font-normal text-pretty leading-snug lg:text-xl lg:leading-normal')
 export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
-export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-tight')
+export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]')
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
-export const CP = createTextComponent('p', 'text-sm lg:text-base leading-relaxed font-light')
-export const NL = createTextComponent('span', 'text-lg font-semibold leading-6')
+export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light')
+export const NL = createTextComponent('span', 'text-lg font-semibold leading-[1.23]')