const { useState, useEffect, useMemo, useRef } = React;
// ============ ICONS (Lucide-style, monolinear) ============
const Icon = {
Search: () => (
),
ArrowRight: ({ size = 14 }) => (
),
Copy: () => (
),
Check: () => (
),
Mail: () => (
),
Grid: () => (
),
List: () => (
),
};
// ============ LOGO COMPONENT (with fallback) ============
function PartnerLogo({ partner, size = 56 }) {
const [err, setErr] = useState(false);
if (partner.logo && !err) {
const wide = partner.wide;
const imgStyle = partner.logoScale
? { maxWidth: Math.min(100, 88 * partner.logoScale) + '%', maxHeight: (88 * partner.logoScale) + '%' }
: undefined;
return (
setErr(true)} style={imgStyle} />
);
}
return (
{partner.short}
);
}
// ============ HEADER ============
function Header() {
return (
);
}
// ============ HERO ============
function Hero({ data }) {
const totalPartners = data.categories.reduce((a, c) => a + c.partners.length, 0);
const totalCategories = data.categories.length;
return (
Exclusive Partner Benefits
{totalPartners} partners across {totalCategories} categories — over a million dollars in credits, discounts, and dedicated programmes, curated for missionary founders building from Day Zero.
{totalPartners}
Active partners
$1M+
Credits & discounts available
{totalCategories}
Categories of leverage
);
}
// ============ TOOLBAR ============
function Toolbar({ data, active, setActive, search, setSearch, view, setView }) {
const counts = useMemo(() => {
const total = data.categories.reduce((acc, c) => acc + c.partners.length, 0);
const map = { all: total };
data.categories.forEach((c) => { map[c.id] = c.partners.length; });
return map;
}, [data]);
return (
Browse
setActive("all")}>
All {counts.all}
{data.categories.map((c) => (
setActive(c.id)}>
{c.name} {counts[c.id]}
))}
setView(view === "list" ? "grid" : "list")}
title="Toggle view"
aria-label="Toggle view"
>
{view === "list" ?
);
}
// ============ PARTNER CARD ============
function PartnerCard({ partner, density }) {
const [expanded, setExpanded] = useState(false);
const [copied, setCopied] = useState(false);
const showMore = partner.bullets.length > 2;
const copyCode = () => {
navigator.clipboard?.writeText(partner.code.value);
setCopied(true);
window.dispatchEvent(new CustomEvent('z47-toast', { detail: `Copied · ${partner.code.value}` }));
setTimeout(() => setCopied(false), 1800);
};
return (
{partner.name}
{partner.headline}
{partner.bullets.map((b, i) => {b} )}
{showMore && (
setExpanded(!expanded)}>
{expanded ? "Show less ↑" : `+ ${partner.bullets.length - 2} more details`}
)}
{partner.note && (
{partner.note}
)}
{partner.code && (
{partner.code.label}
{partner.code.value}
{copied ? <>
)}
{partner.contact && (
)}
{partner.cta ? (
{partner.cta.label}
) : (
Get in touch
)}
);
}
// ============ INDEX ROW (list view) ============
function IndexRow({ partner, n }) {
return (
);
}
// ============ CATEGORY ============
function CategorySection({ category, filteredPartners, density }) {
if (filteredPartners.length === 0) return null;
return (
{category.tag} / 07
{category.name}
{filteredPartners.length} partner{filteredPartners.length > 1 ? 's' : ''}
{filteredPartners.map((p) => (
))}
);
}
// ============ FOOTER ============
function Footer() {
return (
Need an intro? We'll make it.
Partnerships listed here are negotiated by Z47 and DeVC on behalf of our portfolio. If a perk you need isn't listed, please do reach out and we will try add them to this list.
Request a new partner
For founders
Rupali Sharma · Point of contact
rupali@z47.com
Legal
Offers subject to partner terms
Verify discount before contracting
Updated quarterly
Partnerships Playbook · July 2026 Founder Vision. Nation Mission.
);
}
// ============ TOAST ============
function Toast() {
const [msg, setMsg] = useState(null);
useEffect(() => {
const handler = (e) => {
setMsg(e.detail);
setTimeout(() => setMsg(null), 1800);
};
window.addEventListener('z47-toast', handler);
return () => window.removeEventListener('z47-toast', handler);
}, []);
return (
{msg}
);
}
// ============ TWEAKS ============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "comfortable",
"view": "grid",
"accentSection": "none"
}/*EDITMODE-END*/;
function TweaksUI({ t, setTweak }) {
return (
setTweak('density', v)}
options={[
{ value: 'comfortable', label: 'Roomy' },
{ value: 'dense', label: 'Dense' },
]}
/>
setTweak('view', v)}
options={[
{ value: 'grid', label: 'Grid' },
{ value: 'list', label: 'Index' },
]}
/>
setTweak('accentSection', v)}
options={[
{ value: 'none', label: 'None — all white' },
{ value: 'cream', label: 'Alternate cream' },
{ value: 'mixed', label: 'Mixed (cream / blue / plum)' },
]}
/>
);
}
// ============ APP ============
function App() {
const data = window.PARTNERS_DATA;
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [active, setActive] = useState("all");
const [search, setSearch] = useState("");
const [view, setView] = useState(t.view);
useEffect(() => { setView(t.view); }, [t.view]);
// Filter logic
const filteredCategories = useMemo(() => {
return data.categories.map((cat) => {
let partners = cat.partners;
if (active !== "all" && active !== cat.id) return { ...cat, partners: [] };
if (search.trim()) {
const q = search.toLowerCase();
partners = partners.filter((p) =>
p.name.toLowerCase().includes(q) ||
p.headline.toLowerCase().includes(q) ||
p.tag.toLowerCase().includes(q) ||
p.bullets.some((b) => b.toLowerCase().includes(q))
);
}
return { ...cat, partners };
});
}, [data, active, search]);
const totalFiltered = filteredCategories.reduce((a, c) => a + c.partners.length, 0);
// Section bg accents
const accentBg = (i) => {
if (t.accentSection === 'cream') return i % 2 === 1 ? 'var(--z47-cream)' : 'transparent';
if (t.accentSection === 'mixed') {
const bgs = ['transparent', 'var(--z47-cream)', 'transparent', 'var(--z47-light-blue)', 'transparent', 'var(--z47-light-plum)', 'transparent'];
return bgs[i % bgs.length];
}
return 'transparent';
};
// Flat list (for list view)
const flatPartners = filteredCategories.flatMap((c) => c.partners.map((p) => ({ ...p, _cat: c.name })));
return (
<>
{totalFiltered === 0 && (
No partners match "{search}"
{ setSearch(""); setActive("all"); }}>Reset filters →
)}
{view === 'grid' && filteredCategories.map((c, i) => {
const visibleIdx = filteredCategories.slice(0, i).filter((x) => x.partners.length > 0).length;
const isDark = visibleIdx % 2 === 1;
if (c.partners.length === 0) return null;
return (
);
})}
{view === 'list' && totalFiltered > 0 && (
#
Partner
Offer
Category
Action
{flatPartners.map((p, i) => (
)}
