Merge pull request #91 from hack4bengal/andresha__dev

feat(timeline): added timeline section

src/assets/data/TeamContent.js

@@ -26,6 +26,7 @@ import souradeep from "../images/TeamCardImages/souradeep.png";
 import swarup from "../images/TeamCardImages/swarup.webp";
 import tamal from "../images/TeamCardImages/tamal.png";
 import tushar from "../images/TeamCardImages/tushar.webp";
+import priya from "../images/TeamCardImages/priya.webp";
 import utkarsh from "../images/TeamCardImages/utkarsh.png";
 
 const teamMember = {
@@ -214,7 +215,13 @@ const teamMember = {
       linkedIn: "https://www.linkedin.com/in/kaialan/",
       twitter: "https://twitter.com/KaiAlan_",
     },
-
+    {
+      img: priya,
+      name: "Priya",
+      title: "Java Developer",
+      linkedIn: "https://www.linkedin.com/in/priya-singh-271488222/",
+      twitter: "https://x.com/PriyaSi77289347",
+    },
     {
       img: saurabh,
       name: "Saurabh",

src/assets/data/Timeline.js

@@ -0,0 +1,43 @@
+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.",
+    alt: "Registration Start Date",
+    displayDate: "2nd June",
+    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.",
+    alt: "Hackathon Start Date",
+    displayDate: "28th June",
+    ringImg:Ring_2
+  },
+  {
+    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.",
+    displayDate: "28-30th June",
+    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.",
+    alt: "Hackathon End Date",
+    displayDate: "30th June",
+    ringImg:Ring_4
+  },
+];

src/components/private/about/About.jsx

@@ -25,6 +25,7 @@ const About = () => {
               Hack4Bengal empowers all fields to showcase creativity in solving
               real-life problems for a brighter future.
             </p>
+            <span>&nbsp;</span>
             <p>
               Join us for the reinvigorated Hack4Bengal! From three enthusiasts
               in 2021 to a thriving community of over 3000 developers, our

src/components/private/index.js

@@ -4,6 +4,7 @@ export const Landing = lazy(() => import("./landing/Landing"));
 export const Marquee = lazy(() => import("./marquee/Marquee"));
 export const About = lazy(() => import("./about/About"));
 export const Timer = lazy(() => import("./timer/Timer"));
+export const TimeLine = lazy(()=>import("./timeline/Timeline"))
 export const Theme = lazy(() => import("./themes/Theme"));
 export const Prizes = lazy(() => import("./prizes/Prizes"));
 export const Sponsors = lazy(() => import("./sponsors/Sponsors"));

src/components/private/timeline/Modal.scss

@@ -0,0 +1,90 @@
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    animation: fadeIn 0.3s ease-in-out;
+
+    &__content {
+        background: #393939;
+        padding: 10px 10px 10px 30px;
+        border-radius: 10px;
+        position: relative;
+        height: 480px;
+        width: 480px;
+        transform: scale(0.7);
+        animation: scaleIn 0.3s ease-in-out forwards;
+        @media screen and (max-width: 549px) {
+            height: 400px;
+            width: 400px;
+        }
+        @media screen and (max-width: 400px) {
+            height: 400px;
+            width: 350px;
+        }
+        @media screen and (max-width: 370px) {
+            height: 400px;
+            width: 300px;
+        }
+        @media screen and (max-width: 300px) {
+            height: 400px;
+            width: 280px;
+        }
+
+    }
+
+    &__close {
+        display: flex;
+        justify-content: flex-end;
+        padding: 20px 20px 5px 20px;
+        button {
+            background: transparent;
+            border: none;
+            outline: none;
+            cursor: pointer;
+        }
+    }
+
+
+    ol {
+        :nth-child(1) {
+            margin-top: 10px;
+        }
+        li {
+            color: #fff;
+            font-family: var(--body-font);
+            padding: 10px 5px;
+        }
+    }
+}
+
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes scaleIn {
+    from {
+        transform: scale(0.9);
+    }
+    to {
+        transform: scale(1);
+    }
+}
+
+
+
+
+

src/components/private/timeline/Modal.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import "./Modal.scss";
+
+const Modal = ({ closeModal }) => {
+  return (
+    <div className="modal">
+      <div className="modal__content">
+        <div  className="modal__close">
+        <button onClick={closeModal}>
+        <svg height="15px" width="15px" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M1 21L21 1" stroke='#fff' strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
+      />
+      <path d="M21 21L1 1" stroke='#fff' strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
+      />
+    </svg>
+        </button>
+        </div>
+        <ol type="1">
+          <li>Registration opens on June 1, 2024, and closes on June 24, 2024.</li>
+          <li>The hackathon takes 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.</li>
+        </ol>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/private/timeline/Timeline.scss

@@ -0,0 +1,161 @@
+.timeline {
+    margin-top: 2rem;
+    padding: 4rem 5rem 8rem 5rem;
+
+    @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;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      gap: 8rem;
+      margin-top: 8rem;
+
+      @media screen and (max-width: 900px) {
+        padding: 2rem;
+        gap:4rem 9rem ;
+      }
+      @media screen and (max-width: 412px) {
+        padding: 2rem 1rem;
+        gap: 2rem 4rem ;
+      }
+      @media screen and (max-width: 540px) {
+        gap: 2rem 6rem;
+      }
+      @media screen and (max-width: 400px) {
+        gap: 2rem 4rem;
+      }
+
+
+
+      .timeline__event {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+
+        .timeline__d-flex {
+          display: flex;
+          align-items: center;
+          position: relative;
+          justify-content: space-between;
+
+          .timeline__number {
+            font-size: clamp(5rem, 12vw, 12rem);
+            font-weight: bolder;
+            font-family: var(--body-font);
+            position: relative;
+            margin-right: 2rem;
+
+            &.active {
+              color: #ffffff;
+            }
+
+            &.inactive {
+              color: #646464;
+            }
+          }
+
+
+          .timeline__circle_details {
+            position: absolute;
+            border-radius: 50%;
+            width: 7rem;
+            height: 7rem;
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            left: 96%;
+            transform: translateX(-50%);
+            overflow: hidden;
+
+            @media screen and (max-width: 1024px) {
+              left: 103%;
+            }
+            @media screen and (max-width: 860px) {
+              left: 109%;
+            }
+            @media screen and (max-width: 820px) {
+              width: 6rem;
+              height: 6rem;
+              left: 100%;
+            }
+
+            @media screen and (max-width: 540px) {
+              width: 5rem;
+              left: 108%;
+              height: 5rem;
+              left: 93%;
+            }
+            img {
+              height: 100%;
+              width: 100%;
+              display: block;
+              border-radius: 50%;
+              background-color: #1b1b1b;
+            }
+
+            p {
+              font-family: var(--body-font);
+              font-size: 1rem;
+              position: absolute;
+              color: white;
+              padding: 5px;
+
+              @media screen and (max-width: 853px) {
+                font-size: 0.7rem;
+              }
+            }
+          }
+        }
+
+        .timeline__date {
+          padding: 0.5rem;
+          text-align: center;
+          background-color: red;
+          width: 100%;
+          border-radius: 5px;
+          font-family: var(--body-font);
+          font-size: 12px;
+          font-weight: 600;
+          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;
+            padding: 0.25rem;
+          }
+          @media screen and (max-width: 320px) {
+            width: 90px;
+          }
+          @media screen and (max-width: 250px) {
+            width: auto;
+            padding-left:7px ;
+            padding-right: 7px;
+          }
+        }
+      }
+    }
+  }
+