PSE Landing Page Banner #26

ZaydenGit · 2025-10-12T08:42:07Z

Fixes #11
Needs a fix to properly scale background. It should be slightly more zoomed in, I just wanted to push this tonight.
The directory for the asset used in the background may need to be changed.
The positioning of elements may be slighty off but I tried to follow the figma.

ZaydenGit · 2025-10-12T08:45:08Z

I guess I messed up and created a branch from my Example component branch, so scrap those commits when this is merged.

ZaydenGit · 2025-10-14T17:18:12Z

Last commit to this fixed pretty much everything. Forgot to mention in the commit that I also changed the h1 tag to a p tag. Changed image types as well. Should be good to merge now.

swedenagu · 2025-10-15T04:44:05Z

src/components/landing/PSEBanner.tsx

+      <Image
+        src={PSEBg}
+        alt="PSE Background"
+        className="center absolute inset-0 -top-[20px] -z-10 flex w-full scale-120 object-cover"


the banner should be positioned closer to the top of the page. remember to leave room for the navbar

for the point of "remember to leave room for the navbar", are the components not called within a flex-col? wouldn't they be dynamically positioned on top of one another? i'll remove the vertical centering for sure, but shouldn't it be fine for it to just go to the top of the page?

oh wait this works fine, I forgot it's absolutely positioned but relative to the div it's inside

swedenagu · 2025-10-15T04:45:03Z

src/components/landing/PSEBanner.tsx

