feat: about + people info cards mobile layout

Author: del-ereno

src/app/(frontend)/components/home/InfoCards.tsx

@@ -33,53 +33,61 @@ const InfoCards = ({ content }: InfoCardsProps) => {
 
   return (
     <section className="bg-[var(--cream)] text-[var(--navy)] text-base py-32 px-10 flex items-center justify-center">
-      <div className="flex flex-col md:flex-row gap-7 w-full md:w-auto">
+      <div className="flex flex-col md:flex-row md:gap-7 w-full md:w-auto">
         {/* 1/3: About Us Card */}
-        <div className="w-full md:w-[22rem] md:bg-[var(--lightbeige)] md:rounded-xl p-8 flex flex-col items-center justify-start gap-3">
+        <div className="w-full md:w-[22rem] md:bg-[var(--lightbeige)] md:rounded-xl md:p-8 flex flex-row md:flex-col items-center justify-start gap-3">
           {typeof content.aboutUs.image === "object" && content.aboutUs.image?.url && (
             <Image
               src={content.aboutUs.image.url}
               alt={content.aboutUs.image.alt || "About Us"}
               width={169}
               height={239}
               sizes="(max-width: 768px) 100vw, 20vw"
+              className="w-[70px] h-[70px] md:w-[169px] md:h-[239px]"
             />
           )}
-          <div className="flex flex-col items-center text-center gap-5">
-            <h1 className="!font-normal !text-4xl !m-0">About Us</h1>
+          <div className="flex flex-row md:flex-col items-center justify-between md:justify-start md:text-center gap-3 md:gap-5 flex-1 md:flex-none">
+            <h1 className="!font-normal !text-2xl md:!text-4xl !m-0">About Us</h1>
             <div className="hidden md:block">{content.aboutUs.description}</div>
             <Link href="/about">
-              <Button size="lg" className="mt-2" variant="navy">
+              <Button size="lg" className="mt-2 hidden md:flex" variant="navy">
                 Read More
                 <ArrowUpRight size={18} />
               </Button>
             </Link>
+            <Link href="/about" className="md:hidden">
+              <ArrowUpRight size={32} className="flex-shrink-0 text-[var(--navy)]" />
+            </Link>
           </div>
         </div>
 
         {/* Divider between About Us and Our People */}
         <div className="w-full h-px bg-[var(--navy)] md:hidden"></div>
 
         {/* 2/3: Our People Card */}
-        <div className="w-full md:w-[22rem] md:bg-[var(--lightbeige)] md:rounded-xl p-8 flex flex-col items-center justify-start gap-3">
+        <div className="w-full md:w-[22rem] md:bg-[var(--lightbeige)] md:rounded-xl md:p-8 flex flex-row md:flex-col items-center justify-start gap-3">
           {typeof content.ourPeople.image === "object" && content.ourPeople.image?.url && (
             <Image
               src={content.ourPeople.image.url}
               alt={content.ourPeople.image.alt || "Our People"}
               width={169}
               height={239}
               sizes="(max-width: 768px) 100vw, 20vw"
+              className="w-[70px] h-[70px] md:w-[169px] md:h-[239px] "
             />
           )}
-          <div className="flex flex-col items-center text-center gap-5">
-            <h1 className="!font-normal !text-4xl !m-0">Our People</h1>
+          <div className="flex flex-row md:flex-col items-center justify-between md:justify-start md:text-center gap-3 md:gap-5 flex-1 md:flex-none">
+            <h1 className="!font-normal !text-2xl md:!text-4xl !m-0">Our People</h1>
             <div className="hidden md:block">{content.ourPeople.description}</div>
             <Link href="/ourpeople">
-              <Button size="lg" className="mt-2" variant="navy">
+              <Button size="lg" className="mt-2 hidden md:flex" variant="navy">
                 Read More
                 <ArrowUpRight size={18} />
               </Button>
             </Link>
+            <Link href="/ourpeople" className="md:hidden">
+              <ArrowUpRight size={32} className="flex-shrink-0 text-[var(--navy)]" />
+            </Link>
           </div>
         </div>
 
@@ -95,10 +103,11 @@ const InfoCards = ({ content }: InfoCardsProps) => {
               width={169}
               height={239}
               sizes="(max-width: 768px) 100vw, 20vw"
+              className="w-[70px] h-[70px] md:w-[169px] md:h-[239px] flex-shrink-0"
             />
           )}
           <div className="flex flex-col items-center text-center justify-between flex-1">
-            <h1 className="font-normal! text-4xl! m-0!">Contact Us</h1>
+            <h1 className="!font-normal text-2xl md:!text-4xl !m-0">Contact Us</h1>
             <div className="flex flex-col gap-2 items-center">
               <a href={links.feedbackForm} target="_blank" rel="noopener noreferrer">
                 <Button size="lg" variant="navy">