merge conflict fix 1

src/app/about/page.tsx

@@ -1,3 +1,4 @@
+import Unite from "@/components/about/Unite";
 import React from "react";
 import Do from "@/components/about/Do";
 import Join from "@/components/Join";
@@ -7,6 +8,7 @@ const page = () => {
   return (
     <div className="flex flex-col gap-5">
       <About title="About" />
+      <Unite />
       <Do />
       <Join />
     </div>

src/components/about/Unite.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Title from "../Title";
+
+const Unite = () => {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center gap-5 px-10 text-white md:flex-row md:gap-0">
+      {/* Left section for OUR MISSION */}
+      <div className="flex w-2/3 flex-col items-center justify-center space-y-6">
+        <div className="rounded-md border border-yellow-500 px-6 py-3">
+          <h2 className="text-lg font-bold tracking-wide text-yellow-500">
+            OUR MISSION
+          </h2>
+        </div>
+      </div>
+      {/* Right section for Title and Mission Statement */}
+      <div className="mr-[8%] flex w-full flex-col gap-9 text-left">
+        <Title text="Enter Our Galaxy" />
+        <p className="md:text:xl text-white sm:text-lg lg:text-3xl">
+          Mission Statement HERE.
+          <span className="md:text:xl text-white sm:text-lg lg:text-2xl">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default Unite;

src/components/cosplays/Cosplay.tsx

@@ -1,21 +1,83 @@
+"use client";
 import Image from "next/image";
 import React from "react";
 import cosplaysframe from "@/public/frame/cosplaysframe.svg";
 import Card from "../Card";
 import { ITEMS } from "@/data/board";
+import { motion } from "framer-motion";
 
 const Cosplay = () => {
+  const containerVariants = {
+    hidden: {
+      opacity: 0,
+      scale: 0,
+      x: -100,
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      x: 0,
+    },
+  };
+
+  const animations = {
+    hidden: {
+      opacity: 0,
+    },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.3,
+        delayChildren: 0.2,
+      },
+    },
+  };
+  const title = {
+    hidden: {
+      opacity: 0,
+      y: 100,
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+    },
+  };
+
   return (
     <div className="flex flex-col items-center gap-10">
-      <Image src={cosplaysframe} alt="cosplay frame" width={370} height={500} />
+      <motion.div
+        variants={title}
+        initial="hidden"
+        whileInView={"visible"}
+        transition={{ duration: 0.7 }}
+        viewport={{ once: true }}
+      >
+        <Image
+          src={cosplaysframe}
+          alt="cosplay frame"
+          width={370}
+          height={500}
+        />
+      </motion.div>
 
-      <div className="mx-5 flex w-full flex-wrap justify-center gap-20">
+      <motion.div
+        variants={animations}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        className="mx-5 flex w-full flex-wrap justify-center gap-20"
+      >
         {ITEMS.map((item, index) => (
-          <div key={index} className="w-1/4 sm:w-1/4">
+          <motion.div
+            variants={containerVariants}
+            transition={{ duration: 0.9, type: "spring", bounce: 0.2 }}
+            key={index}
+            className="w-1/4 sm:w-1/4"
+          >
             <Card topText={item.topText} bottomText={item.bottomText} />
-          </div>
+          </motion.div>
         ))}
-      </div>
+      </motion.div>
     </div>
   );
 };