utcjcao · utcjcao · Jan 18, 2026 · Dec 29, 2025 · Dec 29, 2025 · Jan 18, 2026
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import "./globals.css";
 import Header from "@/components/layout/Header";
 import Footer from "@/components/layout/Footer";
 import "leaflet/dist/leaflet.css";
+import { SidebarProvider } from "@/components/ui/sidebar";
 
 const questrial = Questrial({
   weight: "400",
@@ -34,13 +35,17 @@ export default function RootLayout({
       <body
         className={`${questrial.variable} ${bitter.variable} antialiased flex flex-col min-h-screen `}
       >
-        <Header />
+        <SidebarProvider className="flex-col">
+          <Header />
 
-        <main className="flex-1 flex justify-center px-4 bg-gray-lighter">
-          <div className="w-full max-w-6xl flex flex-col p-4">{children}</div>
-        </main>
+          <main className="flex-1 flex justify-center px-4 bg-gray-lighter">
+            <div className="w-full max-w-6xl flex flex-col p-4">
+              {children}
+            </div>
+          </main>
 
-        <Footer />
+          <Footer />
+        </SidebarProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -62,7 +62,7 @@ export default async function Home() {
           className="object-cover"
           priority
         />
-        <div className="absolute inset-0 bg-black/15 flex items-center px-6">
+        <div className="absolute inset-0 bg-black/5 flex items-center px-6">
           <h2 className="text-3xl font-bold text-white leading-tight">
             Welcome to the ASSU Website.
           </h2>

diff --git a/app/services-and-resources/handbook/page.tsx b/app/services-and-resources/handbook/page.tsx
@@ -1,7 +1,6 @@
 import Divider from "@/components/common/Divider";
 import Text from "@/components/common/Text";
 import Link from "@/components/common/Link";
-import Image from "next/image";
 import HeroText from "@/components/sections/HeroText";
 
 export default function Handbook() {
@@ -16,32 +15,13 @@ export default function Handbook() {
       <Text as="p" className="text-lg">
         You can find paper copies of the handbook in our office at Room 1068 in
         Sidney Smith. You can also download the .pdf of the handbook here:{" "}
-        <Link href="https://f69d17aa-c996-4c07-84e8-5658e41b3090.filesusr.com/ugd/82c36b_0fc2556ac71749e0976805440b15d9dd.pdf">
-          Academic Handbook
-        </Link>
+        <Link href="/assu_academic_handbook.pdf">Academic Handbook</Link>
       </Text>
-      <Divider />
-      <div className="flex flex-wrap justify-around gap-4 mb-6">
-        <Image
-          src="/images/handbook-1.avif"
-          alt="ASSU Academic Handbook"
-          width={200}
-          height={200}
-          className="flex-1"
-        />
-        <Image
-          src="/images/handbook-2.avif"
-          alt="ASSU Academic Handbook"
-          width={200}
-          height={200}
-          className="flex-1"
-        />
-        <Image
-          src="/images/handbook-3.avif"
-          alt="ASSU Academic Handbook"
-          width={200}
-          height={200}
-          className="flex-1"
+      <div className="mt-6 mb-6 w-full">
+        <iframe
+          src="/assu_academic_handbook.pdf"
+          title="ASSU Academic Handbook PDF"
+          className="h-[80vh] w-full rounded border border-gray-300 bg-white"
         />
       </div>
       <Divider />

diff --git a/app/services-and-resources/page.tsx b/app/services-and-resources/page.tsx
@@ -1,6 +1,5 @@
 import Text from "@/components/common/Text";
 import HeroText from "@/components/sections/HeroText";
-import ContentGrid from "@/components/layout/ContentGrid";
 import Link from "next/link";
 import Divider from "@/components/common/Divider";
 import Button from "@/components/common/Button";
@@ -134,39 +133,48 @@ export default function ServicesAndResources() {
         ASSU has going on or to take a break between classes and chat with our
         friendly executive and staff!
       </Text>
-      <Divider margin="0" />
+      <Divider />
+
       {/* Services Grid*/}
-      <ContentGrid
-        ariaLabel="Services and resources"
-        columns={3}
-        mergeAdjacentOnMobile={false}
-        className="w-full mx-auto"
-        cellClassName="flex flex-col px-8 py-10 md:px-10 md:py-12 min-h-[380px] md:min-h-[450px]"
-        items={services.map((service) => ({
-          id: service.id,
-          node: (
-            <div className="flex w-full flex-1 flex-col items-center justify-between text-center">
-              <div className="flex flex-col items-center gap-6">
-                <div className="w-16 h-16 flex items-center justify-center">
-                  {service.icon}
-                </div>
-                <div className="space-y-4">
-                  <h3 className="text-xl font-bold text-black">
+      {[services.slice(0, 3), services.slice(3, 6)].map((row, rowIndex) => (
+        <div key={`service-row-${rowIndex}`} className="w-full">
+          <div
+            className="grid grid-cols-1 md:grid-cols-3"
+            role="list"
+            aria-label="Services and resources"
+          >
+            {row.map((service, index) => (
+              <div
+                key={service.id}
+                role="listitem"
+                className={`relative bg-[rgb(243,243,243)] px-8 py-10 md:px-10 md:py-12 min-h-[380px] md:min-h-[450px] ${
+                  index < row.length - 1
+                    ? "md:after:absolute md:after:top-8 md:after:bottom-8 md:after:right-0 md:after:w-px md:after:bg-gray-900 md:after:content-['']"
+                    : ""
+                }`}
+              >
+                <div className="grid h-full grid-rows-[auto_auto_1fr_auto] items-start text-center">
+                  <div className="flex h-16 items-center justify-center">
+                    {service.icon}
+                  </div>
+                  <h3 className="mt-6 text-xl font-bold text-black">
                     {service.title}
                   </h3>
-                  <p className="text-gray-700 leading-relaxed">
+                  <p className="mt-4 text-gray-700 leading-relaxed">
                     {service.description}
                   </p>
+                  <div className="mt-8 flex justify-center">
+                    <Button>
+                      <Link href={service.href}>EXPLORE →</Link>
+                    </Button>
+                  </div>
                 </div>
               </div>
-
-              <Button>
-                <Link href={service.href}>EXPLORE →</Link>
-              </Button>
-            </div>
-          ),
-        }))}
-      />
+            ))}
+          </div>
+          {rowIndex === 0 ? <Divider /> : null}
+        </div>
+      ))}
       <Divider />
     </div>
   );

diff --git a/app/services-and-resources/resources/page.tsx b/app/services-and-resources/resources/page.tsx
@@ -175,7 +175,7 @@ const collegeResources = [
 export default function Resources() {
   return (
     <div>
-      <HeroText text="Frequently Asked Questions" />
+      <HeroText text="Free Academic Resources" />
       <Accordion items={faqItems} />
       <HeroText text="College Specific Resources" />
       <Divider margin="0"></Divider>
@@ -230,10 +230,10 @@ export default function Resources() {
                   viewBox="0 0 64 64"
                   fill="rgb(201,8,111)"
                 >
-                    <polygon
-                      points="22.89,10 41.11,10 54,22.89 54,41.11 41.11,54 22.89,54 10,41.11 10,22.89"
-                      fill="rgb(201,8,111)"
-                    />
+                  <polygon
+                    points="22.89,10 41.11,10 54,22.89 54,41.11 41.11,54 22.89,54 10,41.11 10,22.89"
+                    fill="rgb(201,8,111)"
+                  />
                 </svg>
               </div>
             ),

diff --git a/components/common/DropdownMenu.tsx b/components/common/DropdownMenu.tsx
@@ -47,6 +47,8 @@ export default function DropdownMenu({
         mt-2 
         bg-[rgb(243,243,243)] 
         py-2 
+        pl-3 
+        -ml-3 
         min-w-[200px] 
         z-50 
         opacity-0 
@@ -68,11 +70,7 @@ export default function DropdownMenu({
                 hover:text-pink 
                 transition-colors 
                 duration-200
-                ${
-                  isSubrouteActive(item.href)
-                    ? "text-pink"
-                    : ""
-                }
+                ${isSubrouteActive(item.href) ? "text-pink" : ""}
               `}
             >
               {item.label}

diff --git a/components/common/ImageCarousel.tsx b/components/common/ImageCarousel.tsx
@@ -48,7 +48,7 @@ export function ImageCarousel() {
               key={index}
               className={`pl-4 ${index === currentSlide ? "block" : "hidden"}`}
             >
-              <div className="relative h-[500px] w-full">
+              <div className="relative h-[560px] w-full">
                 <Image
                   data-testid={`carousel-image-${index}`}
                   src={slide.src}
@@ -57,7 +57,7 @@ export function ImageCarousel() {
                   className="object-cover rounded-lg"
                   priority
                 />
-                <div className="absolute inset-0 bg-black/15 flex items-center px-8">
+                <div className="absolute inset-0 bg-black/5 flex items-center px-8">
                   <div className="ml-12 max-w-sm text-left text-white">
                     <h2
                       data-testid={`carousel-heading-${index}`}

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -3,10 +3,11 @@
 import Link from "next/link";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import DropdownMenu from "../common/DropdownMenu";
 import MobileSidebar from "./MobileSidebar";
 import type { NavGroup } from "./nav";
+import { useSidebar } from "@/components/ui/sidebar";
 
 // --- small hooks -------------------------------------------------------------
 
@@ -35,23 +36,6 @@ function useBodyLock(locked: boolean) {
   }, [locked]);
 }
 
-function useClickOutside<T extends HTMLElement>(
-  enabled: boolean,
-  onOutside: () => void
-) {
-  const ref = useRef<T | null>(null);
-  useEffect(() => {
-    if (!enabled) return;
-    const handler = (e: MouseEvent) => {
-      const t = e.target as Node | null;
-      if (ref.current && t && !ref.current.contains(t)) onOutside();
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [enabled, onOutside]);
-  return ref;
-}
-
 // --- data --------------------------------------------------------------------
 
 const NAV: NavGroup[] = [
@@ -122,11 +106,12 @@ const NAV: NavGroup[] = [
 export default function Header() {
   const pathname = usePathname();
   const isScrolled = useScrolled(0);
-  const [open, setOpen] = useState(false);
-  useBodyLock(open);
+  const { setOpenMobile, openMobile } = useSidebar();
+  useBodyLock(openMobile);
 
-  const onClose = useCallback(() => setOpen(false), []);
-  const onToggle = useCallback(() => setOpen((v) => !v), []);
+  const onToggle = useCallback(() => {
+    setOpenMobile(!openMobile);
+  }, [setOpenMobile, openMobile]);
 
   // unified active checker
   const isActive = useCallback(
@@ -139,9 +124,6 @@ export default function Header() {
     [pathname]
   );
 
-  // for click-outside on the icon + any wrapper you choose
-  const buttonWrapRef = useClickOutside<HTMLDivElement>(open, onClose);
-
   const navItemClasses = "hover:text-pink transition-colors duration-300";
   const activeNavItemClasses = "text-pink";
 
@@ -176,12 +158,12 @@ export default function Header() {
         </Link>
 
         {/* Mobile button */}
-        <div ref={buttonWrapRef} className="mobile-menu-button">
+        <div className="mobile-menu-button">
           <button
             onClick={onToggle}
             className="p-2 text-gray-darker hover:text-pink"
             aria-label="Toggle mobile navigation menu"
-            aria-expanded={open}
+            aria-expanded={openMobile}
             aria-controls="mobile-navigation"
             aria-haspopup="true"
           >
@@ -232,15 +214,11 @@ export default function Header() {
         </ul>
       </nav>
 
-      {open && (
-        <MobileSidebar
-          nav={nav}
-          isOpen={open}
-          onClose={onClose}
-          isRouteActive={(href: string) => isActive(href)}
-          isSubrouteActive={(href: string) => isActive(href, true)}
-        />
-      )}
+      <MobileSidebar
+        nav={nav}
+        isRouteActive={(href: string) => isActive(href)}
+        isSubrouteActive={(href: string) => isActive(href, true)}
+      />
     </header>
   );
 }