styling changes on justin's home page

.gitignore

@@ -13,4 +13,4 @@ node_modules/
 
 
 
-*service_account.json*
+*service_account.json*

app/credits/page.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+const Credits = () => {
+  const teamMembers = [
+    {
+      name: "Winbert Zhang",
+      role: "Website Development Lead 2022-2023",
+      contributions: "Created website ",
+    },
+    {
+      name: "Megan Fu",
+      role: "Website Development Team 2023-2024",
+      contributions:
+        "Designed the carousel which is utilized in the homepage",
+    },
+    // {
+    //   name: "Andrew Chang",
+    //   role: "Backend Developer",
+    //   contributions: "Built and maintained the server-side components.",
+    // },
+    // {
+    //   name: "Diana Prince",
+    //   role: "Content Writer",
+    //   contributions: "Created and edited website content.",
+    // },
+    // {
+    //   name: "Ethan Hunt",
+    //   role: "Project Manager",
+    //   contributions: "Managed timelines and coordinated the team.",
+    // },
+  ];
+
+  return (
+    <div className="flex flex-col text-center p-4">
+      <h1 className="text-2xl font-bold mb-4">Credits</h1>
+      <p className="mb-6 px-48">
+        Our website is maintained and created by our amazing Website Development
+        Team. 
+        <br></br> We would like to take this opportunity to recognize our team, past and present, and
+        thank them for helping us tremondously on this website. 
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {teamMembers.map((member, index) => (
+          <div key={index} className="p-4 border rounded shadow-md">
+            <h2 className="text-xl font-semibold">{member.name}</h2>
+            <h3 className="text-lg italic">{member.role}</h3>
+            <p>{member.contributions}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Credits;

app/faq/page.tsx

@@ -12,7 +12,7 @@ const faqPage = () => {
             <h2 className="text-black text-xl mt-6 mb-2 font-medium">
               {faqs.question}
             </h2>
-            <p className="text-gray-700">{faqs.answer}</p>
+            <div className="text-gray-700">{faqs.answer}</div>
           </div>
         ))}
       </div>

app/gallery/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   galleryImages2023_2024,
@@ -9,18 +9,18 @@ import {
   galleryImages2017_2018,
   galleryImages2024_2025,
 } from "@/data/galleryImages";
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import GalleryYearSection from "@/components/galleryYearSection";
 
 const GalleryPage: React.FC = () => {
   return (
     <div className="gallery-container ">
       <div className="bg-gray-100">
         <div className="mx-4 lg:mx-16 pt-4 pb-8">
-          <h2 className="text-4xl mt-4 font-semibold text-center">
+           {/* <h2 className="text-4xl mt-4 font-semibold text-center">
             Our Favorite Memories
-          </h2>
-          <h2 className="text-2xl mt-4 font-semibold">
+          </h2> */}
+          <h2 className="text-5xl flex justify-center mt-4 font-jacques font-bold">
             2024-2025
           </h2>
           <GalleryYearSection
@@ -34,7 +34,7 @@ const GalleryPage: React.FC = () => {
             quarter="Fall"
           />
 
-          <h2 className="text-2xl mt-4 font-semibold">
+          <h2 className="text-5xl flex justify-center mt-4 font-jacques font-bold">
             2023-2024
           </h2>
           <GalleryYearSection
@@ -50,53 +50,53 @@ const GalleryPage: React.FC = () => {
           <GalleryYearSection
             images={galleryImages2023_2024.slice().reverse()}
             year="2022-2023"
-            quarter= "Fall"
+            quarter="Fall"
           />
 
-          <h2 className="text-2xl mt-4 font-semibold">
-          2022-2023
+          <h2 className="text-4xl flex justify-center mt-4 font-jacques font-bold">
+            2022-2023
           </h2>
           <GalleryYearSection
-                  images={galleryImages2022_2023}
-                  year="2022-2023"
-                  quarter = "NA"
-                  />
+            images={galleryImages2022_2023}
+            year="2022-2023"
+            quarter="NA"
+          />
 
-          <h2 className="text-2xl mt-4 font-semibold">
-          2021-2022
+          <h2 className="text-4xl flex justify-center mt-4 font-jacques font-bold">
+            2021-2022
           </h2>
           <GalleryYearSection
-                  images={galleryImages2021_2022}
-                  year="2021-2022"
-                  quarter = "NA"
-                  />
+            images={galleryImages2021_2022}
+            year="2021-2022"
+            quarter="NA"
+          />
 
-          <h2 className="text-2xl mt-4 font-semibold">
-          2019-2020
+          <h2 className="text-4xl flex justify-center mt-4 font-jacques font-bold">
+            2019-2020
           </h2>
           <GalleryYearSection
-                  images={galleryImages2019_2020}
-                  year="2019-2020"
-                  quarter = "NA"
-                  />
+            images={galleryImages2019_2020}
+            year="2019-2020"
+            quarter="NA"
+          />
 
-          <h2 className="text-2xl mt-4 font-semibold">
-          2018-2019
+          <h2 className="text-4xl flex justify-center mt-4 font-jacques font-bold">
+            2018-2019
           </h2>
           <GalleryYearSection
-                  images={galleryImages2018_2019}
-                  year="2018-2019"
-                  quarter = "NA"
-                  />
+            images={galleryImages2018_2019}
+            year="2018-2019"
+            quarter="NA"
+          />
 
-          <h2 className="text-2xl mt-4 font-semibold">
-          2017-2018
+          <h2 className="text-4xl flex justify-center mt-4 font-jacques font-bold">
+            2017-2018
           </h2>
           <GalleryYearSection
-                  images={galleryImages2017_2018}
-                  year="2017-2018"
-                  quarter = "NA"
-                  />
+            images={galleryImages2017_2018}
+            year="2017-2018"
+            quarter="NA"
+          />
         </div>
       </div>
     </div>

app/globals.css

@@ -1,13 +1,4 @@
 @tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    .btn {
-      @apply font-bold py-2 px-4 rounded;
-    }
-
-    h1 {
-      @apply text-5xl
-    }
-}
+  @tailwind components;
+  @tailwind utilities;
+

app/layout.tsx

@@ -27,7 +27,6 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        {" "}
         <Header title="UCSB TASA"></Header>
         <NavBar />
         {children}

app/page.tsx

@@ -6,7 +6,7 @@ const Home = () => {
   return (
     <div className="">
       <Main></Main>
-      <Events></Events>
+      {/* <Events></Events> */}
     </div>
   );
 };

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": false,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

components/carousel.tsx

@@ -1,54 +1,104 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import Image from "next/image";
 
 const Carousel = () => {
   const [activeIndex, setActiveIndex] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const images = [
-    "image1.jpeg",
-    "image2.jpeg",
-    "image3.jpeg",
-    "image4.jpeg",
-    "image5.jpeg",
-    "image6.jpeg",
-    "image7.jpeg",
+    "/homepage/staff_2024.png",
+    "/gallery_photos/2023-2024/hot_pot_night.jpeg",
+    "/gallery_photos/2023-2024/tfti.jpg",
+    "/gallery_photos/2023-2024/arts_crafts.jpg",
+    "/gallery_photos/2023-2024/pickup_reveal.jpg",
+    "/gallery_photos/2023-2024/winter_retreat.jpeg",
+
+    // "image5.jpeg",
+    // "image6.jpeg",
+    // "image7.jpeg",
   ];
 
   const handleThumbnailClick = (index: number) => {
     setActiveIndex(index);
+    resetAutoScroll(); // Reset timer on thumbnail click
+  };
+
+  const handlePrev = () => {
+    setActiveIndex((prevIndex) =>
+      prevIndex === 0 ? images.length - 1 : prevIndex - 1
+    );
+    resetAutoScroll(); // Reset timer on previous button click
+  };
+
+  const handleNext = () => {
+    setActiveIndex((prevIndex) =>
+      prevIndex === images.length - 1 ? 0 : prevIndex + 1
+    );
+    resetAutoScroll(); // Reset timer on next button click
   };
 
+  const resetAutoScroll = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      handleNext();
+    }, 5000); // Change image every 5 seconds
+  };
+
+  useEffect(() => {
+    resetAutoScroll(); // Initialize the auto-scroll timer
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current); // Cleanup interval on component unmount
+      }
+    };
+  }, []);
+
   return (
-    <div className="flex flex-col items-center m-10">
-      <div className="flex items-center flex-col max-w-4xl">
-        <Image
-          src={`/carousel/${images[activeIndex]}`}
-          alt={`Carousel Image ${activeIndex + 1}`}
-          width={1920}
-          height={1080}
-          className="mb-4 rounded-lg shadow-md bg-cover bg-center h-96 object-cover"
-        />
-        <div className="flex space-x-2">
-          {images.map((image, index) => (
-            <button
-              key={index}
-              className={`w-10 h-10 rounded-full border ${
-                activeIndex === index ? "border-blue-500" : "border-gray-300"
-              } focus:outline-none focus:border-blue-500 transition duration-300`}
-              onClick={() => handleThumbnailClick(index)}
-            >
-              <Image
-                src={`/carousel/${image}`}
-                alt={`Carousel Thumbnail ${index + 1}`}
-                width={1920}
-                height={1080}
-                className="w-full h-full object-cover rounded-full mb-4"
-              />
-            </button>
-          ))}
-        </div>
+    <div className="flex flex-col items-center m-4">
+      <div className="relative flex items-center flex-col max-w-4xl">
+          <Image
+            src={images[activeIndex]}
+            alt={`Carousel Image ${activeIndex + 1}`}
+            width={1920}
+            height={1080}
+            className="mb-4 rounded-lg shadow-md bg-cover bg-center h-96 object-cover"
+          />
+        <button
+          onClick={handlePrev}
+          className="absolute left-0 top-1/2 transform -translate-y-1/2 px-4 py-2 text-white bg-black bg-opacity-50 rounded-full"
+        >
+          &#9664;
+        </button>
+        <button
+          onClick={handleNext}
+          className="absolute right-0 top-1/2 transform -translate-y-1/2 px-4 py-2 text-white bg-black bg-opacity-50 rounded-full"
+        >
+          &#9654;
+        </button>
+      </div>
+      <div className="flex space-x-2 mt-4">
+        {images.map((image, index) => (
+          <button
+            key={index}
+            className={`w-10 h-10 rounded-full border ${
+              activeIndex === index ? "border-blue-500" : "border-gray-300"
+            } focus:outline-none focus:border-blue-500 transition duration-300`}
+            onClick={() => handleThumbnailClick(index)}
+          >
+            <Image
+              src={image}
+              alt={`Carousel Thumbnail ${index + 1}`}
+              width={1920}
+              height={1080}
+              className="w-full h-full object-cover rounded-full"
+            />
+          </button>
+        ))}
       </div>
     </div>
   );