Skip to content

Instantly share code, notes, and snippets.

@aseba

aseba/ceo-landing.html

Created February 5, 2026 06:49
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save aseba/e7ec288a5c965201e60f0422e16353e6 to your computer and use it in GitHub Desktop.
Download ZIP
BairesDev Competitive Landing Pages - Remotely
Raw
ceo-landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Staff Augmentation Industry is Broken | 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;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(180deg, #0a0a0a 0%, #171717 100%); }
.accent-gradient { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.glass-card { background: rgba(255,255,255,0.02); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.06); }
.gold-text { background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
</style>
</head>
<body class="gradient-bg text-white min-h-screen">
<!-- Nav -->
<nav class="container mx-auto px-6 py-6 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8 text-amber-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
<span class="text-xl font-bold">Remotely</span>
</div>
<a href="#founders" class="bg-amber-500 hover:bg-amber-600 text-black px-5 py-2 rounded-lg font-medium transition">Talk to Founders</a>
</nav>
<!-- Hero -->
<section class="container mx-auto px-6 py-20 md:py-32">
<div class="max-w-4xl mx-auto">
<div class="inline-block bg-amber-500/10 text-amber-400 px-4 py-1 rounded-full text-sm font-medium mb-8">
From the Founders
</div>
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-8">
The Staff Augmentation<br>Industry is <span class="gold-text">Broken</span>.
</h1>
<p class="text-xl md:text-2xl text-gray-400 mb-8 leading-relaxed max-w-3xl">
70% margins. Opaque pricing. Commoditized talent. The traditional model
creates misaligned incentives between you, the agency, and the developers.
</p>
<p class="text-xl md:text-2xl text-white mb-12 leading-relaxed max-w-3xl">
We built Remotely to fix that.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#founders" class="accent-gradient text-black px-8 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition text-center">
Talk to Our Founders →
</a>
<a href="#model" class="glass-card px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/10 transition text-center">
See How We're Different
</a>
</div>
</div>
</section>
<!-- Founder Credibility -->
<section class="border-y border-white/5">
<div class="container mx-auto px-6 py-12">
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 text-center">
<div>
<div class="text-3xl font-bold text-amber-400">$130M</div>
<div class="text-gray-500 text-sm">Previous Exit</div>
</div>
<div class="h-8 w-px bg-white/10 hidden md:block"></div>
<div>
<div class="text-3xl font-bold">2nd</div>
<div class="text-gray-500 text-sm">Time Founders</div>
</div>
<div class="h-8 w-px bg-white/10 hidden md:block"></div>
<div>
<div class="text-3xl font-bold">500+</div>
<div class="text-gray-500 text-sm">Tech Companies Served</div>
</div>
<div class="h-8 w-px bg-white/10 hidden md:block"></div>
<div>
<div class="text-3xl font-bold">5,800+</div>
<div class="text-gray-500 text-sm">Vetted Engineers</div>
</div>
</div>
</div>
</section>
<!-- The Broken Model -->
<section id="model" class="py-20">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">Why the Traditional Model Fails</h2>
<div class="space-y-6">
<div class="glass-card rounded-2xl p-8">
<div class="flex items-start gap-6">
<div class="text-4xl">💸</div>
<div>
<h3 class="text-xl font-semibold mb-2">Misaligned Incentives</h3>
<p class="text-gray-400">Traditional agencies make more money when they pay developers less. That's why they attract mediocre talent and have 40%+ annual churn. The incentive is to maximize billing, not outcomes.</p>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-8">
<div class="flex items-start gap-6">
<div class="text-4xl">🎭</div>
<div>
<h3 class="text-xl font-semibold mb-2">Opacity as a Feature</h3>
<p class="text-gray-400">You'll never know what your developers actually earn. That's by design. The 70% margin only works if you can't see behind the curtain. At Remotely, you set the salary directly.</p>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-8">
<div class="flex items-start gap-6">
<div class="text-4xl">🔄</div>
<div>
<h3 class="text-xl font-semibold mb-2">Vendor Lock-In</h3>
<p class="text-gray-400">Your developers work for the agency, not you. If you want to hire them directly? You'll pay 3-6 months salary as a "buyout fee." We think that's absurd. Our developers can transition to your payroll anytime.</p>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-8">
<div class="flex items-start gap-6">
<div class="text-4xl">📉</div>
<div>
<h3 class="text-xl font-semibold mb-2">The "1% Talent" Lie</h3>
<p class="text-gray-400">Every agency claims "top 1%" talent. We've interviewed 1,000+ engineers from major agencies who applied to us. Only 33% passed our vetting. Marketing claims ≠ engineering quality.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Our Model -->
<section class="bg-amber-500/5 py-20">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-12 text-center">The Remotely Model</h2>
<div class="grid md:grid-cols-2 gap-8">
<div class="glass-card rounded-2xl p-8">
<div class="text-amber-400 font-semibold mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-sm">1</span>
Transparent Pricing
</div>
<p class="text-gray-400 mb-4">$2,000/month flat fee per developer. No percentage cuts. No hidden margins. You see exactly what the developer earns.</p>
<div class="text-sm text-gray-500">Traditional agencies take 50-70% margin.</div>
</div>
<div class="glass-card rounded-2xl p-8">
<div class="text-amber-400 font-semibold mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-sm">2</span>
Direct Relationships
</div>
<p class="text-gray-400 mb-4">Developers work with you, not for us. They're part of your team, your Slack, your standups. We handle payroll and compliance.</p>
<div class="text-sm text-gray-500">Agencies keep developers at arm's length.</div>
</div>
<div class="glass-card rounded-2xl p-8">
<div class="text-amber-400 font-semibold mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-sm">3</span>
Senior Talent Pool
</div>
<p class="text-gray-400 mb-4">The best LATAM engineers want to control their compensation. That's why they choose Remotely over traditional agencies.</p>
<div class="text-sm text-gray-500">We attract talent agencies can't.</div>
</div>
<div class="glass-card rounded-2xl p-8">
<div class="text-amber-400 font-semibold mb-4 flex items-center gap-2">
<span class="w-8 h-8 rounded-full bg-amber-500/20 flex items-center justify-center text-sm">4</span>
No Lock-In
</div>
<p class="text-gray-400 mb-4">Want to hire your developer directly after 12 months? No fee. They're great, you should keep them.</p>
<div class="text-sm text-gray-500">Agencies charge 3-6 month buyout fees.</div>
</div>
</div>
</div>
</div>
</section>
<!-- Social Proof -->
<section class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Trusted by Engineering Leaders</h2>
<div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
<div class="glass-card rounded-2xl p-6">
<div class="flex items-center gap-3 mb-4">
<img src="https://ui-avatars.com/api/?name=F+S&background=f59e0b&color=000" alt="" class="w-12 h-12 rounded-full">
<div>
<div class="font-semibold">Fayez S.</div>
<div class="text-gray-500 text-sm">CEO, Bluecore</div>
</div>
</div>
<p class="text-gray-400">"After 3 years with traditional agencies, switching to Remotely was eye-opening. Better engineers, better rates, and complete transparency."</p>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="flex items-center gap-3 mb-4">
<img src="https://ui-avatars.com/api/?name=M+K&background=f59e0b&color=000" alt="" class="w-12 h-12 rounded-full">
<div>
<div class="font-semibold">Michael K.</div>
<div class="text-gray-500 text-sm">CTO, Fireblocks</div>
</div>
</div>
<p class="text-gray-400">"The quality difference is real. We've scaled from 2 to 15 Remotely engineers in 18 months. They feel like internal team members."</p>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="flex items-center gap-3 mb-4">
<img src="https://ui-avatars.com/api/?name=S+R&background=f59e0b&color=000" alt="" class="w-12 h-12 rounded-full">
<div>
<div class="font-semibold">Sarah R.</div>
<div class="text-gray-500 text-sm">VP Eng, Spring Health</div>
</div>
</div>
<p class="text-gray-400">"We did the math. Same caliber talent, 40% less cost. The flat fee model just makes more sense."</p>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-gray-500 mb-6">Also trusted by teams at</p>
<div class="flex flex-wrap justify-center items-center gap-8 opacity-50">
<span class="text-xl font-bold">Pinterest</span>
<span class="text-xl font-bold">Gong</span>
<span class="text-xl font-bold">Caribou</span>
<span class="text-xl font-bold">EdSights</span>
<span class="text-xl font-bold">Amiara</span>
</div>
</div>
</div>
</section>
<!-- Founder Section -->
<section id="founders" class="bg-amber-500/5 py-20">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-center">Meet the Founders</h2>
<p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">We built our last company with LATAM engineers. After selling it for $130M, we knew the staff aug industry needed disruption.</p>
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-card rounded-2xl p-6 text-center">
<div class="w-20 h-20 rounded-full bg-amber-500/20 mx-auto mb-4 flex items-center justify-center text-3xl">🧑‍💼</div>
<h3 class="font-semibold text-lg">Pau Sabria</h3>
<p class="text-amber-400 text-sm mb-2">Co-Founder & CEO</p>
<p class="text-gray-500 text-sm">Previously founded Olapic (acq. for $130M)</p>
</div>
<div class="glass-card rounded-2xl p-6 text-center">
<div class="w-20 h-20 rounded-full bg-amber-500/20 mx-auto mb-4 flex items-center justify-center text-3xl">🧑‍💼</div>
<h3 class="font-semibold text-lg">Pau Suris</h3>
<p class="text-amber-400 text-sm mb-2">Co-Founder</p>
<p class="text-gray-500 text-sm">Previously CRO at Olapic</p>
</div>
<div class="glass-card rounded-2xl p-6 text-center">
<div class="w-20 h-20 rounded-full bg-amber-500/20 mx-auto mb-4 flex items-center justify-center text-3xl">🧑‍💻</div>
<h3 class="font-semibold text-lg">Sebastian Alvarez</h3>
<p class="text-amber-400 text-sm mb-2">Co-Founder & CTO</p>
<p class="text-gray-500 text-sm">Built engineering orgs at scale</p>
</div>
</div>
<div class="mt-12 text-center">
<a href="https://calendly.com/remotely-founders" class="inline-block accent-gradient text-black px-10 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition">
Schedule a Founder Call →
</a>
<p class="text-gray-500 text-sm mt-4">15 minutes. Real talk. No sales pressure.</p>
</div>
</div>
</div>
</section>
<!-- Risk Assessment CTA -->
<section class="py-20">
<div class="container mx-auto px-6">
<div class="max-w-3xl mx-auto glass-card rounded-3xl p-10 md:p-16 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Get a Free Vendor Risk Assessment</h2>
<p class="text-xl text-gray-400 mb-8">We'll analyze your current staff aug setup and show you exactly where you're overpaying—with no commitment to switch.</p>
<a href="https://remotely.works/assessment" class="inline-block accent-gradient text-black px-10 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition">
Request Assessment →
</a>
<p class="text-gray-500 text-sm mt-4">Takes 5 minutes. Report delivered in 48 hours.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-white/5 py-8">
<div class="container mx-auto px-6 text-center text-gray-500 text-sm">
<p>© 2026 Remotely.works • Transparency isn't a feature. It's our entire business model.</p>
</div>
</footer>
</body>
</html>
Raw
cfo-landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Hidden Cost of Your Staff Augmentation Partner | 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;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%); }
.accent-gradient { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.glass-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); }
.calculator-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); }
.pulse-border { animation: pulse-border 2s infinite; }
@keyframes pulse-border { 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } }
</style>
</head>
<body class="gradient-bg text-white min-h-screen">
<!-- Nav -->
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8 text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
<span class="text-xl font-bold">Remotely</span>
</div>
<a href="#calculator" class="bg-emerald-500 hover:bg-emerald-600 px-5 py-2 rounded-lg font-medium transition">See Your Savings</a>
</nav>
<!-- Hero -->
<section class="container mx-auto px-6 py-16 md:py-24">
<div class="max-w-4xl mx-auto text-center">
<div class="inline-block bg-red-500/20 text-red-300 px-4 py-1 rounded-full text-sm font-medium mb-6">
⚠️ For BairesDev Customers Only
</div>
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-6">
Are You Paying <span class="text-red-400">70% More</span><br>Than You Should?
</h1>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
Traditional staff augmentation companies take up to <strong class="text-white">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="accent-gradient px-8 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition pulse-border">
Calculate Your Hidden Costs →
</a>
<a href="#upload" class="glass-card px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/10 transition">
Upload Invoice for Free Analysis
</a>
</div>
</div>
</section>
<!-- The Problem -->
<section class="bg-slate-900/50 py-16">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">The Staff Augmentation Math Nobody Talks About</h2>
<div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<!-- Traditional Model -->
<div class="bg-red-900/20 border border-red-500/30 rounded-2xl p-8">
<div class="text-red-400 font-semibold mb-4">❌ Traditional Model (BairesDev, Toptal, etc.)</div>
<div class="space-y-4">
<div class="flex justify-between items-center py-3 border-b border-red-500/20">
<span class="text-gray-300">You Pay</span>
<span class="text-2xl font-bold">$75/hr</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-red-500/20">
<span class="text-gray-300">Agency Keeps (70%)</span>
<span class="text-xl font-semibold text-red-400">$52.50/hr</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-red-500/20">
<span class="text-gray-300">Developer Gets</span>
<span class="text-xl font-semibold">$22.50/hr</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-red-500/20">
<span class="text-gray-300">Billed Hours/Week</span>
<span class="text-xl font-semibold text-red-400">45 hrs*</span>
</div>
<div class="flex justify-between items-center py-3">
<span class="text-gray-300">Annual Cost (1 dev)</span>
<span class="text-2xl font-bold text-red-400">$175,500</span>
</div>
</div>
<p class="text-xs text-gray-500 mt-4">*BairesDev bills 45 hours instead of 40 - a hidden 12.5% surcharge</p>
</div>
<!-- Remotely Model -->
<div class="bg-emerald-900/20 border border-emerald-500/30 rounded-2xl p-8">
<div class="text-emerald-400 font-semibold mb-4">✅ Remotely Model</div>
<div class="space-y-4">
<div class="flex justify-between items-center py-3 border-b border-emerald-500/20">
<span class="text-gray-300">You Pay (Dev Salary)</span>
<span class="text-2xl font-bold">$50/hr</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-emerald-500/20">
<span class="text-gray-300">Remotely Fee (Flat)</span>
<span class="text-xl font-semibold text-emerald-400">$2,000/mo</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-emerald-500/20">
<span class="text-gray-300">Developer Gets</span>
<span class="text-xl font-semibold">$50/hr (100%)</span>
</div>
<div class="flex justify-between items-center py-3 border-b border-emerald-500/20">
<span class="text-gray-300">Billed Hours/Week</span>
<span class="text-xl font-semibold">40 hrs</span>
</div>
<div class="flex justify-between items-center py-3">
<span class="text-gray-300">Annual Cost (1 dev)</span>
<span class="text-2xl font-bold text-emerald-400">$128,000</span>
</div>
</div>
<div class="mt-6 p-4 bg-emerald-500/20 rounded-lg text-center">
<span class="text-emerald-300 font-semibold">You Save: $47,500/year per developer</span>
</div>
</div>
</div>
</div>
</section>
<!-- Calculator Section -->
<section id="calculator" class="py-20">
<div class="container mx-auto px-6">
<div class="max-w-3xl mx-auto">
<h2 class="text-3xl font-bold text-center mb-4">Calculate Your Real Costs</h2>
<p class="text-gray-400 text-center mb-10">Enter your current rates to see how much you could save with transparent pricing.</p>
<div class="glass-card rounded-2xl p-8">
<div class="grid md:grid-cols-2 gap-6 mb-8">
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Current Hourly Rate ($)</label>
<input type="number" id="hourlyRate" value="75" class="calculator-input w-full bg-slate-800 border border-slate-600 rounded-lg px-4 py-3 text-xl font-semibold">
</div>
<div>
<label class="block text-sm font-medium text-gray-300 mb-2">Number of Developers</label>
<input type="number" id="devCount" value="5" class="calculator-input w-full bg-slate-800 border border-slate-600 rounded-lg px-4 py-3 text-xl font-semibold">
</div>
</div>
<div class="bg-slate-800/50 rounded-xl p-6 mb-8">
<div class="grid grid-cols-2 gap-4 text-center">
<div>
<div class="text-gray-400 text-sm mb-1">Current Annual Cost</div>
<div id="currentCost" class="text-3xl font-bold text-red-400">$877,500</div>
</div>
<div>
<div class="text-gray-400 text-sm mb-1">With Remotely</div>
<div id="remotelyCost" class="text-3xl font-bold text-emerald-400">$640,000</div>
</div>
</div>
<div class="mt-6 pt-6 border-t border-slate-600 text-center">
<div class="text-gray-400 text-sm mb-1">Annual Savings</div>
<div id="savings" class="text-4xl font-extrabold text-emerald-300">$237,500</div>
<div class="text-emerald-400 mt-1">That's <span id="savingsPercent">27%</span> less</div>
</div>
</div>
<div class="text-center">
<button onclick="showContactForm()" class="accent-gradient px-10 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition w-full sm:w-auto">
Get Your Personalized Analysis →
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Invoice Upload -->
<section id="upload" class="bg-slate-900/50 py-20">
<div class="container mx-auto px-6">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-4">Want an Exact Analysis?</h2>
<p class="text-gray-400 mb-8">Upload your latest invoice and our team will provide a detailed savings report within 24 hours. 100% confidential.</p>
<div class="glass-card rounded-2xl p-8 border-2 border-dashed border-slate-600 hover:border-emerald-500/50 transition cursor-pointer" onclick="document.getElementById('invoiceUpload').click()">
<input type="file" id="invoiceUpload" class="hidden" accept=".pdf,.png,.jpg,.jpeg">
<div class="py-8">
<svg class="w-16 h-16 mx-auto text-gray-500 mb-4" 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>
<p class="text-xl font-medium mb-2">Drop your invoice here</p>
<p class="text-gray-500">PDF, PNG, or JPG • Max 10MB</p>
</div>
</div>
<div class="flex items-center justify-center gap-2 mt-6 text-sm text-gray-500">
<svg class="w-5 h-5" 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>
Your data is encrypted and never shared
</div>
</div>
</div>
</section>
<!-- Logos -->
<section class="py-16">
<div class="container mx-auto px-6">
<p class="text-center text-gray-500 mb-8">Trusted by engineering teams at</p>
<div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-60">
<div class="text-2xl font-bold text-gray-400">Bluecore</div>
<div class="text-2xl font-bold text-gray-400">Fireblocks</div>
<div class="text-2xl font-bold text-gray-400">Spring Health</div>
<div class="text-2xl font-bold text-gray-400">Caribou</div>
<div class="text-2xl font-bold text-gray-400">EdSights</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-20">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto glass-card rounded-3xl p-10 md:p-16 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready to Stop Overpaying?</h2>
<p class="text-xl text-gray-300 mb-8">Schedule a call with our team. We'll show you exactly how much you can save.</p>
<a href="https://remotely.works/demo" class="inline-block accent-gradient px-10 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition">
Talk to Our Team →
</a>
<p class="text-gray-500 text-sm mt-4">No commitment. 15 minutes. Real numbers.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-slate-800 py-8">
<div class="container mx-auto px-6 text-center text-gray-500 text-sm">
<p>© 2026 Remotely.works • Built by second-time founders who sold their last company for $130M</p>
</div>
</footer>
<script>
// Calculator logic
const hourlyInput = document.getElementById('hourlyRate');
const devInput = document.getElementById('devCount');
function calculate() {
const rate = parseFloat(hourlyInput.value) || 75;
const devs = parseInt(devInput.value) || 5;
// Traditional: rate * 45hrs * 52weeks (they bill 45 hrs/week)
const traditionalAnnual = rate * 45 * 52 * devs;
// Remotely: assume dev salary at ~65% of traditional rate + $2k/mo fee
const devSalary = rate * 0.65;
const remotelyAnnual = ((devSalary * 40 * 52) + (2000 * 12)) * devs;
const savings = traditionalAnnual - remotelyAnnual;
const savingsPercent = Math.round((savings / traditionalAnnual) * 100);
document.getElementById('currentCost').textContent = '$' + traditionalAnnual.toLocaleString();
document.getElementById('remotelyCost').textContent = '$' + Math.round(remotelyAnnual).toLocaleString();
document.getElementById('savings').textContent = '$' + Math.round(savings).toLocaleString();
document.getElementById('savingsPercent').textContent = savingsPercent + '%';
}
hourlyInput.addEventListener('input', calculate);
devInput.addEventListener('input', calculate);
calculate();
function showContactForm() {
alert('This would open a HubSpot form or redirect to booking page');
}
</script>
</body>
</html>
Raw
cto-landing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Better Engineers Than BairesDev | 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;800&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #0c1222 0%, #1a1a2e 100%); }
.accent-gradient { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
.glass-card { background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); }
.code-font { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.dev-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15); }
</style>
</head>
<body class="gradient-bg text-white min-h-screen">
<!-- Nav -->
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="flex items-center gap-2">
<svg class="w-8 h-8 text-violet-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
<span class="text-xl font-bold">Remotely</span>
</div>
<a href="#profiles" class="bg-violet-500 hover:bg-violet-600 px-5 py-2 rounded-lg font-medium transition">See Developer Profiles</a>
</nav>
<!-- Hero -->
<section class="container mx-auto px-6 py-16 md:py-24">
<div class="max-w-4xl mx-auto text-center">
<div class="inline-block bg-violet-500/20 text-violet-300 px-4 py-1 rounded-full text-sm font-medium mb-6">
🔬 The Data BairesDev Won't Show You
</div>
<h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-6">
Only <span class="text-violet-400">33%</span> of BairesDev<br>Engineers Pass Our Vetting
</h1>
<p class="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
We've interviewed over <strong class="text-white">1,000 BairesDev developers</strong> who applied to Remotely.
Less than a third met our standards. Here's why the best LATAM engineers don't work for traditional agencies.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#profiles" class="accent-gradient px-8 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition">
See Real Developer Profiles →
</a>
<a href="#why" class="glass-card px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white/10 transition">
Why Engineers Leave Agencies
</a>
</div>
</div>
</section>
<!-- The Quality Problem -->
<section class="bg-slate-900/30 py-16">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">The "Top 1%" Myth</h2>
<p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">BairesDev claims to hire the "top 1% of talent." Our data tells a different story.</p>
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="glass-card rounded-2xl p-8 text-center">
<div class="text-5xl font-extrabold text-red-400 mb-2">1,000+</div>
<div class="text-gray-300">BairesDev devs applied to Remotely</div>
</div>
<div class="glass-card rounded-2xl p-8 text-center">
<div class="text-5xl font-extrabold text-yellow-400 mb-2">33%</div>
<div class="text-gray-300">Passed our technical vetting</div>
</div>
<div class="glass-card rounded-2xl p-8 text-center">
<div class="text-5xl font-extrabold text-violet-400 mb-2">67%</div>
<div class="text-gray-300">Failed to meet our standards</div>
</div>
</div>
<div class="max-w-3xl mx-auto mt-12 glass-card rounded-2xl p-8">
<h3 class="text-xl font-semibold mb-4 text-center">Why the gap?</h3>
<div class="grid md:grid-cols-2 gap-6">
<div class="flex gap-4">
<div class="text-2xl">💰</div>
<div>
<div class="font-semibold mb-1">Salary Control Attracts Top Talent</div>
<div class="text-gray-400 text-sm">Senior engineers want to negotiate their own compensation. At Remotely, they do.</div>
</div>
</div>
<div class="flex gap-4">
<div class="text-2xl">🎯</div>
<div>
<div class="font-semibold mb-1">Direct Client Relationships</div>
<div class="text-gray-400 text-sm">No middleman means better communication and more ownership.</div>
</div>
</div>
<div class="flex gap-4">
<div class="text-2xl">📊</div>
<div>
<div class="font-semibold mb-1">Transparency = Accountability</div>
<div class="text-gray-400 text-sm">When devs know clients see their real compensation, they deliver better work.</div>
</div>
</div>
<div class="flex gap-4">
<div class="text-2xl">🚀</div>
<div>
<div class="font-semibold mb-1">Career Growth, Not Agency Churn</div>
<div class="text-gray-400 text-sm">Developers build long-term relationships with clients, not just fill agency benches.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Developer Profiles Preview -->
<section id="profiles" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">Meet Real Developers</h2>
<p class="text-gray-400 text-center mb-12">Full profiles with videos, GitHub contributions, and verified skills. No surprises.</p>
<div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
<!-- Dev Card 1 -->
<div class="glass-card rounded-2xl overflow-hidden dev-card transition-all duration-300">
<div class="h-48 bg-gradient-to-br from-violet-600/20 to-indigo-600/20 flex items-center justify-center">
<div class="w-24 h-24 rounded-full bg-violet-500/30 flex items-center justify-center text-4xl">👨‍💻</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg">Ricardo M.</h3>
<p class="text-violet-400 text-sm">Senior Full Stack Engineer</p>
</div>
<div class="text-right">
<div class="text-xs text-gray-500">Experience</div>
<div class="font-semibold">12 years</div>
</div>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">React</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Node.js</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">AWS</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">PostgreSQL</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span>Top 5% contributor (Go)</span>
</div>
<div class="mt-4 pt-4 border-t border-slate-700 flex justify-between items-center">
<span class="text-gray-400 text-sm">🇦🇷 Argentina</span>
<button class="text-violet-400 text-sm font-medium hover:text-violet-300">Watch Video →</button>
</div>
</div>
</div>
<!-- Dev Card 2 -->
<div class="glass-card rounded-2xl overflow-hidden dev-card transition-all duration-300">
<div class="h-48 bg-gradient-to-br from-emerald-600/20 to-teal-600/20 flex items-center justify-center">
<div class="w-24 h-24 rounded-full bg-emerald-500/30 flex items-center justify-center text-4xl">👩‍💻</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg">Maria L.</h3>
<p class="text-emerald-400 text-sm">Backend & Data Engineer</p>
</div>
<div class="text-right">
<div class="text-xs text-gray-500">Experience</div>
<div class="font-semibold">9 years</div>
</div>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Python</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Spark</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Kubernetes</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Terraform</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span>Ex-MercadoLibre</span>
</div>
<div class="mt-4 pt-4 border-t border-slate-700 flex justify-between items-center">
<span class="text-gray-400 text-sm">🇧🇷 Brazil</span>
<button class="text-emerald-400 text-sm font-medium hover:text-emerald-300">Watch Video →</button>
</div>
</div>
</div>
<!-- Dev Card 3 -->
<div class="glass-card rounded-2xl overflow-hidden dev-card transition-all duration-300">
<div class="h-48 bg-gradient-to-br from-amber-600/20 to-orange-600/20 flex items-center justify-center">
<div class="w-24 h-24 rounded-full bg-amber-500/30 flex items-center justify-center text-4xl">👨‍💻</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<div>
<h3 class="font-semibold text-lg">Carlos P.</h3>
<p class="text-amber-400 text-sm">Mobile & iOS Lead</p>
</div>
<div class="text-right">
<div class="text-xs text-gray-500">Experience</div>
<div class="font-semibold">11 years</div>
</div>
</div>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Swift</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Kotlin</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Flutter</span>
<span class="bg-slate-700/50 px-2 py-1 rounded text-xs">Firebase</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-400">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
<span>10M+ app downloads</span>
</div>
<div class="mt-4 pt-4 border-t border-slate-700 flex justify-between items-center">
<span class="text-gray-400 text-sm">🇲🇽 Mexico</span>
<button class="text-amber-400 text-sm font-medium hover:text-amber-300">Watch Video →</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="https://remotely.works/demo" class="inline-block accent-gradient px-10 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition">
Browse All 5,800+ Developers →
</a>
</div>
</div>
</section>
<!-- Why They Leave Section -->
<section id="why" class="bg-slate-900/30 py-20">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">What BairesDev Engineers Tell Us</h2>
<p class="text-gray-400 text-center mb-12 max-w-2xl mx-auto">Direct quotes from developers who left traditional agencies for Remotely.</p>
<div class="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
<div class="glass-card rounded-2xl p-6">
<div class="text-violet-400 text-4xl mb-4">"</div>
<p class="text-gray-300 mb-6">At BairesDev, I never knew what the client was paying. I found out they charged $85/hr and paid me $28. With Remotely, I negotiated $65/hr directly. The client pays less, I earn more.</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-violet-500/30 flex items-center justify-center">R</div>
<div>
<div class="font-medium">Roberto S.</div>
<div class="text-gray-500 text-sm">Senior Backend Engineer • Ex-BairesDev</div>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="text-emerald-400 text-4xl mb-4">"</div>
<p class="text-gray-300 mb-6">I was tired of being moved between projects every few months. Remotely lets me build long-term relationships. I've been with my current client for 2 years—feels like a real team member.</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-emerald-500/30 flex items-center justify-center">A</div>
<div>
<div class="font-medium">Ana C.</div>
<div class="text-gray-500 text-sm">Full Stack Developer • Ex-Toptal</div>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="text-amber-400 text-4xl mb-4">"</div>
<p class="text-gray-300 mb-6">The 45-hour billing was the last straw. They made me log 45 hours every week, but I was only getting paid for 40. That's theft. Remotely is honest—40 hours means 40 hours.</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-amber-500/30 flex items-center justify-center">D</div>
<div>
<div class="font-medium">Diego M.</div>
<div class="text-gray-500 text-sm">DevOps Engineer • Ex-BairesDev</div>
</div>
</div>
</div>
<div class="glass-card rounded-2xl p-6">
<div class="text-rose-400 text-4xl mb-4">"</div>
<p class="text-gray-300 mb-6">I had 15 years of experience but was treated like a commodity. Remotely's platform shows my real GitHub contributions, my videos, everything. Clients see my actual value.</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-rose-500/30 flex items-center justify-center">L</div>
<div>
<div class="font-medium">Lucas F.</div>
<div class="text-gray-500 text-sm">Staff Engineer • Ex-Globant</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="py-20">
<div class="container mx-auto px-6">
<div class="max-w-4xl mx-auto glass-card rounded-3xl p-10 md:p-16 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Ready for Real Senior Talent?</h2>
<p class="text-xl text-gray-300 mb-8">Talk to an engineer, not a sales rep. See real profiles before you commit.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://remotely.works/demo" class="accent-gradient px-10 py-4 rounded-xl font-semibold text-lg hover:opacity-90 transition">
Browse Developer Profiles →
</a>
<a href="#" class="glass-card px-10 py-4 rounded-xl font-semibold text-lg hover:bg-white/10 transition">
Talk to a Senior Engineer
</a>
</div>
<p class="text-gray-500 text-sm mt-4">Average time to first hire: 2 weeks</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t border-slate-800 py-8">
<div class="container mx-auto px-6 text-center text-gray-500 text-sm">
<p>© 2026 Remotely.works • 5,800+ vetted LATAM engineers ready to ship</p>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment