// Homepage sections — used both standalone and inside canvas variations. const { useEffect: useEffHome, useRef: useRefHome, useState: useStateHome } = React; /* ---------- Hero copy (variation can swap visual) ---------- */ function HeroSection({ visual = "A", headlineColor, motion = true, primaryHue = "sage", accentHue = "terra", orbScale = 1, orbPosition = "right", } = {}) { const Visual = visual === "A" ? Hero3D_A : visual === "B" ? Hero3D_B : Hero3D_C; const layoutCenter = visual === "C"; const visualProps = visual === "A" ? { motion, primaryHue, accentHue, orbScale, position: orbPosition } : {}; return (
A boutique BPO for scaling commerce

Harmonizing
businesses with
their clients.

Enterprise-grade customer support and sales for brands that haven't reached enterprise scale — yet. Whatever outcome you set as right, becomes our north star.

Let's chat View our services
{/* Tiny meta strip */}
● 24/5 coverage — Sales + support, one team — First reply < 2 min
); } /* ---------- Manifesto (quiet luxury statement) ---------- */ function ManifestoSection() { return (
Our promise

We treat every conversation — sales or support — the way  you would: with patience, precision, and the assumption it's the one they'll remember.

); } function Stat({ figure, label }) { return (
{figure}
{label}
); } /* ---------- Services breakdown (4 channels) ---------- */ const SERVICES = [ { id: "email", name: "Email", tag: "01", desc: "Thoughtful, on-brand replies — never a templated wall of text. We write like your founder would.", bullets: ["Branded macros", "Same-day SLA", "Order, returns, escalations"], accent: "sage", }, { id: "chat", name: "Live Chat", tag: "02", desc: "Real humans answering in under 30 seconds during your highest-intent moments — the cart, the checkout, the doubt.", bullets: ["< 30s pickup", "Cart recovery", "Pre-sale to post-purchase"], accent: "terra", }, { id: "voice", name: "Voice", tag: "03", desc: "Phone support that sounds like home. Calm, capable, never reading from a script you didn't approve.", bullets: ["Inbound & outbound", "Local accents", "VIP retention calls"], accent: "ink", }, { id: "social", name: "Social & DMs", tag: "04", desc: "Instagram, TikTok, X, Facebook — answered in the tone your community already loves you for.", bullets: ["Comment moderation", "DM triage", "Crisis playbooks"], accent: "sage", }, ]; function ServicesSection() { const [active, setActive] = useStateHome(0); return (
Services — four channels, one voice

Wherever your customer reaches out, we're already there.

{/* Channel list */}
{SERVICES.map((s, i) => ( ))}
{/* Detail panel */}
); } function ServicePanel({ service }) { return (
Channel · {service.name} {service.tag}

{service.desc}

{/* sample message ui */}
); } function SampleBubble({ who, text, accent }) { const isUs = who === "us"; const accentColor = accent === "sage" ? "var(--sage)" : accent === "terra" ? "var(--terra)" : "var(--ink)"; return (
{isUs && } {text}
); } /* ---------- Industries marquee ---------- */ function IndustriesSection() { const items = [ "Apparel", "Footwear", "Skincare", "Beauty", "Home Goods", "Jewelry", "Wellness", "Supplements", "Coffee", "Pet", "Kitchen", "Outdoor", "Eyewear", ]; const row = items.concat(items); return (
Who we serve

We work best with founders who've outgrown "can someone reply to support today?"

Direct-to-consumer brands between $1M and $50M in annual revenue — scaling fast, still small enough to care about every reply.

{row.map((x, i) => ( {x} ✦ ))}
{/* Tier callouts */}
); } function Tier({ range, title, body, accent }) { return (
{range}

{title}

{body}

); } /* ---------- Closing CTA ---------- */ function ClosingCTA() { return (
{/* subtle ring */}
Next step

A 30-minute conversation. Zero sales theatre.

Let's chat See what we do
); } /* ---------- Service categories (homepage) — two big cards ---------- */ function ServiceCategoriesSection() { return (
Services

Three boutique practices. One standard of care.

We run three specialized teams under the same roof — so the voice that closes the sale, the one that handles the ticket weeks later, and the right hand running your week all belong to the same brand.

); } function CategoryCard({ href, kicker, title, blurb, channels, accent }) { const [hover, setHover] = useStateHome(false); const accentColor = accent === "terra" ? "var(--terra)" : accent === "ink" ? "var(--ink)" : "var(--sage)"; const accentDeep = accent === "terra" ? "var(--terra-deep)" : accent === "ink" ? "var(--ink)" : "var(--sage-deep)"; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "var(--cream)", border: "1px solid var(--line)", padding: 48, display: "flex", flexDirection: "column", gap: 0, minHeight: 480, transition: "all .35s cubic-bezier(.2,.7,.2,1)", transform: hover ? "translateY(-4px)" : "none", boxShadow: hover ? "0 24px 60px rgba(47,62,70,0.08)" : "0 0 0 rgba(0,0,0,0)", position: "relative", overflow: "hidden", }}> {/* decorative orb */}
{kicker}

{title}

{blurb}

Learn more
); } Object.assign(window, { HeroSection, ManifestoSection, ServicesSection, ServiceCategoriesSection, IndustriesSection, ClosingCTA, });