Skip to content

Past Events Mobile Responsiveness and Animations #67

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

Merged
merged 3 commits into from
Nov 26, 2025
Merged

Past Events Mobile Responsiveness and Animations #67

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5910dbf
Make text smaller
kshuang04 Nov 20, 2025
7649a60
Implemented mobile responsiveness
kshuang04 Nov 20, 2025
91d693a
Added image animations
kshuang04 Nov 20, 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
96 changes: 71 additions & 25 deletions src/components/events/PastEvents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";
import { useState } from "react";
import { motion } from "motion/react";
import Image from "next/image";
import ocleft from "@/public/events/oc/oc-left.webp";
import ocmiddle from "@/public/events/oc/oc-middle.webp";
Expand Down Expand Up @@ -43,19 +44,19 @@ const PastEvents = () => {
content: `At Ascend UCR, we believe starting your professional journey shouldn't be overwhelming — that's why we created Growth Week. Instead of spreading workshops across the year like most organizations, we condences everything you need to kickstart you career into one action-packed week.

During Week 2 of both Fall and Winter quarters, we host three back-to-back events focused on helping you get ready: from prefecting you resume before you hit "submit," to mastering networking strategies that build real relationships, to sharpening your interview skills.
Growth Week is all about giving you the tools, confidence, and momentum to grow into the professional and leader you aspire to be. It's designed to eliminate the barriars to getting started — inspiring you to take action now and make your futer happen.`,
Growth Week is all about giving you the tools, confidence, and momentum to grow into the professional and leader you aspire to be. It's designed to eliminate the barriars to getting started — inspiring you to take action now and make your future happen.`,
},
];

return (
<div className="py-20">
<Heading title="Past Events" />
<div className="outline-ascend-light-orange h-full w-full p-16">
<div className="outline-ascend-light-orange h-full w-full p-8 md:p-16">
<div className="flex">
{tabs.map(({ id, title }) => (
<button
key={id}
className={`font-playfair flex-1 rounded-t-4xl p-8 text-4xl font-bold ${
className={`font-playfair flex-1 rounded-t-2xl p-2 font-bold md:rounded-t-4xl md:p-8 md:text-3xl ${
activeTab === id
? "bg-ascend-light-orange"
: "text-ascend-red-orange bg-gray-300"
Expand All @@ -66,7 +67,7 @@ const PastEvents = () => {
</button>
))}
</div>
<div className="font-nunito border-ascend-light-orange border-2 p-10 text-center text-2xl">
<div className="font-nunito border-ascend-light-orange border-2 p-6 text-center md:p-10 md:text-xl">
{tabs.map(
({ id, content }) =>
activeTab === id && (
Expand All @@ -75,87 +76,132 @@ const PastEvents = () => {
<p key={idx}>{paragraph.trim()}</p>
))}
{activeTab === 1 && (
<div className="grid grid-cols-3 gap-4">
<div className="relative h-64 w-full overflow-hidden rounded-lg">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2 }}
className="relative hidden h-64 w-full overflow-hidden rounded-lg md:block"
>
<Image
src={ocleft}
alt="ocleft"
fill
className="object-cover"
/>
</div>
<div className="relative h-64 w-full overflow-hidden rounded-lg">
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2, delay: 0.4 }}
className="relative hidden h-64 w-full overflow-hidden rounded-lg md:block"
>
<Image
src={ocmiddle}
alt="ocmiddle"
fill
className="object-cover"
/>
</div>
<div className="relative h-64 w-full overflow-hidden rounded-lg">
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2, delay: 0.8 }}
className="relative h-64 w-full overflow-hidden rounded-lg"
>
<Image
src={ocright}
alt="ocright"
fill
className="object-cover [object-position:center_20%]"
/>
</div>
</motion.div>
</div>
)}
{activeTab === 2 && (
<div className="grid grid-cols-3 gap-4">
<div className="relative h-64 w-full overflow-hidden rounded-lg">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2 }}
className="relative h-64 w-full overflow-hidden rounded-lg"
>
<Image
src={ssleft}
alt="ssleft"
fill
className="object-cover"
/>
</div>
<div className="relative h-64 w-full overflow-hidden rounded-lg">
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2, delay: 0.4 }}
className="relative hidden h-64 w-full overflow-hidden rounded-lg md:block"
>
<Image
src={ssmiddle}
alt="ssmiddle"
fill
className="object-cover"
/>
</div>
<div className="relative h-64 w-full overflow-hidden rounded-lg">
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2, delay: 0.8 }}
className="relative hidden h-64 w-full overflow-hidden rounded-lg md:block"
>
<Image
src={ssright}
alt="ssright"
fill
className="object-cover"
/>
</div>
</motion.div>
</div>
)}
{activeTab === 3 && (
<div className="grid grid-cols-3 gap-4">
<div className="relative h-64 w-full overflow-hidden rounded-lg">
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2 }}
className="relative h-64 w-full overflow-hidden rounded-lg"
>
<Image
src={gwleft}
alt="gwleft"
fill
className="object-cover [object-position:center_40%]"
/>
</div>
<div className="relative h-64 w-full overflow-hidden rounded-lg">
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2, delay: 0.4 }}
className="relative hidden h-64 w-full overflow-hidden rounded-lg md:block"
>
<Image
src={gwmiddle}
alt="gwmiddle"
fill
className="object-cover"
/>
</div>
<div className="relative h-64 w-full overflow-hidden rounded-lg">
</motion.div>
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
transition={{ duration: 1.2, delay: 0.8 }}
className="relative hidden h-64 w-full overflow-hidden rounded-lg md:block"
>
<Image
src={gwright}
alt="gwright"
fill
className="object-cover"
/>
</div>
</motion.div>
</div>
)}
</div>
Expand Down
Loading