Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsify Why Volunteer Component #80

Merged
merged 5 commits into from
Oct 24, 2024
Merged

Responsify Why Volunteer Component #80

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cb0e556
Responsify Why Volunteer Component
i-vvnn Oct 20, 2024
dd54bc4
Responsify Why Volunteer + Changes to Header
i-vvnn Oct 21, 2024
0708733
Why Volunteer Minor Revise
i-vvnn Oct 22, 2024
5b492f1
Merge branch 'dev' into i-vvnn/ResponsifyWhyVolunteer
SafeDuck Oct 22, 2024
839b211
fix merge conflict
SafeDuck Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from "react";
const Header = (props: { position: string; title: string }) => {
return (
<div
className={`flex flex-row border-b-4 border-t-4 border-white p-2 pl-[5%] pr-[5%] font-archivo-black text-3xl text-white ${props.position === "left" ? "border-r-4" : "border-l-4"}`}
className={`flex flex-row border-b-4 border-t-4 border-white p-2 pl-[5%] pr-[5%] font-archivo-black text-xl text-white ${props.position === "left" ? "border-r-4" : props.position === "middle" ? "border-l-4 border-r-4" : "border-l-4"}`}
>
{props.title}
</div>
Expand Down
19 changes: 11 additions & 8 deletions src/components/home/WhyVolunteer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import Button from "@/components/Button";

const WhyVolunteer = () => {
return (
<div className="flex w-full flex-col items-start justify-start">
<div className="flex w-full justify-start">
<div className="flex w-full flex-col items-start justify-start md:items-center">
<div className="flex w-full justify-center md:hidden">
<Header position="middle" title="WHY SHOULD I VOLUNTEER?" />
</div>
<div className="hidden w-full justify-start md:flex">
<Header position="left" title="WHY SHOULD I VOLUNTEER?" />
</div>

<div className="mx-auto mt-6 w-full max-w-6xl text-left font-anek-telegu text-3xl">
<p className="mb-20">
<div className="text-l mx-4 mb-4 mt-12 text-center font-anek-telegu md:mx-32 md:text-2xl lg:text-3xl">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text-l
typo?

Also mb-t mt-4 is the same as my-4

<p className="mb-2">
In order to become a fully fledged member of Highlander Gloves, you
will need to volunteer at least twice. Furthermore, volunteering with
us at RBA is a great thing to include on your resume, an amazing way
Expand All @@ -18,19 +21,19 @@ const WhyVolunteer = () => {
</p>
</div>

<div className="mx-auto mt-6 w-full max-w-6xl text-center font-anek-telegu text-3xl">
<p className="mb-16 text-center">
<div className="text-l mx-4 mb-4 mt-4 text-center font-anek-telegu md:mx-32 md:text-2xl lg:text-3xl">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

text-l
typo?

Also mb-t mt-4 is the same as my-4

<p className="mb-5">
<b>Don’t have a ride?</b> No worries! We can help arrange a ride for
you whenever possible. Just ask a staff member or reach out to us via
Instagram or Discord for help, and we'll get you situated.
Volunteering is located at the same place as our practices, 2060
Chicago Ave.
</p>
<p className="mb-6 text-center text-2xl italic">
<p className="text-center text-xs text-gray-400 md:text-lg lg:text-2xl">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the gray color from the custom colors in tailwindconfig file

For any issues, please reach out to a staff member.
</p>

<div className="mt-8 flex w-full justify-center">
<div className="mt-4 flex w-full justify-center">
<Button txt="SIGN UP" link="/volunteer" />
</div>
</div>
Expand Down