Merge pull request #82 from acm-ucr/dev

merge to main

.github/workflows/nextjs.yml

@@ -34,7 +34,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
       - name: Setup Pages
         uses: actions/configure-pages@v3
         with:

.github/workflows/pull-request.yaml

@@ -14,7 +14,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16.14.2"
+          node-version: "18"
       - run: npm ci
       - run: npm run check
   lint:
@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16.14.2"
+          node-version: "18"
       - run: npm ci
       - run: npm run eslint
   build:
@@ -38,6 +38,6 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "16.14.2"
+          node-version: "18"
       - run: npm ci
       - run: npm run build

package.json

@@ -14,11 +14,11 @@
   },
   "dependencies": {
     "bootstrap": "^5.3.0",
-    "next": "^13.5.4",
+    "next": "^14.0.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1"
+    "react-icons": "^4.11.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.15",

src/app/board/page.js

@@ -1,5 +1,28 @@
+import { BOARD } from "../../data/mockBoard";
+import Board from "../../components/board/Board";
+import Title from "@/components/Title";
+
 const page = () => {
-  return <div>page</div>;
+  return (
+    <div className="relative w-full flex flex-col items-center mt-14">
+      <div className="absolute w-1/2 aspect-square bg-ewb-blue-100/40 rounded-full -translate-y-14" />
+      <Title title="MEET THE TEAM" />
+      <div className="relative grid grid-cols-4 w-9/12 gap-8 mt-14">
+        {BOARD.map((item, index) => (
+          <Board
+            key={index}
+            name={item.name}
+            position={item.position}
+            grade={item.grade}
+            major={item.major}
+            links={item.links}
+            pronouns={item.pronouns}
+            picture={item.picture}
+          />
+        ))}
+      </div>
+    </div>
+  );
 };
 
 export default page;

src/app/page.js

@@ -1,14 +1,18 @@
 import About from "@/components/home/About";
 import Landing from "@/components/home/Landing";
 import Projects from "@/components/home/Projects";
-import WhyJoin from "@/components/home/Contacts";
+import WhyJoin from "@/components/home/WhyJoin";
+import Events from "@/components/home/Events";
+import Join from "@/components/home/Join";
 const Home = () => {
   return (
     <>
       <Landing />
       <About />
       <WhyJoin />
       <Projects />
+      <Events />
+      <Join />
     </>
   );
 };

src/app/projects/air-quality-system/page.js

@@ -1,5 +1,14 @@
+import AirQuality from "@/components/projects/ AirQuality";
+import Header from "@/components/projects/Header";
+import header from "../../../../public/images/airQualitySystem/AirQualitySystemHeader.webp";
+
 const page = () => {
-  return <div>page</div>;
+  return (
+    <>
+      <Header img={header.src} title="Air Quality System" />
+      <AirQuality />
+    </>
+  );
 };
 
 export default page;

src/app/projects/costa-rica/page.js

@@ -1,7 +1,15 @@
 import React from "react";
+import CostaRica from "@/components/projects/CostaRica";
+import Header from "@/components/projects/Header";
+import header from "../../../../public/images/costaRica/CostaRicaHeader.webp";
 
 const page = () => {
-  return <div>page</div>;
+  return (
+    <>
+      <Header img={header.src} title="Costa Rica Project" />
+      <CostaRica />
+    </>
+  );
 };
 
 export default page;

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/ArrowLink.jsx

@@ -4,7 +4,7 @@ const ArrowLink = ({ text, link }) => {
   return (
     <Link
       href={link}
-      className="no-underline text-ewb-blue-200 hover:text-ewb-blue-200 flex items-center hover:-translate-y-0.5 duration-300"
+      className="no-underline text-ewb-blue-200 hover:text-ewb-blue-200 flex items-center hover:-translate-y-0.5 duration-300 text-lg"
     >
       {text} <BiRightArrowAlt />
     </Link>

src/components/Footer.jsx

@@ -1,5 +1,39 @@
+import whiteLogo from "../../public/assets/whiteLogo.svg";
+import Image from "next/image";
+import Link from "next/link";
+import { ICONS } from "@/data/icons";
+import { LINKS } from "@/data/links";
+
 const Footer = () => {
-  return <div>Footer</div>;
+  return (
+    <div className="w-full bg-ewb-blue-200 border-t-[20px] border-t-ewb-green pt-32 flex justify-between">
+      <div className="flex items-end m-3 gap-3 text-white font-bold text-xl w-1/2">
+        <Image src={whiteLogo} alt="EWB Logo" />
+        <p className="text-xs md:text-lg">EWB at UCR</p>
+      </div>
+
+      <div className="text-right text-white text-sm flex flex-col m-0 p-0 mx-4 w-1/2">
+        <div className="flex flex-row ml-20 self-end">
+          {LINKS.map((social, index) => (
+            <Link
+              key={index}
+              href={social.link}
+              className="no-underline text-white hover:text-ewb-white mx-1 flex flex-col items-center hover:-translate-y-0.5 duration-300"
+            >
+              <icons className="text-2xl">{ICONS[social.text]}</icons>
+            </Link>
+          ))}
+        </div>
+        <div className="py-2">
+          <div>900 University Ave</div>
+          <div>Riverside, CA 92521</div>
+          <div>United States</div>
+          <div>[email protected]</div>
+          <div>619-395-3534</div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default Footer;