214 lines
12 KiB
HTML
214 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Thor's Hammer Electrical LLC — Levelland, TX{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ── HERO ────────────────────────────────────────────────── -->
|
|
<section class="relative min-h-screen flex items-center justify-center overflow-hidden grid-bg">
|
|
|
|
<!-- Radial glow behind content -->
|
|
<div class="absolute inset-0 pointer-events-none"
|
|
style="background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(250,204,21,0.07) 0%, transparent 70%);"></div>
|
|
|
|
<!-- Bottom fade -->
|
|
<div class="absolute bottom-0 left-0 right-0 h-32"
|
|
style="background: linear-gradient(to bottom, transparent, #080808);"></div>
|
|
|
|
<div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
|
<!-- Lightning bolt icon -->
|
|
<div class="mb-6 flex justify-center">
|
|
<i class="fa-solid fa-bolt text-yellow-400"
|
|
style="font-size: 5rem; filter: drop-shadow(0 0 24px rgba(250,204,21,0.75));"></i>
|
|
</div>
|
|
|
|
<h1 class="font-oswald font-bold tracking-widest text-white mb-2"
|
|
style="font-size: clamp(2.5rem, 8vw, 6rem); line-height: 1.05;">
|
|
THOR'S HAMMER
|
|
</h1>
|
|
<h2 class="font-oswald font-light tracking-[0.25em] mb-6 text-gradient"
|
|
style="font-size: clamp(1.2rem, 4vw, 2.5rem);">
|
|
ELECTRICAL LLC
|
|
</h2>
|
|
|
|
<p class="text-gray-400 text-lg md:text-xl mb-4 max-w-2xl mx-auto leading-relaxed">
|
|
Levelland, Texas's Go-To Electrical Contractor
|
|
</p>
|
|
<p class="text-gray-500 text-sm md:text-base mb-10 max-w-xl mx-auto">
|
|
Residential & Commercial · Licensed & Insured · 20+ Years Experience
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<a href="{{ url_for('work_order') }}"
|
|
class="px-8 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>
|
|
<a href="{{ url_for('services') }}"
|
|
class="px-8 py-4 border-2 border-yellow-400/60 text-yellow-400 font-oswald font-bold tracking-widest text-base rounded-lg
|
|
hover:bg-yellow-400 hover:text-black hover:border-yellow-400 transition-all">
|
|
VIEW SERVICES
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll indicator -->
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-yellow-400/40">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── STATS BAR ───────────────────────────────────────────── -->
|
|
<section style="background-color: #111111; border-top: 1px solid rgba(250,204,21,0.12); border-bottom: 1px solid rgba(250,204,21,0.12);">
|
|
<div class="max-w-5xl mx-auto px-4 py-8">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
|
|
<div class="group">
|
|
<p class="font-oswald text-4xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">20+</p>
|
|
<p class="text-gray-400 text-sm tracking-widest uppercase mt-1">Years of Experience</p>
|
|
</div>
|
|
<div class="group border-t sm:border-t-0 sm:border-x border-white/10 pt-6 sm:pt-0">
|
|
<p class="font-oswald text-4xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">100%</p>
|
|
<p class="text-gray-400 text-sm tracking-widest uppercase mt-1">Licensed & Insured</p>
|
|
</div>
|
|
<div class="group border-t sm:border-t-0 pt-6 sm:pt-0">
|
|
<p class="font-oswald text-4xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">Local</p>
|
|
<p class="text-gray-400 text-sm tracking-widest uppercase mt-1">Levelland, Texas</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── LICENSE ─────────────────────────────────────────────── -->
|
|
<section class="py-20 px-4">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-4">Certified & Trusted</p>
|
|
<h2 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-8">Our License</h2>
|
|
<div class="inline-block rounded-xl overflow-hidden ring-2 ring-yellow-400/30 hover:ring-yellow-400/60 transition-all glow-yellow-sm">
|
|
<img src="{{ url_for('static', filename='images/License.jpg') }}"
|
|
alt="Electrical License" class="max-w-full h-auto max-h-96 object-contain">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── ABOUT SNIPPET ───────────────────────────────────────── -->
|
|
<section class="py-20 px-4" style="background-color: #0d0d0d;">
|
|
<div class="max-w-5xl mx-auto">
|
|
<div class="grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Who We Are</p>
|
|
<h2 class="font-oswald text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
|
|
Powering Levelland<br/>
|
|
<span class="text-gradient">Since 2023</span>
|
|
</h2>
|
|
<p class="text-gray-400 leading-relaxed mb-4">
|
|
Thor's Hammer Electrical LLC is a locally owned and operated electrical services company
|
|
based in Levelland, Texas. Owned by Master Electrician Leonard Johnson, we bring
|
|
over 20 years of hands-on experience to every job.
|
|
</p>
|
|
<p class="text-gray-400 leading-relaxed mb-8">
|
|
We put the power back in the panel — and we treat every customer like family.
|
|
</p>
|
|
<a href="{{ url_for('about') }}"
|
|
class="inline-flex items-center gap-2 px-6 py-3 border border-yellow-400/50 text-yellow-400
|
|
font-oswald font-bold tracking-wider text-sm rounded-lg hover:bg-yellow-400 hover:text-black transition-all">
|
|
LEARN MORE
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Feature tiles -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
{% set features = [
|
|
('fa-bolt', 'Residential', 'Home wiring, panels, lighting & more'),
|
|
('fa-industry', 'Commercial', 'Business & industrial electrical work'),
|
|
('fa-shield-halved', 'Licensed', 'Fully licensed Master Electrician'),
|
|
('fa-handshake', 'Family Values', 'You become part of our family'),
|
|
] %}
|
|
{% for icon, title, desc in features %}
|
|
<div class="card-hover rounded-xl p-5 border border-white/8"
|
|
style="background-color: #161616;">
|
|
<i class="fa-solid {{ icon }} text-yellow-400 text-xl mb-3 block"></i>
|
|
<h3 class="font-oswald font-semibold text-white text-sm tracking-wide mb-1">{{ title }}</h3>
|
|
<p class="text-gray-500 text-xs leading-relaxed">{{ desc }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── SERVICES PREVIEW ────────────────────────────────────── -->
|
|
<section class="py-20 px-4">
|
|
<div class="max-w-5xl mx-auto text-center">
|
|
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">What We Do</p>
|
|
<h2 class="font-oswald text-4xl md:text-5xl font-bold text-white mb-4">Our Services</h2>
|
|
<p class="text-gray-400 mb-12 max-w-xl mx-auto">
|
|
From residential homes to commercial businesses, Thor's Hammer has you covered.
|
|
</p>
|
|
|
|
<div class="grid md:grid-cols-2 gap-6 mb-10">
|
|
<div class="card-hover rounded-2xl p-8 border border-white/8 text-left"
|
|
style="background-color: #111111;">
|
|
<div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-5">
|
|
<i class="fa-solid fa-house text-yellow-400 text-2xl"></i>
|
|
</div>
|
|
<h3 class="font-oswald text-xl font-bold text-white mb-3">Residential</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
Our residential services are the bread and butter of Thor's Hammer. We live to serve
|
|
our community members and ensure every home is safe and powered.
|
|
</p>
|
|
</div>
|
|
<div class="card-hover rounded-2xl p-8 border border-white/8 text-left"
|
|
style="background-color: #111111;">
|
|
<div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-5">
|
|
<i class="fa-solid fa-building text-yellow-400 text-2xl"></i>
|
|
</div>
|
|
<h3 class="font-oswald text-xl font-bold text-white mb-3">Commercial</h3>
|
|
<p class="text-gray-400 text-sm leading-relaxed">
|
|
Having spent years servicing commercial properties, Thor's Hammer is your go-to
|
|
commercial electrical contractor for businesses of all sizes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{{ url_for('services') }}"
|
|
class="inline-flex items-center gap-2 px-8 py-3 border-2 border-yellow-400/60 text-yellow-400
|
|
font-oswald font-bold tracking-wider text-sm rounded-lg hover:bg-yellow-400 hover:text-black transition-all">
|
|
SEE ALL SERVICES
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── CALL TO ACTION ──────────────────────────────────────── -->
|
|
<section class="py-20 px-4" style="background-color: #0d0d0d;">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<div class="rounded-2xl p-10 md:p-14 border border-yellow-400/20 relative overflow-hidden"
|
|
style="background: linear-gradient(135deg, #111111, #0f0f0f);">
|
|
<div class="absolute inset-0 pointer-events-none"
|
|
style="background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(250,204,21,0.05) 0%, transparent 70%);"></div>
|
|
<div class="relative z-10">
|
|
<i class="fa-solid fa-bolt text-yellow-400 text-5xl mb-6 block"></i>
|
|
<h2 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-4">
|
|
Ready to Get Started?
|
|
</h2>
|
|
<p class="text-gray-400 mb-8 text-lg">
|
|
Submit your work order today and we'll get back to you promptly.
|
|
</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">
|
|
SUBMIT WORK ORDER
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% endblock %}
|