improvements

src/pages/home/components/CtaSection.tsx

@@ -6,7 +6,7 @@ import { buttonBaseClass } from '../../../lib/buttonStyles';
 export const CtaSection = () => {
   return (
     <section className="snap-start bg-black">
-      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-10 px-6 py-40 text-center sm:px-10">
+      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 px-6 py-20 text-center sm:gap-10 sm:px-10 sm:py-32 lg:py-40">
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -44,32 +44,43 @@ export const CtaSection = () => {
         >
           From record-breaking digital infrastructure to successful exits. The team behind GeoMind has built infrastructure at scale.
         </motion.p>
-        <div className="flex items-center justify-center gap-4">
+        <div className="flex w-full flex-col items-stretch gap-4 sm:w-auto sm:flex-row sm:items-center sm:justify-center">
           <motion.div
             initial={{ opacity: 0, y: 12 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-20%' }}
             transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
+            className="w-full sm:w-auto"
           >
             <Link
               to="/about"
-              className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+              className={cn(
+                buttonBaseClass,
+                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
+              )}
             >
               About us
             </Link>
           </motion.div>
-          <motion.a
-            href="https://calendly.com/sachao/30min"
-            target="_blank"
-            rel="noopener noreferrer"
+          <motion.div
             initial={{ opacity: 0, y: 12 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true, margin: '-20%' }}
             transition={{ duration: 0.6, ease: 'easeOut', delay: 0.35 }}
-            className={cn(buttonBaseClass, 'px-10 py-4 font-bold uppercase tracking-[0.35em]')}
+            className="w-full sm:w-auto"
           >
-            Book a Meeting
-          </motion.a>
+            <a
+              href="https://calendly.com/sachao/30min"
+              target="_blank"
+              rel="noopener noreferrer"
+              className={cn(
+                buttonBaseClass,
+                'w-full px-10 py-4 font-bold uppercase tracking-[0.35em] sm:min-w-[12rem]',
+              )}
+            >
+              Book a Meeting
+            </a>
+          </motion.div>
         </div>
       </div>
     </section>