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

Initial commit

Browse Source
This commit is contained in:
Dan Dobos
2026-02-20 16:22:48 +01:00
commit 77023919df
73 changed files with 12378 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/About.tsx
+180
View File
@@ -0,0 +1,180 @@
import { CheckCircle, Award, Users, Clock } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
export function About() {
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%" },
];
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.",
},
{
icon: Award,
title: "Professional Excellence",
description: "Our team consists of skilled, licensed professionals with years of experience.",
},
{
icon: Users,
title: "Customer Focus",
description: "Your satisfaction is our priority. We listen to your needs and deliver results.",
},
{
icon: Clock,
title: "Reliable Service",
description: "We show up on time, every time. Count on us to be there when you need us.",
},
];
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 ProFix Handyman</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
</p>
</div>
</section>
{/* Story Section */}
<section className="py-16 bg-white">
<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>
<p className="text-lg text-gray-700 mb-4">
ProFix 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.
</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.
</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.
</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"
className="rounded-lg shadow-lg w-full"
/>
</div>
</div>
</section>
{/* Stats Section */}
<section className="py-16 bg-orange-600">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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-orange-100">{stat.label}</div>
</div>
))}
</div>
</div>
</section>
{/* Values Section */}
<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>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
These core principles guide everything we do
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{values.map((value, index) => {
const Icon = value.icon;
return (
<div key={index} className="bg-white rounded-lg p-6 shadow-lg text-center">
<div className="bg-orange-100 w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon className="h-7 w-7 text-orange-600" />
</div>
<h3 className="text-xl mb-3 text-gray-900">{value.title}</h3>
<p className="text-gray-600">{value.description}</p>
</div>
);
})}
</div>
</div>
</section>
{/* Team Section */}
<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>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
Skilled professionals dedicated to your home's care
</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) => (
<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" />
</div>
<h3 className="text-xl mb-1 text-gray-900">{member.name}</h3>
<p className="text-orange-600 mb-3">{member.role}</p>
<p className="text-gray-600">{member.description}</p>
</div>
))}
</div>
</div>
</section>
{/* Certifications Section */}
<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>
<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
</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) => (
<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>
</div>
))}
</div>
</div>
</section>
</div>
);
}
src/app/pages/Contact.tsx
+274
View File
@@ -0,0 +1,274 @@
import { useState } from "react";
import { MapPin, Phone, Mail, Clock, Send } from "lucide-react";
export function Contact() {
const [formData, setFormData] = useState({
name: "",
email: "",
phone: "",
service: "",
message: "",
});
const [formSubmitted, setFormSubmitted] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
});
};
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({
name: "",
email: "",
phone: "",
service: "",
message: "",
});
}, 3000);
};
const services = [
"General Repair",
"Plumbing",
"Electrical",
"Painting",
"Carpentry",
"Home Maintenance",
"Other",
];
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">Contact Us</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
</p>
</div>
</section>
{/* Contact Info & Form Section */}
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-5 gap-12">
{/* 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>
<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.
</p>
</div>
<div className="space-y-6">
<div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg">
<Phone className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">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>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg">
<Mail className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Email</h3>
<a href="mailto:info@profix.com" className="text-orange-600 hover:text-orange-700">
info@profix.com
</a>
<p className="text-gray-600 text-sm mt-1">We'll respond within 24 hours</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg">
<MapPin className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Address</h3>
<p className="text-gray-600">
123 Main Street<br />
New York, NY 10001
</p>
</div>
</div>
<div className="flex items-start space-x-4">
<div className="bg-orange-100 p-3 rounded-lg">
<Clock className="h-6 w-6 text-orange-600" />
</div>
<div>
<h3 className="text-gray-900 mb-1">Business 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
</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>
<p className="text-gray-600 mb-3">
For urgent repairs outside business hours, call our emergency line:
</p>
<a href="tel:5559876543" className="text-xl text-orange-600 hover:text-orange-700">
(555) 987-6543
</a>
</div>
</div>
{/* 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>
{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>
<p className="text-green-800">
Your message has been received. We'll get back to you within 24 hours.
</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid md:grid-cols-2 gap-6">
<div>
<label htmlFor="name" className="block text-sm text-gray-700 mb-2">
Full Name *
</label>
<input
type="text"
id="name"
name="name"
required
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"
/>
</div>
<div>
<label htmlFor="phone" className="block text-sm text-gray-700 mb-2">
Phone Number *
</label>
<input
type="tel"
id="phone"
name="phone"
required
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"
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm text-gray-700 mb-2">
Email Address *
</label>
<input
type="email"
id="email"
name="email"
required
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"
/>
</div>
<div>
<label htmlFor="service" className="block text-sm text-gray-700 mb-2">
Service Needed *
</label>
<select
id="service"
name="service"
required
value={formData.service}
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>
{services.map((service) => (
<option key={service} value={service}>
{service}
</option>
))}
</select>
</div>
<div>
<label htmlFor="message" className="block text-sm text-gray-700 mb-2">
Project Details *
</label>
<textarea
id="message"
name="message"
required
value={formData.message}
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..."
/>
</div>
<button
type="submit"
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
</button>
<p className="text-sm text-gray-600 text-center">
By submitting this form, you agree to our terms and privacy policy.
</p>
</form>
)}
</div>
</div>
</div>
</section>
{/* 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>
<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>
</div>
</div>
</section>
</div>
);
}
src/app/pages/Gallery.tsx
+139
View File
@@ -0,0 +1,139 @@
import { useState } from "react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
export function Gallery() {
const [selectedCategory, setSelectedCategory] = useState("All");
const categories = ["All", "Plumbing", "Electrical", "Painting", "Carpentry", "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: "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: "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: "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: "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: "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",
},
];
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>
<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
</p>
</div>
</section>
{/* Filter Section */}
<section className="py-8 bg-white border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-wrap gap-3 justify-center">
{categories.map((category) => (
<button
key={category}
onClick={() => setSelectedCategory(category)}
className={`px-6 py-2 rounded-full transition-colors ${
selectedCategory === category
? "bg-orange-600 text-white"
: "bg-gray-100 text-gray-700 hover:bg-gray-200"
}`}
>
{category}
</button>
))}
</div>
</div>
</section>
{/* Gallery Grid */}
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredProjects.map((project, index) => (
<div
key={index}
className="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-2xl transition-shadow cursor-pointer"
>
<ImageWithFallback
src={project.image}
alt={project.title}
className="w-full h-72 object-cover group-hover:scale-110 transition-transform duration-300"
/>
<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}
</div>
<h3 className="text-xl mb-2">{project.title}</h3>
<p className="text-sm text-gray-200">{project.description}</p>
</div>
</div>
</div>
))}
</div>
{filteredProjects.length === 0 && (
<div className="text-center py-12">
<p className="text-xl text-gray-600">No projects found in this category.</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
+254
View File
@@ -0,0 +1,254 @@
import { Link } from "react-router";
import { CheckCircle, Phone, ArrowRight, Star } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
export function Home() {
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: "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: "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",
},
];
const features = [
"Licensed & Insured",
"Same-Day Service",
"Quality Workmanship",
"Affordable Pricing",
"100% Satisfaction Guarantee",
"Emergency Services Available",
];
const testimonials = [
{
name: "Sarah Johnson",
text: "Outstanding service! They fixed our plumbing issue quickly and professionally. Highly recommend!",
rating: 5,
},
{
name: "Mike Thompson",
text: "ProFix is my go-to for all home repairs. Always reliable, fair pricing, and excellent work.",
rating: 5,
},
{
name: "Emily Davis",
text: "They remodeled our bathroom and the results exceeded our expectations. True professionals!",
rating: 5,
},
];
return (
<div>
{/* Hero Section */}
<section className="relative bg-gradient-to-br from-orange-50 to-orange-100 overflow-hidden">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
<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
</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.
</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
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<a
href="tel:5551234567"
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
</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"
className="rounded-lg shadow-2xl w-full"
/>
</div>
</div>
</div>
</section>
{/* Features Section */}
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
{features.map((feature, index) => (
<div key={index} className="flex items-center space-x-3">
<CheckCircle className="h-6 w-6 text-orange-600 flex-shrink-0" />
<span className="text-gray-700">{feature}</span>
</div>
))}
</div>
</div>
</section>
{/* Services Section */}
<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>
<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.
</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">
<ImageWithFallback
src={service.image}
alt={service.title}
className="w-full h-48 object-cover"
/>
<div className="p-6">
<h3 className="text-xl mb-2 text-gray-900">{service.title}</h3>
<p className="text-gray-600 mb-4">{service.description}</p>
<Link
to="/services"
className="inline-flex items-center text-orange-600 hover:text-orange-700"
>
Learn More
<ArrowRight className="ml-2 h-4 w-4" />
</Link>
</div>
</div>
))}
</div>
<div className="text-center mt-12">
<Link
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
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</div>
</section>
{/* About Preview Section */}
<section className="py-16 bg-white">
<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">
<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"
className="rounded-lg shadow-lg w-full"
/>
<div>
<h2 className="text-3xl md:text-4xl mb-6 text-gray-900">
Why Choose ProFix Handyman?
</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.
</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>
</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>
</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>
</div>
</li>
</ul>
<Link
to="/about"
className="inline-flex items-center text-orange-600 hover:text-orange-700 text-lg"
>
Learn More About Us
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</div>
</div>
</section>
{/* Testimonials Section */}
<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>
<p className="text-xl text-gray-600">
Don't just take our word for it - hear from our satisfied customers
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{testimonials.map((testimonial, index) => (
<div key={index} className="bg-white rounded-lg p-6 shadow-lg">
<div className="flex mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
))}
</div>
<p className="text-gray-700 mb-4">"{testimonial.text}"</p>
<p className="text-gray-900">- {testimonial.name}</p>
</div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<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?
</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!
</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
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
<a
href="tel:5551234567"
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
</a>
</div>
</div>
</section>
</div>
);
}
src/app/pages/Services.tsx
+203
View File
@@ -0,0 +1,203 @@
import { Link } from "react-router";
import {
Wrench,
Droplet,
Zap,
PaintBucket,
Hammer,
Home,
Settings,
CheckCircle,
ArrowRight
} from "lucide-react";
export function Services() {
const services = [
{
icon: Droplet,
title: "Plumbing Services",
description: "Expert plumbing repairs and installations for your home.",
items: [
"Faucet & Fixture Repairs",
"Toilet Repairs & Replacement",
"Pipe Repairs & Leak Detection",
"Drain Cleaning",
"Water Heater Services",
"Garbage Disposal Installation",
],
},
{
icon: Zap,
title: "Electrical Work",
description: "Safe and reliable electrical services by licensed professionals.",
items: [
"Light Fixture Installation",
"Outlet & Switch Repair",
"Ceiling Fan Installation",
"Circuit Breaker Services",
"Home Rewiring",
"Electrical Safety Inspections",
],
},
{
icon: PaintBucket,
title: "Painting & Drywall",
description: "Transform your space with professional painting services.",
items: [
"Interior Painting",
"Exterior Painting",
"Drywall Installation",
"Drywall Repair",
"Texture Matching",
"Wallpaper Removal",
],
},
{
icon: Hammer,
title: "Carpentry",
description: "Custom carpentry work for all your woodworking needs.",
items: [
"Custom Shelving",
"Cabinet Installation",
"Door Installation & Repair",
"Crown Molding",
"Deck Repairs",
"Trim & Baseboards",
],
},
{
icon: Home,
title: "Home Repairs",
description: "General home repairs to keep your property in top shape.",
items: [
"Window Repairs",
"Door Repairs",
"Lock Installation",
"Weather Stripping",
"Caulking & Sealing",
"Minor Roof Repairs",
],
},
{
icon: Settings,
title: "Maintenance Services",
description: "Regular maintenance to prevent future problems.",
items: [
"Seasonal Home Inspections",
"Gutter Cleaning",
"Pressure Washing",
"HVAC Filter Changes",
"Preventive Maintenance",
"Home Safety Checks",
],
},
];
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>
<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.
</p>
</div>
</section>
{/* Services Grid */}
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{services.map((service, index) => {
const Icon = service.icon;
return (
<div
key={index}
className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-xl transition-shadow"
>
<div className="bg-orange-100 w-14 h-14 rounded-lg flex items-center justify-center mb-4">
<Icon className="h-7 w-7 text-orange-600" />
</div>
<h3 className="text-xl mb-3 text-gray-900">{service.title}</h3>
<p className="text-gray-600 mb-4">{service.description}</p>
<ul className="space-y-2">
{service.items.map((item, itemIndex) => (
<li key={itemIndex} className="flex items-start space-x-2">
<CheckCircle className="h-5 w-5 text-orange-600 flex-shrink-0 mt-0.5" />
<span className="text-gray-700">{item}</span>
</li>
))}
</ul>
</div>
);
})}
</div>
</div>
</section>
{/* Process Section */}
<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>
<p className="text-xl text-gray-600">
Getting your home repairs done is easy with our simple process
</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) => (
<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}
</div>
<h3 className="text-xl mb-2 text-gray-900">{process.title}</h3>
<p className="text-gray-600">{process.description}</p>
</div>
))}
</div>
</div>
</section>
{/* CTA Section */}
<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?
</h2>
<p className="text-xl text-orange-100 mb-8">
Contact us today for a free estimate on any of our services!
</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
<ArrowRight className="ml-2 h-5 w-5" />
</Link>
</div>
</section>
</div>
);
}