adjust timer and spacing

src/components/LandingPageComponents/FAQ.jsx

@@ -96,10 +96,10 @@ const FAQ = () => {
       </div>
     <section
       id="faq"
-      className="w-full flex flex-col items-center justify-center text-text-primary px-5 my-[10rem]"
+      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-4xl pb-1">
+        <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" />

src/components/LandingPageComponents/Feliz.jsx

@@ -4,7 +4,7 @@ import DialogBox from '../../assets/images/DialogBoxFull.png';
 
 const Feliz = ({ children }) => {
   return (
-    <div className="flex px-10 lg:px-[25%] xl:px-[30%] w-full h-full place-content-center mt-[5vh]">
+    <div className="flex px-10 lg:px-[25%] xl:px-[30%] w-full h-full place-content-center max-sm:mt-0 max-sm:p-10 mt-80 p-40">
       <div className="relative flex items-end justify-center">
         <img className="object-cover" src={FelizPic} />
       </div>

src/components/LandingPageComponents/NatureBG.tsx

@@ -3,12 +3,14 @@ import nature from '../../assets/images/LandingPage/naturebg.svg';
 
 const NatureBG = () => {
   return (
+
     <img
       src={nature}
       alt="BG"
-      className="w-[100vw]  absolute top-0 left-0 overflow-hidden"
-    />
+      className="w-[100vw] absolute top-0 left-0"
+      />
   );
+
 };
 
 export default NatureBG;

src/components/LandingPageComponents/Schedule.jsx

@@ -1,27 +1,28 @@
 import React from 'react';
 import scheduleTimeLine from '../../assets/images/schedule.svg';
-import scheduleHeader from '../../assets/images/scheduleHeader.svg';
 import TitleBG from '../../assets/images/TitleBG.svg';
 import cloudleft from '../../assets/images/LandingPage/Background/cloud_schedule_left.svg';
 import cloudright from '../../assets/images/LandingPage/Background/cloud_schedule_right.svg';
 import cloudbottom from '../../assets/images/LandingPage/Background/cloud_schedule_top.svg';
 import cloudtop from '../../assets/images/LandingPage/Background/cloud_schedule_bottom.svg';
-import felixPlatform from '../../assets/images/LandingPage/felixPlatform.svg'
+import felixPlatform from '../../assets/images/LandingPage/felixPlatform.svg';
+import mobileSchedule from '../../assets/images/LandingPage/mobileSchedule.svg';
 export default function Schedule() {
   return (
-    <div className="flex justify-center items-center flex-col w-full overflow-clip">
+    <div className="flex justify-center items-center flex-col w-full -mb-80 max-sm:mb-auto">
       <img src={felixPlatform} className='mb-20 mt-20 max-sm:hidden'/>
       <div
         className="relative flex items-center justify-center md:h-[132px] md:w-[431px] h-[57px] w-[186px] mt-20 mb-20"
         id="schedule"
       >
-        <h2 className="z-50 text-center relative md:text-5xl text-4xl pb-1 text-text-primary">
+        <h2 className="z-50 text-center relative md:text-5xl text-3xl pb-1 text-text-primary">
           SCHEDULE
         </h2>
         <img className="z-20 absolute" src={TitleBG} alt="TitleBG" />
         <img src={cloudbottom} className="absolute -left-20 -top-20" alt="cloudleft"/>
       </div>
-        <img src={scheduleTimeLine} className='' alt="schedule"/>
+        <img src={scheduleTimeLine} className='max-sm:hidden' alt="schedule"/>
+        <img src={mobileSchedule} className='sm:hidden max-sm:scale-125 p-10 max-sm:mb-20' alt="mobile schedule"/>
         <img src={cloudtop} className="relative max-md:hidden left-96" alt="cloudtop"/>
         <img src={cloudleft} className="absolute left-0 max-md:scale-75 max-md:-left-4 max-sm:hidden" alt="cloudleft"/>
         <img src={cloudright} className="absolute max-md:scale-75 max-md:-right-6 right-0 max-sm:hidden" alt="cloudright"/>

src/components/LandingPageComponents/Sponsor.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import felizSponsor from '../../assets/images/felizSponsor.svg';
 import sponsorFaceBox from '../../assets/images/sponsorFaceBox.svg';
 import sponsorHeartGroup from '../../assets/images/sponsorHeartGroup.svg';
 import applyButton from '../../assets/images/applyButton.svg';
@@ -8,13 +7,12 @@ import TitleBG from '../../assets/images/TitleBG.svg';
 export default function Sponsor() {
   const sponsors = [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 13, 14];
   return (
-    <div className="flex justify-center items-center flex-col">
-      <img src={felizSponsor} alt="schedule" className="mt-20" />
+    <div className="flex justify-center items-center flex-col overflow-hidden">
       <div
         className="relative flex items-center justify-center md:h-[132px] md:w-[431px] h-[57px] w-[186px] mt-20"
         id="sponsors"
       >
-        <h2 className="z-50 text-center relative md:text-5xl text-4xl pb-1 text-text-primary">
+        <h2 className="z-50 text-center relative max-sm:scale-75 md:text-5xl text-4xl pb-1 text-text-primary">
           SPONSORS
         </h2>
         <img className="z-20 absolute" src={TitleBG} alt="TitleBG" />
@@ -28,7 +26,7 @@ export default function Sponsor() {
         ))}
       </div>
       <button>
-        <img src={applyButton} alt="" className="mt-20" />
+        <img src={applyButton} alt="" className="mt-20 scale-75" />
       </button>
     </div>
   );

src/components/LandingPageComponents/ThemeBanner.jsx

@@ -17,7 +17,7 @@ const Word = ({ children, image }) => {
 
 const ThemeBanner = () => {
   return (
-    <div className="flex justify-around flex-row items-center mx-3 my-[10rem] md:mx-[15%] font-misterpixel z-50">
+    <div className="flex justify-around flex-row items-center mx-3 my-[10rem] md:mx-[15%] font-misterpixel z-50 pt-60 max-sm:pt-0">
       <img
         alt="star"
         className="mb-[5rem] z-[100000] w-auto h-[30px] md:w-[95x] md:h-[95px]"

src/components/LandingPageComponents/Title.jsx

@@ -1,11 +1,15 @@
 import title from '../../assets/images/title.svg';
+import applyButton from '../../assets/images/applyButton.svg';
 
 const Title = () => {
   return (
     <section className="w-full flex flex-col items-center justify-center text-text-primary z-50">
       <div className="relative flex items-center justify-center">
-        <img className="w-[60vw] md:w-[30vw]" src={title} alt="Boston Hacks" />
+        <img className="w-[60vw] md:w-[30vw] scale-75" src={title} alt="Boston Hacks" />
       </div>
+      <button>
+        <img src={applyButton} className="scale-75 max-sm:scale-50 max-sm:-mb-6" alt="" />
+      </button>
     </section>
   );
 };

src/components/LandingPageComponents/TrackModals.tsx

@@ -14,7 +14,7 @@ const TrackModals = () => {
   return (
     <div className="w-full flex flex-col justify-center items-center">
       <div
-        className="relative flex items-center justify-center md:h-[132px] md:w-[431px] h-[57px] w-[186px]"
+        className="relative flex items-center justify-center md:h-[132px] md:w-[431px] h-[57px] w-[186px] mb-20 max-sm:mb-0 max-sm:mt-10"
         id="tracks"
       >
         <h2 className="z-50 text-center relative md:text-5xl text-4xl pb-1 text-text-primary">

src/components/SponsorPageComponents/SponsorButton.jsx

@@ -12,7 +12,7 @@ const SponsorButton = () => {
   };
 
   return (
-    <div className="justify-center flex mt-[22px] lg:mt-[27.8px] z-50">
+    <div className="justify-center flex mt-auto z-50 max-sm:scale-75">
       <button className="z-50" onClick={handleClick}>
         <img
           src={image}

src/components/common/CountDownTimer.jsx

@@ -2,7 +2,7 @@ import heartIcon from '../../assets/images/HeartTimer.png';
 import { useState, useEffect } from 'react';
 
 const CountDownTimer = () => {
-  const targetDate = new Date('2023-10-18 00:00:00').getTime();
+  const targetDate = new Date('2023-11-18 00:00:00').getTime();
   const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
 
   useEffect(() => {

src/pages/LandingPage.jsx

@@ -35,6 +35,9 @@ const LandingPage = () => {
       <TrackModals />
       <FAQ />
       <Schedule />
+      <Feliz>
+        Thanks to all the sponsors for making this event possible!
+      </Feliz>
       <Sponsor />
       <Footer />
     </div>