119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
import { Link } from "react-router";
|
|
import { Phone, Mail, MapPin, Clock, Wrench, Facebook, Instagram, Twitter } from "lucide-react";
|
|
|
|
export function Footer() {
|
|
return (
|
|
<footer className="bg-gray-900 text-gray-300">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{/* Company Info */}
|
|
<div>
|
|
<div className="flex items-center space-x-2 mb-4">
|
|
<Wrench className="h-8 w-8 text-orange-600" />
|
|
<span className="font-bold text-xl text-white">Lucris Handyman</span>
|
|
</div>
|
|
<p className="text-sm mb-4">
|
|
Professional handyman services for all your home repair and maintenance needs. Quality work, affordable prices.
|
|
</p>
|
|
<div className="flex space-x-4">
|
|
<a href="#" className="hover:text-orange-600 transition-colors">
|
|
<Facebook className="h-5 w-5" />
|
|
</a>
|
|
<a href="#" className="hover:text-orange-600 transition-colors">
|
|
<Instagram className="h-5 w-5" />
|
|
</a>
|
|
<a href="#" className="hover:text-orange-600 transition-colors">
|
|
<Twitter className="h-5 w-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Links */}
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">Quick Links</h3>
|
|
<ul className="space-y-2">
|
|
<li>
|
|
<Link to="/" className="hover:text-orange-600 transition-colors">
|
|
Home
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/services" className="hover:text-orange-600 transition-colors">
|
|
Services
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/about" className="hover:text-orange-600 transition-colors">
|
|
About Us
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/gallery" className="hover:text-orange-600 transition-colors">
|
|
Gallery
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/contact" className="hover:text-orange-600 transition-colors">
|
|
Contact
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Services */}
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">Our Services</h3>
|
|
<ul className="space-y-2 text-sm">
|
|
<li>Plumbing Repairs</li>
|
|
<li>Electrical Work</li>
|
|
<li>Painting & Drywall</li>
|
|
<li>Carpentry</li>
|
|
<li>General Repairs</li>
|
|
<li>Home Maintenance</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Contact Info */}
|
|
<div>
|
|
<h3 className="text-white font-semibold mb-4">Contact Info</h3>
|
|
<ul className="space-y-3">
|
|
<li className="flex items-start space-x-3">
|
|
<Phone className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm">Call Us</p>
|
|
<p className="text-white">(555) 123-4567</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start space-x-3">
|
|
<Mail className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm">Email Us</p>
|
|
<p className="text-white">info@lucris.nl</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start space-x-3">
|
|
<MapPin className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm">Location</p>
|
|
<p className="text-white">123 Main Street<br />New York, NY 10001</p>
|
|
</div>
|
|
</li>
|
|
<li className="flex items-start space-x-3">
|
|
<Clock className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="text-sm">Working Hours</p>
|
|
<p className="text-white">Mon-Sat: 8AM-6PM</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
|
|
<p>© 2026 Lucris Handyman. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|