Issue Resolution: Implement Events Section & Quality Changes

package.json

@@ -15,7 +15,8 @@
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "react-swipeable": "^7.0.1"
   },
   "devDependencies": {
     "eslint": "^8.57.1",

public/data/events.json

@@ -0,0 +1,22 @@
+[
+    {
+      "name": "Hacktober Fest - Bennett University",
+      "poster": "https://res.cloudinary.com/startup-grind/image/upload/c_scale,w_2560/c_crop,h_640,w_2560,y_0.1_mul_h_sub_0.1_mul_640/c_crop,h_640,w_2560/c_fill,dpr_2.0,f_auto,g_center,q_auto:good/v1/gcs/platform-data-goog/event_banners/story%20%281%29_gKjrKjJ.jpg",
+      "shortDesc": "We at GDG On Campus-Bennett University bring to you all Hacktober Fest!! Exclusively for beginners, to help you hop on to the contribution spree with GDG BU and step a foot into your OSS journey (Internal Event).",
+      "communityLink": "https://gdg.community.dev/events/details/google-gdg-on-campus-bennett-university-greater-noida-india-presents-hacktober-fest-bennett-university/"
+    },
+    {
+      "name": "Gen AI Study Jam - Info Session",
+      "poster": "https://res.cloudinary.com/startup-grind/image/upload/c_fill,w_500,h_500,g_center/c_fill,dpr_2.0,f_auto,g_center,q_auto:good/v1/gcs/platform-data-goog/events/WhatsApp%20Image%202024-09-27%20at%2003.02.09_msfU7tg.jpeg",
+      "shortDesc": "Hands-on workshop covering modern web development techniques and best practices.",
+      "communityLink": "https://gdg.community.dev/events/details/google-gdg-on-campus-bennett-university-greater-noida-india-presents-gen-ai-study-jam-info-session-build-with-ai/"
+    },
+    {
+      "name": "GDG BU Infosession [Previously GDSC BU]",
+      "poster": "https://res.cloudinary.com/startup-grind/image/upload/c_scale,w_2560/c_crop,h_640,w_2560,y_0.47_mul_h_sub_0.47_mul_640/c_crop,h_640,w_2560/c_fill,dpr_2.0,f_auto,g_center,q_auto:good/v1/gcs/platform-data-goog/event_banners/GDG-OC-Evergreen-horizontal-White_puqYfyI.png",
+      "shortDesc": "This is an info-session for freshers and on campus developers to let them know what GDG on campus BU is about.",
+      "communityLink": "https://gdg.community.dev/events/details/google-gdg-on-campus-bennett-university-greater-noida-india-presents-gdg-bu-infosession-previously-gdsc-bu/"
+    }
+
+  ]
+

src/app/globals.css

@@ -26,7 +26,15 @@ body {
   }
 }
 
