From eab9079a6e8a0f8068e097602ed582ea6424147e Mon Sep 17 00:00:00 2001 From: rohit Date: Tue, 11 Jun 2024 19:40:00 +0530 Subject: [PATCH] add: timeline section --- src/assets/data/HeaderContent.js | 2 +- src/assets/data/Timeline.js | 52 ++++++++++-------- src/components/private/timeline/Modal.scss | 21 ++++--- src/components/private/timeline/Modal.tsx | 10 ++-- src/components/private/timeline/Timeline.scss | 55 ++++++++++--------- src/components/private/timeline/Timeline.tsx | 6 +- src/pages/home/Home.jsx | 2 +- 7 files changed, 79 insertions(+), 69 deletions(-) diff --git a/src/assets/data/HeaderContent.js b/src/assets/data/HeaderContent.js index 73c2b6b..679718f 100644 --- 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 index d675d28..a28cc0d 100644 --- 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 index a83b480..79febb7 100644 --- 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 index 189fb57..51cf4c3 100644 --- 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 (
@@ -33,14 +33,14 @@ const Modal = ({ closeModal }) => {
  1. - Registration opens on June 1, 2024, and closes on June 24, 2024. + Registration opens on June 1, 2024, and closes on June 11, 2024.
  2. - 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.
  3. - 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.
diff --git a/src/components/private/timeline/Timeline.scss b/src/components/private/timeline/Timeline.scss index 8c9df87..d3d390f 100644 --- 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 index 5801a3b..afa4332 100644 --- 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 index 20fa176..234f959 100644 --- a/src/pages/home/Home.jsx +++ b/src/pages/home/Home.jsx @@ -21,7 +21,7 @@ const Home = () => { {window.innerWidth < 600 && } - {/* */} +