/* Search Hive — home page sections + app Uses shared.jsx chrome and the bound design system. */ const { Button, Badge, Tag, Avatar, Rating, Card } = window.SearchHiveDesignSystem_3f2abd; /* ---- imagery (Unsplash, warm/natural light) --------------------- */ const IMG = (id, w = 1100) => `https://images.unsplash.com/photo-${id}?auto=format&fit=crop&w=${w}&q=80`; const HERO_A = IMG("1522202176988-66273c2fd55f", 900); const HERO_B = IMG("1600880292203-757bb62b4baf", 700); const HERO_C = IMG("1531973576160-7125cd663d86", 700); /* ================================================================= * * HERO * ================================================================= */ function Hero({ headline }) { return (
{/* copy */}
New 2026 growth openings — 4 left

{headline[0]}{headline[1]}{headline[2]}

We’re a growth studio that blends brand, design, and performance — so the right people find you, trust you, and come back. No fluff, just compounding results.

{/* on-brand search-pill CTA */}
{ e.preventDefault(); window.location.href = "contact.html"; }} style={{ marginTop: 30, display: "flex", alignItems: "center", gap: 8, padding: 8, maxWidth: 520, background: "var(--canvas)", borderRadius: 999, boxShadow: "var(--shadow-float)" }}>
{["1494790108377-be9c29b29330", "1500648767791-00dcc994a43e", "1438761681033-6461ffad8d80", "1507003211169-0a1dd7228f2d"].map((id, i) => ( ))}

Average rating from brands in the hive

{/* image cluster */}
Search Hive team at work
{/* floating stat card */}

+312%

median organic growth
); } /* ================================================================= * * STATS * ================================================================= */ const STATS = [ { n: "3.4×", l: "average return on ad spend" }, { n: "120+", l: "brands growing in the hive" }, { n: "312%", l: "median organic growth" }, { n: "48M", l: "monthly impressions shaped" }, ]; function Stats() { return (
{STATS.map((s) => (

{s.n}

{s.l}

))}
); } /* ================================================================= * * SERVICES * ================================================================= */ const SERVICES = [ { icon: "palette", t: "Brand & identity", d: "Naming, logo systems, and a voice that sounds like you — built to scale across every surface." }, { icon: "target", t: "Performance marketing", d: "Paid search, social, and retargeting that earns its keep. We optimise to revenue, not vanity clicks." }, { icon: "pen-tool", t: "Web & product design", d: "Fast, warm, conversion-led sites and product UI — designed and built end to end." }, { icon: "search", t: "Content & SEO", d: "Topic authority, technical health, and stories worth ranking. Compounding traffic, month over month." }, { icon: "megaphone", t: "Social & creative", d: "Thumb-stopping creative and always-on community that turns audiences into advocates." }, { icon: "compass", t: "Growth strategy", d: "A clear, honest roadmap with the metrics that matter — so every sprint moves a real number." }, ]; function ServiceCard({ s }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ textDecoration: "none", display: "block", height: "100%" }}>

{s.t}

{s.d}

