From 25a8c9ff4fd58f37ae60459a8b387ae54558ea52 Mon Sep 17 00:00:00 2001
From: Brandon Tran <brandontran1220@gmail.com>
Date: Sun, 2 Feb 2025 18:53:07 -0800
Subject: [PATCH 1/9] Add mobile responsiveness of Xin description

---
 src/components/home/XinDescription.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/home/XinDescription.tsx b/src/components/home/XinDescription.tsx
index 8758d0f..7ceb92f 100644
--- a/src/components/home/XinDescription.tsx
+++ b/src/components/home/XinDescription.tsx
@@ -4,16 +4,20 @@ import xinImage from "@/public/home/xinimage.svg";
 
 const XinDescription = () => {
   return (
-    <div className="grid grid-cols-3 items-center border-y-8 border-csa-tan-300 bg-csa-green-100">
-      <p className="col-span-2 py-[6vh] pl-[4vw] text-left text-2xl text-white">
+    <div className="grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:grid-cols-3">
+      <p className="py-[6vh] pl-[4vw] text-left text-3xl text-white md:col-span-2 md:text-2xl">
         The Chinese character 心 ("xin") which stands for heart. The theme that
         we have been promoting is "Two Worlds, One Heart” which is a
         representation of our Chinese Heritage fused with the American Culture
         that defines the Chinese American.
       </p>
       <div className="relative flex items-center justify-center py-[6vh]">
-        <div className="aspect-square w-[16vw] rounded-full border-8 border-csa-tan-200 bg-csa-tan-100"></div>
-        <Image src={xinImage} alt="Xin_Image" className="absolute w-[12vw]" />
+        <div className="aspect-square w-[45vw] rounded-full border-8 border-csa-tan-200 bg-csa-tan-100 md:w-[16vw]"></div>
+        <Image
+          src={xinImage}
+          alt="Xin_Image"
+          className="absolute w-[35vw] md:w-[12vw]"
+        />
       </div>
     </div>
   );

From fe124715d4b8dfc5d417d54d81f310115f91d0f6 Mon Sep 17 00:00:00 2001
From: Brenda Rojas <broja016@ucr.edu>
Date: Mon, 3 Feb 2025 18:32:23 -0800
Subject: [PATCH 2/9] add footer mobile responsiveness

---
 src/components/Footer.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 1fe438c..ef45599 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -8,15 +8,19 @@ const Footer = () => {
   return (
     <div className="flex items-center border-t-8 border-csa-yellow-100 bg-csa-red-200">
       <Link href="/">
-        <Image src={CsaLogo} alt="CSA_Logo" className="ml-5 w-[6vw]" />
+        <Image
+          src={CsaLogo}
+          alt="CSA_Logo"
+          className="ml-5 w-[20vw] md:w-[6vw]"
+        />
       </Link>
 
-      <div className="absolute right-0 mr-6 flex gap-4">
+      <div className="absolute right-0 mr-8 flex gap-7 md:mr-6 md:gap-4">
         {icons.map((icon, index) => (
           <Link
             href={icon.link}
             key={index}
-            className="text-5xl text-white hover:scale-110 hover:text-csa-yellow-300"
+            className="w-[6vw] text-5xl text-white hover:scale-110 hover:text-csa-yellow-300 md:w-full"
             target="_blank"
           >
             {icon.image}

From 1261e738cb2ef6c75de9ea0631e97ae200efc40c Mon Sep 17 00:00:00 2001
From: Brandon Tran <brandontran1220@gmail.com>
Date: Mon, 3 Feb 2025 22:04:27 -0800
Subject: [PATCH 3/9] Add padding and margin

---
 src/components/home/XinDescription.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/home/XinDescription.tsx b/src/components/home/XinDescription.tsx
index 7ceb92f..1821876 100644
--- a/src/components/home/XinDescription.tsx
+++ b/src/components/home/XinDescription.tsx
@@ -5,13 +5,13 @@ import xinImage from "@/public/home/xinimage.svg";
 const XinDescription = () => {
   return (
     <div className="grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:grid-cols-3">
-      <p className="py-[6vh] pl-[4vw] text-left text-3xl text-white md:col-span-2 md:text-2xl">
+      <p className="md:py-[6vh] pt-[4vh] px-[4vh] md:pl-[4vw] text-left text-2xl text-white md:col-span-2 md:text-2xl">
         The Chinese character 心 ("xin") which stands for heart. The theme that
         we have been promoting is "Two Worlds, One Heart” which is a
         representation of our Chinese Heritage fused with the American Culture
         that defines the Chinese American.
       </p>
-      <div className="relative flex items-center justify-center py-[6vh]">
+      <div className="relative flex items-center justify-center md:py-[6vh] my-[6vh]">
         <div className="aspect-square w-[45vw] rounded-full border-8 border-csa-tan-200 bg-csa-tan-100 md:w-[16vw]"></div>
         <Image
           src={xinImage}

From d671986cb451c757f26665885afe28c75c70d5ab Mon Sep 17 00:00:00 2001
From: Brandon Tran <brandontran1220@gmail.com>
Date: Mon, 3 Feb 2025 22:05:25 -0800
Subject: [PATCH 4/9] format

---
 src/components/home/XinDescription.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/home/XinDescription.tsx b/src/components/home/XinDescription.tsx
index 1821876..9efba42 100644
--- a/src/components/home/XinDescription.tsx
+++ b/src/components/home/XinDescription.tsx
@@ -5,13 +5,13 @@ import xinImage from "@/public/home/xinimage.svg";
 const XinDescription = () => {
   return (
     <div className="grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:grid-cols-3">
-      <p className="md:py-[6vh] pt-[4vh] px-[4vh] md:pl-[4vw] text-left text-2xl text-white md:col-span-2 md:text-2xl">
+      <p className="px-[4vh] pt-[4vh] text-left text-2xl text-white md:col-span-2 md:py-[6vh] md:pl-[4vw] md:text-2xl">
         The Chinese character 心 ("xin") which stands for heart. The theme that
         we have been promoting is "Two Worlds, One Heart” which is a
         representation of our Chinese Heritage fused with the American Culture
         that defines the Chinese American.
       </p>
-      <div className="relative flex items-center justify-center md:py-[6vh] my-[6vh]">
+      <div className="relative my-[6vh] flex items-center justify-center md:py-[6vh]">
         <div className="aspect-square w-[45vw] rounded-full border-8 border-csa-tan-200 bg-csa-tan-100 md:w-[16vw]"></div>
         <Image
           src={xinImage}

From ff76123b2d618ae2847c6976b23357e12ef10723 Mon Sep 17 00:00:00 2001
From: Brenda Rojas <broja016@ucr.edu>
Date: Thu, 6 Feb 2025 11:40:49 -0800
Subject: [PATCH 5/9] fix logo height

---
 src/components/Footer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index ef45599..f2b3f50 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -6,21 +6,21 @@ import { icons } from "@/data/footerData";
 
 const Footer = () => {
   return (
-    <div className="flex items-center border-t-8 border-csa-yellow-100 bg-csa-red-200">
+    <div className="flex flex-col items-center gap-4 border-t-8 border-csa-yellow-100 bg-csa-red-200 pb-4 md:flex-row md:gap-0 md:pb-0">
       <Link href="/">
         <Image
           src={CsaLogo}
           alt="CSA_Logo"
-          className="ml-5 w-[20vw] md:w-[6vw]"
+          className="mt-2 w-[22vw] md:ml-5 md:mt-0 md:w-[6vw]"
         />
       </Link>
 
-      <div className="absolute right-0 mr-8 flex gap-7 md:mr-6 md:gap-4">
+      <div className="] flex gap-4 md:absolute md:right-0 md:mr-6">
         {icons.map((icon, index) => (
           <Link
             href={icon.link}
             key={index}
-            className="w-[6vw] text-5xl text-white hover:scale-110 hover:text-csa-yellow-300 md:w-full"
+            className="text-2xl text-white hover:scale-110 hover:text-csa-yellow-300 md:text-5xl"
             target="_blank"
           >
             {icon.image}

From 5af10c0cce66e4d26047843a1eba973b1f7912f9 Mon Sep 17 00:00:00 2001
From: Brenda Rojas <broja016@ucr.edu>
Date: Thu, 6 Feb 2025 11:50:06 -0800
Subject: [PATCH 6/9] fix icon size

---
 src/components/Footer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index f2b3f50..670e780 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -11,7 +11,7 @@ const Footer = () => {
         <Image
           src={CsaLogo}
           alt="CSA_Logo"
-          className="mt-2 w-[22vw] md:ml-5 md:mt-0 md:w-[6vw]"
+          className="mt-2 w-[20vw] md:ml-5 md:mt-0 md:w-[6vw]"
         />
       </Link>
 
@@ -20,7 +20,7 @@ const Footer = () => {
           <Link
             href={icon.link}
             key={index}
-            className="text-2xl text-white hover:scale-110 hover:text-csa-yellow-300 md:text-5xl"
+            className="text-3xl text-white hover:scale-110 hover:text-csa-yellow-300 md:text-5xl"
             target="_blank"
           >
             {icon.image}

From 1bbc38c894d96ce21fbdb1aad3c79c921ba6928b Mon Sep 17 00:00:00 2001
From: Brandon Tran <brandontran1220@gmail.com>
Date: Thu, 6 Feb 2025 12:43:39 -0800
Subject: [PATCH 7/9] Add spacing top and bottom

---
 src/components/home/XinDescription.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/home/XinDescription.tsx b/src/components/home/XinDescription.tsx
index 9efba42..0b480de 100644
--- a/src/components/home/XinDescription.tsx
+++ b/src/components/home/XinDescription.tsx
@@ -4,7 +4,7 @@ import xinImage from "@/public/home/xinimage.svg";
 
 const XinDescription = () => {
   return (
-    <div className="grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:grid-cols-3">
+    <div className="grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:grid-cols-3 my-[3vh] md:my-[5vh]">
       <p className="px-[4vh] pt-[4vh] text-left text-2xl text-white md:col-span-2 md:py-[6vh] md:pl-[4vw] md:text-2xl">
         The Chinese character 心 ("xin") which stands for heart. The theme that
         we have been promoting is "Two Worlds, One Heart” which is a

From 955ec1a1a8b097191fa4a1b2fc3f570d395f371c Mon Sep 17 00:00:00 2001
From: Brandon Tran <brandontran1220@gmail.com>
Date: Thu, 6 Feb 2025 12:45:15 -0800
Subject: [PATCH 8/9] Format

---
 src/components/home/XinDescription.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/home/XinDescription.tsx b/src/components/home/XinDescription.tsx
index 0b480de..f9164d6 100644
--- a/src/components/home/XinDescription.tsx
+++ b/src/components/home/XinDescription.tsx
@@ -4,7 +4,7 @@ import xinImage from "@/public/home/xinimage.svg";
 
 const XinDescription = () => {
   return (
-    <div className="grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:grid-cols-3 my-[3vh] md:my-[5vh]">
+    <div className="my-[3vh] grid grid-cols-1 items-center border-y-8 border-csa-tan-300 bg-csa-green-100 md:my-[5vh] md:grid-cols-3">
       <p className="px-[4vh] pt-[4vh] text-left text-2xl text-white md:col-span-2 md:py-[6vh] md:pl-[4vw] md:text-2xl">
         The Chinese character 心 ("xin") which stands for heart. The theme that
         we have been promoting is "Two Worlds, One Heart” which is a

From ab78843bac76be590d765cf918c4c779aa8a3021 Mon Sep 17 00:00:00 2001
From: Stanley Lew <stanley43595@gmail.com>
Date: Sat, 8 Feb 2025 15:17:48 -0800
Subject: [PATCH 9/9] remove ]

---
 src/components/Footer.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 670e780..9296c5d 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,4 +1,3 @@
-"use client";
 import Link from "next/link";
 import Image from "next/image";
 import CsaLogo from "@/public/home/csalogo.svg";
@@ -15,7 +14,7 @@ const Footer = () => {
         />
       </Link>
 
-      <div className="] flex gap-4 md:absolute md:right-0 md:mr-6">
+      <div className="flex gap-4 md:absolute md:right-0 md:mr-6">
         {icons.map((icon, index) => (
           <Link
             href={icon.link}