horus
1b56aed681
Features: - AI Agent Hiring API (/api/hire) - Agent Discovery (/api/agents.json) - Stripe Checkout Integration - Webhooks for payment notifications - Telegram + Email alerts - Mobile responsive design - SEO optimized - AI-to-AI commerce ready Built: March 2026
216 lines
11 KiB
HTML
216 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Careers - HostPioneers</title>
|
||
<style>
|
||
body { font-family: 'Inter', sans-serif; line-height: 1.8; background: #0f172a; color: #fff; margin: 0; }
|
||
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }
|
||
h1 { color: #4169e1; font-size: 2.5rem; margin-bottom: 1rem; }
|
||
h2 { color: #5bc0de; margin-top: 2rem; }
|
||
h3 { color: #fff; }
|
||
p, li { color: #94a3b8; }
|
||
a { color: #5bc0de; }
|
||
.back { display: inline-block; margin-bottom: 2rem; color: #5bc0de; text-decoration: none; }
|
||
.job { background: #1e293b; padding: 2rem; border-radius: 12px; margin: 1.5rem 0; border: 1px solid #334155; }
|
||
.job:hover { border-color: #4169e1; }
|
||
.tag { display: inline-block; background: #334155; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.85rem; margin-right: 0.5rem; }
|
||
.remote { background: #065f46; color: #10b981; }
|
||
.apply-btn { background: #4169e1; color: white; padding: 0.75rem 1.5rem; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 1rem; }
|
||
.apply-btn:hover { background: #5a82f0; }
|
||
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; }
|
||
.value { background: #1e293b; padding: 1.5rem; border-radius: 12px; text-align: center; }
|
||
.value-icon { font-size: 2.5rem; margin-bottom: 1rem; }
|
||
|
||
/* Floating Form Modal */
|
||
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; }
|
||
.modal-overlay.active { display: flex; align-items: center; justify-content: center; }
|
||
.modal { background: #1e293b; border-radius: 16px; padding: 2rem; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; border: 1px solid #334155; }
|
||
.modal h2 { margin-top: 0; }
|
||
.form-group { margin-bottom: 1rem; }
|
||
.form-group label { display: block; margin-bottom: 0.5rem; color: #94a3b8; }
|
||
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid #334155; background: #0f172a; color: #fff; font-size: 1rem; }
|
||
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #4169e1; }
|
||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
|
||
.file-input { background: #0f172a; padding: 0.75rem; border-radius: 8px; border: 1px dashed #334155; }
|
||
.submit-btn { width: 100%; background: #4169e1; color: white; padding: 1rem; border: none; border-radius: 8px; font-weight: bold; font-size: 1rem; cursor: pointer; margin-top: 1rem; }
|
||
.submit-btn:hover { background: #5a82f0; }
|
||
.close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #94a3b8; font-size: 1.5rem; cursor: pointer; }
|
||
.linkedin-btn { background: #0077b5; color: white; width: 100%; padding: 0.75rem; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; margin-bottom: 1rem; }
|
||
.or-divider { text-align: center; margin: 1rem 0; color: #64748b; }
|
||
@media(max-width:768px){.container{padding:1rem}.values{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.job{padding:1rem}}</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<a href="/" class="back">← Back to Home</a>
|
||
<h1>Join the AI Revolution</h1>
|
||
<p style="font-size: 1.2rem;">Help us build the future of autonomous business operations.</p>
|
||
|
||
<h2>Why Work at HostPioneers?</h2>
|
||
<div class="values">
|
||
<div class="value">
|
||
<div class="value-icon">🚀</div>
|
||
<h3>Cutting-Edge Tech</h3>
|
||
<p>Work with the latest in AI, automation, and infrastructure technology.</p>
|
||
</div>
|
||
<div class="value">
|
||
<div class="value-icon">🌍</div>
|
||
<h3>Remote-First</h3>
|
||
<p>Work from anywhere. We care about results, not seat time.</p>
|
||
</div>
|
||
<div class="value">
|
||
<div class="value-icon">📈</div>
|
||
<h3>Growth</h3>
|
||
<p>Be part of a fast-growing company shaping the AI industry.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Open Positions</h2>
|
||
|
||
<div class="job">
|
||
<h3>AI Engineer</h3>
|
||
<p>Build and optimize autonomous AI agents for enterprise clients.</p>
|
||
<div style="margin-top: 1rem;">
|
||
<span class="tag">Full-time</span>
|
||
<span class="tag remote">Remote</span>
|
||
<span class="tag">AI/ML</span>
|
||
</div>
|
||
<button class="apply-btn" onclick="openModal('AI Engineer')">Apply Now</button>
|
||
</div>
|
||
|
||
<div class="job">
|
||
<h3>Solutions Architect</h3>
|
||
<p>Design AI implementations for enterprise clients.</p>
|
||
<div style="margin-top: 1rem;">
|
||
<span class="tag">Full-time</span>
|
||
<span class="tag remote">Remote</span>
|
||
<span class="tag">Enterprise</span>
|
||
</div>
|
||
<button class="apply-btn" onclick="openModal('Solutions Architect')">Apply Now</button>
|
||
</div>
|
||
|
||
<div class="job">
|
||
<h3>Sales Development Representative</h3>
|
||
<p>Help businesses discover how AI can transform their operations.</p>
|
||
<div style="margin-top: 1rem;">
|
||
<span class="tag">Full-time</span>
|
||
<span class="tag remote">Remote</span>
|
||
<span class="tag">Sales</span>
|
||
</div>
|
||
<button class="apply-btn" onclick="openModal('Sales Development Representative')">Apply Now</button>
|
||
</div>
|
||
|
||
<div class="job">
|
||
<h3>DevOps Engineer</h3>
|
||
<p>Maintain and scale our AI infrastructure.</p>
|
||
<div style="margin-top: 1rem;">
|
||
<span class="tag">Full-time</span>
|
||
<span class="tag remote">Remote</span>
|
||
<span class="tag">Infrastructure</span>
|
||
</div>
|
||
<button class="apply-btn" onclick="openModal('DevOps Engineer')">Apply Now</button>
|
||
</div>
|
||
|
||
<h2>How to Apply</h2>
|
||
<p>Send your resume and a Brief introduction to <strong>careers@hostpioneers.com</strong></p>
|
||
<p>Include "Why HostPioneers?" in your subject line — tell us why you're excited about the future of AI and what makes you unique.</p>
|
||
|
||
<h2>Internship Program</h2>
|
||
<p>We occasionally offer internships for students and recent graduates in AI, software engineering, and business. Email careers@hostpioneers.com with "Internship" in the subject line to express interest.</p>
|
||
</div>
|
||
|
||
<!-- Application Modal -->
|
||
<div class="modal-overlay" id="modal">
|
||
<div class="modal">
|
||
<button class="close-btn" onclick="closeModal()">×</button>
|
||
<h2>Apply for <span id="position-title">Position</span></h2>
|
||
|
||
<button class="linkedin-btn" onclick="alert('LinkedIn integration coming soon!')">Apply with LinkedIn</button>
|
||
|
||
<div class="or-divider">— OR —</div>
|
||
|
||
<form id="application-form" onsubmit="submitForm(event)">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>First Name *</label>
|
||
<input type="text" name="firstname" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Last Name *</label>
|
||
<input type="text" name="lastname" required>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Email *</label>
|
||
<input type="email" name="email" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Phone</label>
|
||
<input type="tel" name="phone">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>LinkedIn Profile</label>
|
||
<input type="url" name="linkedin" placeholder="https://linkedin.com/in/yourprofile">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Position *</label>
|
||
<select name="position" id="position-select" required>
|
||
<option value="">Select position...</option>
|
||
<option value="AI Engineer">AI Engineer</option>
|
||
<option value="Solutions Architect">Solutions Architect</option>
|
||
<option value="Sales Development Representative">Sales Development Representative</option>
|
||
<option value="DevOps Engineer">DevOps Engineer</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Upload CV/Resume *</label>
|
||
<input type="file" name="cv" accept=".pdf,.doc,.docx" class="file-input" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Cover Letter</label>
|
||
<textarea name="coverletter" rows="4" placeholder="Tell us why you're excited about joining HostPioneers..."></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>Portfolio/GitHub (if applicable)</label>
|
||
<input type="url" name="portfolio" placeholder="https://github.com/yourusername">
|
||
</div>
|
||
|
||
<button type="submit" class="submit-btn">Submit Application</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function openModal(position) {
|
||
document.getElementById('modal').classList.add('active');
|
||
document.getElementById('position-title').textContent = position;
|
||
document.getElementById('position-select').value = position;
|
||
}
|
||
|
||
function closeModal() {
|
||
document.getElementById('modal').classList.remove('active');
|
||
}
|
||
|
||
function submitForm(e) {
|
||
e.preventDefault();
|
||
alert('Thank you for your application! We will review it and get back to you within 48 hours.');
|
||
closeModal();
|
||
document.getElementById('application-form').reset();
|
||
}
|
||
|
||
// Close modal on outside click
|
||
document.getElementById('modal').addEventListener('click', function(e) {
|
||
if (e.target === this) closeModal();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|