Skip to content

Fix: mobile Find Us layout #127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IvanGarc561 wants to merge 4 commits into
base: dev
Choose a base branch
from
Open

Fix: mobile Find Us layout #127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c02911a
Fix: mobile FindUs layout
IvanGarc561 Nov 24, 2025
2337c94
Merge branch 'dev' of https://github.com/acm-ucr/vsa-website into Res…
IvanGarc561 Dec 5, 2025
da9a9e4
Fixed Find Us Page Attempt 2
IvanGarc561 Dec 6, 2025
fcce702
Fixed Find Us Page Attempt #3
IvanGarc561 Dec 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 34 additions & 20 deletions src/components/home/FindUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 flex flex-col items-center justify-center px-6 py-12 md:px-20 md:py-20"
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 font-bold md:text-4xl">
Find Us!
</p>
{/* SubHeading */}
<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="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">
<Image
src={VSAlogo}
alt="First image of VSA Logo"
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:-ml-px md:w-1/2">
<Image
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>
</motion.div>
</motion.section>
);
};

Expand Down
Loading