111 lines
6.2 KiB
HTML
111 lines
6.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Services — Thor's Hammer Electrical LLC{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ── PAGE HEADER ─────────────────────────────────────────── -->
|
|
<section class="relative py-24 px-4 text-center overflow-hidden grid-bg">
|
|
<div class="absolute inset-0 pointer-events-none"
|
|
style="background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250,204,21,0.06) 0%, transparent 70%);"></div>
|
|
<div class="relative z-10">
|
|
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">What We Offer</p>
|
|
<h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide mb-4">OUR SERVICES</h1>
|
|
<p class="text-gray-400 max-w-xl mx-auto text-lg">
|
|
Thor's Hammer Electrical provides a diverse range of services for homes and businesses.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── MAIN SERVICES ───────────────────────────────────────── -->
|
|
<section class="py-16 px-4">
|
|
<div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
|
|
|
|
<!-- Residential -->
|
|
<div class="card-hover rounded-2xl p-8 md:p-10 border border-yellow-400/20"
|
|
style="background: linear-gradient(135deg, #141414, #111111);">
|
|
<div class="w-14 h-14 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-6
|
|
ring-1 ring-yellow-400/30">
|
|
<i class="fa-solid fa-house text-yellow-400 text-2xl"></i>
|
|
</div>
|
|
<h2 class="font-oswald text-2xl md:text-3xl font-bold text-white mb-4">Residential</h2>
|
|
<p class="text-gray-400 leading-relaxed mb-6">
|
|
Our residential services are the bread and butter of Thor's Hammer. We live to serve
|
|
our community members and make sure their homes are safe, functional, and up to code.
|
|
</p>
|
|
<ul class="space-y-2">
|
|
{% for item in ['Panel upgrades & repairs', 'Outlet & switch installation', 'Lighting installation', 'Wiring & rewiring', 'Ceiling fan installation', 'Christmas light installation', 'Security camera installation'] %}
|
|
<li class="flex items-center gap-3 text-gray-300 text-sm">
|
|
<span class="text-yellow-400 flex-shrink-0">✓</span> {{ item }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Commercial -->
|
|
<div class="card-hover rounded-2xl p-8 md:p-10 border border-white/8"
|
|
style="background-color: #111111;">
|
|
<div class="w-14 h-14 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-6
|
|
ring-1 ring-white/10">
|
|
<i class="fa-solid fa-building text-yellow-400 text-2xl"></i>
|
|
</div>
|
|
<h2 class="font-oswald text-2xl md:text-3xl font-bold text-white mb-4">Commercial</h2>
|
|
<p class="text-gray-400 leading-relaxed mb-6">
|
|
Part of serving your community is ensuring the needs of businesses are met. Having spent
|
|
multiple years servicing commercial properties, Thor's Hammer is your go-to commercial
|
|
electrical contractor.
|
|
</p>
|
|
<ul class="space-y-2">
|
|
{% for item in ['Commercial wiring', 'Electrical inspections', 'Lighting systems', 'Power distribution', 'Code compliance'] %}
|
|
<li class="flex items-center gap-3 text-gray-300 text-sm">
|
|
<span class="text-yellow-400 flex-shrink-0">✓</span> {{ item }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── COMPLETED JOBS ──────────────────────────────────────── -->
|
|
<section class="py-16 px-4" style="background-color: #0d0d0d;">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Our Work</p>
|
|
<h2 class="font-oswald text-3xl md:text-4xl font-bold text-white">Jobs We've Completed</h2>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{% set jobs = [
|
|
('fa-tree', 'Christmas Lights', 'Seasonal decorative lighting installation'),
|
|
('fa-network-wired', 'Network Cabling', 'Cat5, Cat6, and Cat6a Network Installation'),
|
|
('fa-camera', 'Security Cameras', 'Security camera system installation'),
|
|
('fa-lightbulb', 'Flood Lights', 'Outdoor flood light installation'),
|
|
] %}
|
|
{% for icon, title, desc in jobs %}
|
|
<div class="card-hover rounded-xl p-6 border border-white/8 text-center"
|
|
style="background-color: #111111;">
|
|
<i class="fa-solid {{ icon }} text-yellow-400 text-2xl mb-3 block"></i>
|
|
<h3 class="font-oswald font-semibold text-white text-sm tracking-wide mb-2">{{ title }}</h3>
|
|
<p class="text-gray-500 text-xs leading-relaxed">{{ desc }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="text-center mt-10 p-6 rounded-xl border border-dashed border-yellow-400/20">
|
|
<p class="text-gray-500 text-sm">📸 Project photos coming soon!</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── CTA ──────────────────────────────────────────────────── -->
|
|
<section class="py-16 px-4 text-center">
|
|
<h2 class="font-oswald text-3xl font-bold text-white mb-4">Need Any of These Services?</h2>
|
|
<p class="text-gray-400 mb-8">We serve Levelland, TX and surrounding areas. Submit a work order today.</p>
|
|
<a href="{{ url_for('work_order') }}"
|
|
class="inline-block px-10 py-4 bg-yellow-400 text-black font-oswald font-bold tracking-widest
|
|
text-base rounded-lg hover:bg-yellow-300 transition-all glow-yellow">
|
|
<i class="fa-solid fa-bolt mr-2"></i> SUBMIT WORK ORDER
|
|
</a>
|
|
</section>
|
|
|
|
{% endblock %}
|