added 'Our Sponsors' section

apps/web-punjab/components/ourSponsors.js

@@ -0,0 +1,15 @@
+import "../style.css";
+
+document.querySelector('#our-sponsors').innerHTML =`
+<div class="sponsors-container">
+  <h2 class="third-color">Our Sponsors</h2>
+  <div class="sponsor-list">
+    <img src="/images/sponsor1.png" alt="Sponsor 1">
+    <img src="/images/sponsor2.png" alt="Sponsor 2">
+    <img src="/images/sponsor3.png" alt="Sponsor 3">
+    <img src="/images/sponsor4.png" alt="Sponsor 4">
+    <img src="/images/sponsor1.png" alt="Sponsor 1">
+    <img src="/images/sponsor2.png" alt="Sponsor 2">
+  </div>
+</div>
+` ;

apps/web-punjab/index.html

@@ -17,6 +17,7 @@
     <div id="nav"></div>
     <div id="app"></div>
     <div id = "timer"></div>
+    <div id="our-sponsors"></div>
     <div id="speakers"></div>
     <!-- The inline styling below, margin-top: 10rem, is supposed to be removed, it's added as of now to make the section visible. When the sections above it will be added in the website, this styling can be removed -->
     <div
@@ -32,6 +33,7 @@
     <script type="module" src="/main.js"></script>
     <script type="module" src="/components/navbar.js"></script>
     <script type="module" src="/components/timer.js"></script>
+    <script type="module" src="/components/ourSponsors.js"></script>
     <script type="module" src="/components/speakers.js"></script>
     <script type="module" src="/components/whyJoinWowSection.js"></script>
     <script type="module" src="/components/text1500Section.js"></script>

apps/web-punjab/package.json

@@ -9,6 +9,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.1.4"
+    "vite": "^5.1.5"
   }
 }

apps/web-punjab/style.css

@@ -898,4 +898,65 @@ img {
     font-size: var(--small-font-size);
   }
 }
+
+
+/*=============== SPONSORS ===============*/
+
+.sponsors-container h2{
+  text-align: center;
+  color: var(--third-color);
+  font-size: var(--biggest-font-size);
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.sponsors-container{
+  margin: 80px;
+}
+
+
+@keyframes scroll {
+  0% {
+    transform: translateX(100%); /* Start from offscreen right */
+  }
+  100% {
+    transform: translateX(-200%); /* End at normal position */
+  }
+}
+
+.sponsor-list {
+  display: flex; 
+  animation: scroll 15s linear infinite; 
+  scroll-snap-type: x mandatory; 
+}
+
+.sponsor-list img {
+  width: 200px; 
+  height: 150px; 
+  object-fit: contain; 
+  margin-right: 30px; 
+}
+
+/* Adjust slide width for smaller screens */
+@media only screen and (max-width: 768px) {
+  .sponsor-list {
+    animation: scroll-mobile 8s linear infinite; 
+  }
+
+  @keyframes scroll-mobile {
+    0% {
+      transform: translateX(100%); /* Start from offscreen right */
+    }
+    100% {
+      transform: translateX(-700%); /* Change here if it snaps */
+    }
+  }
+
+  .sponsor-list img {
+    flex: 0 0 auto; 
+    scroll-snap-align: center; 
+    margin-right: 10px; 
+  }
+
+}