Spaces:

mikeschlottig
/

timbertitan-services

Running

App Files Files Community

timbertitan-services / index.html

mikeschlottig

Built out the Services, Projects and Contact Page. Ensure that the links in the footer work and are properly routed.

2917b05 verified 7 months ago

Raw

History Blame Contribute Delete

39 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>TimberTitan Services \| Professional Tree Removal</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>

	<!-- Tailwind Configuration for Custom Colors -->
	<script>
	tailwind.config = {
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	primary: {
	50: '#ecfdf5',
	100: '#d1fae5',
	500: '#10b981', // Emerald 500
	600: '#059669', // Emerald 600
	700: '#047857', // Emerald 700
	800: '#065f46',
	900: '#064e3b',
	},
	secondary: {
	50: '#fffbeb',
	100: '#fef3c7',
	500: '#f59e0b', // Amber 500
	600: '#d97706', // Amber 600
	700: '#b45309', // Amber 700
	800: '#92400e',
	900: '#78350f',
	}
	},
	fontFamily: {
	sans: ['Inter', 'sans-serif'],
	}
	}
	}
	}
	</script>

	<style>
	/* Custom CSS for specific animations and transitions */
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

	body {
	font-family: 'Inter', sans-serif;
	scroll-behavior: smooth;
	}

	.page-section {
	display: none;
	animation: fadeIn 0.5s ease-in-out;
	}

	.page-section.active {
	display: block;
	}

	@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
	}

	.hero-bg {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://static.photos/nature/1200x630/42');
	background-size: cover;
	background-position: center;
	}

	/* Web Component Style Encapsulation overrides if needed */
	:root {
	--primary-color: #059669;
	--secondary-color: #d97706;
	}

	.nav-link.active {
	color: var(--primary-color);
	font-weight: 700;
	border-bottom: 2px solid var(--primary-color);
	}

	/* Loading Spinner */
	.spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border-left-color: var(--primary-color);
	animation: spin 1s linear infinite;
	}
	@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
	</style>
	</head>
	<body class="bg-slate-50 text-slate-800 flex flex-col min-h-screen">

	<!-- Header / Navigation Component -->
	<custom-header></custom-header>

	<!-- Main Content Area -->
	<main class="flex-grow">

	<!-- HOME PAGE -->
	<section id="home" class="page-section active">
	<!-- Hero Section -->
	<div class="hero-bg h-[600px] flex items-center justify-center text-center px-4">
	<div class="max-w-3xl text-white">
	<span class="bg-secondary-600 text-white px-4 py-1 rounded-full text-sm font-bold tracking-wider uppercase mb-4 inline-block">Fully Insured & Licensed</span>
	<h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">Safe & Professional Tree Removal</h1>
	<p class="text-xl md:text-2xl mb-8 text-gray-200">Expert care for your property. Precision cutting, stump grinding, and 24/7 emergency storm services.</p>
	<div class="flex flex-col sm:flex-row gap-4 justify-center">
	<a href="javascript:void(0)" onclick="window.router.navigate('contact')" class="bg-secondary-600 hover:bg-secondary-700 text-white font-bold py-4 px-8 rounded-lg shadow-lg transition transform hover:-translate-y-1 cursor-pointer">
	Get Free Estimate
	</a>
	<a href="javascript:void(0)" onclick="window.router.navigate('services')" class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white font-bold py-4 px-8 rounded-lg border border-white/30 transition cursor-pointer">
	Our Services
	</a>
	</div>
	</div>
	</div>

	<!-- Trust Indicators -->
	<div class="bg-white py-12 border-b border-gray-200">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
	<div class="flex flex-col items-center">
	<i data-feather="shield" class="w-10 h-10 text-primary-600 mb-3"></i>
	<h3 class="font-bold text-lg">Fully Insured</h3>
	<p class="text-sm text-gray-500">Up to $5M coverage</p>
	</div>
	<div class="flex flex-col items-center">
	<i data-feather="clock" class="w-10 h-10 text-primary-600 mb-3"></i>
	<h3 class="font-bold text-lg">24/7 Emergency</h3>
	<p class="text-sm text-gray-500">Storm damage response</p>
	</div>
	<div class="flex flex-col items-center">
	<i data-feather="award" class="w-10 h-10 text-primary-600 mb-3"></i>
	<h3 class="font-bold text-lg">Certified Arborists</h3>
	<p class="text-sm text-gray-500">TCIA Accredited</p>
	</div>
	<div class="flex flex-col items-center">
	<i data-feather="dollar-sign" class="w-10 h-10 text-primary-600 mb-3"></i>
	<h3 class="font-bold text-lg">Fair Pricing</h3>
	<p class="text-sm text-gray-500">Free on-site quotes</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Featured Services Preview -->
	<div class="py-20 container mx-auto px-4">
	<div class="text-center mb-16">
	<h2 class="text-primary-800 font-bold uppercase tracking-widest mb-2">What We Do</h2>
	<h3 class="text-4xl font-bold text-gray-900">Comprehensive Tree Care</h3>
	</div>
	<div class="grid md:grid-cols-3 gap-8">
	<!-- Service Card 1 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 group">
	<div class="h-48 overflow-hidden">
	<img src="http://static.photos/nature/640x360/1" alt="Tree Removal" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
	</div>
	<div class="p-8">
	<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center text-primary-600 mb-4">
	<i data-feather="log-out"></i>
	</div>
	<h4 class="text-xl font-bold mb-2">Tree Removal</h4>
	<p class="text-gray-600 mb-4">Safe, strategic removal of dangerous or unwanted trees with minimal impact on your landscape.</p>
	<a href="javascript:void(0)" onclick="window.router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center cursor-pointer">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
	</div>
	</div>
	<!-- Service Card 2 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 group">
	<div class="h-48 overflow-hidden">
	<img src="http://static.photos/nature/640x360/2" alt="Stump Grinding" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
	</div>
	<div class="p-8">
	<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center text-primary-600 mb-4">
	<i data-feather="disc"></i>
	</div>
	<h4 class="text-xl font-bold mb-2">Stump Grinding</h4>
	<p class="text-gray-600 mb-4">Professional grinding equipment to remove unsightly stumps and prevent regrowth or pest issues.</p>
	<a href="javascript:void(0)" onclick="window.router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center cursor-pointer">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
	</div>
	</div>
	<!-- Service Card 3 -->
	<div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition duration-300 group">
	<div class="h-48 overflow-hidden">
	<img src="http://static.photos/nature/640x360/3" alt="Pruning" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
	</div>
	<div class="p-8">
	<div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center text-primary-600 mb-4">
	<i data-feather="scissors"></i>
	</div>
	<h4 class="text-xl font-bold mb-2">Trimming & Pruning</h4>
	<p class="text-gray-600 mb-4">Expert cutting to improve tree health, aesthetics, and safety around power lines and structures.</p>
	<a href="javascript:void(0)" onclick="window.router.navigate('services')" class="text-secondary-600 font-bold hover:text-secondary-800 inline-flex items-center cursor-pointer">Learn More <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i></a>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- SERVICES PAGE -->
	<section id="services" class="page-section">
	<div class="bg-primary-900 py-20 text-white text-center">
	<h1 class="text-5xl font-bold mb-4">Our Services</h1>
	<p class="text-primary-100 max-w-2xl mx-auto">From precision pruning to complete land clearing, we handle jobs of any size with industrial-grade equipment.</p>
	</div>

	<div class="container mx-auto px-4 py-16">
	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="services-grid">
	<!-- Services injected via JS -->
	<div class="flex items-center justify-center col-span-full py-20">
	<div class="spinner"></div>
	</div>
	</div>
	</div>
	</section>

	<!-- PROJECTS / GALLERY PAGE -->
	<section id="projects" class="page-section">
	<div class="bg-slate-900 py-20 text-white text-center">
	<h1 class="text-5xl font-bold mb-4">Recent Projects</h1>
	<p class="text-slate-300 max-w-2xl mx-auto">See our team in action. We take pride in leaving your property cleaner than we found it.</p>
	</div>

	<div class="container mx-auto px-4 py-16">
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="gallery-grid">
	<!-- Gallery Items injected via JS -->
	</div>
	</div>
	</section>

	<!-- CONTACT PAGE -->
	<section id="contact" class="page-section">
	<div class="container mx-auto px-4 py-16">
	<div class="bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col lg:flex-row">
	<div class="lg:w-1/2 bg-primary-800 p-12 text-white flex flex-col justify-between">
	<div>
	<h2 class="text-4xl font-bold mb-6">Get Your Free Quote</h2>
	<p class="text-primary-100 mb-8">Fill out the form and one of our certified arborists will contact you within 24 hours to assess your needs.</p>

	<div class="space-y-6">
	<div class="flex items-start">
	<i data-feather="map-pin" class="w-6 h-6 mr-4 text-secondary-500"></i>
	<div>
	<h4 class="font-bold">Location</h4>
	<p class="text-primary-100">123 Forest Drive, Woodland Hills, CA</p>
	</div>
	</div>
	<div class="flex items-start">
	<i data-feather="phone" class="w-6 h-6 mr-4 text-secondary-500"></i>
	<div>
	<h4 class="font-bold">Phone</h4>
	<p class="text-primary-100">(555) 123-4567</p>
	</div>
	</div>
	<div class="flex items-start">
	<i data-feather="mail" class="w-6 h-6 mr-4 text-secondary-500"></i>
	<div>
	<h4 class="font-bold">Email</h4>
	<p class="text-primary-100">estimates@timbertitan.com</p>
	</div>
	</div>
	</div>
	</div>
	<div class="mt-12">
	<h4 class="font-bold mb-4">Follow Us</h4>
	<div class="flex space-x-4">
	<a href="#" class="w-10 h-10 bg-primary-700 rounded-full flex items-center justify-center hover:bg-secondary-600 transition"><i data-feather="facebook" class="w-5 h-5"></i></a>
	<a href="#" class="w-10 h-10 bg-primary-700 rounded-full flex items-center justify-center hover:bg-secondary-600 transition"><i data-feather="instagram" class="w-5 h-5"></i></a>
	<a href="#" class="w-10 h-10 bg-primary-700 rounded-full flex items-center justify-center hover:bg-secondary-600 transition"><i data-feather="twitter" class="w-5 h-5"></i></a>
	</div>
	</div>
	</div>

	<div class="lg:w-1/2 p-12 bg-slate-50">
	<form id="contact-form" onsubmit="event.preventDefault(); alert('Thank you! We will contact you shortly.');">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
	<div>
	<label class="block text-sm font-bold text-gray-700 mb-2">First Name</label>
	<input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition" placeholder="John" required>
	</div>
	<div>
	<label class="block text-sm font-bold text-gray-700 mb-2">Last Name</label>
	<input type="text" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition" placeholder="Doe" required>
	</div>
	</div>
	<div class="mb-6">
	<label class="block text-sm font-bold text-gray-700 mb-2">Email Address</label>
	<input type="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition" placeholder="john@example.com" required>
	</div>
	<div class="mb-6">
	<label class="block text-sm font-bold text-gray-700 mb-2">Service Needed</label>
	<select class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition">
	<option>Tree Removal</option>
	<option>Stump Grinding</option>
	<option>Pruning/Trimming</option>
	<option>Emergency Service</option>
	<option>Other</option>
	</select>
	</div>
	<div class="mb-6">
	<label class="block text-sm font-bold text-gray-700 mb-2">Message</label>
	<textarea rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary-500 focus:ring-2 focus:ring-primary-200 outline-none transition" placeholder="Describe your tree situation..."></textarea>
	</div>
	<button type="submit" class="w-full bg-secondary-600 hover:bg-secondary-700 text-white font-bold py-4 rounded-lg shadow-lg transition transform hover:-translate-y-1">
	Send Request
	</button>
	</form>
	</div>
	</div>
	</div>
	</section>

	</main>

	<!-- Footer Component -->
	<custom-footer></custom-footer>
	<!-- Web Components Scripts -->
	<script>
	// HEADER COMPONENT
	class CustomHeader extends HTMLElement {
	connectedCallback() {
	this.attachShadow({ mode: 'open' });
	this.shadowRoot.innerHTML = `
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
	header {
	font-family: 'Inter', sans-serif;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	position: sticky;
	top: 0;
	z-index: 50;
	}
	.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	.logo {
	font-weight: 800;
	font-size: 1.5rem;
	color: #065f46;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	}
	.nav-desktop {
	display: none;
	}
	@media(min-width: 768px) {
	.nav-desktop {
	display: flex;
	gap: 2rem;
	align-items: center;
	}
	}
	.nav-link {
	text-decoration: none;
	color: #475569;
	font-weight: 600;
	transition: color 0.2s;
	cursor: pointer;
	}
	.nav-link:hover, .nav-link.active {
	color: #059669;
	}
	.btn-cta {
	background-color: #d97706;
	color: white;
	padding: 0.5rem 1.25rem;
	border-radius: 0.5rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
	cursor: pointer;
	}
	.btn-cta:hover {
	background-color: #b45309;
	}
	.mobile-menu-btn {
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	}
	@media(min-width: 768px) {
	.mobile-menu-btn {
	display: none;
	}
	}
	/* Mobile Menu Styles */
	.mobile-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	background: white;
	flex-direction: column;
	padding: 1rem;
	border-top: 1px solid #e2e8f0;
	display: none;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}
	.mobile-menu.open {
	display: flex;
	}
	.mobile-link {
	padding: 0.75rem;
	color: #475569;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid #f1f5f9;
	cursor: pointer;
	}
	.mobile-link:hover {
	color: #059669;
	}
	</style>
	<header>
	<div class="container">
	<div class="logo" data-navigate="home">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
	TimberTitan
	</div>

	<nav class="nav-desktop">
	<span class="nav-link active" data-target="home">Home</span>
	<span class="nav-link" data-target="services">Services</span>
	<span class="nav-link" data-target="projects">Projects</span>
	<span class="nav-link" data-target="contact">Contact</span>
	<span class="btn-cta" data-navigate="contact">Get Quote</span>
	</nav>

	<button class="mobile-menu-btn">
	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
	</button>
	</div>
	<div class="mobile-menu">
	<span class="mobile-link" data-navigate="home">Home</span>
	<span class="mobile-link" data-navigate="services">Services</span>
	<span class="mobile-link" data-navigate="projects">Projects</span>
	<span class="mobile-link" data-navigate="contact">Contact</span>
	</div>
	</header>
	`;

	// Add click handlers after DOM is ready
	setTimeout(() => {
	const logo = this.shadowRoot.querySelector('.logo');
	const navLinks = this.shadowRoot.querySelectorAll('.nav-link');
	const mobileLinks = this.shadowRoot.querySelectorAll('.mobile-link');
	const ctaBtn = this.shadowRoot.querySelector('.btn-cta');
	const menuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
	const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');

	// Logo click
	if (logo) {
	logo.addEventListener('click', () => {
	if (window.router) window.router.navigate('home');
	});
	}

	// Nav links
	navLinks.forEach(link => {
	link.addEventListener('click', () => {
	const target = link.getAttribute('data-target');
	if (window.router) window.router.navigate(target);
	});
	});

	// Mobile links
	mobileLinks.forEach(link => {
	link.addEventListener('click', () => {
	const target = link.getAttribute('data-navigate');
	if (window.router) {
	window.router.navigate(target);
	mobileMenu.classList.remove('open');
	}
	});
	});

	// CTA button
	if (ctaBtn && ctaBtn.getAttribute('data-navigate')) {
	ctaBtn.addEventListener('click', () => {
	if (window.router) window.router.navigate('contact');
	});
	}

	// Mobile menu toggle
	if (menuBtn && mobileMenu) {
	menuBtn.addEventListener('click', () => {
	mobileMenu.classList.toggle('open');
	});
	}
	}, 0);
	}
	}
	customElements.define('custom-header', CustomHeader);
	// FOOTER COMPONENT
	class CustomFooter extends HTMLElement {
	connectedCallback() {
	this.attachShadow({ mode: 'open' });
	this.shadowRoot.innerHTML = `
	<style>
	footer {
	background-color: #1e293b;
	color: #cbd5e1;
	padding: 4rem 1.5rem 2rem;
	margin-top: auto;
	}
	.footer-grid {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	}
	@media(min-width: 768px) {
	.footer-grid {
	grid-template-columns: repeat(4, 1fr);
	}
	}
	.footer-col h3 {
	color: white;
	font-weight: 700;
	margin-bottom: 1.5rem;
	font-size: 1.125rem;
	}
	.footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	}
	.footer-links li {
	margin-bottom: 0.75rem;
	}
	.footer-link {
	color: #94a3b8;
	cursor: pointer;
	transition: color 0.2s;
	display: inline-block;
	}
	.footer-link:hover {
	color: white;
	}
	.contact-info {
	list-style: none;
	padding: 0;
	margin: 0;
	}
	.contact-info li {
	margin-bottom: 0.75rem;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	}
	.copyright {
	text-align: center;
	border-top: 1px solid #334155;
	margin-top: 3rem;
	padding-top: 2rem;
	font-size: 0.875rem;
	}
	.social-links {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	}
	.social-link {
	width: 40px;
	height: 40px;
	background-color: #334155;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s;
	}
	.social-link:hover {
	background-color: #d97706;
	}
	.social-link svg {
	width: 18px;
	height: 18px;
	}
	</style>
	<footer>
	<div class="footer-grid">
	<div class="footer-col">
	<h3>TimberTitan</h3>
	<p>Professional tree care services dedicated to safety, quality, and customer satisfaction. Serving the community since 1995.</p>
	<div class="social-links">
	<div class="social-link">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
	</div>
	<div class="social-link">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
	</div>
	<div class="social-link">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>
	</div>
	</div>
	</div>
	<div class="footer-col">
	<h3>Services</h3>
	<ul class="footer-links">
	<li><span class="footer-link" data-navigate="services">Tree Removal</span></li>
	<li><span class="footer-link" data-navigate="services">Stump Grinding</span></li>
	<li><span class="footer-link" data-navigate="services">Emergency Services</span></li>
	<li><span class="footer-link" data-navigate="services">Land Clearing</span></li>
	<li><span class="footer-link" data-navigate="services">Tree Pruning</span></li>
	<li><span class="footer-link" data-navigate="services">Cabling & Bracing</span></li>
	</ul>
	</div>
	<div class="footer-col">
	<h3>Quick Links</h3>
	<ul class="footer-links">
	<li><span class="footer-link" data-navigate="home">Home</span></li>
	<li><span class="footer-link" data-navigate="services">All Services</span></li>
	<li><span class="footer-link" data-navigate="projects">Recent Projects</span></li>
	<li><span class="footer-link" data-navigate="contact">Get Free Quote</span></li>
	<li><span class="footer-link">Privacy Policy</span></li>
	</ul>
	</div>
	<div class="footer-col">
	<h3>Contact Us</h3>
	<ul class="contact-info">
	<li>
	<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
	(555) 123-4567
	</li>
	<li>
	<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
	help@timbertitan.com
	</li>
	<li>
	<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
	123 Forest Drive, Woodland Hills, CA
	</li>
	<li>
	<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
	Mon - Sat: 7AM - 6PM
	</li>
	</ul>
	</div>
	</div>
	<div class="copyright">
	<p>© 2023 TimberTitan Services. All rights reserved. \| Licensed & Insured \| Lic# 123456</p>
	</div>
	</footer>
	`;

	// Add click handlers
	setTimeout(() => {
	const footerLinks = this.shadowRoot.querySelectorAll('.footer-link');
	footerLinks.forEach(link => {
	link.addEventListener('click', () => {
	const target = link.getAttribute('data-navigate');
	if (window.router && target) {
	window.router.navigate(target);
	}
	});
	});
	}, 0);
	}
	}
	customElements.define('custom-footer', CustomFooter);
	</script>

	<!-- Main Logic Script -->
	<script src="script.js"></script>
	<script>feather.replace();</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>