);
}
/* ── COST CALCULATOR ── */
function CostCalculator({ onNavigate }) {
const [seats, setSeats] = useState(10);
const [tools, setTools] = useState(4);
const MO = 48, perSeat = 34, hosting = 120;
const saasMo = seats * perSeat * tools;
const build = 7500 + tools * 2600;
const saasTotal = saasMo * MO;
const winkzTotal = build + hosting * MO;
const savings = Math.max(0, saasTotal - winkzTotal);
const breakeven = saasMo > hosting ? Math.ceil(build / (saasMo - hosting)) : MO;
const tSaas = useTween(saasTotal), tWinkz = useTween(winkzTotal), tSave = useTween(savings);
// chart
const W = 520, H = 190, padB = 24, padL = 6;
const maxY = Math.max(saasMo * MO, winkzTotal) * 1.05;
const x = (m) => padL + (m / MO) * (W - padL);
const y = (val) => H - padB - (val / maxY) * (H - padB - 8);
const saasPts = []; const winkzPts = [];
for (let m = 0; m <= MO; m += 2) { saasPts.push(`${x(m).toFixed(1)},${y(saasMo * m).toFixed(1)}`); winkzPts.push(`${x(m).toFixed(1)},${y(build + hosting * m).toFixed(1)}`); }
const beX = x(Math.min(breakeven, MO)), beY = y(build + hosting * Math.min(breakeven, MO));
return (
Owning beats renting.} sub="Drag the sliders. See what stacked monthly subscriptions really cost over four years versus one custom system you own outright." center max={640} />
{/* controls + totals */}
v + ' people'} />
v + (v === 1 ? ' tool' : ' tools')} />
SaaS · 4 yrs
{fmt(tSaas)}
A Winkz system
{fmt(tWinkz)}
{/* chart */}
YOU SAVE OVER 4 YEARS
{fmt(tSave)}
breaks even · month {Math.min(breakeven, MO)}
Monthly subscriptionsYour Winkz system
Estimates for illustration, and once it's built, it's yours. No per-seat tax as your team grows.
);
}
/* ── TESTIMONIALS ── */
const QUOTES = [
['Our old site never showed up on Google. The new one books jobs on its own and we’re running two weeks out.', 'Dana Whitfield', 'Owner · Beacon Plumbing', 'DW'],
['Winkz replaced four monthly subscriptions with one tool we actually own. It’s cheaper every month and it’s ours.', 'Marcus Lee', 'Founder · Maple & Co.', 'ML'],
['The CRM was built around how we sell, not the other way around. Our close rate is up and nothing feels cluttered.', 'Priya Nair', 'Head of Sales · Relay', 'PN'],
['Their AI assistant answers after hours and books the job while we sleep. It won us clients we’d have missed.', 'Owen Brooks', 'GM · Copperline Electric', 'OB'],
]
function GoogleRating() {
const star = (i) => (
);
return (
{[0, 1, 2, 3, 4].map(star)}
5.0
Google review
);
}
function Testimonials() {
return (
Built it. Shipped it. They noticed.} center max={620} />
{QUOTES.map((q, i) => (
“{q[0]}”
{q[3]}
{q[1]}
{q[2]}
))}
);
}
/* ── SECURITY & DATA OWNERSHIP ── */
const SEC = [
['KeyRound', 'You own the data', 'Everything lives on your accounts and infrastructure, never rented back to you.'],
['Lock', 'Encrypted end to end', 'Encryption in transit and at rest, with secrets kept out of the codebase.'],
['Users', 'Role-based access', 'Your team sees exactly what they should, nothing more, nothing less.'],
['DatabaseBackup', 'Backed up & recoverable', 'Automated backups and a clear recovery path, documented in plain English.'],
['FileLock2', 'No lock-in', 'Full source and docs handed over. Walk away anytime, it\u2019s genuinely yours.'],
['ShieldCheck', 'Built to comply', 'Structured for the standards your industry answers to, from day one.'],
];
function Security() {
return (
Security & ownership
Your data. Your keys. Your software.
We build on your accounts, hand over the source, and lock nothing behind us. Secure by default, and yours to keep.
{SEC.map((s, i) => (
{s[1]}
{s[2]}
))}
);
}
/* ── FAQ ── */
const FAQS = [
['How much does a project cost?', 'It depends on scope, but we scope it clearly before you commit, fixed, upfront, no surprises. Discovery is free, and you only pay once you\u2019re happy with each phase.'],
['How long does it take?', 'Most websites ship in 3 to 6 weeks; custom software and CRMs typically run 6 to 12 weeks in short, weekly iterations you can see and try.'],
['Do I really own everything?', 'Yes. The site, the code, the data and the systems live on your accounts. We hand over full source and plain-English docs, no lock-in.'],
['What if I already have a website?', 'We\u2019ll rebuild and migrate it, keep what works, and wire it for modern search and AI so you actually get found.'],
['Can you connect to the tools we already use?', 'Almost always. Integrations are part of the build, your CRM, calendar, payments and email talking to each other from day one.'],
['What happens after launch?', 'We hand off with training and docs, and stay available for support and iteration, but you\u2019re never dependent on us to keep running.'],
];
function FAQ({ onNavigate }) {
const [open, setOpen] = useState(0);
return (
Good to know.} center max={560} />
{FAQS.map((f, i) => {
const on = open === i;
return (
Still wondering something? onNavigate('contact')} style={{ color: 'var(--winkz-cyan)', cursor: 'pointer', fontWeight: 600 }}>Just ask us →
);
}
/* ── VALUE / COST-OF-DOING-NOTHING ── */
const STATS = [
['', 78, '%', 'of buyers go with the business that answers first', 'Lead-response studies'],
['', 21, '×', 'more likely to win a lead replying in 5 min vs 30', 'Harvard/MIT lead research'],
['', 75, '%', 'judge your credibility on your website alone', 'Design-trust research'],
['$', 18, 'k+', 'a typical local business loses a year to missed calls & slow follow-up', 'Directional estimate'],
];
function ValueStats({ onNavigate }) {
return (
Every leak is a customer you never met.} sub="Most businesses quietly bleed revenue, slow replies, a site that doesn't convert, tools that don't talk to each other. It adds up faster than you'd think." center max={680} />
{STATS.map((s, i) => (
{s[3]}
{s[4]}
))}
Win back two or three clients, and it's already paid for itself.
Everything after that is upside. That's the whole case.
Figures are directional industry benchmarks, shown to illustrate the opportunity.