/* Fragment Intelligence — Components */
/* global React */
const { useState, useEffect, useRef } = React;
/* ─── Logomark: 5 stacked translucent planes per brand spec ─── */
function Logomark({ size = 24, dark = false }) {
// Brand spec literally describes this: 5 stacked translucent planes,
// each offset, with deepest layer in teal, internal grid lines, depth connectors.
const stroke = dark ? "#A1A1AA" : "#52525B";
const strokeFaint = dark ? "#3F3F46" : "#A1A1AA";
const teal = dark ? "#0EA5A8" : "#0D8F91";
return (
);
}
function Logo({ dark = false }) {
return (
FRAGMENTINTELLIGENCE
);
}
/* ─── Nav ─── */
function Nav() {
return (
);
}
/* ─── Hero ─── */
function Hero() {
return (
GTM Intelligence Platform for B2B SaaS
Your HubSpot data is fragmented. We connect the pieces.
Connect your HubSpot portal and Fragment runs seven diagnostic modules against your live CRM data — returning written, analyst-grade intelligence with named deals, dollar amounts, and specific next steps.
Recommendation — disqualify the 8 deals with $0 value. Re-engage the remaining 5 with single-threaded contact via executive sponsor outreach. Net pipeline impact: $284k.
);
}
/* ─── Problem ─── */
function Problem() {
const cells = [
{
n: "01",
h: "Dashboards show what happened",
p: "HubSpot reports are backward-looking. They tell you the numbers, not what to do about them."
},
{
n: "02",
h: "RevOps is manual & slow",
p: "Pipeline reports, win/loss analyses, persona studies — weeks of manual work, every quarter."
},
{
n: "03",
h: "Insights are buried",
p: "Critical patterns — stalled deals, single-threaded risks, channel gaps — hide across disconnected reports."
}
];
return (
The Problem
The diagnostic layer your CRM was supposed to be.
Most revenue teams are flying on instruments built for reporting, not for decisions. Fragment is the diagnostic engine underneath.
{cells.map(c => (
— {c.n}
{c.h}
{c.p}
))}
);
}
/* ─── How it works ─── */
function How() {
const steps = [
{ n: "Step 01", t: "Connect", b: "Paste your HubSpot token. No data warehouse, no implementation, no setup calls. Zero configuration." },
{ n: "Step 02", t: "Analyze", b: "Fragment runs 7 diagnostic modules against your live CRM data — pipeline, persona, source, stage, win/loss, and more." },
{ n: "Step 03", t: "Act", b: "Get written reports with named deals, dollar amounts, and specific next steps. Synthesized, not summarized." }
];
return (
How it works
Connect HubSpot. Get analyst-grade intelligence in minutes — not weeks.
{steps.map(s => (
{s.n}
{s.t}
{s.b}
))}
);
}
/* ─── What Fragment Produces ─── */
function Produces() {
return (
What Fragment Produces
Three formats. One intelligence layer.
Not a dashboard. Not a forecast. Three deliverables a senior analyst would hand to your VP of Revenue.
— Documents
Narrative analyses
Consultant-grade documents — Win/Loss Patterns, Persona Gap, Pipeline Risk — 10–20 pages with real deal names and dollar amounts.
— Reports
Data-dense outputs
Built for pipeline meetings — Source Performance, Pipeline Health, Stage Analysis. Interpreted metrics, not raw tables.
— Insights
Prioritized actions
Cross-module synthesis. Each recommendation is specific, named, and tied to the evidence that generated it.
);
}
function DocumentVisual() {
return (
);
}
function ReportVisual() {
return (
);
}
function InsightVisual() {
return (
);
}
/* ─── Chat with HubSpot data ─── */
function Chat() {
const turns = [
{
role: "user",
text: "Which deals over $50k haven't been touched in 30 days?"
},
{
role: "assistant",
tool: "hubspot.deals.search",
params: '{ amount: { gte: 50000 }, last_activity: { lt: "-30d" } }',
meta: "Returned 7 records · 412ms",
body: (
<>
Seven deals match. Three are single-threaded and worth flagging:
Flutter Entertainment$80,00042d cold · 1 contact
lululemon$86,40038d cold · 1 contact
Northwell Health$54,20035d cold · 2 contacts
Combined ARR exposure: $220,600. Want me to draft re-engagement notes addressed to the executive sponsor on each?
Flutter has been stuck in Proposal for 62 days — 3.4× your average. Last touch was a one-line email on 03/14. Drafting executive-sponsor outreach now.
)
}
];
const suggestions = [
"Show me deals at risk this quarter",
"Which source produced our highest LTV customers?",
"Find contacts at target accounts we've never emailed",
"Compare won vs. lost deals in the Mid-Market segment"
];
return (
Chat with your HubSpot data
Ask anything. Fragment queries your CRM live and answers in plain English.
Built-in agent with first-class HubSpot tools. Search deals, pull contact timelines, cross-reference stages, draft outreach — without leaving the conversation.
The kind of work that would take a senior analyst days — delivered in minutes, against your live CRM data.
—
Module
Output
What it does
{rows.map(([n, name, type, desc]) => (
{n}
{name}
{type}
{desc}
))}
);
}
/* ─── Dark section: What HubSpot Cannot See ─── */
function Sees() {
const items = [
{ n: "A", h: "Persona gap", p: "Prospects vs. buyers seniority cross-reference. Where you're talking to the wrong layer of the org." },
{ n: "B", h: "Deal path velocity", p: "Won vs. lost stage journey comparison. Which paths through your pipeline actually convert." },
{ n: "C", h: "Single-threading risk", p: "Named deals with one contact. Surfaced before they go dark." },
{ n: "D", h: "Stage drop-off", p: "Drop-off rates between any two pipeline stages. Specific, not aggregated." },
{ n: "E", h: "Narrative synthesis", p: "Written analyst output, not just tables. The interpretation that turns metrics into decisions." },
{ n: "F", h: "Cross-module insight", p: "Generated across all data simultaneously. Patterns that no single report could surface." }
];
return (
What Fragment Sees
Six things HubSpot will never tell you.
Depth over dashboards. Fragment exposes the structural patterns in your GTM motion — the ones that hide between reports.