140 lines
7.7 KiB
HTML
140 lines
7.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Services{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- Hero -->
|
|
<section class="relative py-28 overflow-hidden">
|
|
<div class="absolute inset-0 dot-grid opacity-30 pointer-events-none"></div>
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px] pointer-events-none"
|
|
style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
|
|
|
|
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="badge badge-primary mb-6">What We Do</div>
|
|
<h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
|
|
Our <span class="gradient-text">Services</span>
|
|
</h1>
|
|
<p class="text-lg max-w-2xl mx-auto" style="color: #8b8ca8;">
|
|
Comprehensive software solutions tailored to your business needs — from development to deployment.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Grid -->
|
|
<section class="py-20" style="background: #0a0a14;">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
{% set services = [
|
|
{
|
|
'icon': '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',
|
|
'title': 'Web Development',
|
|
'desc': 'Modern, responsive websites and web applications built with the latest technologies. From simple landing pages to complex enterprise platforms.',
|
|
'features': ['Custom web applications', 'E-commerce solutions', 'Progressive Web Apps (PWAs)'],
|
|
'accent': 'primary'
|
|
},
|
|
{
|
|
'icon': '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',
|
|
'title': 'API Development',
|
|
'desc': 'Robust, scalable APIs that power your applications and enable seamless integrations with third-party services.',
|
|
'features': ['RESTful API design', 'GraphQL implementations', 'Third-party integrations'],
|
|
'accent': 'accent'
|
|
},
|
|
{
|
|
'icon': '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',
|
|
'title': 'Cloud Solutions',
|
|
'desc': 'Leverage the power of cloud computing with our expertise in AWS, Azure, and Google Cloud Platform.',
|
|
'features': ['Cloud architecture design', 'Migration services', 'DevOps & CI/CD pipelines'],
|
|
'accent': 'accent'
|
|
},
|
|
{
|
|
'icon': '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',
|
|
'title': 'Technical Consulting',
|
|
'desc': 'Expert guidance on technology strategy, architecture decisions, and best practices for your development team.',
|
|
'features': ['Technology assessment', 'Code reviews & audits', 'Team training'],
|
|
'accent': 'primary'
|
|
},
|
|
] %}
|
|
|
|
{% for svc in services %}
|
|
<div class="card-hover p-8">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center mb-6 flex-shrink-0"
|
|
style="background: rgba({% if svc.accent == 'accent' %}34,211,238{% else %}124,58,237{% endif %},0.1); border: 1px solid rgba({% if svc.accent == 'accent' %}34,211,238{% else %}124,58,237{% endif %},0.25);">
|
|
<svg class="w-6 h-6 {% if svc.accent == 'accent' %}text-accent-400{% else %}text-primary-400{% endif %}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ svc.icon }}" />
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">{{ svc.title }}</h3>
|
|
<p class="text-sm leading-relaxed mb-6" style="color: #8b8ca8;">{{ svc.desc }}</p>
|
|
<ul class="space-y-2.5">
|
|
{% for item in svc.features %}
|
|
<li class="flex items-center gap-3 text-sm" style="color: #c4c2d4;">
|
|
<div class="w-1.5 h-1.5 rounded-full flex-shrink-0 {% if svc.accent == 'accent' %}bg-accent-400{% else %}bg-primary-400{% endif %}"></div>
|
|
{{ item }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process -->
|
|
<section class="py-24 relative">
|
|
<div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
|
|
<div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<div class="badge badge-primary mb-5">How We Work</div>
|
|
<h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
|
|
A process built for<br><span class="gradient-text">results</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 relative">
|
|
<!-- Connector line -->
|
|
<div class="hidden md:block absolute top-9 left-[12.5%] right-[12.5%] h-px"
|
|
style="background: linear-gradient(90deg, rgba(92,184,44,0.5), rgba(247,147,30,0.5));"></div>
|
|
|
|
{% set steps = [
|
|
('01', 'Discovery', 'Understanding your requirements, goals, and challenges.'),
|
|
('02', 'Planning', 'Designing the architecture and creating a detailed roadmap.'),
|
|
('03', 'Development', 'Building your solution with regular updates and feedback cycles.'),
|
|
('04', 'Delivery', 'Testing, deployment, and ongoing support.'),
|
|
] %}
|
|
{% for num, title, desc in steps %}
|
|
<div class="text-center relative">
|
|
<div class="w-[72px] h-[72px] mx-auto mb-5 rounded-xl flex items-center justify-center relative z-10"
|
|
style="background: #0f0f1a; border: 1px solid rgba(92,184,44,0.4); box-shadow: 0 0 20px rgba(92,184,44,0.12);">
|
|
<span class="text-xl font-extrabold gradient-text" style="font-family: 'Syne', sans-serif;">{{ num }}</span>
|
|
</div>
|
|
<h3 class="text-base font-bold mb-2" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">{{ title }}</h3>
|
|
<p class="text-sm" style="color: #8b8ca8;">{{ desc }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="py-20" style="background: #0a0a14;">
|
|
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="text-3xl font-bold mb-4" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
|
|
Ready to get <span class="gradient-text">started?</span>
|
|
</h2>
|
|
<p class="text-base mb-8" style="color: #8b8ca8;">
|
|
Whether you have a specific project in mind or need help defining your requirements, we're here to help.
|
|
</p>
|
|
<a href="{{ url_for('contact') }}" class="btn btn-primary px-10 py-3.5 text-base">
|
|
Request a Consultation
|
|
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|