Merge master->about page

package.json

@@ -26,6 +26,7 @@
     "react-firebase-hooks": "^5.1.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.3.0",
+    "react-use-measure": "^2.1.7",
     "recharts": "^2.15.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"

src/app/dashboard/page.tsx

@@ -21,7 +21,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Events</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <FaCalendarAlt />
             </span>
             <p className="text-center text-sm sm:text-base">
@@ -33,7 +33,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Projects</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <BsPcDisplay />
             </span>
             <p className="text-center text-sm sm:text-base">
@@ -45,7 +45,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Inventory</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <FaBoxOpen />
             </span>
             <p className="text-center text-sm sm:text-base">
@@ -57,7 +57,7 @@ export default function Dashboard() {
             className="flex flex-col items-center gap-4 rounded-md border border-gray-200 bg-[#fafafa] p-4 transition-all hover:bg-gray-200 sm:gap-6 sm:p-6"
           >
             <p className="text-xl sm:text-2xl">Analytics</p>
-            <span className="text-6xl text-blue-500 sm:text-[120px]">
+            <span className="text-blue-500 text-6xl sm:text-[120px]">
               <FaChartLine />
             </span>
             <p className="text-center text-sm sm:text-base">

src/app/events/page.tsx

@@ -1,19 +1,74 @@
 "use client";
-import Calendar from "@/components/events/Calendar";
-import MonthlyEvents from "@/components/events/MonthlyEvents";
+import Calendar from "@/components/events/CalendarMonthView/Calendar";
+import FiveDayCalendar from "@/components/events/CalendarWeekView/WeekViewCalendar";
+import MonthlyEvents from "@/components/events/CalendarListView/MonthlyEvents";
+import { FaRegCalendarAlt, FaList } from "react-icons/fa";
 import Footer from "@/components/Footer";
+import { Clock, Calendar as CalendarIcon, List } from "lucide-react";
+import { useState } from "react";
 
 export default function Events() {
+  const [calendarView, setCalendarView] = useState<"month" | "day" | "list">(
+    "month",
+  );
+
   return (
     <>
       <section className="relative min-h-screen bg-[#080d14]">
-        <div className="noise-bg"/>
-        <div className="mx-auto max-w-7xl px-4 md:px-10 pt-20 sm:pt-32 pb-12 text-white">
-        <Calendar />
-          <MonthlyEvents /> 
+        <div className="mx-auto max-w-7xl px-4 pb-12 pt-28 text-white sm:pt-36 md:px-10">
+          <h1 className="text-3xl sm:text-4xl font-semibold">Events</h1>
+          <h2 className="max-w-2xl sm:text-balance pt-4 text-xl sm:text-2xl text-gray-200">
+            Discover everything you need to know about upcoming{" "}
+            <span className="text-blue">club events</span> and{" "}
+            <span className="text-blue">exclusive opportunities.</span>
+          </h2>
+          <p className="pt-8 text-lg text-gray-300">Views:</p>
+
+          {/* buttons to change view */}
+          <div className="flex gap-2 pt-2 flex-wrap">
+          <button
+              className={`flex items-center gap-2 rounded-sm border px-4 py-1.5 transition-all ${calendarView === "month" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("month")}
+            >
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "month" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                Month View <CalendarIcon className="h-5" />
+              </span>
+            </button>
+            <button
+              className={`rounded-sm border px-4 py-1.5 transition-all ${calendarView === "day" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("day")}
+            >
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "day" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                {" "}
+                Day View <Clock className="h-5" />
+              </span>
+            </button>
+            <button
+              className={`flex items-center gap-2 rounded-sm border px-4 py-1.5 transition-all ${calendarView === "list" ? "border-gray-600 bg-gray-800" : "border-gray-700 bg-gray-900"}`}
+              onClick={() => setCalendarView("list")}
+            >
+
+              <span
+                className={`flex items-center gap-2 transition-all ${calendarView === "list" ? "opacity-100" : "opacity-50 hover:opacity-100"}`}
+              >
+                List View <List className="h-5" />
+              </span>
+            </button>
+          </div>
+          {/* end buttons */}
+
+          {/* Views */}
+          {calendarView ===  "day" && <FiveDayCalendar />}
+          {calendarView === "month" && <Calendar />}
+          {calendarView === "list" &&  <MonthlyEvents />}
+
         </div>
       </section>
-      <Footer/>
+      <Footer />
     </>
   );
 }

src/app/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -21,27 +21,11 @@ body {
   overflow-x: hidden;
 }
 
-#hero {
-  background-image: url("/landing/bg.svg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.noise-bg {
-  position: fixed;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-  opacity: 0.02;
-  background:
-    repeating-radial-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 0/2500px
-      2500px,
-    repeating-conic-gradient(#fff 0 0.0001%, #000 0 0.0002%) 50% 50%/2500px
-      2500px;
-  background-blend-mode: difference;
+.footer-clip-path {
+  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
 }
 
+/* Events Page */
 .monthly-event {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
@@ -54,6 +38,7 @@ body {
   border: 1px solid #4255f911;
 }
 
+/* About Page */
 .about-bg {
   background: radial-gradient(
       138.71% 110.11% at 93.15% -36.58%,
@@ -67,34 +52,64 @@ body {
   border: 1px solid #242424;
 }
 
-.footer-clip-path {
-  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
-}
 
-.grad {
-  background: linear-gradient(0deg, #4255f922, #080d14);
-  filter: blur(20px);
-}
 
 
-/*  monospace font - will update later */
+/* Landing Page */
 
-.m {
-  font-family: "Space Mono", serif; 
+.cta-btn:hover {
+  /* Apply a full (all-around) shadow with #79C7FD */
+  box-shadow: 0 0 16px 4px rgba(121, 199, 253, 0.7);
 }
 
-/* fade background of hero */
+/* infinite carousel */
+
+.scroller-list {
+  list-style: none;
+  flex-shrink: 0;
+  min-width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  /* Remove animation from here so it only applies when all images are loaded */
+}
 
+.scroller-list.animate-scroll {
+  animation: scroll 24s linear infinite;
+}
 
-.hero-btn:hover {
-  /* Apply a full (all-around) shadow with #79C7FD */
-  box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7);
+@keyframes scroll {
+  to {
+    transform: translateX(calc(-100% - 16px));
+  }
 }
 
-.hero-fade {
-  background: linear-gradient(180deg,#080d1400 0%, #080d14 100%);
+/* Discord PC */
+
+.pc-stand {
+  background: linear-gradient(
+    180deg,
+    rgba(64, 64, 64, 0.1) 0%,
+    rgba(64, 64, 64, 0.2) 13.27%,
+    rgba(64, 64, 64, 0.25) 27.21%,
+    rgba(64, 64, 64, 0.48) 60.58%,
+    rgba(64, 64, 64, 0.54) 76.36%,
+    rgba(64, 64, 64, 0.45) 92.14%
+  );
 }
 
-.about-fade {
-    background: linear-gradient(0deg,#080d1400 0%, #080d14 100%);
+.pc-base {
+  background: linear-gradient(
+    90deg,
+    rgba(64, 64, 64, 0.6) 0%,
+    rgba(64, 64, 64, 0.3) 6.5%,
+    rgba(64, 64, 64, 0.6) 19.18%,
+    rgba(64, 64, 64, 0.3) 32.93%,
+    rgba(64, 64, 64, 0.3) 66.46%,
+    rgba(64, 64, 64, 0.6) 81%,
+    rgba(64, 64, 64, 0.3) 94%,
+    rgba(64, 64, 64, 0.6) 100%
+  );
+  box-shadow: 0px -7px 2px 0px rgba(0, 0, 0, 0.18);
 }