PCBuilding · ClaudioGSDB · Jan 24, 2025 · Jan 5, 2025 · Jan 23, 2025 · Jan 24, 2025
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -1,17 +1,19 @@
 "use client";
 import Calendar from "@/components/events/Calendar";
 import MonthlyEvents from "@/components/events/MonthlyEvents";
+import Footer from "@/components/Footer";
 
 export default function Events() {
   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-24 pb-12 text-white">
-          <MonthlyEvents />
-          <Calendar />
+        <div className="mx-auto max-w-7xl px-4 md:px-10 pt-20 sm:pt-32 pb-12 text-white">
+        <Calendar />
+          <MonthlyEvents /> 
         </div>
       </section>
+      <Footer/>
     </>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -52,3 +52,8 @@ body {
   box-shadow: 0px 0.5px 16px 0px rgba(200, 200, 255, 0.1);
   border: 1px solid #4255f911;
 }
+
+
+.footer-clip-path {
+  clip-path: polygon(15% 34%, 100% 0%, 100% 100%, 0% 100%);
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,112 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer className="relative z-50 mt-28 flex justify-end ">
+      <div className="grid min-h-[420px] w-full max-w-[1600px]  grid-cols-1 lg:grid-cols-3 items-center">
+        <div className="flex flex-col gap-6 text-white pl-10">
+          <figure>
+            <Image src={"/navbar/logo.png"} width={160} height={160} alt="" className="w-24 h-24 sm:w-40 sm:h-40"/>
+          </figure>
+          <p className="text-2xl sm:text-4xl font-semibold">Proudly Building PCs.</p>
+          <div className="flex gap-3 md:gap-4">
+            <Link
+              href="https://www.linkedin.com/company/the-society-of-pc-building"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-transform hover:scale-110"
+            >
+              <Image
+                src="/landing/linkedin.png"
+                alt="LinkedIn"
+                width={30}
+                height={30}
+                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+              />
+            </Link>
+            <Link
+              href="https://www.instagram.com/pcbuildinguf/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-transform hover:scale-110"
+            >
+              <Image
+                src="/landing/instagram.png"
+                alt="Instagram"
+                width={30}
+                height={30}
+                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+              />
+            </Link>
+            <Link
+              href="https://discord.com/invite/jfq9phWqTF"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-transform hover:scale-110"
+            >
+              <Image
+                src="/landing/discord.png"
+                alt="Discord"
+                width={30}
+                height={30}
+                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+              />
+            </Link>
+            <Link
+              href="https://linktr.ee/pcbuildinguf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="transition-transform hover:scale-110"
+            >
+              <Image
+                src="/landing/linktree.png"
+                alt="Linktree"
+                width={30}
+                height={30}
+                className="h-[30px] w-[30px] md:h-[40px] md:w-[40px]"
+              />
+            </Link>
+          </div>
+          <p className="text-sm opacity-80">&copy; {new Date().getFullYear()} The Society of PC Building. All
+          rights reserved.</p>
+        </div>
+        <div className="footer-clip-path lg:col-span-2 flex h-full flex-col items-center justify-center gap-1 bg-white pl-12 sm:pl-0 xl:pl-20 pt-20 min-h-80">
+          <p className="max-w-[417px] text-2xl sm:text-4xl font-bold ">
+            Gator User Design{" "}
+            <Image
+              src={"/iconography/gud-color.png"}
+              width={80}
+              height={80}
+              alt=""
+              className="ml-2 inline w-14 h-14 sm:h-20 sm:w-20"
+            />{" "}
+          </p>
+          <div className="flex w-full max-w-[416px] justify-center sm:justify-start items-start">
+            <Link
+              href="https://www.instagram.com/gatoruserdesign/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center text-xl sm:text-2xl  hover:underline text-black"
+            >
+              Check us out
+              <svg
+                className="ml-2 h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M14 5l7 7m0 0l-7 7m7-7H3"
+                />
+              </svg>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/events/Calendar.tsx b/src/components/events/Calendar.tsx
@@ -39,20 +39,20 @@ export default function Calendar() {
   };
 
   return (
-    <div className="pt-24 md:pt-32 text-white">
+    <div className="pt-8 md:pt-12 text-white">
       <div className="flex items-end justify-between gap-5">
         <p className="font-Michroma text-lg md:text-3xl">
-          {currentMonthName} {currentYear}
+         Calendar - {currentMonthName} {currentYear}
         </p>
         <div className="flex gap-2">
           <button
-            className="rounded-full p-2 md:hover:bg-light-blue"
+            className="rounded-full p-2 md:hover:bg-[#404040]"
             onClick={handlePrevMonth}
           >
             <FaChevronLeft />
           </button>
           <button
-            className="rounded-full p-2 md:hover:bg-light-blue"
+            className="rounded-full p-2 md:hover:bg-[#404040]"
             onClick={handleNextMonth}
           >
             <FaChevronRight />

diff --git a/src/components/events/CalendarDay.tsx b/src/components/events/CalendarDay.tsx
@@ -1,5 +1,5 @@
 import { FirebaseEvent } from "@/types/events";
-import { format } from "date-fns";
+import { format, isToday } from "date-fns";
 import CalendarEvent from "./CalendarEvent";
 import MobileCalendarEvent from "./MobileCalendarEvent";
 
@@ -18,6 +18,10 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
   index,
   day,
 }) => {
+
+  const today = isToday(day);
+
+
   if (!isCurrentMonth) {
     return (
       <>
@@ -39,9 +43,9 @@ const CalendarDay: React.FC<CalendarDayProps> = ({
     <>
       {/* Desktop Calendar day in current month */}
       <div
-        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 md:block ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
+        className={`hidden h-32 border-l border-t border-gray-800 bg-[#0F1319] p-2 md:block  ${daysInMonth % 7 === 0 ? "border-r" : ""} ${daysInMonth - index <= 7 ? "border-b" : ""}`}
       >
-        <div className="flex justify-end">{format(day, "dd")}</div>
+        <div className={`flex justify-end `}><span className={`${today ? "bg-light-blue text-black rounded-full px-2" : ""}`}>{format(day, "dd")}</span></div>
         {dayEvents && (
           <div className="pt-2">
             {dayEvents.map((_event, i) => (

diff --git a/src/components/events/CalendarEvent.tsx b/src/components/events/CalendarEvent.tsx
@@ -1,4 +1,6 @@
+"use client"
 import { FirebaseEvent } from "@/types/events";
+import { AnimatePresence, easeInOut, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { FaXmark } from "react-icons/fa6";
 
@@ -42,42 +44,48 @@ const CalendarEvent: React.FC<CalendarEventProps> = ({ _event }) => {
   }, []);
   return (
     <>
-      <div
-        className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"
-        onClick={handleEventClick}
-      >
-        {_event.title}
-      </div>
+      <AnimatePresence>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y:0 }}
+          transition={{ duration: 0.2, ease: easeInOut }}
+          className="cursor-pointer rounded-sm bg-light-blue p-1 text-xs text-black"
+          onClick={handleEventClick}
+        >
+          {_event.title}
+        </motion.div>
 
-      {showEventModal && (
-        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-10 px-6 backdrop-blur-sm">
-          <div className="relative w-full max-w-[400px] rounded-md border border-[#242424] bg-[#070c13] px-6 py-10">
-            <button
-              onClick={handleEventClick}
-              className="absolute right-4 top-4 text-2xl"
-            >
-              <FaXmark />
-            </button>
-            <p className="text-xl font-medium">{_event.title}</p>
-            <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
-              <p className="">Location: {_event.location}</p>
-              <p className="">Time: {time}</p> <p className="">Date: {date}</p>
-            </div>
-            <p className="pt-3">{_event.description}</p>
-            <div className="flex gap-1.5 pt-4">
-              {_event.tags.map((tag, i) => (
-                <div
-                  className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
-                  key={tag}
-                >
-                  <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
-                  {tag}
-                </div>
-              ))}
+        {showEventModal && (
+          <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40 px-6 backdrop-blur-sm" onClick={handleEventClick}>
+            <div className="relative w-full max-w-[400px] rounded-md border border-[#404040] bg-[#242424] px-6 py-10" onClick={(e) => e.stopPropagation()}>
+              <button
+                onClick={handleEventClick}
+                className="absolute right-4 top-4 text-2xl"
+              >
+                <FaXmark />
+              </button>
+              <p className="text-xl font-medium">{_event.title}</p>
+              <div className="flex flex-wrap gap-x-6 gap-y-2 pt-3">
+                <p className="">Location: {_event.location}</p>
+                <p className="">Time: {time}</p>{" "}
+                <p className="">Date: {date}</p>
+              </div>
+              <p className="pt-3">{_event.description}</p>
+              <div className="flex gap-1.5 pt-4">
+                {_event.tags.map((tag, i) => (
+                  <div
+                    className={`flex items-center gap-1 rounded-md px-2 py-1 text-sm text-accent-dark ${i % 2 === 0 ? "bg-light-blue" : "bg-light-orange"}`}
+                    key={tag}
+                  >
+                    <span className="inline-block h-2 w-2 rounded-full border border-accent-dark bg-white" />
+                    {tag}
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
+      </AnimatePresence>
     </>
   );
 };

diff --git a/src/components/events/MonthlyEvent.tsx b/src/components/events/MonthlyEvent.tsx
@@ -40,7 +40,7 @@ const MonthlyEvent: React.FC<MonthlyEventProps> = ({ event }) => {
     <>
       {/* Desktop version */}
       <div className="hidden grid-cols-10 md:grid">
-        <div className="col-span-2 flex flex-col justify-center gap-2 font-Michroma text-4xl">
+        <div className="col-span-2 flex flex-col justify-center gap-2 font-Michroma text-3xl">
           <p>{dayOfWeek}</p>
           <p>{dayOfMonth}</p>
         </div>

diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
@@ -22,7 +22,7 @@ export default function MonthlyEvents() {
   }
   if (isLoading) {
     return (
-      <div className="mt-10 md:mt-16">
+      <div className="mt-10 md:mt-24">
         <h1 className="font-Michroma text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>
         <p className="md:hidden pt-3 text-[#cacaca] text-sm">Click an event for more details.</p>
         <div className="h-52 w-full flex items-center justify-center">
@@ -35,7 +35,7 @@ export default function MonthlyEvents() {
 
 
   return (
-    <div className="mt-10 md:mt-16">
+    <div className="mt-10 md:mt-24">
 
       <h1 className="font-Michroma text-2xl md:text-3xl">{format(currentDate, 'MMMM')} Events</h1>