The final improved mission pillars component

Author: AJ-Kulundu

src/components/MissionPillars/MissionPillars.tsx

@@ -5,79 +5,55 @@ import Image from 'next/image';
 export default function MissionPillars() {
   return (
     <section className="flex flex-col w-full md:justify-center items-center bg-white md:bg-[#CEEDF4] py-12 space-y-10">
-      <p className="md:uppercase tracking-wide font-bold md:font-light text-2xl md:text-5xl">
+      <p className="md:uppercase font-bold md:font-light text-2xl md:text-5xl">
         Our Mission Pillars
       </p>
-      <div className="hidden md:flex flex-col md:flex-row md:space-x-4 md:justify-between items-center w-4/5 lg:w-1/2 xl:2/5">
-        <Pillar count="01" label="Mentorship" />
-        <Image
-          src={'/images/mentorship-image.png'}
-          alt="Mentorship Image"
-          width={360}
-          height={270}
-          className="rounded-lg"
-        />
-      </div>
-      <div className="hidden md:flex flex-col md:flex-row-reverse space-x-4 justify-between items-center w-4/5 lg:w-1/2 xl:2/5">
-        <Pillar count="02" label="Learning" />
-        <Image
-          src={'/images/learning-image.png'}
-          alt="Learning Image"
-          width={360}
-          height={270}
-          className="rounded-lg"
-        />
-      </div>
-      <div className="hidden md:flex flex-col md:flex-row space-x-4 justify-between items-center w-4/5 lg:w-1/2 xl:2/5">
-        <Pillar count="03" label="Community" />
-        <Image
-          src={'/images/community-image.png'}
-          alt="Community Image"
-          width={360}
-          height={270}
-          className="rounded-lg"
-        />
-      </div>
-      <div className="flex md:hidden flex-col  space-y-2 w-full px-6">
-        <div className="flex w-full">
-        <Pillar count="01" label="Mentorship" />
+      <div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
+        <div className="flex">
+          <Pillar count="01" label="Mentorship" />
         </div>
-        <div className="flex justify-end">
-          <Image
-            src={'/images/mentorship-image.png'}
-            alt="Mentorship Image"
-            width={172}
-            height={138}
-            className="rounded-lg"
-          />
+        <div className="flex justify-end w-full md:w-2/5 lg:w-1/4">
+          <div className="flex w-1/2 md:w-full">
+            <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
+              <Image
+                src={'/images/mentorship-image.png'}
+                alt="Mentorship Image"
+                layout="fill"
+              />
+            </div>
+          </div>
         </div>
       </div>
-      <div className="flex md:hidden flex-col  space-y-2 w-full px-6">
-      <div className="flex w-full justify-end">
-        <Pillar count="02" label="Learning" />
-      </div>
-        <div className="flex justify-start">
-          <Image
-            src={'/images/learning-image.png'}
-            alt="Learning Image"
-            width={172}
-            height={138}
-            className="rounded-lg"
-          />
+      <div className="flex flex-col md:flex-row-reverse md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6 md:space-x-reverse">
+        <div className="flex justify-end">
+          <Pillar count="02" label="Learning" />
+        </div>
+        <div className="flex md:justify-start w-full md:w-2/5 lg:w-1/4">
+          <div className="flex w-1/2 md:w-full">
+            <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
+              <Image
+                src={'/images/learning-image.png'}
+                alt="Learning Image"
+                layout="fill"
+              />
+            </div>
+          </div>
         </div>
       </div>
-      <div className="flex md:hidden flex-col space-y-2 w-full px-6">
-      <div className="flex w-full">
-        <Pillar count="03" label="Community" />
+      <div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
+        <div className="flex">
+          <Pillar count="03" label="Community" />
         </div>
-        <div className="flex justify-end">
-          <Image
-            src={'/images/community-image.png'}
-            alt="Community Image"
-            width={172}
-            height={138}
-            className="rounded-lg"
-          />
+        <div className="flex justify-end w-full md:w-2/5 lg:w-1/4 ">
+          <div className="flex w-1/2 md:w-full">
+            <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
+              <Image
+                src={'/images/community-image.png'}
+                alt="Community Image"
+                layout="fill"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </section>

src/components/Pillar/Pillar.tsx

@@ -8,7 +8,7 @@ export default function Pillar({
   label: string;
 }) {
   return (
-    <div className="flex max-w-xs md:max-w-sm min-w-[70%] md:min-w-[40%] space-x-4 p-2 md:p-4 lg:p-6 shadow-md md:shadow-none rounded-lg items-center bg-white md:bg-[#09AFC6]">
+    <div className="flex max-w-xs lg:max-w-sm min-w-[70%] md:min-w-[50%] space-x-4 p-2 md:p-4 lg:p-6 shadow-md md:shadow-none rounded-lg items-center bg-white md:bg-[#09AFC6]">
       <p className="text-2xl md:text-4xl font-extrabold md:text-white tracking-wide">
         {count}
       </p>