feat: add our journey section (#20)

* npm:audit fix

* add our mission section

* fix: eslint issues

* fix: duplicate class value

* testing journey component

* fix : increase height , add hover elements

* fix : our mission section on large/tablet screens

* lint

src/App.jsx

@@ -3,6 +3,7 @@ import Navbar from './Components/Navbar.jsx'
 import Content from './Components/Content.jsx'
 import { HelmetProvider } from 'react-helmet-async'
 import OurMission from './Components/OurMission.jsx'
+import OurJourney from './Components/OurJourney.jsx'
 
 function App() {
   return (
@@ -11,6 +12,7 @@ function App() {
         <Navbar />
         <Content />
         <OurMission />
+        <OurJourney />
         <LandingPage />
       </HelmetProvider>
     </>

src/Components/OurJourney.jsx

@@ -0,0 +1,77 @@
+import Timeline from './Timeline'
+import ProposalLogo from '../assets/journey/proposal.svg'
+import StarLogo from '../assets/journey/star.svg'
+import CheckLogo from '../assets/journey/check.svg'
+import RocketLogo from '../assets/journey/rocket.svg'
+
+const OurJourney = () => {
+  const timelineData = [
+    {
+      img: ProposalLogo,
+      desc: 'CYSCOM is proposed for approval.',
+      label: 'January 10th, 2022',
+    },
+    {
+      img: CheckLogo,
+      desc: 'The Cyscom Student Community (CYSCOM) is officially formed.',
+      label: 'January 15th, 2022',
+    },
+    {
+      img: RocketLogo,
+      desc: 'CYSCOM kicks into action.',
+      label: 'February 1st, 2022',
+    },
+    {
+      img: StarLogo,
+      desc: 'CYSCOM VIT hosts Cyber Defender, a 2 day technical and fun event for all Cyber enthusiasts, with a workshop and a CTF event.',
+      label: 'April 19th-20th, 2022',
+    },
+  ]
+
+  return (
+    <div className="relative bg-gradient-to-t from-[#064BAF] via-[#064BAF] to-[#508BE0E8] w-full pt-28 pb-44">
+      <div className="flex flex-row-reverse lg:flex-col-reverse max-w-7xl mx-auto w-full md:justify-center min-h-[35rem]">
+        <div className="w-full md:hidden px-36">
+          <Timeline timelineData={timelineData} />
+        </div>
+
+        <div className="hidden w-full justify-center md:flex">
+          <div className="flex flex-col h-fit w-full max-w-72 mt-10 mx-10 space-y-20 relative">
+            <div className="h-3/4 border-l-[7px] border-dashed border-[#88B7FD] absolute top-24"></div>
+
+            {timelineData.map((item, index) => (
+              <div key={index} className="flex">
+                <div className="absolute rounded-full size-8 bg-[#88B7FD] -translate-x-3.5 translate-y-3.5"></div>
+                <div className="flex justify-start bg-white rounded-lg p-2 mx-4 w-full translate-x-4 hover:scale-105 transition-all duration-300 select-none cursor-pointer">
+                  <img
+                    className="mr-2"
+                    src={item.img}
+                    alt={`timeline_logo_${index}`}
+                  />
+                  <div className="flex flex-col">
+                    <h1 className="font-bold">{item.label}</h1>
+                    <span className="text-xs">{item.desc}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col max-w-7xl mx-auto absolute lg:top-0 top-28 lg:relative w-full md:w-fit md:items-center px-5">
+          <h1 className="font-bold text-7xl text-[#BCD7FF]">Our</h1>
+          <h1 className="text-7xl font-bold text-white">Journey</h1>
+          <p className="w-1/2 md:w-full mt-4 text-sm text-[#88B7FD]">
+            The Cybersearity Student Community (CYSCOM) was formed in 2022 and
+            ever Since it has had one aim only. spreading awareness about cyber
+            security and malware as welt as ransomware threats in society and
+            circles of students and teaching them how to deploy counter measures
+            through various events and undertakings.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OurJourney

src/Components/OurMission.jsx

@@ -29,7 +29,7 @@ const OurMission = () => {
   ]
 
   return (
-    <div className="flex sm:flex-col-reverse md:flex-row justify-between gap-2 max-w-7xl mx-auto mt-8 mb-14 px-4">
+    <div className="flex md:flex-col-reverse lg:flex-row justify-between gap-2 max-w-7xl mx-auto mt-8 mb-14 px-4">
       <div className="grid sm:grid-cols-1 grid-cols-2 gap-6 sm:mx-10">
         {missions.map((v, i) => (
           <HoverCard key={i} dropped={i % 2 !== 0}>
@@ -46,10 +46,10 @@ const OurMission = () => {
         ))}
       </div>
 
-      <div className="flex flex-col sm:items-center items-end">
+      <div className="flex flex-col md:items-center items-end">
         <h1 className="font-bold text-7xl">Our</h1>
         <h1 className="text-7xl font-bold text-[#6C6C6C]">Mission</h1>
-        <p className="w-80 sm:text-center text-end">
+        <p className="w-80 md:text-center text-end">
           The Cybersecurity Student Community (CYSCOM). VITCC aims to spread
           awareness about cybersecurity.
         </p>

src/Components/Timeline.jsx

@@ -0,0 +1,61 @@
+const Timeline = ({ timelineData }) => {
+  const getPosition = (index) => {
+    const positions = [
+      { x: '1.3%', y: '106%' },
+      { x: '50.1%', y: '92.6%' },
+      { x: '52.3%', y: '3.5%' },
+      { x: '98.5%', y: '32.2%' },
+    ]
+
+    return {
+      left: positions[index].x,
+      top: positions[index].y,
+      transform: 'translate(-50%, -50%)',
+    }
+  }
+
+  return (
+    <div className="relative w-full max-w-full mx-auto p-6 mt-20 lg:mt-32">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 1174 481"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-full h-auto"
+      >
+        <path
+          d="M11 467C11 467 99.1371 357.64 214.99 342.16C330.844 326.679 478.293 376.617 534.834 384.107C591.375 391.598 638.963 396.951 708.337 211.327C777.71 25.7026 774.63 -20.445 1159 13.0806"
+          stroke="#88B7FD"
+          strokeWidth="6"
+          strokeDasharray="10 10"
+        />
+
+        <circle cx="15.5" cy="465.5" r="15.5" fill="#88B7FD" />
+        <circle cx="588.5" cy="383.5" r="15.5" fill="#88B7FD" />
+        <circle cx="778.5" cy="55.5" r="15.5" fill="#88B7FD" />
+        <circle cx="1158.5" cy="15.5" r="15.5" fill="#88B7FD" />
+      </svg>
+
+      <div className="absolute top-0 left-0 w-full h-full">
+        {timelineData.map((item, index) => (
+          <div
+            key={index}
+            className="absolute w-full max-w-64 lg:max-w-60 z-20"
+            style={getPosition(index)}
+          >
+            <div className="flex items-center bg-white rounded-lg space-x-2 p-1.5 cursor-pointer hover:scale-105 select-none transition-all duration-300">
+              <img src={item.img} alt="logo" />
+              <div className="flex flex-col">
+                <h1 className="font-bold text-sm lg:text-xs">{item.label}</h1>
+                <span className="text-xs lg:text-[9px]">{item.desc}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Timeline