// Services: logo strip + service grid. const NS_SVC = window.AnsysDigitalDesignSystem_4543d7; if (!document.getElementById("svc-marquee-kf")) { const st = document.createElement("style"); st.id = "svc-marquee-kf"; st.textContent = "@keyframes svcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}" + "@keyframes svcMarqueeRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}" + ".svc-mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}" + ".svc-mq:hover .svc-mq-track{animation-play-state:paused}" + ".svc-mq-chip:hover img{opacity:1!important;filter:grayscale(0)!important}" + "@media (prefers-reduced-motion:reduce){.svc-mq-track{animation:none!important}}"; document.head.appendChild(st); } function MarqueeRow({ logos, reverse, dur }) { const loop = logos.concat(logos); return (

{loop.map((l, i) => ( {l.src ?

: {l.name}} ))}

); } // Two rows drifting in opposite directions — more presence, keeps the eye moving. function LogoMarquee({ logos }) { const half = Math.ceil(logos.length / 2); return (

); } function Services() { const { SectionHeading, Card, LogoWall, Eyebrow } = NS_SVC; const services = [ { icon: "layout-template", title: "Shopify Store Design", desc: "Premium, conversion-focused storefront design tailored to your brand and products." }, { icon: "code-2", title: "Shopify Development", desc: "Custom theme and store development built for speed, control, and clean code." }, { icon: "paintbrush", title: "Store Redesign", desc: "Refresh an existing Shopify store into a modern, high-converting experience." }, { icon: "sliders-horizontal", title: "Theme Customization", desc: "Tailor any Shopify theme exactly to your brand, layout, and functionality needs." }, { icon: "gauge", title: "Speed Optimization", desc: "Faster load times and Core Web Vitals in the green so you never lose a sale." }, { icon: "replace", title: "Migration", desc: "Move to Shopify from any platform with zero data loss and no SEO drop." }, { icon: "layout", title: "Landing Page Design", desc: "High-converting Shopify landing pages built for campaigns and product launches." }, { icon: "line-chart", title: "CRO Optimization", desc: "Research-led improvements that turn more of your traffic into paying customers." }, { icon: "life-buoy", title: "Maintenance & Support", desc: "Ongoing updates, fixes, and support to keep your store running perfectly." }, { icon: "repeat-2", title: "2 free revisions", desc: "Two complimentary rounds of changes after your project is complete, valid for 21 days post-delivery." }, { icon: "graduation-cap", title: "30-min onboarding training", desc: "A free 30-minute Google Meet walkthrough on delivery — ideal for beginners running their first store." }, ]; const [showAll, setShowAll] = React.useState(false); const [isMobile, setIsMobile] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(max-width:640px)"); const on = () => setIsMobile(mq.matches); on(); mq.addEventListener("change", on); return () => mq.removeEventListener("change", on); }, []); const shownServices = (isMobile || showAll) ? services : services.slice(0, 6); const stackRef = React.useRef(null); React.useEffect(() => { if (!isMobile || !stackRef.current) return; const cards = [...stackRef.current.children]; const tops = cards.map((c) => c.getBoundingClientRect().top + window.scrollY); cards.forEach((c) => { c.style.transformOrigin = "top center"; c.style.transition = "transform .15s linear"; c.style.willChange = "transform"; }); let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { cards.forEach((c, i) => { const stickyTop = 80 + i * 14; const pinnedBy = (window.scrollY + stickyTop) - tops[i]; const p = pinnedBy > 0 ? Math.min(1, pinnedBy / 320) : 0; const s = 1 - p * 0.08; c.style.transform = "scale(" + s + ") rotate(" + (p * (i % 2 ? 1.8 : -1.8)) + "deg)"; }); }); }; const remeasure = () => { cards.forEach((c) => { c.style.transform = "none"; }); cards.forEach((c, i) => { tops[i] = c.getBoundingClientRect().top + window.scrollY; }); onScroll(); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", remeasure); return () => { cancelAnimationFrame(raf); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", remeasure); cards.forEach((c) => { c.style.transform = ""; c.style.transition = ""; }); }; }, [isMobile, showAll]); return (

Recent Shopify projects

{shownServices.map((s, i) => { const dir = isMobile ? "" : (i % 3 === 0 ? "slide-l" : i % 3 === 2 ? "slide-r" : ""); return (

{isMobile ? (

{s.title}

{s.desc}

) : (

{s.title}

{s.desc}

)}

); })}

{!isMobile && services.length > 6 && (

)}

); } Object.assign(window, { Services });