Cs/bug fixes

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/globals.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&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:[email protected]&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap");
 
 @tailwind base;
 @tailwind components;
@@ -16,7 +16,8 @@ textarea {
 }
 
 body {
-  font-family: "Space Grotesk", serif !important;
+  /* font-family: "Space Grotesk", serif !important; */
+  font-family: "Space Mono", serif;
   background-color: #ffffff;
   overflow-x: hidden;
 }
@@ -76,25 +77,41 @@ body {
   filter: blur(20px);
 }
 
-
-/*  monospace font - will update later */
-
-.m {
-  font-family: "Space Mono", serif; 
-}
-
 /* fade background of hero */
 
-
 .hero-btn:hover {
   /* Apply a full (all-around) shadow with #79C7FD */
   box-shadow: 0 0 20px 5px rgba(121, 199, 253, 0.7);
 }
 
 .hero-fade {
-  background: linear-gradient(180deg,#080d1400 0%, #080d14 100%);
+  background: linear-gradient(180deg, #080d1400 0%, #080d14 100%);
 }
 
 .about-fade {
-    background: linear-gradient(0deg,#080d1400 0%, #080d14 100%);
-}
+  background: linear-gradient(0deg, #080d1400 0%, #080d14 100%);
+}
+
+/* Custom minimalist scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: rgba(59, 130, 246, 0.2);
+  border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: rgba(59, 130, 246, 0.5);
+}
+
+/* Firefox */
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(59, 130, 246, 0.2) transparent;
+}

src/app/page.tsx

@@ -5,14 +5,13 @@ import Events from "@/components/landing/Events";
 import Faq from "@/components/landing/Faq";
 import Hero from "@/components/landing/Hero";
 
-
 const Website = () => {
   return (
     <div className="min-h-screen w-full bg-[#080d14] text-white">
       <Hero />
-      <About/>
-      <Events/>
-      <Faq/>
+      <About />
+      <Events />
+      <Faq />
       <Footer />
     </div>
   );

src/components/Buttons/BackButton.tsx

@@ -13,12 +13,12 @@ const BackButton: React.FC = () => {
   return (
     <button
       onClick={handleBack}
-      className="flex items-center gap-2 rounded-md bg-blue-500 px-4 py-2 text-white transition-all hover:bg-blue-600 active:bg-blue-800"
+      className="bg-blue-500 hover:bg-blue-600 active:bg-blue-800 flex items-center gap-2 rounded-md px-4 py-2 transition-all"
     >
       <span className="sm:text-lg">
         <FaLongArrowAltLeft />
       </span>
-     <span className="text-sm sm:text-base">Back</span>
+      <span className="text-sm sm:text-base">Back</span>
     </button>
   );
 };

src/components/Navbar/Sidebar.tsx

@@ -10,6 +10,7 @@ import {
   ChevronLeft,
   Calendar,
   PackageOpen,
+  ChartLine,
 } from "lucide-react";
 
 interface SidebarProps {
@@ -30,8 +31,9 @@ const Sidebar: React.FC<SidebarProps> = ({
     { name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
     { name: "Events", href: "/dashboard/events", icon: Calendar },
     { name: "Projects", href: "/dashboard/projects", icon: FileText },
-    { name: "Inventory", href: "/dashboard/inventory", icon: PackageOpen },
-    { name: "Settings", href: "/dashboard/settings", icon: Settings },
+    // { name: "Inventory", href: "/dashboard/inventory", icon: PackageOpen },
+    // { name: "Settings", href: "/dashboard/settings", icon: Settings },
+    { name: "Analytics", href: "/dashboard/analytics", icon: ChartLine },
   ];
 
   const isLinkActive = (href: string) => pathname === href;
@@ -42,7 +44,7 @@ const Sidebar: React.FC<SidebarProps> = ({
       {!isMobileMenuOpen && (
         <button
           onClick={() => setIsMobileMenuOpen(true)}
-          className="fixed -left-1 top-2.5 z-50 rounded-md bg-gray-700 p-2 text-white hover:bg-gray-600 lg:hidden text-sm"
+          className="fixed -left-1 top-2.5 z-50 rounded-md bg-gray-700 p-2 text-sm text-white hover:bg-gray-600 lg:hidden"
         >
           <span>Admin</span>
         </button>

src/components/admin/events/EditEventsForm.tsx

@@ -10,11 +10,11 @@ import toast from "react-hot-toast";
 import { LuLoader2, LuX } from "react-icons/lu";
 import EventForm from "./EventForm";
 
-type EditEventFormProps  = {
-  month: Date
-}
+type EditEventFormProps = {
+  month: Date;
+};
 
-export default function EditEventsForm({month} : EditEventFormProps) {
+export default function EditEventsForm({ month }: EditEventFormProps) {
   const { data: events, isLoading, isError, error } = useCachedEvents(month);
   const [selectedEvent, setSelectedEvent] = useState<FirebaseEvent | null>(
     null,
@@ -85,7 +85,7 @@ export default function EditEventsForm({month} : EditEventFormProps) {
 
   if (isLoading) {
     return (
-      <div className="flex pt-20 items-center justify-center">
+      <div className="flex items-center justify-center pt-20">
         <span className="animate-spin text-5xl text-gray-800">
           <LuLoader2 />
         </span>
@@ -150,7 +150,7 @@ export default function EditEventsForm({month} : EditEventFormProps) {
       )}
       {showEditForm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 px-3 backdrop-blur-sm">
-          <div className="max-h-[80vh] w-full max-w-2xl overflow-auto rounded-lg bg-white py-6 px-5">
+          <div className="max-h-[80vh] w-full max-w-2xl overflow-auto rounded-lg bg-white px-5 py-6">
             <div className="flex justify-between">
               <p className="text-2xl font-medium">Edit Event</p>
               <span

src/components/admin/events/Event.tsx

@@ -13,21 +13,21 @@ const Event: React.FC<EventProps> = ({ event, onDeleteClick, onEditClick }) => {
   const { date, time } = formatTimestampToDateTime(event.time);
 
   return (
-    <div className="flex items-center justify-between rounded-md border p-4 bg-white gap-4">
+    <div className="flex items-center justify-between gap-4 rounded-md border bg-white p-4">
       <div className="flex items-end gap-4">
-        <p className="font-bold text-sm sm:text-base">{event.title}</p>
-        <p className="text-sm hidden md:inline-block">{date}</p>
-        <p className="text-sm hidden md:inline-block">{time}</p>
+        <p className="text-sm font-bold sm:text-base">{event.title}</p>
+        <p className="hidden text-sm md:inline-block">{date}</p>
+        <p className="hidden text-sm md:inline-block">{time}</p>
       </div>
       <div className="flex gap-2">
         <button
-          className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600 text-sm sm:text-base"
+          className="bg-blue-500 hover:bg-blue-600 rounded px-4 py-2 text-sm transition-colors sm:text-base"
           onClick={() => onEditClick(event, date, time)}
         >
           Edit
         </button>
         <button
-          className="flex items-center gap-2 rounded bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600 text-sm sm:text-base"
+          className="flex items-center gap-2 rounded bg-red-500 px-4 py-2 text-sm text-white transition-colors hover:bg-red-600 sm:text-base"
           onClick={() => onDeleteClick(event)}
         >
           <Trash2 size={18} />

src/components/admin/events/EventForm.tsx

@@ -28,11 +28,7 @@ interface EventFormProps {
   id?: string;
 }
 
-export default function EventForm({
-  initialData,
-  mode,
-  id,
-}: EventFormProps) {
+export default function EventForm({ initialData, mode, id }: EventFormProps) {
   const [formData, setFormData] = useState<EventFormData>(
     initialData || emptyFormState,
   );
@@ -113,7 +109,7 @@ export default function EventForm({
       await updateDoc(eventRef, eventData);
 
       toast.dismiss(loadingToast);
-     
+
       toast.success("Event updated successfully!", {
         duration: 3000,
         icon: "🎉",
@@ -187,7 +183,10 @@ export default function EventForm({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="mt-6 sm:mt-8 flex w-full flex-col gap-4">
+    <form
+      onSubmit={handleSubmit}
+      className="mt-6 flex w-full flex-col gap-4 sm:mt-8"
+    >
       <div>
         <label htmlFor="" className="text-sm font-medium">
           Title
@@ -233,7 +232,7 @@ export default function EventForm({
           <input
             type="date"
             name="date"
-            className="mt-2 block w-full cursor-pointer rounded-md border p-2 min-h-11"
+            className="mt-2 block min-h-11 w-full cursor-pointer rounded-md border p-2"
             onFocus={handleFocus}
             onChange={handleChange}
             value={formData.date}
@@ -246,7 +245,7 @@ export default function EventForm({
           <input
             type="time"
             name="time"
-            className="mt-2 block w-full cursor-pointer rounded-md border p-2 "
+            className="mt-2 block w-full cursor-pointer rounded-md border p-2"
             onFocus={handleFocus}
             onChange={handleChange}
             value={formData.time}
@@ -282,7 +281,7 @@ export default function EventForm({
       </div>
       <button
         type="submit"
-        className="mt-2 rounded-md bg-blue-500 p-2 text-white"
+        className="mt-2 rounded-md bg-green-500 p-2 text-white"
       >
         {mode === "create" ? "Create" : "Edit"} Event
       </button>

src/components/admin/projects/EditForm.tsx

@@ -206,7 +206,7 @@ export default function EditForm() {
               <div className="flex gap-2">
                 <button
                   onClick={() => handleEditClick(project)}
-                  className="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+                  className="bg-blue-500 hover:bg-blue-600 rounded bg-gray-300 px-4 py-2 transition-colors"
                 >
                   Edit
                 </button>

src/components/landing/About.tsx

@@ -36,12 +36,11 @@ const About: React.FC = () => {
   const isInView = useInView(h3Ref, { once: true });
 
   return (
-    <div className="pb-20 pt-16 sm:pt-32 max-w-7xl mx-auto px-10 overflow-hidden relative">
-      <div className="about-fade absolute left-0 right-0 top-0 h-10 z-20" />
+    <div className="relative mx-auto max-w-7xl overflow-hidden px-10 pt-16 sm:pt-32">
       <motion.img
         src="/landing/tube.png"
         alt=""
-        className={`hidden sm:block absolute -top-48 z-0 left-1/2 -translate-x-1/2 overflow-hidden transition-all ${
+        className={`absolute -top-64 left-1/2 z-0 hidden -translate-x-1/2 overflow-hidden transition-all sm:block ${
           isInView ? "scale-x-100" : "scale-x-[0.25]"
         } duration-1000`}
         initial={{ opacity: 0 }}
@@ -50,7 +49,10 @@ const About: React.FC = () => {
       />
 
       <div className="relative z-10">
-        <h3 ref={h3Ref} className="text-[40px] font-medium pb-6 sm:pb-10 text-center">
+        <h3
+          ref={h3Ref}
+          className="pb-6 text-center text-[40px] font-medium sm:pb-10"
+        >
           Why SPCB?
         </h3>
         <ul>
@@ -69,18 +71,18 @@ interface AboutItemProps {
 
 const AboutItem: React.FC<AboutItemProps> = ({ info }) => {
   return (
-    <li className="py-12 sm:py-16 border-b border-[#1a2a3d] gap-8 grid md:grid-cols-2">
-      <div className="flex flex-col items-center text-center md:text-left md:items-start justify-between gap-3 sm:gap-4">
-        <p className="text-3xl sm:text-4xl lg:text-4xl leading-[1.2] xl:leading-[1.2] balance max-w-[320px] sm:max-w-[410px]">
+    <li className="grid gap-8 border-b border-[#1a2a3d] py-12 sm:py-16 md:grid-cols-2">
+      <div className="flex flex-col items-center justify-between gap-3 text-center sm:gap-4 md:items-start md:text-left">
+        <p className="balance max-w-[320px] text-3xl leading-[1.2] sm:max-w-[410px] sm:text-4xl lg:text-4xl xl:leading-[1.2]">
           {info.title}
         </p>
-        <p className="text-lg lg:text-xl text-dull max-w-[445px] text-balance">
+        <p className="max-w-[445px] text-balance text-lg text-dull lg:text-xl">
           {info.desc}
         </p>
       </div>
 
       <div className="flex justify-center md:justify-end">
-        <div className="bg-[#090f1a] border border-[#1a2a3d] rounded-xl w-full max-w-96 aspect-square overflow-hidden">
+        <div className="aspect-square w-full max-w-96 overflow-hidden rounded-xl border border-[#1a2a3d] bg-[#090f1a]">
           {info.children}
         </div>
       </div>