Explore ); } function Services() { return (
What we do

One studio, the whole growth stack

Strategy, brand, build, and media — handled by one tight team that actually talks to each other. No handoffs lost in translation.

{SERVICES.map((s) => )}
); } /* ================================================================= * * APPROACH / PROCESS * ================================================================= */ const STEPS = [ { n: "01", t: "Listen", d: "We start with your customers, your numbers, and your goals — not a template. A week of discovery before a single pixel." }, { n: "02", t: "Map", d: "A clear plan: the moves, the metrics, the timeline. You’ll know exactly what we’re doing and why." }, { n: "03", t: "Make", d: "Brand, site, and campaigns built fast and tested in the wild. Small bets, quick reads, sharp iteration." }, { n: "04", t: "Scale", d: "We double down on what works and cut what doesn’t — compounding the wins month after month." }, ]; function Approach() { return (
How we work

A calm, honest way to grow

Four phases, run in tight loops. You’re never more than a week from a result you can see.

{STEPS.map((s, i) => (

{s.n}

{s.t}

{s.d}

))}
); } /* ================================================================= * * WORK / CASE STUDIES * ================================================================= */ const WORK = [ { img: IMG("1441986300917-64674bd600d8", 1100), tag: "Retail · Brand + Web", client: "Marigold & Oak", result: "Rebrand + Shopify rebuild lifts revenue per visitor", metric: "+214%", metricLabel: "revenue / visitor", featured: true }, { img: IMG("1556742049-0cfed4f6a45d", 700), tag: "DTC food", client: "Honeycomb Kitchen", result: "Performance media at a profitable 4.1× ROAS", metric: "4.1×", metricLabel: "ROAS" }, { img: IMG("1542291026-7eec264c27ff", 700), tag: "Footwear", client: "Stride Republic", result: "SEO + content engine triples organic sessions", metric: "+308%", metricLabel: "organic traffic" }, ]; function WorkCard({ w, featured }) { const [h, setH] = React.useState(false); return ( setH(true)} onMouseLeave={() => setH(false)} style={{ textDecoration: "none", display: "block", height: "100%" }}>
{w.client}
{w.tag}

{w.metric}

{w.metricLabel}

{w.client}

{w.result}

Read case study
); } function Work() { return (
Proven work

Growth you can point to

); } /* ================================================================= * * TESTIMONIALS * ================================================================= */ const QUOTES = [ { q: "Search Hive rebuilt our brand and our funnel in one go. Six months in, paid is finally profitable and the site converts twice as well.", name: "Priya Menon", role: "Founder, Marigold & Oak", img: "1494790108377-be9c29b29330", rating: 5 }, { q: "The most honest agency we’ve worked with. They cut the budget we were wasting and put it where it actually moved revenue.", name: "Daniel Osei", role: "CMO, Honeycomb Kitchen", img: "1500648767791-00dcc994a43e", rating: 5 }, { q: "They treat our numbers like their own. Organic traffic tripled and we finally rank for the terms that matter.", name: "Sara Lindqvist", role: "Head of Growth, Stride Republic", img: "1438761681033-6461ffad8d80", rating: 5 }, ]; function QuoteCard({ q }) { return (

“{q.q}”

{q.name}

{q.role}

 ); } function Testimonials() { return (
In their words

Brands that found their place

{QUOTES.map((q) => )}
); } /* ================================================================= * * FAQ * ================================================================= */ const FAQS = [ { q: "How do you price engagements?", a: "Most work runs as a monthly retainer scoped to your goals, with a fixed-fee sprint for one-off brand or web builds. You’ll always have a clear number before we start — no surprise invoices." }, { q: "How fast will we see results?", a: "You’ll see a working plan within two weeks and live experiments by week four. Paid channels often move first; brand and SEO compound over the following quarters." }, { q: "Do you work with our existing team?", a: "Often. We can run the whole growth function or plug into your in-house team as the specialist layer — strategy, creative, or media." }, { q: "What size brands do you take on?", a: "From funded seed-stage startups to established mid-market brands. The common thread is a real product and an appetite to grow honestly." }, { q: "Which industries do you know best?", a: "Consumer and DTC, marketplaces, hospitality, and B2B SaaS. If your customers search for what you do, we can help them find you." }, ]; function FAQItem({ f, open, onToggle }) { return (

{f.a}

); } function FAQ() { const [open, setOpen] = React.useState(0); return (
Questions

Good questions, honest answers

Still curious? Send us a note and we’ll reply like humans.

{FAQS.map((f, i) => setOpen(open === i ? -1 : i)} />)}
); } /* ================================================================= * * APP (+ tweaks) * ================================================================= */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "honey", "density": "regular", "headline": "Grow brands people search for.", "ctaDark": true }/*EDITMODE-END*/; const ACCENTS = { honey: { base: "#f2a104", active: "#d98a00", deep: "#b5740a", wash: "#fdf3df" }, nectar: { base: "#e8590c", active: "#cf4f0a", deep: "#b8430a", wash: "#fdeee4" }, bloom: { base: "#a23ca6", active: "#8f3493", deep: "#7b2d8e", wash: "#f8eef8" }, forest: { base: "#3f9d6b", active: "#2f855a", deep: "#1f6b4a", wash: "#e9f5ee" }, }; function applyAccent(key) { const a = ACCENTS[key] || ACCENTS.honey; const r = document.documentElement; r.style.setProperty("--sh-honey", a.base); r.style.setProperty("--sh-honey-active", a.active); r.style.setProperty("--sh-honey-deep", a.deep); r.style.setProperty("--sh-honey-wash", a.wash); } function splitHeadline(h) { // accent the last word const words = h.trim().split(" "); if (words.length < 2) return [h, "", ""]; const last = words.pop(); return [words.join(" ") + " ", last, ""]; } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); useScrollReveal(); React.useEffect(() => { injectSharedCSS(); }, []); React.useEffect(() => { applyAccent(t.accent); }, [t.accent]); const dens = { compact: 0.8, regular: 1, comfy: 1.18 }[t.density] || 1; React.useEffect(() => { document.documentElement.style.setProperty("--sh-dens", dens); }, [dens]); return (