136 lines
7.8 KiB
HTML
136 lines
7.8 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}About — 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">Our Story</p>
|
|
<h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide">ABOUT US</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── MISSION ─────────────────────────────────────────────── -->
|
|
<section class="py-16 px-4">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="card-hover rounded-2xl p-8 md:p-10 border border-yellow-400/15"
|
|
style="background-color: #111111;">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-bullseye text-yellow-400 text-xl"></i>
|
|
</div>
|
|
<h2 class="font-oswald text-2xl md:text-3xl font-bold text-white">Mission Statement</h2>
|
|
</div>
|
|
<p class="text-gray-300 leading-relaxed text-lg mb-4">
|
|
We at Thor's Hammer Electrical strive to be the best in the field. We proudly serve
|
|
Levelland and the surrounding areas with dedication, integrity, and craftsmanship.
|
|
</p>
|
|
<p class="text-yellow-400 font-oswald text-lg font-medium tracking-wide">
|
|
"At Thor's Hammer Electrical, we put the power back in the panel!"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── HISTORY ─────────────────────────────────────────────── -->
|
|
<section class="py-8 px-4">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="card-hover rounded-2xl p-8 md:p-10 border border-white/8"
|
|
style="background-color: #111111;">
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-book-open text-yellow-400 text-xl"></i>
|
|
</div>
|
|
<h2 class="font-oswald text-2xl md:text-3xl font-bold text-white">Company History</h2>
|
|
</div>
|
|
<p class="text-gray-300 leading-relaxed mb-4">
|
|
Thor's Hammer Electrical LLC was founded in April 2023. We bring over <strong class="text-white">20 years of
|
|
electrical experience</strong> to every project, operating as a small company with big family values.
|
|
</p>
|
|
<p class="text-gray-300 leading-relaxed">
|
|
When you choose Thor's Hammer Electrical for your electrical needs,
|
|
you don't just get a contractor — you become part of the family.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── TEAM ─────────────────────────────────────────────────── -->
|
|
<section class="py-16 px-4" style="background-color: #0d0d0d;">
|
|
<div class="max-w-4xl mx-auto text-center">
|
|
<p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">The Crew</p>
|
|
<h2 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-12">Our Team</h2>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
|
|
<!-- Leonard -->
|
|
<div class="card-hover rounded-2xl p-8 border border-yellow-400/20"
|
|
style="background: linear-gradient(135deg, #141414, #111111);">
|
|
<div class="w-16 h-16 rounded-full bg-yellow-400/15 flex items-center justify-center mx-auto mb-5
|
|
ring-2 ring-yellow-400/30">
|
|
<i class="fa-solid fa-helmet-safety text-yellow-400 text-2xl"></i>
|
|
</div>
|
|
<h3 class="font-oswald text-xl font-bold text-white mb-1">Leonard Johnson</h3>
|
|
<p class="text-yellow-400 text-sm font-medium tracking-wide mb-3">Master Electrician</p>
|
|
<p class="text-gray-500 text-xs leading-relaxed">Company Owner & Operator<br/>20+ Years Experience</p>
|
|
</div>
|
|
|
|
<!-- Makayla -->
|
|
<div class="card-hover rounded-2xl p-8 border border-white/8"
|
|
style="background-color: #111111;">
|
|
<div class="w-16 h-16 rounded-full bg-yellow-400/10 flex items-center justify-center mx-auto mb-5
|
|
ring-2 ring-white/10">
|
|
<i class="fa-solid fa-screwdriver-wrench text-yellow-400/70 text-2xl"></i>
|
|
</div>
|
|
<h3 class="font-oswald text-xl font-bold text-white mb-1">Makayla Johnson</h3>
|
|
<p class="text-yellow-400/70 text-sm font-medium tracking-wide mb-3">Electrician's Apprentice</p>
|
|
<p class="text-gray-500 text-xs leading-relaxed">Team Member</p>
|
|
</div>
|
|
|
|
<!-- Robert -->
|
|
<div class="card-hover rounded-2xl p-8 border border-white/8"
|
|
style="background-color: #111111;">
|
|
<div class="w-16 h-16 rounded-full bg-yellow-400/10 flex items-center justify-center mx-auto mb-5
|
|
ring-2 ring-white/10">
|
|
<i class="fa-solid fa-screwdriver-wrench text-yellow-400/70 text-2xl"></i>
|
|
</div>
|
|
<h3 class="font-oswald text-xl font-bold text-white mb-1">Robert Johnson</h3>
|
|
<p class="text-yellow-400/70 text-sm font-medium tracking-wide mb-3">Electrician's Apprentice</p>
|
|
<p class="text-gray-500 text-xs leading-relaxed">Team Member</p>
|
|
</div>
|
|
|
|
<!-- Benjamin Mosley -->
|
|
<div class="card-hover rounded-2xl p-8 border border-white/8"
|
|
style="background-color: #111111;">
|
|
<div class="w-16 h-16 rounded-full bg-yellow-400/10 flex items-center justify-center mx-auto mb-5
|
|
ring-2 ring-white/10">
|
|
<i class="fa-solid fa-laptop-code text-yellow-400/70 text-2xl"></i>
|
|
</div>
|
|
<h3 class="font-oswald text-xl font-bold text-white mb-1">Benjamin Mosley</h3>
|
|
<p class="text-yellow-400/70 text-sm font-medium tracking-wide mb-3">IT & Web</p>
|
|
<p class="text-gray-500 text-xs leading-relaxed">
|
|
<a href="https://www.bennyshouse.net" target="_blank" rel="noopener noreferrer"
|
|
class="hover:text-yellow-400 transition-colors">Benny's House</a>
|
|
</p>
|
|
</div>
|
|
|
|
</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 Electrical Work Done?</h2>
|
|
<p class="text-gray-400 mb-8">Submit a work order and we'll be in touch.</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 %}
|