Merge pull request #79 from acm-ucr/menthy/events

fix events

src/app/projects/tanzania/page.js

@@ -1,7 +1,14 @@
-import React from "react";
+import Tanzania from "@/components/projects/Tanzania";
+import Header from "@/components/projects/Header";
+import header from "../../../../public/images/tanzania/tanzaniaHeader.webp";
 
 const page = () => {
-  return <div>page</div>;
+  return (
+    <>
+      <Header img={header.src} title="Project" />
+      <Tanzania />
+    </>
+  );
 };
 
 export default page;

src/components/home/Event.jsx

@@ -5,15 +5,13 @@ const getTimeString = (date) => {
 };
 const Event = ({ start, end, location, name, descripton, color }) => {
   return (
-    <div className="bg-ewb-blue-100 flex w-full font-bold">
+    <div className="bg-ewb-blue-100 flex flex-col md:flex-row w-full font-bold">
       <div
-        className={`text-4xl text-white text-center w-1/2 md:w-1/6 aspect-square flex flex-col items-center justify-center ${COLORS[color].bg}`}
+        className={`text-4xl text-white text-center w-full md:w-1/3 lg:w-1/4 md:aspect-square flex flex-col items-center justify-center py-2 ${COLORS[color].bg}`}
       >
         <div>{start.toString().split(" ")[1]}</div>
         <div>{start.getDate()}</div>
-        <div className="font-normal text-lg">
-          {getTimeString(start)}- {getTimeString(end)}
-        </div>
+        <div className="font-normal text-lg">{getTimeString(start)}</div>
       </div>
       <div className="p-3 w-5/6 text-ewb-black ">
         <div className={`text-2xl ${COLORS[color].text}`}>{name}</div>

src/components/home/Events.jsx

@@ -1,9 +1,11 @@
 import { EVENTS } from "@/data/mockEvents";
 import Event from "./Event";
+import Title from "../Title";
 
 const Events = () => {
   return (
     <div className="w-7/12 flex flex-col items-center justify-center gap-4">
+      <Title subTitle="CHECK OUT WHAT IS NEW" title="UPCOMING EVENTS" />
       {EVENTS.map((event, index) => (
         <Event
           key={index}