Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,10 +4,12 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Package } from 'lucide-react';
 
 export default function SitePage() {
   return (
@@ -27,9 +29,10 @@ export default function SitePage() {
         <NavbarLayoutFloatingOverlay
           navItems={[
             { name: "Moments", id: "features" },
+            { name: "Products", id: "products" },
             { name: "About", id: "about" },
             { name: "Stories", id: "testimonials" },
-            { name: "Contact", id: "contact" },
+            { name: "Contact", id: "contact" }
           ]}
           brandName="In My Life"
           button={{ text: "View Gallery", href: "#gallery" }}
@@ -45,7 +48,7 @@ export default function SitePage() {
           background={{ variant: "radial-gradient" }}
           buttons={[
             { text: "Explore Gallery", href: "#gallery" },
-            { text: "Our Story", href: "#about" },
+            { text: "Our Story", href: "#about" }
           ]}
           carouselItems={[
             { id: "hero-1", imageSrc: "http://img.b2bpic.net/free-photo/skjolden-norway-may-16-2023-feet_58702-16353.jpg", imageAlt: "Golden hour landscape" },
@@ -53,7 +56,7 @@ export default function SitePage() {
             { id: "hero-3", imageSrc: "http://img.b2bpic.net/free-photo/woman-listening-music-night-city_23-2149285652.jpg", imageAlt: "Cityscape at night" },
             { id: "hero-4", imageSrc: "http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg", imageAlt: "Abstract art photo" },
             { id: "hero-5", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-macaw-bird-head-eye_181624-54332.jpg", imageAlt: "Wildlife close-up" },
-            { id: "hero-6", imageSrc: "http://img.b2bpic.net/free-photo/fried-fish-with-cream-vegetables_140725-2091.jpg", imageAlt: "Gourmet food dish" },
+            { id: "hero-6", imageSrc: "http://img.b2bpic.net/free-photo/fried-fish-with-cream-vegetables_140725-2091.jpg", imageAlt: "Gourmet food dish" }
           ]}
           autoPlay={true}
           autoPlayInterval={4000}
@@ -72,7 +75,7 @@ export default function SitePage() {
             { number: "01", title: "Scenic Landscapes", description: "Majestic views and breathtaking natural wonders, captured in their purest form.", tag: "Nature" },
             { number: "02", title: "Intimate Portraits", description: "Raw emotions and unique personalities, revealed in every thoughtful gaze.", tag: "People" },
             { number: "03", title: "Urban Explorations", description: "The vibrant pulse and hidden corners of cities around the world.", tag: "Cities" },
-            { number: "04", title: "Abstract Visions", description: "Exploring form, color, and light in unconventional and artistic ways.", tag: "Art" },
+            { number: "04", title: "Abstract Visions", description: "Exploring form, color, and light in unconventional and artistic ways.", tag: "Art" }
           ]}
           stepsAnimation="slide-up"
           useInvertedBackground={false}
@@ -83,13 +86,35 @@ export default function SitePage() {
         />
       </div>
 
+      <div id="products" data-section="products">
+        <ProductCardFour
+          products={[
+            { id: '1', name: 'Vintage Camera', price: '$299', variant: 'Classic Black Edition', imageSrc: 'http://img.b2bpic.net/free-photo/old-vintage-camera-white-background_1462-1049.jpg', imageAlt: 'Vintage camera' },
+            { id: '2', name: 'Photo Album', price: '$45', variant: 'Leather Bound', imageSrc: 'http://img.b2bpic.net/free-photo/vintage-photo-album-white_1203-5182.jpg', imageAlt: 'Leather bound photo album' },
+            { id: '3', name: 'Tripod Stand', price: '$75', variant: 'Lightweight Aluminum', imageSrc: 'http://img.b2bpic.net/free-photo/camera-stand-isolated-white-background_1203-5969.jpg', imageAlt: 'Camera tripod stand' },
+            { id: '4', name: 'Lens Cleaning Kit', price: '$20', variant: 'Pro Series', imageSrc: 'http://img.b2bpic.net/free-photo/still-life-set-professional-cleaning-lens-d_23-2148906323.jpg', imageAlt: 'Lens cleaning kit' }
+          ]}
+          title="Our Products"
+          description="Enhance your photography journey with our carefully selected range of products."
+          tag="Shop Now"
+          tagIcon={Package}
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          useInvertedBackground={false}
+          buttons={[
+            { text: "Browse All", href: "#products" }
+          ]}
+        />
+      </div>
+
       <div id="about" data-section="about">
         <MetricSplitMediaAbout
           title="Our Journey Through the Lens"
           description="'In My Life' is more than just a gallery; it's a testament to moments that shape us. From the smallest details to the grandest vistas, we believe every photograph holds a piece of a larger story. Our passion is to preserve these fleeting instants, making them timeless for you to revisit and cherish."
           metrics={[
             { value: "10+", title: "Years of Capturing Memories" },
-            { value: "5000+", title: "Photographs in Collection" },
+            { value: "5000+", title: "Photographs in Collection" }
           ]}
           useInvertedBackground={false}
           imageSrc="http://img.b2bpic.net/free-photo/people-looking-picture-album_23-2149548406.jpg?_wi=1"
@@ -106,7 +131,7 @@ export default function SitePage() {
             { id: "1", name: "Anya Sharma, Art Collector", date: "Date: October 26, 2023", title: "Truly Breathtaking Photography!", quote: "The 'In My Life' gallery captures a raw authenticity that is rare and beautiful. Each piece resonates deeply, telling a story that feels both personal and universal. A true treasure.", tag: "Insightful", avatarSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", imageSrc: "http://img.b2bpic.net/free-photo/groom-gently-embraces-her-groom-forest_1153-5973.jpg", imageAlt: "Happy couple during a wedding photoshoot" },
             { id: "2", name: "Mark Benson, Lifestyle Blogger", date: "Date: November 15, 2023", title: "An Inspiring Collection!", quote: "I'm constantly looking for inspiration, and 'In My Life' delivers. The curation is exceptional, and the quality of the photography is simply stunning. It truly enriches my perspective.", tag: "Inspiring", avatarSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg", imageSrc: "http://img.b2bpic.net/free-photo/mother-hand-holding-baby-little-arm_23-2148341974.jpg", imageAlt: "Parental hands gently holding a newborn baby" },
             { id: "3", name: "Chloe Davis, Photographer", date: "Date: December 01, 2023", title: "Masterful Storytelling through Images", quote: "As a fellow photographer, I deeply appreciate the artistry and emotion conveyed in this gallery. It's a masterclass in visual storytelling and a reminder of the power of a single frame.", tag: "Artistic", avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-photographer-taking-pictures-with-compact-camera-grey-background_613910-9350.jpg", imageSrc: "http://img.b2bpic.net/free-photo/cute-family-playing-summer-field_1157-36882.jpg", imageAlt: "Family posing for a portrait in a park" },
-            { id: "4", name: "Ethan Kim, Memory Keeper", date: "Date: January 20, 2024", title: "Reliving My Own Moments", quote: "Browsing through 'In My Life' is like reliving my own cherished memories. The photos are so vivid and evocative, they transport you to another time and place. Highly recommend.", tag: "Emotional", avatarSrc: "http://img.b2bpic.net/free-photo/i-like-that-good-job-happy-young-dark-skinned-female-wearing-casual-long-sleeved-t-shirt-making-thumbs-up-sign-smiling-cheerfully-showing-her-support-respect-someone-body-language_273609-1258.jpg", imageSrc: "http://img.b2bpic.net/free-photo/dark-low-clouds-beautiful-mountains-lake-pines-backpack-with-scooter-front_613910-17385.jpg", imageAlt: "Person admiring a panoramic mountain view" },
+            { id: "4", name: "Ethan Kim, Memory Keeper", date: "Date: January 20, 2024", title: "Reliving My Own Moments", quote: "Browsing through 'In My Life' is like reliving my own cherished memories. The photos are so vivid and evocative, they transport you to another time and place. Highly recommend.", tag: "Emotional", avatarSrc: "http://img.b2bpic.net/free-photo/i-like-that-good-job-happy-young-dark-skinned-female-wearing-casual-long-sleeved-t-shirt-making-thumbs-up-sign-smiling-cheerfully-showing-her-support-respect-someone-body-language_273609-1258.jpg", imageSrc: "http://img.b2bpic.net/free-photo/dark-low-clouds-beautiful-mountains-lake-pines-backpack-with-scooter-front_613910-17385.jpg", imageAlt: "Person admiring a panoramic mountain view" }
           ]}
           title="Client Stories"
           description="Hear from those who have been touched by the beauty and depth of 'In My Life' photo gallery."
@@ -124,7 +149,7 @@ export default function SitePage() {
           description="Have a question about a photograph, want to collaborate, or just share your thoughts? We'd love to hear from you."
           inputs={[
             { name: "name", type: "text", placeholder: "Your Name", required: true },
-            { name: "email", type: "email", placeholder: "Your Email", required: true },
+            { name: "email", type: "email", placeholder: "Your Email", required: true }
           ]}
           textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
           useInvertedBackground={false}