Add pricing page, CR case study, update nav + nginx config
This commit is contained in:
+3
-1
@@ -24,6 +24,7 @@
|
||||
<a href="/" class="logo">QuikCue</a>
|
||||
<div class="nav-links">
|
||||
<a href="#work">Work</a>
|
||||
<a href="/pricing">Pricing</a>
|
||||
<a href="/live">Live Feed</a>
|
||||
<a href="#contact" class="nav-cta">Talk to us</a>
|
||||
</div>
|
||||
@@ -245,6 +246,7 @@
|
||||
<span>5 payment gateways</span>
|
||||
<span>24/7 automated comms</span>
|
||||
</div>
|
||||
<a href="/work/charityright" style="display:inline-block;margin-top:16px;color:var(--accent);font-family:var(--mono);font-size:0.85rem;text-decoration:none;">Read case study →</a>
|
||||
</div>
|
||||
<div class="client-card">
|
||||
<div class="client-logo">JustVitamin</div>
|
||||
@@ -292,7 +294,7 @@
|
||||
<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">
|
||||
<a href="https://wa.me/601162222512" class="btn btn-ghost btn-large">
|
||||
WhatsApp us
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,391 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Pricing — QuikCue | Charity Digital Infrastructure from £2,000/month</title>
|
||||
<meta name="description" content="Flat monthly pricing for charity digital infrastructure. Donations, analytics, WhatsApp automation, everything. No setup fees, no surprise invoices.">
|
||||
<meta property="og:title" content="Pricing — QuikCue | From £2,000/month">
|
||||
<meta property="og:description" content="Everything your charity needs. One flat monthly price. Cancel anytime.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://quikcue.com/pricing">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="canonical" href="https://quikcue.com/pricing">
|
||||
<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">
|
||||
<style>
|
||||
.pricing-hero { padding: 120px 0 60px; text-align: center; }
|
||||
.pricing-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 16px; line-height: 1.1; }
|
||||
.pricing-hero p { color: var(--text-secondary); max-width: 600px; margin: 0 auto; font-size: 1.1rem; }
|
||||
|
||||
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; margin: 40px auto; max-width: var(--max-w); padding: 0 24px; }
|
||||
|
||||
.pricing-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 40px 32px;
|
||||
position: relative;
|
||||
transition: border-color 0.3s, transform 0.3s;
|
||||
}
|
||||
.pricing-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
|
||||
.pricing-card.featured {
|
||||
border-color: var(--accent-dim);
|
||||
background: linear-gradient(180deg, rgba(0,255,159,0.03) 0%, var(--bg-card) 100%);
|
||||
}
|
||||
.pricing-card.featured::before {
|
||||
content: '🔥 Founding Client Rate';
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
padding: 4px 16px;
|
||||
border-radius: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pricing-label {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--accent);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.pricing-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
|
||||
.pricing-desc { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 24px; line-height: 1.5; }
|
||||
|
||||
.pricing-price {
|
||||
font-size: 3rem;
|
||||
font-weight: 800;
|
||||
font-family: var(--mono);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.pricing-price span { font-size: 1rem; font-weight: 400; color: var(--text-secondary); }
|
||||
.pricing-price-note { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 24px; }
|
||||
.pricing-price-was { text-decoration: line-through; color: var(--text-muted); font-size: 1.5rem; margin-right: 8px; }
|
||||
|
||||
.pricing-features { list-style: none; margin-bottom: 32px; }
|
||||
.pricing-features li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.95rem;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
.pricing-features li::before { content: '✓'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
|
||||
|
||||
.pricing-cta {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 14px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.pricing-cta-primary {
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
}
|
||||
.pricing-cta-primary:hover { background: #33ffb3; transform: translateY(-1px); }
|
||||
.pricing-cta-secondary {
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
.pricing-cta-secondary:hover { border-color: var(--accent-dim); }
|
||||
|
||||
/* FAQ */
|
||||
.faq-section { max-width: var(--max-w-narrow); margin: 80px auto 40px; padding: 0 24px; }
|
||||
.faq-section h2 { font-size: 1.5rem; margin-bottom: 32px; }
|
||||
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
|
||||
.faq-q { font-weight: 600; margin-bottom: 8px; font-size: 1.05rem; }
|
||||
.faq-a { color: var(--text-secondary); line-height: 1.6; }
|
||||
|
||||
/* Proof bar */
|
||||
.proof-bar {
|
||||
text-align: center;
|
||||
padding: 40px 24px;
|
||||
color: var(--text-muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.proof-bar strong { color: var(--text-secondary); }
|
||||
|
||||
/* Comparison */
|
||||
.comparison {
|
||||
max-width: var(--max-w-narrow);
|
||||
margin: 60px auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.comparison h2 { font-size: 1.5rem; margin-bottom: 24px; }
|
||||
.comparison-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.comparison-table th, .comparison-table td {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.comparison-table th { color: var(--text-muted); font-weight: 500; font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.comparison-table td:nth-child(2) { color: var(--text-muted); }
|
||||
.comparison-table td:nth-child(3) { color: var(--accent); font-weight: 600; }
|
||||
|
||||
.bottom-cta {
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.bottom-cta h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; margin-bottom: 16px; }
|
||||
.bottom-cta p { color: var(--text-secondary); margin-bottom: 32px; }
|
||||
.bottom-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
</style>
|
||||
</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="/work/charityright">Case Study</a>
|
||||
<a href="/live">Live Feed</a>
|
||||
<a href="#book" class="nav-cta">Book a call</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="pricing-hero">
|
||||
<div class="container">
|
||||
<h1>One price. Everything included.</h1>
|
||||
<p>No setup fees. No surprise invoices. No "that's out of scope." Flat monthly. Cancel anytime with 30 days notice.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROOF BAR -->
|
||||
<div class="proof-bar">
|
||||
Currently serving: <strong>Charity Right</strong> (£4M+ donations processed) · Capacity for <strong>2–3 more</strong> organisations
|
||||
</div>
|
||||
|
||||
<!-- PRICING CARDS -->
|
||||
<div class="pricing-grid">
|
||||
<!-- OFFER A — Charity Digital Infrastructure -->
|
||||
<div class="pricing-card featured">
|
||||
<div class="pricing-label">Most Popular</div>
|
||||
<div class="pricing-title">Charity Digital Infrastructure</div>
|
||||
<div class="pricing-desc">Everything your charity needs to run its digital operation. Donations, analytics, automation, comms — built, deployed, and maintained.</div>
|
||||
<div class="pricing-price">
|
||||
<span class="pricing-price-was">£2,500</span>
|
||||
£2,000<span>/month</span>
|
||||
</div>
|
||||
<div class="pricing-price-note">Founding client rate — first 3 clients only</div>
|
||||
<ul class="pricing-features">
|
||||
<li>Donation system — Stripe, PayPal, GoCardless</li>
|
||||
<li>Custom checkout pages that actually convert</li>
|
||||
<li>Real-time analytics dashboard</li>
|
||||
<li>WhatsApp + email automation (receipts, thank-yous, nudges)</li>
|
||||
<li>Seasonal campaign pages (Ramadan, events, appeals)</li>
|
||||
<li>Gift Aid automation + HMRC compliance</li>
|
||||
<li>Monthly performance report</li>
|
||||
<li>Unlimited small requests (bug fixes, copy changes, new pages)</li>
|
||||
<li>Hosted on dedicated infrastructure (not shared cloud)</li>
|
||||
<li>Direct access to the engineer who builds it</li>
|
||||
</ul>
|
||||
<a href="https://wa.me/601162222512?text=Hi%20Omair%2C%20I%27m%20interested%20in%20the%20Charity%20Digital%20Infrastructure%20package.%20Can%20we%20set%20up%20a%20call%3F" class="pricing-cta pricing-cta-primary">
|
||||
Book a 15-min call →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- OFFER B — Fractional CTO -->
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-label">For Startups & SMEs</div>
|
||||
<div class="pricing-title">Fractional CTO</div>
|
||||
<div class="pricing-desc">Senior engineering leadership without the full-time salary. Architecture, deployment, AI, automation — 40 hours/month of hands-on work.</div>
|
||||
<div class="pricing-price">
|
||||
£3,000<span>/month</span>
|
||||
</div>
|
||||
<div class="pricing-price-note">Half the cost of a full-time senior engineer</div>
|
||||
<ul class="pricing-features">
|
||||
<li>40 hours/month senior development</li>
|
||||
<li>Architecture & technical decisions</li>
|
||||
<li>CI/CD pipeline setup & monitoring</li>
|
||||
<li>AI & automation implementation</li>
|
||||
<li>Code reviews & technical direction</li>
|
||||
<li>Emergency response & incident management</li>
|
||||
<li>Weekly check-in calls</li>
|
||||
<li>Deploy infrastructure from scratch or improve existing</li>
|
||||
</ul>
|
||||
<a href="https://wa.me/601162222512?text=Hi%20Omair%2C%20I%27m%20interested%20in%20the%20Fractional%20CTO%20package.%20Can%20we%20set%20up%20a%20call%3F" class="pricing-cta pricing-cta-secondary">
|
||||
Let's talk →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- OFFER C — Build + Retain -->
|
||||
<div class="pricing-card">
|
||||
<div class="pricing-label">Custom Projects</div>
|
||||
<div class="pricing-title">Build + Maintain</div>
|
||||
<div class="pricing-desc">We build the system you need (fixed price), then run it for you (flat monthly). No mystery invoices, no scope creep.</div>
|
||||
<div class="pricing-price">
|
||||
£5–8K<span> build</span>
|
||||
</div>
|
||||
<div class="pricing-price-note">+ £2,000/month ongoing maintenance & operation</div>
|
||||
<ul class="pricing-features">
|
||||
<li>Phase 1: Build (2–4 weeks, fixed price agreed upfront)</li>
|
||||
<li>Phase 2: Operate (£2K/month, cancel anytime)</li>
|
||||
<li>Full ownership — your code, your servers, your data</li>
|
||||
<li>Modern stack (Next.js, Docker, Postgres, AI)</li>
|
||||
<li>Monitoring, error tracking, automated alerts</li>
|
||||
<li>Monthly updates & improvements included</li>
|
||||
<li>No vendor lock-in — leave anytime with your full codebase</li>
|
||||
</ul>
|
||||
<a href="https://wa.me/601162222512?text=Hi%20Omair%2C%20I%20have%20a%20project%20I%27d%20like%20to%20discuss.%20Can%20we%20set%20up%20a%20call%3F" class="pricing-cta pricing-cta-secondary">
|
||||
Describe your project →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- COMPARISON TABLE -->
|
||||
<div class="comparison">
|
||||
<h2>What you'd pay elsewhere</h2>
|
||||
<table class="comparison-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>What you need</th>
|
||||
<th>Agency quote</th>
|
||||
<th>QuikCue</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Donation system build</td>
|
||||
<td>£20,000–40,000 project</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Analytics dashboard</td>
|
||||
<td>£8,000–15,000 project</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WhatsApp automation</td>
|
||||
<td>£5,000–10,000 project</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Campaign pages (seasonal)</td>
|
||||
<td>£2,000–5,000 each</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gift Aid automation</td>
|
||||
<td>£3,000–8,000 project</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ongoing maintenance</td>
|
||||
<td>£500–2,000/month (basic)</td>
|
||||
<td>Included</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Total year 1</strong></td>
|
||||
<td><strong>£44,000–84,000</strong></td>
|
||||
<td><strong>£24,000</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- FAQ -->
|
||||
<div class="faq-section">
|
||||
<h2>Questions you're probably thinking</h2>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">What if we're already using JustGiving / GoFundMe / Enthuse?</div>
|
||||
<div class="faq-a">Great — we don't replace what works. We build the infrastructure around it. Custom checkout pages, analytics that combine all your sources, automation that your current platform can't do. We sit alongside your existing tools, not against them.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Can we really cancel anytime?</div>
|
||||
<div class="faq-a">Yes. 30 days written notice. You keep everything — all code, all data, all infrastructure. We'll even help you transition if you want to bring it in-house or move to another provider. No lock-in, ever.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">What does "unlimited small requests" mean?</div>
|
||||
<div class="faq-a">Copy changes, bug fixes, new campaign pages, design tweaks, adding a form, updating donation amounts — anything that takes less than half a day. If something is bigger, we'll scope it and agree before starting. No surprise invoices.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">We're a small charity. Is this right for us?</div>
|
||||
<div class="faq-a">If your annual income is above £300K and you process donations online, yes. The Gift Aid automation alone typically recovers more than the monthly cost. For mosques and community organisations, we have a tailored package — ask us about it.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">Who actually does the work?</div>
|
||||
<div class="faq-a">Omair. The same engineer who built and runs the infrastructure for Charity Right (£4M+ in donations). No account managers, no project coordinators, no handoffs. You talk directly to the person who writes the code and deploys the systems.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">You're based in Malaysia?</div>
|
||||
<div class="faq-a">Yes — and I've been running Charity Right's UK infrastructure remotely for years. We deploy systems that operate 24/7 regardless of timezone. Communication is async-first (WhatsApp, email), with scheduled calls when needed. The infrastructure doesn't care where I sit.</div>
|
||||
</div>
|
||||
|
||||
<div class="faq-item">
|
||||
<div class="faq-q">What's the founding client rate?</div>
|
||||
<div class="faq-a">£2,000/month instead of £2,500 for the first 3 organisations that sign up. It's a discount in exchange for honest feedback as we scale. Once 3 spots are filled, the rate goes to £2,500.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BOTTOM CTA -->
|
||||
<div class="bottom-cta" id="book">
|
||||
<h2>15 minutes. No pitch deck.</h2>
|
||||
<p>I'll screen-share your current setup, show you what I'd change, and give you an honest assessment — even if the answer is "you don't need me."</p>
|
||||
<div class="bottom-cta-actions">
|
||||
<a href="https://wa.me/601162222512?text=Hi%20Omair%2C%20I%27d%20like%20to%20book%20a%2015-min%20call%20about%20QuikCue%20services." class="btn btn-primary btn-large">
|
||||
WhatsApp Omair →
|
||||
</a>
|
||||
<a href="mailto:omair@quikcue.com?subject=Interested%20in%20QuikCue%20services" class="btn btn-ghost btn-large">
|
||||
Email instead →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="/">Home</a>
|
||||
<a href="/pricing">Pricing</a>
|
||||
<a href="/work/charityright">Case Study</a>
|
||||
<a href="/live">Live Feed</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,467 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Charity Right Case Study — QuikCue | £4M+ Donations Infrastructure</title>
|
||||
<meta name="description" content="How QuikCue built and runs the entire digital infrastructure for Charity Right — £4M+ donations processed, 5 payment gateways, 35+ containers, zero downtime.">
|
||||
<meta property="og:title" content="Charity Right — Full Digital Infrastructure by QuikCue">
|
||||
<meta property="og:description" content="£4M+ donations processed. 5 payment gateways. 35 containers. Zero downtime. One engineer.">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:url" content="https://quikcue.com/work/charityright">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="canonical" href="https://quikcue.com/work/charityright">
|
||||
<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">
|
||||
<style>
|
||||
.cs-hero { padding: 120px 24px 60px; max-width: var(--max-w-narrow); margin: 0 auto; }
|
||||
.cs-badge {
|
||||
display: inline-block;
|
||||
font-family: var(--mono);
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--border-accent);
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.cs-hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 20px; }
|
||||
.cs-hero-sub { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.6; max-width: 640px; }
|
||||
|
||||
/* Stats strip */
|
||||
.cs-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 1px;
|
||||
background: var(--border);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
max-width: var(--max-w-narrow);
|
||||
margin: 40px auto;
|
||||
}
|
||||
.cs-stat {
|
||||
background: var(--bg-card);
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.cs-stat-num {
|
||||
font-family: var(--mono);
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
}
|
||||
.cs-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
|
||||
|
||||
/* Content sections */
|
||||
.cs-section {
|
||||
max-width: var(--max-w-narrow);
|
||||
margin: 0 auto;
|
||||
padding: 60px 24px;
|
||||
}
|
||||
.cs-section h2 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.cs-section h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 32px 0 12px;
|
||||
color: var(--accent);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.cs-section p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.cs-section ul {
|
||||
list-style: none;
|
||||
margin: 16px 0 24px;
|
||||
}
|
||||
.cs-section ul li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.cs-section ul li::before { content: '→'; color: var(--accent); flex-shrink: 0; }
|
||||
|
||||
/* Before/After */
|
||||
.cs-ba {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
@media (max-width: 640px) { .cs-ba { grid-template-columns: 1fr; } }
|
||||
.cs-ba-col {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
}
|
||||
.cs-ba-col h4 {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.cs-ba-col.before h4 { color: var(--red); }
|
||||
.cs-ba-col.after h4 { color: var(--accent); }
|
||||
.cs-ba-col ul { margin: 0; }
|
||||
.cs-ba-col.before ul li::before { content: '✗'; color: var(--red); }
|
||||
|
||||
/* Timeline */
|
||||
.cs-timeline {
|
||||
border-left: 2px solid var(--border-accent);
|
||||
margin: 32px 0 32px 12px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
.cs-timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.cs-timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -35px;
|
||||
top: 6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--accent);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cs-timeline-date {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-dim);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.cs-timeline-title { font-weight: 600; margin-bottom: 4px; }
|
||||
.cs-timeline-desc { color: var(--text-secondary); font-size: 0.9rem; }
|
||||
|
||||
/* Quote */
|
||||
.cs-quote {
|
||||
border-left: 3px solid var(--accent);
|
||||
padding: 24px 28px;
|
||||
margin: 40px 0;
|
||||
background: var(--bg-card);
|
||||
border-radius: 0 12px 12px 0;
|
||||
}
|
||||
.cs-quote p { font-size: 1.1rem; font-style: italic; color: var(--text); margin: 0; }
|
||||
.cs-quote-attr { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px !important; font-style: normal !important; }
|
||||
|
||||
/* Divider */
|
||||
.cs-divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
max-width: var(--max-w-narrow);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Bottom CTA */
|
||||
.cs-cta {
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.cs-cta h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; margin-bottom: 16px; }
|
||||
.cs-cta p { color: var(--text-secondary); margin-bottom: 32px; line-height: 1.6; }
|
||||
.cs-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
|
||||
|
||||
/* Stack list */
|
||||
.cs-stack {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 16px 0 24px;
|
||||
}
|
||||
.cs-stack-tag {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.75rem;
|
||||
background: var(--bg-elevated);
|
||||
border: 1px solid var(--border);
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
</style>
|
||||
</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="/pricing">Pricing</a>
|
||||
<a href="/live">Live Feed</a>
|
||||
<a href="#contact" class="nav-cta">Talk to us</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- HERO -->
|
||||
<div class="cs-hero">
|
||||
<div class="cs-badge">Case Study</div>
|
||||
<h1>Charity Right — End-to-end digital infrastructure for a £4M+ charity</h1>
|
||||
<p class="cs-hero-sub">
|
||||
One engineer. 35 containers. 5 payment gateways. £4M+ in donations processed.
|
||||
Full checkout, analytics, comms, Gift Aid, and deployment pipeline — built from scratch,
|
||||
running 24/7 with zero downtime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- STATS -->
|
||||
<div class="cs-stats">
|
||||
<div class="cs-stat">
|
||||
<div class="cs-stat-num">£4M+</div>
|
||||
<div class="cs-stat-label">Donations processed</div>
|
||||
</div>
|
||||
<div class="cs-stat">
|
||||
<div class="cs-stat-num">5</div>
|
||||
<div class="cs-stat-label">Payment gateways</div>
|
||||
</div>
|
||||
<div class="cs-stat">
|
||||
<div class="cs-stat-num">35</div>
|
||||
<div class="cs-stat-label">Production containers</div>
|
||||
</div>
|
||||
<div class="cs-stat">
|
||||
<div class="cs-stat-num">0</div>
|
||||
<div class="cs-stat-label">Hours downtime</div>
|
||||
</div>
|
||||
<div class="cs-stat">
|
||||
<div class="cs-stat-num">150+</div>
|
||||
<div class="cs-stat-label">Systems shipped</div>
|
||||
</div>
|
||||
<div class="cs-stat">
|
||||
<div class="cs-stat-num">1</div>
|
||||
<div class="cs-stat-label">Engineer</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- THE PROBLEM -->
|
||||
<div class="cs-section">
|
||||
<h2>The situation</h2>
|
||||
<p>
|
||||
Charity Right is one of the UK's fastest-growing Muslim charities, focused on food poverty and education.
|
||||
When we started working together, they were growing faster than their technology could handle.
|
||||
</p>
|
||||
|
||||
<div class="cs-ba">
|
||||
<div class="cs-ba-col before">
|
||||
<h4>Before QuikCue</h4>
|
||||
<ul>
|
||||
<li>Donation system built by an agency that couldn't deliver</li>
|
||||
<li>Manual spreadsheet tracking for donations</li>
|
||||
<li>Gift Aid processed by hand — losing 25% on missed claims</li>
|
||||
<li>No analytics — no idea which campaigns actually worked</li>
|
||||
<li>JustGiving fees eating into donation income</li>
|
||||
<li>WhatsApp and email comms done manually by staff</li>
|
||||
<li>Website hosted on shared hosting with frequent downtime</li>
|
||||
<li>Every tech change required an expensive agency engagement</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cs-ba-col after">
|
||||
<h4>After QuikCue</h4>
|
||||
<ul>
|
||||
<li>Custom checkout processing £4M+ with 99.99% uptime</li>
|
||||
<li>Real-time analytics dashboard — donations by source, campaign, time</li>
|
||||
<li>Automated Gift Aid claims to HMRC — 25% uplift captured automatically</li>
|
||||
<li>5 payment gateways (Stripe, PayPal, GoCardless, bank, manual)</li>
|
||||
<li>WhatsApp + email automation — receipts, thank-yous, nudges</li>
|
||||
<li>CRM sync (N3O/Engage) with automated data flow</li>
|
||||
<li>Dedicated infrastructure — 35 containers, zero shared hosting</li>
|
||||
<li>Daily deployments — changes ship in hours, not weeks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-divider"></div>
|
||||
|
||||
<!-- WHAT WE BUILT -->
|
||||
<div class="cs-section">
|
||||
<h2>What we built</h2>
|
||||
|
||||
<h3>01 — Donation Checkout</h3>
|
||||
<p>
|
||||
A custom-built checkout that handles one-off donations, recurring giving, and campaign-specific appeals.
|
||||
Integrated with Stripe, PayPal, GoCardless, and manual payment methods. Every transaction syncs to the CRM
|
||||
in real-time. Supports Gift Aid declaration, marketing consent, and flexible payment scheduling.
|
||||
</p>
|
||||
<p>
|
||||
The previous agency-built system had frequent failures and couldn't handle Ramadan traffic spikes.
|
||||
Our system has processed millions in peak season with zero downtime.
|
||||
</p>
|
||||
|
||||
<h3>02 — Analytics & Reporting</h3>
|
||||
<p>
|
||||
Real-time dashboard showing donations by source, campaign, payment method, and time period.
|
||||
Connected to a data warehouse that aggregates data from all 5 payment gateways.
|
||||
The fundraising team can see exactly which appeals are performing — no more waiting for monthly spreadsheets.
|
||||
</p>
|
||||
|
||||
<h3>03 — Communications Stack</h3>
|
||||
<p>
|
||||
Full automation pipeline: donation receipt → thank-you email → WhatsApp confirmation → follow-up series.
|
||||
Built on n8n workflows + Chatwoot for live chat + WAHA for WhatsApp Business API.
|
||||
Reduced manual comms work from hours per day to near-zero.
|
||||
</p>
|
||||
|
||||
<h3>04 — Gift Aid Automation</h3>
|
||||
<p>
|
||||
Every eligible donation is automatically flagged for Gift Aid. Claims are batched and submitted to HMRC.
|
||||
This alone recovers more than the cost of our entire service — 25% uplift on every qualifying donation.
|
||||
</p>
|
||||
|
||||
<h3>05 — Infrastructure & DevOps</h3>
|
||||
<p>
|
||||
35 Docker containers across a dedicated server. Private Git (Gitea), CI/CD pipelines,
|
||||
monitoring, error tracking, and automated deployments. Full separation between production
|
||||
and development environments. All infrastructure is owned by Charity Right — zero vendor lock-in.
|
||||
</p>
|
||||
<p>
|
||||
We migrated 14 databases from the old system with zero downtime. The entire operation
|
||||
runs on infrastructure that costs a fraction of what AWS or Azure would charge for the same setup.
|
||||
</p>
|
||||
|
||||
<div class="cs-stack">
|
||||
<span class="cs-stack-tag">Next.js</span>
|
||||
<span class="cs-stack-tag">Node.js</span>
|
||||
<span class="cs-stack-tag">PostgreSQL</span>
|
||||
<span class="cs-stack-tag">Docker</span>
|
||||
<span class="cs-stack-tag">Stripe</span>
|
||||
<span class="cs-stack-tag">PayPal</span>
|
||||
<span class="cs-stack-tag">GoCardless</span>
|
||||
<span class="cs-stack-tag">n8n</span>
|
||||
<span class="cs-stack-tag">Chatwoot</span>
|
||||
<span class="cs-stack-tag">WhatsApp API</span>
|
||||
<span class="cs-stack-tag">Metabase</span>
|
||||
<span class="cs-stack-tag">Ghost CMS</span>
|
||||
<span class="cs-stack-tag">Gitea</span>
|
||||
<span class="cs-stack-tag">Traefik</span>
|
||||
<span class="cs-stack-tag">Plausible Analytics</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-divider"></div>
|
||||
|
||||
<!-- TIMELINE -->
|
||||
<div class="cs-section">
|
||||
<h2>How it happened</h2>
|
||||
<p>This wasn't a 6-month discovery process. We shipped production systems from week one.</p>
|
||||
|
||||
<div class="cs-timeline">
|
||||
<div class="cs-timeline-item">
|
||||
<div class="cs-timeline-date">Month 1</div>
|
||||
<div class="cs-timeline-title">Server migration + checkout v1</div>
|
||||
<div class="cs-timeline-desc">Migrated 14 databases from old infrastructure. Deployed first custom checkout handling Stripe + PayPal. Zero downtime during migration.</div>
|
||||
</div>
|
||||
<div class="cs-timeline-item">
|
||||
<div class="cs-timeline-date">Month 2</div>
|
||||
<div class="cs-timeline-title">Gift Aid + GoCardless + CRM sync</div>
|
||||
<div class="cs-timeline-desc">Added GoCardless for Direct Debit. Built Gift Aid automation. Connected everything to N3O CRM with real-time webhooks.</div>
|
||||
</div>
|
||||
<div class="cs-timeline-item">
|
||||
<div class="cs-timeline-date">Month 3</div>
|
||||
<div class="cs-timeline-title">Comms stack + analytics</div>
|
||||
<div class="cs-timeline-desc">Deployed full comms infrastructure — Chatwoot, WhatsApp API, n8n automation workflows. Built real-time analytics dashboard.</div>
|
||||
</div>
|
||||
<div class="cs-timeline-item">
|
||||
<div class="cs-timeline-date">Month 4–6</div>
|
||||
<div class="cs-timeline-title">Ramadan campaign infrastructure</div>
|
||||
<div class="cs-timeline-desc">Custom Ramadan appeal pages, automated daily giving schedules, peak-traffic optimisation. Handled the charity's biggest fundraising month without a single outage.</div>
|
||||
</div>
|
||||
<div class="cs-timeline-item">
|
||||
<div class="cs-timeline-date">Ongoing</div>
|
||||
<div class="cs-timeline-title">Continuous shipping</div>
|
||||
<div class="cs-timeline-desc">150+ production deployments logged publicly. Checkout v2, admin dashboard redesign, supporter care tools, AI-powered features — all shipped continuously.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cs-divider"></div>
|
||||
|
||||
<!-- THE DIFFERENCE -->
|
||||
<div class="cs-section">
|
||||
<h2>Why this works</h2>
|
||||
|
||||
<div class="cs-quote">
|
||||
<p>"The previous agency charged us tens of thousands and delivered something that broke under traffic. Omair rebuilt everything and it just works — during Ramadan, during appeals, 24/7."</p>
|
||||
<p class="cs-quote-attr">— Charity Right leadership</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
The key difference isn't technology. It's the model. Traditional agencies sell projects — they build, hand over, and disappear.
|
||||
When something breaks at 2am during Ramadan, there's nobody to call.
|
||||
</p>
|
||||
<p>
|
||||
QuikCue operates as embedded infrastructure. We don't build and leave. We build and <em>run</em>.
|
||||
The same engineer who wrote the code is the one monitoring it at 2am. The same person who
|
||||
deployed the checkout is the one optimising it during peak traffic.
|
||||
</p>
|
||||
<p>
|
||||
That's why one engineer can outperform a 10-person agency. No handoffs. No miscommunication.
|
||||
No "that's out of scope." Just continuous shipping.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cs-divider"></div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div class="cs-cta" id="contact">
|
||||
<h2>Want the same for your charity?</h2>
|
||||
<p>
|
||||
I have capacity for 2–3 more organisations on this infrastructure.
|
||||
The founding client rate is £2,000/month — everything included.
|
||||
15 minutes on a call and I'll show you exactly what I'd build for you.
|
||||
</p>
|
||||
<div class="cs-cta-actions">
|
||||
<a href="https://wa.me/601162222512?text=Hi%20Omair%2C%20I%20read%20the%20Charity%20Right%20case%20study.%20I%27d%20like%20to%20discuss%20how%20you%20could%20help%20my%20organisation." class="btn btn-primary btn-large">
|
||||
WhatsApp Omair →
|
||||
</a>
|
||||
<a href="/pricing" class="btn btn-ghost btn-large">
|
||||
See pricing →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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="/">Home</a>
|
||||
<a href="/pricing">Pricing</a>
|
||||
<a href="/work/charityright">Case Study</a>
|
||||
<a href="/live">Live Feed</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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+2
-2
@@ -7,7 +7,7 @@ server {
|
||||
absolute_redirect off;
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
try_files $uri $uri/ $uri/index.html /index.html;
|
||||
}
|
||||
|
||||
location /css/ {
|
||||
@@ -23,5 +23,5 @@ server {
|
||||
gzip_types text/html text/css application/javascript text/plain;
|
||||
gzip_min_length 256;
|
||||
|
||||
error_page 404 /index.html;
|
||||
error_page 404 /404.html;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user