429 lines
19 KiB
HTML
429 lines
19 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 ═══════════════════════════════════════════ -->
|
|
<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">
|
|
<!-- PILLAR 1 -->
|
|
<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>
|
|
|
|
<!-- PILLAR 2 -->
|
|
<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>
|
|
|
|
<!-- PILLAR 3 -->
|
|
<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">90</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">98%</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">17</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>
|
|
<a href="https://calvana.quikcue.com/live" target="_blank" class="live-feed-link">Open full feed →</a>
|
|
</div>
|
|
<div class="live-feed-entries" id="live-entries">
|
|
<!-- Populated by JS from calvana API or static snapshot -->
|
|
<div class="live-entry">
|
|
<span class="live-entry-id">#96</span>
|
|
<span class="live-entry-badge badge-shipping">Shipping</span>
|
|
<span class="live-entry-title">QuikCue Homepage — New site alongside Calvana</span>
|
|
</div>
|
|
<div class="live-entry">
|
|
<span class="live-entry-id">#95</span>
|
|
<span class="live-entry-badge badge-shipped">Shipped</span>
|
|
<span class="live-entry-title">Self-healing deploy pipeline — auto-rollback on health check failure</span>
|
|
</div>
|
|
<div class="live-entry">
|
|
<span class="live-entry-id">#94</span>
|
|
<span class="live-entry-badge badge-shipped">Shipped</span>
|
|
<span class="live-entry-title">Calvana ship log — DB-backed persistence across sessions</span>
|
|
</div>
|
|
<div class="live-entry">
|
|
<span class="live-entry-id">#93</span>
|
|
<span class="live-entry-badge badge-shipped">Shipped</span>
|
|
<span class="live-entry-title">Remote command tool — run anything on any container</span>
|
|
</div>
|
|
<div class="live-entry">
|
|
<span class="live-entry-id">#92</span>
|
|
<span class="live-entry-badge badge-shipped">Shipped</span>
|
|
<span class="live-entry-title">Deploy tool — auto-discovers apps from Dokploy DB</span>
|
|
</div>
|
|
<div class="live-entry">
|
|
<span class="live-entry-id">#91</span>
|
|
<span class="live-entry-badge badge-shipped">Shipped</span>
|
|
<span class="live-entry-title">PNPL — Pledge Now Pay Later checkout deployed</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">Live Feed</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 for anchor links
|
|
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 animations
|
|
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, .live-entry').forEach(el => {
|
|
el.classList.add('fade-in');
|
|
observer.observe(el);
|
|
});
|
|
|
|
// Animate stat numbers on scroll
|
|
const animateValue = (el, start, end, duration) => {
|
|
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);
|
|
const val = Math.floor(start + range * eased);
|
|
el.textContent = val + (el.dataset.suffix || '');
|
|
if (progress < 1) requestAnimationFrame(step);
|
|
};
|
|
requestAnimationFrame(step);
|
|
};
|
|
|
|
const statsObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const el = entry.target;
|
|
const text = el.textContent;
|
|
const num = parseInt(text);
|
|
const suffix = text.replace(/\d+/, '');
|
|
if (!isNaN(num)) {
|
|
el.dataset.suffix = suffix;
|
|
animateValue(el, 0, num, 1200);
|
|
}
|
|
statsObserver.unobserve(el);
|
|
}
|
|
});
|
|
}, { threshold: 0.5 });
|
|
|
|
document.querySelectorAll('.live-stat-num').forEach(el => statsObserver.observe(el));
|
|
|
|
// 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>
|