From 93121c1029cbd0ebe0ce763a6f51c39e16e05b36 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:21:18 +0400
Subject: [PATCH 1/6] Add table display for specifications

Restructured the display of product specifications into a table format, providing users with two choices: a list of items or a table.
---
 src/content/config.ts              |   6 +
 src/content/products/a765.md       |  19 +-
 src/pages/products/[...slug].astro | 336 ++++++++++++++++-------------
 3 files changed, 205 insertions(+), 156 deletions(-)

diff --git a/src/content/config.ts b/src/content/config.ts
index f095b80..dbb14b8 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -46,6 +46,12 @@ const productsCollection = defineCollection({
         subTitle: z.string(),
       })
     ).optional(),
+    tableData: z.array(
+      z.object({
+        feature: z.array(z.string()),
+        description: z.array(z.array(z.string())),
+      })
+    ).optional(),
     blueprints: z.object({
       first: image().optional(),
       second: image().optional(),
diff --git a/src/content/products/a765.md b/src/content/products/a765.md
index 59e6745..3255c59 100644
--- a/src/content/products/a765.md
+++ b/src/content/products/a765.md
@@ -1,6 +1,6 @@
 ---
 title: "SF-AB A765"
-description: "Assorted Screw Set" 
+description: " " 
 main:
   id: 2
   content: |
@@ -40,15 +40,14 @@ specificationsLeft:
     subTitle: "Each set includes a sufficient quantity of screws to handle a wide range of projects and tasks."
   - title: "Sizes"
     subTitle: "Available in various sizes to suit different project requirements, ensuring compatibility and versatility."
-specificationsRight:
-  - title: "Thread Design"
-    subTitle: "Precision-engineered threads ensure a tight and secure fit, providing reliable fastening for your projects."
-  - title: "Durability"
-    subTitle: "Designed to withstand the rigors of everyday use, delivering long-lasting performance and reliability."
-  - title: "Quality Assurance"
-    subTitle: "Manufactured to meet or exceed industry standards, guaranteeing consistent quality and performance."
-  - title: "Applications"
-    subTitle: "Suitable for a wide range of applications, including woodworking, metalworking, construction, and more."
+tableData:
+  - feature: ["Specification", "Value"]
+    description:
+      - ["Length (mm)", "Various"]
+      - ["Weight (g)", "N/A"]
+      - ["Material", "Stainless Steel"]
+      - ["Finish", "Assorted"]
+      - ["Package Contents", "Various screws in a set"]
 blueprints:
   first: "@/images/blueprint-1.avif"
   second: "@/images/blueprint-2.avif"
diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index 0e180cc..dea0251 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -27,9 +27,7 @@ const { product } = Astro.props;
 const pageTitle: string = `${product.data.title} | ${SITE.title}`;
 ---
 
-<MainLayout
-  title={pageTitle}
->
+<MainLayout title={pageTitle}>
   <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 
@@ -148,183 +146,229 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
                 ))
               }
             </div>
