Refactor product page
This commit is contained in:
parent
93121c1029
commit
d2ecb964c2
1 changed files with 137 additions and 137 deletions
|
@ -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,7 +212,6 @@ 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">
|
||||
|
@ -244,7 +244,7 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</MainLayout>
|
||||
<script is:inline src="/scripts/vendor/gsap/gsap.min.js"></script>
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
|
@ -279,13 +279,13 @@ 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 });
|
||||
|
@ -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"],
|
||||
[]
|
||||
[],
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue