Merge pull request #100 from IIT-BHU-SPORTS-FEST/dev

[updated] home page
IIT-BHU-SPORTS-FEST · Oct 18, 2024 · 2d447bf · 2d447bf
2 parents d2515ac + 58c9d40
commit 2d447bf
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 46 deletions.
diff --git a/frontend/src/components/LandingPages/Home/Images/spardha.png b/frontend/src/components/LandingPages/Home/Images/spardha.png
diff --git a/frontend/src/components/LandingPages/Home/MiddleSection/MiddleSection.css b/frontend/src/components/LandingPages/Home/MiddleSection/MiddleSection.css
@@ -11,7 +11,7 @@ body {
   font-family: 'Poppins', sans-serif;
 }
 .container-home {
-  padding-top: 10vh;
+  padding-top: 5vh;
   display: flex;
   position: relative;
   justify-content: center;
@@ -27,7 +27,6 @@ body {
 .left-box {
   display: flex;
   flex-direction: column;
-  color: white;
   text-align: center;
   height: 100%;
   justify-content: center;
@@ -64,29 +63,45 @@ body {
 }
 
 .days-text {
-  font-size: 68px;
+  padding-top: 80px;
+  font-size: 40px;
   text-align: center;
   font-weight: 700;
   text-transform: uppercase;
   color: white;
   /* margin-bottom: 50px;
   margin-top: 50px; */
 }
-.days {
-  margin-top: 60px;
+.bold-text {
+  font-size: 60px;
+  text-align: center;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: transparent;
+  -webkit-text-stroke: 3px rgb(255, 255, 255);
+  z-index: 50;
+  word-spacing: 10px;
 }
 
+.newimg{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.newimg img{
+  width: 30rem;
+}
 .button-container {
   display: flex;
   justify-content: space-evenly;
   gap: 2vw;
-  margin: 2vh;
-  margin-top: 30px;
+  margin-top: 5px;
+  margin-bottom: 20px;
 }
 
 .btn1 {
-  width: 300px;
-  height: 75px;
+  width: 290px;
+  height: 65px;
   /* padding: 20px 75px 20px 75px; */
   gap: 20px;
   border: 3px solid #f0f0f0;
@@ -144,9 +159,14 @@ body {
     margin-top: 50px;
   }
   .days-text {
+    font-size: 40px;
+  }
+  .bold-text {
     font-size: 60px;
   }
-
+  .newimg img{
+    width: 30rem;
+  }
   .btn1,
   .btn2 {
     font-size: 27px;
@@ -166,7 +186,13 @@ body {
   }
 
   .days-text {
-    font-size: 54px;
+    font-size: 32px;
+  }
+  .bold-text {
+    font-size: 48px;
+  }
+  .newimg img{
+    width: 25rem;
   }
   .days {
     margin-top: 30px;
@@ -201,7 +227,13 @@ body {
     margin-top: 25px;
   }
   .days-text {
-    font-size: 48px;
+    font-size: 28px;
+  }
+  .bold-text {
+    font-size: 42px;
+  }
+  .newimg img{
+    width: 22rem;
   }
 
   .btn1,
@@ -237,8 +269,14 @@ body {
   }
 
   .days-text {
+    font-size: 24px;
+  }
+  .bold-text {
     font-size: 36px;
   }
+  .newimg img{
+    width: 20rem;
+  }
 }
 @media (max-width: 320px) {
   .before-day,
@@ -253,7 +291,13 @@ body {
     margin-top: 15px;
   }
   .days-text {
-    font-size: 33px;
+    font-size: 20px;
+  }
+  .bold-text {
+    font-size: 30px;
+  }
+  .newimg img{
+    width: 12rem;
   }
 }
 /* .card {

diff --git a/frontend/src/components/LandingPages/Home/MiddleSection/MiddleSection.js b/frontend/src/components/LandingPages/Home/MiddleSection/MiddleSection.js
@@ -1,49 +1,41 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './MiddleSection.css';
 import { NavHashLink } from 'react-router-hash-link';
-import { ToastContainer, toast } from 'react-toastify';
+import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import Img from "../Images/spardha.png"
 
 function Mid() {
-  const [daysLeft, setDaysLeft] = useState(0);
-
-  const showNotification = () => {
-    toast.error('Registrations closed!', {
-      position: toast.POSITION.TOP_CENTER,
-    });
-  };
-
-  useEffect(() => {
-    const timer = setInterval(() => {
-      const eventDate = new Date('2024-10-18');
-      const currentDate = new Date();
-      const timeDifference = eventDate - currentDate;
-      const days = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
-      setDaysLeft(days);
-    }, 1000);
-
-    return () => clearInterval(timer);
-  }, []);
+  // const [daysLeft, setDaysLeft] = useState(0);
+
+  // const showNotification = () => {
+  //   toast.error('Registrations closed!', {
+  //     position: toast.POSITION.TOP_CENTER,
+  //   });
+  // };
+  
+  // useEffect(() => {
+  //   const timer = setInterval(() => {
+  //     const eventDate = new Date('2024-10-18');
+  //     const currentDate = new Date();
+  //     const timeDifference = eventDate - currentDate;
+  //     const days = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
+  //     setDaysLeft(days);
+  //   }, 1000);
+
+  //   return () => clearInterval(timer);
+  // }, []);
 
   return (
     <div className="container-home">
       <div className="left-box">
         <div className="countdown-container">
-          <div className="count">
-            <span className="before-day">{daysLeft - 1}</span>
-            <span className="current-day">{daysLeft}</span>
-            <span className="after-day">{daysLeft + 1}</span>
-          </div>
-          <div className="days">
-            <p className="days-text">DAYS TO GO</p>
-          </div>
+            <p className="days-text">WELCOME TO</p>
+            <div className='newimg'><img src={Img} alt='spardha-logo'/></div>
+            <p className='bold-text'>UNLEASHING  POTENTIAL</p>
         </div>
 
         <div className="button-container">
-          <button onClick={showNotification} className="btn2">
-            REGISTER
-          </button>
-
           <NavHashLink to="/matches">
             <button className="btn1">MATCHES</button>
           </NavHashLink>