Merge branch 'dev' of https://github.com/TCP-Tech/CodeUtsava7.0 into dev

package.json

@@ -18,6 +18,8 @@
     "react-router-dom": "^6.6.0",
     "react-scripts": "5.0.1",
     "react-scroll-trigger": "^0.6.14",
+    "react-vertical-timeline-component": "^3.6.0",
+    "sheryjs": "^1.0.0-beta.0.0.4",
     "TagCloud": "^2.3.2",
     "web-vitals": "^2.1.4"
   },

src/assets/data/hackathonData.js

@@ -2,36 +2,73 @@ const hackathonData = [
   {
     id: '#1',
     title: "Registration Opens!",
-    date: "5th Oct, 11:00 AM",
+    date: "5th October, 11:00 AM",
     description:
       "Registrations begin for CodeUtsava 7.0 ,the flagship event of The Turing Club of Programmers",
   },
   {
     id: '#2',
+    title: "Speaker Session 1",
+    date: "8th October, 10:30 AM",
+    description:
+      "Tushar Tayal - Director of Engineering at Swiggy, 1st speaker session of CodeUtsava 7.0.",
+  },
+  {
+    id: '#3',
     title: "Shortlisting Begins!",
-    date: "15th Oct, 11:00 AM",
+    date: "15th October, 11:00 AM",
     description: "Team Shortlisting begins in batches.",
   },
   {
-    id: '#3',
+    id: '#4',
     title: "Registration Closes!",
-    date: "25th Oct, 11:59 PM",
+    date: "25th October, 11:59 PM",
     description: "Registrations for CodeUtsava 7.0 officially closed.",
   },
   {
-    id: '#4',
+    id: '#5',
+    title: "Coding Contest - 1",
+    date: "25th October",
+    description: "The first coding contest of CodeUtsava 7.0.",
+  },
+  {
+    id: '#6',
     title: "Final Teams Announced!",
-    date: "26th Oct, 11:00 AM",
+    date: "26th October, 11:00 AM",
     description: "Final Shortlisted Teams for CodeUtsava 7.0 are released.",
   },
   {
-    id: '#5',
+    id: '#7',
+    title: "Coding Contest - 2",
+    date: "26th October",
+    description: "The second coding contest of CodeUtsava 7.0.",
+  },
+  {
+    id: '#8',
     title: "Problem Statements Released",
-    date: "27th Oct, 11:00 AM",
+    date: "27th October, 11:00 AM",
     description: "Problems Statements for CodeUtsava 7.0 are released.",
   },
   {
-    id: '#6',
+    id: '#9',
+    title: "Coding Contest - 3",
+    date: "27th October",
+    description: "The third coding contest of CodeUtsava 7.0.",
+  },
+  {
+    id: '#10',
+    title: "Unkahi / Horror Story Telling",
+    date: "27th October",
+    description: "Stories and anecdotes competition at Amul Parlour, NIT Raipur.",
+  },
+  {
+    id: '#11',
+    title: "Virtual Escape Room",
+    date: "31th October",
+    description: "Immersive puzzle game in the form of a virtual escape room.",
+  },
+  {
+    id: '#12',
     title: "Hackathon Begins",
     date: "1st Nov, 8:00 AM",
     description: "Commencement of Codeutsava 7.0!",

src/components/speakerCard/SpeakerCard.js

@@ -1,7 +1,7 @@
 import React from "react";
 
 import "./SpeakerCard.css";
-import jackolantern from "../../assets/images/speakers/jack-o-lantern.svg";
+import jackolantern from "../../assets/images/pumpkin.svg";
 import bat from "../../assets/images/speakers/bat.svg";
 
 const SpeakerCard = ({

src/components/teamCard3/TeamCard3.js

@@ -2,7 +2,7 @@ import React from "react";
 import "./TeamCard3.css";
 import "../../../node_modules/font-awesome/css/font-awesome.min.css";
 import spider from "../../assets/images/spider.svg";
-import pumpkin from "../../assets/images/speakers/jack-o-lantern.svg";
+import pumpkin from "../../assets/images/pumpkin.svg";
 
 const TeamCard3 = ({ img, name, position, linkedin, email, domain }) => {
   return (

src/components/timeline/Timeline.css

@@ -0,0 +1,34 @@
+.vertical-timeline-element-content {
+  background-color: #b079c11d !important;  
+  backdrop-filter: blur(10px) !important;
+  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25),
+    0 0.4em 1.25em 0 rgba(0, 0, 0, 0.15) !important;
+  padding: 2em 3em !important;
+  color: white !important;
+}
+
+
+#description {
+  margin: 1.5em 0 2em 0;
+}
+
+.date{
+  font-size: 20px !important;
+  color: white !important;
+}
+
+.button {
+  text-decoration: none;
+  padding: 0.5em 1em;
+  border-radius: 5px;
+  color: white;
+}
+
+@media only screen and (max-width: 1700px) {
+  .vertical-timeline-element-date {
+    display: block !important;
+    float: none !important;
+    color: rgb(44, 44, 44);
+    margin-top: 1.5em;
+  }
+}

src/components/timeline/Timeline.js

@@ -0,0 +1,40 @@
+import hackathonData from "../../assets/data/hackathonData";
+import "./Timeline.css";
+import {
+  VerticalTimeline,
+  VerticalTimelineElement,
+} from "react-vertical-timeline-component";
+
+import "react-vertical-timeline-component/style.min.css";
+
+import { ReactComponent as Ghost } from "../../assets/images/pumpkin.svg";
+
+const Timeline = () => {
+  return (
+    <div>
+      <VerticalTimeline animate={true} lineColor="white">
+        {hackathonData.map((element) => {
+          return (
+            <VerticalTimelineElement
+              key={element.key}
+              date={element.date}
+              dateClassName="date"
+              icon={<Ghost />}
+              iconStyle={{backgroundColor: 'var(--secondary-c)'}}
+            >
+              <h3 className="vertical-timeline-element-title">
+                {element.id} {element.title}
+              </h3>
+              <h5 className="vertical-timeline-element-subtitle">
+                {element.location}
+              </h5>
+              <p id="description">{element.description}</p>
+            </VerticalTimelineElement>
+          );
+        })}
+      </VerticalTimeline>
+    </div>
+  );
+};
+
+export default Timeline;

src/components/winningTeamCard/WinningTeamCard.css

@@ -223,7 +223,7 @@
     padding: 1rem;
   }
 }
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 450px) {
   .codeutsava__section11-problemModal-body td,
   .codeutsava__section11-problemModal-body th, h1, h5 {
     font-size: 12px !important;

src/pages/home/sections/section5/Section5.css

@@ -1,12 +1,11 @@
 .codeutsava__section5 {
   padding-top: 2rem;
+  padding-bottom: 2rem;
   font-family: "Poppins";
 }
 
 .codeutsava__section5-body {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-direction: column;
   color: white;
 }

src/pages/home/sections/section5/Section5.js

@@ -2,6 +2,7 @@ import React from "react";
 import "./Section5.css";
 import hackathonData from "../../../../assets/data/hackathonData";
 import ghost from '../../../../assets/images/ghost.png'
+import Timeline from "../../../../components/timeline/Timeline";
 
 const Section5 = () => {
   return (
@@ -14,9 +15,9 @@ const Section5 = () => {
         <img src={ghost}></img>
         </div>
         <div className="codeutsava__section5-content">
-          Check out the schedule for the hackathon.
+          Check out the schedule for the event.
         </div>
-        <div className="codeutsava__section5-format-container">
+        {/* <div className="codeutsava__section5-format-container">
           <div className="codeutsava__section5-format-card format-card1">
             <p className="codeutsava__section5-format-card-date">
               {hackathonData[0].date}
@@ -114,7 +115,8 @@ const Section5 = () => {
               {hackathonData[5].description}
             </p>
           </div>
-        </div>
+        </div> */}
+        <Timeline/>
       </div>
     </div>
   );