<![CDATA[const root = document.documentElement;
window.addEventListener("pointermove", (event) => {
root.style.setProperty("--x", `${event.clientX}px`);
root.style.setProperty("--y", `${event.clientY}px`);
});
const systemTitle = document.querySelector("#systemTitle");
const systemText = document.querySelector("#systemText");
document.querySelectorAll(".system-node").forEach((node) => {
node.addEventListener("click", () => {
document.querySelectorAll(".system-node").forEach((item) => item.classList.remove("active"));
node.classList.add("active");
systemTitle.textContent = node.textContent;
systemText.textContent = node.dataset.system;
});
});
const growthTitle = document.querySelector("#growthTitle");
const growthText = document.querySelector("#growthText");
document.querySelectorAll(".growth-step").forEach((step) => {
step.addEventListener("click", () => {
document.querySelectorAll(".growth-step").forEach((item) => item.classList.remove("active"));
step.classList.add("active");
growthTitle.textContent = step.dataset.step;
growthText.textContent = step.dataset.copy;
});
});
const dominanceTitle = document.querySelector("#dominanceTitle");
const dominanceText = document.querySelector("#dominanceText");
document.querySelectorAll(".dominance-card").forEach((card) => {
card.addEventListener("click", () => {
document.querySelectorAll(".dominance-card").forEach((item) => item.classList.remove("active"));
card.classList.add("active");
dominanceTitle.textContent = card.dataset.focus;
dominanceText.textContent = card.dataset.detail;
});
});
const commandLabel = document.querySelector("#commandLabel");
const commandTitle = document.querySelector("#commandTitle");
const commandText = document.querySelector("#commandText");
document.querySelectorAll(".command-btn").forEach((button) => {
button.addEventListener("click", () => {
document.querySelectorAll(".command-btn").forEach((item) => item.classList.remove("active"));
button.classList.add("active");
commandLabel.textContent = button.dataset.label;
commandTitle.textContent = button.dataset.title;
commandText.textContent = button.dataset.text;
});
});
const platformContent = {
amazon: {
title: "Amazon",
text: "Amazon receives the deepest strategy: product detail page optimization, keyword visibility, A+ content direction, storefront presentation, retail readiness, promotions, and review signal review.",
points: ["Amazon PDP optimization and marketplace SEO", "A+ content and storefront direction", "Retail readiness and performance insight"],
},
noon: {
title: "Noon",
text: "Noon is treated as a secondary marketplace with localized listing adaptation, cleaner product naming, offer clarity, and visuals shaped for UAE and GCC buying behavior.",
points: ["Localized product titles and category clarity", "Content adaptation from Amazon learning", "Offer and visual consistency"],
},
talabat: {
title: "Talabat",
text: "Talabat is supported where speed, clarity, menu or product presentation, offer hierarchy, and visual consistency matter most.",
points: ["Menu or product clarity", "Offer hierarchy", "Fast buyer decision support"],
},
instashop: {
title: "Instashop",
text: "Instashop is optimized with concise naming, visual hierarchy, promotional clarity, and product information that supports quick buying decisions.",
points: ["Naming consistency", "Visual hierarchy", "Promotion support"],
},
custom: {
title: "Custom Marketplace",
text: "For category-specific marketplaces, we adapt the Amazon-first system to the platform rules, buyer behavior, product range, and available performance data.",
points: ["Custom platform audit", "Platform-specific content adaptation", "Performance recommendations"],
},
};
const tabTitle = document.querySelector("#tabTitle");
const tabText = document.querySelector("#tabText");
const tabList = document.querySelector("#tabList");
document.querySelectorAll(".tab").forEach((tab) => {
tab.addEventListener("click", () => {
document.querySelectorAll(".tab").forEach((item) => item.classList.remove("active"));
tab.classList.add("active");
const content = platformContent[tab.dataset.tab];
tabTitle.textContent = content.title;
tabText.textContent = content.text;
tabList.innerHTML = content.points.map((point) => `<li>${point}</li>`).join("");
});
});
const listingData = {
before: {
status: "Before",
title: "Organic Vitamin Blend 500g Pack",
body: "Generic Amazon title, limited keyword logic, no comparison cues, inconsistent image hierarchy, and weak buyer confidence signals.",
points: ["Generic product title", "Weak Amazon SEO", "Missing comparison logic"],
},
after: {
status: "After Oura",
title: "Organic Daily Vitamin Blend For Energy, Immunity And Family Wellness",
body: "Amazon search-ready title, benefit-led content, stronger A+ direction, answered buyer objections, and clearer reasons to choose the product.",
points: ["Keyword-aligned Amazon title", "Benefit-led PDP content", "Stronger conversion signals"],
},
};
const listingStatus = document.querySelector("#listingStatus");
const listingTitle = document.querySelector("#listingTitle");
const listingBody = document.querySelector("#listingBody");
const listingPoints = document.querySelector("#listingPoints");
document.querySelectorAll(".toggle-btn").forEach((button) => {
button.addEventListener("click", () => {
document.querySelectorAll(".toggle-btn").forEach((item) => item.classList.remove("active"));
button.classList.add("active");
const content = listingData[button.dataset.view];
listingStatus.textContent = content.status;
listingTitle.textContent = content.title;
listingBody.textContent = content.body;
listingPoints.innerHTML = content.points.map((point) => `<li>${point}</li>`).join("");
});
});
document.querySelectorAll(".faq-item").forEach((item) => {
item.addEventListener("click", () => {
document.querySelectorAll(".faq-item").forEach((faq) => {
if (faq !== item) faq.classList.remove("active");
});
item.classList.toggle("active");
});
});
const revealItems = document.querySelectorAll(
".section-heading, .dominance-card, .priority-card, .service-tile, .problem-card, .metric-card, .audience-grid article, .glass-panel, .command-visual, .command-btn"
);
const revealObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
revealObserver.unobserve(entry.target);
}
});
},
{ threshold: 0.14 }
);
revealItems.forEach((item) => {
item.classList.add("reveal-item");
revealObserver.observe(item);
});
document.querySelectorAll(".service-tile, .priority-card, .dominance-card").forEach((card) => {
card.addEventListener("pointermove", (event) => {
const rect = card.getBoundingClientRect();
const x = ((event.clientX - rect.left) / rect.width - 0.5) * 10;
const y = ((event.clientY - rect.top) / rect.height - 0.5) * -10;
card.style.setProperty("--tilt-x", `${y}deg`);
card.style.setProperty("--tilt-y", `${x}deg`);
});
card.addEventListener("pointerleave", () => {
card.style.removeProperty("--tilt-x");
card.style.removeProperty("--tilt-y");
});
});]]>
