diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx index 86e7322..50818e9 100644 --- a/src/app/events/page.tsx +++ b/src/app/events/page.tsx @@ -1,9 +1,15 @@ import Calendar from "@/components/events/caledar/Calendar"; import Events from "@/components/events/Events"; - +import Title from "@/components/Title"; +import upcomingEvents from "@/public/title/upcomingEvents.webp"; const page = () => { return (
+ <Events /> <Calendar /> </div> diff --git a/src/app/fight-team/page.tsx b/src/app/fight-team/page.tsx index 226c042..8b6cb3a 100644 --- a/src/app/fight-team/page.tsx +++ b/src/app/fight-team/page.tsx @@ -1,14 +1,16 @@ import FightTeam from "@/components/fight-team/FightTeam"; -import Gallery from "@/components/fight-team/Gallery"; +import GalleryComponent from "@/components/fight-team/Gallery"; import Title from "@/components/Title"; import fightTeam from "@/public/title/fightTeam.webp"; +import Header from "@/components/Header"; const page = () => { return ( - <div className="flex w-full flex-col items-center justify-center gap-5"> + <div className="flex w-full flex-col items-center justify-center gap-10"> <Title webp={fightTeam} alt="Fight Team Header Image" txt="FIGHT TEAM" /> <FightTeam /> - <Gallery /> + <Header title="GALLERY" position="middle" /> + <GalleryComponent /> </div> ); }; diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index a0a6b32..ab4a18c 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -1,7 +1,8 @@ "use client"; import { Gallery } from "react-grid-gallery"; -import React from "react"; +import Title from "@/components/Title"; +import gallery from "@/public/title/gallery.webp"; import image1 from "@/public/gallery/image1.webp"; import image2 from "@/public/gallery/image2.webp"; import image3 from "@/public/gallery/image3.webp"; @@ -95,16 +96,19 @@ const images: ImageProps[] = importedImages.map((image, index) => ({ alt: `Image ${index + 1}`, })); -const GalleryComponent = () => { +const page = () => { return ( - <div className="w-full"> - <div className="flex flex-col items-center justify-center"> - <p className="py-1 font-archivo-black">2023 - 2024</p> - <div className="flex w-36 flex-col border-t-[2px] border-white pb-3" /> + <div className="w-full space-y-10"> + <Title webp={gallery} txt="GALLERY" alt="Gallery Banner" /> + <div className="w-full"> + <div className="flex flex-col items-center justify-center"> + <p className="py-1 font-archivo-black text-xl">2023 - 2024</p> + <div className="flex w-36 flex-col border-t-[2px] border-white pb-3" /> + </div> + <Gallery enableImageSelection={false} images={images} /> </div> - <Gallery enableImageSelection={false} images={images} /> </div> ); }; -export default GalleryComponent; +export default page; diff --git a/src/app/volunteer/page.tsx b/src/app/volunteer/page.tsx index 455cc24..07f284d 100644 --- a/src/app/volunteer/page.tsx +++ b/src/app/volunteer/page.tsx @@ -40,82 +40,91 @@ const page = () => { }} ></iframe> <div className="flex min-h-screen w-full flex-col items-center justify-center gap-2 p-4 font-archivo-narrow text-white"> - <FormHeader txt="Volunteer Form" /> - <div className="mt-5 w-2/4 text-2xl font-bold"> - What do we do while volunteering? - </div> - <div className="px-[25%]"> - Highlander Gloves is partnered with Riverside PD to help tutor at-risk - kids around the area, while also coaching them in boxing. As a - volunteer, you'll usually be helping clean the facility, tutoring - kids, and helping run boxing drills. Even if you have little to no - experience, we'll show you the ropes, so please feel free to show up! - We'd love all the help we can get! - </div> - <div className="w-2/4 text-2xl font-bold"> - What if I don't have a ride? - </div> - <div className="px-[25%]"> - No worries! We can help arrange a ride for you whenever possible. Just - ask a staff member on discord for help, and we'll get you situated. - </div> - <div className="w-2/4 text-2xl font-bold">Times:</div> - <div className="w-2/4"> - Tuesdays: 4:00 pm - 6:00 pm <br /> - Wednesdays: 4:00 pm - 6:00 pm - <br /> - Thursdays: 5:00 pm - 6:30 pm <br /> - (P.S. Thursdays will consist of only boxing, so more experienced - members, this is your time to shine!) - </div> - <div className="w-2/4 text-2xl font-bold">Why should I volunteer?</div> - <div className="px-[25%]"> - 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 - to give back to the community, and most importantly, is a whole lot of - fun! - </div> - <div className="w-2/4 text-2xl font-bold">Requirements:</div> - <div className="px-[25%] pb-4"> - In order to volunteer, RBA mandates that you complete the following SA - course, as well as fill out the following Volunteer Application Form. - Please fill out the form once you've earned your certificate from the - SA course, and send a digital copy of your certificate as well as a - digital scan of the filled out application to the following google - form: - </div> - <div className="px-[25%]"> - SA Course: - <Link - href="https://sexual-harassment-prevention-training.calcivilrights.ca.gov/NonSupervisoryEnglish/story.html" - className="text-blue-400 hover:text-blue-500" - > - {" "} - https://sexual-harassment-prevention-training.calcivilrights.ca.gov/NonSupervisoryEnglish/story.html - </Link> - <br /> - Volunteer Application Form: - <Link - href="https://drive.google.com/file/d/1YhRfyr34C5Cyzk_Lezwqsr-LDB9S-zb0/view?usp=sharing" - className="text-blue-400 hover:text-blue-500" - > - {" "} - https://drive.google.com/file/d/1YhRfyr34C5Cyzk_Lezwqsr-LDB9S-zb0/view?usp=sharing - </Link> - <br /> - Certificate/Application Submission Form: - <Link - href="https://forms.gle/pV145wZrLtrqWnth7" - className="text-blue-400 hover:text-blue-500" - > - {" "} - https://forms.gle/pV145wZrLtrqWnth7 - </Link> + <FormHeader txt="VOLUNTEER" /> + <div className="flex w-[45%] flex-col"> + <div className="mt-5 w-2/4 text-3xl font-bold"> + What do we do while volunteering? + </div> + <div className="mb-3 text-xl"> + Highlander Gloves is partnered with Riverside PD to help tutor + at-risk kids around the area, while also coaching them in boxing. As + a volunteer, you'll usually be helping clean the facility, tutoring + kids, and helping run boxing drills. Even if you have little to no + experience, we'll show you the ropes, so please feel free to show + up! We'd love all the help we can get! + </div> + <div className="w-2/4 text-3xl font-bold"> + What if I don't have a ride? + </div> + <div className="mb-3 text-xl"> + No worries! We can help arrange a ride for you whenever possible. + Just ask a staff member on discord for help, and we'll get you + situated. + </div> + <div className="w-2/4 text-3xl font-bold">Times:</div> + <div className="mb-3 w-2/4 text-xl"> + Tuesdays: 4:00 pm - 6:00 pm <br /> + Wednesdays: 4:00 pm - 6:00 pm + <br /> + Thursdays: 5:00 pm - 6:30 pm <br /> + (P.S. Thursdays will consist of only boxing, so more experienced + members, this is your time to shine!) + </div> + <div className="w-2/4 text-3xl font-bold"> + Why should I volunteer? + </div> + <div className="mb-3 text-xl"> + 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 to give back to the community, and most importantly, is + a whole lot of fun! + </div> + <div className="w-2/4 text-3xl font-bold">Requirements:</div> + <div className="mb-4 text-xl"> + In order to volunteer, RBA mandates that you complete the following + SA course, as well as fill out the following Volunteer Application + Form. Please fill out the form once you've earned your certificate + from the SA course, and send a digital copy of your certificate as + well as a digital scan of the filled out application to the + following google form: + </div> + <div className="text-xl"> + SA Course: + <Link + href="https://sexual-harassment-prevention-training.calcivilrights.ca.gov/NonSupervisoryEnglish/story.html" + className="text-blue-400 hover:text-blue-500" + target="_blank" + > + {" "} + https://sexual-harassment-prevention-training.calcivilrights.ca.gov/NonSupervisoryEnglish/story.html + </Link> + <br /> + Volunteer Application Form: + <Link + href="https://drive.google.com/file/d/1YhRfyr34C5Cyzk_Lezwqsr-LDB9S-zb0/view?usp=sharing" + className="text-blue-400 hover:text-blue-500" + target="_blank" + > + {" "} + https://drive.google.com/file/d/1YhRfyr34C5Cyzk_Lezwqsr-LDB9S-zb0/view?usp=sharing + </Link> + <br /> + Certificate/Application Submission Form: + <Link + href="https://forms.gle/pV145wZrLtrqWnth7" + className="text-blue-400 hover:text-blue-500" + target="_blank" + > + {" "} + https://forms.gle/pV145wZrLtrqWnth7 + </Link> + </div> </div> <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLScItUJcJ7aH6Iz8eLC0bxpzxbRr4u5trZeou8Uu5z2qLLSRTQ/formResponse" + // action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc6X4dAsdD5VIfyuKESr48vOYZSY3Rt224rGZw03WS2IP8RDg/formResponse" testing onSubmit={() => (window.submitted = true)} target="hidden_iframe" className="mt-5 w-[45%] space-y-4" @@ -128,6 +137,7 @@ const page = () => { {/* entry num is in div jsmodel= section in the list w/ nulls and stuff */} <input name="entry.1312508132" + // name="entry.1116737514" testing type="text" placeholder="YOUR NAME" className="text-md w-full border-b bg-hlg-dark-gray p-2 font-archivo-black text-white focus:outline-none md:text-xl" @@ -141,6 +151,7 @@ const page = () => { </label> <input name="entry.73966464" + // name="entry.1907825024" testing type="text" placeholder="YOUR NET ID" className="text-md w-full border-b bg-hlg-dark-gray p-2 font-archivo-black text-white focus:outline-none md:text-xl" @@ -158,6 +169,7 @@ const page = () => { </label> <input name="entry.473485132" + // name="entry.1684900913" testing type="text" placeholder="YOUR CONTACT INFO" className="text-md w-full border-b bg-hlg-dark-gray p-2 font-archivo-black text-white focus:outline-none md:text-xl" @@ -173,9 +185,11 @@ const page = () => { <div className="flex hover:bg-gray-700"> <input name="entry.111141012" + // name="entry.2103208832" testing type="radio" + value="Yes, and I'd be willing to help shuttle others" id="shuttle" - placeholder="option1" + // placeholder="option1" className="h-[10] w-4 border-x-hlg-red-300" required /> @@ -190,9 +204,11 @@ const page = () => { <div className="flex hover:bg-gray-700"> <input name="entry.111141012" + // name="entry.2103208832" testing type="radio" + value="Yes, but I can't shuttle others" id="yes" - placeholder="option2" + // placeholder="option2" className="h-[10] w-4 border-x-hlg-red-300" required /> @@ -207,9 +223,11 @@ const page = () => { <div className="flex hover:bg-gray-700"> <input name="entry.111141012" + // name="entry.2103208832" testing type="radio" + value="No" id="no" - placeholder="option3" + // placeholder="option3" className="h-[10] w-4 border-x-hlg-red-300" required /> @@ -233,8 +251,11 @@ const page = () => { </label> <input name="entry.1951360927" + // name="entry.2081057332" testing + max="2074-01-01" + // value="2024-11-24" type="date" - placeholder="date" + // placeholder="date" className="text-md w-full border-b bg-hlg-dark-gray p-2 font-archivo-black text-white focus:outline-none md:text-xl" required /> diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2dedc69..415d5d0 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -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-xl text-white ${props.position === "left" ? "border-r-4" : props.position === "middle" ? "border-l-4 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-2xl text-white ${props.position === "left" ? "border-r-4" : props.position === "middle" ? "border-l-4 border-r-4" : "border-l-4"}`} > {props.title} </div> diff --git a/src/components/fight-team/Gallery.tsx b/src/components/fight-team/Gallery.tsx index 7d38b81..6f487fa 100644 --- a/src/components/fight-team/Gallery.tsx +++ b/src/components/fight-team/Gallery.tsx @@ -1,7 +1,108 @@ -import React from "react"; +"use client"; +import { Gallery } from "react-grid-gallery"; -const Gallery = () => { - return <div>Gallery</div>; +import image6 from "@/public/fight-team/2024/image6.webp"; +import image7 from "@/public/fight-team/2024/image7.webp"; +import image8 from "@/public/fight-team/2024/image8.webp"; +import image10 from "@/public/fight-team/2024/image10.webp"; +import image11 from "@/public/fight-team/2024/image11.webp"; +import image12 from "@/public/fight-team/2024/image12.webp"; +import image13 from "@/public/fight-team/2024/image13.webp"; +import image14 from "@/public/fight-team/2024/image14.webp"; +import image15 from "@/public/fight-team/2024/image15.webp"; +import image16 from "@/public/fight-team/2024/image16.webp"; +import image17 from "@/public/fight-team/2024/image17.webp"; +import image18 from "@/public/fight-team/2024/image18.webp"; +import image19 from "@/public/fight-team/2024/image19.webp"; +import image20 from "@/public/fight-team/2024/image20.webp"; +import image22 from "@/public/fight-team/2024/image22.webp"; +import image23 from "@/public/fight-team/2024/image23.webp"; +import image25 from "@/public/fight-team/2024/image25.webp"; +import image26 from "@/public/fight-team/2024/image26.webp"; +import image27 from "@/public/fight-team/2024/image27.webp"; +import image28 from "@/public/fight-team/2024/image28.webp"; +import image29 from "@/public/fight-team/2024/image29.webp"; +import image30 from "@/public/fight-team/2024/image30.webp"; +import image31 from "@/public/fight-team/2024/image31.webp"; +import image32 from "@/public/fight-team/2024/image32.webp"; +import image33 from "@/public/fight-team/2024/image33.webp"; +import image34 from "@/public/fight-team/2024/image34.webp"; +import image35 from "@/public/fight-team/2024/image35.webp"; + +import image75 from "@/public/fight-team/2023/image75.webp"; +import image76 from "@/public/fight-team/2023/image76.webp"; +import image77 from "@/public/fight-team/2023/image77.webp"; + +type ImageProps = { + src: string; + width: number; + height: number; + caption?: string; + alt?: string; +}; + +const importedImages2024 = [ + image6, + image7, + image8, + image10, + image11, + image12, + image13, + image14, + image15, + image16, + image17, + image18, + image19, + image20, + image22, + image23, + image25, + image26, + image27, + image28, + image29, + image30, + image31, + image32, + image33, + image34, + image35, +]; + +const importedImages2023 = [image75, image76, image77]; + +const images2024: ImageProps[] = importedImages2024.map((image, index) => ({ + src: image.src, + width: image.width, + height: image.height, + alt: `Image ${index + 1}`, +})); + +const images2023: ImageProps[] = importedImages2023.map((image, index) => ({ + src: image.src, + width: image.width, + height: image.height, + alt: `Image ${index + 1}`, +})); + +const GalleryComponent = () => { + return ( + <div className="flex w-full flex-col"> + <div className="mb-5 flex flex-col items-center justify-center"> + <p className="py-1 font-archivo-black text-xl">2024 USIBA Texas</p> + <div className="flex w-36 flex-col border-t-[2px] border-white pb-3" /> + </div> + <Gallery enableImageSelection={false} images={images2024} /> + + <div className="mb-5 mt-10 flex flex-col items-center justify-center"> + <p className="py-1 font-archivo-black text-xl">2023 USIBA Virginia</p> + <div className="flex w-36 flex-col border-t-[2px] border-white pb-3" /> + </div> + <Gallery enableImageSelection={false} images={images2023} /> + </div> + ); }; -export default Gallery; +export default GalleryComponent;