Merge pull request #39 from Bostonhacks/fix-track-titles

mentor button
Bostonhacks · Sep 24, 2023 · e161d12 · e161d12
2 parents 03b9eb3 + 353bac1
commit e161d12
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 40 deletions.
diff --git a/src/components/LandingPageComponents/FAQ.jsx b/src/components/LandingPageComponents/FAQ.jsx
@@ -9,31 +9,45 @@ import chestIsland from '../../assets/images/LandingPage/Background/chestIsland.
 const faq = [
   [
     {
-      question: 'Question that is asking you anything',
+      question: 'What is BostonHacks',
       answer:
-        'This is an answer to anything you want in the world but it just needs to go past a couple of lines so I can test how the text wraps.',
+        'BostonHacks is a 24-hour event where studnets from different backgrounds gather together to use technology to create cool projects. Come to BostonHacks to expand your knowledge and skills, make new friends, win prizes and network with recruiters from our corporate sponsors!',
     },
     {
-      question: 'Question that is asking you anything',
-      answer: 'Answer 2',
+      question: 'When and where is BostonHacks?',
+      answer:
+        'BostonHacks is an in-person 24-hour hackathon on November 18-19th, 2023. It takes place in the Boston University George Sherman Union (GSU)',
+    },
+    {
+      question: 'Who can attend?',
+      answer:
+        'All students including undergraduate, graduate and high school students with any background, all across the world are welcome!',
     },
     {
-      question: 'Question that is asking you anything',
-      answer: 'Answer 3',
+      question: 'Are there any rules?',
+      answer:
+        'We want to ensure a positive experience for all participants. We encourage you to read the MLH Code of Conduct.',
     },
   ],
   [
     {
-      question: 'Question that is asking you anything',
-      answer: 'Answer 1',
+      question: 'Do I need experience?',
+      answer:
+        'No experience is necessary. We will have plenty of mentros and resources available, along with several workshops targeted for beginners. Come learn and experience your first hackathon at BostonHacks!',
     },
     {
-      question: 'Question that is asking you anything',
-      answer: 'Answer 2',
+      question: 'Does it cost anything?',
+      answer:
+        "BostonHacks is 100% free. You don't have to spend a dime! Unfortunately, we won' be providing any travel reimbursements this year.",
     },
     {
-      question: 'Question that is asking you anything',
-      answer: 'Answer 3',
+      question: 'Can we form teams?',
+      answer:
+        "Of course you can! We encourage people to work in teams of up to four people. You may opt-in to team formation through our Discord Server which will match you with an ideal team. You can work along, but it won't be as fun :(",
+    },
+    {
+      question: 'When does registration close?',
+      answer: 'Registration closes on October 29th, 2023. Apply ASAP!',
     },
   ],
 ];
