benny/ThorsHammerNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial Commit

Browse Source
This commit is contained in:
Ben Mosley
2026-04-25 12:03:54 -05:00
commit 5d86aa000c
30 changed files with 2771 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
templates/services.html Normal file
View File

@@ -0,0 +1,110 @@
{% 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 %}