Merge pull request #103 from AJ-Kulundu/mission-pillar

Author: antosan

public/images/community-image.png

@@ -0,0 +1,61 @@
+import React from 'react';
+import Pillar from '../Pillar/Pillar';
+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 font-bold md:font-light text-2xl md:text-5xl">
+        Our Mission Pillars
+      </p>
+      <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 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 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 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 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>
+  );
+}

public/images/learning-image.png

@@ -8,11 +8,11 @@ export default function Pillar({
   label: string;
 }) {
   return (
-    <div className="flex max-w-xs md:max-w-sm min-w-[50%] md:min-w-[30%]  space-x-4 p-4 border 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>
-      <p className=" truncate text-md md:text-xl capitalize md:text-white tracking-wide">
+      <p className=" truncate text-lg md:text-3xl capitalize md:text-white tracking-wide">
         {label}
       </p>
     </div>

public/images/mentorship-image.png

@@ -4,6 +4,7 @@ import logo from '../../public/reactdevske.svg';
 import Events from '../components/Events/Events';
 import AboutUs from '../components/about-us/about-us';
 import ContactUs from '../components/ContactUs';
+import MissionPillars from '../components/MissionPillars/MissionPillars';
 
 export default function Home() {
   return (
@@ -54,6 +55,7 @@ export default function Home() {
         <div className="flex flex-col py-12 bg-white">
           <AboutUs />
         </div>
+        <MissionPillars />
         <Events />
         <ContactUs />
       </main>