Merge pull request #106 from acm-ucr/Simon-Cun/LanternImgReplacement

Replaced Lantern Img

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "~5.53.3",
+    "icons": "^1.0.0",
     "lucide-react": "~0.417.0",
     "next": "~14.2.10",
     "react": "~18.3.1",

src/app/board/page.tsx

@@ -1,5 +1,9 @@
+import GroupPhoto from "@/components/board/GroupPhoto";
 const Page = () => {
-  return <div className="bg-csa-tan-100"></div>;
+  return (
+    <div className="bg-csa-tan-100">
+      <GroupPhoto />
+    </div>
+  );
 };
-
 export default Page;

src/components/Title.tsx

@@ -20,7 +20,7 @@ const Title: React.FC<TitleNameProps> = ({ text }) => {
         >
           <path
             id="curve"
-            d="M50,150 Q200,10 370,150"
+            d="M50,140 Q220,0 360,145"
             fill="transparent"
             stroke="none"
           />

src/components/about/RightLantern.tsx

@@ -1,12 +1,12 @@
 import Image from "next/image";
-import lantern from "@/public/about/lantern.svg";
+import lantern from "@/public/about/lantern.webp";
 
 const RightLantern = () => {
   return (
     <Image
       src={lantern}
       alt="Chinese Lantern"
-      className="absolute right-0 top-[25vh] w-2/12"
+      className="absolute right-0 top-[25vh] w-1/5 scale-x-[-1]"
     />
   );
 };

src/components/board/GroupPhoto.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import GroupImage from "@/public/board/Group-Photo-CSA.webp";
+import WhiteFlower from "@/public/board/whiteflowers.svg";
+import Boar from "@/public/board/boar.svg";
+/* import BoarShadow from "@/public/board/boarshadow.svg"; */
+
+const GroupPhoto = () => {
+  return (
+    <div className="grid grid-cols-2">
+      <div className="relative flex items-center justify-center">
+        <Image
+          src={GroupImage}
+          alt="Group Image"
+          className="w-3/4 rounded-[2rem] border-8 border-csa-green-100"
+        />
+        <Image
+          src={WhiteFlower}
+          alt="White Flower"
+          className="absolute bottom-0 left-0 w-1/5"
+        />
+      </div>
+      <div className="flex -translate-y-[6%] translate-x-[10%] items-center justify-end">
+        <Image src={Boar} alt="Boar" className="w-11/12" />
+      </div>
+    </div>
+  );
+};
+
+export default GroupPhoto;