Remove gallery animation & refactor (#37)

- Remove gallery animation on all devices as it was laggy
- Refactor

Author: novanai

src/_includes/home/sections/cta/gallery.njk

@@ -1,44 +1,7 @@
-<div class="hero-overlay bg-black bg-opacity-60"></div>
-<div data-zoom class="-z-10 grid grid-cols-12 grid-rows-12 gap-3 size-full">
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r1c1 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r1c2 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r1c3 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r2c1 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r2c2 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r2c3 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r3c1 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r3c2 }}')">
-  </div>
-  <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ site.home.cta.gallery.r3c3 }}')">
-  </div>
+<div class="hero-overlay bg-black bg-opacity-60 p-5"></div>
+<div class="-z-10 grid grid-cols-12 grid-rows-12 gap-3 size-full p-5">
+  {% for _, url in site.home.cta.gallery -%}
+    <div class="gallery-card row-span-4 col-span-4" style="background-image: url('{{ url }}')">
+    </div>
+  {%- endfor %}
 </div>
-<script>
-  if (!userAgent.getDevice().type) { // is a desktop device
-    const element = document.querySelector("[data-zoom]")
-    const trigger = document.querySelector("[data-zoom-trigger]")
-    const scale = 3.5
-    gsap.from(element, {
-      scale,
-      scrollTrigger: {
-        trigger,
-        pin: trigger,
-        anticipatePin: 1,
-        start: "top top",
-        end: () => {
-          const bodyRect = document.body.getBoundingClientRect()
-          const elemRect = element.getBoundingClientRect()
-          const offset = elemRect.top - bodyRect.top
-          return offset + element.offsetHeight * (scale + 1)
-        },
-        scrub: 0.5,
-      },
-    })
-  }
-</script>