diff --git a/src/app/page.tsx b/src/app/page.tsx index 5374d53..3beca7a 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,7 +10,7 @@ import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo"; import ContactFaq from "@/components/sections/contact/ContactFaq"; import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal"; -import { Hammer, CheckCircle, Wrench, Droplet, Lightbulb, Drill, PaintBucket, Home, Image, Star, Phone } from "lucide-react"; +import { Hammer, CheckCircle, Wrench, Droplet, Lightbulb, Drill, PaintBucket, Home, Image, Star, Phone, X } from "lucide-react"; import { useState } from "react"; export default function LandingPage() { @@ -18,10 +18,32 @@ export default function LandingPage() { const [formData, setFormData] = useState({ phone: "", email: "", address: "" }); + const [showGallery, setShowGallery] = useState(false); + const [galleryIndex, setGalleryIndex] = useState(0); + + const galleryItems = [ + { + imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-using-hammer-nails_23-2148640275.jpg", imageAlt: "Professional handyman performing quality repair work" + }, + { + imageSrc: "http://img.b2bpic.net/free-photo/builder-man-wearing-construction-uniform-security-helmet-inviting-come-closer-making-gesture-with-hand-being-positive-friendly-isolated-orange-wall_141793-14019.jpg", imageAlt: "Completed bathroom renovation before and after" + }, + { + imageSrc: "http://img.b2bpic.net/free-photo/part-male-construction-worker_329181-3734.jpg", imageAlt: "Skilled handyman with professional tools" + }, + { + imageSrc: "http://img.b2bpic.net/free-photo/modern-bathroom-with-big-mirror_1203-1497.jpg", imageAlt: "Modern bathroom fixture installation" + }, + { + imageSrc: "http://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100499.jpg", imageAlt: "Kitchen countertop and cabinet repair" + }, + { + imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg", imageAlt: "Professional deck building and repair" + } + ]; const handleFormSubmit = (e: React.FormEvent) => { e.preventDefault(); - // Handle form submission here console.log("Form submitted:", formData); setShowContactForm(false); setFormData({ phone: "", email: "", address: "" }); @@ -31,6 +53,23 @@ export default function LandingPage() { setShowContactForm(true); }; + const handleOpenGallery = () => { + setShowGallery(true); + setGalleryIndex(0); + }; + + const handleNextGallery = () => { + setGalleryIndex((prev) => (prev + 1) % galleryItems.length); + }; + + const handlePrevGallery = () => { + setGalleryIndex((prev) => (prev - 1 + galleryItems.length) % galleryItems.length); + }; + + const handleCloseGallery = () => { + setShowGallery(false); + }; + return ( )} + {showGallery && ( +
+
+ + +
+ {galleryItems[galleryIndex].imageAlt} +
+ +
+ + + {galleryIndex + 1} / {galleryItems.length} + + +
+
+
+ )} +
); -} +} \ No newline at end of file