File size: 10,060 Bytes
950bce1 2750d05 950bce1 2750d05 950bce1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<!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">
<!-- Hero Section -->
<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>
<!-- Contact Form -->
<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>
<!-- Additional Info -->
<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>
<!-- Why Work With Me -->
<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> |