Merge pull request #26 from ms-club-sliit/development

Development

app/_components/Home/CountdownTimer/index.jsx

@@ -1,14 +1,19 @@
-import Timer from './timer'
+// import Timer from './timer'
+import dynamic from 'next/dynamic';
+const Timer = dynamic(() => import("./timer"), {
+    ssr: false,
+});
 export default function CountdownTimer() {
     return (
         <>
-            <div className="countdownTimer">
+            <div className="bg-sponsors-bg bg-cover bg-center overflow-hidden ">
                 <div className="row text-center">
                     <h2 className="text-2xl md:text-4xl text-neutral-500">Awareness Session</h2>
                     <h2 className="text-3xl md:text-5xl font-bold mt-2">Coming Soon!</h2>
                 </div>
-                <div className="row mt-3"><Timer /></div>
+                <div className="row mt-3 w-full h-auto"><Timer /></div>
             </div>
         </>
     );
 }
+

app/_components/Home/Sponsor/index.jsx

@@ -1,9 +1,34 @@
-// TODO: Create a Sponsor component.
-export default function Sponsor() {
-    return (
-      <main>
-        <h1 id="sponsor" className="text-6xl font-bold">Sponsor</h1>
-      </main>
-    );
+import Image from "next/image";
+import sponsor from "@/data/home/sponsors.json";
+// Use transparent sponsor logos for best effect
+const Sponsors = () => {
+  if (!sponsor) {
+    return null; 
   }
-
+  return (
+    <div className="text-center py-8">
+      {Object.keys(sponsor).map((index) => (
+        <div key={index}>
+          <h2 className="text-6xl font-bold">{index}</h2>
+          <div className="flex flex-row justify-center py-8 bg-sponsors-bg bg-cover bg-center overflow-hidden">
+            {sponsor[index] && sponsor[index].length > 0 && (
+              sponsor[index].map((Sponsor) => (
+                <div key={index} className="items-center mx-4">
+                  <Image
+                    className="rounded-xl"
+                    src={Sponsor.src||'/images/home/sponsors/default.webp'}
+                    alt={Sponsor.alt||'Image Not Found'}
+                    width={Sponsor.width|| 300}
+                    height={Sponsor.height|| 300}
+                  />
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Sponsors;

app/_components/Home/Timeline/index.jsx

@@ -1,9 +1,54 @@
-// TODO: Create a Timeline component.
+"use client"
+import { useEffect } from 'react'
+import TimelineData from '@/app/data/Timeline'
+import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
+import 'react-vertical-timeline-component/style.min.css';
+import AOS from "aos";
+import "aos/dist/aos.css";
+
 export default function Timeline() {
-    return (
-      <main>
-        <h1 id="timeline" className="text-6xl font-bold">Timeline</h1>
-      </main>
-    );
-  }
-
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
+  return (
+    <main className="relative custom-gradient mb-20">
+      <h1 id="timeline" className="text-2xl font-bold text-center mt-20 text-[#1E293B] min-[744px]:text-[38px] min-[1440px]:text-5xl md:ml-10">Timeline</h1>
+      <div className="p-5 md:p-0">
+        <img src="images/robot-top.png" alt="robot-top" className="h-[97px] min-[744px]:ml-12 lg:mx-auto lg:pl-10 min-[744px]:h-[171px] min-[744px]:w-[241px] min-[1440px]:h-[258px] min-[1440px]:w-[270px]" />
+        <img src="images/design-left.png" alt="design-left" className="absolute opacity-[10%] left-0 top-1/4 h-[220px] w-[350px] min-[744px]:h-[486px] min-[744px]:w-[225px] min-[1440px]:h-[660px] min-[1440px]:w-[1078px] min-[1440px]:top-3/4" />
+        <img src="images/design-right.png" alt="design-right" className="absolute opacity-[10%] right-0 top-1/3 h-[220px] w-[350px] min-[744px]:h-[486px] min-[744px]:w-[225px] min-[1440px]:h-[660px] min-[1440px]:w-[1078px] min-[1440px]:top-[60%]" />
+        {TimelineData.length > 0 ? (
+          <VerticalTimeline animate={true} className="custom">
+            {
+              TimelineData.map((timeline, index) => (
+                <div key={index} data-aos={timeline.position == "left" ? "fade-left" : "fade-right"}>
+                  <VerticalTimelineElement
+                    position={timeline.position}
+                    visible={true}
+                    className="vertical-timeline-element--work z-10 custom-sm-card"
+                    contentStyle={{ boxShadow: '0px 2px 9px #807E7E', borderRadius: '15px', marginBottom: '18px'}}
+                    contentArrowStyle={{ borderRight: '10px solid  #0080FF', }}
+                    iconClassName="custom-icon bg-[#0080FF] border-solid border-[10px] lg:border-[15px] border-[#434040]"
+                  >
+                    <div className="">
+                      <h3 className="text-[10px] text-[#0080FF] font-semibold xl:mb-2 min-[744px]:text-[13px] min-[1440px]:text-[20px]">{timeline.date}</h3>
+                      <h4 className="text-[14px] text-[#161414] font-bold xl:leading-8 xl:mb-4 min-[744px]:text-[20px] min-[1440px]:text-[36px]">{timeline.title}</h4>
+                      <h5 className="text-[10px] text-[#334155] font-semibold text-justify min-[744px]:text-[13px] min-[1440px]:text-[20px]">
+                        {timeline.description}
+                      </h5>
+                    </div>
+                  </VerticalTimelineElement>
+                </div>
+              ))
+            }
+          </VerticalTimeline>
+        ):(
+          <h1 className="text-2xl text-center my-10 font-light md:ml-14">No Timeline found</h1>
+        )}
+        <img src="images/robot-end.png" alt="robot-end" className="h-[98px] -mt-10 min-[744px]:left-24 absolute min-[1170px]:left-48 lg:top-[48%] min-[744px]:h-[120px] min-[744px]:w-[120px] min-[1440px]:h-[210px] min-[1440px]:w-[218px]" />
+        <img src="images/robot-right.png" alt="robot-right" className="h-[113px] w-[141px] ml-auto mr-10 -mt-10 lg:-mt-52 lg:mr-20 min-[744px]:h-[171px] min-[744px]:w-[241px] min-[1440px]:h-[258px] min-[1440px]:w-[300px]" />
+      </div>
+    </main>
+  );
+}

app/data/Timeline.json

@@ -0,0 +1,44 @@
+[
+    {
+        "index": 1,
+        "date": "10th of August - 10.00 AM",
+        "title": "Registration Open for Awareness Session",
+        "position": "right",
+        "description": "Being aware of the competition will help you create a remarkable project adhering to the rules and guidelines of the competition. The best way to do so is by attending the awareness session. Now you can get registered for the awareness session."
+    },
+    {
+        "index": 2,
+        "date": "12th of August - 10.00 AM",
+        "title": "Awareness Session",
+        "position": "left",
+        "description": "Team registration closes on this day. Please note that NO registration is accepted after the registrations are closed. Be sure to get registered before the deadline ends."
+    },
+    {
+        "index": 3,
+        "date": "30th of July - 10.00 AM",
+        "title": "Team Registration Open",
+        "position": "right",
+        "description": "Registrations for round one start. Get your team registered on time by submitting an entry. Make sure that your team consist of 3 to 4 members. Keep in mind that a good team will help you win championships."
+    },
+    {
+        "index": 4,
+        "date": "12th of August - 10.00 AM",
+        "title": "Registration Closes",
+        "position": "left",
+        "description": "Team registration closes on this day. Please note that NO registration is accepted after the registrations are closed. Be sure to get registered before the deadline ends."
+    },
+    {
+        "index": 5,
+        "date": "21st of August - 10.00 AM",
+        "title": "Round 2 - Live Presentation",
+        "position": "right",
+        "description": "Team registration closes on this day. Please note that NO registration is accepted after the registrations are closed. Be sure to get registered before the deadline ends."
+    },
+    {
+        "index": 6,
+        "date": "25th of August - 10.00 AM",
+        "title": "Final Round",
+        "position": "left",
+        "description": "All teams advancing to round 3 are invited to the physical event at the Sri Lanka Institute of Information Technology Campus, Malabe, to present the project in front of an expert panel. Winners will be selected accordingly."
+    }
+]

app/data/home/sponsors.json

@@ -0,0 +1,29 @@
+{
+  "Gold Sponsors": [
+    {
+      "id": 1,
+      "src": "/images/home/sponsors/1.png",
+      "alt": "Gold Sponsor 1",
+      "width": 300,
+      "height": 200
+    }
+  ],
+  "Silver Sponsors": [
+    {
+      "id": 2,
+      "src": "/images/home/sponsors/1.png",
+      "alt": "Silver Sponsor 1",
+      "width": 300,
+      "height": 200
+    }
+  ],
+  "Bronze Sponsors": [
+    {
+      "id": 3,
+      "src": "/images/home/sponsors/1.png",
+      "alt": "Platinum Sponsor 1",
+      "width": 300,
+      "height": 200
+    }
+  ]
+}

app/globals.css

@@ -11,4 +11,52 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-}
+}
+
+/* Styles for the Vertical Timeline */
+
+@media (min-width: 744px) and (max-width: 1170px) {
+    .vertical-timeline.custom {
+        width: 70%;
+    }
+}
+
+.vertical-timeline::before {
+    width: 1px;
+    border: 15px solid;
+    border-color: #E2E2E2;
+    padding: 5px;
+    background: var(--line-color);
+    border-radius: 50px 50px 50px 50px;
+}
+
+.vertical-timeline-element-icon {
+    margin-left: 20px;
+}
+
+@media only screen and (min-width: 1170px) {
+    .vertical-timeline--two-columns .vertical-timeline-element-icon.custom-icon {
+        margin-left: -15px;
+    }
+}
+
+@media only screen and (max-width: 1170px) {
+    .vertical-timeline-element-content {
+        margin-left: 80px !important;
+    }
+}
+
+@media (min-width: 744px) and (max-width: 1170px) {
+    .vertical-timeline-element-content {
+        width: 374px !important;
+    }
+}
+
+.custom-gradient {
+    background: linear-gradient(175deg,
+            rgba(255, 255, 255, 0.12) -0.23%,
+            rgba(0, 128, 255, 0.14) 48.5%,
+            rgba(255, 255, 255, 0.02) 97.24%);
+}
+
+/* End Of Styles for the Vertical Timeline */

app/page.jsx

@@ -3,7 +3,7 @@ import Eligibility from "./_components/Home/Eligibility";
 import Gallery from "./_components/Home/Gallery";
 import Hero from "./_components/Home/Hero";
 import PastWinners from "./_components/Home/PastWinners";
-import Sponsor from "./_components/Home/Sponsor";
+import Sponsor from "@/components/Home/Sponsors/sponsors";
 import Timeline from "./_components/Home/Timeline";
 
 export default function Home() {

components/Footer/index.jsx

@@ -1,9 +1,80 @@
-// TODO: Create a footer component that displays the footer of the website.
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+
+const socialMedia = [
+  { src: "/images/logos/Facebook.png", alt: "Facebook", link: "/" },
+  { src: "/images/logos/Instagram.png", alt: "Instagram", link: "/" },
+  { src: "/images/logos/Twitter.png", alt: "Twitter", link: "/" },
+  { src: "/images/logos/GitHub.png", alt: "GitHub", link: "/" },
+];
+
+const MSLogs = [
+  {
+    src: "/images/logos/MSLogo.png",
+    alt: "MS Club Of SLIIT",
+    link: "https://msclubsliit.org",
+    width: 120,
+    height: 120,
+  },
+  {
+    src: "/images/logos/FCSCLogo.png",
+    alt: "FCSC LOGO",
+    link: "https://msclubsliit.org",
+    width: 120,
+    height: 120,
+  },
+  {
+    src: "/images/logos/MLSALogo.png",
+    alt: "MLSA Logo",
+    link: "https://studentambassadors.microsoft.com",
+    width: 50,
+    height: 50,
+  },
+];
+
 export default function Footer() {
   return (
-    // ! Change as needed.
-    <main>
-      <h1 className="text-6xl font-bold">Footer</h1>
-    </main>
-  );
-}
+    <footer className="bg-white py-8 shadow-md">
+      <hr className="my-6 border-gray-300" />
+      <div className="container mx-auto px-4 flex flex-col lg:flex-row sm:gap-5 justify-between items-center">
+        {/* MS Logos */}
+        <div className="flex items-center space-x-4 sm:space-x-6 mb-4 sm:mb-0">
+          {MSLogs.map((logo, index) => (
+            <Link href={logo.link} key={index}>
+              <Image
+                src={logo.src}
+                alt={logo.alt}
+                width={logo.width}
+                height={logo.height}
+                className="cursor-pointer"
+              />
+            </Link>
+          ))}
+        </div>
+        {/* Copyright text */}
+        <div className="text-center text-sm text-gray-700 mb-4 sm:mb-0">
+          Copyright &copy; 2024&nbsp;
+          <a href="https://msclubsliit.org" className="hover:underline">
+            MS Club of SLIIT
+          </a>
+          . All Rights Reserved.
+        </div>
+        {/* Social Media Icons */}
+        <div className="flex items-center space-x-4">
+          {socialMedia.map((social, index) => (
+            <Link href={social.link} key={index}>
+              <Image
+                src={social.src}
+                alt={social.alt}
+                width={100}
+                height={100}
+                className="cursor-pointer w-6 h-6 sm:w-8 sm:h-8"
+              />
+            </Link>
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}

components/Home/Sponsors/sponsors.jsx

@@ -0,0 +1,35 @@
+import Image from "next/image";
+import sponsor from "@/app/data/home/sponsors.json";
+
+// Use transparent sponsor logos for best effect
+const Sponsors = () => {
+  if (!sponsor) {
+    return null; 
+  }
+  return (
+    <div className="text-center py-8">
+      {Object.keys(sponsor).map((index) => (
+        <div key={index}>
+          <h2 className="text-6xl font-bold">{index}</h2>
+          <div className="flex flex-row justify-center py-8 bg-sponsors-bg bg-cover bg-center overflow-hidden">
+            {sponsor[index] && sponsor[index].length > 0 && (
+              sponsor[index].map((Sponsor) => (
+                <div key={index} className="items-center mx-4">
+                  <Image
+                    className="rounded-xl"
+                    src={Sponsor.src||'/images/home/sponsors/default.webp'}
+                    alt={Sponsor.alt||'Image Not Found'}
+                    width={Sponsor.width|| 300}
+                    height={Sponsor.height|| 300}
+                  />
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Sponsors;