Skip to content

Instantly share code, notes, and snippets.

@aseba

aseba/ceo-landing.html

Created February 5, 2026 09:24
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save aseba/dbe4b6b7df3a8b7f0dc3a8db18d48357 to your computer and use it in GitHub Desktop.
Download ZIP
BairesDev Landing Pages v9 - Full Remotely Nav + Logo
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 Aug 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#6259E5',
'remotely-orange': '#F4804C',
'remotely-yellow': '#FFC24C',
'remotely-dark': '#2B2A41',
'remotely-black': '#14151F',
'remotely-light': '#F8FAFD',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #14151F; }
.gradient-hero { background: linear-gradient(180deg, #EDE9FE 0%, #FCE7F3 50%, #FFFFFF 100%); }
.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">
<a href="https://remotely.works" class="flex items-center gap-2">
<img src="data:image/jpeg;base64,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" alt="Remotely" class="w-8 h-8 rounded-full">
<span class="text-xl font-semibold">Remotely</span>
</a>
<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-black">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-lg 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-gray-50">Remotely for Startups</a>
<a href="https://remotely.works/hiring-markets" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Hiring Markets</a>
<a href="https://remotely.works/talent" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Talent</a>
<a href="https://remotely.works/retention" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Retention</a>
<a href="https://remotely.works/pricing" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Pricing</a>
<a href="https://remotely.works/customer-stories" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Customer Stories</a>
<a href="https://remotely.works/blog" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Blog</a>
</div>
</div>
<div class="dropdown relative">
<button class="flex items-center gap-1 text-gray-700 hover:text-black">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-lg 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-gray-50">Join as Developer</a>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<a href="https://platform.remotely.works/login" class="text-gray-700 hover:text-black hidden md:block">Login</a>
<a href="https://platform.remotely.works/startup/apply" class="bg-remotely-black text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-remotely-dark 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-white/80 text-remotely-black px-4 py-1.5 rounded-full text-sm font-medium mb-6 border border-gray-200">
From the Founders
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
The Staff Aug Industry<br>Is <span class="text-remotely-orange">Broken</span>.
</h1>
<p class="text-xl text-gray-600 mb-4 max-w-2xl mx-auto">
70% margins. Opaque pricing. Commoditized talent.
</p>
<p class="text-xl text-remotely-black mb-8 max-w-2xl mx-auto font-medium">
We built Remotely to fix that.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#founders" class="bg-remotely-black text-white px-8 py-4 rounded-full font-semibold hover:bg-remotely-dark transition">
Talk to Our Founders →
</a>
<a href="#model" class="border border-gray-300 px-8 py-4 rounded-full font-semibold hover:bg-gray-50 transition">
See How We're Different
</a>
</div>
</div>
</section>
<!-- Founder Credibility -->
<section class="py-16 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-6">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-3xl font-bold text-remotely-orange mb-1">$130M</div>
<div class="text-gray-500 text-sm">Previous Exit</div>
</div>
<div>
<div class="text-3xl font-bold text-remotely-black mb-1">2nd</div>
<div class="text-gray-500 text-sm">Time Founders</div>
</div>
<div>
<div class="text-3xl font-bold text-remotely-black mb-1">500+</div>
<div class="text-gray-500 text-sm">Companies Served</div>
</div>
<div>
<div class="text-3xl font-bold text-remotely-purple mb-1">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 bg-remotely-light">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Why the Traditional Model Fails</h2>
<div class="space-y-4">
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-remotely-orange/10 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="text-2xl">💸</span>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Misaligned Incentives</h3>
<p class="text-gray-600">Traditional agencies make more money when they pay developers less. That's why they attract mediocre talent and have 40%+ annual churn.</p>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-remotely-purple/10 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="text-2xl">🎭</span>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Opacity as a Feature</h3>
<p class="text-gray-600">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.</p>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="text-2xl">🔒</span>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">Vendor Lock-In</h3>
<p class="text-gray-600">Want to hire them directly? You'll pay 3-6 months salary as a "buyout fee." Our developers can transition to your payroll anytime. No fee.</p>
</div>
</div>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="flex items-start gap-4">
<div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center flex-shrink-0">
<span class="text-2xl">📉</span>
</div>
<div>
<h3 class="font-semibold text-lg mb-2">The "1% Talent" Lie</h3>
<p class="text-gray-600">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>
</section>
<!-- Our Model -->
<section class="py-20 bg-white">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">The Remotely Model</h2>
<p class="text-gray-500 text-center mb-12 max-w-2xl mx-auto">
Transparency isn't a feature. It's our entire business model.
</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-purple-50 rounded-2xl p-6 border border-remotely-purple/20">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 bg-remotely-purple rounded-full flex items-center justify-center text-white font-bold text-sm">1</div>
<h3 class="font-semibold">Transparent Pricing</h3>
</div>
<p class="text-gray-600 text-sm">$2,000/month flat fee per developer. No percentage cuts. No hidden margins. You see exactly what the developer earns. Save ~40% vs agencies.</p>
</div>
<div class="bg-purple-50 rounded-2xl p-6 border border-remotely-purple/20">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 bg-remotely-purple rounded-full flex items-center justify-center text-white font-bold text-sm">2</div>
<h3 class="font-semibold">Senior-Only Network</h3>
</div>
<p class="text-gray-600 text-sm">Only 33% of agency engineers pass our vetting. 5,800+ engineers with 10+ years average experience. Quality that matches the savings.</p>
</div>
<div class="bg-purple-50 rounded-2xl p-6 border border-remotely-purple/20">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 bg-remotely-purple rounded-full flex items-center justify-center text-white font-bold text-sm">3</div>
<h3 class="font-semibold">Ownership Culture</h3>
</div>
<p class="text-gray-600 text-sm">Developers can receive equity, bonuses, and raises directly from you. They think like owners because they are—2x higher retention.</p>
</div>
<div class="bg-purple-50 rounded-2xl p-6 border border-remotely-purple/20">
<div class="flex items-center gap-3 mb-4">
<div class="w-8 h-8 bg-remotely-purple rounded-full flex items-center justify-center text-white font-bold text-sm">4</div>
<h3 class="font-semibold">AI-First Engineers</h3>
</div>
<p class="text-gray-600 text-sm">Our developers are incentivized to use AI to ship faster. They're optimizing for outcomes, not padding hours.</p>
</div>
</div>
</div>
</section>
<!-- All Differentiators Summary -->
<section class="py-20 bg-remotely-light">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12">Everything You Get with Remotely</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm text-center">
<div class="text-4xl font-bold text-remotely-orange mb-2">~40%</div>
<h3 class="font-semibold mb-2">Cost Savings</h3>
<p class="text-gray-500 text-sm">Flat fee vs 70% margin. The math is simple—you keep more.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm text-center">
<div class="text-4xl font-bold text-remotely-purple mb-2">33%</div>
<h3 class="font-semibold mb-2">Pass Rate</h3>
<p class="text-gray-500 text-sm">Only the top third of agency talent makes it through our vetting.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm text-center">
<div class="text-4xl font-bold text-green-600 mb-2">2x</div>
<h3 class="font-semibold mb-2">Retention</h3>
<p class="text-gray-500 text-sm">When developers earn more and can get equity, they stay.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm text-center">
<div class="text-4xl font-bold text-remotely-black mb-2">$0</div>
<h3 class="font-semibold mb-2">Buyout Fees</h3>
<p class="text-gray-500 text-sm">Hire direct after 12 months. No fee. They're great—keep them.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm text-center">
<div class="text-4xl font-bold text-remotely-purple mb-2">48hr</div>
<h3 class="font-semibold mb-2">Matching</h3>
<p class="text-gray-500 text-sm">Curated candidates in 48 hours. Data-driven from 25M GitHub profiles.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm text-center">
<div class="text-4xl font-bold text-remotely-orange mb-2">🤖</div>
<h3 class="font-semibold mb-2">AI-Native</h3>
<p class="text-gray-500 text-sm">Engineers incentivized to use AI. Outcomes over hours.</p>
</div>
</div>
</div>
</section>
<!-- Social Proof -->
<section class="py-20 bg-white">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-2xl font-bold text-center mb-10">Trusted by Engineering Leaders</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<p class="text-gray-600 mb-4">"After 3 years with traditional agencies, switching to Remotely was eye-opening. Better engineers, better rates, and complete transparency."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-remotely-purple/20 flex items-center justify-center font-semibold text-remotely-purple">F</div>
<div>
<div class="font-medium">Fayez S.</div>
<div class="text-gray-500 text-sm">CEO, Bluecore</div>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<p class="text-gray-600 mb-4">"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 class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-remotely-purple/20 flex items-center justify-center font-semibold text-remotely-purple">M</div>
<div>
<div class="font-medium">Michael K.</div>
<div class="text-gray-500 text-sm">CTO, Fireblocks</div>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-2xl p-6 border border-gray-200">
<p class="text-gray-600 mb-4">"We did the math. Same caliber talent, 40% less cost. The flat fee model just makes more sense."</p>
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-remotely-purple/20 flex items-center justify-center font-semibold text-remotely-purple">S</div>
<div>
<div class="font-medium">Sarah R.</div>
<div class="text-gray-500 text-sm">VP Eng, Spring Health</div>
</div>
</div>
</div>
</div>
<div class="mt-10 text-center">
<p class="text-gray-500 mb-4 text-sm">Also trusted by</p>
<div class="flex flex-wrap justify-center items-center gap-6 text-gray-400 font-semibold">
<span>Pinterest</span>
<span>•</span>
<span>Gong</span>
<span>•</span>
<span>Caribou</span>
<span>•</span>
<span>EdSights</span>
<span>•</span>
<span>Amiara</span>
</div>
</div>
</div>
</section>
<!-- Founder Section -->
<section id="founders" class="py-20 bg-remotely-light">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-bold mb-4 text-center">Meet the Founders</h2>
<p class="text-gray-500 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="bg-white rounded-2xl p-6 text-center border border-gray-200 shadow-sm">
<div class="w-16 h-16 rounded-full bg-remotely-purple/20 mx-auto mb-4 flex items-center justify-center text-2xl">🧑‍💼</div>
<h3 class="font-semibold">Pau Sabria</h3>
<p class="text-remotely-purple text-sm mb-2">Co-Founder & CEO</p>
<p class="text-gray-500 text-xs">Previously founded Olapic (acq. for $130M)</p>
</div>
<div class="bg-white rounded-2xl p-6 text-center border border-gray-200 shadow-sm">
<div class="w-16 h-16 rounded-full bg-remotely-purple/20 mx-auto mb-4 flex items-center justify-center text-2xl">🧑‍💼</div>
<h3 class="font-semibold">Pau Suris</h3>
<p class="text-remotely-purple text-sm mb-2">Co-Founder</p>
<p class="text-gray-500 text-xs">Previously CRO at Olapic</p>
</div>
<div class="bg-white rounded-2xl p-6 text-center border border-gray-200 shadow-sm">
<div class="w-16 h-16 rounded-full bg-remotely-purple/20 mx-auto mb-4 flex items-center justify-center text-2xl">🧑‍💻</div>
<h3 class="font-semibold">Sebastian Alvarez</h3>
<p class="text-remotely-purple text-sm mb-2">Co-Founder & CTO</p>
<p class="text-gray-500 text-xs">Built engineering orgs at scale</p>
</div>
</div>
<div class="mt-12 text-center">
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="inline-block bg-remotely-black text-white px-8 py-4 rounded-full font-semibold hover:bg-remotely-dark 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>
</section>
<!-- CTA Section -->
<section class="bg-remotely-dark py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl font-bold text-white mb-4">Get a Free Vendor Assessment</h2>
<p class="text-gray-300 text-lg mb-8">We'll analyze your current staff aug setup and show you exactly where you're overpaying.</p>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="inline-block bg-white text-remotely-black px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Request Assessment →
</a>
<p class="text-gray-500 text-sm mt-4">Takes 5 minutes. Report delivered in 48 hours.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-remotely-black 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">
<img src="data:image/jpeg;base64,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" alt="Remotely" class="w-6 h-6 rounded-full">
<span class="text-gray-400 text-sm">©2025 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>
</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>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;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#6259E5',
'remotely-orange': '#F4804C',
'remotely-black': '#14151F',
'remotely-dark': '#2B2A41',
'remotely-light': '#F8FAFD',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #14151F; }
.gradient-hero { background: linear-gradient(180deg, #EDE9FE 0%, #FCE7F3 50%, #FFFFFF 100%); }
.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">
<img src="data:image/jpeg;base64,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" alt="Remotely" class="w-8 h-8 rounded-full">
<span class="text-xl font-semibold">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-black">
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-lg 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-gray-50">Remotely for Startups</a>
<a href="https://remotely.works/hiring-markets" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Hiring Markets</a>
<a href="https://remotely.works/talent" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Talent</a>
<a href="https://remotely.works/retention" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Retention</a>
<a href="https://remotely.works/pricing" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Pricing</a>
<a href="https://remotely.works/customer-stories" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Customer Stories</a>
<a href="https://remotely.works/blog" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Blog</a>
</div>
</div>
<div class="dropdown relative">
<button class="flex items-center gap-1 text-gray-700 hover:text-black">
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-lg 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-gray-50">Join as Developer</a>
<a href="https://remotely.works/developer-resources" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">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-black hidden md:block">Login</a>
<a href="https://platform.remotely.works/startup/apply" class="bg-remotely-black text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-remotely-dark 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-orange/10 text-remotely-orange px-4 py-1.5 rounded-full text-sm font-medium mb-6 border border-remotely-orange/20">
⚠️ For BairesDev Customers Only
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Are You Paying <span class="text-remotely-orange">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-black">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="bg-remotely-black text-white px-8 py-4 rounded-full font-semibold hover:bg-remotely-dark transition">
Calculate Your Hidden Costs →
</a>
<a href="#invoice" class="border border-gray-300 px-8 py-4 rounded-full font-semibold hover:bg-gray-50 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-bold 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-gray-50 rounded-2xl p-8 border border-gray-200">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-semibold text-gray-500">BairesDev Model</h3>
<span class="bg-red-100 text-red-600 text-xs px-3 py-1 rounded-full">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-bold">$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-bold 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-bold 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-bold text-red-500">~$22/hr</span>
</div>
</div>
</div>
<!-- Remotely -->
<div class="bg-purple-50 rounded-2xl p-8 border border-remotely-purple/20">
<div class="flex items-center justify-between mb-6">
<h3 class="text-xl font-semibold text-remotely-purple">Remotely Model</h3>
<span class="bg-remotely-purple/10 text-remotely-purple text-xs px-3 py-1 rounded-full">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-bold">$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-bold 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-bold 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-bold 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-bold text-center mb-4">
But Wait—Is the Talent Actually <span class="text-remotely-purple">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-2xl p-6 border border-gray-200 text-center shadow-sm">
<div class="text-4xl font-bold text-remotely-orange 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-2xl p-6 border border-gray-200 text-center shadow-sm">
<div class="text-4xl font-bold text-remotely-purple mb-2">10+ yrs</div>
<p class="text-gray-500 text-sm">Average experience in our 5,800+ engineer network</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 text-center shadow-sm">
<div class="text-4xl font-bold 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-2xl p-6 border border-remotely-purple/20 shadow-sm">
<p class="text-center text-lg">
<span class="text-remotely-purple font-semibold">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>
<!-- Calculator Section -->
<section id="calculator" class="py-20 bg-white">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">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-gray-50 rounded-2xl p-8 border border-gray-200">
<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-semibold 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-semibold focus:ring-2 focus:ring-remotely-purple focus:border-transparent outline-none">
</div>
</div>
<div class="bg-white rounded-xl 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-bold 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-bold 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-bold text-remotely-orange">$237,500</div>
</div>
</div>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="block w-full bg-remotely-black text-white text-center py-4 rounded-full font-semibold hover:bg-remotely-dark transition">
Get Your Personalized Analysis →
</a>
</div>
</div>
</section>
<!-- Cross-Pollination -->
<section class="py-20 bg-remotely-light">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-bold 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-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">🎯</div>
<h3 class="font-semibold 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-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">🤖</div>
<h3 class="font-semibold 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-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">📈</div>
<h3 class="font-semibold 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-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">✨</div>
<h3 class="font-semibold 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-dark py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl font-bold 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 bg-white text-remotely-black px-8 py-4 rounded-full font-semibold 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-black 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">
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wgARCABAAEADASIAAhEBAxEB/8QAGwAAAgMBAQEAAAAAAAAAAAAABAUCAwYBAAf/xAAYAQADAQEAAAAAAAAAAAAAAAABAgMABP/aAAwDAQACEAMQAAAB+ggOys8teleYxWOlJLCGM6P0NNKZuqOaKVOYU1OHYgvV9fSxEsXI9GaqPRH1bQ0wjM6jbzV46V9eTLVSy/aYVRlM41DPF8sDLz8wemfNdDoZyH6HksY3cYLdFWTfxzXxFtszXTcx9Jz0NfBJYqGwSooBotMughtZ6hqyVdTv/8QAIhAAAgICAgICAwAAAAAAAAAAAgMBBAAFERITIRQxIkFR/9oACAEBAAEFAuOLPuHFjGFj4mMQ+aySYWWaJycQaFfkSvWoiWK+4yx5CtMSbFSPtyc7vY4ipQ0NnHg+Vx5TvNLHUVENLxvLpYs9dFaV6DF7FNB1LqNS+gYi3XRPl4XlLFcKgbrC8tJOqvpjrvAcR4LuwtUn3LMJaOqNfVK6YQ0NQysMpE0NaF2/JqCOsZLQxHQdcIrb1HHzDqH8x1nVclEqHHXx/i66C8ypAUylKgipFcREB//EAB4RAAICAgIDAAAAAAAAAAAAAAECABEDIRASBCIx/9oACAEDAQE/AeyMa2Zi5lgOiOLLfgqGo/Jjc1uSuUAhx5De5iUfmTKPXUHSCx4Jj//xAAdEQACAgIDAQAAAAAAAAAAAAAAAQIRECEDEjFB/9oACAECAQE/AdYNJo9I+0dSgLLLaRXSB5PHw//EACgQAAICAQMDAwQDAAAAAAAAAAECAxEAEiExBBNBIlFhFDJxgUKRof/aAAgBAQAGPwL1FgF76E4/mT2bBJNgqGVGZmVo3UKxvb3xtmtpyE+3Hddb/oY0ZVEHHXcBW43/ALzodNHE7ueABtl8n7rE3mzklI8EFZLbbwM6gk9xmdL8xsF+TXthJQoxO4s88DKZiBL5AP8AWdNKzKRW4O4/1kdJHxS8+TxjOyQyBh99kXZ/F7Y6yoUPzuM0qxMr+l1O4I98EYQJKeBIedXg+Msf7zpJ3G5V1/3Ko/bYiKI1lsLqavjA0ZKkgfb7c7cZHCRqMi61G9g/Odur0MDYvzj7kqB91f5xokHcU8g7HDH1UkqbHUBtmIFioPNnf5yG/Q7R/jixMGDT8iKd/Tc5EZCsldupf1KPGBkZu4u6uODmiQSheDJzqH4wAMCeeeTnqLD8DH0gEJxqP//EACQQAQACAgIBBAIDAAAAAAAAAAEAESExQVFhgZGh8HGxwdHh/9oACAEBAAE/IbhB4jkS7xKOIKWxMAuCGsNLiCUIQCfQ3Nzyo0Jkvc7hwVKv5LXkVRcY1DhWKCAdkA0lB1MWR10ygQwHiGLO+pWq5aFzrS1MRAEWHqt/mWpgYDHKPTiBsRAWkEIIZa6mtOIKlk2+kAOQhgm5M/T/ALOhfUZZR/7iAGKgdxCaRV+OPidEqzF+pX4qBBVXnqI1W3pK+ozH+T/Y4NMBUzqVzKGPqEKGAZ0ZaiCqNn7gl+Wb7LNvofBOiGY/1A1LFFBY+8EEVFlSivCHx/EHUGh5dX7Y7igJcdUECOWNdNJhAGULolp1D7RV3+RRvUNBZNdwhvfNNaJZBCHfH3UCLNh0P6iEKZoKMp8U0eJQq8qLqojxN//aAAwDAQACAAMAAAAQww88Qw8IwUUU8oc04os//8QAHREBAAICAgMAAAAAAAAAAAAAAQARECExQSBhkf/aAAgBAwEBPxDoCLKE1yyqQ4T0q+8RcOENnHEr7JmPPqDsX6g0fZ//xAAcEQEAAgMAAwAAAAAAAAAAAAABABEQITFBUWH/2gAIAQIBAT8QIBvP0hZWqF2cwLrK9Qa1cJZgKcVg/8QAIhABAAICAgICAwEAAAAAAAAAAQARITFBUWFxkaGxwfDR/9oACAEBAAE/EEJPKjGpdzWAKJSfYbPUKGJrfLU1XwQhLyoXCXcGEI1+SUsVTjFLVd0ytJrxFBcvmPOAIEADg3P4jZ1B+HLHKRhyLrghMZqHRb+IGXqoR4hB2qYSq2PXE2NxBWNw+5yt7RiNMR20y42wNAGZQXCPMKxOQqnY0HcXYSwE1BRUA1P+xNxhGCUq+4oKrgS0d1cIpdaZqPqJjuJ4EBqmJSXCuYIDTMlLCYFVMO2Gl+4l3oqGVQZLyKlLqbVUjUMmPMReoShVUQjGUxM+YGohxY1CCMqCuIOSXVTHtgDLlRAgiMHq4W1Y4NfyWLzaQLLbiVULQ01EwEoCITw6m8Bm2lW5fJxDFq+Ydyy4bXP9hpLTFX3NcqYQlRX+whYDNsI/pjNauI0k1/sz//Z" alt="Remotely" class="w-6 h-6 rounded-full">
<span class="text-gray-400 text-sm">©2025 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>
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>Only 33% of BairesDev Engineers Pass Our Vetting | 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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'remotely-purple': '#6259E5',
'remotely-orange': '#F4804C',
'remotely-yellow': '#FFC24C',
'remotely-dark': '#2B2A41',
'remotely-black': '#14151F',
'remotely-light': '#F8FAFD',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #14151F; }
.gradient-hero { background: linear-gradient(180deg, #EDE9FE 0%, #FCE7F3 50%, #FFFFFF 100%); }
.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">
<a href="https://remotely.works" class="flex items-center gap-2">
<img src="data:image/jpeg;base64,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" alt="Remotely" class="w-8 h-8 rounded-full">
<span class="text-xl font-semibold">Remotely</span>
</a>
<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-black">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-lg 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-gray-50">Remotely for Startups</a>
<a href="https://remotely.works/hiring-markets" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Hiring Markets</a>
<a href="https://remotely.works/talent" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Talent</a>
<a href="https://remotely.works/retention" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Retention</a>
<a href="https://remotely.works/pricing" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Pricing</a>
<a href="https://remotely.works/customer-stories" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Customer Stories</a>
<a href="https://remotely.works/blog" class="block px-4 py-2 text-gray-700 hover:bg-gray-50">Blog</a>
</div>
</div>
<div class="dropdown relative">
<button class="flex items-center gap-1 text-gray-700 hover:text-black">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-lg 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-gray-50">Join as Developer</a>
</div>
</div>
</div>
<div class="flex items-center gap-4">
<a href="https://platform.remotely.works/login" class="text-gray-700 hover:text-black hidden md:block">Login</a>
<a href="https://platform.remotely.works/startup/apply" class="bg-remotely-black text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-remotely-dark 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-purple/10 text-remotely-purple px-4 py-1.5 rounded-full text-sm font-medium mb-6 border border-remotely-purple/20">
The Data BairesDev Won't Show You
</div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Only <span class="text-remotely-purple">33%</span> of BairesDev<br>Engineers Pass Our Vetting.
</h1>
<p class="text-lg text-gray-600 mb-8 max-w-2xl mx-auto leading-relaxed">
We've interviewed over 1,000 BairesDev developers who applied to Remotely. Here's why the <strong class="text-remotely-black">best LATAM engineers</strong> don't work for traditional agencies.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#profiles" class="bg-remotely-black text-white px-8 py-4 rounded-full font-semibold hover:bg-remotely-dark transition">
Browse Developer Profiles →
</a>
<a href="#why" class="border border-gray-300 px-8 py-4 rounded-full font-semibold hover:bg-gray-50 transition">
Why Engineers Leave Agencies
</a>
</div>
</div>
</section>
<!-- Stats -->
<section class="py-16 bg-white border-b border-gray-100">
<div class="max-w-4xl mx-auto px-6">
<div class="grid grid-cols-3 gap-8 text-center">
<div>
<div class="text-4xl font-bold text-remotely-black mb-1">1,000+</div>
<div class="text-gray-500 text-sm">BairesDev devs interviewed</div>
</div>
<div>
<div class="text-4xl font-bold text-remotely-orange mb-1">33%</div>
<div class="text-gray-500 text-sm">Passed our vetting</div>
</div>
<div>
<div class="text-4xl font-bold text-remotely-purple mb-1">5,800+</div>
<div class="text-gray-500 text-sm">Engineers in our network</div>
</div>
</div>
</div>
</section>
<!-- Why Section -->
<section id="why" class="py-20 bg-remotely-light">
<div class="max-w-5xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4">
Why the Best Engineers Choose Remotely
</h2>
<p class="text-gray-500 text-center mb-12 max-w-2xl mx-auto">
Senior talent wants control over their career. Traditional agencies can't offer that.
</p>
<div class="grid md:grid-cols-2 gap-6">
<!-- BairesDev Column -->
<div class="bg-white rounded-2xl p-8 border border-gray-200 shadow-sm">
<div class="flex items-center gap-2 mb-6">
<span class="text-red-500 text-xl">✗</span>
<h3 class="text-xl font-semibold text-gray-500">Traditional Agency</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-red-500 mt-1">✗</span>
<div>
<strong>Agency controls salary</strong>
<span class="block text-sm text-gray-500">No negotiation power, capped earnings</span>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-1">✗</span>
<div>
<strong>Arm's length from client</strong>
<span class="block text-sm text-gray-500">Just a resource, not a team member</span>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-1">✗</span>
<div>
<strong>Project hopping</strong>
<span class="block text-sm text-gray-500">Moved around constantly, no ownership</span>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-red-500 mt-1">✗</span>
<div>
<strong>No equity possible</strong>
<span class="block text-sm text-gray-500">Can't participate in client's upside</span>
</div>
</li>
</ul>
</div>
<!-- Remotely Column -->
<div class="bg-purple-50 rounded-2xl p-8 border border-remotely-purple/20 relative">
<div class="absolute -top-3 right-4 bg-remotely-purple text-white text-xs px-3 py-1 rounded-full font-medium">
Why seniors choose us
</div>
<div class="flex items-center gap-2 mb-6">
<span class="text-remotely-purple text-xl">✓</span>
<h3 class="text-xl font-semibold text-remotely-purple">Remotely Engineers</h3>
</div>
<ul class="space-y-4">
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-1">✓</span>
<div>
<strong>Control their salary</strong>
<span class="block text-sm text-gray-500">Negotiate directly with you</span>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-1">✓</span>
<div>
<strong>Direct client relationships</strong>
<span class="block text-sm text-gray-500">Real team member, not a contractor</span>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-1">✓</span>
<div>
<strong>Long-term engagements</strong>
<span class="block text-sm text-gray-500">Career growth, not project hopping</span>
</div>
</li>
<li class="flex items-start gap-3">
<span class="text-remotely-purple mt-1">✓</span>
<div>
<strong>Equity eligible</strong>
<span class="block text-sm text-gray-500">True stakeholders in your success</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Developer Profiles -->
<section id="profiles" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">Meet Real Developers</h2>
<p class="text-gray-500 text-center mb-12">Full profiles with videos, GitHub contributions, and verified skills.</p>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-remotely-purple/50 transition shadow-sm">
<div class="h-32 bg-gradient-to-br from-remotely-purple/20 to-purple-100 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-white shadow flex items-center justify-center text-2xl">👨‍💻</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-semibold">Ricardo M.</h3>
<p class="text-remotely-purple text-sm">Senior Full Stack</p>
</div>
<span class="text-xs bg-gray-200 px-2 py-1 rounded">12 yrs</span>
</div>
<div class="flex flex-wrap gap-1 mb-3">
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">React</span>
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">Node.js</span>
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">AWS</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-500">🇦🇷 Argentina</span>
<span class="text-remotely-purple cursor-pointer font-medium">Watch Video →</span>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-remotely-purple/50 transition shadow-sm">
<div class="h-32 bg-gradient-to-br from-green-100 to-emerald-100 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-white shadow flex items-center justify-center text-2xl">👩‍💻</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-semibold">Maria L.</h3>
<p class="text-green-600 text-sm">Backend & Data</p>
</div>
<span class="text-xs bg-gray-200 px-2 py-1 rounded">9 yrs</span>
</div>
<div class="flex flex-wrap gap-1 mb-3">
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">Python</span>
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">Spark</span>
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">K8s</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-500">🇧🇷 Brazil</span>
<span class="text-green-600 cursor-pointer font-medium">Watch Video →</span>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-remotely-purple/50 transition shadow-sm">
<div class="h-32 bg-gradient-to-br from-remotely-orange/20 to-orange-100 flex items-center justify-center">
<div class="w-16 h-16 rounded-full bg-white shadow flex items-center justify-center text-2xl">👨‍💻</div>
</div>
<div class="p-5">
<div class="flex justify-between items-start mb-2">
<div>
<h3 class="font-semibold">Carlos P.</h3>
<p class="text-remotely-orange text-sm">Mobile & iOS Lead</p>
</div>
<span class="text-xs bg-gray-200 px-2 py-1 rounded">11 yrs</span>
</div>
<div class="flex flex-wrap gap-1 mb-3">
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">Swift</span>
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">Kotlin</span>
<span class="bg-gray-200 px-2 py-0.5 rounded text-xs">Flutter</span>
</div>
<div class="flex items-center justify-between text-sm">
<span class="text-gray-500">🇲🇽 Mexico</span>
<span class="text-remotely-orange cursor-pointer font-medium">Watch Video →</span>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-remotely-black text-white px-8 py-4 rounded-full font-semibold hover:bg-remotely-dark transition">
Browse All 5,800+ Developers →
</a>
</div>
</div>
</section>
<!-- Cross-Pollination: Cost Savings & Retention -->
<section class="py-20 bg-remotely-light">
<div class="max-w-4xl mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-4">The Retention Lever You're Missing</h2>
<p class="text-gray-500 text-center mb-12 max-w-2xl mx-auto">Great talent is just the start. Keeping them is what matters.</p>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">💰</div>
<h3 class="font-semibold text-lg mb-2">More Goes to the Developer</h3>
<p class="text-gray-600 text-sm">Traditional agencies take 70%. We take a flat $2K/mo. That means your developers earn 2x more—and they know it. Happy developers = stable teams.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">📉</div>
<h3 class="font-semibold text-lg mb-2">40% Lower Total Cost</h3>
<p class="text-gray-600 text-sm">Same quality (actually better—only 33% pass). ~40% less cost. The math works because we're not taking a percentage cut on every hour.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">🔄</div>
<h3 class="font-semibold text-lg mb-2">2x Higher Retention</h3>
<p class="text-gray-600 text-sm">When developers control their salary and can get equity, they stay. That's less onboarding, less knowledge loss, more velocity.</p>
</div>
<div class="bg-white rounded-2xl p-6 border border-gray-200 shadow-sm">
<div class="text-3xl mb-4">🤖</div>
<h3 class="font-semibold text-lg mb-2">AI-Native Engineers</h3>
<p class="text-gray-600 text-sm">Our developers are incentivized to use AI to ship faster. They're optimizing for outcomes, not padding hours.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-remotely-dark py-20">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl font-bold text-white mb-4">Ready for Real Senior Talent?</h2>
<p class="text-gray-300 text-lg mb-8">See real profiles before you commit. Talk to engineers, not salespeople.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://platform.remotely.works/startup/apply" class="bg-white text-remotely-black px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Browse Developer Profiles →
</a>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="border border-white/50 text-white px-8 py-4 rounded-full font-semibold hover:bg-white/10 transition">
Talk to an Engineer
</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-remotely-black 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">
<img src="data:image/jpeg;base64,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" alt="Remotely" class="w-6 h-6 rounded-full">
<span class="text-gray-400 text-sm">©2025 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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment