{% extends "base.html" %}
{% block content %}
<section class="relative overflow-hidden">
<div class="absolute inset-0 bg-grid mask-fade"></div>
<div class="max-w-7xl mx-auto px-6 py-16 md:py-24 grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 class="font-bebas text-5xl md:text-7xl leading-none">No<span class="text-white/70"> House</span><br><span class="text-white/90">Quite Like It</span></h1>
<p class="mt-6 text-white/80 max-w-prose">Web services, network setup, PC imaging, and general IT support for individuals and small businesses in the Greater Amarillo Area.</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="/contact" class="btn-primary">Questions? Contact Me</a>
<a href="/contact" class="btn-ghost">Get a quote</a>
</div>
<ul class="mt-6 flex flex-wrap gap-6 text-xs text-white/60">
<li class="dot">Web services</li>
<li class="dot">Network setup</li>
<li class="dot">PC imaging</li>
<li class="dot">BillFlow Billing Tool</li>
</ul>
</div>


<div class="space-y-4">
<div class="glass rounded-2xl p-2 shadow-2xl">
<img class="rounded-xl object-cover w-full h-64" src="{{ hero_imgs[0] }}" alt="Local area photo 1">
</div>
<div class="grid grid-cols-2 gap-4">
<div class="glass rounded-2xl p-2"><img class="rounded-xl object-cover w-full h-40" src="{{ hero_imgs[1] }}" alt="Local area photo 2"></div>
<div class="glass rounded-2xl p-2"><img class="rounded-xl object-cover w-full h-40" src="{{ hero_imgs[2] }}" alt="Local area photo 3"></div>
</div>
</div>
</div>
</section>


<section class="py-16 md:py-24">
<div class="max-w-7xl mx-auto px-6">
<h2 class="font-bebas text-4xl md:text-5xl">Services</h2>
<div class="mt-8 grid md:grid-cols-3 gap-6">
<article class="card">
<h3 class="card-title">Web Services</h3>
<p class="card-body">Websites and web apps for individuals and small businesses. Hosted and maintained for you.</p>
<ul class="card-list">
<li>New sites & redesigns</li>
<li>Hosting, SSL & backups</li>
<li>Domains & email setup</li>
</ul>
</article>
<article class="card">
<h3 class="card-title">Network Setup</h3>
<p class="card-body">Network setup and troubleshooting for homes and small offices. Covers routers, switches, Wi-Fi, and remote access.</p>
<ul class="card-list">
<li>Router & switch config</li>
<li>Wi-Fi coverage & optimization</li>
<li>Remote access & VPN</li>
</ul>
</article>
<article class="card">
<h3 class="card-title">PC Imaging & Setup</h3>
<p class="card-body">PC imaging, configuration, and deployment for new machines. Includes software setup, data migration, and backups.</p>
<ul class="card-list">
<li>OS imaging & deployment</li>
<li>Software installs & updates</li>
<li>Data migration & backups</li>
</ul>
</article>
</div>
</div>
</section>
{% endblock %}