[UI] Added Sponsors Section

src/_data/site.yml

@@ -96,5 +96,10 @@ home:
       position: 🚀 SysAdmin
       username: rjm
       image: /assets/img/committee/ruan.webp
+  sponsors:
+    - name: RTC
+      tier: secondary
+      image: /assets/img/sponsors/rtc.svg
+
 footer:
   credit: Created from Redbrick's Atlas System

src/_includes/home/sections/sponsors.njk

@@ -0,0 +1,60 @@
+<section class="bg-base-100">
+  <h1 class="text-white text-shadow text-xl lh:text-3xl font-bold mb-2 lg:mb-4">
+    {{site.society.name}} is proudly sponsored by:
+  </h1>
+  <div class="flex p-5 md:p-10 space-x-5 md:space-x-10 overflow-x-scroll">
+    {% for sponsor in site.home.sponsors -%}
+    <div data-cmt-trigger class="flex flex-col items-center">
+      <h2 data-cmt-title="{{ sponsor.tier }}" class="font-mono font-bold text-sm md:text-md h-10 whitespace-nowrap">
+        {{ sponsor.tier}}
+      </h2>
+      <div data-cmt-card class="indicator overflow-visible">
+        <div class="relative rounded-xl border border-base-content/20 shadow-xl shadow-slate-950/20 overflow-hidden cmt-card">
+          <a href="/bio/{{ sponsor.name }}.html">
+            <img class="-z-10 aspect-[0.75] w-40 max-w-[35vw] object-cover object-center" src="{{ sponsor.image }}" alt="{{ sponsor.name }}" />
+            <div class="absolute bottom-0 w-full p-2 bg-base-200 bg-opacity-75 backdrop-blur-sm cmt-name">
+              <p class="text-center md:text-lg">
+                {{ sponsor.name }}
+              </p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+    {%- endfor %}
+  </div>
+</section>
+<script>
+  if (!userAgent.getDevice().type) { // is a desktop device
+    gsap.registerPlugin(ScrollTrigger)
+    gsap.registerPlugin(TextPlugin)
+    gsap.set("[data-cmt-card]", {
+      scale: 0.9,
+      opacity: 0,
+    })
+    gsap.set("[data-cmt-title]", {
+      text: "",
+    })
+    ScrollTrigger.batch("[data-cmt-trigger]", {
+      once: true,
+      end: "bottom bottom",
+      onEnter: (batch) => batch.forEach((element, i) => {
+        const stagger = 0.2
+        const cardElement = element.querySelector("[data-cmt-card]")
+        const titleElement = element.querySelector("[data-cmt-title]")
+        gsap.to(cardElement, {
+          scale: 1,
+          opacity: 1,
+          duration: 0.3,
+          ease: "power2.inOut",
+          delay: i * stagger,
+        })
+        gsap.to(titleElement, {
+          text: titleElement.dataset.cmtTitle,
+          duration: 0.75,
+          delay: 0.25 + (i * stagger),
+        })
+      }),
+    })
+  }
+</script>