Skip to content

Instantly share code, notes, and snippets.

@aseba

aseba/cfo-landing-v11.html

Created February 6, 2026 09:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aseba/95ba2ec6c3378792c737ff406608d96c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aseba/95ba2ec6c3378792c737ff406608d96c to your computer and use it in GitHub Desktop.
Download ZIP
BairesDev CFO Landing Page v11 - Design System Update
Raw
cfo-landing-v11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Are You Paying 70% More Than You Should? | Remotely</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#5047E2',
'remotely-pink': '#E14989',
'remotely-orchid': '#BE5EC8',
'remotely-ink': '#14151F',
'remotely-light': '#F7F7F8',
'remotely-gray': '#F3F3F4',
},
borderRadius: {
'btn': '20px',
'card': '16px',
}
}
}
}
</script>
<style>
/* Roobert font - loaded from local files in production */
@font-face {
font-family: 'Roobert';
src: url('https://remotely.works/fonts/Roobert-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: #14151F;
}
h1, h2, h3, .font-headline {
font-family: 'Roobert', 'Inter', sans-serif;
font-weight: 600;
}
.btn-primary {
font-family: 'Roobert', 'Inter', sans-serif;
font-weight: 600;
}
/* Official Remotely gradient */
.gradient-hero {
background: linear-gradient(180deg,
rgba(80, 71, 226, 0.15) 0%,
rgba(225, 73, 137, 0.12) 40%,
rgba(190, 94, 200, 0.08) 70%,
#FFFFFF 100%
);
}
/* Gradient text effect for keywords */
.gradient-text {
background: linear-gradient(90deg, #5047E2, #E14989);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Card shadow with brand gradient */
.card-shadow {
box-shadow: 0 4px 24px rgba(80, 71, 226, 0.08),
0 2px 12px rgba(225, 73, 137, 0.04);
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu { display: none; }
</style>
</head>
<body class="bg-white">
<!-- Nav (matching remotely.works) -->
<nav class="bg-white sticky top-0 z-50 border-b border-gray-100">
<div class="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
<!-- Logo -->
<a href="https://remotely.works" class="flex items-center gap-2">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#14151F"/>
<path d="M12 10H17C19.2091 10 21 11.7909 21 14C21 15.5 20.2 16.8 19 17.5L22 22H19L16.5 18H14.5V22H12V10ZM14.5 12.5V15.5H17C17.8284 15.5 18.5 14.8284 18.5 14C18.5 13.1716 17.8284 12.5 17 12.5H14.5Z" fill="white"/>
</svg>
<span class="text-xl font-headline">Remotely</span>
</a>
<!-- Center Menu -->
<div class="hidden md:flex items-center gap-8">
<div class="dropdown relative">
<button class="flex items-center gap-1 text-gray-700 hover:text-remotely-ink">
For Companies
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="dropdown-menu absolute top-full left-0 mt-2 bg-white rounded-card shadow-lg border border-gray-100 py-2 min-w-[200px]">
<a href="https://remotely.works/for-companies" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Remotely for Startups</a>
<a href="https://remotely.works/hiring-markets" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Hiring Markets</a>
<a href="https://remotely.works/talent" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Talent</a>
<a href="https://remotely.works/retention" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Retention</a>
<a href="https://remotely.works/pricing" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Pricing</a>
<a href="https://remotely.works/customer-stories" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Customer Stories</a>
<a href="https://remotely.works/blog" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Blog</a>
</div>
</div>
<div class="dropdown relative">
<button class="flex items-center gap-1 text-gray-700 hover:text-remotely-ink">
For Developers
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="dropdown-menu absolute top-full left-0 mt-2 bg-white rounded-card shadow-lg border border-gray-100 py-2 min-w-[200px]">
<a href="https://remotely.works/for-developers" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Join as Developer</a>
<a href="https://remotely.works/developer-resources" class="block px-4 py-2 text-gray-700 hover:bg-remotely-light">Resources</a>
</div>
</div>
</div>
<!-- Right Menu -->
<div class="flex items-center gap-4">
<a href="https://platform.remotely.works/login" class="text-gray-700 hover:text-remotely-ink hidden md:block">Login</a>
<a href="https://platform.remotely.works/startup/apply" class="btn-primary bg-remotely-ink text-white px-5 py-2 rounded-btn text-sm hover:bg-gray-800 transition">
Get Started
</a>
</div>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-20 pb-28">
<div class="max-w-4xl mx-auto px-6 text-center">
<div class="inline-block bg-remotely-pink/10 text-remotely-pink px-4 py-1.5 rounded-btn text-sm font-medium mb-6 border border-remotely-pink/20">
⚠️ For BairesDev Customers Only
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-headline leading-tight mb-6">
Are You Paying <span class="gradient-text">70% More</span><br>Than You Should?
</h1>
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
Traditional staff augmentation companies take up to <strong class="text-remotely-ink">70% gross margin</strong> on every developer. Your $75/hour dev? They're probably earning less than $25.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#calculator" class="btn-primary bg-remotely-ink text-white px-8 py-4 rounded-btn hover:bg-gray-800 transition">
Calculate Your Hidden Costs →
</a>
<a href="#invoice" class="btn-primary bg-remotely-gray text-remotely-ink px-8 py-4 rounded-btn hover:bg-gray-200 transition">
Upload Invoice for Free Analysis
</a>
</div>
</div>
</section>
<!-- Math Section -->
<section class="py-20 bg-white">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-headline text-center mb-4">
The Staff Augmentation Math Nobody Talks About
</h2>
<p class="text-gray-500 text-center mb-12 max-w-2xl mx-auto">
Here's what happens to your $75/hour when you use traditional agencies like BairesDev.
</p>
<div class="grid md:grid-cols-2 gap-8">
<!-- BairesDev -->
<div class="bg-remotely-light rounded-card p-8 border border-gray-200 card-shadow">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-headline text-gray-500">BairesDev Model</h3>
<span class="bg-red-100 text-red-600 text-xs px-3 py-1 rounded-btn">Hidden Costs</span>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center py-3 border-b border-gray-200">
<span class="text-gray-500">You pay</span>
<span class="text-2xl font-headline">$75/hr</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-gray-200">
<span class="text-gray-500">Agency takes (~70%)</span>
<span class="text-xl font-headline text-red-500">-$52.50</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-gray-200">
<span class="text-gray-500">45-hr billing scam (+12.5%)</span>
<span class="text-xl font-headline text-red-500">-$9.38</span>
</div>
<div class="flex justify-between items-center py-3 bg-red-50 -mx-4 px-4 rounded-lg">
<span class="font-semibold">Developer actually gets</span>
<span class="text-2xl font-headline text-red-500">~$22/hr</span>
</div>
</div>
</div>
<!-- Remotely -->
<div class="bg-purple-50 rounded-card p-8 border border-remotely-purple/20 card-shadow">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-headline text-remotely-purple">Remotely Model</h3>
<span class="bg-remotely-purple/10 text-remotely-purple text-xs px-3 py-1 rounded-btn">Transparent</span>
</div>
<div class="space-y-4">
<div class="flex justify-between items-center py-3 border-b border-purple-200">
<span class="text-gray-500">Developer salary (you decide)</span>
<span class="text-2xl font-headline">$50/hr</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-purple-200">
<span class="text-gray-500">Flat platform fee</span>
<span class="text-xl font-headline text-remotely-purple">+$2K/mo</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-purple-200">
<span class="text-gray-500">Hidden fees</span>
<span class="text-xl font-headline text-green-500">$0</span>
</div>
<div class="flex justify-between items-center py-3 bg-green-50 -mx-4 px-4 rounded-lg">
<span class="font-semibold">Your total cost</span>
<span class="text-2xl font-headline text-green-600">~$62/hr</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Quality Section -->
<section class="py-20 bg-remotely-light">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-headline text-center mb-4">
But Wait—Is the Talent Actually <span class="gradient-text">Better?</span>
</h2>
<p class="text-gray-500 text-center mb-12 max-w-2xl mx-auto">
Saving money means nothing if quality drops. Here's the data.
</p>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-card p-6 border border-gray-200 text-center card-shadow">
<div class="text-4xl font-headline text-remotely-pink mb-2">33%</div>
<p class="text-gray-500 text-sm">Of BairesDev engineers pass our vetting (we've tested 1,000+)</p>
</div>
<div class="bg-white rounded-card p-6 border border-gray-200 text-center card-shadow">
<div class="text-4xl font-headline text-remotely-purple mb-2">10+ yrs</div>
<p class="text-gray-500 text-sm">Average experience in our 7,000+ engineer network</p>
</div>
<div class="bg-white rounded-card p-6 border border-gray-200 text-center card-shadow">
<div class="text-4xl font-headline text-green-600 mb-2">2x</div>
<p class="text-gray-500 text-sm">Higher retention—engineers stay when they're paid fairly</p>
</div>
</div>
<div class="mt-10 bg-white rounded-card p-6 border border-remotely-purple/20 card-shadow">
<p class="text-center text-lg">
<span class="text-remotely-purple font-headline">Why better talent for less?</span>
<span class="text-gray-600"> Top engineers choose Remotely because they control their salary, can get equity, and are incentivized to use AI to ship faster.</span>
</p>
</div>
</div>
</section>
<!-- Invoice Upload Section -->
<section id="invoice" class="py-20 bg-white">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-headline text-center mb-4">Upload Your Invoice for Free Analysis</h2>
<p class="text-gray-500 text-center mb-10">Drop your BairesDev invoice and we'll show you exactly what you're overpaying.</p>
<div class="bg-remotely-light rounded-card p-8 border-2 border-dashed border-gray-300 hover:border-remotely-purple transition cursor-pointer card-shadow" id="dropZone">
<div class="text-center">
<div class="w-16 h-16 bg-remotely-purple/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-remotely-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
</svg>
</div>
<p class="text-lg font-headline mb-2">Drag & drop your invoice here</p>
<p class="text-gray-500 text-sm mb-4">or click to browse (PDF, PNG, JPG)</p>
<input type="file" id="fileInput" class="hidden" accept=".pdf,.png,.jpg,.jpeg">
<button onclick="document.getElementById('fileInput').click()" class="btn-primary bg-remotely-ink text-white px-6 py-3 rounded-btn hover:bg-gray-800 transition">
Select File
</button>
</div>
</div>
<!-- Trust Badges -->
<div class="mt-8 flex flex-col md:flex-row items-center justify-center gap-6 text-center">
<div class="flex items-center gap-2 text-gray-500">
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
</svg>
<span class="font-medium">SOC 2 Type II Certified</span>
</div>
<div class="flex items-center gap-2 text-gray-500">
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
</svg>
<span class="font-medium">256-bit Encryption</span>
</div>
</div>
<p class="text-center text-gray-400 text-sm mt-4">
🔒 Your invoice is treated with full confidentiality. We will never share your data with third parties.
</p>
</div>
</section>
<!-- Calculator Section -->
<section id="calculator" class="py-20 bg-remotely-light">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-headline text-center mb-4">Or Calculate Your Real Costs</h2>
<p class="text-gray-500 text-center mb-10">Enter your current rates to see how much you could save.</p>
<div class="bg-white rounded-card p-8 border border-gray-200 card-shadow">
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div>
<label class="block text-sm text-gray-600 mb-2">Current Hourly Rate ($)</label>
<input type="number" id="hourlyRate" value="75" class="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-lg font-headline focus:ring-2 focus:ring-remotely-purple focus:border-transparent outline-none">
</div>
<div>
<label class="block text-sm text-gray-600 mb-2">Number of Developers</label>
<input type="number" id="devCount" value="5" class="w-full bg-white border border-gray-300 rounded-lg px-4 py-3 text-lg font-headline focus:ring-2 focus:ring-remotely-purple focus:border-transparent outline-none">
</div>
</div>
<div class="bg-white rounded-card p-6 mb-8 border border-gray-200">
<div class="grid grid-cols-2 gap-6 text-center mb-6">
<div>
<div class="text-gray-400 text-sm mb-1">Current Annual Cost</div>
<div id="currentCost" class="text-2xl font-headline text-gray-400 line-through">$877,500</div>
</div>
<div>
<div class="text-gray-400 text-sm mb-1">With Remotely</div>
<div id="remotelyCost" class="text-2xl font-headline text-green-600">$640,000</div>
</div>
</div>
<div class="pt-6 border-t border-gray-200 text-center">
<div class="text-gray-400 text-sm mb-1">Your Annual Savings</div>
<div id="savings" class="text-4xl font-headline gradient-text">$237,500</div>
</div>
</div>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="block w-full btn-primary bg-remotely-ink text-white text-center py-4 rounded-btn hover:bg-gray-800 transition">
Get Your Personalized Analysis →
</a>
</div>
</div>
</section>
<!-- Cross-Pollination -->
<section class="py-20 bg-white">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-headline text-center mb-12">Beyond Cost Savings: The Full Picture</h2>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-card p-6 border border-gray-200 card-shadow">
<div class="text-3xl mb-4">🎯</div>
<h3 class="font-headline text-lg mb-2">Ownership Culture</h3>
<p class="text-gray-600 text-sm">Our developers can receive equity and bonuses. They think like owners—aligned with your success, not just clocking hours.</p>
</div>
<div class="bg-white rounded-card p-6 border border-gray-200 card-shadow">
<div class="text-3xl mb-4">🤖</div>
<h3 class="font-headline text-lg mb-2">AI-First Engineers</h3>
<p class="text-gray-600 text-sm">Our developers are incentivized to use AI tools to ship faster. They're optimizing for outcomes, not padding hours.</p>
</div>
<div class="bg-white rounded-card p-6 border border-gray-200 card-shadow">
<div class="text-3xl mb-4">📈</div>
<h3 class="font-headline text-lg mb-2">Retention Lever</h3>
<p class="text-gray-600 text-sm">When more of what you pay goes to the developer, they stay. 2x higher retention saves you onboarding costs.</p>
</div>
<div class="bg-white rounded-card p-6 border border-gray-200 card-shadow">
<div class="text-3xl mb-4">✨</div>
<h3 class="font-headline text-lg mb-2">Senior-Only Network</h3>
<p class="text-gray-600 text-sm">Only 33% of agency engineers pass our vetting. You're getting the top third—not whoever's available.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-remotely-ink py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl font-headline text-white mb-4">Ready to Stop Overpaying?</h2>
<p class="text-gray-300 text-lg mb-8">Talk to our team. We'll show you exactly how much you can save—with no drop in quality.</p>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="inline-block btn-primary bg-white text-remotely-ink px-8 py-4 rounded-btn hover:bg-gray-100 transition">
Schedule a Call →
</a>
<p class="text-gray-500 text-sm mt-4">15 minutes. No commitment. Real numbers.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-remotely-ink py-8 border-t border-white/10">
<div class="max-w-6xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="flex items-center gap-3">
<svg class="w-6 h-6" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M12 10H17C19.2091 10 21 11.7909 21 14C21 15.5 20.2 16.8 19 17.5L22 22H19L16.5 18H14.5V22H12V10ZM14.5 12.5V15.5H17C17.8284 15.5 18.5 14.8284 18.5 14C18.5 13.1716 17.8284 12.5 17 12.5H14.5Z" fill="#14151F"/>
</svg>
<span class="text-gray-400 text-sm">©2026 Remotely Works, Inc.</span>
</div>
<nav class="flex gap-6 text-sm text-gray-500">
<a href="https://remotely.works/privacy" class="hover:text-white transition">Privacy</a>
<a href="https://remotely.works/terms" class="hover:text-white transition">Terms</a>
<a href="https://remotely.works/about" class="hover:text-white transition">About Us</a>
</nav>
</div>
</footer>
<script>
const hourlyInput = document.getElementById('hourlyRate');
const devInput = document.getElementById('devCount');
function calculate() {
const rate = parseFloat(hourlyInput.value) || 75;
const devs = parseInt(devInput.value) || 5;
const traditionalAnnual = rate * 45 * 52 * devs;
const devSalary = rate * 0.65;
const remotelyAnnual = ((devSalary * 40 * 52) + (2000 * 12)) * devs;
const savings = traditionalAnnual - remotelyAnnual;
document.getElementById('currentCost').textContent = '$' + traditionalAnnual.toLocaleString();
document.getElementById('remotelyCost').textContent = '$' + Math.round(remotelyAnnual).toLocaleString();
document.getElementById('savings').textContent = '$' + Math.round(savings).toLocaleString();
}
hourlyInput.addEventListener('input', calculate);
devInput.addEventListener('input', calculate);
calculate();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment