Refactor product page

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,9 +212,8 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
       </div>
     </div>
   </div>
-</MainLayout>
 
-<div id="tabs-with-card-3" class="hidden" role="tabpanel">
+  <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"
@@ -243,10 +243,10 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
         }
       </div>
     </div>
-</div>
+  </div>
-
+</MainLayout>
-<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
+  <script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
-<script>
+  <script>
     window.addEventListener("load", () => {
       if (window.gsap) {
         const gsap = window.gsap;
@@ -279,20 +279,20 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
         timeline.to(
           "#fadeInUp",
           { duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
-        "-=1.2"
+          "-=1.2",
         );
 
         timeline.to(
           "#fadeInMoveRight",
           { duration: 1.5, autoAlpha: 1, x: 0, ease: "power2.inOut" },
-        "-=1.4"
+          "-=1.4",
         );
 
         timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.2 });
       }
     });
-</script>
+  </script>
-<script>
+  <script>
     document.addEventListener("DOMContentLoaded", function () {
       function setButtonInactive(btn: any, activeButton: any) {
         if (btn !== activeButton) {
@@ -300,7 +300,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
             "active",
             "bg-neutral-100",
             "hover:border-transparent",
-          "dark:bg-white/[.05]"
+            "dark:bg-white/[.05]",
           );
 
           const tabId = btn.getAttribute("data-target");
@@ -314,7 +314,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
           changeHeadingStyle(
             btn,
             ["text-neutral-800", "dark:text-neutral-200"],
-          ["text-orange-400", "dark:text-orange-300"]
+            ["text-orange-400", "dark:text-orange-300"],
           );
         }
       }
@@ -324,7 +324,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
           "active",
           "bg-neutral-100",
           ",hover:border-transparent",
-        "dark:bg-white/[.05]"
+          "dark:bg-white/[.05]",
         );
 
         const tabId = button.getAttribute("data-target");
@@ -338,14 +338,14 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
         changeHeadingStyle(
           button,
           ["text-orange-400", "dark:text-orange-300"],
-        ["text-neutral-800", "dark:text-neutral-200"]
+          ["text-neutral-800", "dark:text-neutral-200"],
         );
       }
 
       function changeHeadingStyle(
         button: any,
         addClasses: any,
-      removeClasses: any
+        removeClasses: any,
       ) {
         let heading = button.querySelector("span");
         if (heading) {
@@ -360,7 +360,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
         changeHeadingStyle(
           tabButtons[0],
           ["text-orange-400", "dark:text-orange-300"],
-        []
+          [],
         );
       }
 
@@ -371,4 +371,4 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
         });
       });
     });
-</script>
+  </script>