{% extends "base.html" %}
{% block content %}
<section class="py-16 md:py-24">
<div class="max-w-6xl mx-auto px-6">
<header class="max-w-3xl">
<h1 class="font-bebas text-5xl">Services</h1>
<p class="mt-4 text-white/80">Web services, network setup, PC imaging, and IT support for individuals and small businesses in the Greater Amarillo Area. Available on-site or remote.</p>
</header>


<div class="mt-10 grid md:grid-cols-2 gap-6">
<article class="card">
<h3 class="card-title">Web Services</h3>
<p class="card-body">Website design, hosting, and maintenance for individuals and small businesses.</p>
<ul class="card-list">
<li>New sites & redesigns</li>
<li>Hosting, SSL & automatic backups</li>
<li>Domain & email setup</li>
</ul>
</article>


<article class="card">
<h3 class="card-title">Network Setup & Troubleshooting</h3>
<p class="card-body">Network setup and troubleshooting for homes and small offices.</p>
<ul class="card-list">
<li>Router & switch configuration</li>
<li>Wi-Fi coverage & performance</li>
<li>Remote access & VPN</li>
</ul>
</article>


<article class="card">
<h3 class="card-title">PC Imaging & Deployment</h3>
<p class="card-body">PC imaging and configuration for new machines. Includes software setup, data migration, and backups.</p>
<ul class="card-list">
<li>OS imaging & deployment</li>
<li>Software installs & Windows setup</li>
<li>Data migration & backups</li>
</ul>
</article>


<article class="card">
<h3 class="card-title">BillFlow</h3>
<p class="card-body">A billing and invoicing tool for small businesses. Send invoices, track payments, and manage what you’re owed.</p>
<ul class="card-list">
<li>Easy invoice creation & sending</li>
<li>Payment tracking</li>
<li>Built for small business owners</li>
</ul>
</article>


<article class="card md:col-span-2">
<h3 class="card-title">Have a question?</h3>
<p class="card-body">Book a free 30-minute call or send a message and I’ll get back to you.</p>
<div class="mt-4">
<a href="{{ contact.cal }}" class="btn-primary" target="_blank" rel="noopener">Book a free consult</a>
<a href="/contact" class="btn-ghost ml-2">Send a message</a>
</div>
</article>
</div>
</div>
</section>
{% endblock %}
