{% 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">Local‑first infrastructure, modern web hosting, and pragmatic creative. We refurbish and recycle hardware to cut costs, then deploy reliable systems you actually own.</p>
<div class="mt-8 flex flex-wrap gap-3">
<a href="{{ contact.cal }}" class="btn-primary">Book a 30‑min call</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">On‑site infrastructure</li>
<li class="dot">Flask/Node hosting</li>
<li class="dot">SSL + backups</li>
<li class="dot">Refurb discount option</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">Local IT Infrastructure</h3>
<p class="card-body">Proxmox clusters, VLANs, DNS, VPN, backups—made for small businesses that need reliability without red tape.</p>
<ul class="card-list">
<li>Windows Server/AD & Linux</li>
<li>Secure file servers (Samba/NFS)</li>
<li>Monitoring & on-call</li>
</ul>
</article>
<article class="card">
<h3 class="card-title">Web & App Hosting</h3>
<p class="card-body">Flask, Node, or static. SSL, backups, staging, and wildcard subdomains for rapid prototyping & launch.</p>
<ul class="card-list">
<li>Stripe + domain upsells</li>
<li>Fast Tailwind front‑ends</li>
<li>Observability baked in</li>
</ul>
</article>
<article class="card">
<h3 class="card-title">Refurb & Recycle Discount</h3>
<p class="card-body">Lower your quote by letting us refurbish quality used hardware into dependable local servers.</p>
<ul class="card-list">
<li>Cost‑effective nodes</li>
<li>Warranty & burn‑in tests</li>
<li>Green + budget‑friendly</li>
</ul>
</article>
</div>
</div>
</section>
{% endblock %}
