From 53746bea93d720e492ccbc843d5e90bc520d8254 Mon Sep 17 00:00:00 2001
From: TrudyCyns <gcyn51a@gmail.com>
Date: Tue, 18 Jul 2023 09:04:42 +0300
Subject: [PATCH 1/2] Fix container typo

---
 pages/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index 2aed847..f4bebd8 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -21,7 +21,7 @@ export default function Home() {
     <section className='grid'>
       <div className='flex justify-center h-screen w-full relative'>
         <Image src={bgImg} layout='fill' objectFit='cover' />
-        <div className='containe md:mx-auto  flex-col justify-evenly text-white  text-sm absolute w-full p-5  text-center top-[300px] bg- backdrop-blur-sm bg-black/30 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg'>
+        <div className='container md:mx-auto  flex-col justify-evenly text-white  text-sm absolute w-full p-5  text-center top-[300px] bg- backdrop-blur-sm bg-black/30 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg'>
           <h1 className=' text-white text-[30px] md:text-[60px]  '>
             Open Source Community <br />
             Africa{'{'}

From 0343ac50dcbbe84112e9dd476215e5a3527393f3 Mon Sep 17 00:00:00 2001
From: TrudyCyns <gcyn51a@gmail.com>
Date: Tue, 18 Jul 2023 09:09:24 +0300
Subject: [PATCH 2/2] Minor Changes

---
 pages/index.jsx | 69 +++++++++++++++++++++++++------------------------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/pages/index.jsx b/pages/index.jsx
index f4bebd8..9d04fdb 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -1,7 +1,7 @@
-import Image from 'next/image';
-import Card from '../components/Card';
-import cardData from '../components/metadata/metadata.js';
-import bgImg from '../public/images/oscahomepage.jpg';
+import Image from "next/image";
+import Card from "../components/Card";
+import cardData from "../components/metadata/metadata.js";
+import bgImg from "../public/images/oscahomepage.jpg";
 
 export default function Home() {
   const cardElement = cardData.map((data) => {
@@ -18,17 +18,17 @@ export default function Home() {
   });
 
   return (
-    <section className='grid'>
-      <div className='flex justify-center h-screen w-full relative'>
-        <Image src={bgImg} layout='fill' objectFit='cover' />
-        <div className='container md:mx-auto  flex-col justify-evenly text-white  text-sm absolute w-full p-5  text-center top-[300px] bg- backdrop-blur-sm bg-black/30 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg'>
-          <h1 className=' text-white text-[30px] md:text-[60px]  '>
+    <section className="grid">
+      <div className="flex justify-center h-screen w-full relative">
+        <Image src={bgImg} layout="fill" objectFit="cover" />
+        <div className="container md:mx-auto  flex-col justify-evenly text-white text-sm absolute w-full p-5  text-center top-[300px] bg- backdrop-blur-sm bg-black/30 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg">
+          <h1 className=" text-white text-[30px] md:text-[60px]  ">
             Open Source Community <br />
-            Africa{'{'}
-            <span className='text-orange-400 '>Kampala</span>
-            {'}'}
+            Africa{"{"}
+            <span className="text-orange-400 ">Kampala</span>
+            {"}"}
           </h1>
-          <p className='mt-10  '>
+          <p className="mt-10  ">
             Open Source Community Africa (OSCA) is a community for open source
             lovers, enthusiasts, advocates and experts within and across Africa,
             with the sole aim of increasing the rate of credible open source
@@ -37,48 +37,49 @@ export default function Home() {
         </div>
       </div>
 
-      <div className='text-center p-20 bg-slate-300'>
-        <h2 className='text-center pb-10'>What is OSCA?</h2>
-        <p className='md:px-10'>
+      <div className="text-center p-20 bg-slate-300">
+        <h2 className="text-center pb-10">What is OSCA?</h2>
+        <p className="md:px-10">
           Open Source Community Africa (OSCA) is a community of open source
           lovers, enthusiasts, advocates and experts across the African
           continent. OSCA's sole goal is to increase the rate of credible
           countributions to open source by African coders, writers, designers
           and everyone involved in the tech space to local & global projects;
-          changing the perception of Africans from just a billion users to the{' '}
+          changing the perception of Africans from just a billion users to the{" "}
           <strong> NEXT BILLION CREATORS </strong>
         </p>
       </div>
-      <div className='container mx-auto text-center mt-[3rem] h-full'>
+      <div className="container mx-auto text-center mt-[3rem] h-full">
         <h2>Why OSCA?</h2>
         <iframe
-          className='container mx-auto w-[560px]'
-          width='560'
-          height='315'
-          src='https://www.youtube.com/embed/oylCYRfk0NQ'
-          title='YouTube video player'
-          frameBorder=''
-          allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
-          allowFullScreen></iframe>
+          className="container mx-auto w-[560px]"
+          width="560"
+          height="315"
+          src="https://www.youtube.com/embed/oylCYRfk0NQ"
+          title="YouTube video player"
+          frameBorder=""
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        ></iframe>
       </div>
 
-      <div className='container mx-auto mt-20 max-w-6xl mx-auto'>
-        <h2 className='text-center py-20 bg-slate-300'>The Team</h2>
-        <div className='grid md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center pb-20 px-8 bg-slate-300'>
+      <div className="container mx-auto mt-20 max-w-6xl mx-auto">
+        <h2 className="text-center py-20 bg-slate-300">The Team</h2>
+        <div className="grid md:grid-cols-2 xl:grid-cols-3 gap-8 justify-center pb-20 px-8 bg-slate-300">
           {cardElement}
         </div>
       </div>
-      <div className='flex flex-col md:flex-row justify-center text-center mt-20'>
-        <div className='md:mr-12'>
-          <h3 className='text-xl'>Core Values</h3>
+      <div className="flex flex-col md:flex-row justify-center text-center mt-20">
+        <div className="md:mr-12">
+          <h3 className="text-xl">Core Values</h3>
           <ul>
             <li>Creativity and Excellence</li>
             <li>Boldness and Integrity in operations</li>
             <li>Developer Nurturing and Skillset enhancement</li>
           </ul>
         </div>
-        <div className='mt-5 md:mt-0'>
-          <h3 className='text-xl'>Benefits</h3>
+        <div className="mt-5 md:mt-0">
+          <h3 className="text-xl">Benefits</h3>
           <ul>
             <li>Be part of Africa's next Billion Creators</li>
             <li>Networking with best developer talent</li>