ok

src/components/ClickableGallery.tsx

@@ -4,7 +4,8 @@ import { useEffect, useMemo, useState } from 'react'
 import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
-import { Button } from '@/components/Button'
+import { Button } from '@/components/Button';
+import { H2, P, H4 } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 
 const galleryItems = [
@@ -52,22 +53,14 @@ export function ClickableGallery() {
   return (
     <>
       <div className="relative isolate pt-24 pb-12 text-center">
-        <motion.h1
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 1, delay: 1 }}
-          className="mx-auto max-w-5xl text-4xl font-medium text-pretty text-[#2F3178] lg:text-6xl"
-        >
-          One Agent, Endless Possibilities.
-        </motion.h1>
-        <motion.p
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ duration: 1, delay: 1.5 }}
-          className="mx-auto max-w-3xl mt-8 text-2xl font-medium text-pretty text-[#2F3178] lg:text-2xl"
-        >
-          The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
-        </motion.p>
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1 }} className="mx-auto max-w-5xl">
+          <H2 className="text-center">One Agent, Endless Possibilities.</H2>
+        </motion.div>
+        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 1.5 }} className="mx-auto max-w-3xl mt-8">
+          <P className="text-center">
+            The future isn’t about more tools. It’s about one intelligent partner that can do it all. This is your gateway to creativity, automation, and discovery.
+          </P>
+        </motion.div>
         <div
           aria-hidden="true"
           className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
@@ -172,14 +165,15 @@ export function ClickableGallery() {
         {/* Foreground pill */}
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[60]">
           <div className="flex items-center justify-between w-[1040px] gap-6 rounded-3xl bg-white/95 shadow-[0_8px_40px_rgba(0,0,0,0.15)] px-12 py-6 backdrop-blur">
-            <TypeAnimation
-              key={active}
-              sequence={[galleryItems[active].text]}
-              wrapper="h2"
-              speed={50}
-              className="text-2xl lg:text-3xl font-semibold leading-tight text-[#2F3178] max-w-[820px] h-[72px]"
-              repeat={0}
-            />
+            <H4 as="div" className="max-w-[820px] h-[72px]">
+              <TypeAnimation
+                key={active}
+                sequence={[galleryItems[active].text]}
+                wrapper="span"
+                speed={50}
+                repeat={0}
+              />
+            </H4>
             <Button href="#" color="cyan" className="text-sm px-4 py-2 lg:text-base">
                Start
             </Button>