diff --git a/public/event-banner.jpg b/public/event-banner.jpg index ad92d86..5596220 100644 Binary files a/public/event-banner.jpg and b/public/event-banner.jpg differ diff --git a/src/app/UpcomingEvents/page.tsx b/src/app/UpcomingEvents/page.tsx index 2ae2341..887d927 100644 --- a/src/app/UpcomingEvents/page.tsx +++ b/src/app/UpcomingEvents/page.tsx @@ -12,7 +12,6 @@ import Header from "@/components/Header"; import EventCard from "@/components/EventCard"; import Footer from "@/components/Footer"; import { Event } from "@/types/events"; -import { useScrollAnimation } from "@/hooks/useScrollAnimation"; {/* event cards - id starts at 4 bc simpler to keep retreats as 1-3 @@ -20,71 +19,46 @@ import { useScrollAnimation } from "@/hooks/useScrollAnimation"; const regularEvents: Event[] = [ { id: "4", - title: "Praise & Prayer Night", + title: "Park Day", description: - "Come join us for a night of praise and prayer!", - image: "/cross-on-mountain.jpg", + "Come join us for a fun day at the park with sports, bracelet making, and more!", + image: "", location: "Join Discord to see location", // **ONLY list location if on campus. otherwise, state to join discord to see location** - time: "7:00 PM", - day: "Thursday", - date: "Oct 23", - longDescription: "Come join us for a night of praise and prayer!", + time: "2:00 PM", + day: "Friday", + date: "Feb 6", + longDescription: "Our first event of the semester! Come join us for a fun day at the park with sports, bracelet making, and more! Bring your friends, sunscreen, and water.", cost: "Free", }, - // { - // id: "5", - // title: "Bowling Night", - // description: - // "Join us for a fun-filled bowling social and enjoy a relaxed evening to socialize!", - // image: "/images/ww-bowling-night.png", - // location: "Chaparral Lanes - 400 W Bonita Ave, San Dimas, CA 91773", // **ONLY list location if on campus. otherwise, state to join discord to see location** - // time: "7:00 PM", - // day: "Tuesday", - // date: "Aug 26", - // longDescription: "Join us for a fun-filled bowling social and enjoy a relaxed evening to socialize!", - // cost: "$12, free for newcomers", - // }, - // { - // id: "6", - // title: "Boba & Board Games", - // description: - // "Come hangout and meet new friends while enjoying some boba!", - // image: "/images/ww-boba.png", - // location: "Ding Tea - 2516 E Workman Ave,\nWest Covina, CA 91791", // **ONLY list location if on campus. otherwise, state to join discord to see location** - // time: "6:30 PM", - // day: "Wednesday", - // date: "Aug 27", - // longDescription: "Come hangout and meet new friends while enjoying some boba!", - // cost: "Free", - // }, - // { - // id: "7", - // title: "Large Group & Game Night", - // description: - // "Come join us for our first large group meeting of the year! Come see what Epic is all about!", - // image: "/images/ww-large-group.jpg", - // location: "Join Discord for Location", // **ONLY list location if on campus. otherwise, state to join discord to see location** - // time: "7:00 PM", - // day: "Thursday", - // date: "Aug 28", - // longDescription: "Come join us for our first large group meeting of the year! Come see what Epic is all about!", - // cost: "Free", - // }, - // { - // id: "8", - // title: "Downtown Disney", - // description: - // "Come explore Downtown Disney with us as we enjoy beignets and other foods!", - // image: "/images/ww-downtown-disney.png", - // location: "Downtown Disney District - 1741 Disneyland Dr, Anaheim, CA 92802", // **ONLY list location if on campus. otherwise, state to join discord to see location** - // time: "7:30 PM", - // day: "Friday", - // date: "Aug 29", - // longDescription: "Come explore Downtown Disney with us as we enjoy beignets and other foods!", - // cost: "Split parking with driver", - // }, + { + id: "5", + title: "Epic Olympics", + description: + "The first ever Epic Olympics with Epic Movements from SLO, SB, Pomona, and Fullerton!", + image: "/images/epicolympics.png", + location: "West Beach, Santa Barbara", // **ONLY list location if on campus. otherwise, state to join discord to see location** + time: "11:00 AM", + day: "Saturday", + date: "Feb 21", + longDescription: "We are so excited to announce the first ever Epic Olympics with Epic Movements from SLO, SB, Pomona, and Fullerton! The hope for this event is to build long lasting, Christ-centered friendships between campuses and offer a time to celebrate and encourage each other in their goals/accomplishments. We can't wait to see yall there, feel free to reach out to your campus lead with any questions :)", + cost: "$8", + }, + { + id: "6", + title: "Epic Madness", + description: + "Basketball tournament! More details to come.", + image: "", + location: "Join Discord for location", // **ONLY list location if on campus. otherwise, state to join discord to see location** + time: "TBD", + day: "Saturday", + date: "Mar 14", + longDescription: "More details to come.", + cost: "TBD", + }, ]; + {/* retreat cards - id 1-3 (3 retreats every year, constant) */ } const retreats: Event[] = [ @@ -92,55 +66,44 @@ const retreats: Event[] = [ id: "1", title: "Fall Retreat", description: - "Come join us for a weekend of rest in nature where we can experience God's love and goodness!", + "This event has concluded. Stay tuned for next year's Fall Retreat!", image: "/fall-retreat.jpg", location: "Camp Wrightwood", day: "Friday-Sunday", date: "Oct 10-12", longDescription: "Come spend a weekend in the woods with refreshing outdoor time and the cool, crispy mountain air! This year, we are focusing on spiritual disciplines that will help us draw closer to God as our source of refreshment while also drawing closer to each other! Hope to see you there!", cost: "Regular: $110 | First-timer: $77 | Scholarships available", - registrationLink: "https://www.eventregistrationtool.com/register/2b66fdc0-0a08-4b64-bbea-89027343a94c?regType=387a9e40-7856-4a9f-beae-76b4ecc4aea0", + registrationLink: "", }, { id: "2", title: "Winter Conference", description: - "Join us for four amazing days of drawing near to God’s heart through inspiring teaching, musical worship, life-changing community, and so much more.", + "This event has concluded. Stay tuned for next year's Winter Conference!", image: "/winter-conference.jpg", location: "Hyatt Regency Orange County", day: "Friday-Monday", date: "Jan 16-19", - longDescription: "Winter Conference is a gathering of college students experiencing Jesus, growing together in our faith, and discovering our place in the mission of God. Join us for four amazing days of drawing near to God’s heart through inspiring teaching, musical worship, life-changing community, and so much more.", + longDescription: "Winter Conference is a gathering of college students experiencing Jesus, growing together in our faith, and discovering our place in the mission of God. Join us for four amazing days of drawing near to God's heart through inspiring teaching, musical worship, life-changing community, and so much more.", + cost: "$259 (before Jan 3) | $319 (regular) | Scholarships available", + registrationLink: "", + }, + { + id: "3", + title: "Spring Break Trip", + description: + "TBD", + image: "", + location: "TBD", + day: "TBD", + date: "TBD", + longDescription: "TBD", cost: "TBD", registrationLink: "https://www.youtube.com/watch?v=NhHb9usKy6Q&list=RDNhHb9usKy6Q&start_radio=1", }, - // { - // id: "3", - // title: "Spring Break Trip", - // description: - // "TBD", - // image: "", - // location: "TBD", - // day: "TBD", - // date: "TBD", - // longDescription: "TBD", - // cost: "TBD", - // registrationLink: "https://www.youtube.com/watch?v=NhHb9usKy6Q&list=RDNhHb9usKy6Q&start_radio=1", - // }, ]; const UpcomingEvents: React.FC = () => { - // Animation hooks for different sections - const [featuredRef, featuredVisible] = - useScrollAnimation({ enter: 0.35, exit: 0.1 }); - - const [eventsHeaderRef, eventsHeaderVisible] = - useScrollAnimation({ enter: 0.5, exit: 0.15 }); - - const [retreatsHeaderRef, retreatsHeaderVisible] = - useScrollAnimation({ enter: 0.5, exit: 0.15 }); - - return (
{/* Header */} @@ -154,11 +117,10 @@ const UpcomingEvents: React.FC = () => { alt="Hero background" fill className="object-cover" - style={{ filter: "blur(2px)" }} /> {/* Overlay */} -
+
{/* Hero Content */}
@@ -171,45 +133,116 @@ const UpcomingEvents: React.FC = () => {
{/* Featured Event Section */} -
-
+
+
+ {/* Container */} +
+ + {/* Background Image */} Fall Retreat - {/* Tint overlay */} -
+ {/* Gradient Overlay - darker and more sophisticated */} +
+ + {/* Content Container */} +
+
+ {/* Date Badge */} +
+
+ + Feb 21 + +
+
+ + Saturday, 11:00 AM + +
+ + {/* Featured Label */} +

+ Featured Event +

- {/* Centered Featured Event Text */} -
-

- FEATURED EVENT -

-

- FALL RETREAT -

+ {/* Event Title */} +

+ Epic Olympics +

+ + {/* Description */} +

+ Join Epic Movements from SLO, SB, Pomona, and Fullerton for our first ever Epic Olympics! +

+ + {/* Quick Info Pills */} +
+
+ + West Beach, Santa Barbara + +
+
+ + $8 + +
+
+ + {/* CTA Buttons */} + +
+
{/* Events Section */} -
+
{/* Events Heading with full-width centered divider */} -
-
-

+
+
+

EVENTS

-
+
@@ -227,16 +260,12 @@ const UpcomingEvents: React.FC = () => { {/* Retreats Section */}
{/* Retreats Heading with full-width centered divider */} -
-
-

+
+
+

RETREATS

-
+
diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx index 511dc93..6ca681a 100644 --- a/src/components/EventCard.tsx +++ b/src/components/EventCard.tsx @@ -3,7 +3,6 @@ import { useState } from "react"; import Image from "next/image"; import { Event } from "@/types/events"; -import { useScrollAnimation } from "@/hooks/useScrollAnimation"; interface EventCardProps { event: Event; @@ -59,9 +58,6 @@ const BackIcon = () => ( export default function EventCard({ event }: EventCardProps) { const [isFlipped, setIsFlipped] = useState(false); - const [ref, isVisible] = - useScrollAnimation({ enter: 0.3, exit: 0.08, rootMargin: "0px 0px -15% 0px", debounceMs: 40 }); - const hasTime = typeof event.time === "string" && event.time.trim() !== ""; const whenPrefix = [event.day, event.date].filter(Boolean).join(", "); @@ -78,7 +74,7 @@ export default function EventCard({ event }: EventCardProps) { }; return ( -
+
{/* Front Side */}
@@ -92,7 +88,7 @@ export default function EventCard({ event }: EventCardProps) { className="card-image" /> {/* Date Bubble - show only on the FRONT */} - {!isFlipped && event.date && ( + {event.date && (
{event.date}
)}
@@ -164,8 +160,6 @@ export default function EventCard({ event }: EventCardProps) {

{event.location}

- - {event.cost && (

Cost

@@ -173,10 +167,6 @@ export default function EventCard({ event }: EventCardProps) {
)} - - - - {event.registrationLink && (
({ - enter = 0.3, - exit = 0.1, - root = null, - rootMargin = "0px 0px -15% 0px", - debounceMs = 0, -}: Options = {}) { - const ref = useRef(null); - const [visible, setVisible] = useState(false); - const debounceRef = useRef(null); - - useEffect(() => { - const node = ref.current; - if (!node) return; - - const onChange = (next: boolean) => { - if (debounceMs <= 0) { - setVisible(next); - return; - } - if (debounceRef.current) window.clearTimeout(debounceRef.current); - debounceRef.current = window.setTimeout(() => setVisible(next), debounceMs); - }; - - const observer = new IntersectionObserver( - ([entry]) => { - const r = entry.intersectionRatio; - if (!visible && r >= enter) onChange(true); - else if (visible && r <= exit) onChange(false); - }, - { root, threshold: [exit, enter], rootMargin } - ); - - observer.observe(node); - return () => { - observer.disconnect(); - if (debounceRef.current) window.clearTimeout(debounceRef.current); - }; - }, [enter, exit, root, rootMargin, debounceMs, visible]); - - return [ref, visible] as const; -}