Merge pull request #193 from acm-ucr/dev

merge to main

src/app/about/page.js

@@ -1,28 +1,51 @@
-import springPicture from "@/public/images/spring/spring24_9.webp";
-import { ABOUT } from "@/data/aboutPage";
+"use client";
+import React from "react";
+import springPicture from "@/public/images/spring/NewImg.webp";
+import { ABOUT } from "@/data/about/About";
 import Title from "@/components/Title";
 import Picture from "@/components/Picture";
 import Subtitle from "@/components/Subtitle";
+import useView from "@/components/useView";
+import Button from "@/components/Button";
 
 const Page = () => {
+ const [inView, ref] = useView();
+
  return (
  <div className="bg-biscuits-green-100 flex flex-col items-center gap-y-10 p-4 md:p-10">
  <Title text="About Us" color="red" />
  <Picture
- classname="flex justify-center"
  x={10}
  y={10}
  image={springPicture}
  alt="Spring 24 Picture"
+ width={855}
+ height={600}
  />
- {ABOUT.map((section, index) => (
- <div key={index} className="mb-8 text-center">
- <Subtitle color="text-biscuits-green-200" text={section.subtitle} />
- <div className="md:text-2xl text-base font-inika md:w-2/3 w-10/12 mx-auto">
- {section.paragraph}
- </div>
- </div>
- ))}
+ <div ref={ref} className="w-full">
+ {ABOUT.map((section, index) => {
+ return (
+ <div key={index} className="mb-8 text-center">
+ <Subtitle
+ color="text-biscuits-green-200"
+ text={section.subtitle}
+ />
+ <div
+ className={`mt-4 md:mt-6 text-lg md:text-xl font-inika md:w-2/3 w-10/12 mx-auto ${
+ inView
+ ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear animate-delay-500`
+ : ""
+ }`}
+ >
+ {section.paragraph}
+ </div>
+ </div>
+ );
+ })}
+ </div>
+ <div className="flex justify-center w-full -mt-4 mb-8">
+ <Button text="Get Involved" link="/involve" />
+ </div>
  </div>
  );
 };

src/app/board/page.js

@@ -4,22 +4,20 @@ import Title from "@/components/Title";
 
 const Page = () => {
  return (
- <div className="flex flex-col bg-biscuits-pink bg-blobs1 md:bg-cover bg-contain bg-repeat-y py-[2%]">
- <div className="flex justify-center items-center p-3">
- <div className="grid grid-cols-1 gap-y-10 animate-fade-down animate-delay-300">
- <Title text="Get To Know Us" color="green" />
- <div className="grid justify-items-center xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
- {BOARD.map((boardMember, index) => (
- <Board
- key={index}
- name={boardMember.name}
- role={boardMember.role}
- yearMajor={boardMember.yearMajor}
- funFact={boardMember.funFact}
- picture={boardMember.picture}
- />
- ))}
- </div>
+ <div className="flex flex-col bg-biscuits-pink bg-blobs1 md:bg-cover bg-contain bg-repeat-y py-[2%] items-center p-3">
+ <div className="grid grid-cols-1 gap-y-10 animate-fade-down animate-delay-300">
+ <Title text="Get To Know Us" color="green" />
+ <div className="grid justify-items-center xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
+ {BOARD.map((boardMember, index) => (
+ <Board
+ key={index}
+ name={boardMember.name}
+ role={boardMember.role}
+ yearMajor={boardMember.yearMajor}
+ funFact={boardMember.funFact}
+ picture={boardMember.picture}
+ />
+ ))}
  </div>
  </div>
  </div>

src/app/events/page.js

@@ -1,7 +1,11 @@
 import CalendarEvents from "@/components/events/CalendarEvents";
 
 const Page = () => {
- return <CalendarEvents />;
+ return (
+ <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-peach">
+ <CalendarEvents />;
+ </div>
+ );
 };
 
 export default Page;

src/app/gallery/[type]/page.js

@@ -1,7 +1,7 @@
 import NotFound from "@/app/not-found";
 import Title from "@/components/Title";
-import Image from "next/image";
-import { PICTURES } from "@/data/gallery/pictures.js";
+import GalleryImage from "@/components/gallery/GalleryImage";
+import { PICTURES } from "@/data/gallery/Pictures.js";
 
 export async function generateStaticParams() {
  const allPages = ["fall", "winter", "spring", "past"];
@@ -21,10 +21,10 @@ const Page = ({ params }) => {
  ) {
  return (
  <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-green-100 flex flex-col text-7xl items-center pt-10">
- <Title text={PAGES[params.type]} food={"chip"} />
+ <Title text={PAGES[params.type]} food="chip" />
  <div className="grid grid-cols-1 lg:grid-cols-3 w-4/5 py-10 gap-2">
  {PICTURES[params.type].map((image, index) => (
- <Image
+ <GalleryImage
  src={image}
  alt={`${PAGES[params.type]}_${index}`}
  key={index}

src/app/gallery/page.js

@@ -1,62 +1,25 @@
+"use client";
+import useView from "@/components/useView";
 import React from "react";
-import Image from "next/image";
 import Title from "@/components/Title";
-import Subtitle from "@/components/Subtitle";
-import Hoverable from "@/components/gallery/Hoverable";
-import { quarterlyEvents } from "@/data/gallery/QuarterlyEvents";
-import Tabling1 from "@/public/images/tabling/tabling_1.webp";
-import Tabling2 from "@/public/images/tabling/tabling_2.webp";
-import Tabling3 from "@/public/images/tabling/tabling_3.webp";
-import PastEvent from "@/public/images/past/past_3.webp";
+import TablingEvents from "@/components/gallery/TablingEvents";
+import QuarterlyEvents from "@/components/gallery/QuarterlyEvents";
+import PastEvents from "@/components/gallery/PastEvents";
 
 const Page = () => {
+ const [inView, ref] = useView();
  return (
  <div className="bg-blobs1 md:bg-cover bg-contain bg-biscuits-green-100 min-h-screen p-7 w-full flex flex-col items-center">
- <div className="flex justify-center mb-10">
+ <div
+ ref={ref}
+ className={`${inView && "animate-fade-up"} flex justify-center mb-10`}
+ >
  <Title text="Gallery" food="chip" />
  </div>
 
- <div className="mb-14">
- <div className="mb-10 flex justify-center">
- <Subtitle text="Food Tabling" color="text-biscuits-green-200" />
- </div>
-
- <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 place-items-center">
- <Image src={Tabling1} alt="Tabling" />
- <Image src={Tabling2} alt="Tabling" />
- <Image src={Tabling3} alt="Tabling" />
- </div>
- </div>
-
- <div className="mb-20">
- <div className="mb-10 flex justify-center">
- <Subtitle text="Quarterly Events" color="text-biscuits-green-200" />
- </div>
-
- <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 place-items-center text-black">
- {quarterlyEvents.map((QuarterlyEvents, index) => (
- <Hoverable
- key={index}
- link={QuarterlyEvents.link}
- image={QuarterlyEvents.photo}
- text={QuarterlyEvents.title}
- />
- ))}
- </div>
- </div>
-
- <div className="mb-14">
- <div className="mb-10 flex justify-center">
- <Subtitle text="Past Events" color="text-biscuits-green-200" />
- </div>
- <div className="text-textColor">
- <Hoverable
- link="/gallery/past"
- image={PastEvent}
- text="Past Events"
- />
- </div>
- </div>
+ <TablingEvents />
+ <QuarterlyEvents />
+ <PastEvents />
  </div>
  );
 };

src/app/not-found.js

@@ -15,7 +15,7 @@ const NotFound = () => {
  <Title text="Error" color="red" />
  <Title text="4O4" />
  </div>
- <Subtitle text="Page not found" color={"text-biscuits-red-200"} />
+ <Subtitle text="Page not found" color="text-biscuits-red-200" />
  </div>
  </div>
  </div>

src/app/page.js

@@ -5,7 +5,7 @@ import Upcoming from "@/components/home/Upcoming";
 
 const Home = () => {
  return (
- <div className="flex flex-col justify-center items-center gap-y-36 bg-biscuits-peach bg-blobs1 md:bg-cover bg-contain bg-repeat-y">
+ <div className="flex flex-col justify-center items-center bg-biscuits-peach bg-blobs1 md:bg-cover bg-contain bg-repeat-y">
  <Landing />
  <Goal />
  <Involve />

src/app/support/page.js

@@ -1,9 +1,9 @@
 import Support from "@/components/support/Support";
 const Page = () => {
  return (
- <>
+ <div className="bg-biscuits-orange-300">
  <Support />
- </>
+ </div>
  );
 };
 

src/components/Footer.jsx

@@ -4,8 +4,8 @@ import Link from "next/link";
 const Footer = () => {
  return (
  <div className="flex drop-shadow items-center p-4 bg-biscuits-peach justify-between text-biscuits-purple-200 font-omc text-2xl md:text-3xl text-center">
- <div className="hidden md:flex tracking-widest"> H4B at UCR </div>
- <div className="flex md:hidden tracking-widest"> H4B </div>
+ <div className="hidden md:flex tracking-widest">H4B at UCR</div>
+ <div className="flex md:hidden tracking-widest">H4B</div>
  <div className="flex flex-row space-x-2 md:space-x-5 ">
  {FOOTER.map((social, index) => (
  <Link

src/components/Navigation.jsx

@@ -2,7 +2,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import React, { useState } from "react";
-import logo from "@/public/images/logo.webp";
+import logo from "@/public/images/H4BNavLogo.webp";
 import { IoMdMenu } from "react-icons/io";
 import { ITEMS } from "@/data/Navigation.js";
 
@@ -26,7 +26,7 @@ const NavBar = () => {
  <Image
  src={logo}
  alt="Logo"
- className="w-32 hover:opacity-60 duration-300"
+ className="w-14 hover:opacity-60 duration-300"
  />
  </Link>
  <div className="hidden md:flex space-x-4">
@@ -48,7 +48,7 @@ const NavBar = () => {
  ))}
  </div>
  <div className="flex md:hidden" onClick={handleNav}>
- <IoMdMenu className="text-3xl text-black hover:cursor-pointer hover:text-biscuits-purple-200" />
+ <IoMdMenu className="text-3xl hover:cursor-pointer text-biscuits-purple-200" />
  </div>
  </div>
 

src/components/Picture.jsx

@@ -1,12 +1,14 @@
 import Image from "next/image";
 
-const Picture = ({ x, y, image, alt }) => {
+const Picture = ({ x, y, image, alt, width = 500, height = 300 }) => {
  return (
  <div className="w-fit h-fit">
  <Image
  style={{ boxShadow: `${x}px ${y}px 0px 0px #7B3F00` }}
  src={image}
  alt={alt}
+ width={width}
+ height={height}
  />
  </div>
  );

src/components/Subtitle.jsx

@@ -1,7 +1,17 @@
+"use client";
+import React from "react";
+import useView from "./useView";
+
 const Subtitle = ({ color, text }) => {
+ const [inView, ref] = useView();
  return (
  <div
- className={`font-bold font-shrikhand text-center text-4xl md:text-7xl ${color}`}
+ ref={ref}
+ className={`my-2 font-bold font-shrikhand text-center text-4xl md:text-7xl ${color} ${
+ inView
+ ? `animate-fade-up animate-once animate-duration-[1500ms] animate-ease-linear`
+ : ""
+ }`}
  >
  {text}
  </div>

src/components/Title.jsx

@@ -21,7 +21,7 @@ const Title = ({ text, food, color }) => {
  </div>
 
  {food && COOKIES[food] && (
- <div className="ml-4 ml-2 flex items-center">
+ <div className="ml-2 flex items-center">
  <Image
  src={COOKIES[food]}
  alt={`${food} cookies`}

src/components/board/Board.jsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 const Board = ({ name, role, yearMajor, funFact, picture }) => {
  const [inView, ref] = useView();
  return (
- <div className="flex-col text-center justify-center w-64 h-100 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]">
+ <div className="flex-col text-center justify-center w-64 h-96 bg-biscuits-yellow shadow-[20px_-15px_0px_rgb(190,156,106)]">
  <Image
  src={picture}
  alt="picture"
@@ -15,7 +15,7 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
 
  <div
  ref={ref}
- className={`text-biscuits-green-200 font-shrikhand p-1 -translate-y-1 text-3xl ${
+ className={`text-biscuits-green-200 font-shrikhand text-3xl ${
  inView && "animate-fade-left animate-delay-400"
  }`}
  >
@@ -24,7 +24,7 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
 
  <div
  ref={ref}
- className={`text-biscuits-green-200 font-omc p-1 -translate-y-2 text-xl ${
+ className={`text-biscuits-green-200 font-omc text-xl ${
  inView && "animate-fade-right animate-delay-400"
  }`}
  >

src/components/events/CalendarEvents.jsx

@@ -31,8 +31,11 @@ const CalendarEvents = () => {
  return (
  <div className="relative flex flex-col">
  {/* Calendar Section */}
- <section className="w-full flex-grow flex justify-center items-center">
- <div className="w-full h-[95vh] relative">
+ <span className="-rotate-90 text-biscuits-purple-200 font-shrikhand text-6xl items-center w-[120px] absolute lg:bottom-1/4 lg:block hidden">
+ {date.toLocaleString("default", { month: "long" })}
+ </span>
+ <section className="w-full flex-grow flex justify-center items-center gap-x-4">
+ <div className="w-5/6 h-[95vh] relative">
  <Calendar
  className="w-full m-0 p-0 2xl:text-3xl text-xl"
  date={date}