Refactor product page
This commit is contained in:
Emil Gulamov
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}`;
|
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 id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -146,7 +148,6 @@ const pageTitle: string = `${product.data.title} | ${SITE.title}`;
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{
|
||||||
product.data.specificationsRight ? (
|
product.data.specificationsRight ? (
|
||||||
<div class="mt-6 max-w-md space-y-6 md:ml-auto md:mt-0">
|
<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>
|
</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="mx-auto mb-20 flex w-full md:mb-28 2xl:w-4/5">
|
||||||
<div
|
<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"
|
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 && (
|
product.data.blueprints.first && (
|
||||||
<Image
|
<Image
|
||||||
src={product.data.blueprints.first}
|
src={product.data.blueprints.first}
|
||||||
class="h-full w-full object-cover object-center"
|
class="h-full w-full object-cover object-center"
|
||||||
alt="Blueprint Illustration"
|
alt="Blueprint Illustration"
|
||||||
format={"avif"}
|
format={"avif"}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
|
<div class="relative right-12 overflow-hidden rounded-xl shadow-xl">
|
||||||
{
|
{
|
||||||
product.data.blueprints.second && (
|
product.data.blueprints.second && (
|
||||||
<Image
|
<Image
|
||||||
src={product.data.blueprints.second}
|
src={product.data.blueprints.second}
|
||||||
class="h-full w-full object-cover object-center"
|
class="h-full w-full object-cover object-center"
|
||||||
alt="Blueprint Illustration"
|
alt="Blueprint Illustration"
|
||||||
format={"avif"}
|
format={"avif"}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
let timeline = gsap.timeline({ defaults: { overwrite: "auto" } });
|
||||||
<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" } });
|
timeline.to("#fadeText", {
|
||||||
|
duration: 1.5,
|
||||||
|
autoAlpha: 1,
|
||||||
|
y: 0,
|
||||||
|
delay: 1,
|
||||||
|
ease: "power2.out",
|
||||||
|
});
|
||||||
|
|
||||||
timeline.to("#fadeText", {
|
timeline.to(
|
||||||
duration: 1.5,
|
"#fadeInUp",
|
||||||
autoAlpha: 1,
|
{ duration: 1.5, autoAlpha: 1, y: 0, ease: "power2.out" },
|
||||||
y: 0,
|
"-=1.2",
|
||||||
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]"
|
|
||||||
);
|
);
|
||||||
|
|
||||||
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) {
|
if (tabId) {
|
||||||
const contentElement = document.querySelector(tabId);
|
const contentElementToShow = document.querySelector(tabId);
|
||||||
if (contentElement) {
|
if (contentElementToShow) {
|
||||||
contentElement.classList.add("hidden");
|
contentElementToShow.classList.remove("hidden");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
changeHeadingStyle(
|
changeHeadingStyle(
|
||||||
btn,
|
button,
|
||||||
|
["text-orange-400", "dark:text-orange-300"],
|
||||||
["text-neutral-800", "dark:text-neutral-200"],
|
["text-neutral-800", "dark:text-neutral-200"],
|
||||||
["text-orange-400", "dark:text-orange-300"]
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function activateButton(button: any) {
|
function changeHeadingStyle(
|
||||||
button.classList.add(
|
button: any,
|
||||||
"active",
|
addClasses: any,
|
||||||
"bg-neutral-100",
|
removeClasses: any,
|
||||||
",hover:border-transparent",
|
) {
|
||||||
"dark:bg-white/[.05]"
|
let heading = button.querySelector("span");
|
||||||
);
|
if (heading) {
|
||||||
|
heading.classList.remove(...removeClasses);
|
||||||
const tabId = button.getAttribute("data-target");
|
heading.classList.add(...addClasses);
|
||||||
if (tabId) {
|
|
||||||
const contentElementToShow = document.querySelector(tabId);
|
|
||||||
if (contentElementToShow) {
|
|
||||||
contentElementToShow.classList.remove("hidden");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
changeHeadingStyle(
|
const tabButtons = document.querySelectorAll("[data-target]");
|
||||||
button,
|
|
||||||
["text-orange-400", "dark:text-orange-300"],
|
|
||||||
["text-neutral-800", "dark:text-neutral-200"]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeHeadingStyle(
|
if (tabButtons.length > 0) {
|
||||||
button: any,
|
changeHeadingStyle(
|
||||||
addClasses: any,
|
tabButtons[0],
|
||||||
removeClasses: any
|
["text-orange-400", "dark:text-orange-300"],
|
||||||
) {
|
[],
|
||||||
let heading = button.querySelector("span");
|
);
|
||||||
if (heading) {
|
|
||||||
heading.classList.remove(...removeClasses);
|
|
||||||
heading.classList.add(...addClasses);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const tabButtons = document.querySelectorAll("[data-target]");
|
tabButtons.forEach((button) => {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
if (tabButtons.length > 0) {
|
tabButtons.forEach((btn) => setButtonInactive(btn, button));
|
||||||
changeHeadingStyle(
|
activateButton(button);
|
||||||
tabButtons[0],
|
});
|
||||||
["text-orange-400", "dark:text-orange-300"],
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
tabButtons.forEach((button) => {
|
|
||||||
button.addEventListener("click", () => {
|
|
||||||
tabButtons.forEach((btn) => setButtonInactive(btn, button));
|
|
||||||
activateButton(button);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
</script>
|
||||||
</script>
|
|
||||||
Loading…
Add table
Reference in a new issue