tknuth
/
buddelectric
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement initial site structure with Header, Footer, Electrical Services, and Photo Gallery pages.

This commit is contained in:
Timo Knuth 2026-02-04 20:11:44 +01:00
parent 9022b9bf23
commit 8b5ea1010c
4 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/electrical-services/page.tsx
View File

@ -27,7 +27,7 @@ export default function Services() {
<section className="py-24">
<div className="mx-auto max-w-7xl px-6 lg:px-8 space-y-24">
{/* RESIDENTIAL */}
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div id="residential" className="grid lg:grid-cols-2 gap-16 items-center">
<div className="order-2 lg:order-1">
<div className="w-14 h-14 bg-red-50 text-[color:var(--brand)] rounded flex items-center justify-center mb-6">
<Home size={32} />
@ -57,7 +57,7 @@ export default function Services() {
</div>
{/* COMMERCIAL */}
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div id="commercial" className="grid lg:grid-cols-2 gap-16 items-center">
<div className="rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
<Image
src="/images/commercial.png"
@ -87,7 +87,7 @@ export default function Services() {
</div>
{/* GENERATORS */}
<div className="grid lg:grid-cols-2 gap-16 items-center">
<div id="generator" className="grid lg:grid-cols-2 gap-16 items-center">
<div className="order-2 lg:order-1">
<div className="w-14 h-14 bg-red-50 text-[color:var(--brand)] rounded flex items-center justify-center mb-6">
<Zap size={32} />

3
src/app/photo-gallery/page.tsx
View File

@ -44,9 +44,6 @@ export default function Gallery() {
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
className="object-cover transition duration-700 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
<span className="text-white border border-white px-4 py-2 uppercase tracking-widest font-bold text-sm hover:bg-white hover:text-black transition">View Project</span>
</div>
</div>
))}
</div>

7
src/components/Footer.tsx
View File

@ -98,10 +98,9 @@ export default function Footer() {
<div>
<h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Services</h4>
<ul className="space-y-4 text-sm text-gray-400">
<li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">Residential</Link></li>
<li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">Commercial</Link></li>
<li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">New Construction</Link></li>
<li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">Generator Installation</Link></li>
<li><Link href="/electrical-services#residential" className="hover:text-[color:var(--brand)] transition-colors">Residential</Link></li>
<li><Link href="/electrical-services#commercial" className="hover:text-[color:var(--brand)] transition-colors">Commercial</Link></li>
<li><Link href="/electrical-services#generator" className="hover:text-[color:var(--brand)] transition-colors">Generator Installation</Link></li>
</ul>
</div>

8
src/components/Header.tsx
View File

@ -13,17 +13,17 @@ export default function Header() {
<header className="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-[color:var(--bg-dark)]/95 backdrop-blur-md">
<div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6 lg:px-8">
<Link href="/" className="flex items-center gap-3 group">
<div className="relative h-10 w-10 transition-transform group-hover:scale-105">
<div className="relative h-24 w-24 transition-transform group-hover:scale-105 self-end -mb-4">
<Image
src="/images/logo.png"
alt="Budd Electric Logo"
width={40}
height={40}
width={96}
height={96}
priority
className="object-contain invert hue-rotate-180 saturate-[1000%] contrast-[1.5] brightness-90"
/>
</div>
<div className="flex flex-col">
<div className="flex flex-col self-center">
<span className="font-display text-xl font-bold tracking-tight uppercase leading-none text-white">Budd Electric</span>
<span className="text-[10px] font-medium tracking-wider text-gray-400 uppercase">Since 1969 • TECL #17007</span>
</div>