Merge pull request #43 from IntelligentBeaver/sfd-2024

Added Sponsors Page

css/output.css

@@ -743,6 +743,16 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .-mt-3 {
   margin-top: -0.75rem;
 }
@@ -969,6 +979,18 @@ video {
   min-height: 100vh;
 }
 
+.min-h-20 {
+  min-height: 5rem;
+}
+
+.min-h-24 {
+  min-height: 6rem;
+}
+
+.min-h-36 {
+  min-height: 9rem;
+}
+
 .w-1 {
   width: 0.25rem;
 }
@@ -1021,10 +1043,6 @@ video {
   width: 2rem;
 }
 
-.w-80 {
-  width: 20rem;
-}
-
 .w-\[145px\] {
   width: 145px;
 }
@@ -1058,10 +1076,18 @@ video {
   min-width: 5rem;
 }
 
+.min-w-48 {
+  min-width: 12rem;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
 
+.max-w-64 {
+  max-width: 16rem;
+}
+
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1260,6 +1286,10 @@ video {
   border-radius: 0.375rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1437,6 +1467,11 @@ video {
   padding-right: 0.25rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1855,6 +1890,12 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .hover\:drop-shadow-2xl:hover {
   --tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1894,6 +1935,18 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .sm\:flex-row {
+    flex-direction: row;
+  }
+
+  .sm\:items-stretch {
+    align-items: stretch;
+  }
+
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

js/navbar.js

@@ -1,9 +1,6 @@
 const pathName = window.location.pathname;
 let splittedPath = pathName.split("/");
-const currentPage = splittedPath[splittedPath.length - 1].replace(
-    ".html",
-    "",
-);
+const currentPage = splittedPath[splittedPath.length - 1].replace(".html", "");
 
 const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] lg:bg-transparent lg:mb-4 items-center h-14 justify-between lg:px-[7.5%] xl:px-[10%] lg:mt-7 md:h-[4.75rem]">
     <a href="/"><img class="h-11 md:h-[4.75rem] lg:w-auto lg:hover:cursor-pointer" src="../assets/shared/nosk_sfd.svg"
@@ -25,11 +22,11 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
                 class="hidden lg:absolute *:text-black lg:group-hover/about:block lg:bg-white text-base z-10 list-none divide-y divide-gray-100 lg:rounded lg:shadow w-full lg:w-44 font-normal">
                 <ul class="py-1" aria-labelledby="dropdownLargeButton">
                     <li>
-                        <span onclick="${ currentPage == "" ? "scrollNav('about-sfd-section')" : "jumpToPage('about-sfd-section')"}" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">About
+                        <span onclick="${currentPage == "" ? "scrollNav('about-sfd-section')" : "jumpToPage('about-sfd-section')"}" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">About
                             SFD</span>
                     </li>
                     <li>
-                        <span onclick="${ currentPage == "" ? "scrollNav('about-nosk-section')" : "jumpToPage('about-nosk-section')"}"
+                        <span onclick="${currentPage == "" ? "scrollNav('about-nosk-section')" : "jumpToPage('about-nosk-section')"}"
                             class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2 hover:cursor-pointer">About NOSK</span>
                     </li>
                     <li>
@@ -39,7 +36,8 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
                         <a href="#" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Speakers</a>
                     </li>
                     <li>
-                        <span onclick="${ currentPage == "" ? "scrollNav('sponsors-section')" : "jumpToPage('sponsors-section')"}" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</span>
+                        <a href="/pages/sponsors.html" class="lg:text-sm hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</a>
+                    <!-- <span onclick="${currentPage == "" ? "scrollNav('sponsors-section')" : "jumpToPage('sponsors-section')"}" class="lg:text-sm hover:cursor-pointer hover:bg-gray-100 block px-8 lg:px-4 py-2">Sponsors</span> -->
                     </li>
                 </ul>
             </div>
@@ -88,17 +86,17 @@ const navCode = `<nav class="flex z-50 flex-row w-full p-8 lg:p-0 bg-[#f6f6ff] l
 </nav>
 `;
 
-const scrollNav = (id)=>{
-    document.getElementById(id).scrollIntoView({
-        behavior: "smooth",
-        block: "start"
-    });
-}
+const scrollNav = (id) => {
+  document.getElementById(id).scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+};
 
-const jumpToPage = (id)=>{
-    let origin = document.location.origin 
-    document.location.replace( origin + `#${id}`)
-}
+const jumpToPage = (id) => {
+  let origin = document.location.origin;
+  document.location.replace(origin + `#${id}`);
+};
 
 document.addEventListener("DOMContentLoaded", () => {
   //To Insert the Navbar in the page
@@ -138,8 +136,11 @@ document.addEventListener("DOMContentLoaded", () => {
   //For NavItem highlighting
   const navChildren = document.querySelector("#nav-list").children;
   for (navChild of navChildren) {
-    if(currentPage == "") return
-      if (currentPage.includes(navChild.id) || navChild.id.includes(currentPage)) {
+    if (currentPage == "") return;
+    if (
+      currentPage.includes(navChild.id) ||
+      navChild.id.includes(currentPage)
+    ) {
       navChild.style = "color: #E4554E";
     }
   }

js/partners.js

@@ -0,0 +1,133 @@
+const sponsorsData = [
+  {
+    title: "Gold Sponsor",
+    name: "Nepal College of Information Technology",
+    image: "/assets/sponsors/NCIT.jpg",
+    link: "https://ncit.edu.np/",
+  },
+
+  {
+    title: "Silver Sponsor",
+    name: "rEngine",
+    image: "/assets/sponsors/rengine.png",
+    link: "https://rengine.wiki/",
+  },
+  {
+    title: "Bronze Sponsor",
+    name: "Leapfrog",
+    image: "/assets/sponsors/LeapFrog1.png",
+    link: "https://www.lftechnology.com/",
+  },
+  {
+    title: "Supporting Partner",
+    name: "Mero Job (Career Partner)",
+    image: "/assets/sponsors/Mero Job.jpg",
+    link: "https://merojob.com/",
+  },
+  {
+    title: "Supporting Partner",
+    name: "Libre Office",
+    image: "/assets/sponsors/LibreOffice.png",
+    link: "https://www.libreoffice.org/",
+  },
+  {
+    title: "Supporting Partner",
+    name: "GitHub Campus Expert",
+    image: "/assets/sponsors/Red Flag.png",
+    link: "https://githubcampus.expert/",
+  },
+  {
+    title: "Co-Organizing Partner",
+    name: "Birendra Open Source Club",
+    image: "/assets/sponsors/Birendra Open Source Club.jpg",
+    link: "https://www.facebook.com/birendraopensourceclub/",
+  },
+  {
+    title: "Co-Organizing Partner",
+    name: "Innovative Computer Engineering Club",
+    image: "/assets/sponsors/ICEC.jpg",
+    link: "https://ices.edu.np/",
+  },
+  {
+    title: "Co-Organizing Partner",
+    name: "Trichandra Research Group",
+    image: "/assets/sponsors/TriChandra Research Group.jpg",
+    link: "https://www.facebook.com/TriChandraResearchGroup/",
+  },
+  {
+    title: "Other Partner",
+    name: "Rotaract Club of Balaju",
+    image: "/assets/sponsors/Rotaract Club Of Balaju.png",
+    link: "https://www.instagram.com/rotaractbalajuofficial/",
+  },
+  {
+    title: "Other Partner",
+    name: "Rotaract Club of Dillibazar-Kathmandu",
+    image: "/assets/sponsors/Logo_Club_And_Serving_Mankind.png",
+    link: "https://www.instagram.com/rotaractdillibazar_ktm/",
+  },
+  {
+    title: "Other Partner",
+    name: "Rotaract Club of Gyaneshwor, CiST",
+    image: "/assets/sponsors/RAC_Gyaneswor_CiST, Logo.png",
+    link: "https://www.instagram.com/racgyanesworcist/",
+  },
+  {
+    title: "Other Partner",
+    name: "Rotaract Club of Patan West",
+    image: "/assets/sponsors/patan_west-1.png",
+    link: "https://www.instagram.com/rotaractclubofpatanwest/",
+  },
+
+  {
+    title: "Volunteering Partner",
+    name: "Nepal Tek Community",
+    image: "/assets/sponsors/NTC logo.png",
+    link: "https://tekcommunity.ncit.edu.np/",
+  },
+];
+
+const sponsorContainer = document.getElementById("sponsor-container");
+
+// Create a map to track unique titles
+const titlesMap = {};
+
+sponsorsData.forEach((sponsor) => {
+  const { title, name, image, link } = sponsor;
+
+  // create a new section if the title doesn't exist in the titlesMap
+  if (!titlesMap[title]) {
+    titlesMap[title] = document.createElement("div");
+    titlesMap[title].classList.add("sponsor-section", "my-8");
+    titlesMap[title].innerHTML = `
+        <div class="sponsor-title text-center">
+          <h1 class="text-4xl font-bold">${title}</h1>
+        </div>
+        <div class="flex flex-col items-center py-6 justify-center flex-wrap sm:flex-row sm:items-stretch sm:justify-center gap-6"></div>
+      `;
+    sponsorContainer.appendChild(titlesMap[title]);
+  }
+
+  // Get the card container for this title
+  const cardContainer = titlesMap[title].querySelector(".flex");
+
+  // Create sponsor card HTML
+  const card = document.createElement("div");
+  card.className =
+    "sponsor-card flex max-w-64 flex-col justify-between gap-3 rounded-3xl bg-white p-4 rounded-xl hover:shadow-xl";
+  card.innerHTML = `
+      <div class="sponsor-image max-w-full max-h-full min-h-36 my-auto flex items-center justify-center">
+        <a href="${link}">
+          <img
+            src="${image}"
+            alt="${name}"
+            class="max-w-full max-h-full  min-w-48 object-cover"
+          />
+        </a>
+      </div>
+      <div class="sponsor-detail">
+        <p class="text-center">${name}</p>
+      </div>`;
+  // Append the card to the section
+  cardContainer.appendChild(card);
+});