|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Services - Beck-Publishing | Custom Software Development & SaaS Solutions</title> |
|
|
<meta name="description" content="Professional software development services including custom software, SaaS platforms, AI applications, security architecture, and automation solutions."> |
|
|
<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/services-diagram.png" |
|
|
alt="Services Diagram" |
|
|
class="w-64 h-64 mx-auto mb-8 object-contain"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Expert Development Services</h1> |
|
|
<p class="text-xl text-gray-300">Professional solutions tailored to your unique business challenges</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section class="py-20 px-4" id="services"> |
|
|
<div class="max-w-6xl mx-auto"> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 hover-lift" id="custom-software"> |
|
|
<i data-feather="code" class="h-12 w-12 text-blue-400 mb-6"></i> |
|
|
<h2 class="text-2xl font-bold mb-4">Custom Software Development</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Tailored solutions built from the ground up to solve your specific business problems. |
|
|
</p> |
|
|
<ul class="text-gray-400 text-sm space-y-2"> |
|
|
<li>Web applications</li> |
|
|
<li>Desktop software</li> |
|
|
<li>Mobile apps</li> |
|
|
<li>Internal tools</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 hover-lift" id="saas"> |
|
|
<i data-feather="cloud" class="h-12 w-12 text-purple-400 mb-6"></i> |
|
|
<h2 class="text-2xl font-bold mb-4">SaaS & Web Platforms</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Scalable subscription-based applications that grow with your user base. |
|
|
</p> |
|
|
<ul class="text-gray-400 text-sm space-y-2"> |
|
|
<li>Multi-tenant architecture</li> |
|
|
<li>Subscription management</li> |
|
|
<li>API development</li> |
|
|
<li>Cloud deployment</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 hover-lift" id="ai"> |
|
|
<i data-feather="cpu" class="h-12 w-12 text-green-400 mb-6"></i> |
|
|
<h2 class="text-2xl font-bold mb-4">AI-Driven Applications</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Intelligent systems that leverage machine learning and automation. |
|
|
</p> |
|
|
<ul class="text-gray-400 text-sm space-y-2"> |
|
|
<li>Machine learning models</li> |
|
|
<li>Natural language processing</li> |
|
|
<li>Predictive analytics</li> |
|
|
<li>Automation workflows</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 hover-lift" id="security"> |
|
|
<i data-feather="shield" class="h-12 w-12 text-red-400 mb-6"></i> |
|
|
<h2 class="text-2xl font-bold mb-4">Infrastructure & Security Architecture</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Fortified systems built with security as a primary concern. |
|
|
</p> |
|
|
<ul class="text-gray-400 text-sm space-y-2"> |
|
|
<li>Secure infrastructure setup</li> |
|
|
<li>Data encryption</li> |
|
|
<li>Access controls</li> |
|
|
<li>Compliance auditing</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 hover-lift" id="automation"> |
|
|
<i data-feather="refresh-cw" class="h-12 w-12 text-yellow-400 mb-6"></i> |
|
|
<h2 class="text-2xl font-bold mb-4">Automation & Internal Tools</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Streamline operations with custom automation solutions. |
|
|
</p> |
|
|
<ul class="text-gray-400 text-sm space-y-2"> |
|
|
<li>Workflow automation</li> |
|
|
<li>Data processing</li> |
|
|
<li>Integration systems</li> |
|
|
<li>Custom dashboards</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 hover-lift"> |
|
|
<i data-feather="book" class="h-12 w-12 text-indigo-400 mb-6"></i> |
|
|
<h2 class="text-2xl font-bold mb-4">Publishing Platforms</h2> |
|
|
<p class="text-gray-300 mb-4"> |
|
|
Complete digital publishing solutions for content creators. |
|
|
</p> |
|
|
<ul class="text-gray-400 text-sm space-y-2"> |
|
|
<li>Content management</li> |
|
|
<li>E-book platforms</li> |
|
|
<li>Digital distribution</li> |
|
|
<li>Monetization systems</li> |
|
|
</ul> |
|
|
</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">How I Work</h2> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-white font-bold text-xl">1</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Discover</h3> |
|
|
<p class="text-gray-300 text-sm">Understand your requirements and goals</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-white font-bold text-xl">2</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Plan</h3> |
|
|
<p class="text-gray-300 text-sm">Architect the solution and timeline</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-green-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-white font-bold text-xl">3</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Build</h3> |
|
|
<p class="text-gray-300 text-sm">Develop with quality and precision</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="bg-red-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-white font-bold text-xl">4</span> |
|
|
</div> |
|
|
<h3 class="font-semibold mb-2">Deliver</h3> |
|
|
<p class="text-gray-300 text-sm">Deploy and support the solution</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 px-4 bg-gradient-to-r from-blue-900 to-purple-900"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Start Your Project Today</h2> |
|
|
<p class="text-xl text-blue-200 mb-10">Let's discuss how I can help solve your technical challenges.</p> |
|
|
<a href="/hire.html" class="bg-white text-blue-900 hover:bg-blue-50 font-bold py-4 px-12 rounded-full text-lg transition duration-300 transform hover:scale-105"> |
|
|
Get Started |
|
|
</a> |
|
|
</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> |
