// Capabilities: advanced Shopify features offered, grouped in tabs. const NS_CAP = window.AnsysDigitalDesignSystem_4543d7; const CAP_GROUPS = [ { key: "sections", label: "Advanced sections", count: "30+", blurb: "Powerful sections to design your store exactly the way you envision it.", items: [ { icon: "sparkles", title: "Animated Richtext", desc: "Smooth fade-in text animations that captivate visitors as they scroll.", badge: "NEW" }, { icon: "layout-grid", title: "Matrix Grid", desc: "Showcase visuals at the centre with content blocks on either side.", badge: "NEW" }, { icon: "chevrons-down-up", title: "Advanced Accordion", desc: "Each accordion opens with a matching image on the side.", badge: "NEW" }, { icon: "list-ordered", title: "Numbered Slider", desc: "Navigate your story with numbered vertical tabs for a clean, modern feel.", badge: "NEW" }, { icon: "package-plus", title: "Bundle Builder", desc: "Let customers build their perfect bundle and see instant savings — no reloads." }, { icon: "images", title: "Hero Slideshow", desc: "Striking hero slides that capture attention at first glance." }, { icon: "text-cursor", title: "Marquee Scroller", desc: "Infinite scrolling text or logos to add motion between sections." }, { icon: "play-circle", title: "Shoppable Videos", desc: "Turn UGC into sales — make every video clip shoppable." }, { icon: "gallery-vertical-end", title: "Sticky Media", desc: "Showcase stunning images while highlighting key product messages." }, { icon: "move-diagonal", title: "Parallax Media", desc: "Display calls to action beautifully without disrupting page flow." }, { icon: "columns-2", title: "Image Compare", desc: "Before-and-after sliders — ideal for beauty and results-led stores." }, { icon: "table-2", title: "Pricing Plans", desc: "Compare features across products and add to cart from the table." }, { icon: "instagram", title: "Instagram Gallery", desc: "Show your best Instagram posts in an engaging infinite gallery." }, { icon: "align-justify", title: "Table Compare", desc: "Compare your product's advantages against competitors side by side." }, { icon: "mail-plus", title: "Contact Form Builder", desc: "Advanced contact forms with custom fields and smart validation." }, { icon: "timer", title: "Animated Countdown", desc: "Drive urgency for BFCM, limited offers, and event-based promotions." }, { icon: "bell", title: "Newsletter Popup", desc: "Capture subscribers with controlled timing and frequency." }, { icon: "quote", title: "Testimonials Slider", desc: "A sleek, animated review slider that builds social proof instantly." }, { icon: "book-image", title: "Lookbook", desc: "Bring products to life with lifestyle visuals for fashion and beauty." }, { icon: "layers", title: "+10 more sections", desc: "Additional flexible sections for richer homepage and editorial pages.", more: true }, ], }, { key: "product", label: "Product page", count: "15+", blurb: "Sell more with advanced upsells, cross-sells, and conversion tools.", items: [ { icon: "shuffle", title: "Product switcher", desc: "Show similar products and let customers switch without leaving the page.", badge: "NEW" }, { icon: "palette", title: "Color swatches", desc: "Beautiful colour options across product pages and product cards." }, { icon: "arrow-down-to-line", title: "Sticky add to cart", desc: "Keep the Add to Cart button visible on long scrolling pages." }, { icon: "layers-3", title: "Quantity breaks", desc: "Smart bulk pricing and volume discounts — no extra apps needed." }, { icon: "bar-chart-3", title: "Inventory / stock bar", desc: "Create urgency by showing how many items are left in stock." }, { icon: "list-checks", title: "Upsell checkboxes", desc: "Let shoppers add complementary products with a single click." }, { icon: "git-merge", title: "Cross-sells", desc: "Bundle items together and let customers buy them all at once." }, { icon: "pen-line", title: "Personalization fields", desc: "Custom names, notes, or uploads for made-to-order products." }, { icon: "ruler", title: "Size chart", desc: "A clear, interactive size-chart modal with per-category tables." }, { icon: "shield-check", title: "Trust icons", desc: "Trust badges right under Add to Cart to build instant confidence." }, { icon: "truck", title: "Delivery dates", desc: "Show estimated delivery times and skip weekends to boost confidence." }, { icon: "plus-circle", title: "+3 more features", desc: "Extra product-page tools for merchandising, confidence, and conversion.", more: true }, ], }, { key: "cart", label: "Cart", count: "10+", blurb: "Improve conversion rates with powerful, high-converting carts.", items: [ { icon: "megaphone", title: "Cart announcement", desc: "Highlight promotions in the cart to nudge customers toward checkout." }, { icon: "alert-triangle", title: "Low-stock info", desc: "Add urgency with low-stock messages reminding customers items may sell out." }, { icon: "repeat", title: "Variant switcher", desc: "Change product variants directly in the cart — no remove and re-add." }, { icon: "calendar-sync", title: "Upgrade to subscription", desc: "Let customers switch from one-time purchases to subscriptions in the cart." }, { icon: "target", title: "3-tier cart goal", desc: "Dynamic goals that unlock rewards as carts reach higher values." }, { icon: "shopping-bag", title: "Cart upsells", desc: "Show related products in the cart so customers can add more before checkout." }, { icon: "gift", title: "Gift upsell", desc: "Offer gift wrapping or small add-ons to lift average order value." }, { icon: "ticket-percent", title: "Discount form", desc: "Apply discount codes in the cart drawer — no need to wait until checkout." }, { icon: "plus-circle", title: "+2 more features", desc: "Additional cart options designed to help shoppers complete their purchase.", more: true }, ], }, ]; function Capabilities() { const { SectionHeading, Eyebrow } = NS_CAP; const [tab, setTab] = React.useState(0); 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 g = CAP_GROUPS[tab]; const items = (isMobile || showAll) ? g.items : g.items.slice(0, 9); 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; c.style.transform = "scale(" + (1 - p * 0.08) + ") 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, tab, showAll]); return (
{CAP_GROUPS.map((grp, i) => ( ))}

{g.blurb}

{items.map((f, i) => (

{f.title}

{f.badge ? {f.badge} : null}

{f.desc}

))}
{!isMobile && g.items.length > 9 && (
)}
); } Object.assign(window, { Capabilities });