Merge pull request #5 from sonylomo/feat/about-page

Feat/about page

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-ab7aa862'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.j9ro0uk8cfg"
+    "revision": "0.dcn4p1cgnrg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

src/components/Footer.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import logo from "../assets/react.svg";
 import { Link } from "react-router-dom";
 

src/pages/Layout.tsx → src/components/Layout.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import NavBar from "../components/NavBar";
 import Footer from "../components/Footer";
 import { Outlet } from "react-router-dom";

src/components/NavBar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Link } from "react-router-dom";
 import logo from "../assets/react.svg";
 import { CgMenu } from "react-icons/cg";

src/components/aboutUs/Caroussel.tsx

@@ -0,0 +1,40 @@
+import { CarousselProps } from "../../types";
+
+type CarousselDataProps = {
+  CarousselData: CarousselProps[];
+};
+
+const Caroussel = ({ CarousselData }: CarousselDataProps) => {
+  return (
+    <section className="pt-4 sm:pt-16 pb-10 mx-auto w-full max-w-screen-2xl pl-4 lg:pl-14 xl:pl-28">
+      <div
+        className="py-6 grid grid-cols-1 md:grid-cols-2 gap-8 overflow-x-auto scrollbar-hide"
+        style={{
+          gridTemplateColumns: "max-content",
+          gridTemplateRows: "minmax(250px, 300px)",
+          gridAutoFlow: "column",
+          gridAutoColumns: "max-content",
+        }}
+      >
+        {CarousselData.map(({ name, title, image }: CarousselProps) => (
+          <div
+            key={crypto.randomUUID()}
+            className="relative after:block after:relative after:-mt-36 after:h-36 after:w-full after:content-[''] after:z-0 after:rounded-b-2xl after:bg-[linear-gradient(180deg,_rgba(0,0,0,0)_0%,_rgba(0,0,0,0.5)_29.17%,_rgba(0,0,0,0.94)_97.92%)]"
+          >
+            <img
+              className="rounded-2xl w-[300px] h-[300px] object-cover items-center"
+              src={image}
+              alt={name}
+            />
+            <div className="absolute -translate-x-2/4 -translate-y-1/4 left-2/4 top-3/4 text-white text-center z-10 font-medium w-4/5">
+              <p className="pb-2 text-xl">{name}</p>
+              <p className="text-base font-light">{title}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default Caroussel;

src/components/aboutUs/teamData.ts

@@ -0,0 +1,55 @@
+import profile from "../../assets/person.jpeg";
+import { CarousselProps } from "../../types";
+
+export const TeamData: CarousselProps[] = [
+  {
+    name: "Dr. Lawrence Nderu",
+    title: "Principal Investigator",
+    image: profile,
+  },
+  {
+    name: "Dorcas Mwigereri",
+    title: "Co-Investigator",
+    image: profile,
+  },
+  {
+    name: "Felista Mogire",
+    title: "Project Administrator",
+    image: profile,
+  },
+  {
+    name: "John Michael Rono",
+    title: "LLM Algorithm Developer",
+    image: profile,
+  },
+  {
+    name: "Daniel Muiruri",
+    title: "LLM Algorithm Developer",
+    image: profile,
+  },
+  {
+    name: "Millicent Shiatikha",
+    title: "Chatbot Developer",
+    image: profile,
+  },
+  {
+    name: "Derrick Obwatsa",
+    title: "Web Developer",
+    image: profile,
+  },
+  {
+    name: "Elvis Swanya",
+    title: "Web Developer",
+    image: profile,
+  },
+  {
+    name: "Sonia Lomo",
+    title: "Mobile Developer",
+    image: profile,
+  },
+  {
+    name: "Florence Njau",
+    title: "Data Protection Act & AI",
+    image: profile,
+  },
+];

src/index.css

@@ -15,3 +15,14 @@
 * {
   margin: 0;
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hide {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

src/pages/Home.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const Home = () => {
   return <div>Home Hello Mum!</div>;
 };

src/pages/aboutUs/AboutUs.tsx

@@ -0,0 +1,15 @@
+import AboutUsHero from "../aboutUs/sections/Hero";
+import Team from "../aboutUs/sections/Team";
+import Funding from "../aboutUs/sections/Funding";
+
+const AboutUs = () => {
+  return (
+    <div>
+      <AboutUsHero />
+      <Team />
+      <Funding />
+    </div>
+  );
+};
+
+export default AboutUs;

src/pages/aboutUs/sections/Funding.tsx

@@ -0,0 +1,74 @@
+import person from "../../../assets/person.jpeg";
+import jkuat from "../../../assets/jkuat-logo.png";
+import { ProfileCardProps } from "../../../types";
+
+const FundingCard = ({ image, company, name }: ProfileCardProps) => {
+  return (
+    <div className="flex gap-4 items-center">
+      <img src={image} alt={name} className="rounded-full w-16" />
+      <p className="text-light-grey">
+        {name} <br />{" "}
+        <span className="font-medium text-dark-grey">{company}</span>
+      </p>
+    </div>
+  );
+};
+
+const Funding = () => {
+  return (
+    <div className="space-y-10 md:space-y-16 py-6">
+      <h2 className="font-bold text-2xl sm:text-4xl text-center">
+        Funding and Collaborators
+      </h2>
+
+      {/* stakeholders */}
+      <div className="flex flex-col md:flex-row gap-6 md:gap-0 items-center justify-between my-12 w-1/3 mx-auto">
+        <a
+          href="https://www.jkuat.ac.ke/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img src={jkuat} alt="jkuat" className="w-16" />
+        </a>
+        <a
+          href="https://www.jkuat.ac.ke/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img src={jkuat} alt="jkuat" className="w-16" />
+        </a>{" "}
+        <a
+          href="https://www.jkuat.ac.ke/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img src={jkuat} alt="jkuat" className="w-16" />
+        </a>{" "}
+        <a
+          href="https://www.jkuat.ac.ke/"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <img src={jkuat} alt="jkuat" className="w-16" />
+        </a>
+      </div>
+      <div className="border-t border-[#9DA0AC] w-5/6 md:w-2/3 mt-10 mx-auto" />
+
+      {/* Funding and Collaborators */}
+      <div className="w-3/5 mx-auto space-y-6 md:space-y-12 pb-6">
+        <div className="flex flex-col md:flex-row gap-6 md:gap-0 justify-between">
+          <FundingCard image={person} company="JKUAT" name="Dr Lorem Ipsum" />
+          <FundingCard image={person} company="JKUAT" name="Dr Lorem Ipsum" />
+          <FundingCard image={person} company="JKUAT" name="Dr Lorem Ipsum" />
+        </div>
+        <div className="flex flex-col md:flex-row gap-6 md:gap-0 justify-between">
+          <FundingCard image={person} company="JKUAT" name="Dr Lorem Ipsum" />
+          <FundingCard image={person} company="JKUAT" name="Dr Lorem Ipsum" />
+          <FundingCard image={person} company="JKUAT" name="Dr Lorem Ipsum" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Funding;

src/pages/aboutUs/sections/Hero.tsx

@@ -0,0 +1,46 @@
+import banner from "../../../assets/corporate.jpg";
+
+const AboutUsHero = () => {
+  return (
+    <div className="">
+      <div
+        className="relative h-96 w-full flex items-center justify-center flex-col text-white text-center gap-4 bg-cover"
+        style={{
+          backgroundImage: `linear-gradient(to right, rgba(241, 163, 64, 0.6), rgba(0, 0, 0, 0.8)),url(${banner})`,
+        }}
+      >
+        <h1 className="uppercase text-3xl sm:text-5xl font-bold ">
+          Your Awareness is Our Priority
+        </h1>
+        <p className="text-lg sm:text-xl">
+          Lorem, ipsum dolor sit amet consectetur uptatem repudiandae eius.
+        </p>
+      </div>
+      <div className="absolute inset-x-0 mx-auto -translate-y-20 z-10 rounded-xl shadow-xl w-[95%] md:w-[80%] lg:w-2/3 h-auto sm:h-72 bg-white px-4 py-10 sm:px-10 flex flex-col sm:flex-row gap-10 sm:gap-4">
+
+        <div className="px-2 xl:px-8 text-left items-center">
+          <h2 className="font-semibold mb-2 text-xl lg:text-2xl">
+            Objective 1
+          </h2>
+          <p className="text-base sm:text-lg">
+            Vero similique architecto molestias commodi consectetur optio
+            repudiandae culpa temporibus eius beatae, saepe enim in deserunt
+            ipsum quod consequuntur odit suscipit voluptatum.
+          </p>
+        </div>
+        <div className="px-2 xl:px-8 text-left items-center">
+          <h2 className="font-semibold mb-2 text-xl lg:text-2xl">
+            Objective 2
+          </h2>
+          <p className="text-base sm:text-lg">
+            Vero similique architecto molestias commodi consectetur optio
+            repudiandae culpa temporibus eius beatae, saepe enim in deserunt
+            ipsum quod consequuntur odit suscipit voluptatum.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUsHero;

src/pages/aboutUs/sections/Team.tsx

@@ -0,0 +1,13 @@
+import Caroussel from "../../../components/aboutUs/Caroussel";
+import {TeamData} from "../../../components/aboutUs/teamData.ts";
+
+const Team = () => {
+  return (
+    <div className="pt-6 mt-[25rem] sm:mt-72 bg-neutral-grey">
+      <h2 className="font-bold text-2xl sm:text-4xl text-center">Meet the Team</h2>
+      <Caroussel CarousselData={TeamData} />
+    </div>
+  );
+};
+
+export default Team;

src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import Home from "../pages/Home";
-import Layout from '../pages/Layout';
-import AboutUs from '../pages/AboutUs';
+import Layout from '../components/Layout';
+import AboutUs from '../pages/aboutUs/AboutUs';
 
 export const router = createBrowserRouter([
   {

src/types/index.ts

@@ -0,0 +1,13 @@
+// About Us
+
+export type ProfileCardProps = {
+  image: string;
+  company: string;
+  name: string;
+};
+
+export type CarousselProps = {
+    image: string;
+    title: string;
+    name: string;
+}