Update src/app/page.tsx

Merge version_12 into main

src/app/booking/page.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from 'react';
+import { Mail, Phone, MapPin, Calendar, Camera, MessageSquare } from 'lucide-react';
+
+export default function BookingPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    service: '',
+    date: '',
+    message: ''
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // Here you would typically send the form data to a server
+    console.log('Form submitted:', formData);
+    setSubmitted(true);
+    setTimeout(() => {
+      setFormData({ name: '', email: '', phone: '', service: '', date: '', message: '' });
+      setSubmitted(false);
+    }, 3000);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Misael's Photography"
+          navItems={[
+            { name: "Portfolio", id: "portfolio" },
+            { name: "About", id: "about" },
+            { name: "Book Now", id: "booking" },
+            { name: "Contact", id: "contact-us" }
+          ]}
+          button={{
+            text: "Follow on Instagram",            href: "https://instagram.com/misaelsphotography"
+          }}
+        />
+      </div>
+
+      <div id="booking" data-section="booking" className="w-full min-h-screen py-20 px-4">
+        <div className="max-w-2xl mx-auto">
+          <div className="mb-12">
+            <h1 className="text-5xl font-bold mb-4 text-foreground">Book Your Session</h1>
+            <p className="text-lg text-foreground/80">Let's create something beautiful together. Fill out the form below to request your photography session.</p>
+          </div>
+
+          {submitted ? (
+            <div className="bg-green-500/20 border border-green-500 rounded-lg p-8 text-center">
+              <h2 className="text-2xl font-bold text-foreground mb-2">Thank You!</h2>
+              <p className="text-foreground/80">Your booking request has been received. I'll get back to you soon to confirm the details.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6 bg-card rounded-lg p-8 shadow-lg">
+              {/* Contact Details Section */}
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
+                  <Mail className="w-5 h-5" />
+                  Contact Details
+                </h3>
+                
+                <div>
+                  <label htmlFor="name" className="block text-sm font-medium text-foreground mb-2">
+                    Full Name *
+                  </label>
+                  <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                    placeholder="Your full name"
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                    Email Address *
+                  </label>
+                  <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                    placeholder="your.email@example.com"
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="phone" className="block text-sm font-medium text-foreground mb-2">
+                    Phone Number *
+                  </label>
+                  <input
+                    type="tel"
+                    id="phone"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleChange}
+                    required
+                    placeholder="(555) 123-4567"
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+              </div>
+
+              {/* Service Selection Section */}
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
+                  <Camera className="w-5 h-5" />
+                  Service Selection
+                </h3>
+                
+                <div>
+                  <label htmlFor="service" className="block text-sm font-medium text-foreground mb-2">
+                    Select a Service *
+                  </label>
+                  <select
+                    id="service"
+                    name="service"
+                    value={formData.service}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/30 text-foreground focus:outline-none focus:border-primary-cta transition-colors"
+                  >
+                    <option value="" disabled>Choose a service...</option>
+                    <option value="studio-portraits">Studio Portraits</option>
+                    <option value="environmental-portraits">Environmental Portraits</option>
+                    <option value="lifestyle-session">Lifestyle Session</option>
+                    <option value="graduation-photos">Graduation Photos</option>
+                    <option value="cultural-moments">Cultural Moments</option>
+                    <option value="black-and-white">Black & White Session</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label htmlFor="date" className="block text-sm font-medium text-foreground mb-2">
+                    Preferred Session Date *
+                  </label>
+                  <input
+                    type="date"
+                    id="date"
+                    name="date"
+                    value={formData.date}
+                    onChange={handleChange}
+                    required
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/30 text-foreground focus:outline-none focus:border-primary-cta transition-colors"
+                  />
+                </div>
+              </div>
+
+              {/* Additional Details Section */}
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold text-foreground flex items-center gap-2">
+                  <MessageSquare className="w-5 h-5" />
+                  Additional Details
+                </h3>
+                
+                <div>
+                  <label htmlFor="message" className="block text-sm font-medium text-foreground mb-2">
+                    Tell me about your vision (optional)
+                  </label>
+                  <textarea
+                    id="message"
+                    name="message"
+                    value={formData.message}
+                    onChange={handleChange}
+                    placeholder="Describe your photography session ideas, preferred locations, style preferences, or any special requests..."
+                    rows={5}
+                    className="w-full px-4 py-2 rounded-lg bg-background border border-accent/30 text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta transition-colors resize-none"
+                  />
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <div className="flex gap-4">
+                <button
+                  type="submit"
+                  className="flex-1 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity"
+                >
+                  Submit Booking Request
+                </button>
+                <a
+                  href="/contact-us"
+                  className="flex-1 px-6 py-3 bg-secondary-cta text-secondary-cta-text border border-accent/30 rounded-lg font-semibold hover:opacity-90 transition-opacity text-center"
+                >
+                  Contact Us
+                </a>
+              </div>
+
+              <p className="text-xs text-foreground/60 text-center">
+                * Required fields. I'll respond within 24-48 hours to confirm your session details.
+              </p>
+            </form>
+          )}
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Contact Information",              items: [
+                { label: "Email: walkingforward01@gmail.com", href: "mailto:walkingforward01@gmail.com" },
+                { label: "Instagram: @misaelsphotography", href: "https://instagram.com/misaelsphotography" }
+              ]
+            },
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "Portfolio", href: "/portfolio" },
+                { label: "About", href: "/#about" }
+              ]
+            },
+            {
+              title: "Follow Me",              items: [
+                { label: "Instagram", href: "https://instagram.com/misaelsphotography" },
+                { label: "Direct Message", href: "https://instagram.com/misaelsphotography" }
+              ]
+            }
+          ]}
+          bottomLeftText="Misael's Photography © 2024. All rights reserved."
+          bottomRightText="Capturing moments, telling stories."
+          ariaLabel="Site footer with contact information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/contact-us/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Mail, Instagram } from 'lucide-react';
+
+export default function ContactUsPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Misael's Photography"
+          navItems={[
+            { name: "Portfolio", id: "portfolio" },
+            { name: "About", id: "about" },
+            { name: "Book Now", id: "booking" },
+            { name: "Contact", id: "contact-us" }
+          ]}
+          button={{
+            text: "Follow on Instagram",            href: "https://instagram.com/misaelsphotography"
+          }}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get In Touch"
+          title="Contact Me"
+          description="Reach out through Instagram or email to discuss your photography session and let's create something beautiful together."
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your email"
+          buttonText="Send Message"
+          termsText="By reaching out, you're agreeing to discuss your photography needs with me."
+          ariaLabel="Contact section with Instagram and email information"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Contact Information",              items: [
+                { label: "Email: walkingforward01@gmail.com", href: "mailto:walkingforward01@gmail.com" },
+                { label: "Instagram: @misaelsphotography", href: "https://instagram.com/misaelsphotography" }
+              ]
+            },
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "Portfolio", href: "/portfolio" },
+                { label: "Book Now", href: "/booking" }
+              ]
+            },
+            {
+              title: "Follow Me",              items: [
+                { label: "Instagram", href: "https://instagram.com/misaelsphotography" },
+                { label: "Direct Message", href: "https://instagram.com/misaelsphotography" }
+              ]
+            }
+          ]}
+          bottomLeftText="Misael's Photography © 2024. All rights reserved."
+          bottomRightText="Capturing moments, telling stories."
+          ariaLabel="Site footer with contact information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -2,12 +2,11 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Sparkles, Camera, Aperture, Film, Zap, Image } from 'lucide-react';
+import { Camera, Aperture, Film, Zap, Image } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -30,7 +29,7 @@ export default function LandingPage() {
             { name: "Portfolio", id: "portfolio" },
             { name: "About", id: "about" },
             { name: "Book Now", id: "booking" },
-            { name: "Contact", id: "contact" }
+            { name: "Contact", id: "contact-us" }
           ]}
           button={{
             text: "Follow on Instagram",            href: "https://instagram.com/misaelsphotography"
@@ -38,44 +37,12 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="hero" data-section="hero">
+      <div id="headline" data-section="headline" className="w-full py-32 px-4 bg-gradient-to-b from-primary-cta/10 to-transparent">
-        <HeroBillboardTestimonial
+        <div className="max-w-4xl mx-auto text-center">
-          title="Capture the Moment"
+          <h1 className="text-6xl md:text-7xl font-bold text-foreground mb-4">
-          description="Tell Your Story"
+            MISAELS PHOTOGRAPHY
-          background={{ variant: "plain" }}
+          </h1>
-          testimonials={[
+        </div>
-            {
-              name: "Sarah Chen",              handle: "@clients_loved",              testimonial: "Misael captured the essence of my graduation day perfectly. Every shot tells a story.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",              imageAlt: "happy client portrait smiling professional headshot"
-            },
-            {
-              name: "Michael Torres",              handle: "@portrait_fan",              testimonial: "Professional, creative, and absolutely worth every moment. Highly recommended.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-posing_23-2148563424.jpg",              imageAlt: "client portrait man professional headshot smiling"
-            },
-            {
-              name: "Emma Rodriguez",              handle: "@event_planner",              testimonial: "The attention to detail and artistic vision is unmatched. Simply incredible.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-sitting-chair-office_1303-21028.jpg",              imageAlt: "client testimonial portrait woman professional smiling"
-            },
-            {
-              name: "David Kim",              handle: "@family_photos",              testimonial: "Best decision for our family portraits. Timeless and beautiful.",              rating: 5,
-              imageSrc: "http://img.b2bpic.net/free-photo/successful-senior-businessman-standing-window_1262-3120.jpg",              imageAlt: "client portrait man professional headshot satisfied"
-            }
-          ]}
-          testimonialRotationInterval={5000}
-          useInvertedBackground={false}
-          tag="Premium Photography"
-          tagIcon={Sparkles}
-          tagAnimation="slide-up"
-          buttons={[
-            { text: "Book Your Session Now", href: "#booking" },
-            { text: "View Portfolio", href: "#portfolio" }
-          ]}
-          buttonAnimation="slide-up"
-          imageSrc="http://img.b2bpic.net/free-photo/man-his-professional-photography-studio_23-2149033378.jpg"
-          imageAlt="professional portrait photographer cinematic lighting"
-          mediaAnimation="blur-reveal"
-          ariaLabel="Photography hero section with cinematic background"
-        />
       </div>
 
       <div id="about" data-section="about">
@@ -96,14 +63,14 @@ export default function LandingPage() {
               title: "Real Moments Matter",              description: "Focusing on authentic, unscripted moments that tell the true story of your event.",              icon: Zap
             }
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/studio-portrait-serious-plump-male-eyeglasses-grey-background_613910-13831.jpg"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930004164-z4y07pms.jpg"
           imageAlt="photographer portrait professional headshot studio"
           mediaAnimation="slide-up"
           imagePosition="right"
           textboxLayout="default"
           useInvertedBackground={false}
           buttons={[
-            { text: "View My Work", href: "#portfolio" }
+            { text: "View My Work", href: "/portfolio" }
           ]}
           buttonAnimation="slide-up"
           ariaLabel="About section with photographer bio"
@@ -122,33 +89,33 @@ export default function LandingPage() {
           products={[
             {
               id: "portrait-1",              brand: "Portraits",              name: "Studio Portraits",              price: "Professional",              rating: 5,
-              reviewCount: "Premium",              imageSrc: "http://img.b2bpic.net/free-photo/creative-product-photographer-studio_23-2148970254.jpg",              imageAlt: "professional studio portrait lighting setup dark background"
+              reviewCount: "Premium",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930521926-r1of9l15.jpg",              imageAlt: "professional studio portrait lighting setup dark background"
             },
             {
               id: "portrait-2",              brand: "Portraits",              name: "Environmental Portraits",              price: "Story-Driven",              rating: 5,
-              reviewCount: "Authentic",              imageSrc: "http://img.b2bpic.net/free-photo/woman-gardner-greenhouse_1303-14078.jpg",              imageAlt: "environmental portrait outdoor professional photography"
+              reviewCount: "Authentic",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930318289-ohch7oj5.jpg",              imageAlt: "environmental portrait outdoor professional photography"
             },
             {
               id: "lifestyle-1",              brand: "Lifestyle",              name: "Lifestyle Sessions",              price: "Candid",              rating: 5,
-              reviewCount: "Natural",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-holding-flowers_23-2149647874.jpg",              imageAlt: "lifestyle photography candid moments natural lighting"
+              reviewCount: "Natural",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930533701-l9gcnazp.jpg",              imageAlt: "lifestyle photography candid moments natural lighting"
             },
             {
               id: "lifestyle-2",              brand: "Lifestyle",              name: "Cultural Moments",              price: "Vibrant",              rating: 5,
-              reviewCount: "Diverse",              imageSrc: "http://img.b2bpic.net/free-photo/friends-spending-some-quality-time-together_23-2149034103.jpg",              imageAlt: "cultural photography diverse people moments authentic"
+              reviewCount: "Diverse",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930368710-ts06xwgu.jpg",              imageAlt: "cultural photography diverse people moments authentic"
             },
             {
               id: "graduation-1",              brand: "Graduation",              name: "Graduation Photos",              price: "Celebratory",              rating: 5,
-              reviewCount: "Memorable",              imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-standing-with-crossed-arms-graduate-uniform-looking-pensive_176474-82634.jpg",              imageAlt: "graduation photography professional portrait session cap gown"
+              reviewCount: "Memorable",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930381028-63kwn8sl.jpg",              imageAlt: "graduation photography professional portrait session cap gown"
             },
             {
               id: "bw-1",              brand: "Black & White",              name: "Timeless Black & White",              price: "Classic",              rating: 5,
-              reviewCount: "Elegant",              imageSrc: "http://img.b2bpic.net/free-photo/attractive-caucasian-blonde-female-white-shirt-posing-brown-background_181624-46502.jpg",              imageAlt: "black and white portrait photography professional timeless"
+              reviewCount: "Elegant",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773930392089-0pxfz0bx.jpg",              imageAlt: "black and white portrait photography professional timeless"
             }
           ]}
           gridVariant="bento-grid"
           animationType="blur-reveal"
           buttons={[
-            { text: "Book a Session", href: "#booking" }
+            { text: "Book a Session", href: "/booking" }
           ]}
           buttonAnimation="slide-up"
           ariaLabel="Portfolio gallery grid section"
@@ -161,7 +128,8 @@ export default function LandingPage() {
           background={{ variant: "plain" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Request Booking", href: "mailto:walkingforward01@gmail.com?subject=Photography%20Session%20Request" }
+            { text: "Book Now", href: "/booking" },
+            { text: "Contact Us", href: "/contact-us" }
           ]}
           animationType="entrance-slide"
           ariaLabel="Booking section call to action"
@@ -179,9 +147,9 @@ export default function LandingPage() {
             },
             {
               title: "Quick Links",              items: [
-                { label: "Portfolio", href: "#portfolio" },
+                { label: "Portfolio", href: "/portfolio" },
                 { label: "About", href: "#about" },
-                { label: "Book Now", href: "#booking" }
+                { label: "Book Now", href: "/booking" }
               ]
             },
             {
@@ -198,4 +166,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from 'react';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+
+const portfolioImages = [
+  {
+    id: 1,
+    src: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773929743067-11gh4u5h.jpg',
+    alt: 'Portfolio image 1'
+  },
+  {
+    id: 2,
+    src: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773929743068-tlxnossh.jpg',
+    alt: 'Portfolio image 2'
+  },
+  {
+    id: 3,
+    src: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773929743068-vld55ryg.jpg',
+    alt: 'Portfolio image 3'
+  },
+  {
+    id: 4,
+    src: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773929743068-jkx2y095.jpg',
+    alt: 'Portfolio image 4'
+  },
+  {
+    id: 5,
+    src: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AQ3abHj7nJoV9DleXcQnubKTBh/uploaded-1773929743068-x0adnlrw.jpg',
+    alt: 'Portfolio image 5'
+  }
+];
+
+export default function PortfolioPage() {
+  const [selectedImageIndex, setSelectedImageIndex] = useState<number | null>(null);
+
+  const handlePrevious = () => {
+    if (selectedImageIndex !== null) {
+      setSelectedImageIndex(
+        selectedImageIndex === 0 ? portfolioImages.length - 1 : selectedImageIndex - 1
+      );
+    }
+  };
+
+  const handleNext = () => {
+    if (selectedImageIndex !== null) {
+      setSelectedImageIndex(
+        selectedImageIndex === portfolioImages.length - 1 ? 0 : selectedImageIndex + 1
+      );
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="inset"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Misael's Photography"
+          navItems={[
+            { name: "Portfolio", id: "portfolio" },
+            { name: "About", id: "about" },
+            { name: "Book Now", id: "booking" },
+            { name: "Contact", id: "contact-us" }
+          ]}
+          button={{
+            text: "Follow on Instagram",            href: "https://instagram.com/misaelsphotography"
+          }}
+        />
+      </div>
+
+      <div id="portfolio" data-section="portfolio" className="w-full min-h-screen py-20 px-4">
+        <div className="max-w-6xl mx-auto">
+          <div className="mb-12">
+            <h1 className="text-5xl font-bold mb-4 text-foreground">Portfolio Gallery</h1>
+            <p className="text-lg text-foreground/80">Click on any image to view it in full detail</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {portfolioImages.map((image, index) => (
+              <div
+                key={image.id}
+                onClick={() => setSelectedImageIndex(index)}
+                className="relative overflow-hidden rounded-lg cursor-pointer group h-64 md:h-72"
+              >
+                <img
+                  src={image.src}
+                  alt={image.alt}
+                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                />
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors duration-300 flex items-center justify-center">
+                  <div className="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    <div className="bg-white rounded-full p-3">
+                      <svg className="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+                        <path fillRule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clipRule="evenodd" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {selectedImageIndex !== null && (
+        <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4">
+          <div className="relative w-full h-full flex items-center justify-center">
+            <button
+              onClick={() => setSelectedImageIndex(null)}
+              className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
+              aria-label="Close lightbox"
+            >
+              <X className="w-6 h-6 text-black" />
+            </button>
+
+            <button
+              onClick={handlePrevious}
+              className="absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
+              aria-label="Previous image"
+            >
+              <ChevronLeft className="w-6 h-6 text-black" />
+            </button>
+
+            <div className="max-w-4xl max-h-full flex items-center justify-center">
+              <img
+                src={portfolioImages[selectedImageIndex].src}
+                alt={portfolioImages[selectedImageIndex].alt}
+                className="max-w-full max-h-full object-contain"
+              />
+            </div>
+
+            <button
+              onClick={handleNext}
+              className="absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
+              aria-label="Next image"
+            >
+              <ChevronRight className="w-6 h-6 text-black" />
+            </button>
+
+            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-sm rounded-full px-4 py-2 text-white">
+              {selectedImageIndex + 1} / {portfolioImages.length}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Contact Information",              items: [
+                { label: "Email: walkingforward01@gmail.com", href: "mailto:walkingforward01@gmail.com" },
+                { label: "Instagram: @misaelsphotography", href: "https://instagram.com/misaelsphotography" }
+              ]
+            },
+            {
+              title: "Quick Links",              items: [
+                { label: "Home", href: "/" },
+                { label: "Portfolio", href: "/portfolio" },
+                { label: "Book Now", href: "/booking" }
+              ]
+            },
+            {
+              title: "Follow Me",              items: [
+                { label: "Instagram", href: "https://instagram.com/misaelsphotography" },
+                { label: "Direct Message", href: "https://instagram.com/misaelsphotography" }
+              ]
+            }
+          ]}
+          bottomLeftText="Misael's Photography © 2024. All rights reserved."
+          bottomRightText="Capturing moments, telling stories."
+          ariaLabel="Site footer with contact information"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}