Every founder starts with a{" "}
vision
. The challenge is turning it into something{" "}
Real.
We've been founders ourselves. We know how overwhelming the journey can be. You're selling, fundraising, and learning at record speed while trying to stay sane.
We noticed that non‑product founders don't lack vision or conviction. They lack the tools, processes, and partners to translate that vision into a product their users need. That's the gap we're trying to close.
);
};
/* ───────────────────────── Principles (carousel) ───────────────────────── */
const PRINCIPLES = [
{
id: "right",
title: "Build the right thing, build the thing right",
body: "The most beautifully crafted product means nothing if it solves the wrong problem. But once the right problem is clear, we build the product with quality.",
Icon: IconBuild
},
{
id: "first",
title: "Start from first‑principles",
body: "We don't copy what worked for someone else. We strip the problem down to its most fundamental truths and reason back up.",
Icon: IconFirstPrinciples
},
{
id: "vision",
title: "Start with the vision",
body: "If something is worth doing, it's worth doing ambitiously. We push founders to start with the ideal solution, then work backwards to the MLP that gets them there.",
Icon: IconVision
}];
const PrincipleCard = ({ principle, scale, isCenter, clicked, onClick }) => {
const { title, body, Icon } = principle;
const w = 350 * scale;
const h = 550 * scale;
const iconSize = 200 * scale;
return (
);
};
const Principles = () => {
const [center, setCenter] = useState(0);
const [clicked, setClicked] = useState(null); // index of clicked card
const railRef = useRef(null);
const isMobile = useIsMobile(768);
const total = PRINCIPLES.length;
// visible = 3 cards; left, center, right (cyclic)
const visible = useMemo(() => [
(center - 1 + total) % total,
center,
(center + 1) % total],
[center, total]);
const handleCardClick = (idx) => {
if (idx === center) {
setClicked((prev) => prev === idx ? null : idx);
} else {
setClicked(null);
setCenter(idx);
}
};
// Drag / swipe support (mouse + touch)
useEffect(() => {
const el = railRef.current;
if (!el) return;
let startX = null;
let dragging = false;
const THRESHOLD = 60;
const onDown = (x) => {startX = x;dragging = true;};
const onUp = (x) => {
if (!dragging || startX === null) {dragging = false;return;}
const dx = x - startX;
if (Math.abs(dx) > THRESHOLD) {
setClicked(null);
if (dx < 0) setCenter((c) => (c + 1) % total);else
setCenter((c) => (c - 1 + total) % total);
}
startX = null;
dragging = false;
};
const md = (e) => onDown(e.clientX);
const mu = (e) => onUp(e.clientX);
const ts = (e) => onDown(e.touches[0].clientX);
const te = (e) => {
const x = e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX : startX;
onUp(x);
};
el.addEventListener("mousedown", md);
window.addEventListener("mouseup", mu);
el.addEventListener("touchstart", ts, { passive: true });
el.addEventListener("touchend", te);
// Trackpad horizontal wheel → also swipes
let wheelLock = 0;
const onWheel = (e) => {
// Prefer horizontal intent
if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 20) {
e.preventDefault();
const now = Date.now();
if (now - wheelLock < 450) return;
wheelLock = now;
setClicked(null);
if (e.deltaX > 0) setCenter((c) => (c + 1) % total);else
setCenter((c) => (c - 1 + total) % total);
}
};
el.addEventListener("wheel", onWheel, { passive: false });
return () => {
el.removeEventListener("mousedown", md);
window.removeEventListener("mouseup", mu);
el.removeEventListener("touchstart", ts);
el.removeEventListener("touchend", te);
el.removeEventListener("wheel", onWheel);
};
}, [total]);
return (
);
};
/* ───────────────────────── Journey (curve + checkpoints) ───────────────────────── */
/* Each checkpoint:
t = parametric position along the curve (0 = start, 1 = end). Edit `t` to move the dot.
phase = which of the 3 phase brackets it sits in. */
const JOURNEY = [
{
id: "problem",
label: "Problem statement",
phase: 1,
t: 0.04,
title: "Problem statement",
body: "You have a hunch, maybe a personal frustration, a market observation, or a conviction that something is broken. Nothing is built yet. You're figuring out if the problem is real, urgent, and worth your next several years.",
questions: [
"What's the problem?",
"Why is the problem worth solving?",
"Who are we solving it for?",
"What's the unfair advantage we have about this problem space that others don't?"],
helps: [
"Exploratory user research with real potential users",
"Problem framing",
"Market research & opportunity sizing",
"Customer segmentation & target user group"]
},
{
id: "launch",
label: "The Launch",
phase: 2,
t: 0.30,
title: "The Launch",
body: "You have a clear problem statement with an early signal from target users. Now you need to build a solution to solve their problem; this tends to be the most ambiguous yet exciting stretch of the journey.",
questions: [
"What's the ideal solution?",
"Will customers change their behavior and pay for the solution?",
"What's the smallest Minimal Loveable Product (MLP) we can build to start learning?"],
helps: [
"Solution ideation",
"Concept validation through structured user research",
"MVP scoping and product roadmap",
"Dev-ready design specs",
"Success metrics definition",
"Go-to-market strategy to support launch"]
},
{
id: "valley",
label: "Valley of despair",
phase: 2,
t: 0.55,
title: "The valley of despair",
body: "You've launched (Hooray!) Some early users are in. Now the hard part: figuring out what's landing and what isn't. Most startups spend 1–3 years here, iterating, pivoting, and grinding through till they find PMF.",
questions: [
"Is the solution actually landing? Or do we need to pivot?",
"What do we double down on, and what do we kill?",
"Who do we need to hire for the next 12–24 months?",
"What do we need to systemize to make our work easier?"],
helps: [
"Rapid iteration cycles — design, validate, ship, iterate",
"Roadmap and prioritization informed by real usage data",
"Analytics setup and retention analysis",
"Early design system work",
"Product rituals (sprints, documentation, decision frameworks)"]
},
{
id: "pmf",
label: "Post PMF",
phase: 3,
t: 0.78,
title: "Post PMF",
body: "Congratulations — you've found PMF in at least one segment. Users are coming back, revenue is growing, and the sales motion is starting to feel repeatable. Now the work shifts from figuring out what to build to growing it sustainably.",
questions: [
"How do we grow revenue faster without losing focus?",
"How do we strengthen our core product to handle scale?",
"How do we build a product org that doesn't run through the founders?"],
helps: [
"KPI setting",
"Hiring specs and interview frameworks",
"Roadmap and prioritization informed by real usage data",
"Engineering debt triage",
"Onboarding and activation optimization",
"Optimized design system",
"Product rituals"]
},
{
id: "growth",
label: "Scale up",
phase: 3,
t: 0.88,
title: "Scale up",
funding: "Funding: Series B, C",
body: "The hard part is behind you! You have a winning product, a proven business model, and repeatable processes. Now it's about putting more gas on the fire — expanding to new markets, segments, or product lines.",
questions: [
"How do we keep our org culture strong while we grow?",
"How do we expand into new product lines without losing what made us great?",
"Where do we build, buy, or partner?",
"How do we maintain shipping velocity as the org grows?"],
notOffered: true
},
{
id: "maturity",
label: "Maturity",
phase: 3,
t: 0.99,
title: "Maturity",
funding: "Funding: IPO, Exit, Merge, Acquisition",
body: "You have a mature company, and the big questions are all about legacy — whether that's an exit, a merger, international expansion, or spinning out something new.",
questions: [
"What is the long-term strategy for this company and its owners?",
"How do we keep innovating while managing a mature product?"],
notOffered: true
}];
// Hand-drawn-style curve. viewBox 1000 x 540.
// Y-axis at x=110, X-axis at y=470.
const CURVE_D = "M 130 420 C 165 415, 195 425, 215 420 C 240 412, 258 392, 282 348 C 312 285, 342 215, 368 148 C 384 165, 405 215, 428 275 C 445 322, 460 358, 478 388 C 495 412, 510 422, 526 420 C 543 418, 556 410, 574 415 C 595 422, 612 425, 632 418 C 660 408, 685 388, 712 355 C 740 318, 763 295, 786 280 C 806 265, 822 250, 838 228 C 854 206, 866 188, 880 165 C 894 142, 910 130, 925 122";
// X-pixel ranges (in 1000-wide viewBox) where each phase bracket sits.
// Phase boundaries match the two vertical dividers in the original sketch.
const PHASES = [
{ id: 1, label: "Is this the right problem?", x1: 130, x2: 320 },
{ id: 2, label: "Is this the right solution?", x1: 320, x2: 700 },
{ id: 3, label: "Is this the right way to scale?", x1: 700, x2: 935 }
];
const Journey = () => {
const [activeId, setActiveId] = useState("problem");
const pathRef = React.useRef(null);
const [dots, setDots] = useState([]);
React.useEffect(() => {
const path = pathRef.current;
if (!path) return;
const len = path.getTotalLength();
setDots(JOURNEY.map((c) => {
const p = path.getPointAtLength(len * c.t);
return { id: c.id, x: p.x, y: p.y };
}));
}, []);
const active = JOURNEY.find((c) => c.id === activeId);
const dotMap = Object.fromEntries(dots.map((d) => [d.id, d]));
return (
Our Services
We believe that every startup goes through this{" "}
journey
{/* LEFT: phase headers + SVG curve */}
{/* Phase header strip — thin band, three columns sized to the curve's phase widths */}
handleSliderInteraction(e.clientX)}
onMouseMove={(e) => { if (e.buttons === 1) handleSliderInteraction(e.clientX); }}
onTouchStart={(e) => handleSliderInteraction(e.touches[0].clientX)}
onTouchMove={(e) => { e.preventDefault(); handleSliderInteraction(e.touches[0].clientX); }}
>
{/* Track line — extends 16px beyond first and last dot */}
{/* Inactive dots */}
{JOURNEY.map((c, i) => {
if (i === activeIdx) return null;
return (
);
})}
{/* Active dot — large orange circle with glow */}
);
})()}
{/* Card showing active checkpoint */}
{active.title}
{active.body}
{/* Key questions */}
Key questions
{active.questions.map((q) =>
{q}
)}
{/* How we can help */}
How we can help
{active.notOffered ? (
We currently don't offer our services for this milestone.
) : (
{active.helps.map((h) => (
{h}
))}
)}
);
};
/* ───────────────────────── Plans (engagement tiers) ───────────────────────── */
const TIERS = [
{
name: "Office Hours",
rate: "170$ / HR",
duration: "On-demand",
body: "If you have a quick question, need an expert opinion on the next steps, or want to learn how to approach something you haven't done before."
},
{
name: "Sprint",
rate: "200$ / HR",
duration: "1–3 weeks",
body: "You have a scoped project with defined deliverables, but you don't have the time or expertise to do it.",
deliverablesLabel: "Deliverables",
deliverables: "Product audit, User interviews, Ideation workshop, UX specific flow"
},
{
name: "Studio",
rate: "200$ / HR",
duration: "1 – 6 months",
body: "You need a product and design function, but you're not ready to hire yet. We come in as your partners, embed fully in your workflow, and help you hit your next milestone, or you're ready to bring someone in-house."
}];
const Plans = () => {
const isMobile = useIsMobile(768);
return (
Engagement tiers
{isMobile ? (
{TIERS.map((t, i) =>
{t.name}
Starting at{t.rate}
Typical Duration{t.duration}
{t.body}
{t.deliverables &&
{t.deliverablesLabel}{t.deliverables}
}
)}
) : (
{TIERS.map((t, i) =>
{t.name}
Starting at{t.rate}
Typical Duration{t.duration}
{t.body}
{t.deliverables &&
{t.deliverablesLabel}{t.deliverables}
}
)}
)}
);
};
/* ───────────────────────── Team ───────────────────────── */
const TEAM = [
{
name: "Heba Dwikat",
img: "assets/heba.png",
linkedin: "https://www.linkedin.com/in/heba-dwikat/",
cardBg: "rgb(217,217,217)",
bio: "I'm Heba, your PD & PM combo. I've been a 2x founder, worked with startups from pre‑seed to Series C, and built incubated startups inside global companies. My deepest work has been in healthcare and behavioral change. Most recently, I was the second founding PM at Envive AI.",
pills: [
{ label: "Founder", color: "rgb(38,47,250)" },
{ label: "PM", color: "rgb(32,149,199)" },
{ label: "Designer", color: "rgb(193,116,16)" }]
},
{
name: "Ryan Alli",
img: "assets/ryan.png",
linkedin: "https://www.linkedin.com/in/ryan-alli/",
cardBg: "rgb(229,229,229)",
bio: "I'm Ryan, PD x PM. I served as the lead product designer on Uber's fleet and sustainability team, where I coordinated engineering, data science, legal, operations, and product teams across both 0 → 1 and 1 → 100 initiatives. I focus on supporting across the full product spectrum: shaping the initial vision, getting into the code, working up a GTM plan, and making sure the business model actually holds up.",
pills: [
{ label: "PM", color: "rgb(232,79,47)" },
{ label: "Designer", color: "rgb(193,116,16)" }]
},
{
name: "Adrian Lavergne",
img: "assets/adrian.png",
linkedin: "https://www.linkedin.com/in/adrian-lavergne/",
cardBg: "rgb(229,229,229)",
bio: "I'm Adrian. I'm an AI Engineer and researcher for LLMs and stable diffusion models. I've been primarily entrenched in the startup world and as a result, I'm a rapid builder of ideas. Specifically I specialize in creating robust AI systems for critical work (solving for compliance, mitigating hallucinations, and building reliable processes for fine tuning models).",
pills: [
{ label: "AI Engineer", color: "rgb(129,32,255)" },
{ label: "AI Scientist", color: "rgb(32,149,199)" }]
}];
const TeamMember = ({ member, flip, cardRef: externalCardRef }) => {
const isMobile = useIsMobile(768);
const internalCardRef = useRef(null);
const cardRef = externalCardRef || internalCardRef;
if (isMobile) {
return (