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/pages/About.tsx
+70 -51
View File
@@ -1,45 +1,77 @@
import { CheckCircle, Award, Users, Clock } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useTranslation } from "react-i18next";
export function About() {
const { t } = useTranslation();
const stats = [
{ label: "Years in Business", value: "15+" },
{ label: "Happy Clients", value: "5,000+" },
{ label: "Projects Completed", value: "10,000+" },
{ label: "Customer Satisfaction", value: "99%" },
{ label: t("about.stats.years"), value: "15+" },
{ label: t("about.stats.clients"), value: "5,000+" },
{ label: t("about.stats.projects"), value: "10,000+" },
{ label: t("about.stats.satisfaction"), value: "99%" },
];
const values = [
{
icon: CheckCircle,
title: "Quality First",
description: "We never compromise on the quality of our work. Every job is done right the first time.",
title: t("about.values.quality.title"),
description: t("about.values.quality.description"),
},
{
icon: Award,
title: "Professional Excellence",
description: "Our team consists of skilled, licensed professionals with years of experience.",
title: t("about.values.excellence.title"),
description: t("about.values.excellence.description"),
},
{
icon: Users,
title: "Customer Focus",
description: "Your satisfaction is our priority. We listen to your needs and deliver results.",
title: t("about.values.customer.title"),
description: t("about.values.customer.description"),
},
{
icon: Clock,
title: "Reliable Service",
description: "We show up on time, every time. Count on us to be there when you need us.",
title: t("about.values.reliable.title"),
description: t("about.values.reliable.description"),
},
];
const team = [
{
name: t("about.team.members.john.name"),
role: t("about.team.members.john.role"),
description: t("about.team.members.john.description"),
},
{
name: t("about.team.members.david.name"),
role: t("about.team.members.david.role"),
description: t("about.team.members.david.description"),
},
{
name: t("about.team.members.robert.name"),
role: t("about.team.members.robert.role"),
description: t("about.team.members.robert.description"),
},
];
const certifications = [
t("about.certifications.items.0"),
t("about.certifications.items.1"),
t("about.certifications.items.2"),
t("about.certifications.items.3"),
t("about.certifications.items.4"),
t("about.certifications.items.5"),
];
return (
<div>
{/* Hero Section */}
<section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">About Lucris Handyman</h1>
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("about.hero.title")}
</h1>
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
Your trusted partner for all home repair and maintenance needs since 2011
{t("about.hero.subtitle")}
</p>
</div>
</section>
@@ -49,20 +81,22 @@ export function About() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h2 className="text-3xl md:text-4xl mb-6 text-gray-900">Our Story</h2>
<h2 className="text-3xl md:text-4xl mb-6 text-gray-900">
{t("about.story.title")}
</h2>
<p className="text-lg text-gray-700 mb-4">
Lucris Handyman was founded in 2011 with a simple mission: to provide reliable, high-quality handyman services at fair prices. What started as a one-person operation has grown into a trusted team of skilled professionals serving the community.
{t("about.story.p1")}
</p>
<p className="text-lg text-gray-700 mb-4">
Over the years, we've completed thousands of projects, from simple repairs to complete home renovations. Our reputation for quality work and excellent customer service has made us the go-to handyman service in the area.
{t("about.story.p2")}
</p>
<p className="text-lg text-gray-700">
Today, we continue to uphold the same values that guided us from the beginning: integrity, quality, and customer satisfaction. Every member of our team is dedicated to exceeding your expectations.
{t("about.story.p3")}
</p>
</div>
<ImageWithFallback
src="https://images.unsplash.com/photo-1768321901750-f7b96d774456?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVub3ZhdGlvbiUyMHdvcmt8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
alt="Home renovation work"
alt={t("about.story.imageAlt")}
className="rounded-lg shadow-lg w-full"
/>
</div>
@@ -75,7 +109,9 @@ export function About() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{stats.map((stat, index) => (
<div key={index} className="text-center">
<div className="text-4xl md:text-5xl text-white mb-2">{stat.value}</div>
<div className="text-4xl md:text-5xl text-white mb-2">
{stat.value}
</div>
<div className="text-orange-100">{stat.label}</div>
</div>
))}
@@ -87,9 +123,11 @@ export function About() {
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">Our Values</h2>
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
{t("about.values.title")}
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
These core principles guide everything we do
{t("about.values.subtitle")}
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
@@ -113,29 +151,15 @@ export function About() {
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">Meet Our Team</h2>
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
{t("about.team.title")}
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Skilled professionals dedicated to your home's care
{t("about.team.subtitle")}
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
name: "John Mitchell",
role: "Founder & Lead Handyman",
description: "15+ years of experience in all aspects of home repair and maintenance.",
},
{
name: "David Chen",
role: "Master Electrician",
description: "Licensed electrician specializing in residential electrical work.",
},
{
name: "Robert Garcia",
role: "Master Plumber",
description: "Expert plumber with extensive experience in repairs and installations.",
},
].map((member, index) => (
{team.map((member, index) => (
<div key={index} className="bg-gray-50 rounded-lg p-6 text-center">
<div className="bg-orange-100 w-24 h-24 rounded-full mx-auto mb-4 flex items-center justify-center">
<Users className="h-12 w-12 text-orange-600" />
@@ -153,20 +177,15 @@ export function About() {
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">Licensed & Insured</h2>
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
{t("about.certifications.title")}
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
We maintain all necessary licenses and insurance for your protection and peace of mind
{t("about.certifications.subtitle")}
</p>
</div>
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{[
"State Licensed Contractor",
"Fully Insured & Bonded",
"BBB Accredited Business",
"Master Electrician License",
"Master Plumber License",
"OSHA Safety Certified",
].map((cert, index) => (
{certifications.map((cert, index) => (
<div key={index} className="flex items-center space-x-3 bg-white p-4 rounded-lg">
<CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0" />
<span className="text-gray-700">{cert}</span>
src/app/pages/Contact.tsx
+65 -46
View File
@@ -1,7 +1,10 @@
import { useState } from "react";
import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";
import { useTranslation } from "react-i18next";
export function Contact() {
const { t } = useTranslation();
const [formData, setFormData] = useState({
name: "",
email: "",
@@ -12,7 +15,9 @@ export function Contact() {
const [formSubmitted, setFormSubmitted] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
@@ -21,11 +26,9 @@ export function Contact() {
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// In a real application, this would send the data to a server
console.log("Form submitted:", formData);
setFormSubmitted(true);
// Reset form after 3 seconds
setTimeout(() => {
setFormSubmitted(false);
setFormData({
@@ -39,13 +42,13 @@ export function Contact() {
};
const services = [
"General Repair",
"Plumbing",
"Electrical",
"Painting",
"Carpentry",
"Home Maintenance",
"Other",
t("contact.services.generalRepair"),
t("contact.services.plumbing"),
t("contact.services.electrical"),
t("contact.services.painting"),
t("contact.services.carpentry"),
t("contact.services.homeMaintenance"),
t("contact.services.other"),
];
return (
@@ -53,9 +56,11 @@ export function Contact() {
{/* Hero Section */}
<section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">Contact Us</h1>
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("contact.hero.title")}
</h1>
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
Get in touch with us for a free quote or to schedule a service
{t("contact.hero.subtitle")}
</p>
</div>
</section>
@@ -67,9 +72,11 @@ export function Contact() {
{/* Contact Information */}
<div className="lg:col-span-2 space-y-8">
<div>
<h2 className="text-3xl mb-6 text-gray-900">Get in Touch</h2>
<h2 className="text-3xl mb-6 text-gray-900">
{t("contact.info.title")}
</h2>
<p className="text-gray-600 mb-8">
Have a question or ready to start your project? We'd love to hear from you. Reach out using any of the methods below.
{t("contact.info.subtitle")}
</p>
</div>
@@ -79,11 +86,13 @@ export function Contact() {
<Phone className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Phone</h3>
<h3 className="text-gray-900 mb-1">{t("contact.info.phone")}</h3>
<a href="tel:5551234567" className="text-orange-600 hover:text-orange-700">
(555) 123-4567
</a>
<p className="text-gray-600 text-sm mt-1">Mon-Sat: 8AM-6PM</p>
<p className="text-gray-600 text-sm mt-1">
{t("contact.info.phoneHours")}
</p>
</div>
</div>
@@ -92,11 +101,13 @@ export function Contact() {
<Mail className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Email</h3>
<h3 className="text-gray-900 mb-1">{t("contact.info.email")}</h3>
<a href="mailto:info@lucris.nl" className="text-orange-600 hover:text-orange-700">
info@lucris.nl
</a>
<p className="text-gray-600 text-sm mt-1">We'll respond within 24 hours</p>
<p className="text-gray-600 text-sm mt-1">
{t("contact.info.emailNote")}
</p>
</div>
</div>
@@ -105,10 +116,10 @@ export function Contact() {
<MapPin className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Address</h3>
<h3 className="text-gray-900 mb-1">{t("contact.info.address")}</h3>
<p className="text-gray-600">
123 Main Street<br />
New York, NY 10001
{t("contact.info.addressLine1")}<br />
{t("contact.info.addressLine2")}
</p>
</div>
</div>
@@ -118,20 +129,20 @@ export function Contact() {
<Clock className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Business Hours</h3>
<h3 className="text-gray-900 mb-1">{t("contact.info.hours")}</h3>
<p className="text-gray-600">
Monday - Friday: 8:00 AM - 6:00 PM<br />
Saturday: 9:00 AM - 4:00 PM<br />
Sunday: Closed
{t("contact.info.hoursLine1")}<br />
{t("contact.info.hoursLine2")}<br />
{t("contact.info.hoursLine3")}
</p>
</div>
</div>
</div>
<div className="bg-orange-50 p-6 rounded-lg border border-orange-200">
<h3 className="text-gray-900 mb-2">Emergency Services</h3>
<h3 className="text-gray-900 mb-2">{t("contact.emergency.title")}</h3>
<p className="text-gray-600 mb-3">
For urgent repairs outside business hours, call our emergency line:
{t("contact.emergency.subtitle")}
</p>
<a href="tel:5559876543" className="text-xl text-orange-600 hover:text-orange-700">
(555) 987-6543
@@ -141,16 +152,20 @@ export function Contact() {
{/* Contact Form */}
<div className="lg:col-span-3 bg-gray-50 p-8 rounded-lg">
<h2 className="text-2xl mb-6 text-gray-900">Request a Free Quote</h2>
<h2 className="text-2xl mb-6 text-gray-900">
{t("contact.form.title")}
</h2>
{formSubmitted ? (
<div className="bg-green-50 border border-green-200 rounded-lg p-8 text-center">
<div className="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<Send className="h-8 w-8 text-green-600" />
</div>
<h3 className="text-2xl text-green-900 mb-2">Thank You!</h3>
<h3 className="text-2xl text-green-900 mb-2">
{t("contact.form.successTitle")}
</h3>
<p className="text-green-800">
Your message has been received. We'll get back to you within 24 hours.
{t("contact.form.successMessage")}
</p>
</div>
) : (
@@ -158,7 +173,7 @@ export function Contact() {
<div className="grid md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm text-gray-700 mb-2">
Full Name *
{t("contact.form.fullName")} *
</label>
<input
type="text"
@@ -168,13 +183,13 @@ export function Contact() {
value={formData.name}
onChange={handleChange}
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
placeholder="John Doe"
placeholder={t("contact.form.fullNamePlaceholder")}
/>
</div>
<div>
<label htmlFor="phone" className="block text-sm text-gray-700 mb-2">
Phone Number *
{t("contact.form.phone")} *
</label>
<input
type="tel"
@@ -184,14 +199,14 @@ export function Contact() {
value={formData.phone}
onChange={handleChange}
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
placeholder="(555) 123-4567"
placeholder={t("contact.form.phonePlaceholder")}
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm text-gray-700 mb-2">
Email Address *
{t("contact.form.email")} *
</label>
<input
type="email"
@@ -201,13 +216,13 @@ export function Contact() {
value={formData.email}
onChange={handleChange}
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
placeholder="john@example.com"
placeholder={t("contact.form.emailPlaceholder")}
/>
</div>
<div>
<label htmlFor="service" className="block text-sm text-gray-700 mb-2">
Service Needed *
{t("contact.form.service")} *
</label>
<select
id="service"
@@ -217,7 +232,7 @@ export function Contact() {
onChange={handleChange}
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all"
>
<option value="">Select a service</option>
<option value="">{t("contact.form.servicePlaceholder")}</option>
{services.map((service) => (
<option key={service} value={service}>
{service}
@@ -228,7 +243,7 @@ export function Contact() {
<div>
<label htmlFor="message" className="block text-sm text-gray-700 mb-2">
Project Details *
{t("contact.form.details")} *
</label>
<textarea
id="message"
@@ -238,7 +253,7 @@ export function Contact() {
onChange={handleChange}
rows={6}
className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-600 focus:ring-2 focus:ring-orange-200 outline-none transition-all resize-none"
placeholder="Please describe your project in detail..."
placeholder={t("contact.form.detailsPlaceholder")}
/>
</div>
@@ -247,11 +262,11 @@ export function Contact() {
className="w-full bg-orange-600 text-white px-8 py-4 rounded-lg hover:bg-orange-700 transition-colors flex items-center justify-center"
>
<Send className="mr-2 h-5 w-5" />
Send Message
{t("contact.form.submit")}
</button>
<p className="text-sm text-gray-600 text-center">
By submitting this form, you agree to our terms and privacy policy.
{t("contact.form.disclaimer")}
</p>
</form>
)}
@@ -263,9 +278,13 @@ export function Contact() {
{/* Map Section */}
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl text-center mb-8 text-gray-900">Our Location</h2>
<h2 className="text-3xl text-center mb-8 text-gray-900">
{t("contact.map.title")}
</h2>
<div className="bg-gray-300 rounded-lg overflow-hidden h-96 flex items-center justify-center">
<p className="text-gray-600">Map would be displayed here (e.g., Google Maps integration)</p>
<p className="text-gray-600">
{t("contact.map.placeholder")}
</p>
</div>
</div>
</section>
src/app/pages/Gallery.tsx
+60 -55
View File
@@ -1,62 +1,80 @@
import { useState } from "react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useTranslation } from "react-i18next";
export function Gallery() {
const [selectedCategory, setSelectedCategory] = useState("All");
const { t } = useTranslation();
const [selectedCategory, setSelectedCategory] = useState("all");
const categories = ["All", "Plumbing", "Electrical", "Painting", "Carpentry", "Renovation"];
const categories = [
{ key: "all", label: t("gallery.categories.all") },
{ key: "plumbing", label: t("gallery.categories.plumbing") },
{ key: "electrical", label: t("gallery.categories.electrical") },
{ key: "painting", label: t("gallery.categories.painting") },
{ key: "carpentry", label: t("gallery.categories.carpentry") },
{ key: "renovation", label: t("gallery.categories.renovation") },
];
const projects = [
{
title: "Kitchen Renovation",
category: "Renovation",
image: "https://images.unsplash.com/photo-1768321901750-f7b96d774456?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVub3ZhdGlvbiUyMHdvcmt8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: "Complete kitchen remodel with custom cabinets and new fixtures",
title: t("gallery.projects.kitchen.title"),
category: "renovation",
image:
"https://images.unsplash.com/photo-1768321901750-f7b96d774456?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVub3ZhdGlvbiUyMHdvcmt8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: t("gallery.projects.kitchen.description"),
},
{
title: "Plumbing Repair",
category: "Plumbing",
image: "https://images.unsplash.com/photo-1760571327612-8ab776dcd462?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVwYWlyJTIwcGx1bWJpbmd8ZW58MXx8fHwxNzcxNTE2ODQ2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: "Professional pipe repair and fixture installation",
title: t("gallery.projects.plumbing.title"),
category: "plumbing",
image:
"https://images.unsplash.com/photo-1760571327612-8ab776dcd462?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVwYWlyJTIwcGx1bWJpbmd8ZW58MXx8fHwxNzcxNTE2ODQ2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: t("gallery.projects.plumbing.description"),
},
{
title: "Electrical Installation",
category: "Electrical",
image: "https://images.unsplash.com/photo-1767514536570-83d70c024247?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlbGVjdHJpY2FsJTIwd29yayUyMGluc3RhbGxhdGlvbnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: "Safe and reliable electrical work with proper certification",
title: t("gallery.projects.electrical.title"),
category: "electrical",
image:
"https://images.unsplash.com/photo-1767514536570-83d70c024247?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlbGVjdHJpY2FsJTIwd29yayUyMGluc3RhbGxhdGlvbnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: t("gallery.projects.electrical.description"),
},
{
title: "Interior Painting",
category: "Painting",
image: "https://images.unsplash.com/photo-1574359411659-15573a27fd0c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3VzZSUyMHBhaW50aW5nJTIwY29udHJhY3RvcnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: "Professional interior painting with attention to detail",
title: t("gallery.projects.painting.title"),
category: "painting",
image:
"https://images.unsplash.com/photo-1574359411659-15573a27fd0c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3VzZSUyMHBhaW50aW5nJTIwY29udHJhY3RvcnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: t("gallery.projects.painting.description"),
},
{
title: "Custom Carpentry",
category: "Carpentry",
image: "https://images.unsplash.com/photo-1581783898377-1c85bf937427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoYW5keW1hbiUyMGNhcnBlbnRlciUyMHRvb2xzfGVufDF8fHx8MTc3MTU5ODc5N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: "Custom woodworking and carpentry projects",
title: t("gallery.projects.carpentry.title"),
category: "carpentry",
image:
"https://images.unsplash.com/photo-1581783898377-1c85bf937427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoYW5keW1hbiUyMGNhcnBlbnRlciUyMHRvb2xzfGVufDF8fHx8MTc3MTU5ODc5N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: t("gallery.projects.carpentry.description"),
},
{
title: "Home Maintenance",
category: "Renovation",
image: "https://images.unsplash.com/photo-1620838883342-ca19cf8448d6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBoYW5keW1hbiUyMHNlcnZpY2V8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: "Regular home maintenance and repair services",
title: t("gallery.projects.maintenance.title"),
category: "renovation",
image:
"https://images.unsplash.com/photo-1620838883342-ca19cf8448d6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBoYW5keW1hbiUyMHNlcnZpY2V8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
description: t("gallery.projects.maintenance.description"),
},
];
const filteredProjects = selectedCategory === "All"
? projects
: projects.filter(project => project.category === selectedCategory);
const filteredProjects =
selectedCategory === "all"
? projects
: projects.filter((project) => project.category === selectedCategory);
return (
<div>
{/* Hero Section */}
<section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">Project Gallery</h1>
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("gallery.hero.title")}
</h1>
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
Browse through our portfolio of completed projects and see the quality of our work
{t("gallery.hero.subtitle")}
</p>
</div>
</section>
@@ -67,15 +85,15 @@ export function Gallery() {
<div className="flex flex-wrap gap-3 justify-center">
{categories.map((category) => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
key={category.key}
onClick={() => setSelectedCategory(category.key)}
className={`px-6 py-2 rounded-full transition-colors ${
selectedCategory === category
selectedCategory === category.key
? "bg-orange-600 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
{category}
{category.label}
</button>
))}
</div>
@@ -99,7 +117,10 @@ export function Gallery() {
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div className="absolute bottom-0 left-0 right-0 p-6 text-white">
<div className="inline-block bg-orange-600 px-3 py-1 rounded-full text-sm mb-2">
{project.category}
{
categories.find((c) => c.key === project.category)
?.label
}
</div>
<h3 className="text-xl mb-2">{project.title}</h3>
<p className="text-sm text-gray-200">{project.description}</p>
@@ -111,29 +132,13 @@ export function Gallery() {
{filteredProjects.length === 0 && (
<div className="text-center py-12">
<p className="text-xl text-gray-600">No projects found in this category.</p>
<p className="text-xl text-gray-600">
{t("gallery.empty")}
</p>
</div>
)}
</div>
</section>
{/* CTA Section */}
<section className="py-16 bg-gray-50">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl mb-6 text-gray-900">
Want Your Project Featured Here?
</h2>
<p className="text-xl text-gray-600 mb-8">
Let us help you transform your home with our professional services
</p>
<a
href="/contact"
className="inline-flex items-center bg-orange-600 text-white px-8 py-4 rounded-lg hover:bg-orange-700 transition-colors"
>
Start Your Project
</a>
</div>
</section>
</div>
);
}
src/app/pages/Home.tsx
+73 -47
View File
@@ -1,49 +1,55 @@
import { Link } from "react-router";
import { CheckCircle, Phone, ArrowRight, Star } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useTranslation } from "react-i18next";
export function Home() {
const { t } = useTranslation();
const services = [
{
title: "Plumbing",
description: "From leaky faucets to pipe repairs, we handle all your plumbing needs.",
image: "https://images.unsplash.com/photo-1760571327612-8ab776dcd462?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVwYWlyJTIwcGx1bWJpbmd8ZW58MXx8fHwxNzcxNTE2ODQ2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
title: t("home.services.items.plumbing.title"),
description: t("home.services.items.plumbing.description"),
image:
"https://images.unsplash.com/photo-1760571327612-8ab776dcd462?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob21lJTIwcmVwYWlyJTIwcGx1bWJpbmd8ZW58MXx8fHwxNzcxNTE2ODQ2fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
},
{
title: "Electrical",
description: "Safe and reliable electrical installations, repairs, and upgrades.",
image: "https://images.unsplash.com/photo-1767514536570-83d70c024247?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlbGVjdHJpY2FsJTIwd29yayUyMGluc3RhbGxhdGlvbnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
title: t("home.services.items.electrical.title"),
description: t("home.services.items.electrical.description"),
image:
"https://images.unsplash.com/photo-1767514536570-83d70c024247?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxlbGVjdHJpY2FsJTIwd29yayUyMGluc3RhbGxhdGlvbnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
},
{
title: "Painting",
description: "Professional painting services for interior and exterior projects.",
image: "https://images.unsplash.com/photo-1574359411659-15573a27fd0c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3VzZSUyMHBhaW50aW5nJTIwY29udHJhY3RvcnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
title: t("home.services.items.painting.title"),
description: t("home.services.items.painting.description"),
image:
"https://images.unsplash.com/photo-1574359411659-15573a27fd0c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxob3VzZSUyMHBhaW50aW5nJTIwY29udHJhY3RvcnxlbnwxfHx8fDE3NzE1OTg3OTh8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral",
},
];
const features = [
"Licensed & Insured",
"Same-Day Service",
"Quality Workmanship",
"Affordable Pricing",
"100% Satisfaction Guarantee",
"Emergency Services Available",
t("home.features.licensed"),
t("home.features.sameDay"),
t("home.features.quality"),
t("home.features.affordable"),
t("home.features.satisfaction"),
t("home.features.emergency"),
];
const testimonials = [
{
name: "Sarah Johnson",
text: "Outstanding service! They fixed our plumbing issue quickly and professionally. Highly recommend!",
name: t("home.testimonials.items.sarah.name"),
text: t("home.testimonials.items.sarah.text"),
rating: 5,
},
{
name: "Mike Thompson",
text: "Lucris is my go-to for all home repairs. Always reliable, fair pricing, and excellent work.",
name: t("home.testimonials.items.mike.name"),
text: t("home.testimonials.items.mike.text"),
rating: 5,
},
{
name: "Emily Davis",
text: "They remodeled our bathroom and the results exceeded our expectations. True professionals!",
name: t("home.testimonials.items.emily.name"),
text: t("home.testimonials.items.emily.text"),
rating: 5,
},
];
@@ -56,17 +62,18 @@ export function Home() {
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h1 className="text-4xl md:text-5xl lg:text-6xl mb-6 text-gray-900">
Your Trusted <span className="text-orange-600">Handyman</span> Service
{t("home.hero.title")}
<span className="text-orange-600"> {t("home.hero.titleHighlight")}</span>
</h1>
<p className="text-xl text-gray-700 mb-8">
Professional home repair and maintenance services. From small fixes to major renovations, we do it all with quality and care.
{t("home.hero.subtitle")}
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link
to="/contact"
className="inline-flex items-center justify-center bg-orange-600 text-white px-8 py-4 rounded-lg hover:bg-orange-700 transition-colors"
>
Get Free Quote
{t("home.hero.ctaPrimary")}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<a
@@ -74,14 +81,14 @@ export function Home() {
className="inline-flex items-center justify-center bg-white text-orange-600 px-8 py-4 rounded-lg border-2 border-orange-600 hover:bg-orange-50 transition-colors"
>
<Phone className="mr-2 h-5 w-5" />
(555) 123-4567
{t("home.hero.ctaSecondary")}
</a>
</div>
</div>
<div className="relative">
<ImageWithFallback
src="https://images.unsplash.com/photo-1620838883342-ca19cf8448d6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwcm9mZXNzaW9uYWwlMjBoYW5keW1hbiUyMHNlcnZpY2V8ZW58MXx8fHwxNzcxNTk4Nzk4fDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
alt="Professional handyman at work"
alt={t("home.hero.imageAlt")}
className="rounded-lg shadow-2xl w-full"
/>
</div>
@@ -107,14 +114,19 @@ export function Home() {
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">Our Services</h2>
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
{t("home.services.title")}
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
We offer a comprehensive range of handyman services to keep your home in perfect condition.
{t("home.services.subtitle")}
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{services.map((service, index) => (
<div key={index} className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow">
<div
key={index}
className="bg-white rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-shadow"
>
<ImageWithFallback
src={service.image}
alt={service.title}
@@ -127,7 +139,7 @@ export function Home() {
to="/services"
className="inline-flex items-center text-orange-600 hover:text-orange-700"
>
Learn More
{t("home.services.learnMore")}
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
@@ -139,7 +151,7 @@ export function Home() {
to="/services"
className="inline-flex items-center bg-orange-600 text-white px-8 py-3 rounded-lg hover:bg-orange-700 transition-colors"
>
View All Services
{t("home.services.viewAll")}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
@@ -152,36 +164,48 @@ export function Home() {
<div className="grid lg:grid-cols-2 gap-12 items-center">
<ImageWithFallback
src="https://images.unsplash.com/photo-1581783898377-1c85bf937427?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoYW5keW1hbiUyMGNhcnBlbnRlciUyMHRvb2xzfGVufDF8fHx8MTc3MTU5ODc5N3ww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
alt="Handyman tools"
alt={t("home.about.imageAlt")}
className="rounded-lg shadow-lg w-full"
/>
<div>
<h2 className="text-3xl md:text-4xl mb-6 text-gray-900">
Why Choose Lucris Handyman?
{t("home.about.title")}
</h2>
<p className="text-lg text-gray-600 mb-6">
With over 15 years of experience, we've become the most trusted handyman service in the area. Our team of skilled professionals is committed to delivering exceptional quality and customer satisfaction.
{t("home.about.subtitle")}
</p>
<ul className="space-y-4 mb-8">
<li className="flex items-start space-x-3">
<CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0 mt-0.5" />
<div>
<span className="text-gray-900">Experienced Professionals</span>
<p className="text-gray-600">Skilled craftsmen with years of expertise</p>
<span className="text-gray-900">
{t("home.about.points.experienced.title")}
</span>
<p className="text-gray-600">
{t("home.about.points.experienced.text")}
</p>
</div>
</li>
<li className="flex items-start space-x-3">
<CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0 mt-0.5" />
<div>
<span className="text-gray-900">Fair & Transparent Pricing</span>
<p className="text-gray-600">No hidden fees, upfront quotes</p>
<span className="text-gray-900">
{t("home.about.points.pricing.title")}
</span>
<p className="text-gray-600">
{t("home.about.points.pricing.text")}
</p>
</div>
</li>
<li className="flex items-start space-x-3">
<CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0 mt-0.5" />
<div>
<span className="text-gray-900">Quality Guaranteed</span>
<p className="text-gray-600">100% satisfaction or your money back</p>
<span className="text-gray-900">
{t("home.about.points.guarantee.title")}
</span>
<p className="text-gray-600">
{t("home.about.points.guarantee.text")}
</p>
</div>
</li>
</ul>
@@ -189,7 +213,7 @@ export function Home() {
to="/about"
className="inline-flex items-center text-orange-600 hover:text-orange-700 text-lg"
>
Learn More About Us
{t("home.about.learnMore")}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
@@ -201,9 +225,11 @@ export function Home() {
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">What Our Clients Say</h2>
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
{t("home.testimonials.title")}
</h2>
<p className="text-xl text-gray-600">
Don't just take our word for it - hear from our satisfied customers
{t("home.testimonials.subtitle")}
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
@@ -226,17 +252,17 @@ export function Home() {
<section className="py-16 bg-orange-600">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl mb-6 text-white">
Ready to Get Started?
{t("home.cta.title")}
</h2>
<p className="text-xl text-orange-100 mb-8">
Contact us today for a free quote and let us take care of your home repair needs!
{t("home.cta.subtitle")}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link
to="/contact"
className="inline-flex items-center justify-center bg-white text-orange-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
>
Get Free Quote
{t("home.cta.primary")}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<a
@@ -244,7 +270,7 @@ export function Home() {
className="inline-flex items-center justify-center bg-orange-700 text-white px-8 py-4 rounded-lg hover:bg-orange-800 transition-colors"
>
<Phone className="mr-2 h-5 w-5" />
Call Now
{t("home.cta.secondary")}
</a>
</div>
</div>
src/app/pages/Services.tsx
+98 -89
View File
@@ -1,106 +1,134 @@
import { Link } from "react-router";
import {
Wrench,
Droplet,
Zap,
PaintBucket,
Hammer,
Home,
Settings,
import {
Wrench,
Droplet,
Zap,
PaintBucket,
Hammer,
Home,
Settings,
CheckCircle,
ArrowRight
ArrowRight,
} from "lucide-react";
import { useTranslation } from "react-i18next";
export function Services() {
const { t } = useTranslation();
const services = [
{
icon: Droplet,
title: "Plumbing Services",
description: "Expert plumbing repairs and installations for your home.",
title: t("services.list.plumbing.title"),
description: t("services.list.plumbing.description"),
items: [
"Faucet & Fixture Repairs",
"Toilet Repairs & Replacement",
"Pipe Repairs & Leak Detection",
"Drain Cleaning",
"Water Heater Services",
"Garbage Disposal Installation",
t("services.list.plumbing.items.0"),
t("services.list.plumbing.items.1"),
t("services.list.plumbing.items.2"),
t("services.list.plumbing.items.3"),
t("services.list.plumbing.items.4"),
t("services.list.plumbing.items.5"),
],
},
{
icon: Zap,
title: "Electrical Work",
description: "Safe and reliable electrical services by licensed professionals.",
title: t("services.list.electrical.title"),
description: t("services.list.electrical.description"),
items: [
"Light Fixture Installation",
"Outlet & Switch Repair",
"Ceiling Fan Installation",
"Circuit Breaker Services",
"Home Rewiring",
"Electrical Safety Inspections",
t("services.list.electrical.items.0"),
t("services.list.electrical.items.1"),
t("services.list.electrical.items.2"),
t("services.list.electrical.items.3"),
t("services.list.electrical.items.4"),
t("services.list.electrical.items.5"),
],
},
{
icon: PaintBucket,
title: "Painting & Drywall",
description: "Transform your space with professional painting services.",
title: t("services.list.painting.title"),
description: t("services.list.painting.description"),
items: [
"Interior Painting",
"Exterior Painting",
"Drywall Installation",
"Drywall Repair",
"Texture Matching",
"Wallpaper Removal",
t("services.list.painting.items.0"),
t("services.list.painting.items.1"),
t("services.list.painting.items.2"),
t("services.list.painting.items.3"),
t("services.list.painting.items.4"),
t("services.list.painting.items.5"),
],
},
{
icon: Hammer,
title: "Carpentry",
description: "Custom carpentry work for all your woodworking needs.",
title: t("services.list.carpentry.title"),
description: t("services.list.carpentry.description"),
items: [
"Custom Shelving",
"Cabinet Installation",
"Door Installation & Repair",
"Crown Molding",
"Deck Repairs",
"Trim & Baseboards",
t("services.list.carpentry.items.0"),
t("services.list.carpentry.items.1"),
t("services.list.carpentry.items.2"),
t("services.list.carpentry.items.3"),
t("services.list.carpentry.items.4"),
t("services.list.carpentry.items.5"),
],
},
{
icon: Home,
title: "Home Repairs",
description: "General home repairs to keep your property in top shape.",
title: t("services.list.repairs.title"),
description: t("services.list.repairs.description"),
items: [
"Window Repairs",
"Door Repairs",
"Lock Installation",
"Weather Stripping",
"Caulking & Sealing",
"Minor Roof Repairs",
t("services.list.repairs.items.0"),
t("services.list.repairs.items.1"),
t("services.list.repairs.items.2"),
t("services.list.repairs.items.3"),
t("services.list.repairs.items.4"),
t("services.list.repairs.items.5"),
],
},
{
icon: Settings,
title: "Maintenance Services",
description: "Regular maintenance to prevent future problems.",
title: t("services.list.maintenance.title"),
description: t("services.list.maintenance.description"),
items: [
"Seasonal Home Inspections",
"Gutter Cleaning",
"Pressure Washing",
"HVAC Filter Changes",
"Preventive Maintenance",
"Home Safety Checks",
t("services.list.maintenance.items.0"),
t("services.list.maintenance.items.1"),
t("services.list.maintenance.items.2"),
t("services.list.maintenance.items.3"),
t("services.list.maintenance.items.4"),
t("services.list.maintenance.items.5"),
],
},
];
const process = [
{
step: "1",
title: t("services.process.items.0.title"),
description: t("services.process.items.0.description"),
},
{
step: "2",
title: t("services.process.items.1.title"),
description: t("services.process.items.1.description"),
},
{
step: "3",
title: t("services.process.items.2.title"),
description: t("services.process.items.2.description"),
},
{
step: "4",
title: t("services.process.items.3.title"),
description: t("services.process.items.3.description"),
},
];
return (
<div>
{/* Hero Section */}
<section className="bg-gradient-to-br from-orange-50 to-orange-100 py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">Our Services</h1>
<h1 className="text-4xl md:text-5xl mb-6 text-gray-900">
{t("services.hero.title")}
</h1>
<p className="text-xl text-gray-700 max-w-3xl mx-auto">
From minor repairs to major renovations, we offer comprehensive handyman services to meet all your home improvement needs.
{t("services.hero.subtitle")}
</p>
</div>
</section>
@@ -140,40 +168,21 @@ export function Services() {
<section className="py-16 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">How It Works</h2>
<h2 className="text-3xl md:text-4xl mb-4 text-gray-900">
{t("services.process.title")}
</h2>
<p className="text-xl text-gray-600">
Getting your home repairs done is easy with our simple process
{t("services.process.subtitle")}
</p>
</div>
<div className="grid md:grid-cols-4 gap-8">
{[
{
step: "1",
title: "Contact Us",
description: "Call or fill out our online form to describe your project",
},
{
step: "2",
title: "Get a Quote",
description: "Receive a fair, transparent estimate for the work",
},
{
step: "3",
title: "Schedule Service",
description: "Choose a convenient time that works for you",
},
{
step: "4",
title: "Job Complete",
description: "We complete the work with quality and care",
},
].map((process, index) => (
{process.map((step, index) => (
<div key={index} className="text-center">
<div className="bg-orange-600 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl mx-auto mb-4">
{process.step}
{step.step}
</div>
<h3 className="text-xl mb-2 text-gray-900">{process.title}</h3>
<p className="text-gray-600">{process.description}</p>
<h3 className="text-xl mb-2 text-gray-900">{step.title}</h3>
<p className="text-gray-600">{step.description}</p>
</div>
))}
</div>
@@ -184,16 +193,16 @@ export function Services() {
<section className="py-16 bg-orange-600">
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl mb-6 text-white">
Need a Handyman?
{t("services.cta.title")}
</h2>
<p className="text-xl text-orange-100 mb-8">
Contact us today for a free estimate on any of our services!
{t("services.cta.subtitle")}
</p>
<Link
to="/contact"
className="inline-flex items-center bg-white text-orange-600 px-8 py-4 rounded-lg hover:bg-gray-100 transition-colors"
>
Request a Quote
{t("services.cta.button")}
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>