Initial commit
This commit is contained in:
Dan Dobos
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user