From 25a652d0366da5e4f105a7ac4652ad29fa9fbd04 Mon Sep 17 00:00:00 2001 From: Bhavana Kannan Date: Mon, 18 May 2026 20:41:11 -0700 Subject: [PATCH 1/4] feat(home): add gradient dividers between homepage sections ## Summary Add a centered horizontal gradient divider above every `.section` after the first on the homepage, giving the About / Mission / Programs / Sponsors / Team sections clear visual separation. ## Why The homepage sections previously flowed into each other with only vertical padding between them, making the transitions feel indistinct. A subtle gradient line provides separation without introducing a heavy hard rule that would clash with the dark theme. ## Implementation notes - `.section` is now `position: relative` so its `::before` pseudo can anchor to it. - `.section + .section::before` renders a 3px-tall, up-to-80rem-wide gradient that fades from transparent to `rgba(231,231,229,0.35)` at the center and back to transparent. - Width clamps at 92% so it stays inset from the viewport edges on narrow screens; the first `.section` (About, under the Hero) gets no divider since the Hero already provides visual separation. ## Test plan - [ ] Visit `/` and confirm a soft horizontal divider sits between About / Mission, Mission / Programs, Programs / Sponsors, Sponsors / Team - [ ] About has no divider above it (Hero sits above it) - [ ] On mobile the divider stays inside the viewport (clamped to 92%) --- src/app.css | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/app.css b/src/app.css index c706247..d2df632 100644 --- a/src/app.css +++ b/src/app.css @@ -604,6 +604,26 @@ body { .section { @apply py-8 md:py-16 flex flex-col justify-center items-center; + position: relative; +} + +/* Soft horizontal divider above every section after the first, giving + each homepage section visual separation without heavy hard lines. */ +.section + .section::before { + content: ""; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: min(80rem, 92%); + height: 3px; + background: linear-gradient( + to right, + transparent 0%, + rgba(231, 231, 229, 0.35) 50%, + transparent 100% + ); + pointer-events: none; } .cal-shadow { From a9b44b9799e6d584b0ff8ceb7ae1fb6c5342726a Mon Sep 17 00:00:00 2001 From: Bhavana Kannan Date: Thu, 6 Aug 2026 12:47:01 -0700 Subject: [PATCH 2/4] feat(home): separate sections, draft mission statement, add pillar pages - Add subtle zebra-striped backgrounds to homepage sections on top of the existing gradient dividers, for clearer visual separation. - Draft a mission statement paragraph above the Mission pillar cards (pending review/edit of the copy). - Add a HoverPlayMedia component: pillar cards keep showing their static photo until a videoURL is supplied per pillar, at which point hovering plays it. No video assets yet, scaffold only. - Give each Mission pillar (Professional Development, Community, Learning) a dedicated page at /pillars/:slug and link the cards to it. --- src/App.tsx | 2 + src/app.css | 6 +++ src/components/Mission.tsx | 55 +++++++++++----------------- src/components/ui/HoverPlayMedia.tsx | 43 ++++++++++++++++++++++ src/data/pillars.ts | 36 ++++++++++++++++++ src/pages/PillarDetail.tsx | 41 +++++++++++++++++++++ 6 files changed, 149 insertions(+), 34 deletions(-) create mode 100644 src/components/ui/HoverPlayMedia.tsx create mode 100644 src/data/pillars.ts create mode 100644 src/pages/PillarDetail.tsx diff --git a/src/App.tsx b/src/App.tsx index 8fd2606..8197fc7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -13,6 +13,7 @@ import Resources from "./pages/Forms"; import TravelReimbursement from "./pages/TravelReimbursement"; import Donate from "./pages/Donate"; import History from "./pages/History"; +import PillarDetail from "./pages/PillarDetail"; import ScrollToTop from "./components/ScrollToTop"; import { CartProvider } from "./lib/CartContext"; @@ -54,6 +55,7 @@ function App() { }> } /> } /> + } /> } /> } /> } /> diff --git a/src/app.css b/src/app.css index d2df632..48b5ef4 100644 --- a/src/app.css +++ b/src/app.css @@ -607,6 +607,12 @@ body { position: relative; } +/* Subtle zebra-striping so consecutive sections read as distinct blocks, + on top of the gradient divider line below. */ +.section:nth-of-type(even) { + background-color: rgba(255, 255, 255, 0.025); +} + /* Soft horizontal divider above every section after the first, giving each homepage section visual separation without heavy hard lines. */ .section + .section::before { diff --git a/src/components/Mission.tsx b/src/components/Mission.tsx index 7f78c4c..88ec276 100644 --- a/src/components/Mission.tsx +++ b/src/components/Mission.tsx @@ -1,49 +1,36 @@ -const perks = [ - { - header: "Professional Development", - description: - "SoDA offers boundless opportunities to advance your career. From technical workshops hosted by industry leaders to career fairs and networking events, you’ll gain invaluable experience and connections to kickstart your journey as a software developer.", - imgURL: "/events/amazon-table.webp", - alt: "Amazon table at a SoDA event", - }, - { - header: "Community and Support", - description: - "SoDA provides a supportive network of fellow computer science students, offering collaboration, encouragement, and a sense of belonging through regular meetings and events with free food.", - imgURL: "/events/microsoft-resume-review.webp", - alt: "Microsoft resume review at a SoDA event", - }, - { - header: "Learning", - description: - "Enhance your skills through a variety of learning opportunities, including coding workshops, bootcamps, and talks from industry professionals. SoDA is committed to your personal and professional growth, ensuring you stay ahead in the fast-paced tech world.", - imgURL: "/events/what-is-soda.webp", - alt: "SoDA members at a meeting", - }, -]; +import { Link } from "react-router-dom"; +import HoverPlayMedia from "./ui/HoverPlayMedia"; +import { pillars } from "../data/pillars"; export default function Mission() { return ( <>

Mission

+

+ SoDA exists to make Arizona State University a place where every computer science student + can build real skills, find their community, and launch their career. We do that by + putting professional development, mentorship, and hands-on learning within reach of every + member, free of charge. +

- {perks.map((perk) => ( -
( + - {pillar.alt}
-

{perk.header}

- {/*
*/} -

{perk.description}

+

{pillar.header}

+

{pillar.description}

-
+ ))}
diff --git a/src/components/ui/HoverPlayMedia.tsx b/src/components/ui/HoverPlayMedia.tsx new file mode 100644 index 0000000..0df079c --- /dev/null +++ b/src/components/ui/HoverPlayMedia.tsx @@ -0,0 +1,43 @@ +import { useRef } from "react"; + +interface HoverPlayMediaProps { + src: string; + videoSrc?: string; + alt: string; + className?: string; +} + +export default function HoverPlayMedia({ src, videoSrc, alt, className }: HoverPlayMediaProps) { + const videoRef = useRef(null); + + if (!videoSrc) { + return {alt}; + } + + const play = () => videoRef.current?.play(); + const reset = () => { + const video = videoRef.current; + if (!video) return; + video.pause(); + video.currentTime = 0; + }; + + return ( +