Skip to content

Instantly share code, notes, and snippets.

@aseba

aseba/ceo-landing.html

Created February 5, 2026 08:39
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save aseba/e8bcbea4367e470ffa560a0fa02c6344 to your computer and use it in GitHub Desktop.
Download ZIP
BairesDev Alternative Landing Pages - Remotely Design (v4)
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>Remotely Works, the best BairesDev alternative | For Founders & CEOs</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', -apple-system, BlinkMacSystemFont, sans-serif; }
.gradient-hero { background: linear-gradient(180deg, #FCE7F3 0%, #EDE9FE 50%, #FFFFFF 100%); }
.tab-active { background: #1F2937; color: white; }
.tab-inactive { background: white; color: #6B7280; border: 1px solid #E5E7EB; }
.check { color: #8B5CF6; }
.cross { color: #EF4444; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .plus { transform: rotate(45deg); }
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Nav -->
<nav class="bg-white/80 backdrop-blur-sm 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">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="black"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-semibold">Remotely</span>
</a>
<a href="https://platform.remotely.works/startup/apply" class="border border-gray-300 px-5 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition">
Get Started
</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-20 pb-28">
<div class="max-w-3xl mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Remotely Works,<br>the best BairesDev alternative
</h1>
<p class="text-lg text-gray-700 mb-4 max-w-2xl mx-auto leading-relaxed">
Remotely Works helps growth-stage startups hire top-tier nearshore engineers through a <strong>transparent cost-plus model</strong> that gives you <strong>full control over salary, benefits, bonuses, and equity</strong>.
</p>
<p class="text-gray-600 mb-8">
No markups. No mystery rates. Just aligned, long-term engineers who think like owners.
</p>
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Hire Top Developers
</a>
</div>
</section>
<!-- Comparison Section -->
<section class="py-20 px-6">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Why teams choose Remotely over BairesDev
</h2>
<p class="text-gray-600">
BairesDev gives you talent. Remotely gives you talent + control + long-term alignment.
</p>
</div>
<!-- Tabs -->
<div class="flex flex-wrap justify-center gap-2 mb-10">
<button onclick="showTab('integration')" id="tab-integration" class="tab-active px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
👥 Team Integration
</button>
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
💰 Pricing Transparency
</button>
<button onclick="showTab('quality')" id="tab-quality" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
⚡ Speed & Quality
</button>
</div>
<!-- Tab Content: Integration (Default for CEO) -->
<div id="content-integration" class="tab-content">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Arm's length relationship</div>
<div class="text-gray-500 text-sm">Engineers work for agency, not you</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Buyout fees</div>
<div class="text-gray-500 text-sm">3-6 month salary to hire direct</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Project hopping</div>
<div class="text-gray-500 text-sm">Engineers moved between clients frequently</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Vendor lock-in</div>
<div class="text-gray-500 text-sm">Designed to keep you dependent</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Direct relationship</div>
<div class="text-gray-500 text-sm">Engineers in your Slack, standups, and team</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">No buyout fees</div>
<div class="text-gray-500 text-sm">Hire direct after 12 months, no charge</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Long-term engagements</div>
<div class="text-gray-500 text-sm">Engineers stay because they're treated like owners</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Freedom to transition</div>
<div class="text-gray-500 text-sm">Move to your payroll whenever ready</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Pricing -->
<div id="content-pricing" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Hidden markup (~70%)</div>
<div class="text-gray-500 text-sm">Developer gets $25/hr, you pay $75/hr</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">45-hour billing</div>
<div class="text-gray-500 text-sm">Billed 45 hrs/week instead of 40</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">No compensation control</div>
<div class="text-gray-500 text-sm">Platform dictates rates and structures</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Can't offer equity</div>
<div class="text-gray-500 text-sm">Agency model doesn't support it</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">100% transparent pricing</div>
<div class="text-gray-500 text-sm">See exactly what developers earn, no hidden fees</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">$2K/month platform fee (separate from salary)</div>
<div class="text-gray-500 text-sm">You pay developer salary + flat platform fee, no markup</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Full compensation control</div>
<div class="text-gray-500 text-sm">Set salaries, bonuses, and raises directly</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Grant equity</div>
<div class="text-gray-500 text-sm">Make engineers true stakeholders like employees</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Quality -->
<div id="content-quality" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">"Top 1%" marketing claim</div>
<div class="text-gray-500 text-sm">Only 33% of their devs pass our vetting</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Quantity over quality</div>
<div class="text-gray-500 text-sm">4,000+ bench with high variance</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Slow matching</div>
<div class="text-gray-500 text-sm">Manual process takes weeks</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">High churn</div>
<div class="text-gray-500 text-sm">40%+ annual turnover</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Rigorous vetting</div>
<div class="text-gray-500 text-sm">We've tested 1,000+ agency devs—most don't pass</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">5,800+ senior engineers</div>
<div class="text-gray-500 text-sm">10+ years average experience, startup-ready</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">48-hour matching</div>
<div class="text-gray-500 text-sm">Data-driven matching from 25M GitHub profiles</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Low turnover</div>
<div class="text-gray-500 text-sm">Engineers stay because they're invested</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Talk to our team
</a>
</div>
</div>
</section>
<!-- Logo Bar -->
<section class="py-12 border-t border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<h6 class="text-center text-gray-400 text-sm mb-8">Trusted by growth-stage tech companies</h6>
<div class="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-60">
<span class="text-gray-500 font-semibold text-lg">Preset</span>
<span class="text-gray-500 font-semibold text-lg">character.ai</span>
<span class="text-gray-500 font-semibold text-lg">Bluecore</span>
<span class="text-gray-500 font-semibold text-lg">Azra</span>
<span class="text-gray-500 font-semibold text-lg">Wonderschool</span>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Everything You Need to Know</h2>
<div class="space-y-4">
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">How are we different from BairesDev's model?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">BairesDev takes a 50-70% margin on every developer and bills 45 hours instead of 40. You pay $75/hr, the developer sees $25. With Remotely, you pay the developer's salary directly + a flat $2K/month platform fee. Complete transparency, ~40% cost savings.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">What makes us more cost-effective?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">No hidden markups, no percentage cuts, no 45-hour billing tricks. Our flat fee model means you save ~40% compared to traditional agencies while getting senior talent who are invested in your success.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">Can I really offer equity to engineers?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">Yes. Our platform supports equity grants just like in-house employees. We handle all legal documentation for LatAm ESOP structures. This creates true alignment—engineers think and act like owners because they are.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">What if I need someone urgently?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">We guarantee curated candidates within 48 hours. Our data-driven matching (analyzing 25M GitHub profiles) is much faster than traditional agencies' manual process.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">Do engineers work during US hours?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">Yes. LatAm time zones (EST-3 to EST-6) overlap perfectly with US working hours. No more waiting days for responses or async delays.</p>
</div>
</details>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-gray-900 text-white py-24">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's do this</h2>
<p class="text-gray-400 text-lg mb-2">
Get started building your engineering team with Remotely.
</p>
<p class="text-gray-400 mb-8">
Grab time for a quick demo, or simply send a note to
<a href="mailto:contact@remotely.works" class="text-white underline hover:no-underline">contact@remotely.works</a>
</p>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Book a demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-500 py-8 border-t border-gray-800">
<div class="max-w-6xl mx-auto px-6">
<hr class="border-gray-800 mb-8">
<div class="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">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M10 16L14 20L22 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-400 text-sm">©Copyright 2025. Remotely Works, Inc.</span>
</div>
<nav class="flex gap-6 text-sm">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">Cookie Policy</a>
<a href="#" class="hover:text-white transition">About Us</a>
</nav>
</div>
</div>
</footer>
<script>
function showTab(tab) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.getElementById('content-' + tab).classList.remove('hidden');
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
document.getElementById('tab-' + tab).classList.remove('tab-inactive');
document.getElementById('tab-' + tab).classList.add('tab-active');
}
</script>
</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>Remotely Works, the best BairesDev alternative | For Finance Leaders</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', -apple-system, BlinkMacSystemFont, sans-serif; }
.gradient-hero { background: linear-gradient(180deg, #FCE7F3 0%, #EDE9FE 50%, #FFFFFF 100%); }
.tab-active { background: #1F2937; color: white; }
.tab-inactive { background: white; color: #6B7280; border: 1px solid #E5E7EB; }
.check { color: #8B5CF6; }
.cross { color: #EF4444; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .plus { transform: rotate(45deg); }
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Nav -->
<nav class="bg-white/80 backdrop-blur-sm 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">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="black"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-semibold">Remotely</span>
</a>
<a href="https://platform.remotely.works/startup/apply" class="border border-gray-300 px-5 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition">
Get Started
</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-20 pb-28">
<div class="max-w-3xl mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Remotely Works,<br>the best BairesDev alternative
</h1>
<p class="text-lg text-gray-700 mb-4 max-w-2xl mx-auto leading-relaxed">
Remotely Works helps growth-stage startups hire top-tier nearshore engineers through a <strong>transparent cost-plus model</strong> that gives you <strong>full control over salary, benefits, bonuses, and equity</strong>.
</p>
<p class="text-gray-600 mb-8">
No markups. No mystery rates. Just aligned, long-term engineers who think like owners.
</p>
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Hire Top Developers
</a>
</div>
</section>
<!-- Comparison Section -->
<section class="py-20 px-6">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Why teams choose Remotely over BairesDev
</h2>
<p class="text-gray-600">
BairesDev gives you talent. Remotely gives you talent + control + long-term alignment.
</p>
</div>
<!-- Tabs -->
<div class="flex flex-wrap justify-center gap-2 mb-10">
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-active px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
💰 Pricing Transparency
</button>
<button onclick="showTab('integration')" id="tab-integration" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
👥 Team Integration
</button>
<button onclick="showTab('quality')" id="tab-quality" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
⚡ Speed & Quality
</button>
</div>
<!-- Tab Content: Pricing -->
<div id="content-pricing" class="tab-content">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Hidden markup (~70%)</div>
<div class="text-gray-500 text-sm">Developer gets $25/hr, you pay $75/hr</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">45-hour billing</div>
<div class="text-gray-500 text-sm">Billed 45 hrs/week instead of 40</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">No compensation control</div>
<div class="text-gray-500 text-sm">Platform dictates rates and structures</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Can't offer equity</div>
<div class="text-gray-500 text-sm">Agency model doesn't support it</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">100% transparent pricing</div>
<div class="text-gray-500 text-sm">See exactly what developers earn, no hidden fees</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">$2K/month platform fee (separate from salary)</div>
<div class="text-gray-500 text-sm">You pay developer salary + flat platform fee, no markup</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Full compensation control</div>
<div class="text-gray-500 text-sm">Set salaries, bonuses, and raises directly</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Grant equity</div>
<div class="text-gray-500 text-sm">Make engineers true stakeholders like employees</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Integration -->
<div id="content-integration" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Arm's length relationship</div>
<div class="text-gray-500 text-sm">Engineers work for agency, not you</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Buyout fees</div>
<div class="text-gray-500 text-sm">3-6 month salary to hire direct</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Project hopping</div>
<div class="text-gray-500 text-sm">Engineers moved between clients frequently</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Vendor lock-in</div>
<div class="text-gray-500 text-sm">Designed to keep you dependent</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Direct relationship</div>
<div class="text-gray-500 text-sm">Engineers in your Slack, standups, and team</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">No buyout fees</div>
<div class="text-gray-500 text-sm">Hire direct after 12 months, no charge</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Long-term engagements</div>
<div class="text-gray-500 text-sm">Engineers stay because they're treated like owners</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Freedom to transition</div>
<div class="text-gray-500 text-sm">Move to your payroll whenever ready</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Quality -->
<div id="content-quality" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">"Top 1%" marketing claim</div>
<div class="text-gray-500 text-sm">Only 33% of their devs pass our vetting</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Quantity over quality</div>
<div class="text-gray-500 text-sm">4,000+ bench with high variance</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Slow matching</div>
<div class="text-gray-500 text-sm">Manual process takes weeks</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">High churn</div>
<div class="text-gray-500 text-sm">40%+ annual turnover</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Rigorous vetting</div>
<div class="text-gray-500 text-sm">We've tested 1,000+ agency devs—most don't pass</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">5,800+ senior engineers</div>
<div class="text-gray-500 text-sm">10+ years average experience, startup-ready</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">48-hour matching</div>
<div class="text-gray-500 text-sm">Data-driven matching from 25M GitHub profiles</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Low turnover</div>
<div class="text-gray-500 text-sm">Engineers stay because they're invested</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Talk to our team
</a>
</div>
</div>
</section>
<!-- Logo Bar -->
<section class="py-12 border-t border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<h6 class="text-center text-gray-400 text-sm mb-8">Trusted by growth-stage tech companies</h6>
<div class="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-60">
<span class="text-gray-500 font-semibold text-lg">Preset</span>
<span class="text-gray-500 font-semibold text-lg">character.ai</span>
<span class="text-gray-500 font-semibold text-lg">Bluecore</span>
<span class="text-gray-500 font-semibold text-lg">Azra</span>
<span class="text-gray-500 font-semibold text-lg">Wonderschool</span>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Everything You Need to Know</h2>
<div class="space-y-4">
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">How are we different from BairesDev's model?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">BairesDev takes a 50-70% margin on every developer and bills 45 hours instead of 40. You pay $75/hr, the developer sees $25. With Remotely, you pay the developer's salary directly + a flat $2K/month platform fee. Complete transparency, ~40% cost savings.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">What makes us more cost-effective?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">No hidden markups, no percentage cuts, no 45-hour billing tricks. Our flat fee model means you save ~40% compared to traditional agencies while getting senior talent who are invested in your success.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">Can I really offer equity to engineers?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">Yes. Our platform supports equity grants just like in-house employees. We handle all legal documentation for LatAm ESOP structures. This creates true alignment—engineers think and act like owners because they are.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">What if I need someone urgently?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">We guarantee curated candidates within 48 hours. Our data-driven matching (analyzing 25M GitHub profiles) is much faster than traditional agencies' manual process.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">Do engineers work during US hours?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">Yes. LatAm time zones (EST-3 to EST-6) overlap perfectly with US working hours. No more waiting days for responses or async delays.</p>
</div>
</details>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-gray-900 text-white py-24">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's do this</h2>
<p class="text-gray-400 text-lg mb-2">
Get started building your engineering team with Remotely.
</p>
<p class="text-gray-400 mb-8">
Grab time for a quick demo, or simply send a note to
<a href="mailto:contact@remotely.works" class="text-white underline hover:no-underline">contact@remotely.works</a>
</p>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Book a demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-500 py-8 border-t border-gray-800">
<div class="max-w-6xl mx-auto px-6">
<hr class="border-gray-800 mb-8">
<div class="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">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M10 16L14 20L22 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-400 text-sm">©Copyright 2025. Remotely Works, Inc.</span>
</div>
<nav class="flex gap-6 text-sm">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">Cookie Policy</a>
<a href="#" class="hover:text-white transition">About Us</a>
</nav>
</div>
</div>
</footer>
<script>
function showTab(tab) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.getElementById('content-' + tab).classList.remove('hidden');
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
document.getElementById('tab-' + tab).classList.remove('tab-inactive');
document.getElementById('tab-' + tab).classList.add('tab-active');
}
</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>Remotely Works, the best BairesDev alternative | For Engineering Leaders</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', -apple-system, BlinkMacSystemFont, sans-serif; }
.gradient-hero { background: linear-gradient(180deg, #FCE7F3 0%, #EDE9FE 50%, #FFFFFF 100%); }
.tab-active { background: #1F2937; color: white; }
.tab-inactive { background: white; color: #6B7280; border: 1px solid #E5E7EB; }
.check { color: #8B5CF6; }
.cross { color: #EF4444; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .plus { transform: rotate(45deg); }
</style>
</head>
<body class="bg-white text-gray-900">
<!-- Nav -->
<nav class="bg-white/80 backdrop-blur-sm 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">
<svg class="w-8 h-8" viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="16" fill="black"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-xl font-semibold">Remotely</span>
</a>
<a href="https://platform.remotely.works/startup/apply" class="border border-gray-300 px-5 py-2 rounded-full text-sm font-medium hover:bg-gray-50 transition">
Get Started
</a>
</div>
</nav>
<!-- Hero -->
<section class="gradient-hero pt-20 pb-28">
<div class="max-w-3xl mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
Remotely Works,<br>the best BairesDev alternative
</h1>
<p class="text-lg text-gray-700 mb-4 max-w-2xl mx-auto leading-relaxed">
Remotely Works helps growth-stage startups hire top-tier nearshore engineers through a <strong>transparent cost-plus model</strong> that gives you <strong>full control over salary, benefits, bonuses, and equity</strong>.
</p>
<p class="text-gray-600 mb-8">
No markups. No mystery rates. Just aligned, long-term engineers who think like owners.
</p>
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Hire Top Developers
</a>
</div>
</section>
<!-- Comparison Section -->
<section class="py-20 px-6">
<div class="max-w-5xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">
Why teams choose Remotely over BairesDev
</h2>
<p class="text-gray-600">
BairesDev gives you talent. Remotely gives you talent + control + long-term alignment.
</p>
</div>
<!-- Tabs -->
<div class="flex flex-wrap justify-center gap-2 mb-10">
<button onclick="showTab('quality')" id="tab-quality" class="tab-active px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
⚡ Speed & Quality
</button>
<button onclick="showTab('integration')" id="tab-integration" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
👥 Team Integration
</button>
<button onclick="showTab('pricing')" id="tab-pricing" class="tab-inactive px-5 py-2.5 rounded-full text-sm font-medium transition cursor-pointer">
💰 Pricing Transparency
</button>
</div>
<!-- Tab Content: Quality (Default for CTO) -->
<div id="content-quality" class="tab-content">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">"Top 1%" marketing claim</div>
<div class="text-gray-500 text-sm">Only 33% of their devs pass our vetting</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Quantity over quality</div>
<div class="text-gray-500 text-sm">4,000+ bench with high variance</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Slow matching</div>
<div class="text-gray-500 text-sm">Manual process takes weeks</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">High churn</div>
<div class="text-gray-500 text-sm">40%+ annual turnover</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Rigorous vetting</div>
<div class="text-gray-500 text-sm">We've tested 1,000+ agency devs—most don't pass</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">5,800+ senior engineers</div>
<div class="text-gray-500 text-sm">10+ years average experience, startup-ready</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">48-hour matching</div>
<div class="text-gray-500 text-sm">Data-driven matching from 25M GitHub profiles</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Low turnover</div>
<div class="text-gray-500 text-sm">Engineers stay because they're invested</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Integration -->
<div id="content-integration" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Arm's length relationship</div>
<div class="text-gray-500 text-sm">Engineers work for agency, not you</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Buyout fees</div>
<div class="text-gray-500 text-sm">3-6 month salary to hire direct</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Project hopping</div>
<div class="text-gray-500 text-sm">Engineers moved between clients frequently</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Vendor lock-in</div>
<div class="text-gray-500 text-sm">Designed to keep you dependent</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Direct relationship</div>
<div class="text-gray-500 text-sm">Engineers in your Slack, standups, and team</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">No buyout fees</div>
<div class="text-gray-500 text-sm">Hire direct after 12 months, no charge</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Long-term engagements</div>
<div class="text-gray-500 text-sm">Engineers stay because they're treated like owners</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Freedom to transition</div>
<div class="text-gray-500 text-sm">Move to your payroll whenever ready</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tab Content: Pricing -->
<div id="content-pricing" class="tab-content hidden">
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-gray-50 rounded-2xl p-8">
<h3 class="text-gray-500 font-semibold mb-6">BairesDev</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Hidden markup (~70%)</div>
<div class="text-gray-500 text-sm">Developer gets $25/hr, you pay $75/hr</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">45-hour billing</div>
<div class="text-gray-500 text-sm">Billed 45 hrs/week instead of 40</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">No compensation control</div>
<div class="text-gray-500 text-sm">Platform dictates rates and structures</div>
</div>
</div>
<div class="flex gap-3">
<span class="cross text-lg">✗</span>
<div>
<div class="font-semibold">Can't offer equity</div>
<div class="text-gray-500 text-sm">Agency model doesn't support it</div>
</div>
</div>
</div>
</div>
<div class="bg-violet-50 rounded-2xl p-8 relative">
<div class="absolute -top-3 right-6 bg-violet-600 text-white text-xs px-3 py-1 rounded-full font-medium">
Built for startups.
</div>
<h3 class="text-violet-600 font-semibold mb-6">Remotely Works</h3>
<div class="space-y-5">
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">100% transparent pricing</div>
<div class="text-gray-500 text-sm">See exactly what developers earn, no hidden fees</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">$2K/month platform fee (separate from salary)</div>
<div class="text-gray-500 text-sm">You pay developer salary + flat platform fee, no markup</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Full compensation control</div>
<div class="text-gray-500 text-sm">Set salaries, bonuses, and raises directly</div>
</div>
</div>
<div class="flex gap-3">
<span class="check text-lg">✓</span>
<div>
<div class="font-semibold">Grant equity</div>
<div class="text-gray-500 text-sm">Make engineers true stakeholders like employees</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<a href="https://platform.remotely.works/startup/apply" class="inline-block bg-gray-900 text-white px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition">
Talk to our team
</a>
</div>
</div>
</section>
<!-- Logo Bar -->
<section class="py-12 border-t border-gray-100">
<div class="max-w-6xl mx-auto px-6">
<h6 class="text-center text-gray-400 text-sm mb-8">Trusted by growth-stage tech companies</h6>
<div class="flex flex-wrap justify-center items-center gap-10 md:gap-16 opacity-60">
<span class="text-gray-500 font-semibold text-lg">Preset</span>
<span class="text-gray-500 font-semibold text-lg">character.ai</span>
<span class="text-gray-500 font-semibold text-lg">Bluecore</span>
<span class="text-gray-500 font-semibold text-lg">Azra</span>
<span class="text-gray-500 font-semibold text-lg">Wonderschool</span>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 bg-gray-50">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Everything You Need to Know</h2>
<div class="space-y-4">
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">How are we different from BairesDev's model?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">BairesDev takes a 50-70% margin on every developer and bills 45 hours instead of 40. You pay $75/hr, the developer sees $25. With Remotely, you pay the developer's salary directly + a flat $2K/month platform fee. Complete transparency, ~40% cost savings.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">What makes us more cost-effective?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">No hidden markups, no percentage cuts, no 45-hour billing tricks. Our flat fee model means you save ~40% compared to traditional agencies while getting senior talent who are invested in your success.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">Can I really offer equity to engineers?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">Yes. Our platform supports equity grants just like in-house employees. We handle all legal documentation for LatAm ESOP structures. This creates true alignment—engineers think and act like owners because they are.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">What if I need someone urgently?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">We guarantee curated candidates within 48 hours. Our data-driven matching (analyzing 25M GitHub profiles) is much faster than traditional agencies' manual process.</p>
</div>
</details>
<details class="bg-white rounded-xl shadow-sm group">
<summary class="flex justify-between items-center p-6 cursor-pointer">
<h4 class="font-semibold pr-4">Do engineers work during US hours?</h4>
<span class="plus text-2xl text-gray-400 transition-transform">+</span>
</summary>
<div class="px-6 pb-6">
<p class="text-gray-600">Yes. LatAm time zones (EST-3 to EST-6) overlap perfectly with US working hours. No more waiting days for responses or async delays.</p>
</div>
</details>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="bg-gray-900 text-white py-24">
<div class="max-w-3xl mx-auto px-6 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-6">Let's do this</h2>
<p class="text-gray-400 text-lg mb-2">
Get started building your engineering team with Remotely.
</p>
<p class="text-gray-400 mb-8">
Grab time for a quick demo, or simply send a note to
<a href="mailto:contact@remotely.works" class="text-white underline hover:no-underline">contact@remotely.works</a>
</p>
<a href="https://meetings.hubspot.com/jose-de-cabo/website-form" class="inline-block bg-white text-gray-900 px-8 py-4 rounded-full font-semibold hover:bg-gray-100 transition">
Book a demo
</a>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-500 py-8 border-t border-gray-800">
<div class="max-w-6xl mx-auto px-6">
<hr class="border-gray-800 mb-8">
<div class="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">
<circle cx="16" cy="16" r="16" fill="white"/>
<path d="M10 16L14 20L22 12" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span class="text-gray-400 text-sm">©Copyright 2025. Remotely Works, Inc.</span>
</div>
<nav class="flex gap-6 text-sm">
<a href="#" class="hover:text-white transition">Privacy</a>
<a href="#" class="hover:text-white transition">Terms</a>
<a href="#" class="hover:text-white transition">Cookie Policy</a>
<a href="#" class="hover:text-white transition">About Us</a>
</nav>
</div>
</div>
</footer>
<script>
function showTab(tab) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
document.getElementById('content-' + tab).classList.remove('hidden');
document.querySelectorAll('[id^="tab-"]').forEach(el => {
el.classList.remove('tab-active');
el.classList.add('tab-inactive');
});
document.getElementById('tab-' + tab).classList.remove('tab-inactive');
document.getElementById('tab-' + tab).classList.add('tab-active');
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment