Updated partners and sponsors

package.json

@@ -21,6 +21,7 @@
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.23.1",
+    "react-router-hash-link": "^2.4.3",
     "react-slick": "^0.30.2",
     "slick-carousel": "^1.8.1"
   },

src/App.jsx

@@ -5,6 +5,7 @@ import About from "./components/About/About";
 import Reasons from "./components/Reason/Reasons";
 import Sponsors from "./components/Sponsors/Sponsors";
 import Speakers from "./components/Speakers/Speakers";
+import MediaPartners from "./components/MediaPartners/MediaPartners";
 import Partners from "./components/Partners/Partners";
 import Newsletter from "./components/Newsletter/Newsletter";
 import Agenda from "./components/Agenda/Agenda";
@@ -27,6 +28,7 @@ const App = () => {
               <Reasons />
               <Sponsors />
               <Speakers />
+              <MediaPartners />
               <Partners />
               <Newsletter />
             </>

src/components/Agenda/Agenda.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import "./Agenda.css";
 import Navbar from "../Navbar/Navbar";
 import Newsletter from "../Newsletter/Newsletter";
@@ -7,6 +7,10 @@ import Countdown from "../Countdown/Countdown";
 const Agenda = () => {
   const [selectedDay, setSelectedDay] = useState("day1");
 
+  useEffect(() => {
+    document.title = "W3GC | Agenda";
+  }, []);
+
   const handleDayClick = (day) => {
     setSelectedDay(day);
   };

src/components/Countdown/Countdown.css

@@ -42,6 +42,10 @@
   margin-right: 8px; /* Adds some space between the icon and text */
 }
 
+.expired-message {
+  font-size: 1.5rem;
+}
+
 @media (max-width: 768px) {
   .follow-us {
     padding-left: 20px;

src/components/Countdown/Countdown.jsx

@@ -21,7 +21,7 @@ const Countdown = ({ venue }) => {
         seconds: Math.floor((difference / 1000) % 60),
       };
     } else {
-      timeLeft = { days: 0, hours: 0, minutes: 0, seconds: 0 };
+      timeLeft = null;
     }
 
     return timeLeft;
@@ -38,12 +38,16 @@ const Countdown = ({ venue }) => {
     return () => clearInterval(timer);
   }, [targetDate]);
 
-  return (
-    <div className="countdown-section">
-      <p className="location-text">
-        <i className="fas fa-map-marker-alt"></i> The Zone, Gbagada, Lagos
-        State.
-      </p>
+  const renderCountdown = () => {
+    if (!timeLeft) {
+      return (
+        <p className="expired-message">
+          The event is today! Don't miss out🎉🎉
+        </p>
+      );
+    }
+
+    return (
       <div className="box-content">
         <div className="time-unit">
           <div className="time-value">{timeLeft.days}</div>
@@ -62,6 +66,16 @@ const Countdown = ({ venue }) => {
           <div className="time-label">Secs</div>
         </div>
       </div>
+    );
+  };
+
+  return (
+    <div className="countdown-section">
+      <p className="location-text">
+        <i className="fas fa-map-marker-alt"></i> The Zone, Gbagada, Lagos
+        State.
+      </p>
+      {renderCountdown()}
     </div>
   );
 };

src/components/MediaPartners/MediaPartners.css

@@ -0,0 +1,41 @@
+.media-partners-section {
+  padding: 40px 20px;
+  text-align: center;
+  background-color: rgb(131, 76, 232);
+}
+
+.media-partners-section h2 {
+  margin-bottom: 20px;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+}
+
+.media-partner-logo {
+  padding: 10px;
+}
+
+.media-partner-logo img {
+  max-width: 100%;
+  max-height: 120px;
+  display: block;
+  margin: 0 auto;
+}
+
+.media-partner-button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  font-size: 20px;
+  color: #854eeb;
+  background-color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color color 0.3s;
+}
+
+.media-partner-button:hover {
+  background-color: #854eeb;
+  color: #fff;
+  opacity: 0.75;
+}

src/components/MediaPartners/MediaPartners.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "./MediaPartners.css";
+
+const media_partners = [
+  { id: 1, logo: "/img/tech_next.png", name: "TechNext" },
+];
+
+const MediaPartners = () => {
+  const settings = {
+    dots: false,
+    infinite: media_partners.length > 1,
+    speed: 500,
+    slidesToShow: media_partners.length,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 2000,
+    responsive: [
+      {
+        breakpoint: 1024,
+        settings: {
+          slidesToShow: Math.min(media_partners.length, 1),
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 600,
+        settings: {
+          slidesToShow: Math.min(media_partners.length, 1),
+          slidesToScroll: 1,
+        },
+      },
+      {
+        breakpoint: 480,
+        settings: {
+          slidesToShow: 1,
+          slidesToScroll: 1,
+        },
+      },
+    ],
+  };
+
+  const handleButtonClick = () => {
+    window.location.href = "#";
+  };
+
+  return (
+    <div className="media-partners-section">
+      <h2>Media Partner</h2>
+      <Slider {...settings}>
+        {media_partners.map((media_partner) => (
+          <div key={media_partner.id} className="media-partner-logo">
+            <img src={media_partner.logo} alt={media_partner.name} />
+          </div>
+        ))}
+      </Slider>
+      {/* <button className="media-partner-button" onClick={handleButtonClick}>
+        Become a Partner
+      </button> */}
+    </div>
+  );
+};
+
+export default MediaPartners;