Merge pull request #28 from Bostonhacks/Sponsor-declan

Changed background. Added background assets. Fixed some styling

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 w-3/4 lg:w-auto"
+            className="TitleSign mx-[25vw] w-3/4 lg:w-auto"
             src={Sign}
             alt="TitleSign"
         />

src/components/SponsorPageComponents/NatureBackground.jsx

@@ -16,7 +16,7 @@ const NatureBackground = () => {
                 src={BackgroundMobile}
                 alt="NatureBackgroundMobile"
             />
-            <div className='absolute right-0 bottom-24 lg:bottom-0 w-2/5 lg:w-auto'>
+            <div className='absolute right-0 bottom-24 lg:bottom-0 w-2/5 lg:w-auto z-0'>
                 <img
                 className="Tree"
                 src={TreeSVG}

src/components/SponsorPageComponents/Perks.jsx

@@ -49,7 +49,7 @@ const ChoosePerkButton = ({ link }) => {
 
 const Perks = () => {
   return (
-    <div>
+    <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]">
           <PerksTitle perkAmount={500} subHeading={'Sneak Peak'} />

src/components/SponsorPageComponents/Reviews.jsx

@@ -1,6 +1,6 @@
 const Reviews = () => {
     return (
-    <div className="mx-8 lg:mx-52">
+    <div className="mx-8 lg:mx-52 mb-80 lg:mb-[800px] z-10">
         <div className="mb-[71px] lg:mb-56 lg:pr-72">
           <h1 className="font-minecraft font-bold text-[13px] lg:text-[22px] mb-[18px] text-white">
             Twilio: Sam Agnew
@@ -30,7 +30,7 @@ const Reviews = () => {
             us.”
           </p>
         </div>
-        <div className="mb-[71px] lg:mb-56 lg:pr-72">
+        <div className="lg:pr-72">
           <h1 className="font-minecraft font-bold text-[13px] lg:text-[22px] mb-[18px] text-white">
             Cadence: Apurva Kalia
           </h1>

src/components/SponsorPageComponents/SectionTitle.jsx

@@ -1,6 +1,8 @@
 import { ReactComponent as SponsorFAQ } from '../../assets/images/TitleBG.svg';
+import ReviewSparkle from '../../assets/images/SponsorPage/ReviewSparkle.svg';
 
-const SectionTitle = ({ extraStyling, text, ID }) => {
+
+const SectionTitle = ({ extraStyling, text, ID, showSparkle }) => {
   return (
     <div
       className={`relative justify-center flex flex-col items-center ${extraStyling}`}
@@ -12,6 +14,7 @@ const SectionTitle = ({ extraStyling, text, ID }) => {
           {text}
         </h1>
       </div>
+      {showSparkle ? <img src={ReviewSparkle} className='absolute w-[14vw] lg:w-auto mr-[70vw] lg:mr-[30vw] ml-auto -bottom-4 lg:-bottom-12'/> : <div/> }
     </div>
   );
 };

src/components/SponsorPageComponents/SponsorButtons/PinkButton.jsx

@@ -1,30 +1,33 @@
 import React from 'react';
 import sparkle from '../../../assets/images/SponsorPage/sparkle.png';
 import btnBackground from '../../../assets/images/SponsorPage/sponsor_pink_btn.svg';
+import DoubleSparkleImage from '../../../assets/images/SponsorPage/DoubleSparkle.svg';
 
-const PinkButton = ({ buttonText, extraStyling }) => {
+const PinkButton = ({ buttonText, extraStyling, doubleStarStyling}) => {
 
     const pinkBtnBackgroundStyle = {
         backgroundImage: `url(${btnBackground})`,
         backgroundSize: 'contain', 
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center',
-        padding: '16px',
+        padding: '20px',
         display: 'flex',
         justifyContent: 'center'
     };
 
     return (
-        <div className={`relative w-full justify-center items-center ${extraStyling}`} id='WhoWeAre'>                
+        <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-[3vw] leading-[4.2vw]'>
+                    <h1 className='font-misterpixel text-white text-[30px]/[70px] lg:text-[3.5vw] leading-[4.2vw]'>
                         {buttonText}
                     </h1>
                 </div>
             <img src={sparkle} alt="Image" className="w-[42px] lg:w-auto absolute right-0 -bottom-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}`}/>
         </div>
     )
 }

src/components/SponsorPageComponents/Stats.jsx

@@ -1,17 +1,18 @@
 import {ReactComponent as HybridEventsStats} from '../../assets/images/SponsorPage/HybridEventsStats.svg';
 import {ReactComponent as GrandingSection} from '../../assets/images/SponsorPage/GrandingSection.svg';
 import {ReactComponent as InPersonEventStats} from '../../assets/images/SponsorPage/InPersonEventStats.svg';
-
+import {ReactComponent as StatSparkle} from '../../assets/images/SponsorPage/StatSparkle.svg';
 
 
 const Stats = () => {
     return (
-        <div className='justify-center items-center flex flex-col mb-24 lg:mb-80'>
+        <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]"/>
         </div>
     );
 }

src/components/SponsorPageComponents/WhoWeAreScroll.jsx

@@ -4,18 +4,18 @@ import ScrollMobile from '../../assets/images/SponsorPage/WhoWeAreScrollMobile.s
 const WhoWeAreScroll = () => {
     return (
     <div className=''>
-        <div className='justify-center flex relative'>
+        <div className='justify-center flex relative z-10'>
             <img
-                className="min-[320px]:hidden lg:flex"
+                className="min-[320px]:hidden md:flex"
                 src={Scroll}
                 alt="WhoWeAreScroll"
             />
             <img
-            className="flex lg:hidden"
+            className="flex md:hidden"
             src={ScrollMobile}
             alt="WhoWeAreScrollMobile"
             />
-            <div className='absolute text-center font-minecraft text-[#965340] text-[10px] text-[#965340] w-[214px] mt-[115px] leading-3 lg:w-[614px] lg:h-[350px] lg:text-xl/[24px] lg:mt-[235px] lg:mr-[114.8px] lg:ml-[122px] lg:mb-[187.32px] lg: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-[235px] md:mr-[114.8px] md:ml-[122px] md:mb-[187.32px] md:leading-[24px]'>
                 <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/>

src/components/SponsorPageComponents/WhyUs.jsx

@@ -58,7 +58,7 @@ const WhySection = ({ data }) => {
 
 const WhyUs = () => {
   return (
-    <div className="items-center flex flex-col text-white font-minecraft py-20">
+    <div className="items-center flex flex-col text-white font-minecraft py-20 z-10">
       {/* <img src={WhyUsSign} alt="WhyUsSign" className="max-w-md" /> */}
 
       <WhySection data={whyUs[0]} reverse={true} />

src/pages/SponsorPage.jsx

@@ -14,11 +14,11 @@ import Reviews from '../components/SponsorPageComponents/Reviews';
 const SponsorPage = () => {
   return (
     <div
-      className="w-full h-100% bg-auto bg-sponsor_background 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"
+      // 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%)',
+      // }}
     >
       <SponsorNav />
       <NatureBackground />
@@ -34,7 +34,7 @@ const SponsorPage = () => {
           </div>
         </div>
         <SponsorButton />
-        <div className="mt-44 lg:mt-60 items-center flex-col flex mb-80 lg:mb-[426px]">
+        <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 />
@@ -50,16 +50,17 @@ const SponsorPage = () => {
           </h2>
         </div>
       </div>
-      <PinkButton buttonText="WHO ARE WE?" extraStyling="mb-12 lg:mb-0" />
+      <PinkButton buttonText="WHO ARE WE?" extraStyling="mb-12 lg:mb-0 z-10" />
       <WhoWeAreScroll />
-      <PinkButton buttonText="WHY US?" extraStyling="mt-[105px] lg:mt-[200px]" />
+      <PinkButton buttonText="WHY US?" extraStyling="mt-[105px] lg:mt-[200px] z-10" doubleStarStyling={'lg:hidden'}/>
       <WhyUs />
-      <SectionTitle extraStyling={'mb-16 mt-14 lg:mt-0'} text={'SPONSOR'} ID="Sponsor"/>
+      <SectionTitle extraStyling={'mb-16 mt-14 lg:mt-0 z-10'} text={'SPONSOR'} ID="Sponsor"/>
       <Perks />
-      <SectionTitle extraStyling={'mb-16 lg:-mt-4'} text={'STATS'} ID="Stats" />
+      <SectionTitle extraStyling={'mb-16 lg:-mt-4 z-10'} text={'STATS'} ID="Stats" />
       <Stats />
-      <SectionTitle extraStyling={'mb-16 lg:mb-48'} text={'REVIEWS'} ID="Reviews" />
+      <SectionTitle extraStyling={'mb-16 lg:mb-48 z-10'} text={'REVIEWS'} ID="Reviews" showSparkle={true}/>
       <Reviews />
+      <SponsorButton />
       <Footer />
     </div>
   );

tailwind.config.js

@@ -17,10 +17,10 @@ export default {
         'text-primary': '#FFFFFF', //"#FFFFFF" add this when we don't have a white background
         'text-secondary': '#965340',
       },
-      // backgroundImage: {
-      //   sponsor_background:
-      //     "url('/src/assets/images/SponsorPage/Background.svg')",
-      // },
+      backgroundImage: {
+        sponsor_background:
+          "url('/src/assets/images/SponsorPage/Background.svg')",
+      },
       keyframes: {
         wiggle: {
           '0%': { transform: 'scale(1.0)' },
@@ -36,7 +36,7 @@ export default {
     },
     listStyleImage: {
       goldKey: 'url("/src/assets/images/SponsorPage/PerksAssets/GoldKey.svg")',
-    },
+    }
   },
   plugins: [],
 };