Merge pull request #34 from Bostonhacks/Sponsor-declan

Changed background assets and background
Bostonhacks · Sep 18, 2023 · 652bcf4 · 652bcf4
2 parents 53db2b6 + ba5d856
commit 652bcf4
Show file tree

Hide file tree

Showing 15 changed files with 979 additions and 79 deletions.
diff --git a/src/assets/images/SponsorPage/Clouds.svg b/src/assets/images/SponsorPage/Clouds.svg
diff --git a/src/assets/images/SponsorPage/FooterCloud.png b/src/assets/images/SponsorPage/FooterCloud.png
diff --git a/src/assets/images/SponsorPage/NatureBackgroundWithText.svg b/src/assets/images/SponsorPage/NatureBackgroundWithText.svg
diff --git a/src/assets/images/SponsorPage/NatureBackgroundWithTextMobile.svg b/src/assets/images/SponsorPage/NatureBackgroundWithTextMobile.svg
diff --git a/src/components/SponsorPageComponents/BostonhacksSign.jsx b/src/components/SponsorPageComponents/BostonhacksSign.jsx
@@ -4,7 +4,7 @@ const TitleSign = () => {
   return (
     <div className='justify-center flex items-center lg:mt-28'>
         <img
-            className="TitleSign mx-[25vw] w-3/4 lg:w-auto"
+            className="TitleSign mx-[25vw] md:w-auto w-[75%]"
             src={Sign}
             alt="TitleSign"
         />

diff --git a/src/components/SponsorPageComponents/NatureBackground.jsx b/src/components/SponsorPageComponents/NatureBackground.jsx
@@ -1,20 +1,27 @@
 import Background from '../../assets/images/SponsorPage/NatureBackground.svg';
+import BackgroundWithText from '../../assets/images/SponsorPage/NatureBackgroundWithText.svg';
 import BackgroundMobile from '../../assets/images/SponsorPage/NatureBackgroundgMobile.svg';
+import BackgroundWithTextMobile from '../../assets/images/SponsorPage/NatureBackgroundWithTextMobile.svg';
+
+import TitleSign from '../../components/SponsorPageComponents/BostonhacksSign';
+import SponsorButton from '../../components/SponsorPageComponents/SponsorButton';
 
 import TreeSVG from '../../assets/images/SponsorPage/Tree.svg';
 
 const NatureBackground = () => {
     return (
-        <div className='z-0 absolute w-full'>
+        <div className='z-0 xl:w-auto w-full -mt-28 lg:-mt-[74px] relative'>
             <img
                 className="min-[320px]:hidden lg:flex w-full object-fill"
                 src={Background}
                 alt="NatureBackground"
+                onDragStart={(event)=> event.preventDefault()}
             />
             <img
                 className="lg:hidden object-fill w-full"
                 src={BackgroundMobile}
                 alt="NatureBackgroundMobile"
+                onDragStart={(event)=> event.preventDefault()}
             />
             <div className='absolute right-0 bottom-24 lg:bottom-0 w-2/5 lg:w-auto z-0'>
                 <img
@@ -24,6 +31,35 @@ const NatureBackground = () => {
                 onDragStart={(event)=> event.preventDefault()}
                 />
             </div>
+
+            <div className="z-10 absolute top-[7%] lg:top-[4%] right-0 left-0">
+                <div className="flex flex-col lg:space-y-[28.2px]">
+                <TitleSign />
+                <div className="w-full justify-center flex mt-3.5 lg:mt-0">
+                    <h1 className="text-3xl lg:text-4xl text-white font-minecraft text-center">
+                    SPONSOR
+                    <br />
+                    INFORMATION
+                    </h1>
+                </div>
+                </div>
+                <SponsorButton />
+            </div>
+            <div className="absolute mt-44 lg:mt-60 items-center flex-col flex mb-[75vw] lg:mb-[30vw] z-10 lg:bottom-[16vw] bottom-[42vw] md:bottom-[50vw] right-0 left-0">
+                    <h1 className="text-white font-minecraft text-center text-base/[20px] md:text-[25.6px]/[32px] tracking-[0.1em]">
+                        "BOSTONHACKS IS
+                        <br />
+                        CONSISTENTLY ONE OF THE
+                        <br />
+                        BEST [HACKATHONS] THAT
+                        <br />I CONTINUE TO SPONSOR
+                        <br />
+                        YEAR AFTER YEAR."
+                    </h1>
+                    <h2 className="text-white text-xs md:text-[19.2px] text-center font-ft88 text-left mt-4">
+                        SAM ANGNEW, TWILIO
+                    </h2>
+            </div>
         </div>
 
       );

diff --git a/src/components/SponsorPageComponents/Perks.jsx b/src/components/SponsorPageComponents/Perks.jsx
@@ -50,8 +50,8 @@ const ChoosePerkButton = ({ link }) => {
 const Perks = () => {
   return (
     <div className='z-10'>
-        <div className="flex flex-col lg:flex-row lg:overflow-x-scroll lg:gap-[80px] lg:no-scrollbar">
-        <div className="items-center flex flex-col lg:ml-[80px]">
+        <div className="flex flex-col lg:flex-row lg:overflow-x-scroll lg:gap-[80px] lg:no-scrollbar z-10">
+        <div className="items-center flex flex-col lg:ml-[80px] z-10">
           <PerksTitle perkAmount={500} subHeading={'Sneak Peak'} />
 
           <div className="relative mt-[30px] mb-[16px]">
@@ -68,7 +68,7 @@ const Perks = () => {
           <div className='mb-20 lg:mb-0'/>
         </div>
 
-        <div className="items-center flex flex-col">
+        <div className="items-center flex flex-col z-10">
           <PerksTitle perkAmount={1500} subHeading={'Novice'} />
 
           <div className="relative mt-[30px] mb-[16px]">
@@ -91,7 +91,7 @@ const Perks = () => {
           <div className='mb-20 lg:mb-0'/>
         </div>
 
-        <div className="items-center flex flex-col">
+        <div className="items-center flex flex-col z-10">
           <PerksTitle perkAmount={3000} subHeading={'Skilled'} />
 
           <div className="relative mt-[30px] mb-[16px]">
@@ -125,7 +125,7 @@ const Perks = () => {
           <div className='mb-20 lg:mb-0'/>
         </div>
 
-        <div className="items-center flex flex-col lg:w-[333px]">
+        <div className="items-center flex flex-col lg:w-[333px z-10">
           <PerksTitle perkAmount={4500} subHeading={'Master'} />
 
           <div className="relative mt-[30px] mb-[16px]">
@@ -163,7 +163,7 @@ const Perks = () => {
           <div className='mb-20 lg:mb-0'/>
         </div>
 
-        <div className="items-center flex flex-col lg:w-[333px]">
+        <div className="items-center flex flex-col lg:w-[333px] z-10">
           <PerksTitle perkAmount={6000} subHeading={'Legendary'} />
 
           <div className="relative mt-[30px] mb-[16px]">
@@ -205,7 +205,7 @@ const Perks = () => {
         {/* <div className="m-0" /> */}
       </div>
 
-      <div className="flex flex-col lg:flex-row justify-center items-center mx-8 lg:space-x-12 space-y-14 lg:space-y-0 lg:mx-72 mt-24">
+      <div className="flex flex-col lg:flex-row justify-center items-center mx-8 lg:space-x-12 space-y-14 lg:space-y-0 lg:mx-72 mt-24 z-10">
         <div className="flex flex-col justify-center mr-[30%] lg:mr-0">
           <h1 className="font-minecraft text-white text-xs lg:text-lg font-bold mb-2">
             *General Email:

diff --git a/src/components/SponsorPageComponents/Reviews.jsx b/src/components/SponsorPageComponents/Reviews.jsx
@@ -1,7 +1,7 @@
 const Reviews = () => {
     return (
     <div className="mx-8 lg:mx-52 mb-80 lg:mb-[800px] z-10">
-        <div className="mb-[71px] lg:mb-56 lg:pr-72">
+        <div className="mb-[71px] lg:mb-56 lg:pr-72 z-10 relative">
           <h1 className="font-minecraft font-bold text-[13px] lg:text-[22px] mb-[18px] text-white">
             Twilio: Sam Agnew
           </h1>
@@ -16,7 +16,7 @@ const Reviews = () => {
             great food is the real reason to go to BostonHacks!”
           </p>
         </div>
-        <div className="mb-[71px] lg:mb-56 lg:pl-72 text-right">
+        <div className="mb-[71px] lg:mb-56 lg:pl-72 text-right z-10 relative">
           <h1 className="font-minecraft font-bold text-[13px] lg:text-[22px] mb-[18px] text-white">
             ITG: Candace Mariso
           </h1>
@@ -30,7 +30,7 @@ const Reviews = () => {
             us.”
           </p>
         </div>
-        <div className="lg:pr-72">
+        <div className="lg:pr-72 z-10 relative">
           <h1 className="font-minecraft font-bold text-[13px] lg:text-[22px] mb-[18px] text-white">
             Cadence: Apurva Kalia
           </h1>

diff --git a/src/components/SponsorPageComponents/SponsorButtons/PinkButton.jsx b/src/components/SponsorPageComponents/SponsorButtons/PinkButton.jsx
@@ -16,18 +16,18 @@ const PinkButton = ({ buttonText, extraStyling, doubleStarStyling}) => {
     };
 
     return (
-        <div className={`relative w-full justify-center items-center ${extraStyling}`} id='WhoWeAre'> 
-            <img src={DoubleSparkleImage} className={`absolute right-0 -top-14 lg:top-28 transform scale-x-[-1] lg:scale-x-[1] w-[18vw] lg:w-auto ml-auto mr-[2vw] lg:mr-[3vw] ${doubleStarStyling}`}/>
-            <div className="relative w-[73%] lg:w-1/3 mx-auto">
-                <img src={sparkle} alt="Image" className="w-[42px] lg:w-auto absolute -top-10 left-0" />
-                <div style={pinkBtnBackgroundStyle} className='h-[58px] lg:h-auto items-center'>
-                    <h1 className='font-misterpixel text-white text-[30px]/[70px] lg:text-[3.5vw] leading-[4.2vw]'>
+        <div className={`relative w-full justify-center items-center z-10 ${extraStyling}`} id='WhoWeAre'> 
+            <img src={DoubleSparkleImage} className={`absolute right-0 -top-14 lg:top-28 transform scale-x-[-1] lg:scale-x-[1] w-[18vw] lg:w-auto ml-auto mr-[2vw] lg:mr-[3vw] z-10 ${doubleStarStyling}`}/>
+            <div className="relative w-[73%] lg:w-1/3 mx-auto z-10">
+                <img src={sparkle} alt="Image" className="w-[42px] lg:w-auto absolute -top-10 left-0 z-10" />
+                <div style={pinkBtnBackgroundStyle} className='h-[58px] md:h-auto items-center z-10'>
+                    <h1 className='font-misterpixel text-white text-[30px]/[70px] lg:text-[3.5vw] leading-[4.2vw] z-10'>
                         {buttonText}
                     </h1>
                 </div>
-            <img src={sparkle} alt="Image" className="w-[42px] lg:w-auto absolute right-0 -bottom-10"  />
+            <img src={sparkle} alt="Image" className="w-[42px] lg:w-auto absolute right-0 -bottom-10 z-10"  />
             </div>
-            <img src={DoubleSparkleImage} className={`absolute left-0 -bottom-10 lg:bottom-14 transform scale-x-[-1] lg:scale-x-[1] w-[18vw] lg:w-auto ml-[2vw] lg:ml-[9vw] mr-auto ${doubleStarStyling}`}/>
+            <img src={DoubleSparkleImage} className={`absolute left-0 -bottom-10 lg:bottom-14 transform scale-x-[-1] lg:scale-x-[1] w-[18vw] lg:w-auto ml-[2vw] lg:ml-[9vw] mr-auto z-10 ${doubleStarStyling}`}/>
         </div>
     )
 }

diff --git a/src/components/SponsorPageComponents/Stats.jsx b/src/components/SponsorPageComponents/Stats.jsx
@@ -7,12 +7,12 @@ import {ReactComponent as StatSparkle} from '../../assets/images/SponsorPage/Sta
 const Stats = () => {
     return (
         <div className='justify-center items-center flex flex-col mb-24 lg:mb-80 z-10'>
-            <h1 className="font-minecraft text-white text-sm lg:text-2xl mb-20">Our 2021 Hybrid Events Had...</h1>
-            <HybridEventsStats className="w-4/5 lg:w-auto"/>
-            <GrandingSection className='my-[90px] w-4/5 lg:w-auto'/>
-            <h1 className="font-minecraft text-white text-sm lg:text-2xl mb-20">Our 2022 In-Person Event Had...</h1>
-            <InPersonEventStats className="w-4/5 lg:w-auto"/>
-            <StatSparkle className="ml-[58vw]"/>
+            <h1 className="font-minecraft text-white text-sm lg:text-2xl mb-20 z-10">Our 2021 Hybrid Events Had...</h1>
+            <HybridEventsStats className="w-4/5 lg:w-auto z-10"/>
+            <GrandingSection className='my-[90px] w-4/5 lg:w-auto z-10'/>
+            <h1 className="font-minecraft text-white text-sm lg:text-2xl mb-20 z-10">Our 2022 In-Person Event Had...</h1>
+            <InPersonEventStats className="w-4/5 lg:w-auto z-10"/>
+            <StatSparkle className="ml-[58vw] z-10"/>
         </div>
     );
 }

diff --git a/src/components/SponsorPageComponents/WhoWeAreScroll.jsx b/src/components/SponsorPageComponents/WhoWeAreScroll.jsx
@@ -3,19 +3,19 @@ import ScrollMobile from '../../assets/images/SponsorPage/WhoWeAreScrollMobile.s
 
 const WhoWeAreScroll = () => {
     return (
-    <div className=''>
+    <div className='lg:scale-100 md:scale-[80%]'>
         <div className='justify-center flex relative z-10'>
             <img
-                className="min-[320px]:hidden md:flex"
+                className="min-[320px]:hidden md:flex z-10"
                 src={Scroll}
                 alt="WhoWeAreScroll"
             />
             <img
-            className="flex md:hidden"
+            className="flex md:hidden z-10"
             src={ScrollMobile}
             alt="WhoWeAreScrollMobile"
             />
-            <div className='absolute text-center font-minecraft text-[#965340] text-[10px] text-[#965340] w-[214px] mt-[115px] leading-3 md:w-[614px] md:h-[350px] md:text-xl/[24px] md:mt-[235px] md:mr-[114.8px] md:ml-[122px] md:mb-[187.32px] md:leading-[24px]'>
+            <div className='absolute text-center font-minecraft text-[#965340] text-[10px] text-[#965340] w-[214px] mt-[115px] leading-3 md:w-[614px] md:h-[350px] md:text-xl/[24px] md:mt-[26vw] lg:mt-[235px] md:mr-[114.8px] md:ml-[122px] md:mb-[187.32px] md:leading-[24px] z-10'>
                 <p>BostonHacks brings together over 100 students for an exhilarating 36 hours to build awesome projects. In our past events, students had meaningful interactions with mentors, peers, and sponsors.<br />
                     <br />
                     A hackathon would be incomplete without new technology, advice, and ideas our sponsors offer, and we'd be eager to have you join us this coming fall!<br/>

diff --git a/src/components/SponsorPageComponents/WhyUs.jsx b/src/components/SponsorPageComponents/WhyUs.jsx
@@ -26,7 +26,7 @@ const whyUs = [
 
 const WhySection = ({ data }) => {
   return (
-    <div className="flex flex-col lg:space-y-8 lg:mx-20 lg:px-10 lg:py-20 font-minecraft">
+    <div className="flex flex-col lg:space-y-8 lg:mx-20 lg:px-10 lg:py-20 font-minecraft z-10">
 
       {data.map((item, index) => (
         <div
@@ -63,12 +63,12 @@ const WhyUs = () => {
 
       <WhySection data={whyUs[0]} reverse={true} />
 
-      <img src={FelizPlatformPNG} alt="FelizPlatformPNG" className="max-w-md mt-12 w-[127px] lg:w-auto lg:mt-0" />
-      <div className="lg:mb-20 items-center flex flex-col">
-        <h1 className="text-xs lg:text-2xl mb-3 lg:6">Questions?</h1>
-        <p className="text-xs lg:text-2xl">We welcome any questions or</p>
-        <p className="text-xs lg:text-2xl">special requests. Please email us at</p>
-        <h1 className="font-misterpixel font-normal pt-2 lg:py-10 text-sm lg:text-3xl">
+      <img src={FelizPlatformPNG} alt="FelizPlatformPNG" className="max-w-md mt-12 w-[127px] lg:w-auto lg:mt-0 z-10" />
+      <div className="lg:mb-20 items-center flex flex-col z-10">
+        <h1 className="text-xs lg:text-2xl mb-3 lg:6 z-10">Questions?</h1>
+        <p className="text-xs lg:text-2xl z-10">We welcome any questions or</p>
+        <p className="text-xs lg:text-2xl z-10">special requests. Please email us at</p>
+        <h1 className="font-misterpixel font-normal pt-2 lg:py-10 text-sm lg:text-3xl z-10">
           [email protected]
         </h1>
       </div>

diff --git a/src/components/common/CountDownTimer.jsx b/src/components/common/CountDownTimer.jsx
@@ -37,7 +37,7 @@ const CountDownTimer = () => {
 
   return (
     <div className="flex justify-center space-x-5 mt-10 mb-10">
-      <div className="">
+      <div className="z-50">
         <div className="relative w-15 h-15 md:w-20 md:h-20">
           <img src={heartIcon} className="object-cover w-full h-full" />
           <div className="absolute inset-0 flex items-center justify-center">
@@ -51,7 +51,7 @@ const CountDownTimer = () => {
         </p>
       </div>
 
-      <div className="">
+      <div className="z-50">
         <div className="relative w-15 h-15 md:w-20 md:h-20">
           <img src={heartIcon} className="object-cover w-full h-full" />
           <div className="absolute inset-0 flex items-center justify-center">
@@ -65,7 +65,7 @@ const CountDownTimer = () => {
         </p>
       </div>
 
-      <div className="">
+      <div className="z-50">
         <div className="relative w-15 h-15 md:w-20 md:h-20">
           <img src={heartIcon} className="object-cover w-full h-full" />
           <div className="absolute inset-0 flex items-center justify-center">
@@ -79,7 +79,7 @@ const CountDownTimer = () => {
         </p>
       </div>
 
-      <div className="">
+      <div className="z-50">
         <div className="relative w-15 h-15 md:w-20 md:h-20">
           <img src={heartIcon} className="object-cover w-full h-full" />
           <div className="absolute inset-0 flex items-center justify-center">

diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
@@ -6,8 +6,7 @@ import twitter from './svg/twitter.png';
 // import cloudBG from '../../assets/images/LandingPage/Background/footerCloudBG.svg';
 const Footer = () => {
   return (
-    <div className="mb-10 font-minecraft">
-      {/* <img src={cloudBG} className='absolute z-0 right-0'/> */}
+    <div className="mb-10 font-minecraft z-50">
       <CountDownTimer />
       <ul className="flex justify-center items-center space-x-5 scale-50 mb-10">
         <li>
@@ -35,8 +34,10 @@ const Footer = () => {
           </a>
         </li>
       </ul>
-      <p className="text-center font-black">Made with love by BostonHacks</p>
-      <p className="text-center text-sm">Forest Pixel Art by Eder Muniz</p>
+      <div className='z-50 relative'>
+        <p className="text-center font-black">Made with love by BostonHacks</p>
+        <p className="text-center text-sm">Forest Pixel Art by Eder Muniz</p>
+      </div>
     </div>
   );
 };

diff --git a/src/pages/SponsorPage.jsx b/src/pages/SponsorPage.jsx
@@ -1,4 +1,3 @@
-import TitleSign from '../components/SponsorPageComponents/BostonhacksSign';
 import WhoWeAreScroll from '../components/SponsorPageComponents/WhoWeAreScroll';
 import SponsorButton from '../components/SponsorPageComponents/SponsorButton';
 import NatureBackground from '../components/SponsorPageComponents/NatureBackground';
@@ -10,46 +9,25 @@ import SponsorNav from '../components/SponsorPageComponents/SponsorNav';
 import PinkButton from '../components/SponsorPageComponents/SponsorButtons/PinkButton';
 import WhyUs from '../components/SponsorPageComponents/WhyUs';
 import Reviews from '../components/SponsorPageComponents/Reviews';
+// import FooterCloudImage from '../assets/images/SponsorPage/FooterCloud.svg';
+import FooterCloudImage from '../assets/images/SponsorPage/FooterCloud.png';
+
+import Clouds from '../assets/images/SponsorPage/Clouds.svg';
+
 
 const SponsorPage = () => {
   return (
     <div
-      className="bg-auto bg-sponsor_background bg-no-repeat lg:bg-cover flex flex-col relative overflow-x-hidden"
-      // style={{
-      //   background:
-      //     'linear-gradient(180deg, #15011F 0%, #240732 24.91%, #070C36 39.22%, #0D3166 56.01%, #1B7BD8 75.57%, #85BAEE 90.34%, #FFFFFF 98.65%)',
-      // }}
+      // className="bg-auto bg-sponsor_background bg-no-repeat lg:bg-cover flex flex-col relative overflow-x-hidden"
+      className='relative'
+      style={{
+        background:
+          'linear-gradient(180deg, #15011F 0%, #240732 24.91%, #070C36 39.22%, #0D3166 56.01%, #1B7BD8 75.57%, #85BAEE 90.34%, #FFFFFF 98.65%)',
+      }}
     >
+      <img src={Clouds} className='absolute z-0 object-cover h-[3781px] 2xl:h-auto top-[4150px] 2xl:w-full' onDragStart={(event)=> event.preventDefault()} />
       <SponsorNav />
       <NatureBackground />
-      <div className="z-10">
-        <div className="flex flex-col lg:space-y-[28.2px]">
-          <TitleSign />
-          <div className="w-full justify-center flex mt-3.5 lg:mt-0">
-            <h1 className="text-3xl lg:text-4xl text-white font-minecraft text-center">
-              SPONSOR
-              <br />
-              INFORMATION
-            </h1>
-          </div>
-        </div>
-        <SponsorButton />
-        <div className="mt-44 lg:mt-60 items-center flex-col flex mb-80 lg:mb-[426px] z-10">
-          <h1 className="text-white font-minecraft text-center text-base/[20px] lg:text-[25.6px]/[32px] tracking-[0.1em]">
-            "BOSTONHACKS IS
-            <br />
-            CONSISTENTLY ONE OF THE
-            <br />
-            BEST [HACKATHONS] THAT
-            <br />I CONTINUE TO SPONSOR
-            <br />
-            YEAR AFTER YEAR."
-          </h1>
-          <h2 className="text-white text-xs lg:text-[19.2px] text-center font-ft88 text-left mt-4">
-            SAM ANGNEW, TWILIO
-          </h2>
-        </div>
-      </div>
       <PinkButton buttonText="WHO ARE WE?" extraStyling="mb-12 lg:mb-0 z-10" />
       <WhoWeAreScroll />
       <PinkButton buttonText="WHY US?" extraStyling="mt-[105px] lg:mt-[200px] z-10" doubleStarStyling={'lg:hidden'}/>
@@ -60,6 +38,7 @@ const SponsorPage = () => {
       <Stats />
       <SectionTitle extraStyling={'mb-16 lg:mb-48 z-10'} text={'REVIEWS'} ID="Reviews" showSparkle={true}/>
       <Reviews />
+      <img src={FooterCloudImage} className='absolute bottom-36 z-0 object-cover h-[480px] lg:h-[865px] 2xl:h-auto 2xl:w-full' onDragStart={(event)=> event.preventDefault()}/>
       <SponsorButton />
       <Footer />
     </div>