From c02911a471e607711544237079c9b547f6a9d63b Mon Sep 17 00:00:00 2001
From: IvanGarc561 <ivangarciamora05@gmail.com>
Date: Sun, 23 Nov 2025 17:31:46 -0800
Subject: [PATCH 1/3] Fix: mobile FindUs layout

---
 package-lock.json              | 14 +----------
 src/components/home/FindUs.tsx | 44 +++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bdc28e8..6f8dbff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1806,7 +1806,6 @@
       "integrity": "sha512-MoFsEJKkAtZCrC1r6CM8U22GzhG7u2Wir8ons/aCKH6MBdD1ibV24zOSSkdZVUKqN5i396zG5VKLYZ3yaUZdLA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1817,7 +1816,6 @@
       "integrity": "sha512-0Knk+HJiMP/qOZgMyNFamlIjw9OFCsyC2ZbigmEEyXXixgre6IQpm/4V+r3qH4GC1JPvRJKInw+on2rV6YZLeA==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -1882,7 +1880,6 @@
       "integrity": "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.28.0",
         "@typescript-eslint/types": "8.28.0",
@@ -2215,7 +2212,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2890,8 +2886,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -3125,7 +3120,6 @@
       "integrity": "sha512-jV7AbNoFPAY1EkFYpLq5bslU9NLNO8xnEeQXwErNibVryjk67wHVmddTBilc5srIttJDBrB0eMHKZBFbSIABCw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3187,7 +3181,6 @@
       "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -5293,7 +5286,6 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -5444,7 +5436,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
       "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5475,7 +5466,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
       "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.25.0"
       },
@@ -6335,7 +6325,6 @@
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6408,7 +6397,6 @@
       "integrity": "sha512-pS1hdZ+vnrpDIxuFXYQpLTILglTjSYJ9MbetZctrUawogUsPdz31DIIRZ9+rab0LhYNTsk88w4fIzVheiTbWOQ==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.0.0",
         "@typescript-eslint/types": "8.0.0",
diff --git a/src/components/home/FindUs.tsx b/src/components/home/FindUs.tsx
index fd0bdd8..5027097 100644
--- a/src/components/home/FindUs.tsx
+++ b/src/components/home/FindUs.tsx
@@ -4,26 +4,32 @@ import VSAlogo from "@/public/VSA_logo.svg";
 
 const FindUs = () => {
   return (
-    <div className="bg-vsa-yellow-100 flex flex-col items-center justify-center p-20">
-      <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-5xl font-bold">
-        Find Us!
-      </p>
-      <p className="text-vsa-brown font-vsa-alt w-7/12 pt-4 text-left text-2xl">
-        Come meet us at tabling by the Bell Tower every Wednesday
-      </p>
-      <div className="mt-6 flex w-full items-center justify-center">
-        <Image
-          src={VSAlogo}
-          alt="First image of VSA Logo"
-          className="border-vsa-green-400 aspect-square w-1/5 border-2 object-contain"
-        />
-        <Image
-          src={VSAlogo}
-          alt="Second image of VSA Logo"
-          className="border-vsa-green-400 aspect-square w-1/5 border-2 object-contain"
-        />
+    <section className="bg-vsa-yellow-100 flex flex-col items-center justify-center px-6 py-12 md:px-20 md:py-20">
+      <div className="w-full max-w-3xl">
+        <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-4xl font-bold md:text-5xl">
+          Find Us!
+        </p>
+        <p className="text-vsa-brown font-vsa-alt w-7/12 pt-4 text-left text-lg md:text-2xl">
+          Come meet us at tabling by the Bell Tower every Wednesday
+        </p>
+        <div className="mt-8 flex flex-col gap-6 md:flex-row md:items-start md:justify-center md:gap-0">
+          <div className="self-end md:self-auto">
+            <Image
+              src={VSAlogo}
+              alt="First image of VSA Logo"
+              className="border-vsa-green-400 md:w-200px md:h-200px aspect-square w-1/2 max-w-xs border-2 object-contain md:w-1/5"
+            />
+          </div>
+          <div className="self-start md:self-auto">
+            <Image
+              src={VSAlogo}
+              alt="Second image of VSA Logo"
+              className="border-vsa-green-400 md:w-200px md:h-200px aspect-square w-1/2 max-w-xs border-2 object-contain md:w-1/5"
+            />
+          </div>
+        </div>
       </div>
-    </div>
+    </section>
   );
 };
 

From da9a9e4a11f8e28a930fd72f14a45a9d91cd0ade Mon Sep 17 00:00:00 2001
From: IvanGarc561 <ivangarciamora05@gmail.com>
Date: Sat, 6 Dec 2025 00:30:29 -0800
Subject: [PATCH 2/3] Fixed Find Us Page Attempt 2

---
 src/components/home/FindUs.tsx | 54 +++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/home/FindUs.tsx b/src/components/home/FindUs.tsx
index a507bf3..e58f62e 100644
--- a/src/components/home/FindUs.tsx
+++ b/src/components/home/FindUs.tsx
@@ -2,37 +2,51 @@
 import Image from "next/image";
 import VSAlogo from "@/public/VSA_logo.svg";
 import { motion } from "motion/react";
+
 const fadeInAnimation = {
   initial: { opacity: 0 },
   whileInView: { opacity: 1, transition: { duration: 1.25 } },
 };
