dadobos/handyman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: integrate i18n for multilingual support in Services page

Browse Source 
- Added i18n configuration in src/i18n.ts for English and Dutch translations.
- Created locale files for English (en.json) and Dutch (nl.json) with translations for various sections.
- Updated Services component to utilize translation keys for titles, descriptions, and items.
- Refactored process steps in Services component to be dynamically rendered from translation keys.
- Adjusted main.tsx to include i18n initialization.
This commit is contained in:
Dan Dobos
2026-02-23 13:04:13 +01:00
parent 2fed4212c7
commit 8954081593
14 changed files with 1380 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/Footer.tsx
+36 -23
View File
@@ -1,7 +1,10 @@
import { Link } from "react-router";
import { Phone, Mail, MapPin, Clock, Wrench, Facebook, Instagram, Twitter } from "lucide-react";
import { useTranslation } from "react-i18next";
export function Footer() {
const { t } = useTranslation();
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">
@@ -10,10 +13,12 @@ export function Footer() {
<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>
<span className="font-bold text-xl text-white">
{t("footer.brand")}
</span>
</div>
<p className="text-sm mb-4">
Professional handyman services for all your home repair and maintenance needs. Quality work, affordable prices.
{t("footer.description")}
</p>
<div className="flex space-x-4">
<a href="#" className="hover:text-orange-600 transition-colors">
@@ -30,31 +35,33 @@ export function Footer() {
{/* Quick Links */}
<div>
<h3 className="text-white font-semibold mb-4">Quick Links</h3>
<h3 className="text-white font-semibold mb-4">
{t("footer.quickLinks")}
</h3>
<ul className="space-y-2">
<li>
<Link to="/" className="hover:text-orange-600 transition-colors">
Home
{t("footer.links.home")}
</Link>
</li>
<li>
<Link to="/services" className="hover:text-orange-600 transition-colors">
Services
{t("footer.links.services")}
</Link>
</li>
<li>
<Link to="/about" className="hover:text-orange-600 transition-colors">
About Us
{t("footer.links.about")}
</Link>
</li>
<li>
<Link to="/gallery" className="hover:text-orange-600 transition-colors">
Gallery
{t("footer.links.gallery")}
</Link>
</li>
<li>
<Link to="/contact" className="hover:text-orange-600 transition-colors">
Contact
{t("footer.links.contact")}
</Link>
</li>
</ul>
@@ -62,47 +69,53 @@ export function Footer() {
{/* Services */}
<div>
<h3 className="text-white font-semibold mb-4">Our Services</h3>
<h3 className="text-white font-semibold mb-4">
{t("footer.ourServices")}
</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>
<li>{t("footer.services.plumbing")}</li>
<li>{t("footer.services.electrical")}</li>
<li>{t("footer.services.painting")}</li>
<li>{t("footer.services.carpentry")}</li>
<li>{t("footer.services.general")}</li>
<li>{t("footer.services.maintenance")}</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="text-white font-semibold mb-4">Contact Info</h3>
<h3 className="text-white font-semibold mb-4">
{t("footer.contactInfo")}
</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-sm">{t("footer.callUs")}</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-sm">{t("footer.emailUs")}</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>
<p className="text-sm">{t("footer.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>
<p className="text-sm">{t("footer.hours")}</p>
<p className="text-white">{t("footer.hoursValue")}</p>
</div>
</li>
</ul>
@@ -110,7 +123,7 @@ export function Footer() {
</div>
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
<p>&copy; 2026 Lucris Handyman. All rights reserved.</p>
<p>{t("footer.copyright")}</p>
</div>
</div>
</footer>