Merge pull request #151 from acm-ucr/dev

main
acm-ucr · Aug 3, 2024 · d71afb1 · d71afb1
2 parents c707e53 + cae0fa1
commit d71afb1
Show file tree

Hide file tree

Showing 32 changed files with 461 additions and 224 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,8 @@
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^4.10.1",
- "react-big-calendar": "^1.11.3"
+ "react-big-calendar": "^1.11.3",
+ "tailwindcss-animated": "^1.0.1"
  },
  "devDependencies": {
  "autoprefixer": "^10.4.15",

diff --git a/public/images/mobilelanding.webp b/public/images/mobilelanding.webp
diff --git a/src/app/about/page.js b/src/app/about/page.js
@@ -18,7 +18,7 @@ const Page = () => {
  {ABOUT.map((section, index) => (
  <div key={index} className="mb-8 text-center">
  <Subtitle color="text-biscuits-green-200" text={section.subtitle} />
- <div className="text-2xl font-inika w-2/3 mx-auto">
+ <div className="md:text-2xl text-base font-inika md:w-2/3 w-10/12 mx-auto">
  {section.paragraph}
  </div>
  </div>

diff --git a/src/app/board/page.js b/src/app/board/page.js
@@ -6,9 +6,9 @@ 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">
+ <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 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-y-16 gap-x-32">
+ <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}

diff --git a/src/app/gallery/[type]/page.js b/src/app/gallery/[type]/page.js
@@ -1,5 +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";
 
 export async function generateStaticParams() {
  const allPages = ["fall", "winter", "spring", "past"];
@@ -8,15 +10,27 @@ export async function generateStaticParams() {
 
 const Page = ({ params }) => {
  const PAGES = {
- fall: "Fall",
- winter: "Winter",
- spring: "Spring",
+ fall: "Fall 2023",
+ winter: "Winter 2024",
+ spring: "Spring 2024",
  past: "Past",
  };
- if (PAGES.hasOwnProperty(params.type)) {
+ if (
+ PAGES.hasOwnProperty(params.type) &&
+ PICTURES.hasOwnProperty(params.type)
+ ) {
  return (
- <div className="text-7xl">
+ <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"} />
+ <div className="grid grid-cols-1 lg:grid-cols-3 w-4/5 py-10 gap-2">
+ {PICTURES[params.type].map((image, index) => (
+ <Image
+ src={image}
+ alt={`${PAGES[params.type]}_${index}`}
+ key={index}
+ />
+ ))}
+ </div>
  </div>
  );
  } else {

diff --git a/src/app/gallery/page.js b/src/app/gallery/page.js
@@ -11,7 +11,7 @@ import PastEvent from "@/public/images/past/past_3.webp";
 
 const Page = () => {
  return (
- <div className="bg-green-100 min-h-screen p-7 w-full flex flex-col items-center">
+ <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">
  <Title text="Gallery" food="chip" />
  </div>
@@ -21,7 +21,7 @@ const Page = () => {
  <Subtitle text="Food Tabling" color="text-biscuits-green-200" />
  </div>
 
- <div className="grid grid-cols-3 gap-8 place-items-center">
+ <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" />
@@ -33,7 +33,7 @@ const Page = () => {
  <Subtitle text="Quarterly Events" color="text-biscuits-green-200" />
  </div>
 
- <div className="grid grid-cols-3 gap-8 place-items-center text-black">
+ <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 place-items-center text-black">
  {quarterlyEvents.map((QuarterlyEvents, index) => (
  <Hoverable
  key={index}
@@ -50,7 +50,11 @@ const Page = () => {
  <Subtitle text="Past Events" color="text-biscuits-green-200" />
  </div>
  <div className="text-textColor">
- <Hoverable link="/past" image={PastEvent} text="Past Events" />
+ <Hoverable
+ link="/gallery/past"
+ image={PastEvent}
+ text="Past Events"
+ />
  </div>
  </div>
  </div>

diff --git a/src/app/involve/page.js b/src/app/involve/page.js
@@ -5,7 +5,7 @@ import Title from "@/components/Title";
 
 const Page = () => {
  return (
- <div className="flex flex-col items-center bg-biscuits-peach bg-blobs1 md:bg-cover bg-contain bg-repeat-y">
+ <div className="flex flex-col items-center bg-biscuits-peach bg-blobs1 bg-contain bg-repeat-y">
  <Title text="Involvement" food="swirl" color="biscuits-grey-100" />
  <Tabling />
  <FAQs />

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -33,10 +33,11 @@ export const metadata = {
 
 export default function RootLayout({ children }) {
  return (
- <html lang="en">
- <body
- className={`${inika.className} ${shrikhand.variable} ${omc.variable} ${gurajada.variable}`}
- >
+ <html
+ lang="en"
+ className={`${inika.className} ${shrikhand.variable} ${omc.variable} ${gurajada.variable}`}
+ >
+ <body>
  <NavBar />
  {children}
  <Footer />

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
@@ -6,7 +6,7 @@ const Button = ({ text, link }) => {
  <Link
  href={link}
  target="_blank"
- className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-2.4 px-8 rounded-full font-bold text-2xl duration-300 hover:opacity-80"
+ className="w-fit bg-biscuits-pinkish text-biscuits-textColor font-inika py-2 px-10 md:py-3 md:px-12 rounded-full font-bold text-3xl duration-300 hover:opacity-80"
  >
  {text}
  </Link>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -3,11 +3,16 @@ import Link from "next/link";
 
 const Footer = () => {
  return (
- <div className="flex items-center p-2 bg-biscuits-peach justify-between text-biscuits-purple-200 font-omc text-3xl">
- <div className="flex tracking-widest"> H4B at UCR </div>
- <div className="flex flex-row space-x-2">
+ <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="flex flex-row space-x-2 md:space-x-5 ">
  {FOOTER.map((social, index) => (
- <Link key={index} href={social.link}>
+ <Link
+ className="transition ease-in-out hover:-translate-y-1"
+ key={index}
+ href={social.link}
+ >
  {social.icon}
  </Link>
  ))}

diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
@@ -14,11 +14,12 @@ const NavBar = () => {
  };
  return (
  <>
- <div className="sticky top-0 z-10">
+ <div className="sticky top-0 z-10 drop-shadow">
  <div className="bg-biscuits-peach px-8 py-1 flex items-center justify-between">
  <Link
  onClick={() => {
  setSelected("");
+ setNav(false);
  }}
  href="/"
  >

diff --git a/src/components/Subtitle.jsx b/src/components/Subtitle.jsx
@@ -1,6 +1,10 @@
 const Subtitle = ({ color, text }) => {
  return (
- <div className={`font-bold font-shrikhand text-7xl ${color}`}>{text}</div>
+ <div
+ className={`font-bold font-shrikhand text-center text-4xl md:text-7xl ${color}`}
+ >
+ {text}
+ </div>
  );
 };
 

diff --git a/src/components/Title.jsx b/src/components/Title.jsx
@@ -14,19 +14,20 @@ const Title = ({ text, food, color }) => {
  <div className="flex flex-row justify-center">
  <div className="inset-0 flex justify-center items-top p-3">
  <div
- className={`text-shadow ${darkColor} font-omc text-8xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor}`}
+ className={`text-shadow ${darkColor} font-omc text-5xl md:text-8xl mb-2 drop-shadow left-1 bottom-0.5 ${lightColor} text-center`}
  >
  {text}
  </div>
  </div>
 
  {food && COOKIES[food] && (
- <div className="ml-4">
+ <div className="ml-4 ml-2 flex items-center">
  <Image
  src={COOKIES[food]}
  alt={`${food} cookies`}
  width={100}
  height={100}
+ className="w-12 h-12 md:w-24 md:h-24"
  />
  </div>
  )}

diff --git a/src/components/board/Board.jsx b/src/components/board/Board.jsx
@@ -1,5 +1,8 @@
+"use client";
+import useView from "@/components/useView";
 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)]">
  <Image
@@ -10,19 +13,39 @@ const Board = ({ name, role, yearMajor, funFact, picture }) => {
  height={100}
  />
 
- <div className="text-biscuits-green-200 font-shrikhand p-1 -translate-y-1 text-3xl ">
+ <div
+ ref={ref}
+ className={`text-biscuits-green-200 font-shrikhand p-1 -translate-y-1 text-3xl ${
+ inView && "animate-fade-left animate-delay-400"
+ }`}
+ >
  {name}
  </div>
 
- <div className="text-biscuits-green-200 font-omc p-1 -translate-y-2 text-xl">
+ <div
+ ref={ref}
+ className={`text-biscuits-green-200 font-omc p-1 -translate-y-2 text-xl ${
+ inView && "animate-fade-right animate-delay-400"
+ }`}
+ >
  {role}
  </div>
 
- <div className="text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm">
+ <div
+ ref={ref}
+ className={`text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm ${
+ inView && "animate-fade-left animate-delay-400"
+ }`}
+ >
  {yearMajor}
  </div>
 
- <div className="text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm">
+ <div
+ ref={ref}
+ className={`text-biscuits-gray-200 font-inika p-1 -translate-y-3 font-bold text-sm ${
+ inView && "animate-fade-left animate-delay-400"
+ }`}
+ >
  {funFact}
  </div>
  </div>

diff --git a/src/components/events/CalendarEvents.jsx b/src/components/events/CalendarEvents.jsx
@@ -1,35 +1,40 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import "react-big-calendar/lib/css/react-big-calendar.css";
 import { Calendar, momentLocalizer } from "react-big-calendar";
-import { useState } from "react";
+import CustomEvent from "./CustomEvents";
+import CustomHeader from "./CustomHeader";
+import CustomToolbar from "./CustomToolbar";
 
 const mLocalizer = momentLocalizer(moment);
+
 const CalendarEvents = () => {
  const [date, setDate] = useState(new Date());
  const dummyEvents = [
  {
- title: "Tabling event",
- start: new Date(2024, 7, 20, 10, 0),
+ title: "Tabling event 1",
+ start: new Date(2024, 7, 5, 10, 0),
  end: new Date(2024, 7, 5, 11, 0),
  location: "WCH",
  summary: "the best event",
  },
  {
- title: "Tabling event",
- start: new Date(2024, 6, 20, 10, 0),
+ title: "Tabling event 2",
+ start: new Date(2024, 6, 5, 10, 0),
  end: new Date(2024, 6, 5, 11, 0),
  location: "WCH",
  summary: "even better event",
  },
  ];
+
  return (
- <section className="w-full flex justify-center items-center flex-col">
- <div className="mb-5 w-11/12 flex justify-center items-center">
- <div className="h-[110vh] w-full relative">
+ <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">
  <Calendar
- className="w-full m-0 p-0 text-3xl"
+ className="w-full m-0 p-0 2xl:text-3xl text-xl"
  date={date}
  onNavigate={(newDate) => {
  setDate(newDate);
@@ -38,10 +43,36 @@ const CalendarEvents = () => {
  localizer={mLocalizer}
  defaultView="month"
  views={["month"]}
+ components={{
+ event: CustomEvent,
+ header: CustomHeader,
+ toolbar: CustomToolbar,
+ }}
+ onSelectEvent={(event) => setSelectedEvent(event)}
+ eventPropGetter={() => {
+ return {
+ className:
+ "!p-0 !active:ring-0 !focus:outline-0 !bg-transparent",
+ };
+ }}
+ dayPropGetter={(event) => {
+ return {
+ className: `${
+ new Date(event).toLocaleDateString() ==
+ new Date().toLocaleDateString()
+ ? "!bg-biscuits-orange"
+ : "!bg-white"
+ }`,
+ style: {
+ margin: 0,
+ padding: 0,
+ },
+ };
+ }}
  />
  </div>
- </div>
- </section>
+ </section>
+ </div>
  );
 };
 

diff --git a/src/components/events/CustomEvents.jsx b/src/components/events/CustomEvents.jsx
@@ -1,3 +1,25 @@
-const CustomEvents = () => {};
+import React from "react";
 
-export default CustomEvents;
+const CustomEvent = ({ event }) => {
+ const getColorClass = () => {
+ if (event.title.includes("Tabling")) {
+ return "bg-biscuits-pinkTabling";
+ }
+ if (event.title.includes("Event")) {
+ return "bg-biscuits-orangeEvent";
+ }
+ return "bg-biscuits-blueResources";
+ };
+
+ const colorClass = getColorClass();
+
+ return (
+ <div className={`rounded-lg p-2 mb-2 ${colorClass}`}>
+ <p className="text-black truncate text-center text-sm font-shrikhand">
+ {event.title}
+ </p>
+ </div>
+ );
+};
+
+export default CustomEvent;
diff --git a/src/components/events/CustomHeader.jsx b/src/components/events/CustomHeader.jsx
@@ -1,3 +1,11 @@
-const CustomHeader = () => {};
+import React from "react";
+
+const CustomHeader = ({ label }) => {
+ return (
+ <div className="font-bold font-shrikhand text-2xl 2xl:text-3xl 2xl:py-3 py-2 uppercase text-biscuits-purple-100 text-shadow-biscuits-purple-200">
+ {label}
+ </div>
+ );
+};
 
 export default CustomHeader;