-            <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
-              {
-                product.data.specificationsRight?.map((spec) => (
-                  <div>
-                    <h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
-                      {spec.title}
-                    </h3>
-                    <p class="text-neutral-600 dark:text-neutral-400">
-                      {spec.subTitle}
-                    </p>
+
+            {
+              product.data.specificationsRight ? (
+                <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
+                  {product.data.specificationsRight?.map((spec) => (
+                    <div>
+                      <h3 class="block font-bold text-neutral-800 dark:text-neutral-200">
+                        {spec.title}
+                      </h3>
+                      <p class="text-neutral-600 dark:text-neutral-400">
+                        {spec.subTitle}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              ) : product.data.tableData ? (
+                <div class="mt-6 space-y-6 md:ml-auto md:mt-0">
+                  <div class="flex flex-col">
+                    <div class="-m-1.5 overflow-x-auto">
+                      <div class="inline-block min-w-full p-1.5 align-middle">
+                        <div class="overflow-hidden">
+                          <table class="min-w-full divide-y divide-neutral-300 dark:divide-neutral-700">
+                            <thead>
+                              <tr>
+                                {product.data.tableData?.[0].feature?.map(
+                                  (header) => (
+                                    <th
+                                      scope="col"
+                                      class="px-6 py-3 text-start text-xs font-medium uppercase text-neutral-500 dark:text-neutral-500"
+                                    >
+                                      {header}
+                                    </th>
+                                  )
+                                )}
+                              </tr>
+                            </thead>
+                            <tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
+                              {product.data.tableData?.map((row) =>
+                                // Wrap each row's content in a separate <tr> element
+                                row.description.map((rowData) => (
+                                  <tr>
+                                    {/* Iterate through each cell value in the row's description array */}
+                                    {rowData.map((cellValue) => (
+                                      // Render each cell value in its own <td> element
+                                      <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-neutral-600 dark:text-neutral-400">
+                                        {cellValue}
+                                      </td>
+                                    ))}
+                                  </tr>
+                                ))
+                              )}
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
                   </div>
-                ))
-              }
-            </div>
+                </div>
+              ) : null
+            }
           </div>
         </div>
       </div>
     </div>
   </div>
+</MainLayout>
 
-  <div id="tabs-with-card-3" class="hidden" role="tabpanel">
-    <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
-      <div
-        class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
-      >
-        {
-          product.data.blueprints.first && (
-            <Image
-              src={product.data.blueprints.first}
-              class="h-full w-full object-cover object-center"
-              alt="Blueprint Illustration"
-              format={"avif"}
-            />
-          )
-        }
-      </div>
+<div id="tabs-with-card-3" class="hidden" role="tabpanel">
+  <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
+    <div
+      class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
+    >
+      {
+        product.data.blueprints.first && (
+          <Image
+            src={product.data.blueprints.first}
+            class="h-full w-full object-cover object-center"
+            alt="Blueprint Illustration"
+            format={"avif"}
+          />
+        )
+      }
+    </div>
 
-      <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-        {
-          product.data.blueprints.second && (
-            <Image
-              src={product.data.blueprints.second}
-              class="h-full w-full object-cover object-center"
-              alt="Blueprint Illustration"
-              format={"avif"}
-            />
-          )
-        }
-      </div>
+    <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
+      {
+        product.data.blueprints.second && (
+          <Image
+            src={product.data.blueprints.second}
+            class="h-full w-full object-cover object-center"
+            alt="Blueprint Illustration"
+            format={"avif"}
+          />
+        )
+      }
     </div>
   </div>
+</div>
 
-  <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
-  <script>
-    window.addEventListener("load", () => {
-      if (window.gsap) {
-        const gsap = window.gsap;
-        gsap.set("#fadeText", {
-          autoAlpha: 0,
-          y: 50,
-          willChange: "transform, opacity",
-        });
-        gsap.set("#fadeInUp", {
-          autoAlpha: 0,
-          y: 50,
-          willChange: "transform, opacity",
-        });
-        gsap.set("#fadeInMoveRight", {
-          autoAlpha: 0,
-          x: 300,
-          willChange: "transform, opacity",
-        });
+<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
+<script>
+  window.addEventListener("load", () => {
+    if (window.gsap) {
+      const gsap = window.gsap;
+      gsap.set("#fadeText", {
+        autoAlpha: 0,
+        y: 50,
+        willChange: "transform, opacity",
+      });
+      gsap.set("#fadeInUp", {
+        autoAlpha: 0,
+        y: 50,
+        willChange: "transform, opacity",
+      });
+      gsap.set("#fadeInMoveRight", {
+        autoAlpha: 0,
+        x: 300,
+        willChange: "transform, opacity",
+      });
 
-        let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
+      let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
 
-        timeline.to("#fadeText", {
-          duration: 1.5,
-          autoAlpha: 1,
-          y: 0,
-          delay: 1,
-          ease: "power2.out",
-        });
+      timeline.to("#fadeText", {
+        duration: 1.5,
+        autoAlpha: 1,
+        y: 0,
+        delay: 1,
+        ease: "power2.out",
+      });
 
-        timeline.to(
-          "#fadeInUp",
-          { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
-          "-=1.2",
-        );
+      timeline.to(
+        "#fadeInUp",
+        { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
+        "-=1.2"
+      );
 
-        timeline.to(
-          "#fadeInMoveRight",
-          { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
-          "-=1.4",
-        );
+      timeline.to(
+        "#fadeInMoveRight",
+        { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
+        "-=1.4"
+      );
 
-        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
-      }
-    });
-  </script>
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      function setButtonInactive(btn: any, activeButton: any) {
-        if (btn !== activeButton) {
-          btn.classList.remove(
-            "active",
-            "bg-neutral-100",
-            "hover:border-transparent",
-            "dark:bg-white/[.05]",
-          );
-
-          const tabId = btn.getAttribute("data-target");
-          if (tabId) {
-            const contentElement = document.querySelector(tabId);
-            if (contentElement) {
-              contentElement.classList.add("hidden");
-            }
-          }
-
-          changeHeadingStyle(
-            btn,
-            ["text-neutral-800", "dark:text-neutral-200"],
-            ["text-orange-400", "dark:text-orange-300"],
-          );
-        }
-      }
-
-      function activateButton(button: any) {
-        button.classList.add(
+      timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
+    }
+  });
+</script>
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    function setButtonInactive(btn: any, activeButton: any) {
+      if (btn !== activeButton) {
+        btn.classList.remove(
           "active",
           "bg-neutral-100",
-          ",hover:border-transparent",
-          "dark:bg-white/[.05]",
+          "hover:border-transparent",
+          "dark:bg-white/[.05]"
         );
 
-        const tabId = button.getAttribute("data-target");
+        const tabId = btn.getAttribute("data-target");
         if (tabId) {
-          const contentElementToShow = document.querySelector(tabId);
-          if (contentElementToShow) {
-            contentElementToShow.classList.remove("hidden");
+          const contentElement = document.querySelector(tabId);
+          if (contentElement) {
+            contentElement.classList.add("hidden");
           }
         }
 
         changeHeadingStyle(
-          button,
-          ["text-orange-400", "dark:text-orange-300"],
+          btn,
           ["text-neutral-800", "dark:text-neutral-200"],
+          ["text-orange-400", "dark:text-orange-300"]
         );
       }
+    }
 
-      function changeHeadingStyle(
-        button: any,
-        addClasses: any,
-        removeClasses: any,
-      ) {
-        let heading = button.querySelector("span");
-        if (heading) {
-          heading.classList.remove(...removeClasses);
-          heading.classList.add(...addClasses);
+    function activateButton(button: any) {
+      button.classList.add(
+        "active",
+        "bg-neutral-100",
+        ",hover:border-transparent",
+        "dark:bg-white/[.05]"
+      );
+
+      const tabId = button.getAttribute("data-target");
+      if (tabId) {
+        const contentElementToShow = document.querySelector(tabId);
+        if (contentElementToShow) {
+          contentElementToShow.classList.remove("hidden");
         }
       }
 
-      const tabButtons = document.querySelectorAll("[data-target]");
+      changeHeadingStyle(
+        button,
+        ["text-orange-400", "dark:text-orange-300"],
+        ["text-neutral-800", "dark:text-neutral-200"]
+      );
+    }
 
-      if (tabButtons.length > 0) {
-        changeHeadingStyle(
-          tabButtons[0],
-          ["text-orange-400", "dark:text-orange-300"],
-          [],
-        );
+    function changeHeadingStyle(
+      button: any,
+      addClasses: any,
+      removeClasses: any
+    ) {
+      let heading = button.querySelector("span");
+      if (heading) {
+        heading.classList.remove(...removeClasses);
+        heading.classList.add(...addClasses);
       }
+    }
 
-      tabButtons.forEach((button) => {
-        button.addEventListener("click", () => {
-          tabButtons.forEach((btn) => setButtonInactive(btn, button));
-          activateButton(button);
-        });
+    const tabButtons = document.querySelectorAll("[data-target]");
+
+    if (tabButtons.length > 0) {
+      changeHeadingStyle(
+        tabButtons[0],
+        ["text-orange-400", "dark:text-orange-300"],
+        []
+      );
+    }
+
+    tabButtons.forEach((button) => {
+      button.addEventListener("click", () => {
+        tabButtons.forEach((btn) => setButtonInactive(btn, button));
+        activateButton(button);
       });
     });
-  </script>
-</MainLayout>
+  });
+</script>

From d2ecb964c2bd51938e347c01bc8c0b3048e84cf5 Mon Sep 17 00:00:00 2001
From: Emil Gulamov <125820963+mearashadowfax@users.noreply.github.com>
Date: Sat, 20 Apr 2024 14:34:26 +0400
Subject: [PATCH 2/6] Refactor product page

---
 src/pages/products/[...slug].astro | 274 ++++++++++++++---------------
 1 file changed, 137 insertions(+), 137 deletions(-)

diff --git a/src/pages/products/[...slug].astro b/src/pages/products/[...slug].astro
index dea0251..b3a40a9 100644
--- a/src/pages/products/[...slug].astro
+++ b/src/pages/products/[...slug].astro
@@ -27,7 +27,9 @@ const { product } = Astro.props;
 const pageTitle: string = `${product.data.title} | ${SITE.title}`;
 ---
 
-<MainLayout title={pageTitle}>
+<MainLayout
+  title={pageTitle}
+>
   <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
   </div>
 
@@ -146,7 +148,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
                 ))
               }
             </div>
-
             {
               product.data.specificationsRight ? (
                 <div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
@@ -211,164 +212,163 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
       </div>
     </div>
   </div>
-</MainLayout>
 
-<div id="tabs-with-card-3" class="hidden" role="tabpanel">
-  <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
-    <div
-      class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
-    >
-      {
-        product.data.blueprints.first && (
-          <Image
-            src={product.data.blueprints.first}
-            class="h-full w-full object-cover object-center"
-            alt="Blueprint Illustration"
-            format={"avif"}
-          />
-        )
-      }
-    </div>
+  <div id="tabs-with-card-3" class="hidden" role="tabpanel">
+    <div class="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
+      <div
+        class="relative left-12 top-12 z-10 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 md:-ml-12 lg:ml-0"
+      >
+        {
+          product.data.blueprints.first && (
+            <Image
+              src={product.data.blueprints.first}
+              class="h-full w-full object-cover object-center"
+              alt="Blueprint Illustration"
+              format={"avif"}
+            />
+          )
+        }
+      </div>
 
-    <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
-      {
-        product.data.blueprints.second && (
-          <Image
-            src={product.data.blueprints.second}
-            class="h-full w-full object-cover object-center"
-            alt="Blueprint Illustration"
-            format={"avif"}
-          />
-        )
-      }
+      <div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
+        {
+          product.data.blueprints.second && (
+            <Image
+              src={product.data.blueprints.second}
+              class="h-full w-full object-cover object-center"
+              alt="Blueprint Illustration"
+              format={"avif"}
+            />
+          )
+        }
+      </div>
     </div>
   </div>
-</div>
+</MainLayout>
+  <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
+  <script>
+    window.addEventListener("load", () => {
+      if (window.gsap) {
+        const gsap = window.gsap;
+        gsap.set("#fadeText", {
+          autoAlpha: 0,
+          y: 50,
+          willChange: "transform, opacity",
+        });
+        gsap.set("#fadeInUp", {
+          autoAlpha: 0,
+          y: 50,
+          willChange: "transform, opacity",
+        });
+        gsap.set("#fadeInMoveRight", {
+          autoAlpha: 0,
+          x: 300,
+          willChange: "transform, opacity",
+        });
 
-<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
-<script>
-  window.addEventListener("load", () => {
-    if (window.gsap) {
-      const gsap = window.gsap;
-      gsap.set("#fadeText", {
-        autoAlpha: 0,
-        y: 50,
-        willChange: "transform, opacity",
-      });
-      gsap.set("#fadeInUp", {
-        autoAlpha: 0,
-        y: 50,
-        willChange: "transform, opacity",
-      });
-      gsap.set("#fadeInMoveRight", {
-        autoAlpha: 0,
-        x: 300,
-        willChange: "transform, opacity",
-      });
+        let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
 
-      let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
+        timeline.to("#fadeText", {
+          duration: 1.5,
+          autoAlpha: 1,
+          y: 0,
+          delay: 1,
+          ease: "power2.out",
+        });
 
-      timeline.to("#fadeText", {
-        duration: 1.5,
-        autoAlpha: 1,
-        y: 0,
-        delay: 1,
-        ease: "power2.out",
-      });
-
-      timeline.to(
-        "#fadeInUp",
-        { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
-        "-=1.2"
-      );
-
-      timeline.to(
-        "#fadeInMoveRight",
-        { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
-        "-=1.4"
-      );
-
-      timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
-    }
-  });
-</script>
-<script>
-  document.addEventListener("DOMContentLoaded", function () {
-    function setButtonInactive(btn: any, activeButton: any) {
-      if (btn !== activeButton) {
-        btn.classList.remove(
-          "active",
-          "bg-neutral-100",
-          "hover:border-transparent",
-          "dark:bg-white/[.05]"
+        timeline.to(
+          "#fadeInUp",
+          { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
+          "-=1.2",
         );
 
-        const tabId = btn.getAttribute("data-target");
+        timeline.to(
+          "#fadeInMoveRight",
+          { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
+          "-=1.4",
+        );
+
+        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
+      }
+    });
+  </script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      function setButtonInactive(btn: any, activeButton: any) {
+        if (btn !== activeButton) {
+          btn.classList.remove(
+            "active",
+            "bg-neutral-100",
+            "hover:border-transparent",
+            "dark:bg-white/[.05]",
+          );
+
+          const tabId = btn.getAttribute("data-target");
+          if (tabId) {
+            const contentElement = document.querySelector(tabId);
+            if (contentElement) {
+              contentElement.classList.add("hidden");
+            }
+          }
+
+          changeHeadingStyle(
+            btn,
+            ["text-neutral-800", "dark:text-neutral-200"],
+            ["text-orange-400", "dark:text-orange-300"],
+          );
+        }
+      }
+
+      function activateButton(button: any) {
+        button.classList.add(
+          "active",
+          "bg-neutral-100",
+          ",hover:border-transparent",
+          "dark:bg-white/[.05]",
+        );
+
+        const tabId = button.getAttribute("data-target");
         if (tabId) {
-          const contentElement = document.querySelector(tabId);
-          if (contentElement) {
-            contentElement.classList.add("hidden");
+          const contentElementToShow = document.querySelector(tabId);
+          if (contentElementToShow) {
+            contentElementToShow.classList.remove("hidden");
           }
         }
 
         changeHeadingStyle(
-          btn,
+          button,
+          ["text-orange-400", "dark:text-orange-300"],
           ["text-neutral-800", "dark:text-neutral-200"],
-          ["text-orange-400", "dark:text-orange-300"]
         );
       }
-    }
 
-    function activateButton(button: any) {
-      button.classList.add(
-        "active",
-        "bg-neutral-100",
-        ",hover:border-transparent",
-        "dark:bg-white/[.05]"
-      );
-
-      const tabId = button.getAttribute("data-target");
-      if (tabId) {
-        const contentElementToShow = document.querySelector(tabId);
-        if (contentElementToShow) {
-          contentElementToShow.classList.remove("hidden");
+      function changeHeadingStyle(
+        button: any,
+        addClasses: any,
+        removeClasses: any,
+      ) {
+        let heading = button.querySelector("span");
+        if (heading) {
+          heading.classList.remove(...removeClasses);
+          heading.classList.add(...addClasses);
         }
       }
 
-      changeHeadingStyle(
-        button,
-        ["text-orange-400", "dark:text-orange-300"],
-        ["text-neutral-800", "dark:text-neutral-200"]
-      );
-    }
+      const tabButtons = document.querySelectorAll("[data-target]");
 
-    function changeHeadingStyle(
-      button: any,
-      addClasses: any,
-      removeClasses: any
-    ) {
-      let heading = button.querySelector("span");
-      if (heading) {
-        heading.classList.remove(...removeClasses);
-        heading.classList.add(...addClasses);
+      if (tabButtons.length > 0) {
+        changeHeadingStyle(
+          tabButtons[0],
+          ["text-orange-400", "dark:text-orange-300"],
+          [],
+        );
       }
-    }
 
-    const tabButtons = document.querySelectorAll("[data-target]");
-
-    if (tabButtons.length > 0) {
-      changeHeadingStyle(
-        tabButtons[0],
-        ["text-orange-400", "dark:text-orange-300"],
-        []
-      );
-    }
-
-    tabButtons.forEach((button) => {
-      button.addEventListener("click", () => {
-        tabButtons.forEach((btn) => setButtonInactive(btn, button));
-        activateButton(button);
+      tabButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          tabButtons.forEach((btn) => setButtonInactive(btn, button));
+          activateButton(button);
+        });
       });
     });
-  });
-</script>
+  </script>
\ No newline at end of file

From ab30ce607ac6b02b63928e8b1756f66696ecc073 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:01:14 +0000
Subject: [PATCH 3/6] Bump astro from 4.6.1 to 4.6.3

Bumps [astro](https://github.com/withastro/astro/tree/HEAD/packages/astro) from 4.6.1 to 4.6.3.
- [Release notes](https://github.com/withastro/astro/releases)
- [Changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md)
- [Commits](https://github.com/withastro/astro/commits/astro@4.6.3/packages/astro)

---
updated-dependencies:
- dependency-name: astro
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 ++++++++++----
 package.json      |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ac385b..6446d78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@astrojs/starlight-tailwind": "^2.0.2",
         "@astrojs/tailwind": "^5.1.0",
         "@astrojs/vercel": "^7.5.3",
-        "astro": "^4.6.1",
+        "astro": "^4.6.3",
         "astro-compressor": "^0.4.1",
         "globby": "^14.0.1",
         "gsap": "^3.12.5",
@@ -2364,6 +2364,11 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/cookie": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.4.tgz",
+      "integrity": "sha512-7z/eR6O859gyWIAjuvBWFzNURmf2oPBmJlfVWkwehU5nzIyjwBsTh7WMmEEV4JFnHuQ3ex4oyTvfKzcyJVDBNA=="
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -2817,9 +2822,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-4.6.1.tgz",
-      "integrity": "sha512-gcL22NEhuRi4wu9/x5Kn2eJf7nT6GeU5BxdN6AHbUnX6UzEDIWtpgHs5lBIZYExKbHKN9PjEGXWQzQtFwLU+5g==",
+      "version": "4.6.3",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-4.6.3.tgz",
+      "integrity": "sha512-p2zs1Gac+ysdc/yFCoc8pOXTZE5L9foAtmqUzUVL22WX68bYTRovd03GRs7J1MDpwzsl9kJtlK20ROpjyIFpNw==",
       "dependencies": {
         "@astrojs/compiler": "^2.7.1",
         "@astrojs/internal-helpers": "0.4.0",
@@ -2832,6 +2837,7 @@
         "@babel/traverse": "^7.23.3",
         "@babel/types": "^7.23.3",
         "@types/babel__core": "^7.20.4",
+        "@types/cookie": "^0.5.4",
         "acorn": "^8.11.2",
         "aria-query": "^5.3.0",
         "axobject-query": "^4.0.0",
diff --git a/package.json b/package.json
index 8535f5c..ede1fb5 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@astrojs/starlight-tailwind": "^2.0.2",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.5.3",
-    "astro": "^4.6.1",
+    "astro": "^4.6.3",
     "astro-compressor": "^0.4.1",
     "globby": "^14.0.1",
     "gsap": "^3.12.5",

From c8ac35ec502e2d3626d8cf810bf5b52fb29de925 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:01:29 +0000
Subject: [PATCH 4/6] Bump prettier-plugin-tailwindcss from 0.5.13 to 0.5.14

Bumps [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) from 0.5.13 to 0.5.14.
- [Release notes](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases)
- [Changelog](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/compare/v0.5.13...v0.5.14)

---
updated-dependencies:
- dependency-name: prettier-plugin-tailwindcss
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ac385b..96d27c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "astro-vtbot": "^1.7.9",
         "prettier": "^3.2.5",
         "prettier-plugin-astro": "^0.13.0",
-        "prettier-plugin-tailwindcss": "^0.5.13",
+        "prettier-plugin-tailwindcss": "^0.5.14",
         "typescript": "^5.4.5"
       }
     },
@@ -7761,9 +7761,9 @@
       "devOptional": true
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.13.tgz",
-      "integrity": "sha512-2tPWHCFNC+WRjAC4SIWQNSOdcL1NNkydXim8w7TDqlZi+/ulZYz2OouAI6qMtkggnPt7lGamboj6LcTMwcCvoQ==",
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz",
+      "integrity": "sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==",
       "dev": true,
       "engines": {
         "node": ">=14.21.3"
diff --git a/package.json b/package.json
index 8535f5c..cd20331 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "astro-vtbot": "^1.7.9",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.13",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "typescript": "^5.4.5"
   }
 }

From 87e26292e8aee716d890b5c50683648db8146cf8 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:01:43 +0000
Subject: [PATCH 5/6] Bump astro-vtbot from 1.7.9 to 1.7.12

Bumps [astro-vtbot](https://github.com/martrapp/astro-vtbot) from 1.7.9 to 1.7.12.
- [Changelog](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md)
- [Commits](https://github.com/martrapp/astro-vtbot/commits)

---
updated-dependencies:
- dependency-name: astro-vtbot
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ac385b..80c7485 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
       },
       "devDependencies": {
         "@tailwindcss/forms": "^0.5.7",
-        "astro-vtbot": "^1.7.9",
+        "astro-vtbot": "^1.7.12",
         "prettier": "^3.2.5",
         "prettier-plugin-astro": "^0.13.0",
         "prettier-plugin-tailwindcss": "^0.5.13",
@@ -3161,9 +3161,9 @@
       }
     },
     "node_modules/astro-vtbot": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.7.9.tgz",
-      "integrity": "sha512-4HYeIHbdKxunje7ZH1/XyMgKEBlSmfbRH7zVDKHljYSi/Gl/IT4mahdOYSALE5O0/SdGY7AU6CYus/r/rS39vQ==",
+      "version": "1.7.12",
+      "resolved": "https://registry.npmjs.org/astro-vtbot/-/astro-vtbot-1.7.12.tgz",
+      "integrity": "sha512-/botqljlm507eZtGY4+j5yEr9GbqR1unD7r0Rzg89dOU6MVjCrk//QSB7fg1NyDwur74LeYjcArMGE4FjOo/Dg==",
       "dev": true,
       "funding": {
         "type": "github",
diff --git a/package.json b/package.json
index 8535f5c..d3a0cff 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",
-    "astro-vtbot": "^1.7.9",
+    "astro-vtbot": "^1.7.12",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.5.13",

From e48dae677276283ec5dbbf78720c8f7b00267e70 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 22 Apr 2024 18:01:59 +0000
Subject: [PATCH 6/6] Bump @astrojs/sitemap from 3.1.2 to 3.1.4

Bumps [@astrojs/sitemap](https://github.com/withastro/astro/tree/HEAD/packages/integrations/sitemap) from 3.1.2 to 3.1.4.
- [Release notes](https://github.com/withastro/astro/releases)
- [Changelog](https://github.com/withastro/astro/blob/main/packages/integrations/sitemap/CHANGELOG.md)
- [Commits](https://github.com/withastro/astro/commits/@astrojs/sitemap@3.1.4/packages/integrations/sitemap)

---
updated-dependencies:
- dependency-name: "@astrojs/sitemap"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 14 ++++++++++----
 package.json      |  2 +-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9ac385b..3c9a66c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/check": "^0.5.10",
-        "@astrojs/sitemap": "^3.1.2",
+        "@astrojs/sitemap": "^3.1.4",
         "@astrojs/starlight": "^0.21.5",
         "@astrojs/starlight-tailwind": "^2.0.2",
         "@astrojs/tailwind": "^5.1.0",
@@ -194,11 +194,12 @@
       }
     },
     "node_modules/@astrojs/sitemap": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.1.2.tgz",
-      "integrity": "sha512-FxOJldIl5ltZ5CNjocQxHkAO9orwHBjqtaU28o4smobp9vowS0nbGp+I9CrPxkzWdl1crSDm9vjL9tnvG1DSug==",
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.1.4.tgz",
+      "integrity": "sha512-po8CqDCK14O6phU1mB5C8SyVLyQEa+7pJM8oXxs1mVh8DgvxxaA5E7lak1vzOmBcyyyHBW32jakGqNYc66sBRw==",
       "dependencies": {
         "sitemap": "^7.1.1",
+        "stream-replace-string": "^2.0.0",
         "zod": "^3.22.4"
       }
     },
@@ -9251,6 +9252,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stream-replace-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stream-replace-string/-/stream-replace-string-2.0.0.tgz",
+      "integrity": "sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w=="
+    },
     "node_modules/streamx": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz",
diff --git a/package.json b/package.json
index 8535f5c..4994d78 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.5.10",
-    "@astrojs/sitemap": "^3.1.2",
+    "@astrojs/sitemap": "^3.1.4",
     "@astrojs/starlight": "^0.21.5",
     "@astrojs/starlight-tailwind": "^2.0.2",
     "@astrojs/tailwind": "^5.1.0",