@@ -91,34 +105,45 @@ const FAQColumn = ({ questionAnswers }) => {
 const FAQ = () => {
   return (
     <div>
-      <div className='flex justify-end md:hidden mt-10'>
-        <img src={chestIsland} alt="chestIsland" className='h-64'/>
+      <div className="flex justify-end md:hidden mt-10">
+        <img src={chestIsland} alt="chestIsland" className="h-64" />
       </div>
-    <section
-      id="faq"
-      className="w-full flex flex-col items-center justify-center text-text-primary px-5 my-[10rem] mt-80 max-sm:mt-0"
+      <section
+        id="faq"
+        className="w-full flex flex-col items-center justify-center text-text-primary px-5 my-[10rem] mt-80 max-sm:mt-0"
       >
-      <div className="relative flex items-center justify-center md:h-[132px] md:w-[431px] h-[57px] w-[186px]">
-        <h2 className="z-50 text-center relative md:text-5xl text-3xl pb-1">
-          FAQ
-        </h2>
-        <img className="z-20 absolute" src={faq_title} alt="FAQ Button" />
-        <img src={faqMiddleCloud} alt="clouds" className='absolute bottom-20 left-60 max-md:left-20 max-md:-top-20'/>
-        <div className='overflow-hidden'>
+        <div className="relative flex items-center justify-center md:h-[132px] md:w-[431px] h-[57px] w-[186px]">
+          <h2 className="z-50 text-center relative md:text-5xl text-3xl pb-1">
+            FAQ
+          </h2>
+          <img className="z-20 absolute" src={faq_title} alt="FAQ Button" />
+          <img
+            src={faqMiddleCloud}
+            alt="clouds"
+            className="absolute bottom-20 left-60 max-md:left-20 max-md:-top-20"
+          />
+          <div className="overflow-hidden"></div>
         </div>
-      </div>
-      {/* <div className="mt-[5rem] w-full flex flex-1 flex-col justify-between md:flex-row"> */}
-        <img src={faqLeftCloud} alt="clouds" className='absolute z-10 left-0 max-sm:hidden'/>
-        <img src={faqRightCloud} alt="clouds" className='absolute z-10 right-0 max-sm:hidden'/>
-      <div className="mt-[5rem] w-full grid md:grid-cols-2 grid-cols-1 gap-x-[5rem] z-20 lg:gap-x-[10rem] md:px-[5rem]">
-        <FAQColumn questionAnswers={faq[0]} />
-        <FAQColumn questionAnswers={faq[1]} />
+        {/* <div className="mt-[5rem] w-full flex flex-1 flex-col justify-between md:flex-row"> */}
+        <img
+          src={faqLeftCloud}
+          alt="clouds"
+          className="absolute z-10 left-0 max-sm:hidden"
+        />
+        <img
+          src={faqRightCloud}
+          alt="clouds"
+          className="absolute z-10 right-0 max-sm:hidden"
+        />
+        <div className="mt-[5rem] w-full grid md:grid-cols-2 grid-cols-1 gap-x-[5rem] z-20 lg:gap-x-[10rem] md:px-[5rem]">
+          <FAQColumn questionAnswers={faq[0]} />
+          <FAQColumn questionAnswers={faq[1]} />
 
-        {/* for some reason doing "hidden md:grid" doesn't work so this is the work around */}
-        <div className="border-b-4 border-text-primary md:hidden" />
-      </div>
-    </section>
-      </div>
+          {/* for some reason doing "hidden md:grid" doesn't work so this is the work around */}
+          <div className="border-b-4 border-text-primary md:hidden" />
+        </div>
+      </section>
+    </div>
   );
 };
 

diff --git a/src/components/LandingPageComponents/MentorApply.jsx b/src/components/LandingPageComponents/MentorApply.jsx
@@ -0,0 +1,12 @@
+const MentorApply = () => {
+  return (
+    <a
+      className="absolute text-sm md:text-xl text-white z-50 top-[80px] right-5 hover:text-gray-600"
+      href="https://forms.gle/bmuKE4EViBenrwqz8"
+    >
+      Are you interested in being a mentor? Click here to apply!
+    </a>
+  );
+};
+
+export default MentorApply;
diff --git a/src/components/LandingPageComponents/Sponsor.jsx b/src/components/LandingPageComponents/Sponsor.jsx
@@ -3,6 +3,7 @@ import sponsorFaceBox from '../../assets/images/sponsorFaceBox.svg';
 import sponsorHeartGroup from '../../assets/images/sponsorHeartGroup.svg';
 import applyButton from '../../assets/images/applyButton.svg';
 import TitleBG from '../../assets/images/TitleBG.svg';
+import ApplyButton from './ApplyButton';
 
 export default function Sponsor() {
   const sponsors = [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 13, 14];
@@ -17,17 +18,16 @@ export default function Sponsor() {
         </h2>
         <img className="z-20 absolute" src={TitleBG} alt="TitleBG" />
       </div>
-      <div className="grid grid-cols-3 lg:grid-cols-6 gap-14 lg:gap-20 mt-20 mx-[5vw]">
+      <div className="grid grid-cols-3 lg:grid-cols-6 gap-14 lg:gap-20 mt-20 mx-[5vw] mb-20">
         {sponsors.map((sponsor) => (
           <div key={sponsor}>
             <img src={sponsorFaceBox} alt="sponsor" />
             <img src={sponsorHeartGroup} alt="sponor" />
           </div>
         ))}
       </div>
-      <button>
-        <img src={applyButton} alt="" className="mt-20 scale-75" />
-      </button>
+
+      <ApplyButton />
     </div>
   );
 }
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
@@ -10,6 +10,7 @@ import TrackModals from '../components/LandingPageComponents/TrackModals';
 import Schedule from '../components/LandingPageComponents/Schedule';
 import Sponsor from '../components/LandingPageComponents/Sponsor';
 import ApplyButton from '../components/LandingPageComponents/ApplyButton';
+import MentorApply from '../components/LandingPageComponents/MentorApply';
 
 const LandingPage = () => {
   return (
@@ -20,6 +21,7 @@ const LandingPage = () => {
           'linear-gradient(180deg, #15011F 0%, #240732 24.91%, #070C36 39.22%, #0D3166 56.01%, #1B7BD8 75.57%, #85BAEE 90.34%, #FFFFFF 98.65%)',
       }}
     >
+      <MentorApply />
       <NatureBG />
       <LandingNav />
       <Title />