add: timeline section

hack4bengal · Jun 11, 2024 · eab9079 · eab9079
1 parent 0eb6b4d
commit eab9079
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 69 deletions.
diff --git a/src/assets/data/HeaderContent.js b/src/assets/data/HeaderContent.js
@@ -18,7 +18,7 @@ const HeaderData = {
     backWordMobile: "Plan",
     backWordSize_mobile: "93px",
     backWordSpacing_mobile: "0.5rem",
-    frontWord: "Hackathon Timeline",
+    frontWord: "Timeline",
     frontWordMobile: "Timeline",
   },
   theme: {

diff --git a/src/assets/data/Timeline.js b/src/assets/data/Timeline.js
@@ -1,43 +1,47 @@
-import Ring_1 from "../images/timeline/Ring_1.png"
-import Ring_2 from "../images/timeline/Ring_2.png"
-import Ring_3 from "../images/timeline/Ring_3.png"
-import Ring_4 from "../images/timeline/Ring_4.png"
+import Ring_1 from "../images/timeline/Ring_1.png";
+import Ring_2 from "../images/timeline/Ring_2.png";
+import Ring_3 from "../images/timeline/Ring_3.png";
+import Ring_4 from "../images/timeline/Ring_4.png";
 
 export const EventTimeline = [
   {
-    date: new Date('2024-06-02'),
-    number:1,
-    circleText:"Registration begins",
-    modelText:"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+    date: new Date("2024-06-02"),
+    number: 1,
+    circleText: "Registration Begins",
+    modelText:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
     alt: "Registration Start Date",
     displayDate: "2nd June",
-    ringImg:Ring_1
+    ringImg: Ring_1,
   },
   {
-    date: new Date('2024-06-28'),
-    number:2,
-    circleText:"Hackathon Starts",
-    modelText:"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+    date: new Date("2024-06-28"),
+    number: 2,
+    circleText: "Hackathon Starts",
+    modelText:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
     alt: "Hackathon Start Date",
     displayDate: "28th June",
-    ringImg:Ring_2
+    ringImg: Ring_2,
   },
   {
-    date: new Date('2024-06-30'),
-    number:3,
-    circleText:"Hackathon In Progress",
+    date: new Date("2024-06-30"),
+    number: 3,
+    circleText: "Hackathon In Progress",
     alt: "Hackathon Progress Date",
-    modelText:"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+    modelText:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
     displayDate: "28-30th June",
-    ringImg:Ring_3
+    ringImg: Ring_3,
   },
   {
-    date: new Date('2024-07-01'),
-    number:4,
-    circleText:"Hackathon Ends",
-    modelText:"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
+    date: new Date("2024-07-01"),
+    number: 4,
+    circleText: "Hackathon Ends",
+    modelText:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
     alt: "Hackathon End Date",
     displayDate: "30th June",
-    ringImg:Ring_4
+    ringImg: Ring_4,
   },
 ];
diff --git a/src/components/private/timeline/Modal.scss b/src/components/private/timeline/Modal.scss
@@ -11,22 +11,26 @@
   z-index: 1000;
   animation: fadeIn 0.3s ease-in-out;
 
-  &__content {
-    background: #393939;
-    padding: 10px 10px 10px 30px;
+  .modal__content {
+    background: #303030;
+    border: 3px solid var(--h4bred);
+    padding: 35px 35px 35px 55px;
     border-radius: 10px;
     position: relative;
-    height: 480px;
-    width: 480px;
+    min-height: 350px;
+    width: 500px;
     transform: scale(0.7);
     animation: scaleIn 0.3s ease-in-out forwards;
+
     @media screen and (max-width: 549px) {
-      height: 400px;
-      width: 400px;
+      min-height: 350px;
+      width: 350px;
+      padding: 27px 27px 27px 50px;
     }
     @media screen and (max-width: 400px) {
       height: 400px;
       width: 350px;
+      padding: 30px 30px 30px 52.5px;
     }
     @media screen and (max-width: 370px) {
       height: 400px;
@@ -38,10 +42,9 @@
     }
   }
 
-  &__close {
+  .modal__close {
     display: flex;
     justify-content: flex-end;
-    padding: 20px 20px 5px 20px;
     button {
       background: transparent;
       border: none;

diff --git a/src/components/private/timeline/Modal.tsx b/src/components/private/timeline/Modal.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import "./Modal.scss";
 
-const Modal = ({ closeModal }) => {
+const Modal = ({closeModal}) => {
   return (
     <div className="modal">
       <div className="modal__content">
@@ -33,14 +33,14 @@ const Modal = ({ closeModal }) => {
         </div>
         <ol type="1">
           <li>
-            Registration opens on June 1, 2024, and closes on June 24, 2024.
+            Registration opens on June 1, 2024, and closes on June 11, 2024.
           </li>
           <li>
-            The hackathon takes place from June 28, 2024, to June 30, 2024.
+            The Hackathon will take place from June 28, 2024, to June 30, 2024.
           </li>
           <li>
-            The judging round, winner announcement, and closing ceremony will
-            all occur on June 30, 2024.
+            The Judging round, Winner Announcement, and Closing Ceremony will
+            all occur on June 30, 2024.
           </li>
         </ol>
       </div>

diff --git a/src/components/private/timeline/Timeline.scss b/src/components/private/timeline/Timeline.scss
@@ -5,19 +5,20 @@
   @media screen and (max-width: 768px) {
     padding: 1rem;
   }
-  @media screen and (max-width: 344px) {
-    padding: 1rem;
-  }
+
   .header__parent {
     position: relative;
+
     h1 {
       letter-spacing: 0.2rem !important;
     }
+
     h2 {
       position: absolute;
       // top: 5px;
     }
   }
+
   .timeline__content {
     display: flex;
     justify-content: center;
@@ -27,15 +28,14 @@
     margin-top: 8rem;
 
     @media screen and (max-width: 900px) {
-      padding: 2rem;
+      margin-right: 1rem;
       gap: 4rem 9rem;
     }
-    @media screen and (max-width: 412px) {
-      padding: 2rem 1rem;
-      gap: 2rem 4rem;
-    }
     @media screen and (max-width: 540px) {
-      gap: 2rem 6rem;
+      gap: 1.5rem 5rem;
+    }
+    @media screen and (max-width: 412px) {
+      gap: 1rem 2rem;
     }
     @media screen and (max-width: 400px) {
       gap: 2rem 4rem;
@@ -54,11 +54,11 @@
         justify-content: space-between;
 
         .timeline__number {
-          font-size: clamp(5rem, 12vw, 12rem);
+          font-size: clamp(6rem, 12vw, 12rem);
           font-weight: bolder;
-          font-family: var(--body-font);
+          font-family: var(--heading-font);
           position: relative;
-          margin-right: 2rem;
+          margin-right: 1.5rem;
 
           &.active {
             color: #ffffff;
@@ -67,18 +67,22 @@
           &.inactive {
             color: #646464;
           }
+
+          @media screen and (max-width: 412px) {
+            font-size: clamp(7rem, 12vw, 12rem);
+          }
         }
 
         .timeline__circle_details {
           position: absolute;
           border-radius: 50%;
-          width: 7rem;
-          height: 7rem;
+          width: 7.5rem;
+          height: 7.5rem;
           text-align: center;
           display: flex;
           justify-content: center;
           align-items: center;
-          left: 96%;
+          left: 95%;
           transform: translateX(-50%);
           overflow: hidden;
 
@@ -93,13 +97,12 @@
             height: 6rem;
             left: 100%;
           }
-
           @media screen and (max-width: 540px) {
             width: 5rem;
-            left: 108%;
             height: 5rem;
             left: 93%;
           }
+
           img {
             height: 100%;
             width: 100%;
@@ -109,14 +112,14 @@
           }
 
           p {
-            font-family: var(--body-font);
-            font-size: 1rem;
+            font-family: var(--heading-font);
+            font-size: 0.9rem;
+            font-weight: 600;
             position: absolute;
             color: white;
-            padding: 5px;
 
             @media screen and (max-width: 853px) {
-              font-size: 0.7rem;
+              font-size: 0.6rem;
             }
           }
         }
@@ -126,21 +129,21 @@
         padding: 0.5rem;
         text-align: center;
         background-color: red;
-        width: 100%;
+        width: 120px;
         border-radius: 5px;
-        font-family: var(--body-font);
+        font-family: var(--heading-font);
         font-size: 12px;
-        font-weight: 600;
+        font-weight: 700;
         cursor: pointer;
         color: #ffffff;
         border: none;
-        width: 120px;
         outline: none;
+
         @media screen and (max-width: 900px) {
           width: 100px;
         }
         @media screen and (max-width: 576px) {
-          font-size: 0.75rem;
+          font-size: 0.7rem;
           padding: 0.25rem;
         }
         @media screen and (max-width: 320px) {

diff --git a/src/components/private/timeline/Timeline.tsx b/src/components/private/timeline/Timeline.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect} from "react";
 import "./Timeline.scss";
 import HeaderData from "../../../assets/data/HeaderContent";
-import { Header } from "../../shared";
-import { EventTimeline } from "../../../assets/data/Timeline";
+import {Header} from "../../shared";
+import {EventTimeline} from "../../../assets/data/Timeline";
 import Modal from "./Modal";
 
 const Timeline = () => {

diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
@@ -21,7 +21,7 @@ const Home = () => {
       <Landing />
       {window.innerWidth < 600 && <Marquee />}
       <Timer />
-      {/* <Timeline/> */}
+      <Timeline />
       <About />
       <Venue />
       <Theme />