Merge pull request #135 from acm-ucr/dev

update
acm-ucr · Feb 9, 2025 · 29c3067 · 29c3067
2 parents fa1164c + 6f23e3c
commit 29c3067
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,22 +1,25 @@
-"use client";
 import Link from "next/link";
 import Image from "next/image";
 import CsaLogo from "@/public/home/csalogo.svg";
 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-[6vw]" />
+        <Image
+          src={CsaLogo}
+          alt="CSA_Logo"
+          className="mt-2 w-[20vw] md:ml-5 md:mt-0 md:w-[6vw]"
+        />
       </Link>
 
-      <div className="absolute right-0 mr-6 flex 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="text-5xl text-white hover:scale-110 hover:text-csa-yellow-300"
+            className="text-3xl text-white hover:scale-110 hover:text-csa-yellow-300 md:text-5xl"
             target="_blank"
           >
             {icon.image}

diff --git 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="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
         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="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}
+          alt="Xin_Image"
+          className="absolute w-[35vw] md:w-[12vw]"
+        />
       </div>
     </div>
   );