var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var stdin_exports = {}; __export(stdin_exports, { default: () => SsBeautyHomepage }); module.exports = __toCommonJS(stdin_exports); var import_react = __toESM(require("react")); var import_react2 = require("@emotion/react"); var import_sdk = require("@packman/sdk"); var import_icons_react = require("@tabler/icons-react"); var import_jsx_runtime = require("@emotion/react/jsx-runtime"); const C = { surface: "#FFFFFF", surfaceSoft: "#F8F5F1", surfaceDeep: "#EFE9E0", amber: "#B17A4A", amberDeep: "#7C5230", ink: "#1A1410", inkSoft: "#3A2D22", muted: "#9A8E7E", white: "#FFFFFF", rule: "rgba(26,20,16,0.12)", ruleSoft: "rgba(26,20,16,0.06)" }; const FONT = "'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"; const loc = (val, en, ar, isAr) => { if (!val) return isAr ? ar : en; if (typeof val === "object") return isAr ? val.ar || ar : val.en || en; return val; }; function resolveMediaUrl(raw) { if (!raw) return ""; if (typeof raw === "string") return raw; if (Array.isArray(raw) && raw.length > 0) return resolveMediaUrl(raw[0]); if (typeof raw === "object" && raw !== null) { const o = raw; return o.file?.cdnUrl || o.file?.url || o.cdnUrl || o.url || o.src || ""; } return ""; } const VIDEO_EXT_RE = /\.(mp4|webm|mov|m4v|ogg|ogv)(\?.*)?$/i; function resolveMediaType(raw) { const url = resolveMediaUrl(raw); if (raw && typeof raw === "object" && !Array.isArray(raw)) { const o = raw; const mime = o.mimeType || o.contentType || o.type || o.file?.mimeType || o.file?.contentType || o.file?.type || ""; if (typeof mime === "string") { if (mime.toLowerCase().startsWith("video/")) return "video"; if (mime.toLowerCase().startsWith("image/")) return "image"; } } if (Array.isArray(raw) && raw.length > 0) return resolveMediaType(raw[0]); return VIDEO_EXT_RE.test(url) ? "video" : "image"; } function parseTitleHtml(input) { if (!input) return []; const parts = []; const re = /([\s\S]*?)<\/strong>/gi; let last = 0; let m; while ((m = re.exec(input)) !== null) { if (m.index > last) parts.push({ text: input.slice(last, m.index), bold: false }); parts.push({ text: m[1], bold: true }); last = re.lastIndex; } if (last < input.length) parts.push({ text: input.slice(last), bold: false }); return parts.flatMap((p) => { const segs = p.text.split(//i); return segs.flatMap( (s, i) => i === 0 ? [{ text: s, bold: p.bold }] : [{ text: "\n", bold: p.bold }, { text: s, bold: p.bold }] ); }); } function parseIngredients(raw) { if (!raw) return []; const lines = Array.isArray(raw) ? raw.map(String) : typeof raw === "string" ? raw.split(/\n/) : []; return lines.map((line) => line.trim()).filter(Boolean).map((line) => { const [name = "", icon = ""] = line.split("|").map((s) => s.trim()); return { name, icon }; }).filter((it) => !!it.name); } function SsBeautyHomepage({ settings }) { const { language } = (0, import_sdk.useLanguage)(); const isAr = (language || "en").toLowerCase().startsWith("ar"); const c = settings?.content || {}; const o = settings?.options || {}; const show = (k, d = true) => k in (o || {}) ? !!o[k] : d; const HERO_VIDEO_DESKTOP = "https://cdn.packman.app/6913408a5385ec008efc14e4.mp4"; const HERO_VIDEO_MOBILE = "https://cdn.packman.app/6913408e37f7ce02070a23e9.mp4"; const heroMediaUrl = resolveMediaUrl(c.heroMedia); const heroMediaType = resolveMediaType(c.heroMedia); const heroVideo = heroMediaType === "video" ? heroMediaUrl : ""; const heroImage = heroMediaType === "image" ? heroMediaUrl : ""; const heroVideoResolved = heroVideo || (heroImage ? "" : HERO_VIDEO_DESKTOP); const heroVideoMobile = heroVideo || (heroImage ? "" : HERO_VIDEO_MOBILE); const heroWordmark = loc(c.heroWordmark, "SS BEAUTY", "SS BEAUTY", isAr); const heroEyebrow = loc( c.heroEyebrow, "We Believe In The Power Of Nature To Enhance Your Beauty.", "\u0646\u0624\u0645\u0646 \u0628\u0642\u0648\u0629 \u0627\u0644\u0637\u0628\u064A\u0639\u0629 \u0641\u064A \u062A\u0639\u0632\u064A\u0632 \u062C\u0645\u0627\u0644\u0643.", isAr ); const heroTitle = loc(c.heroTitle, "Unlock Your Natural Beauty", "\u0627\u0643\u062A\u0634\u0641\u064A \u062C\u0645\u0627\u0644\u0643 \u0627\u0644\u0637\u0628\u064A\u0639\u064A", isAr); const heroBody = loc( c.heroBody, "Our Premium Hair Oil Is Designed To Nourish Your Scalp, Restore Vitality To Your Hair, And Leave You Feeling Confident With Every Drop.", "\u0632\u064A\u062A \u0627\u0644\u0634\u0639\u0631 \u0627\u0644\u0641\u0627\u062E\u0631 \u0644\u062F\u064A\u0646\u0627 \u0645\u0635\u0645\u0645 \u0644\u062A\u063A\u0630\u064A\u0629 \u0641\u0631\u0648\u0629 \u0631\u0623\u0633\u0643\u060C \u0648\u0627\u0633\u062A\u0639\u0627\u062F\u0629 \u0627\u0644\u062D\u064A\u0648\u064A\u0629 \u0644\u0634\u0639\u0631\u0643\u060C \u0648\u0645\u0646\u062D\u0643 \u0627\u0644\u062B\u0642\u0629 \u0645\u0639 \u0643\u0644 \u0642\u0637\u0631\u0629.", isAr ); const heroCtaLabel = loc(c.heroCtaLabel, "Shop Now", "\u062A\u0633\u0648\u0642 \u0627\u0644\u0622\u0646", isAr); const heroCtaUrl = c.heroCtaUrl || "/shop/ss-beauty-hair-oil/ss-beauty-hair-oil"; const stackImages = [ resolveMediaUrl(c.stackImage1) || "https://cdn.packman.app/691482117c49620099aafaae.webp", resolveMediaUrl(c.stackImage2) || "https://cdn.packman.app/6916c1a9df8ad801a4a0fbe4.webp", resolveMediaUrl(c.stackImage3) || "https://cdn.packman.app/6914843f0baa7601072fdfee.webp", resolveMediaUrl(c.stackImage4) || "https://cdn.packman.app/691483550aa5f70233cdcd0f.webp", resolveMediaUrl(c.stackImage5) || "https://cdn.packman.app/691482282cd9c201125d4a1c.webp" ].filter(Boolean); const STACK_BADGE_INDEX = 3; const stackBadgeLabel = loc(c.stackBadgeLabel, "NEW", "\u062C\u062F\u064A\u062F", isAr); const ingredientsTitle = loc( c.ingredientsTitle, "Founded By Expert Of PHARMACISTS!", "\u062A\u0623\u0633\u0633\u062A \u0645\u0646 \u0642\u0628\u0644 \u0645\u062C\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0635\u064A\u0627\u062F\u0644\u0629 \u0627\u0644\u062E\u0628\u0631\u0627\u0621", isAr ); const ingredientsBody = loc( c.ingredientsBody, "Every Product Has A Special Origin Story, And Each Ingredient Is Carefully Selected To Maximize Its Benefits.", "\u0644\u0643\u0644 \u0645\u0646\u062A\u062C \u0642\u0635\u0629 \u0623\u0635\u0644 \u062E\u0627\u0635\u0629\u060C \u0648\u064A\u062A\u0645 \u0627\u062E\u062A\u064A\u0627\u0631 \u0643\u0644 \u0645\u0643\u0648\u0646 \u0628\u0639\u0646\u0627\u064A\u0629 \u0644\u062A\u062D\u0642\u064A\u0642 \u0623\u0642\u0635\u0649 \u0627\u0633\u062A\u0641\u0627\u062F\u0629 \u0645\u0646\u0647.", isAr ); const defaultIngredients = isAr ? [ { name: "\u0625\u0643\u0644\u064A\u0644 \u0627\u0644\u062C\u0628\u0644", icon: "https://cdn.packman.app/673dec77fdbe930168b11c1d.webp" }, { name: "\u062C\u0648\u0632 \u0627\u0644\u0647\u0646\u062F", icon: "https://cdn.packman.app/673dec564266cd0069dd3880.webp" }, { name: "\u062E\u0634\u0628 \u0627\u0644\u0623\u0631\u0632", icon: "https://cdn.packman.app/673dec4f6ea4b201f70a2fe0.webp" }, { name: "\u0639\u0628\u0627\u062F \u0627\u0644\u0634\u0645\u0633", icon: "https://cdn.packman.app/673e94c8347773015d6f74fd.webp" }, { name: "\u062C\u0646\u064A\u0646 \u0627\u0644\u0642\u0645\u062D", icon: "https://cdn.packman.app/673e94945fdf7101ec6ba7ca.webp" }, { name: "\u0627\u0644\u062E\u0632\u0627\u0645\u0649", icon: "https://cdn.packman.app/673dec7f42adf201897171af.webp" }, { name: "\u0632\u064A\u062A\u0648\u0646", icon: "https://cdn.packman.app/68b0290f33adad00faeb44b7.webp" }, { name: "\u0623\u0644\u0648 \u0641\u064A\u0631\u0627", icon: "https://cdn.packman.app/68b028f97c5fc802449b05a5.webp" }, { name: "\u0627\u0644\u0644\u064A\u0645\u0648\u0646", icon: "https://cdn.packman.app/68b028e05a1e2200e43e06fc.webp" }, { name: "\u0644\u0648\u0632", icon: "https://cdn.packman.app/68b02946202792011b9a3379.webp" }, { name: "\u062C\u0632\u0631", icon: "https://cdn.packman.app/68b029391935850053c033c7.webp" }, { name: "\u0641\u0631\u0627\u0646\u0643\u064A\u0646\u0633\u0646\u0633", icon: "https://cdn.packman.app/68b0292400b19a003d418683.webp" }, { name: "\u0646\u0628\u0627\u062A \u0627\u0644\u0645\u0631\u0651\u0629", icon: "https://cdn.packman.app/68b0297017d5c101aafd2182.webp" }, { name: "\u0628\u0630\u0648\u0631 \u0627\u0644\u0634\u064A\u0627", icon: "https://cdn.packman.app/68b029582a52a5015270c000.webp" } ] : [ { name: "Rosemary", icon: "https://cdn.packman.app/673dec77fdbe930168b11c1d.webp" }, { name: "Coconut", icon: "https://cdn.packman.app/673dec564266cd0069dd3880.webp" }, { name: "Cedar Wood", icon: "https://cdn.packman.app/673dec4f6ea4b201f70a2fe0.webp" }, { name: "Sunflower", icon: "https://cdn.packman.app/673e94c8347773015d6f74fd.webp" }, { name: "Wheat Germ", icon: "https://cdn.packman.app/673e94945fdf7101ec6ba7ca.webp" }, { name: "Lavender", icon: "https://cdn.packman.app/673dec7f42adf201897171af.webp" }, { name: "Olive", icon: "https://cdn.packman.app/68b0290f33adad00faeb44b7.webp" }, { name: "Aloe Vera", icon: "https://cdn.packman.app/68b028f97c5fc802449b05a5.webp" }, { name: "Lemon", icon: "https://cdn.packman.app/68b028e05a1e2200e43e06fc.webp" }, { name: "Almond", icon: "https://cdn.packman.app/68b02946202792011b9a3379.webp" }, { name: "Carrot", icon: "https://cdn.packman.app/68b029391935850053c033c7.webp" }, { name: "Frankincense", icon: "https://cdn.packman.app/68b0292400b19a003d418683.webp" }, { name: "Myrrh Plant", icon: "https://cdn.packman.app/68b0297017d5c101aafd2182.webp" }, { name: "Shea Seeds", icon: "https://cdn.packman.app/68b029582a52a5015270c000.webp" } ]; const ingredients = parseIngredients(c.ingredientsList).length ? parseIngredients(c.ingredientsList) : defaultIngredients; const featureTitle = loc(c.featureTitle, "Choose SS Beauty", "\u0627\u062E\u062A\u0627\u0631\u064A SS Beauty", isAr); const featureBody = loc( c.featureBody, "Deeply Nourishes And Moisturizes Your Scalp, Adds Shine And Vitality To All Hair Types, Infused With A Blend Of Essential Oils, Including Wheat Germ, Lavender, And Rosemary. Perfect For Dry Or Damaged Hair.", "\u064A\u063A\u0630\u064A \u0648\u064A\u0631\u0637\u0628 \u0641\u0631\u0648\u0629 \u0627\u0644\u0631\u0623\u0633 \u0628\u0639\u0645\u0642\u060C \u0648\u064A\u0636\u064A\u0641 \u0644\u0645\u0639\u0627\u0646\u0627\u064B \u0648\u062D\u064A\u0648\u064A\u0629 \u0644\u062C\u0645\u064A\u0639 \u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0634\u0639\u0631\u060C \u0645\u062F\u0639\u0651\u0645 \u0628\u0645\u0632\u064A\u062C \u0645\u0646 \u0627\u0644\u0632\u064A\u0648\u062A \u0627\u0644\u0623\u0633\u0627\u0633\u064A\u0629 \u0628\u0645\u0627 \u0641\u064A \u0630\u0644\u0643 \u062C\u0646\u064A\u0646 \u0627\u0644\u0642\u0645\u062D \u0648\u0627\u0644\u0644\u0627\u0641\u0646\u062F\u0631 \u0648\u0625\u0643\u0644\u064A\u0644 \u0627\u0644\u062C\u0628\u0644. \u0645\u062B\u0627\u0644\u064A \u0644\u0644\u0634\u0639\u0631 \u0627\u0644\u062C\u0627\u0641 \u0623\u0648 \u0627\u0644\u062A\u0627\u0644\u0641.", isAr ); const featureLinkLabel = loc(c.featureLinkLabel, "Discover More", "\u0627\u0643\u062A\u0634\u0641 \u0627\u0644\u0645\u0632\u064A\u062F", isAr); const featureLinkUrl = c.featureLinkUrl || "/shop"; const bannerImage = resolveMediaUrl(c.bannerImage) || "https://cdn.packman.app/691485344bbece015f9afcf6.webp"; const socialTitle = loc(c.socialTitle, "Connect, Create, And Explore:", "\u062A\u0648\u0627\u0635\u0644\u060C \u0623\u0646\u0634\u0626\u060C \u0648\u0627\u0633\u062A\u0643\u0634\u0641:", isAr); const socialHashtag = loc(c.socialHashtag, "#SSbeauty", "#SSbeauty", isAr); const socialSubtitle = loc( c.socialSubtitle, "Make Your Social Media Experience Unforgettable!", "\u0627\u062C\u0639\u0644 \u062A\u062C\u0631\u0628\u062A\u0643 \u0639\u0644\u0649 \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062A\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062C\u062A\u0645\u0627\u0639\u064A \u0644\u0627 \u062A\u064F\u0646\u0633\u0649!", isAr ); const socialFacebookUrl = c.socialFacebookUrl || "https://www.facebook.com/people/SSBeauty/61567189081986/"; const socialInstagramUrl = c.socialInstagramUrl || "https://www.instagram.com/ssbeautybyshero/"; const socialReviewLabel = loc(c.socialReviewLabel, "Let Us Know Your Experience!", "\u0634\u0627\u0631\u0643\u0646\u0627 \u062A\u062C\u0631\u0628\u062A\u0643!", isAr); const socialReviewUrl = c.socialReviewUrl || "https://www.google.com/"; const uspOneTitle = loc(c.uspOneTitle, "Free Shipping", "\u0634\u062D\u0646 \u0645\u062C\u0627\u0646\u064A", isAr); const uspOneSubtitle = loc(c.uspOneSubtitle, "Orders Above 1000AED", "\u0627\u0644\u0637\u0644\u0628\u0627\u062A \u0627\u0644\u062A\u064A \u062A\u0632\u064A\u062F \u0639\u0646 1000 \u062F\u0631\u0647\u0645", isAr); const uspTwoTitle = loc(c.uspTwoTitle, "New Arrivals!", "\u0648\u0627\u0641\u062F\u0648\u0646 \u062C\u062F\u062F!", isAr); const uspTwoSubtitle = loc(c.uspTwoSubtitle, "Latest Products", "\u0623\u062D\u062F\u062B \u0627\u0644\u0645\u0646\u062A\u062C\u0627\u062A", isAr); const uspThreeTitle = loc(c.uspThreeTitle, "Secure Payment", "\u062F\u0641\u0639 \u0622\u0645\u0646", isAr); const uspThreeSubtitle = loc(c.uspThreeSubtitle, "Guaranteed Secure Payment", "\u062F\u0641\u0639 \u0622\u0645\u0646 \u0645\u0636\u0645\u0648\u0646", isAr); const heroVideoRef = (0, import_react.useRef)(null); const HERO_VIDEO_RATE = 0.6; (0, import_react.useEffect)(() => { const v = heroVideoRef.current; if (!v) return; const apply = () => { try { v.playbackRate = HERO_VIDEO_RATE; } catch { } }; apply(); v.addEventListener("loadedmetadata", apply); v.addEventListener("play", apply); return () => { v.removeEventListener("loadedmetadata", apply); v.removeEventListener("play", apply); }; }, [heroVideoResolved, heroVideoMobile]); const rootRef = (0, import_react.useRef)(null); (0, import_react.useEffect)(() => { const root = rootRef.current; if (!root) return; const els = root.querySelectorAll(".ss-reveal"); if (!els.length) return; const obs = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("ss-in"); obs.unobserve(e.target); } }); }, { threshold: 0.14 } ); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, []); const USP_COUNT = 3; const [uspIndex, setUspIndex] = import_react.default.useState(0); const uspTrackRef = (0, import_react.useRef)(null); const uspCellRefs = (0, import_react.useRef)([]); const uspPausedRef = (0, import_react.useRef)(false); const uspUserScrollRef = (0, import_react.useRef)(false); (0, import_react.useEffect)(() => { const id = window.setInterval(() => { if (uspPausedRef.current) return; setUspIndex((i) => (i + 1) % USP_COUNT); }, 3500); return () => window.clearInterval(id); }, []); (0, import_react.useEffect)(() => { const cell = uspCellRefs.current[uspIndex]; const track = uspTrackRef.current; if (!cell || !track) return; if (track.scrollWidth <= track.clientWidth) return; const target = cell.offsetLeft - (track.clientWidth - cell.clientWidth) / 2; track.scrollTo({ left: target, behavior: "smooth" }); }, [uspIndex]); (0, import_react.useEffect)(() => { const track = uspTrackRef.current; if (!track) return; let raf = 0; const onScroll = () => { if (!uspUserScrollRef.current) return; cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const center = track.scrollLeft + track.clientWidth / 2; let best = 0; let bestDist = Infinity; uspCellRefs.current.forEach((cell, i) => { if (!cell) return; const cellCenter = cell.offsetLeft + cell.clientWidth / 2; const d = Math.abs(cellCenter - center); if (d < bestDist) { bestDist = d; best = i; } }); setUspIndex(best); }); }; track.addEventListener("scroll", onScroll, { passive: true }); return () => { track.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, []); const bannerRef = (0, import_react.useRef)(null); const bannerImgRef = (0, import_react.useRef)(null); (0, import_react.useEffect)(() => { const wrap = bannerRef.current; const img = bannerImgRef.current; if (!wrap || !img) return; const PARALLAX_RANGE = 60; let raf = 0; let active = false; const update = () => { raf = 0; const rect = wrap.getBoundingClientRect(); const vh = window.innerHeight || document.documentElement.clientHeight; const progress = (rect.top + rect.height / 2 - vh / 2) / (vh / 2 + rect.height / 2); const clamped = Math.max(-1, Math.min(1, progress)); const offset = clamped * PARALLAX_RANGE; img.style.transform = `translate3d(0, ${offset.toFixed(2)}px, 0)`; }; const onScroll = () => { if (raf) return; raf = window.requestAnimationFrame(update); }; const obs = new IntersectionObserver( (entries) => { for (const entry of entries) { if (entry.isIntersecting && !active) { active = true; window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); update(); } else if (!entry.isIntersecting && active) { active = false; window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); } } }, { rootMargin: "10% 0px 10% 0px", threshold: 0 } ); obs.observe(wrap); return () => { obs.disconnect(); if (active) { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); } if (raf) cancelAnimationFrame(raf); }; }, [bannerImage]); const wrapperCss = import_react2.css` direction: ${isAr ? "rtl" : "ltr"}; background: ${C.surface}; color: ${C.ink}; font-family: ${FONT}; -webkit-font-smoothing: antialiased; *, *::before, *::after { box-sizing: border-box; } .ss-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.85s cubic-bezier(.22,1,.36,1), transform 0.85s cubic-bezier(.22,1,.36,1); } .ss-reveal.ss-in { opacity: 1; transform: none; } a { color: inherit; text-decoration: none; } `; const heroSectionCss = import_react2.css` position: relative; width: 100%; height: clamp(560px, 78vh, 760px); color: ${C.ink}; overflow: hidden; background: ${C.surfaceDeep}; @media (max-width: 768px) { height: auto; aspect-ratio: 9 / 16; min-height: 560px; } `; const heroMediaCss = import_react2.css` position: absolute; inset: 0; z-index: 0; background-color: ${C.surfaceDeep}; background-image: ${heroImage ? `url(${heroImage})` : "none"}; background-size: cover; background-position: center; overflow: hidden; > video, > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* Desktop: faint left-to-right white wash so the bottom-left text block stays readable regardless of which frame of the hero video is showing. */ &::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( ${isAr ? "to left" : "to right"}, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 18%, rgba(255,255,255,0.18) 38%, rgba(255,255,255,0.00) 60% ); } /* Mobile: top + bottom soft white wash so both text stacks (eyebrow/title up top, body/CTA at the bottom) stay readable. */ @media (max-width: 768px) { &::after { background: linear-gradient( to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.45) 22%, rgba(255,255,255,0.00) 45%, rgba(255,255,255,0.00) 60%, rgba(255,255,255,0.55) 82%, rgba(255,255,255,0.95) 100% ); } } `; const heroInnerCss = import_react2.css` position: relative; z-index: 1; height: 100%; width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 56px); /* Desktop: bottom-left aligned text column. */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; text-align: ${isAr ? "right" : "left"}; /* Mobile: keep the original centered top + bottom flow. */ @media (max-width: 768px) { align-items: center; justify-content: space-between; text-align: center; } `; const heroDesktopBlockCss = import_react2.css` width: 100%; max-width: 620px; display: flex; flex-direction: column; align-items: ${isAr ? "flex-end" : "flex-start"}; gap: clamp(10px, 1.4vw, 18px); @media (max-width: 768px) { display: none; } `; const heroMobileTopCss = import_react2.css` display: none; @media (max-width: 768px) { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 720px; } `; const heroMobileBottomCss = import_react2.css` display: none; @media (max-width: 768px) { display: flex; flex-direction: column; align-items: center; gap: 18px; width: 100%; max-width: 640px; } `; const heroWordmarkCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 600; font-size: clamp(13px, 1.3vw, 15px); letter-spacing: 0.18em; color: ${C.ink}; text-transform: uppercase; `; const heroEyebrowCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.2vw, 14px); line-height: 1.5; color: ${C.inkSoft}; max-width: 48ch; `; const heroTitleCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(34px, 5.2vw, 64px); line-height: 1.04; letter-spacing: -0.02em; color: ${C.ink}; & strong { font-weight: 600; color: ${C.amberDeep}; } `; const heroBodyCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 14px); line-height: 1.6; color: ${C.inkSoft}; max-width: 60ch; `; const heroCtaCss = import_react2.css` display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 38px; background: ${C.ink}; color: ${C.surface}; font-family: ${FONT}; font-weight: 500; font-size: 13px; letter-spacing: 0.04em; border: 1px solid ${C.ink}; cursor: pointer; text-decoration: none; transition: background 0.4s ease, color 0.4s ease, gap 0.3s ease; margin-top: 6px; & span, & svg { color: ${C.surface}; transition: color 0.4s ease; } &:hover { background: transparent; color: ${C.ink}; gap: 14px; } &:hover span, &:hover svg { color: ${C.ink}; } `; const ingredientsSectionCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(48px, 7vw, 96px) 0; `; const ingredientsInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); display: grid; grid-template-columns: minmax(260px, 320px) 1fr; column-gap: clamp(32px, 5vw, 56px); align-items: center; @media (max-width: 900px) { grid-template-columns: 1fr; row-gap: 28px; text-align: center; justify-items: center; } `; const ingredientsHeadCss = import_react2.css` @media (max-width: 900px) { width: 100%; max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; } `; const ingredientsTitleCss = import_react2.css` margin: 0 0 16px; font-family: ${FONT}; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.18; letter-spacing: -0.01em; color: ${C.ink}; & strong { font-weight: 700; color: ${C.ink}; } @media (max-width: 900px) { margin: 0; font-size: clamp(22px, 5vw, 28px); text-align: center; } `; const ingredientsBodyCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.6; color: ${C.muted}; max-width: 36ch; @media (max-width: 900px) { max-width: 40ch; margin: 0 auto; text-align: center; font-size: 12px; } `; const ingredientsRowCss = import_react2.css` display: flex; align-items: flex-end; gap: clamp(20px, 2.6vw, 36px); overflow-x: auto; overflow-y: hidden; padding: 8px 4px 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; /* Subtle scrollbar so the affordance is there but quiet. */ scrollbar-width: thin; scrollbar-color: ${C.rule} transparent; &::-webkit-scrollbar { height: 4px; } &::-webkit-scrollbar-thumb { background: ${C.rule}; border-radius: 4px; } &::-webkit-scrollbar-track { background: transparent; } @media (max-width: 900px) { /* Switch from grid to a wrapping flex row so a partial final row (e.g. the last 2 ingredients out of 14) centers instead of sticking flush to the leading edge. */ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px clamp(12px, 3vw, 24px); overflow: visible; padding: 4px 0 0; width: 100%; max-width: 360px; margin: 0 auto; } `; const ingredientItemCss = import_react2.css` flex: 0 0 auto; min-width: 84px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; scroll-snap-align: start; text-align: center; img { width: 56px; height: 56px; object-fit: contain; transition: transform 0.4s cubic-bezier(.22,1,.36,1); } &:hover img { transform: translateY(-2px) scale(1.04); } .label { font-family: ${FONT}; font-weight: 400; font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.01em; color: ${C.muted}; text-align: center; } @media (max-width: 900px) { /* Each item takes ~1/3 of the 360px max-width container minus the row gap. Fixed basis means the last partial row stays centered as a block by the parent's justify-content: center. */ flex: 0 0 84px; width: 84px; min-width: 0; } `; const stackSectionCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(8px, 1vw, 16px) 0 clamp(24px, 3vw, 40px); `; const stackInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(0px, 1vw, 12px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 12px); @media (max-width: 900px) { grid-template-columns: 1fr; gap: 0; padding: 0; } `; const stackTileCss = import_react2.css` position: relative; width: 100%; overflow: hidden; background: ${C.surfaceSoft}; aspect-ratio: 4 / 5; @media (max-width: 900px) { aspect-ratio: 3 / 4; } /* The 5th stack image is mobile-only. On desktop the 4-column grid must end at four tiles — the bottle/dropper still in position 5 is reused as the standalone banner further down the page, so rendering it here on desktop both leaves a half-empty row beside it (3 empty grid cells) and double-counts the same shot. Hide it at the breakpoint where the grid switches to 4 columns. */ @media (min-width: 901px) { &:nth-of-type(5) { display: none; } } img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.6s cubic-bezier(.22,1,.36,1); } &:hover img { transform: scale(1.04); } `; const stackBadgeCss = import_react2.css` position: absolute; top: 16px; ${isAr ? "right" : "left"}: 16px; z-index: 2; font-family: ${FONT}; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: ${C.ink}; padding: 0; `; const featureCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 56px) clamp(40px, 5vw, 64px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2vw, 22px); `; const featureTitleCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 500; font-size: clamp(20px, 2.4vw, 26px); color: ${C.ink}; `; const featureBodyCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.65; color: ${C.muted}; max-width: 68ch; `; const featureLinkCss = import_react2.css` display: inline-block; font-family: ${FONT}; font-weight: 500; font-size: clamp(13px, 1.3vw, 14px); color: ${C.ink}; border-bottom: 1px solid ${C.ink}; padding: 4px 0; transition: color 0.3s ease, border-color 0.3s ease; margin-top: 6px; &:hover { color: ${C.amberDeep}; border-bottom-color: ${C.amberDeep}; } `; const bannerCss = import_react2.css` position: relative; width: 100%; overflow: hidden; background-color: ${C.surfaceDeep}; aspect-ratio: 21 / 9; @media (max-width: 768px) { aspect-ratio: 4 / 5; } `; const bannerImgCss = import_react2.css` position: absolute; inset: 0; width: 100%; /* Over-tall so we always have travel room above + below the container when we translate the image during scroll. */ height: 130%; top: -15%; object-fit: cover; object-position: center; will-change: transform; transform: translate3d(0, 0, 0); `; const socialSectionCss = import_react2.css` width: 100%; background: ${C.surface}; padding: clamp(40px, 6vw, 80px) 0; `; const socialInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); display: grid; grid-template-columns: 1fr auto; column-gap: clamp(32px, 5vw, 56px); align-items: center; @media (max-width: 768px) { grid-template-columns: 1fr; row-gap: 24px; text-align: center; justify-items: center; } `; const socialTextCss = import_react2.css` display: flex; flex-direction: column; gap: 10px; `; const socialTitleCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; color: ${C.ink}; & strong { font-weight: 600; color: ${C.amberDeep}; } `; const socialHashtagCss = import_react2.css` margin: 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.18; color: ${C.ink}; `; const socialSubtitleCss = import_react2.css` margin: 6px 0 0; font-family: ${FONT}; font-weight: 400; font-size: clamp(12px, 1.1vw, 13px); line-height: 1.55; color: ${C.muted}; max-width: 56ch; `; const socialActionsCss = import_react2.css` display: inline-flex; align-items: center; gap: 18px; @media (max-width: 768px) { flex-direction: column; gap: 16px; } `; const socialIconsCss = import_react2.css` display: inline-flex; align-items: center; gap: 12px; `; const socialIconBtnCss = import_react2.css` display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: ${C.ink}; color: ${C.surface}; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; /* The wrapper has \`a { color: inherit }\` which would otherwise override the white color above and leave the Tabler icon black-on-black. Force the SVG stroke to white explicitly. */ & svg { color: ${C.surface}; stroke: ${C.surface}; } &:hover { background: ${C.amberDeep}; transform: translateY(-2px); } &:hover svg { color: ${C.surface}; stroke: ${C.surface}; } `; const socialReviewBtnCss = import_react2.css` display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: ${C.ink}; color: ${C.surface}; font-family: ${FONT}; font-weight: 500; font-size: 13px; letter-spacing: 0.02em; border: 1px solid ${C.ink}; transition: background 0.35s ease, color 0.35s ease, gap 0.3s ease; text-decoration: none; & span, & svg { color: ${C.surface}; transition: color 0.35s ease; } &:hover { background: transparent; color: ${C.ink}; gap: 14px; } &:hover span, &:hover svg { color: ${C.ink}; } `; const uspSectionCss = import_react2.css` width: 100%; background: ${C.surfaceSoft}; border-top: 1px solid ${C.ruleSoft}; border-bottom: 1px solid ${C.ruleSoft}; overflow: hidden; `; const uspInnerCss = import_react2.css` width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(18px, 2.5vw, 28px) clamp(20px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); @media (max-width: 720px) { /* Switch to a horizontal scroll-snap slider on mobile — each cell is a full-width snap target. */ display: flex; grid-template-columns: none; padding: 18px 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; &::-webkit-scrollbar { display: none; } } `; const uspCellCss = import_react2.css` display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 14px clamp(12px, 2vw, 24px); &:not(:last-of-type) { border-${isAr ? "left" : "right"}: 1px solid ${C.rule}; } @media (max-width: 720px) { flex: 0 0 100%; width: 100%; padding: 8px 20px; scroll-snap-align: center; &:not(:last-of-type) { border-right: none; border-left: none; } } .t { font-family: ${FONT}; font-weight: 500; font-size: clamp(14px, 1.4vw, 16px); color: ${C.ink}; } .s { font-family: ${FONT}; font-weight: 400; font-size: 12px; color: ${C.muted}; } `; const uspDotsCss = import_react2.css` display: none; @media (max-width: 720px) { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 0 12px; } `; const uspDotCss = (active) => import_react2.css` width: ${active ? "16px" : "6px"}; height: 4px; border-radius: 2px; background: ${active ? C.ink : C.rule}; border: 0; padding: 0; transition: width 0.3s ease, background 0.3s ease; cursor: pointer; `; const ingredientsTitleParts = parseTitleHtml(String(ingredientsTitle)); const socialTitleParts = parseTitleHtml(String(socialTitle)); return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: rootRef, css: wrapperCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_react2.Global, { styles: import_react2.css` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); html, body { background: ${C.surface}; margin: 0; padding: 0; } ` } ), show("showHero") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: heroSectionCss, "aria-label": "Cover", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: heroMediaCss, "aria-hidden": "true", children: heroImage ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "video", { ref: heroVideoRef, autoPlay: true, muted: true, loop: true, playsInline: true, preload: "auto", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("source", { src: heroVideoMobile, media: "(max-width: 768px)", type: "video/mp4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("source", { src: heroVideoResolved, type: "video/mp4" }) ] } ) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroInnerCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroDesktopBlockCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroWordmarkCss, children: heroWordmark }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroEyebrowCss, children: heroEyebrow }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { css: heroTitleCss, children: heroTitle }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroBodyCss, children: heroBody }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sdk.Link, { href: heroCtaUrl, css: heroCtaCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: heroCtaLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_icons_react.IconArrowRight, { size: 14, stroke: 1.8, style: { transform: isAr ? "scaleX(-1)" : "none" } } ) ] }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroMobileTopCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroEyebrowCss, children: heroEyebrow }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { css: heroTitleCss, children: heroTitle }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: heroMobileBottomCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: heroBodyCss, children: heroBody }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_sdk.Link, { href: heroCtaUrl, css: heroCtaCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: heroCtaLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_icons_react.IconArrowRight, { size: 14, stroke: 1.8, style: { transform: isAr ? "scaleX(-1)" : "none" } } ) ] }) ] }) ] }) ] }), show("showStack") && stackImages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { css: stackSectionCss, "aria-label": "Editorial", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: stackInnerCss, children: stackImages.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "div", { css: stackTileCss, className: "ss-reveal", "data-stack-index": i, children: [ i === STACK_BADGE_INDEX && stackBadgeLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { css: stackBadgeCss, children: stackBadgeLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt: "", loading: "lazy" }) ] }, i )) }) }), show("showIngredients") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { css: ingredientsSectionCss, "aria-label": "Ingredients", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: ingredientsInnerCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: ingredientsHeadCss, className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { css: ingredientsTitleCss, children: ingredientsTitleParts.map( (p, i) => p.text === "\n" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}, i) : p.bold ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: p.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: p.text }, i) ) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: ingredientsBodyCss, children: ingredientsBody }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: ingredientsRowCss, className: "ss-reveal", role: "list", "aria-label": "Natural ingredients", children: ingredients.map((it, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: ingredientItemCss, role: "listitem", children: [ it.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: it.icon, alt: "", loading: "lazy" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: it.name }) ] }, i)) }) ] }) }), show("showFeature") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: featureCss, "aria-label": "Choose SS Beauty", className: "ss-reveal", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { css: featureTitleCss, children: featureTitle }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: featureBodyCss, children: featureBody }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sdk.Link, { href: featureLinkUrl, css: featureLinkCss, children: featureLinkLabel }) ] }), show("showBanner") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "div", { css: bannerCss, ref: bannerRef, role: "img", "aria-label": "SS Beauty editorial banner", className: "ss-reveal", children: bannerImage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "img", { ref: bannerImgRef, css: bannerImgCss, src: bannerImage, alt: "", loading: "lazy" } ) } ), show("showSocial") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { css: socialSectionCss, "aria-label": "Connect with us", className: "ss-reveal", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialInnerCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialTextCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { css: socialTitleCss, children: socialTitleParts.map( (p, i) => p.text === "\n" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}, i) : p.bold ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: p.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: p.text }, i) ) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: socialHashtagCss, children: socialHashtag }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { css: socialSubtitleCss, children: socialSubtitle }) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialActionsCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { css: socialIconsCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "a", { href: socialFacebookUrl, target: "_blank", rel: "noopener noreferrer", css: socialIconBtnCss, "aria-label": "Facebook", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconBrandFacebook, { size: 18, stroke: 1.6 }) } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "a", { href: socialInstagramUrl, target: "_blank", rel: "noopener noreferrer", css: socialIconBtnCss, "aria-label": "Instagram", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons_react.IconBrandInstagram, { size: 18, stroke: 1.6 }) } ) ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "a", { href: socialReviewUrl, target: "_blank", rel: "noopener noreferrer", css: socialReviewBtnCss, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: socialReviewLabel }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_icons_react.IconArrowRight, { size: 13, stroke: 1.8, style: { transform: isAr ? "scaleX(-1)" : "none" } } ) ] } ) ] }) ] }) }), show("showUsps") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { css: uspSectionCss, "aria-label": "Site benefits", children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "div", { css: uspInnerCss, ref: uspTrackRef, onTouchStart: () => { uspPausedRef.current = true; uspUserScrollRef.current = true; }, onTouchEnd: () => { uspPausedRef.current = false; }, onMouseEnter: () => { uspPausedRef.current = true; }, onMouseLeave: () => { uspPausedRef.current = false; uspUserScrollRef.current = false; }, children: [ { t: uspOneTitle, s: uspOneSubtitle }, { t: uspTwoTitle, s: uspTwoSubtitle }, { t: uspThreeTitle, s: uspThreeSubtitle } ].map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)( "div", { css: uspCellCss, ref: (el) => { uspCellRefs.current[i] = el; }, children: [ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "t", children: cell.t }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "s", children: cell.s }) ] }, i )) } ), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { css: uspDotsCss, "aria-hidden": "true", children: Array.from({ length: USP_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "button", { type: "button", css: uspDotCss(i === uspIndex), onClick: () => { uspPausedRef.current = true; uspUserScrollRef.current = false; setUspIndex(i); window.setTimeout(() => { uspPausedRef.current = false; }, 4500); }, "aria-label": `Show benefit ${i + 1}` }, i )) }) ] }) ] }); }

404

الصفحة غير موجودة