"Join Us" page styling changes and added section #170
Conversation
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
| <div className="flex flex-col items-center mb-8"> | ||
| {image && ( | ||
| <div className="w-32 h-32 overflow-hidden rounded-full mb-4"> | ||
| <img |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
src/app/join/JoinContent.tsx
Outdated
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
lakshman8664
force-pushed
the
join_us_styling
branch
from
1709171 to
d970759
Compare
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
lakshman8664
force-pushed
the
join_us_styling
branch
from
d970759 to
55b8f44
Compare
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
lakshman8664
force-pushed
the
join_us_styling
branch
from
55b8f44 to
2959d0c
Compare
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
…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
2959d0c to
7da5abe
Compare
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
| 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" /> |
There was a problem hiding this comment.
This image is missing a text alternative. This is a problem for people using screen readers.
There was a problem hiding this comment.
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).
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