+
+
+
- {/* Add Michroma font */}
-
- {/* Hero Section with Background Image */}
- (false);
return (
- <>
- {/* Add Michroma font */}
-
+
);
}
diff --git a/src/components/admin/auth/ProtectedRoute.tsx b/src/components/admin/auth/ProtectedRoute.tsx
index 4615351..1045cb6 100644
--- a/src/components/admin/auth/ProtectedRoute.tsx
+++ b/src/components/admin/auth/ProtectedRoute.tsx
@@ -37,5 +37,5 @@ export default function ProtectedRoute({
return null;
}
- return {children} ;
+ return {children} ;
}
diff --git a/src/components/client-events/CalendarDays.tsx b/src/components/client-events/CalendarDays.tsx
deleted file mode 100644
index 3d7bf4d..0000000
--- a/src/components/client-events/CalendarDays.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { FirebaseEvent } from "@/types/events";
-import { format, isSameDay } from "date-fns";
-
-type CalendarDaysProps = {
- daysToDisplay: Date[];
- currentDate: Date;
- events: FirebaseEvent[];
-};
-
-const CalendarDays: React.FC = ({
- daysToDisplay,
- currentDate,
- events,
-}) => {
- return (
- = ({ event }) => {
- function parseDateTime(dateTime: Date): {
- timeString: string;
- dayOfMonth: string;
- dayOfWeek: string;
- } {
- const timeString = dateTime.toLocaleString("en-US", {
- hour: "numeric",
- minute: "2-digit",
- hour12: true,
- });
-
- const dayOfMonth = dateTime.getDate().toString();
-
- const dayOfWeek = dateTime
- .toLocaleString("en-US", {
- weekday: "short",
- })
- .toUpperCase();
-
- return { timeString, dayOfMonth, dayOfWeek };
- }
-
- const {
- timeString: time,
- dayOfMonth,
- dayOfWeek,
- } = parseDateTime(event.time.toDate());
-
- return (
- (new Date());
- const {
- data: events,
- isLoading,
- isError,
- error,
- } = useCachedEvents(currentDate);
-
- if (isError) {
- return (
-
- {/* Hero Content */}
-
-
- {/* About Section */}
-
- {/* Content Container with Grid */}
-
-
- {/* Logo Section */}
-
-
- {/* Scroll Indicator */}
-
- {/* Outer Glow */}
-
- {/* Inner Glow */}
-
- {/* Logo */}
-
-
- {/* Text Section */}
-
-
-
-
- - The Society of PC Building -
- - {/* Social Stats */} -
-
-
- {/* Join Button */}
-
-
-
-
-
-
-
-
-
+
- {/* Decorative Lines */}
-
- {/* Activities Section */}
-
-
-
-
-
-
- - About -
-- The Society of PC Building (SPCB) at the University of Florida - is a community for students passionate about PC hardware, - building, and tech. Whether you're a beginner or an expert, - SPCB offers workshops, live demos, and events to help you - learn, collaborate, and build custom rigs. Beyond PCs, we - foster innovation, teamwork, and technical growth, connecting - students through a shared love for technology. -
- - Learn More - - -
- {/* Main vertical line */}
-
- {/* Social Links Section */}
-
- {/* Socials Card - Left */}
-
-
-
-
- {/* GBMs Card - Right */}
-
-
-
-
-
-
- - Socials -
-
-
-
- {/* PC Builds Card - Left */}
-
-
-
-
-
-
- - GBMs -
-
-
-
-
-
-
-
-
- - PC Builds -
-
-
-
-
-
- {/* Content */}
-
-
- {/* Footer */}
-
-
- {/* Left side */}
-
-
-
-
- {/* Right side - GUD section */}
-
-
- - Proudly building PCs. -
- {/* Social Media Icons */} -
-
-
-
-
-
-
-
-
-
- Check us out
-
-
- - Gator User Design -
-
+ {/* Applied a noise bg to the page for added depth */}
+
+
);
};
diff --git a/src/components/Navbar/PublicNavbar.tsx b/src/components/Navbar/PublicNavbar.tsx
index 462a3cb..3a3fa5f 100644
--- a/src/components/Navbar/PublicNavbar.tsx
+++ b/src/components/Navbar/PublicNavbar.tsx
@@ -1,122 +1,102 @@
-"use client";
-
import Link from "next/link";
-import Image from "next/image";
import { useState } from "react";
+import { FaBars } from "react-icons/fa";
+import { FaXmark } from "react-icons/fa6";
+import { AnimatePresence, motion } from "framer-motion";
+
-export default function Navbar() {
- const [isOpen, setIsOpen] = useState(false);
- const toggleMenu = () => setIsOpen(!isOpen);
+// TODO: Fix the navbar apperance when viewing admin dashboard
+export default function Nav() {
+ const [showMobileNav, setShowMobileNav] = useState
- {daysToDisplay.map((day, i) => {
- const isCurrentMonth = format(day, "MM") === format(currentDate, "MM");
-
- const dayEvents = events.filter((event) => {
- const eventDate = event.time.toDate();
- return isCurrentMonth && isSameDay(eventDate, day);
- });
-
- if (isCurrentMonth) {
- return (
-
- );
-};
-
-export default CalendarDays;
diff --git a/src/components/client-events/MonthlyEvent.tsx b/src/components/client-events/MonthlyEvent.tsx
deleted file mode 100644
index c82abec..0000000
--- a/src/components/client-events/MonthlyEvent.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { FirebaseEvent } from "@/types/events";
-
-type MonthlyEventProps = {
- event: FirebaseEvent;
-};
-
-const MonthlyEvent: React.FC
-
- );
- } else {
- return (
-
- );
- }
- })}
- {format(day, "dd")}
-
- {dayEvents.map((_event,i) => (
-
- {_event.title}
- ))}
-
-
- );
-};
-
-export default MonthlyEvent;
diff --git a/src/components/client-events/MonthlyEvents.tsx b/src/components/client-events/MonthlyEvents.tsx
deleted file mode 100644
index 71581dc..0000000
--- a/src/components/client-events/MonthlyEvents.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useCachedEvents } from "@/hooks/useCachedEvents";
-import React, { useState } from "react";
-import MonthlyEvent from "./MonthlyEvent";
-
-export default function MonthlyEvents() {
- const [currentDate, setCurrentDate] = useState
-
- {dayOfWeek}
-{dayOfMonth}
-
-
- {event.title}
-
-
- - Location:{" "} - {event.location} -
-- Time: {time} -
-{event.description}
-
- {event.tags.map((tag, i) => (
-
-
-
- {tag}
-
- ))}
-
- Error occured while fetching data. Please contact us on discord.
-
- );
- }
- if (isLoading) {
- return (
-
-
- );
- }
-
- return (
- December Events
-
-
- );
-}
-
diff --git a/src/components/client-events/Calendar.tsx b/src/components/events/Calendar.tsx
similarity index 61%
rename from src/components/client-events/Calendar.tsx
rename to src/components/events/Calendar.tsx
index 8904517..ec376bc 100644
--- a/src/components/client-events/Calendar.tsx
+++ b/src/components/events/Calendar.tsx
@@ -12,6 +12,7 @@ import {
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
import { useCachedEvents } from "@/hooks/useCachedEvents";
import CalendarDays from "./CalendarDays";
+import CalendarSkeleton from "./CalendarSkeleton";
export default function Calendar() {
const [currentDate, setCurrentDate] = useState(new Date());
@@ -38,20 +39,20 @@ export default function Calendar() {
};
return (
- December Events
-
- {events?.map((_event) =>
-
-
-
+
+ = ({
+ dayEvents,
+ daysInMonth,
+ isCurrentMonth,
+ index,
+ day,
+}) => {
+ if (!isCurrentMonth) {
+ return (
+ <>
+ {/* Desktop Calendar Day not in current month */}
+ = ({
+ daysToDisplay,
+ currentDate,
+ events,
+}) => {
+ return (
+ = ({ _event }) => {
+ const [showEventModal, setShowEventModal] = useState(false);
+
+ const handleEventClick = () => {
+ setShowEventModal((prev) => !prev);
+ document.body.style.overflowY =
+ document.body.style.overflowY === "hidden" ? "auto" : "hidden";
+ };
+
+ const time = _event.time.toDate().toLocaleString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ });
+
+ function formatDateToMMDDYY(date: Date): string {
+ const padZero = (num: number): string => num.toString().padStart(2, "0");
+
+ const month = padZero(date.getMonth() + 1); // Months are 0-based
+ const day = padZero(date.getDate());
+ const year = date.getFullYear().toString().slice(-2); // Get last 2 digits of the year
+
+ return `${month}/${day}/${year}`;
+ }
+
+ const date = formatDateToMMDDYY(_event.time.toDate());
+
+ useEffect(() => {
+ return () => {
+ if (document.body.style.overflowY === "hidden") {
+ document.body.style.overflowY = "auto";
+ }
+ };
+ }, []);
+ return (
+ <>
+ = ({
+ daysToDisplay,
+ currentDate,
+}) => {
+ return (
+ = ({
+ day,
+ dayEvents,
+}) => {
+ const [showEventModal, setShowEventModal] = useState(false);
+
+ const handleEventClick = () => {
+ setShowEventModal((prev) => !prev);
+ document.body.style.overflow =
+ document.body.style.overflowY === "hidden" ? "auto" : "hidden";
+ };
+
+ useEffect(() => {
+ return () => {
+ if (document.body.style.overflow === "hidden") {
+ document.body.style.overflowY = "auto";
+ }
+ };
+ }, []);
+
+ return (
+ <>
+ = ({ event }) => {
+ const [expandMobileEvent, setExpandMobileEvent] = useState(false);
+ function parseDateTime(dateTime: Date): {
+ timeString: string;
+ dayOfMonth: string;
+ dayOfWeek: string;
+ } {
+ const timeString = dateTime.toLocaleString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ });
+
+ const dayOfMonth = dateTime.getDate().toString();
+
+ const dayOfWeek = dateTime
+ .toLocaleString("en-US", {
+ weekday: "short",
+ })
+ .toUpperCase();
+
+ return { timeString, dayOfMonth, dayOfWeek };
+ }
+
+ const {
+ timeString: time,
+ dayOfMonth,
+ dayOfWeek,
+ } = parseDateTime(event.time.toDate());
+
+ return (
+ <>
+ {/* Desktop version */}
+ (new Date());
+ const {
+ data: events,
+ isLoading,
+ isError,
+ error,
+ } = useCachedEvents(currentDate);
+
+ if (isError) {
+ return (
+
+
- {/* Days of the Week */}
- {currentMonthName} {currentYear}
+ {/* Desktop Days of the Week */}
+ }
+ {isLoading && }
+
);
}
diff --git a/src/components/events/CalendarDay.tsx b/src/components/events/CalendarDay.tsx
new file mode 100644
index 0000000..64b9d97
--- /dev/null
+++ b/src/components/events/CalendarDay.tsx
@@ -0,0 +1,67 @@
+import { FirebaseEvent } from "@/types/events";
+import { format } from "date-fns";
+import CalendarEvent from "./CalendarEvent";
+import MobileCalendarEvent from "./MobileCalendarEvent";
+
+type CalendarDayProps = {
+ dayEvents?: FirebaseEvent[];
+ daysInMonth: number;
+ isCurrentMonth: boolean;
+ index: number;
+ day: Date;
+};
+
+const CalendarDay: React.FC
{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (
- {/* Calendar Days */}
+ {/* Mobile Days of the Week */}
+
{day}
))}
+ {["Su", "M", "T", "W", "Th", "F", "Sa"].map((day) => (
+
+
+ {/* While fetching show the calendar skeleton */}
{events &&
+ {day}
+
+ ))}
+
+
+
+ {/* Mobile Calendar Day not in current month */}
+ {format(day, "dd")}
+
+
+
+ );
+ }
+ return (
+ <>
+ {/* Desktop Calendar day in current month */}
+ {format(day, "dd")}
+
+
+
+ {/* Mobile Calendar day in current month */}
+
+ {format(day, "dd")}
+ {dayEvents && (
+
+ {dayEvents.map((_event, i) => (
+
+ )}
+
+ {dayEvents && dayEvents.length > 0 ? (
+
+ ) : (
+
+
+ );
+};
+
+export default CalendarDay;
diff --git a/src/components/events/CalendarDays.tsx b/src/components/events/CalendarDays.tsx
new file mode 100644
index 0000000..4a3d6e3
--- /dev/null
+++ b/src/components/events/CalendarDays.tsx
@@ -0,0 +1,34 @@
+import { FirebaseEvent } from "@/types/events";
+import { format, isSameDay } from "date-fns";
+import CalendarDay from "./CalendarDay";
+
+type CalendarDaysProps = {
+ daysToDisplay: Date[];
+ currentDate: Date;
+ events: FirebaseEvent[];
+};
+
+const CalendarDays: React.FC{format(day, "dd")}
+ )}
+
+ {daysToDisplay.map((day, i) => {
+ const isCurrentMonth = format(day, "MM") === format(currentDate, "MM");
+
+ const dayEvents = events.filter((event) => {
+ const eventDate = event.time.toDate();
+ return isCurrentMonth && isSameDay(eventDate, day);
+ });
+
+ return
+ })}
+
+ );
+};
+
+export default CalendarDays;
+
+
diff --git a/src/components/events/CalendarEvent.tsx b/src/components/events/CalendarEvent.tsx
new file mode 100644
index 0000000..19d927a
--- /dev/null
+++ b/src/components/events/CalendarEvent.tsx
@@ -0,0 +1,85 @@
+import { FirebaseEvent } from "@/types/events";
+import { useEffect, useState } from "react";
+import { FaXmark } from "react-icons/fa6";
+
+type CalendarEventProps = {
+ _event: FirebaseEvent;
+};
+
+const CalendarEvent: React.FC
+ {_event.title}
+
+
+ {showEventModal && (
+
+
+ )}
+
+ );
+};
+
+export default CalendarEvent;
diff --git a/src/components/events/CalendarSkeleton.tsx b/src/components/events/CalendarSkeleton.tsx
new file mode 100644
index 0000000..3a28e09
--- /dev/null
+++ b/src/components/events/CalendarSkeleton.tsx
@@ -0,0 +1,22 @@
+import { format } from "date-fns";
+import CalendarDay from "./CalendarDay";
+
+type CalendarSkeletonProps = {
+ daysToDisplay: Date[];
+ currentDate: Date;
+};
+
+const CalendarSkeleton: React.FC
+
+
+ {_event.title}
+
+
+ Location: {_event.location}
+Time: {time}
Date: {date}
+{_event.description}
+
+ {_event.tags.map((tag, i) => (
+
+
+
+ {tag}
+
+ ))}
+
+ {daysToDisplay.map((day, i) => {
+ const isCurrentMonth = format(day, "MM") === format(currentDate, "MM");
+ return
+ })}
+
+ );
+};
+export default CalendarSkeleton;
diff --git a/src/components/events/MobileCalendarEvent.tsx b/src/components/events/MobileCalendarEvent.tsx
new file mode 100644
index 0000000..9fc6076
--- /dev/null
+++ b/src/components/events/MobileCalendarEvent.tsx
@@ -0,0 +1,61 @@
+import { FirebaseEvent } from "@/types/events";
+import { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { FaXmark } from "react-icons/fa6";
+import MonthlyEvent from "./MonthlyEvent";
+
+type MobileCalendarEventProps = {
+ day: Date;
+ dayEvents: FirebaseEvent[];
+};
+
+const MobileCalendarEvent: React.FC
+ {format(day, "dd")}
+
+ {showEventModal && (
+
+
+ )}
+
+ );
+};
+
+export default MobileCalendarEvent;
diff --git a/src/components/events/MonthlyEvent.tsx b/src/components/events/MonthlyEvent.tsx
new file mode 100644
index 0000000..d1d3ff4
--- /dev/null
+++ b/src/components/events/MonthlyEvent.tsx
@@ -0,0 +1,118 @@
+import { FirebaseEvent } from "@/types/events";
+import { AnimatePresence, motion } from "framer-motion";
+import { useState } from "react";
+
+type MonthlyEventProps = {
+ event: FirebaseEvent;
+};
+
+const MonthlyEvent: React.FC
+
+
+
+
+ {dayEvents.map((_event, i) => (
+
+ ))}
+
+
+
+
+
+
+ {/* Mobile Version */}
+
+
+ {dayOfWeek}
+{dayOfMonth}
+
+
+ {event.title}
+
+
+ + Location: {event.location} +
++ Time: {time} +
+{event.description}
+
+ {event.tags.map((tag, i) => (
+
+
+
+ {tag}
+
+ ))}
+ setExpandMobileEvent((prev) => !prev)}
+ >
+
+ {expandMobileEvent && (
+
+
+ )}
+
+
+
+ );
+};
+
+export default MonthlyEvent;
diff --git a/src/components/events/MonthlyEvents.tsx b/src/components/events/MonthlyEvents.tsx
new file mode 100644
index 0000000..09fbcc3
--- /dev/null
+++ b/src/components/events/MonthlyEvents.tsx
@@ -0,0 +1,49 @@
+import { useCachedEvents } from "@/hooks/useCachedEvents";
+import React, { useState } from "react";
+import MonthlyEvent from "./MonthlyEvent";
+import { format } from "date-fns";
+import { FaSpinner } from "react-icons/fa";
+
+export default function MonthlyEvents() {
+ const [currentDate, setCurrentDate] = useState
+
+
+
+
+ {dayOfWeek}
+{dayOfMonth}
+{event.title}
+
+
+ Location: {event.location}
+Time: {time}
+{event.description}
+
+ {event.tags.map((tag, i) => (
+
+
+
+ {tag}
+
+ ))}
+
+ Error occured while fetching data. Please contact us on discord.
+
+ );
+ }
+ if (isLoading) {
+ return (
+
+
+ );
+ }
+
+
+
+ return (
+ {format(currentDate, 'MMMM')} Events
+Click an event for more details.
+
+
+
+
+
+ );
+}
+
diff --git a/src/components/landing/Hero.tsx b/src/components/landing/Hero.tsx
new file mode 100644
index 0000000..622a002
--- /dev/null
+++ b/src/components/landing/Hero.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import LogoCarousel from "./LogoCarousel";
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+export default function Hero() {
+ return (
+ {format(currentDate, 'MMMM')} Events
+ +Click an event for more details.
+
+ {events?.map((_event) =>
+
+ {/* Flex-row on desktop devices but flex-col-reverse for devices lg and smaller */}
+
+ );
+}
diff --git a/src/components/landing/LandingAbout.tsx b/src/components/landing/LandingAbout.tsx
new file mode 100644
index 0000000..bac0dfe
--- /dev/null
+++ b/src/components/landing/LandingAbout.tsx
@@ -0,0 +1,428 @@
+import Image from "next/image";
+import Link from "next/link";
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import GlowingLine from "../decorations/GlowingLine";
+
+export default function LandingAbout() {
+ const [isDesktop, setIsDesktop] = useState(false);
+
+ useEffect(() => {
+ const checkIfDesktop = () => {
+ setIsDesktop(window.innerWidth >= 768);
+ };
+
+ // Initial check
+ checkIfDesktop();
+
+ // Add event listener
+ window.addEventListener("resize", checkIfDesktop);
+
+ // Cleanup
+ return () => window.removeEventListener("resize", checkIfDesktop);
+ }, []);
+ return (
+
+
+
+
+
+
+ {/* Hidden on mobile */}
+
+ 1000+ Active Members!
+
+
+ The Society
+
+ {/* On mobile devices shorten the description to limit text-length */}
+
+
+ {/* Animate SPCB logo upwards. Applied negative margin to center logo better */}
+
+ The Society
+ of PC Building
+
+
+ {/* On mobile devices shorten the description to limit text-length */}
+ + + Join the Society of PC Building at UF—where + + Where students passionate about + hardware and tech connect, innovate, and build custom PCs together. +
+ + + + + + {/* On mobile devices show the infinite carousel but on desktop static list */} +
+
+ + Led by a team of officers with experience at: +
+
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+ + More!
+
+
+
+
+ );
+}
diff --git a/src/components/landing/LogoCarousel.tsx b/src/components/landing/LogoCarousel.tsx
new file mode 100644
index 0000000..3acc702
--- /dev/null
+++ b/src/components/landing/LogoCarousel.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+interface Logo {
+ src: string;
+ alt: string;
+}
+
+const LogoCarousel: React.FC = () => {
+ const logos: Logo[] = [
+ { src: "/landing/logos/roblox.png", alt: "Roblox" },
+ { src: "/landing/logos/nvidia.png", alt: "NVIDIA" },
+ { src: "/landing/logos/microsoft.png", alt: "Microsoft" },
+ { src: "/landing/logos/samsung.png", alt: "Samsung" },
+ { src: "/landing/logos/ukg.png", alt: "UKG" },
+ { src: "/landing/logos/meta.png", alt: "Meta" }
+ ];
+
+ // Duplicate the logos array to create a seamless infinite effect
+ const duplicatedLogos = [...logos, ...logos];
+
+ return (
+
+ {/* Decorative Lines */}
+
+ {/* Activities Section */}
+
+
+
+
+
+
+ + About +
++ The Society of PC Building (SPCB) at the University of Florida + is a community for students passionate about PC hardware, + building, and tech. Whether you're a beginner or an expert, SPCB + offers workshops, live demos, and events to help you learn, + collaborate, and build custom rigs. Beyond PCs, we foster + innovation, teamwork, and technical growth, connecting students + through a shared love for technology. +
+ + Learn More + + +
+ {/* Main vertical line */}
+
+ {/* Social Links Section */}
+
+ {/* Socials Card - Left */}
+
+
+
+ {/* GBMs Card - Right */}
+
+
+
+ {/* PC Builds Card - Left */}
+
+
+
+
+
+
+
+
+
+ + Socials +
+
+
+
+
+
+
+ + GBMs +
+
+
+
+
+
+
+ + PC Builds +
+
+
+
+
+
+ {/* Content */}
+
+
+ {/* Footer */}
+
+
+ {/* Left side */}
+
+
+
+
+ {/* Right side - GUD section */}
+
+
+ + Proudly building PCs. +
+ {/* Social Media Icons */} +
+
+
+
+
+
+
+
+
+
+ Check us out
+
+
+ + Gator User Design +
+
+
+ {duplicatedLogos.map((logo, index) => (
+
+
+ );
+};
+
+export default LogoCarousel;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8e167c1..74049d2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -26,7 +26,7 @@ const config = {
'light-blue': "#8BC5F7",
},
fontFamily: {
- title: ["Michroma", "sans-serif"],
+ Michroma: ["Michroma", "sans-serif"],
},
},
},
+ 
+
+ ))}
+ + More!
+