+const PSEBanner = () => {
+  return (
+    <div
+      className={`relative flex h-[459px] w-full flex-col items-center justify-center overflow-clip`}


see if you can make the height relative to screen size for responsiveness but where it'll look about the same as this pixel size

swedenagu · 2025-10-15T04:45:33Z

src/components/landing/PSEBanner.tsx

+      <p className="font-pse-crimson-text z-10 text-center text-[125px] text-white">
+        Pi Sigma Epsilon
+      </p>
+      ``
+      <p className="font-pse-gfs-didot z-10 -mt-8 text-center text-[40px] text-white">


responsify text size (with breakpoints)

… fixed scaling, minor fixes

…ording to Figma)

…ar to ease-out

ZaydenGit · 2025-10-16T02:21:15Z

Added breakpoints to properly scale each element for sm, md, and lg displays.

src/components/landing/PSEBanner.tsx

Update Images to Webp

brandontran1220

Hey Zayden, it looks really good! I was waiting for the button to be made. Can you import the button and call it within your component. Refer to the figma on spacing/design. Just copy the properties listed in page.tsx.

src/app/page.tsx

brandontran1220 · 2025-10-20T04:15:46Z

src/app/page.tsx

+
 const Home = () => {
  return (
    <div className="flex h-screen w-screen items-center justify-center">


Suggested change

<div className="flex h-screen w-screen items-center justify-center">

<div className="h-screen w-screen items-center justify-center">

src/app/page.tsx

ZaydenGit · 2025-10-21T21:57:09Z

brandontran1220 · 2025-10-22T01:32:23Z

src/app/page.tsx

-"use client";
-
-import Principles from "@/components/landing/Principles";


Looks like you deleted principles. Add this component back to page.tsx

Also, import and add the ourmission component

brandontran1220 · 2025-10-22T01:32:33Z

src/app/page.tsx

-        text="JOIN US!"
-        color="bg-pse-yellow-100"
-      />*/}
-      <Principles />


Call the principles component

brandontran1220 · 2025-10-22T01:33:19Z

src/components/landing/PSEBanner.tsx

+      <p className="font-pse-maitree z-10 -mt-18 scale-50 text-center text-[40px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:-mt-16 sm:scale-60 md:-mt-10 md:scale-75 lg:-mt-6 lg:scale-100">
+        University of California, Riverside Chapter
+      </p>
+      <div className="relative z-10 mt-0 scale-80 transition-transform duration-300 ease-out hover:bg-red-500 sm:mt-2 sm:scale-90 md:mt-8 md:scale-100 lg:mt-10 lg:scale-110">


Suggested change

<div className="relative z-10 mt-0 scale-80 transition-transform duration-300 ease-out hover:bg-red-500 sm:mt-2 sm:scale-90 md:mt-8 md:scale-100 lg:mt-10 lg:scale-110">

<div className="relative z-10 mt-0 scale-80 transition-transform duration-300 ease-out sm:mt-2 sm:scale-90 md:mt-8 md:scale-100 lg:mt-10 lg:scale-110">

brandontran1220 · 2025-10-22T01:35:43Z

src/components/landing/PSEBanner.tsx

+      <p className="font-pse-crimson-text scale-50 text-center text-[125px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:scale-60 md:scale-75 lg:scale-100">
+        Pi Sigma Epsilon
+      </p>
+      <p className="font-pse-maitree z-10 -mt-18 scale-50 text-center text-[40px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:-mt-16 sm:scale-60 md:-mt-10 md:scale-75 lg:-mt-6 lg:scale-100">
+        University of California, Riverside Chapter
+      </p>


Try using the text sizes available already. Try to match as best as you can! For example: text-2xl.

Suggested change

<p className="font-pse-crimson-text scale-50 text-center text-[125px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:scale-60 md:scale-75 lg:scale-100">

Pi Sigma Epsilon

</p>

<p className="font-pse-maitree z-10 -mt-18 scale-50 text-center text-[40px] whitespace-nowrap text-white transition-transform duration-300 ease-out sm:-mt-16 sm:scale-60 md:-mt-10 md:scale-75 lg:-mt-6 lg:scale-100">

University of California, Riverside Chapter

</p>

<p className="font-pse-crimson-text scale-50 text-center text- whitespace-nowrap text-white transition-transform duration-300 ease-out sm:scale-60 md:scale-75 lg:scale-100">

Pi Sigma Epsilon

</p>

<p className="font-pse-maitree z-10 -mt-18 scale-50 text-center text- whitespace-nowrap text-white transition-transform duration-300 ease-out sm:-mt-16 sm:scale-60 md:-mt-10 md:scale-75 lg:-mt-6 lg:scale-100">

University of California, Riverside Chapter

</p>

- I had to add a small margin around the "OurMission" component since it currently has no margin. - I didn't change the text from px to a predefined tailwindcss size because they are all too small and I would have to redo my scaling, which isn't just one simple thing as I have mobile responsiveness in my component (I know you said to leave this, but I already did the work and can just make slight edits later on according to specification instead of a total redo). - The hover:bg-red-500 thing was a remnant from me trying to add something to the button where it gets slightly darker on hover - couldn't get it to work, that was part of me testing to see if I could (I couldn't). meant to remove it. my bad!

swedenagu · 2025-10-23T06:10:26Z

src/components/landing/PSEBanner.tsx

+const PSEBanner = () => {
+  return (
+    <div
+      className={`relative flex h-[309px] w-full flex-col items-center justify-center overflow-clip transition-transform duration-300 ease-out sm:h-[359px] md:h-[409px] lg:h-[459px]`}


breakpoints work for the size they're applied at and up. for example, if you want to set a default size for smaller screens and then have medium and larger screens have a larger height for the element, it would look like this:

Suggested change

className={`relative flex h-[309px] w-full flex-col items-center justify-center overflow-clip transition-transform duration-300 ease-out sm:h-[359px] md:h-[409px] lg:h-[459px]`}

className={`relative flex h-1/5 w-full flex-col items-center justify-center overflow-clip transition-transform duration-300 ease-out md:h-1/2`}

ZaydenGit requested review from Howardwheeler, brandontran1220 and swedenagu October 12, 2025 08:42

ZaydenGit self-assigned this Oct 12, 2025

ZaydenGit added help wanted Extra attention is needed Landing Page labels Oct 12, 2025

ZaydenGit added Ready for Review and removed help wanted Extra attention is needed labels Oct 14, 2025

swedenagu requested changes Oct 15, 2025

View reviewed changes

ZaydenGit added 4 commits October 15, 2025 18:58

Created PSEBanner.tsx, pse_bg.png, modified page.tsx

275e103

Changed background png directory, added / modified Next.js Image tag,…

f9b5f36

… fixed scaling, minor fixes

Made each element dynamically scale with breakpoints

3bde3b8

Changed scaling slightly and updated font of subtitle to Maitree (acc…

48c881c

…ording to Figma)

ZaydenGit force-pushed the ZaydenGit/pi-sigma-epsilon branch from 2d2fe08 to 48c881c Compare October 16, 2025 02:08

ZaydenGit and others added 5 commits October 16, 2025 02:08

Merge 48c881c into 9851b14

4a0270e

convert images to webp

db54e6e

Added large scaling breakpoint and changed transitions from ease-line…

3fe0136

…ar to ease-out

Merge 3fe0136 into 9851b14

a0e3e65

convert images to webp

d3ab027

swedenagu requested changes Oct 16, 2025

View reviewed changes

src/components/landing/PSEBanner.tsx Outdated Show resolved Hide resolved

swedenagu added Address Comments and removed Ready for Review labels Oct 16, 2025

Merge pull request #38 from acm-ucr/acm-ucr/images_ac76167e90cc6492

15d7f88

Update Images to Webp

ZaydenGit added Ready for Review and removed Address Comments labels Oct 17, 2025

ZaydenGit requested a review from swedenagu October 17, 2025 04:05

Merge pull request #37 from acm-ucr/acm-ucr/images_0afc4edae199b2ea

eed73b5

Update Images to Webp

Merge branch 'dev' into ZaydenGit/pi-sigma-epsilon

ca2c845

brandontran1220 requested changes Oct 20, 2025

View reviewed changes

brandontran1220 added Address Comments and removed Ready for Review labels Oct 20, 2025

ZaydenGit and others added 2 commits October 21, 2025 14:52

Added Join Buttonto PSE Banner

7a1bb27

Merge branch 'dev' into ZaydenGit/pi-sigma-epsilon

1763bd0

brandontran1220 requested changes Oct 22, 2025

View reviewed changes

ZaydenGit added Ready for Review and removed Address Comments labels Oct 22, 2025

ZaydenGit requested a review from brandontran1220 October 22, 2025 20:56

swedenagu requested changes Oct 23, 2025

View reviewed changes

swedenagu added Address Comments and removed Ready for Review labels Oct 23, 2025

	<div className="flex h-screen w-screen items-center justify-center">
	<div className="h-screen w-screen items-center justify-center">

		"use client";

		import Principles from "@/components/landing/Principles";

	<div className="relative z-10 mt-0 scale-80 transition-transform duration-300 ease-out hover:bg-red-500 sm:mt-2 sm:scale-90 md:mt-8 md:scale-100 lg:mt-10 lg:scale-110">
	<div className="relative z-10 mt-0 scale-80 transition-transform duration-300 ease-out sm:mt-2 sm:scale-90 md:mt-8 md:scale-100 lg:mt-10 lg:scale-110">

	className={`relative flex h-[309px] w-full flex-col items-center justify-center overflow-clip transition-transform duration-300 ease-out sm:h-[359px] md:h-[409px] lg:h-[459px]`}
	className={`relative flex h-1/5 w-full flex-col items-center justify-center overflow-clip transition-transform duration-300 ease-out md:h-1/2`}

PSE Landing Page Banner #26

Are you sure you want to change the base?

PSE Landing Page Banner #26

Uh oh!

Conversation

ZaydenGit commented Oct 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZaydenGit commented Oct 12, 2025

Uh oh!

ZaydenGit commented Oct 14, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ZaydenGit commented Oct 16, 2025

Uh oh!

Uh oh!

brandontran1220 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ZaydenGit commented Oct 21, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandontran1220 Oct 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ZaydenGit commented Oct 12, 2025 •

edited

Loading

brandontran1220 Oct 22, 2025 •

edited

Loading