468 lines
20 KiB
HTML
468 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>QuikCue — We build the machine. You run the mission.</title>
|
|
<meta name="description" content="QuikCue is an autonomous systems studio. We design, build, and deploy AI-native infrastructure for organizations that refuse to move slowly.">
|
|
<meta property="og:title" content="QuikCue — We build the machine. You run the mission.">
|
|
<meta property="og:description" content="Autonomous systems studio. AI-native infrastructure. Deployed, not pitched.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://quikcue.com">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<link rel="canonical" href="https://quikcue.com">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════ NAV ═══════════════════════ -->
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<a href="/" class="logo">QuikCue</a>
|
|
<div class="nav-links">
|
|
<a href="#work">Work</a>
|
|
<a href="#live">Live Feed</a>
|
|
<a href="#contact" class="nav-cta">Talk to us</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══════════════════════ HERO ═══════════════════════ -->
|
|
<header class="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-eyebrow">Autonomous Systems Studio</div>
|
|
<h1 class="hero-title">
|
|
We build the machine.<br>
|
|
<span class="accent">You run the mission.</span>
|
|
</h1>
|
|
<p class="hero-sub">
|
|
We design, build, and deploy AI-native infrastructure for organizations
|
|
that move too fast for traditional technology partners.
|
|
No decks. No roadmaps. Just deployed systems that run themselves.
|
|
</p>
|
|
<div class="hero-ctas">
|
|
<a href="#contact" class="btn btn-primary">Start a conversation →</a>
|
|
<a href="#live" class="btn btn-ghost">Watch us build ◉</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-glow"></div>
|
|
</header>
|
|
|
|
<!-- ═══════════════════════ PROBLEM ═══════════════════════ -->
|
|
<section class="section section-problem" id="problem">
|
|
<div class="container">
|
|
<div class="section-label">The problem we keep seeing</div>
|
|
<h2 class="section-title">Most technology gets in the way.</h2>
|
|
<div class="problem-grid">
|
|
<div class="problem-text">
|
|
<p>
|
|
Every growing organization hits the same wall. The tools don't talk to
|
|
each other. The processes that should be automated aren't. The team that
|
|
should be focused on impact is drowning in operations.
|
|
</p>
|
|
<p>
|
|
And every vendor you've talked to wants to sell you a discovery phase
|
|
instead of a deployed system.
|
|
</p>
|
|
<p class="problem-punchline">
|
|
We're not that.<br>
|
|
We ship infrastructure.
|
|
</p>
|
|
</div>
|
|
<div class="problem-stats">
|
|
<div class="problem-stat">
|
|
<div class="problem-stat-icon">⚡</div>
|
|
<div class="problem-stat-text">
|
|
<strong>Days, not quarters.</strong>
|
|
Our median time from brief to deployed production system is measured in days.
|
|
</div>
|
|
</div>
|
|
<div class="problem-stat">
|
|
<div class="problem-stat-icon">🔁</div>
|
|
<div class="problem-stat-text">
|
|
<strong>Systems, not projects.</strong>
|
|
We build infrastructure that operates itself. Not deliverables that collect dust.
|
|
</div>
|
|
</div>
|
|
<div class="problem-stat">
|
|
<div class="problem-stat-icon">🔒</div>
|
|
<div class="problem-stat-text">
|
|
<strong>Yours, not ours.</strong>
|
|
Self-hosted. Open source where possible. You own every line, every server, every byte.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════ CATEGORY / PILLARS ═══════════════════════ -->
|
|
<section class="section section-category" id="work">
|
|
<div class="container">
|
|
<div class="section-label">One discipline. Not five services.</div>
|
|
<h2 class="section-title">We build autonomous operations.</h2>
|
|
<p class="section-sub">
|
|
Payment systems. AI products. Communication automation. Analytics pipelines.
|
|
Self-hosted infrastructure. It sounds like five different things.
|
|
It's not. It's one discipline: engineering the operational backbone that
|
|
lets a small team do the work of fifty.
|
|
</p>
|
|
|
|
<div class="pillars">
|
|
<div class="pillar">
|
|
<div class="pillar-number">01</div>
|
|
<h3 class="pillar-title">Infrastructure</h3>
|
|
<p class="pillar-sub">The financial and operational nervous system.</p>
|
|
<ul class="pillar-list">
|
|
<li>Payment processing & checkout flows</li>
|
|
<li>Donation pipelines & recurring giving</li>
|
|
<li>Multi-gateway processing (Stripe, PayPal, GoCardless)</li>
|
|
<li>CRM sync & webhook orchestration</li>
|
|
<li>Pledge-now-pay-later systems</li>
|
|
</ul>
|
|
<div class="pillar-proof">
|
|
<span class="pillar-proof-label">In production:</span>
|
|
Millions in annual donations processed. Zero downtime checkout.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pillar">
|
|
<div class="pillar-number">02</div>
|
|
<h3 class="pillar-title">Intelligence</h3>
|
|
<p class="pillar-sub">AI that ships to production, not slides.</p>
|
|
<ul class="pillar-list">
|
|
<li>Custom AI applications & product builders</li>
|
|
<li>Automated decision pipelines</li>
|
|
<li>Real-time analytics dashboards</li>
|
|
<li>Data warehouse & reporting infrastructure</li>
|
|
<li>Workflow automation (n8n, custom)</li>
|
|
</ul>
|
|
<div class="pillar-proof">
|
|
<span class="pillar-proof-label">In production:</span>
|
|
AI-powered product creation. Automated donation analytics across 5+ sources.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pillar">
|
|
<div class="pillar-number">03</div>
|
|
<h3 class="pillar-title">Independence</h3>
|
|
<p class="pillar-sub">Your infrastructure. Your data. Your control.</p>
|
|
<ul class="pillar-list">
|
|
<li>Self-hosted git, CI/CD & container orchestration</li>
|
|
<li>WhatsApp, email & chat automation</li>
|
|
<li>Monitoring, alerting & error tracking</li>
|
|
<li>Multi-org server architecture</li>
|
|
<li>Zero-vendor-lock deployment pipelines</li>
|
|
</ul>
|
|
<div class="pillar-proof">
|
|
<span class="pillar-proof-label">In production:</span>
|
|
Two organizations. One server. Full comms stacks. Complete autonomy.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════ LIVE FEED ═══════════════════════ -->
|
|
<section class="section section-live" id="live">
|
|
<div class="container">
|
|
<div class="live-header">
|
|
<div>
|
|
<div class="section-label">Proof, not promises</div>
|
|
<h2 class="section-title">While you're reading this, we're shipping.</h2>
|
|
<p class="section-sub">
|
|
Our engineering feed is public, real-time, and unfakeable. Every deployment,
|
|
every fix, every system — logged and live. This isn't a portfolio from last year.
|
|
This is what happened <em>today</em>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="live-stats">
|
|
<div class="live-stat">
|
|
<div class="live-stat-num" id="stat-shipped">—</div>
|
|
<div class="live-stat-label">Systems shipped</div>
|
|
</div>
|
|
<div class="live-stat">
|
|
<div class="live-stat-num live-stat-green" id="stat-rate">—</div>
|
|
<div class="live-stat-label">Ship rate</div>
|
|
</div>
|
|
<div class="live-stat">
|
|
<div class="live-stat-num live-stat-amber" id="stat-oops">—</div>
|
|
<div class="live-stat-label">Oops (transparent)</div>
|
|
</div>
|
|
<div class="live-stat">
|
|
<div class="live-stat-num live-stat-red">0</div>
|
|
<div class="live-stat-label">Downtime hours</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="live-feed">
|
|
<div class="live-feed-header">
|
|
<div class="live-pulse"></div>
|
|
<span>Live Engineering Feed</span>
|
|
</div>
|
|
<div class="live-feed-entries" id="live-entries">
|
|
<div class="live-entry live-entry-loading">
|
|
<span class="live-entry-title" style="opacity:0.3">Loading live feed…</span>
|
|
</div>
|
|
</div>
|
|
<div class="live-feed-fade"></div>
|
|
</div>
|
|
|
|
<div class="live-fomo">
|
|
<p>
|
|
Every entry above is a real deployment to a real production system.
|
|
No staging theater. No demo environments. Production infrastructure,
|
|
shipping continuously.
|
|
</p>
|
|
<p class="live-fomo-kicker">
|
|
If your technology partner can't show you this — ask yourself why.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════ CLIENTS ═══════════════════════ -->
|
|
<section class="section section-clients">
|
|
<div class="container">
|
|
<div class="section-label">Who we build for</div>
|
|
<h2 class="section-title">Mission-driven. Velocity-obsessed.</h2>
|
|
<div class="clients-grid">
|
|
<div class="client-card">
|
|
<div class="client-logo">CharityRight</div>
|
|
<p class="client-desc">
|
|
End-to-end digital infrastructure for one of the UK's fastest-growing charities.
|
|
Donation processing, checkout systems, analytics dashboards, CRM integrations,
|
|
and a full self-hosted comms stack — all built, deployed, and maintained by QuikCue.
|
|
</p>
|
|
<div class="client-stats">
|
|
<span>£4M+ donations processed</span>
|
|
<span>5 payment gateways</span>
|
|
<span>24/7 automated comms</span>
|
|
</div>
|
|
</div>
|
|
<div class="client-card">
|
|
<div class="client-logo">JustVitamin</div>
|
|
<p class="client-desc">
|
|
AI-powered vitamin product builder. Custom formulations generated by machine learning,
|
|
deployed as a production web application with full database infrastructure. From concept
|
|
to live product in a single sprint.
|
|
</p>
|
|
<div class="client-stats">
|
|
<span>AI product generation</span>
|
|
<span>Full-stack deployment</span>
|
|
<span>Concept → live in days</span>
|
|
</div>
|
|
</div>
|
|
<div class="client-card">
|
|
<div class="client-logo">PNPL</div>
|
|
<p class="client-desc">
|
|
Pledge Now, Pay Later — a micro-SaaS that lets charities accept pledges with
|
|
deferred payment. Next.js, Postgres, multi-gateway. Built as reusable
|
|
infrastructure, not a one-off project.
|
|
</p>
|
|
<div class="client-stats">
|
|
<span>Deferred payment processing</span>
|
|
<span>Multi-charity ready</span>
|
|
<span>Open infrastructure</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════ CTA ═══════════════════════ -->
|
|
<section class="section section-cta" id="contact">
|
|
<div class="container">
|
|
<div class="cta-block">
|
|
<h2 class="cta-title">
|
|
Your infrastructure is either<br>
|
|
your advantage or your <span class="accent">anchor.</span>
|
|
</h2>
|
|
<p class="cta-sub">
|
|
Every day you spend fighting your technology is a day your mission doesn't move.
|
|
We're already building. The only question is whether we're building for you.
|
|
</p>
|
|
<div class="cta-actions">
|
|
<a href="mailto:omair@quikcue.com?subject=Let%27s%20talk%20infrastructure" class="btn btn-primary btn-large">
|
|
omair@quikcue.com →
|
|
</a>
|
|
<a href="https://wa.me/447000000000" class="btn btn-ghost btn-large">
|
|
WhatsApp us
|
|
</a>
|
|
</div>
|
|
<p class="cta-note">
|
|
No forms. No sales funnel. Just a conversation with the person who builds it.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════════════════════ FOOTER ═══════════════════════ -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="footer-inner">
|
|
<div class="footer-brand">
|
|
<span class="footer-logo">QuikCue</span>
|
|
<span class="footer-tagline">We build the machine. You run the mission.</span>
|
|
</div>
|
|
<div class="footer-links">
|
|
<a href="https://calvana.quikcue.com/live" target="_blank">Calvana</a>
|
|
<a href="https://git.quikcue.com" target="_blank">Git</a>
|
|
<a href="mailto:omair@quikcue.com">Contact</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<span>© 2026 QuikCue Ltd. London, UK.</span>
|
|
<span class="footer-built">Built with obsessive velocity.</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- ═══════════════════════ SCRIPTS ═══════════════════════ -->
|
|
<script>
|
|
// ── Smooth scroll ──
|
|
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
|
a.addEventListener('click', e => {
|
|
e.preventDefault();
|
|
const target = document.querySelector(a.getAttribute('href'));
|
|
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
});
|
|
|
|
// ── Intersection Observer for fade-in ──
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
|
|
|
|
document.querySelectorAll('.pillar, .client-card, .problem-stat, .live-stat').forEach(el => {
|
|
el.classList.add('fade-in');
|
|
observer.observe(el);
|
|
});
|
|
|
|
// ── Animate numbers ──
|
|
const animateValue = (el, start, end, duration, suffix) => {
|
|
const range = end - start;
|
|
const startTime = performance.now();
|
|
const step = (now) => {
|
|
const progress = Math.min((now - startTime) / duration, 1);
|
|
const eased = 1 - Math.pow(1 - progress, 3);
|
|
el.textContent = Math.floor(start + range * eased) + (suffix || '');
|
|
if (progress < 1) requestAnimationFrame(step);
|
|
};
|
|
requestAnimationFrame(step);
|
|
};
|
|
|
|
// ── Live Feed: fetch from calvana API ──
|
|
const CALVANA_API = 'https://calvana.quikcue.com/api';
|
|
|
|
async function loadLiveFeed() {
|
|
try {
|
|
const [shipsRes, statsRes] = await Promise.all([
|
|
fetch(`${CALVANA_API}/ships/showcase`),
|
|
fetch(`${CALVANA_API}/stats`)
|
|
]);
|
|
|
|
if (shipsRes.ok) {
|
|
const ships = await shipsRes.json();
|
|
renderShips(ships);
|
|
}
|
|
|
|
if (statsRes.ok) {
|
|
const stats = await statsRes.json();
|
|
renderStats(stats);
|
|
}
|
|
} catch (e) {
|
|
// Fallback: render static data baked at build time
|
|
renderShips(FALLBACK_SHIPS);
|
|
renderStats(FALLBACK_STATS);
|
|
}
|
|
}
|
|
|
|
// Fallback data (updated at deploy time)
|
|
const FALLBACK_STATS = { total: 92, shipped: 89, oops: 19 };
|
|
const FALLBACK_SHIPS = [
|
|
{ id: 98, title: "Milestone Recognition: n8n → Mailchimp via donation_warehouse", status: "shipped" },
|
|
{ id: 97, title: "QuikCue site — Git + Dokploy proper deployment", status: "shipped" },
|
|
{ id: 96, title: "QuikCue Homepage — Autonomous Systems Studio", status: "shipped" },
|
|
{ id: 84, title: "Supporter Care: Full refund/cancel/edit across Donations & Giving", status: "shipped" },
|
|
{ id: 71, title: "CharityRight Admin v4 — Command center redesign", status: "shipped" },
|
|
{ id: 52, title: "In-app browser fixes — session, Turnstile, Stripe 3DS, Google Places", status: "shipped" },
|
|
{ id: 44, title: "Bulletproof consent: Gift Aid (HMRC), email + WhatsApp opt-in", status: "shipped" },
|
|
{ id: 22, title: "JustVitamin dynamic data + API-driven charts", status: "shipped" },
|
|
{ id: 13, title: "Calvana DB-backed shipping log — PostgreSQL + API", status: "shipped" },
|
|
{ id: 7, title: "QuikCue comms stack — Chatwoot + n8n + WAHA", status: "shipped" },
|
|
{ id: 4, title: "CharityRight checkout v2", status: "shipped" },
|
|
{ id: 1, title: "Dokploy server migration — Coolify to Dokploy on Incus", status: "shipped" },
|
|
];
|
|
|
|
function renderStats(stats) {
|
|
const shipped = stats.shipped || 0;
|
|
const total = stats.total || 0;
|
|
const oops = stats.oops || 0;
|
|
const rate = total > 0 ? Math.round((shipped / total) * 100) : 0;
|
|
|
|
const elShipped = document.getElementById('stat-shipped');
|
|
const elRate = document.getElementById('stat-rate');
|
|
const elOops = document.getElementById('stat-oops');
|
|
|
|
// Animate if visible, otherwise set directly
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
animateValue(elShipped, 0, shipped, 1200, '');
|
|
animateValue(elRate, 0, rate, 1200, '%');
|
|
animateValue(elOops, 0, oops, 1200, '');
|
|
statsObserver.disconnect();
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
statsObserver.observe(elShipped.parentElement);
|
|
}
|
|
|
|
function renderShips(ships) {
|
|
const container = document.getElementById('live-entries');
|
|
container.innerHTML = ships.map(s => {
|
|
const badgeClass = s.status === 'shipped' ? 'badge-shipped' :
|
|
s.status === 'shipping' ? 'badge-shipping' : 'badge-planned';
|
|
const label = s.status.charAt(0).toUpperCase() + s.status.slice(1);
|
|
return `<div class="live-entry fade-in visible">
|
|
<span class="live-entry-id">#${s.id}</span>
|
|
<span class="live-entry-badge ${badgeClass}">${label}</span>
|
|
<span class="live-entry-title">${escapeHtml(s.title)}</span>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Load feed — try API first, fallback to baked data
|
|
loadLiveFeed();
|
|
|
|
// Live pulse animation
|
|
const pulse = document.querySelector('.live-pulse');
|
|
if (pulse) {
|
|
setInterval(() => {
|
|
pulse.classList.remove('ping');
|
|
void pulse.offsetWidth;
|
|
pulse.classList.add('ping');
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|