bender/f2144a83-ab23-43db-b65e-231c23bca7c0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_5 into main #9

Merged
bender merged 1 commits from version_5 into main 2026-03-21 19:58:53 +00:00
Conversation 0 Commits 1 Files Changed 1 +91 -10
1 changed files with 91 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/app/page.tsx
View File

@@ -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 (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -121,6 +160,48 @@ export default function LandingPage() {
</div>
)}
{showGallery && (
<div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
<div className="relative max-w-4xl w-full">
<button
onClick={handleCloseGallery}
className="absolute top-4 right-4 text-white bg-black bg-opacity-50 rounded-full p-2 hover:bg-opacity-75 transition z-10"
aria-label="Close gallery"
>
<X size={24} />
</button>
<div className="relative w-full bg-black rounded-lg overflow-hidden">
<img
src={galleryItems[galleryIndex].imageSrc}
alt={galleryItems[galleryIndex].imageAlt}
className="w-full h-auto max-h-96 object-cover"
/>
</div>
<div className="flex items-center justify-between mt-4">
<button
onClick={handlePrevGallery}
className="bg-primary-cta text-white px-4 py-2 rounded-lg hover:opacity-90 transition"
aria-label="Previous image"
>
← Previous
</button>
<span className="text-foreground font-medium">
{galleryIndex + 1} / {galleryItems.length}
</span>
<button
onClick={handleNextGallery}
className="bg-primary-cta text-white px-4 py-2 rounded-lg hover:opacity-90 transition"
aria-label="Next image"
>
Next →
</button>
</div>
</div>
</div>
)}
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Reliable Handyman Services You Can Trust"
@@ -130,7 +211,7 @@ export default function LandingPage() {
tagAnimation="slide-up"
buttons={[
{ text: "Get a Free Quote", onClick: handleHeroButtonClick },
{ text: "View Our Work", href: "#gallery" }
{ text: "View Our Work", onClick: handleOpenGallery }
]}
buttonAnimation="slide-up"
mediaItems={[
@@ -229,22 +310,22 @@ export default function LandingPage() {
gridVariant="bento-grid"
products={[
{
id: "bathroom-1", name: "Bathroom Renovation", price: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/oval-bathtub-bowl-close-up-green-bathroom-minimal-aesthetic_169016-69646.jpg", imageAlt: "Bathroom before renovation with dated fixtures"
id: "bathroom-1", name: "Bathroom Renovation", price: "Before & After", imageSrc: "http://img.b2bpic.net/free-photo/oval-bathtub-bowl-close-up-green-bathroom-minimal-aesthetic_169016-69646.jpg", imageAlt: "Bathroom before renovation with dated fixtures", onProductClick: handleOpenGallery
},
{
id: "bathroom-2", name: "Bathroom Renovation", price: "Complete Remodel", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954766.jpg", imageAlt: "Completed bathroom with modern fixtures and design"
id: "bathroom-2", name: "Bathroom Renovation", price: "Complete Remodel", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954766.jpg", imageAlt: "Completed bathroom with modern fixtures and design", onProductClick: handleOpenGallery
},
{
id: "kitchen-1", name: "Kitchen Update", price: "Before Transformation", imageSrc: "http://img.b2bpic.net/free-photo/contrast-wood-stone-modern-furniture-premium-textures_169016-71185.jpg", imageAlt: "Kitchen before upgrade with old cabinets"
id: "kitchen-1", name: "Kitchen Update", price: "Before Transformation", imageSrc: "http://img.b2bpic.net/free-photo/contrast-wood-stone-modern-furniture-premium-textures_169016-71185.jpg", imageAlt: "Kitchen before upgrade with old cabinets", onProductClick: handleOpenGallery
},
{
id: "kitchen-2", name: "Kitchen Update", price: "After Completion", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-interior-with-stainless-steel-appliances-wood-cabinets_9975-33042.jpg", imageAlt: "New kitchen with upgraded cabinets and countertops"
id: "kitchen-2", name: "Kitchen Update", price: "After Completion", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-interior-with-stainless-steel-appliances-wood-cabinets_9975-33042.jpg", imageAlt: "New kitchen with upgraded cabinets and countertops", onProductClick: handleOpenGallery
},
{
id: "deck-1", name: "Deck Reconstruction", price: "Before Repair", imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-with-dog-garden_23-2148060111.jpg", imageAlt: "Weathered deck boards requiring repair"
id: "deck-1", name: "Deck Reconstruction", price: "Before Repair", imageSrc: "http://img.b2bpic.net/free-photo/senior-couple-with-dog-garden_23-2148060111.jpg", imageAlt: "Weathered deck boards requiring repair", onProductClick: handleOpenGallery
},
{
id: "deck-2", name: "Deck Reconstruction", price: "New Installation", imageSrc: "http://img.b2bpic.net/free-photo/family-playing-their-caravan_23-2148659470.jpg", imageAlt: "Beautiful new deck with professional staining"
id: "deck-2", name: "Deck Reconstruction", price: "New Installation", imageSrc: "http://img.b2bpic.net/free-photo/family-playing-their-caravan_23-2148659470.jpg", imageAlt: "Beautiful new deck with professional staining", onProductClick: handleOpenGallery
}
]}
ariaLabel="Project gallery showcasing before and after transformations"
@@ -388,4 +469,4 @@ export default function LandingPage() {
</div>
</ThemeProvider>
);
}
}