Update src/app/page.tsx

Merge version_4 into main

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?_wi=1",      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?_wi=1",      imageAlt: "Completed bathroom renovation before and after"
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/part-male-construction-worker_329181-3734.jpg?_wi=1",      imageAlt: "Skilled handyman with professional tools"
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/modern-bathroom-with-big-mirror_1203-1497.jpg?_wi=1",      imageAlt: "Modern bathroom fixture installation"
+    },
+    {
+      imageSrc: "http://img.b2bpic.net/free-photo/father-daughter-kitchen-fathers-day_23-2148100499.jpg?_wi=1",      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?_wi=1",      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,27 +211,27 @@ 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={[
             {
-              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/top-view-hands-using-hammer-nails_23-2148640275.jpg?_wi=2",              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/builder-man-wearing-construction-uniform-security-helmet-inviting-come-closer-making-gesture-with-hand-being-positive-friendly-isolated-orange-wall_141793-14019.jpg?_wi=2",              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/part-male-construction-worker_329181-3734.jpg?_wi=2",              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/modern-bathroom-with-big-mirror_1203-1497.jpg?_wi=2",              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/father-daughter-kitchen-fathers-day_23-2148100499.jpg?_wi=2",              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"
+              imageSrc: "http://img.b2bpic.net/free-photo/outdoor-shot-logger-having-rest-open-air-after-cutting-trees_176532-14596.jpg?_wi=2",              imageAlt: "Professional deck building and repair"
             }
           ]}
           background={{ variant: "gradient-bars" }}
@@ -165,7 +246,7 @@ export default function LandingPage() {
           tag="Trusted Local Service"
           tagIcon={CheckCircle}
           tagAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/close-up-students-fist-bumping_23-2149127111.jpg"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AiAZWDji79X7atOCtPSK4CpOon/uploaded-1774131298313-1rm7b8oz.png"
           imageAlt="Professional handyman team working on home improvement project"
           useInvertedBackground={false}
           buttons={[
@@ -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>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
-  --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background: #080000;
+  --card: #1e0d0d;
+  --foreground: #ffe6e6;
+  --primary-cta: #ff7a7a;
+  --primary-cta-text: #080000;
+  --secondary-cta: #1e0909;
+  --secondary-cta-text: #ffe6e6;
+  --accent: #7b4242;
+  --background-accent: #65292c;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);