+
 const FindUs = () => {
   return (
-    <motion.div
-      className="bg-vsa-yellow-100 flex flex-col items-center justify-center p-20"
+    <motion.section
+      className="bg-vsa-yellow-100 px-6 py-12 md:px-20 md:py-20 flex flex-col items-center justify-center"
       variants={fadeInAnimation}
       initial="initial"
       whileInView="whileInView"
     >
-      <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-5xl font-bold">
-        Find Us!
-      </p>
-      <p className="text-vsa-brown font-vsa-alt w-7/12 pt-4 text-left text-2xl">
-        Come meet us at tabling by the Bell Tower every Wednesday
-      </p>
-      <div className="mt-6 flex w-full items-center justify-center">
-        <Image
-          src={VSAlogo}
-          alt="First image of VSA Logo"
-          className="border-vsa-green-400 aspect-square w-1/5 border-2 object-contain"
-        />
-        <Image
-          src={VSAlogo}
-          alt="Second image of VSA Logo"
-          className="border-vsa-green-400 aspect-square w-1/5 border-2 object-contain"
-        />
+      {/* Inner content container */}
+      <div className="w-full max-w-md md:max-w-4xl">
+        {/*Heading */}
+          <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-3xl md:text-4xl font-bold">
+            Find Us!
+          </p>
+        {/* SubHeading */}
+          <p className="text-vsa-brown font-vsa-alt w-auto mt-2 pt-4 text-base md:text-lg">
+            Come meet us at tabling by the Bell Tower every Wednesday
+          </p>
+        {/*Images row */}
+        <div className="mt-8 relative flex flex-col md:flex-row items-center justify-center md:items-start">
+          {/*Left image */}
+          <div className = "w-full md:w-1/2">
+            <Image
+              src={VSAlogo}
+              alt="First image of VSA Logo"
+              className="border-vsa-green-400 aspect-square w-3/5 md:w-full shadow-md object-contain border-2 ml-33 md:mt-0 md:ml-0"
+            />
+          </div>
+          {/*Right image */}
+          <div className = "w-full md:w-1/2 md:-ml-px">
+            <Image
+            src={VSAlogo}
+            alt="Second image of VSA Logo"
+            className="border-vsa-green-400 aspect-square w-3/5 h-1/5 md:w-full border-2 object-contain shadow-md mt-10 md:mt-0 md:ml-0"
+            />
+          </div>
+          </div>
       </div>
-    </motion.div>
+    </motion.section>
   );
 };
 

From fcce702b693b5c1524946a033e45cbdaa479fcf4 Mon Sep 17 00:00:00 2001
From: IvanGarc561 <ivangarciamora05@gmail.com>
Date: Sat, 6 Dec 2025 00:34:53 -0800
Subject: [PATCH 3/3] Fixed Find Us Page Attempt #3

---
 src/components/home/FindUs.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/home/FindUs.tsx b/src/components/home/FindUs.tsx
index e58f62e..fab316b 100644
--- a/src/components/home/FindUs.tsx
+++ b/src/components/home/FindUs.tsx
@@ -11,7 +11,7 @@ const fadeInAnimation = {
 const FindUs = () => {
   return (
     <motion.section
-      className="bg-vsa-yellow-100 px-6 py-12 md:px-20 md:py-20 flex flex-col items-center justify-center"
+      className="bg-vsa-yellow-100 flex flex-col items-center justify-center px-6 py-12 md:px-20 md:py-20"
       variants={fadeInAnimation}
       initial="initial"
       whileInView="whileInView"
@@ -19,32 +19,32 @@ const FindUs = () => {
       {/* Inner content container */}
       <div className="w-full max-w-md md:max-w-4xl">
         {/*Heading */}
-          <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-3xl md:text-4xl font-bold">
-            Find Us!
-          </p>
+        <p className="text-vsa-brown font-vsa-main w-7/12 text-left text-3xl font-bold md:text-4xl">
+          Find Us!
+        </p>
         {/* SubHeading */}
-          <p className="text-vsa-brown font-vsa-alt w-auto mt-2 pt-4 text-base md:text-lg">
-            Come meet us at tabling by the Bell Tower every Wednesday
-          </p>
+        <p className="text-vsa-brown font-vsa-alt mt-2 w-auto pt-4 text-base md:text-lg">
+          Come meet us at tabling by the Bell Tower every Wednesday
+        </p>
         {/*Images row */}
-        <div className="mt-8 relative flex flex-col md:flex-row items-center justify-center md:items-start">
+        <div className="relative mt-8 flex flex-col items-center justify-center md:flex-row md:items-start">
           {/*Left image */}
-          <div className = "w-full md:w-1/2">
+          <div className="w-full md:w-1/2">
             <Image
               src={VSAlogo}
               alt="First image of VSA Logo"
-              className="border-vsa-green-400 aspect-square w-3/5 md:w-full shadow-md object-contain border-2 ml-33 md:mt-0 md:ml-0"
+              className="border-vsa-green-400 ml-33 aspect-square w-3/5 border-2 object-contain shadow-md md:mt-0 md:ml-0 md:w-full"
             />
           </div>
           {/*Right image */}
-          <div className = "w-full md:w-1/2 md:-ml-px">
+          <div className="w-full md:-ml-px md:w-1/2">
             <Image
-            src={VSAlogo}
-            alt="Second image of VSA Logo"
-            className="border-vsa-green-400 aspect-square w-3/5 h-1/5 md:w-full border-2 object-contain shadow-md mt-10 md:mt-0 md:ml-0"
+              src={VSAlogo}
+              alt="Second image of VSA Logo"
+              className="border-vsa-green-400 mt-10 aspect-square h-1/5 w-3/5 border-2 object-contain shadow-md md:mt-0 md:ml-0 md:w-full"
             />
           </div>
-          </div>
+        </div>
       </div>
     </motion.section>
   );