Justin home v0 fix

.gitignore

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

app/calendar/page.tsx

@@ -2,18 +2,37 @@ import Iframe from "react-iframe";
 
 const page = () => {
   return (
-    <div>
-      <div className="bg-gray-100">
-        <div className="text-center justify-center mx-4 lg:mx-16 pt-4">
-          <h1>Upcoming Events!</h1>
-          <div className="flex justify-center">
-            <Iframe
-              url="https://calendar.google.com/calendar/embed?src=7hptoesel85ltt2ndeg0dtptec%40group.calendar.google.com&ctz=America%2FLos_Angeles"
-              width="800"
-              height="800"
-              className="mb-8 border-solid 1px border-[#777]"
-            ></Iframe>
-          </div>
+    <div className="bg-gray-100 min-h-screen px-4 lg:px-16 pt-4">
+      {/* For medium and smaller: only show Agenda */}
+      <div className="block md:hidden">
+        <Iframe
+          url="https://calendar.google.com/calendar/embed?src=7hptoesel85ltt2ndeg0dtptec%40group.calendar.google.com&ctz=America%2FLos_Angeles&mode=AGENDA"
+          width="100%"
+          height="800"
+          className="mb-8"
+        />
+      </div>
+
+      {/* For large screens and up: 75% calendar + 25% agenda */}
+      <div className="hidden md:flex flex-row gap-4">
+        {/* Left: Calendar */}
+        <div className="w-1/2 lg:w-3/5 xl:w-3/4">
+          <Iframe
+            url="https://calendar.google.com/calendar/embed?src=7hptoesel85ltt2ndeg0dtptec%40group.calendar.google.com&ctz=America%2FLos_Angeles"
+            width="100%"
+            height="800"
+            className="mb-8 "
+          />
+        </div>
+
+        {/* Right: Agenda */}
+        <div className=" w-1/2 lg:w-2/5 xl:w-1/4">
+          <Iframe
+            url="https://calendar.google.com/calendar/embed?src=7hptoesel85ltt2ndeg0dtptec%40group.calendar.google.com&ctz=America%2FLos_Angeles&mode=AGENDA"
+            width="100%"
+            height="800"
+            className="mb-8 "
+          />
         </div>
       </div>
     </div>

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

@@ -11,10 +11,16 @@ import {
 } from "@/data/galleryImages";
 import React, { useState } from "react";
 import GalleryYearSection from "@/components/galleryYearSection";
+import { Nanum_Myeongjo } from "next/font/google";
+
+const nanumMyeongjo = Nanum_Myeongjo({
+  subsets: ["latin"],
+  weight: "400",
+});
 
 const GalleryPage: React.FC = () => {
   return (
-    <div className="gallery-container ">
+    <section className={`${nanumMyeongjo.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">
@@ -101,7 +107,7 @@ const GalleryPage: React.FC = () => {
           />
         </div>
       </div>
-    </div>
+    </section>
   );
 };
 

app/globals.css

@@ -1,13 +1,69 @@
 @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;
+
+  @layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+
+  @layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+

app/layout.tsx

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

app/page.tsx

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

app/programs/page.tsx

@@ -1,6 +1,11 @@
 import Link from "next/link";
 import Image from "next/image";
+import { Nanum_Myeongjo } from "next/font/google";
 
+const nanumMyeongjo = Nanum_Myeongjo({
+  subsets: ["latin"],
+  weight: "400",
+});
 const Programs = () => {
   const programsData = [
     {
@@ -33,7 +38,7 @@ const Programs = () => {
     <div>
       <div className="bg-gray-100">
         <div className="mx-4 lg:mx-16 py-8">
-          <h1 className="text-2xl sm:text-4xl font-bold mb-4">Our Programs</h1>
+          <h1 className={`${nanumMyeongjo.className} text-2xl sm:text-4xl font-bold mb-4`}>Our Programs</h1>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
             {programsData.map((program) => (
               <div className="bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition duration-300">

app/staff/page.tsx

@@ -1,13 +1,18 @@
 import ScrollTransition from "@/components/scroll-transition";
 import MemberCoin from "../../components/member_coin";
 import staffMembers from "@/data/staffMembers";
+import { Nanum_Myeongjo } from "next/font/google";
 
+const nanumMyeongjo = Nanum_Myeongjo({
+  subsets: ["latin"],
+  weight: "400",
+});
 const StaffPage = () => {
   return (
     <div>
       <div className="items-center justify-center min-h-screen">
         <div className="px-4 py-8 text-center bg-gray-100">
-          <h2 className="text-3xl font-bold text-gray-900 uppercase">
+          <h2 className={`${nanumMyeongjo.className} text-3xl font-bold text-gray-900`}>
             Meet the Staff!
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-16 mt-16 mx-16 items-start">

app/store/page.tsx

@@ -6,7 +6,7 @@ const Store = () => {
       name: "TASA Hoodie 2024",
       price: 45.0,
       imageFront: "/store/hoodiefront2024.png",
-      imageBack: "/store/hoodieback2024.JPG",
+      imageBack: "/store/hoodieback2025.JPG",
     },
     {
       name: "TASA T-Shirt 2024",

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"
+  }
+}