"Join Us" page styling changes and added section #170

lakshman8664 · 2024-11-20T05:00:13Z

Join us page updated to look like Figma. Added section for External Board Teams. Descriptions extended in 'Opportunities' and 'How Do We Operate?' sections to fit wireframe. Opportunities section updated to look like new wireframe. https://www.figma.com/design/njhHulJqQ8BSfohyR1DPel/Nov-2024%3A-CL-Wireframe-Update?node-id=29-2068&node-type=frame&t=ZUJI9Sg1XxJZvRjr-0

accesslint

There are accessibility issues in these changes.

accesslint · 2024-11-20T05:00:20Z

src/components/BoardAlumniCard.tsx

+    <div className="flex flex-col items-center mb-8">
+      {image && (
+        <div className="w-32 h-32 overflow-hidden rounded-full mb-4">
+          <img


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2024-11-20T05:00:20Z

src/app/join/JoinContent.tsx

+	return (
+		<a href={src} target="_blank" className={`border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+			<div className="flex flex-col items-center w-full space-y-4 group">
+				<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg group-hover:scale-110 transition ease-in-out duration-300" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2024-11-20T05:00:20Z

src/app/join/JoinContent.tsx

+	return (
+		<div className={`group p-4 border-2 border-black-300 rounded-lg transition-transform duration-300 hover:scale-105 ${className}`}>
+			<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
+				<img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint

There are accessibility issues in these changes.

accesslint · 2024-11-20T05:20:40Z

src/app/join/JoinContent.tsx

+	return (
+	  <div className={`group p-4 border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+		<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
+		  <img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint

There are accessibility issues in these changes.

accesslint · 2024-11-20T05:22:52Z

src/app/join/JoinContent.tsx

+	return (
+	  <div className={`group p-4 border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+		<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
+		  <img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint

There are accessibility issues in these changes.

accesslint · 2024-11-21T00:49:31Z

src/app/join/JoinContent.tsx

+	return (
+		<a href={src} target="_blank" className={`border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+			<div className="flex flex-col items-center w-full space-y-4 group">
+				<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg group-hover:scale-110 transition ease-in-out duration-300" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2024-11-21T00:49:31Z

src/app/join/JoinContent.tsx

+	return (
+	  <div className={`group p-4 border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+		<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
+		  <img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2024-11-21T00:49:31Z

src/app/join/JoinContent.tsx

+	return (
+		<div className="border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105">
+		<div className="flex flex-col items-center w-full space-y-4">
+			<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint

There are accessibility issues in these changes.

accesslint · 2024-11-21T01:02:11Z

src/app/join/JoinContent.tsx

+	return (
+		<a href={src} target="_blank" className={`border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+			<div className="flex flex-col items-center w-full space-y-4 group">
+				<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg group-hover:scale-110 transition ease-in-out duration-300" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2024-11-21T01:02:11Z

src/app/join/JoinContent.tsx

+	return (
+	  <div className={`group p-4 border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+		<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
+		  <img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2024-11-21T01:02:11Z

src/app/join/JoinContent.tsx

+	return (
+		<div className="border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105">
+		<div className="flex flex-col items-center w-full space-y-4">
+			<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg" />


This image is missing a text alternative. This is a problem for people using screen readers.

olliepai

pls make the following changes~

make the image for the "Socials and Workshops" card the same height as the other two images
remove the subheadings under each role (the "[24/7]" and "[Before the start of each quarter]"
add text that says "Click card to view application" at the bottom of the Project Lead and Project Member cards. Do this in place of the link at the bottom of those cards (the Figma currently shows links).
Add text underneath OPPORTUNITIES header to match wireframes: "At Creative Labs, we always have activities that all students can participate in! Stayed tuned on our Instagram for the most recent updates!"

…oard Teams. Descriptions extended in 'Opportunities' and 'How Do We Operate?' sections to fit wireframe. Updated 'Opportunities' section to match new wireframe with images and descriptions.

accesslint

There are accessibility issues in these changes.

accesslint · 2025-02-14T03:01:04Z

src/app/join/JoinContent.tsx

+	return (
+		<div className={`border-2 border-black-300 rounded-lg p-6 flex flex-col h-full transition-transform duration-300 hover:scale-105 ${className}`}>
+			<div className="flex flex-col items-center w-full space-y-4 group flex-grow">
+				<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg group-hover:scale-110 transition ease-in-out duration-300" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2025-02-14T03:01:04Z

src/app/join/JoinContent.tsx

+	return (
+	  <div className={`group p-4 border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105 ${className}`}>
+		<div className={`flex justify-center items-center space-x-4 rounded-xl drop-shadow-lg ${bgClassName} ${reverse ? 'flex-row-reverse space-x-reverse' : ''}`}>
+		  <img src={imgSrc} className="h-[100px] md:h-[100px] py-4 drop-shadow-xl" />


This image is missing a text alternative. This is a problem for people using screen readers.

accesslint · 2025-02-14T03:01:05Z

src/app/join/JoinContent.tsx

+// 	return (
+// 		<div className="border-2 border-black-300 rounded-lg p-6 transition-transform duration-300 hover:scale-105">
+// 		<div className="flex flex-col items-center w-full space-y-4">
+// 			<img src={imgSrc} className="h-24 w-24 py-4 drop-shadow-lg" />


This image is missing a text alternative. This is a problem for people using screen readers.

lakshman8664 · 2025-02-14T03:01:31Z

pls make the following changes~

make the image for the "Socials and Workshops" card the same height as the other two images

remove the subheadings under each role (the "[24/7]" and "[Before the start of each quarter]"

add text that says "Click card to view application" at the bottom of the Project Lead and Project Member cards. Do this in place of the link at the bottom of those cards (the Figma currently shows links).

Add text underneath OPPORTUNITIES header to match wireframes: "At Creative Labs, we always have activities that all students can participate in! Stayed tuned on our Instagram for the most recent updates!"

DONE

olliepai

looks good!

145: About Us page layout complete.

1421ed0

accesslint bot reviewed Nov 20, 2024

View reviewed changes

lakshman8664 force-pushed the join_us_styling branch from 1709171 to d970759 Compare November 20, 2024 05:20

accesslint bot reviewed Nov 20, 2024

View reviewed changes

lakshman8664 force-pushed the join_us_styling branch from d970759 to 55b8f44 Compare November 20, 2024 05:22

accesslint bot reviewed Nov 20, 2024

View reviewed changes

lakshman8664 requested review from olliepai and justinsheu November 20, 2024 05:25

lakshman8664 force-pushed the join_us_styling branch from 55b8f44 to 2959d0c Compare November 21, 2024 00:49

accesslint bot reviewed Nov 21, 2024

View reviewed changes

lakshman8664 force-pushed the join_us_styling branch from 2959d0c to 7da5abe Compare November 21, 2024 01:02

accesslint bot reviewed Nov 21, 2024

View reviewed changes

lakshman8664 mentioned this pull request Nov 21, 2024

[Join Us Page] Minor styling changes to match Figma #139

Closed

olliepai requested changes Nov 21, 2024

View reviewed changes

Join us page updated to look like Figma. Added section for External B…

0149d06

…oard Teams. Descriptions extended in 'Opportunities' and 'How Do We Operate?' sections to fit wireframe. Updated 'Opportunities' section to match new wireframe with images and descriptions.

lakshman8664 force-pushed the join_us_styling branch from 7da5abe to 0149d06 Compare February 14, 2025 03:00

accesslint bot reviewed Feb 14, 2025

View reviewed changes

olliepai self-requested a review February 14, 2025 03:44

olliepai approved these changes Feb 14, 2025

View reviewed changes

olliepai merged commit 66592d9 into new_site_dev Feb 14, 2025
2 checks passed

"Join Us" page styling changes and added section #170

"Join Us" page styling changes and added section #170

Uh oh!

Conversation

lakshman8664 commented Nov 20, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

accesslint bot Nov 21, 2024

Choose a reason for hiding this comment

Uh oh!

olliepai left a comment • 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!

accesslint bot left a comment

Choose a reason for hiding this comment

Uh oh!

accesslint bot Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

accesslint bot Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

accesslint bot Feb 14, 2025

Choose a reason for hiding this comment

Uh oh!

lakshman8664 commented Feb 14, 2025

Uh oh!

olliepai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lakshman8664 commented Nov 20, 2024 •

edited

Loading

olliepai left a comment •

edited

Loading