|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Hire Me - Beck-Publishing | Available for the Right Project</title> |
|
|
<meta name="description" content="Hire Beck-Publishing for your next software project. Available for custom development, SaaS platforms, AI systems, and security architecture."> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="pt-20"> |
|
|
|
|
|
<section class="py-20 px-4 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<img src="https://huggingface.co/spaces/dbeck22/beckpublishing-secure-code-crafters/resolve/main/images/workspace-bright.png" |
|
|
alt="Workspace" |
|
|
class="w-64 h-64 mx-auto mb-8 object-contain"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Available for the Right Project</h1> |
|
|
<p class="text-xl text-gray-300">Let's build something extraordinary together</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-20 px-4"> |
|
|
<div class="max-w-2xl mx-auto"> |
|
|
<div class="bg-gray-800 rounded-2xl p-8"> |
|
|
<h2 class="text-2xl font-bold mb-6">Project Inquiry</h2> |
|
|
<form id="projectForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-300 mb-2">Your Name</label> |
|
|
<input type="text" id="name" name="name" required |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label> |
|
|
<input type="email" id="email" name="email" required |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="company" class="block text-sm font-medium text-gray-300 mb-2">Company (Optional)</label> |
|
|
<input type="text" id="company" name="company" |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="budget" class="block text-sm font-medium text-gray-300 mb-2">Project Budget Range</label> |
|
|
<select id="budget" name="budget" required |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"> |
|
|
<option value="">Select budget range</option> |
|
|
<option value="5k-10k">$5,000 - $10,000</option> |
|
|
<option value="10k-25k">$10,000 - $25,000</option> |
|
|
<option value="25k-50k">$25,000 - $50,000</option> |
|
|
<option value="50k-100k">$50,000 - $100,000</option> |
|
|
<option value="100k+">$100,000+</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="timeline" class="block text-sm font-medium text-gray-300 mb-2">Project Timeline</label> |
|
|
<select id="timeline" name="timeline" required |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"> |
|
|
<option value="">Select timeline</option> |
|
|
<option value="1-3 months">1-3 months</option> |
|
|
<option value="3-6 months">3-6 months</option> |
|
|
<option value="6-12 months">6-12 months</option> |
|
|
<option value="12+ months">12+ months</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="service" class="block text-sm font-medium text-gray-300 mb-2">Primary Service Needed</label> |
|
|
<select id="service" name="service" required |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-blue-500"> |
|
|
<option value="">Select service</option> |
|
|
<option value="custom-software">Custom Software Development</option> |
|
|
<option value="saas">SaaS Platform</option> |
|
|
<option value="ai">AI Application</option> |
|
|
<option value="security">Security Architecture</option> |
|
|
<option value="automation">Automation</option> |
|
|
<option value="publishing">Publishing Platform</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-300 mb-2">Project Details</label> |
|
|
<textarea id="message" name="message" rows="5" required |
|
|
class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500" |
|
|
placeholder="Describe your project, goals, and any specific requirements..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" |
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-300"> |
|
|
Submit Inquiry |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<h3 class="text-xl font-semibold mb-4">What to Expect</h3> |
|
|
<div class="grid md:grid-cols-3 gap-6 text-gray-300"> |
|
|
<div> |
|
|
<i data-feather="clock" class="h-8 w-8 text-blue-400 mb-2"></i> |
|
|
<p class="text-sm">Response within 24 hours</p> |
|
|
</div> |
|
|
<div> |
|
|
<i data-feather="shield" class="h-8 w-8 text-green-400 mb-2"></i> |
|
|
<p class="text-sm">NDA available upon request</p> |
|
|
</div> |
|
|
<div> |
|
|
<i data-feather="dollar-sign" class="h-8 w-8 text-purple-400 mb-2"></i> |
|
|
<p class="text-sm">Transparent pricing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 bg-gray-800"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold mb-12">Why Choose Beck-Publishing</h2> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="text-center"> |
|
|
<i data-feather="user-check" class="h-12 w-12 text-blue-400 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">One Point of Contact</h3> |
|
|
<p class="text-gray-300">Work directly with the builder, no middlemen or account managers.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<i data-feather="award" class="h-12 w-12 text-green-400 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Elite Quality</h3> |
|
|
<p class="text-gray-300">Enterprise-grade solutions without the enterprise overhead.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<i data-feather="lock" class="h-12 w-12 text-red-400 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Security First</h3> |
|
|
<p class="text-gray-300">Built-in security from day one, not an afterthought.</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<i data-feather="zap" class="h-12 w-12 text-yellow-400 mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Rapid Execution</h3> |
|
|
<p class="text-gray-300">Move from concept to production faster than traditional teams.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