-/* Loading screen styling */
+.no-scrollbar::-webkit-scrollbar {
+  display: none; 
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none; 
+  scrollbar-width: none; 
+}
+
 .loading-screen {
   position: fixed;
   inset: 0;
@@ -41,7 +49,6 @@ body {
   animation: spin 2s linear infinite;
 }
 
-/* Spinning animation */
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -72,13 +79,3 @@ body {
   display: inline-block;
   animation: dots 1.5s steps(3, end) infinite;
 }
-/* 
-module.exports = {
-  theme: {
-    extend: {
-      animation: {
-        'dots': 'dots 1.5s steps(3, end) infinite', // Animation for the dots
-      },
-    },
-  },
-}; */

src/app/layout.js

@@ -1,4 +1,4 @@
-"use client"; // Required for using React hooks on client-side
+"use client";
 
 import { useState, useEffect } from "react";
 import localFont from "next/font/local";
@@ -22,7 +22,7 @@ export default function RootLayout({ children }) {
 
   useEffect(() => {
     const timeout = setTimeout(() => setIsLoading(false), 3000); // Simulated loading delay
-    return () => clearTimeout(timeout); // Cleanup
+    return () => clearTimeout(timeout);
   }, []);
 
   return (
@@ -38,7 +38,6 @@ export default function RootLayout({ children }) {
   );
 }
 
-// Styles for loading screen and navigation
 const styles = {
   loadingScreen: {
     display: "flex",

src/app/page.js

@@ -1,15 +1,28 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Navbar from "@/components/Navbar";
-import Links from "../components/Links";
+import EventsSection from "@/components/EventsSection";
+import Links from "@/components/Links";
+
 export default function Home() {
-  // Function to scroll to the section
+  const [eventsData, setEventsData] = useState([]);
+
+  useEffect(() => {
+    const fetchEventsData = async () => {
+      const response = await fetch("/data/events.json");
+      const data = await response.json();
+      setEventsData(data);
+    };
+
+    fetchEventsData();
+  }, []);
+
   const scrollToSection = () => {
     const section = document.getElementById("more-section");
     if (section) {
       section.scrollIntoView({ behavior: "smooth" });
       setTimeout(() => {
-        // this method is used to move down the nav when clicked on button.
         window.scrollBy({
           top: -1,
           behavior: "smooth",
@@ -21,7 +34,7 @@ export default function Home() {
   return (
     <>
       <Navbar />
-      {/* First Section */}
+
       <div
         className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center"
         style={{
@@ -46,15 +59,14 @@ export default function Home() {
       {/* Second Section */}
       <div
         id="more-section"
-        className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-20 text-center"
+        className="flex flex-col items-center justify-center min-h-screen p-8 pb-20 gap-8 sm:p-50 text-center"
       >
-        <h2 className="text-3xl sm:text-4xl font-bold text-gray-800">
-          Welcome to the next section!
-        </h2>
-        <Links></Links>
-        <p className="text-lg sm:text-xl text-gray-600">
-          Here&apos;s more information about GDG-BU and what we do.
-        </p>
+        <EventsSection events={eventsData} />
+      </div>
+
+      {/* Links Section */}
+      <div className="bg-gray-900 py-12">
+        <Links />
       </div>
     </>
   );

src/components/EventCard.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const EventCard = ({ event }) => {
+  return (
+    <div className="bg-gray-900 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 border-b-4 border-[#32cd32]">
+      <img
+        src={event.poster}
+        alt={event.name}
+        className="w-full h-48 object-contain opacity-90 hover:opacity-100 transition-opacity"
+      />
+      <div className="p-4">
+        <h3 className="text-2xl font-bold text-white mb-2">{event.name}</h3>
+        <p className="text-gray-400 text-sm mb-4">{event.shortDesc}</p>
+        <a
+          href={event.communityLink}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="bg-gradient-to-r from-gray-700 to-gray-800 text-white py-2 px-4 rounded-full hover:bg-gray-900 transition-all"
+        >
+          Learn More
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default EventCard;

src/components/Events.jsx

@@ -0,0 +1,13 @@
+import EventCard from "./EventCard";
+
+const Events = ({ events }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {events.map((event, index) => (
+        <EventCard key={index} event={event} />
+      ))}
+    </div>
+  );
+};
+
+export default Events;

src/components/EventsSection.jsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from "react";
+import EventCard from "./EventCard";
+
+const EventsSection = ({ events }) => {
+  const [visibleEvents, setVisibleEvents] = useState(6);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const handleResize = () => {
+    if (window.innerWidth < 768) {
+      // Mobile breakpoint
+      setIsMobile(true);
+      setVisibleEvents(3);
+    } else {
+      setIsMobile(false);
+      setVisibleEvents(6);
+    }
+  };
+
+  useEffect(() => {
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const loadMoreEvents = () => {
+    setVisibleEvents((prevVisible) => prevVisible + (isMobile ? 3 : 6));
+  };
+
+  return (
+    <div className="bg-black py-12 w-full">
+      {" "}
+      <h2 className="text-4xl font-bold text-white text-center mb-12">
+        Events
+      </h2>
+      <div className="flex justify-center">
+        <div className="max-w-screen-xl w-full px-4">
+          {" "}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {events.slice(0, visibleEvents).map((event, index) => (
+              <EventCard key={index} event={event} />
+            ))}
+          </div>
+        </div>
+      </div>
+      {visibleEvents < events.length && (
+        <div className="flex justify-center mt-8">
+          <button
+            onClick={loadMoreEvents}
+            className="flex items-center gap-2 bg-gradient-to-r from-gray-700 to-gray-900 text-white py-3 px-6 rounded-full shadow-lg hover:shadow-2xl transition duration-300 transform hover:scale-105"
+          >
+            &#x2193; Load More Events
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EventsSection;

src/components/Links.jsx

@@ -19,14 +19,14 @@ const hyperlinks = [
   {
     name: "Junior Core Forms",
     href: "https://forms.gle/AGnZKZiE1SjMPLpw8",
-    icon: <TbListDetails className="w-8 h-8 text-violet-400"></TbListDetails>,
+    icon: <TbListDetails className="w-8 h-8 text-violet-400" />,
     bgcolor:
       "text-violet-400 border-2 border-violet-400 hover:bg-violet-400/15",
   },
   {
     name: "Whatsapp",
     href: "https://chat.whatsapp.com/Coiz2mWaHIQJs1c91jrYsB",
-    icon: <FaWhatsapp className="w-8 h-8 text-emerald-400"></FaWhatsapp>,
+    icon: <FaWhatsapp className="w-8 h-8 text-emerald-400" />,
     bgcolor:
       "text-emerald-400 border-2 border-emerald-400 hover:bg-emerald-400/15",
   },
@@ -40,46 +40,50 @@ const hyperlinks = [
     name: "Community.dev",
     href: "https://gdg.community.dev/gdg-on-campus-bennett-university-greater-noida-india/",
     icon: (
-      <p className="font-mono text-sky-400 font-bold w-8 h-8 text-3xl bg-transparent  flex justify-center items-center">
+      <p className="font-mono text-sky-400 font-bold w-8 h-8 text-3xl bg-transparent flex justify-center items-center">
         &lt;&gt;
       </p>
     ),
     bgcolor: "text-sky-400 border-2 border-sky-400 hover:bg-sky-400/15",
   },
 ];
+
 const Links = () => {
   return (
-    <div className="flex md:flex-row md:justify-around flex-col items-center p-4 gap-8">
-      {hyperlinks.map((link, index) => {
-        return (
+    <div className="flex flex-col items-center p-4 gap-8">
+      {/* Heading for Links Section */}
+      <h2 className="text-3xl font-bold text-white mb-4">Useful Links</h2>
+
+      <div className="flex md:flex-row md:justify-around flex-col items-center gap-8">
+        {hyperlinks.map((link, index) => (
           <Link
             key={index}
             name={link.name}
             href={link.href}
             icon={link.icon}
             bgcolor={link.bgcolor}
-          ></Link>
-        );
-      })}
+          />
+        ))}
+      </div>
     </div>
   );
 };
 
-export default Links;
-
 const Link = ({ name, href, icon, bgcolor }) => {
   return (
-    <a href={href} target="_blank">
+    <a href={href} target="_blank" rel="noopener noreferrer">
       <div
-        className={` ${bgcolor} bg-transparent hover:scale-110  transform translate duration-300 ease-in-out  w-80 justify-between md:w-fit min-h-fit py-4 flex md:justify-around gap-x-6 items-center px-5 py- rounded-2xl`}
+        className={`${bgcolor} bg-transparent hover:scale-110 transform translate duration-300 ease-in-out w-80 justify-between md:w-fit min-h-fit py-4 flex md:justify-around gap-x-6 items-center px-5 rounded-2xl`}
       >
         {icon}
         <p
-          className={` text-lg text-nowrap md:text-xl lg:text-2xl font-medium block md:hidden lg:block`}
+          className={`text-lg text-nowrap md:text-xl lg:text-2xl font-medium block md:hidden lg:block`}
         >
           {name}
         </p>
       </div>
     </a>
   );
 };
+
+export default Links;