219 lines
12 KiB
HTML
219 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Services{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<section class="bg-gradient-to-br from-primary-600 to-primary-800 text-white py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Our Services</h1>
|
|
<p class="text-xl text-primary-100 max-w-2xl mx-auto">
|
|
Comprehensive software solutions tailored to your business needs.
|
|
From development to deployment, we've got you covered.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Grid -->
|
|
<section class="py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Web Development -->
|
|
<div class="card hover:shadow-lg transition-shadow">
|
|
<div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-semibold text-gray-900 mb-3">Web Development</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Modern, responsive websites and web applications built with the latest technologies.
|
|
From simple landing pages to complex enterprise platforms.
|
|
</p>
|
|
<ul class="text-gray-600 space-y-2">
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Custom web applications
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
E-commerce solutions
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Progressive Web Apps (PWAs)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- API Development -->
|
|
<div class="card hover:shadow-lg transition-shadow">
|
|
<div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-semibold text-gray-900 mb-3">API Development</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Robust, scalable APIs that power your applications and enable seamless integrations
|
|
with third-party services.
|
|
</p>
|
|
<ul class="text-gray-600 space-y-2">
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
RESTful API design
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
GraphQL implementations
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Third-party integrations
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Cloud Solutions -->
|
|
<div class="card hover:shadow-lg transition-shadow">
|
|
<div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-semibold text-gray-900 mb-3">Cloud Solutions</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Leverage the power of cloud computing with our expertise in AWS, Azure, and
|
|
Google Cloud Platform.
|
|
</p>
|
|
<ul class="text-gray-600 space-y-2">
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Cloud architecture design
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Migration services
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
DevOps & CI/CD pipelines
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Consulting -->
|
|
<div class="card hover:shadow-lg transition-shadow">
|
|
<div class="w-14 h-14 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
|
|
<svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-semibold text-gray-900 mb-3">Technical Consulting</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Expert guidance on technology strategy, architecture decisions, and best practices
|
|
for your development team.
|
|
</p>
|
|
<ul class="text-gray-600 space-y-2">
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Technology assessment
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Code reviews & audits
|
|
</li>
|
|
<li class="flex items-center">
|
|
<svg class="w-5 h-5 text-primary-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Team training
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process Section -->
|
|
<section class="bg-gray-100 py-20">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Our Process</h2>
|
|
<p class="text-gray-600 max-w-2xl mx-auto">
|
|
A structured approach that ensures quality delivery and client satisfaction.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
|
1
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Discovery</h3>
|
|
<p class="text-gray-600">Understanding your requirements, goals, and challenges.</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
|
2
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Planning</h3>
|
|
<p class="text-gray-600">Designing the architecture and creating a detailed roadmap.</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
|
3
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Development</h3>
|
|
<p class="text-gray-600">Building your solution with regular updates and feedback cycles.</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-accent-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">
|
|
4
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-gray-900 mb-2">Delivery</h3>
|
|
<p class="text-gray-600">Testing, deployment, and ongoing support.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-20">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">Ready to Get Started?</h2>
|
|
<p class="text-gray-600 mb-8 max-w-2xl mx-auto">
|
|
Whether you have a specific project in mind or need help defining your requirements,
|
|
we're here to help. Let's discuss how we can work together.
|
|
</p>
|
|
<a href="{{ url_for('contact') }}" class="btn btn-accent px-8 py-3 text-lg">
|
|
Request a Consultation
|
|
</a>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|