Update src/app/page.tsx

src/app/layout.tsx

@@ -1264,4 +1264,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -4,13 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import { Music, Sparkles, CalendarDays, Star, Zap, Heart, Mail } from "lucide-react";
+import ContactText from '@/components/sections/contact/ContactText';
+import { Music, Sparkles, CalendarDays, Star, Zap, Heart, Mail, ShoppingBag } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,6 +32,7 @@ export default function LandingPage() {
         <NavbarStyleFullscreen
           navItems={[
             { name: "Music", id: "music" },
+            { name: "Shop", id: "shop" },
             { name: "About", id: "about" },
             { name: "Events", id: "events" },
             { name: "Contact", id: "contact" },
@@ -90,6 +93,39 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="shop" data-section="shop">
+        <ProductCardThree
+          title="Shop All Products"
+          description="Browse our complete collection of merchandise and exclusive items. Find everything you love in one place."
+          tag="Complete Collection"
+          tagIcon={ShoppingBag}
+          products={[
+            {
+              id: "1",              name: "Signature T-Shirt",              price: "$29.99",              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Signature T-Shirt",              initialQuantity: 1
+            },
+            {
+              id: "2",              name: "Limited Edition Hoodie",              price: "$54.99",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Limited Edition Hoodie",              initialQuantity: 1
+            },
+            {
+              id: "3",              name: "Vinyl Album Set",              price: "$49.99",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-album-cover-template_52683-124652.jpg",              imageAlt: "Vinyl Album Set",              initialQuantity: 1
+            },
+            {
+              id: "4",              name: "Exclusive Poster",              price: "$19.99",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-album-cover-template_52683-124660.jpg",              imageAlt: "Exclusive Poster",              initialQuantity: 1
+            },
+            {
+              id: "5",              name: "Premium Cap",              price: "$24.99",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg",              imageAlt: "Premium Cap",              initialQuantity: 1
+            },
+            {
+              id: "6",              name: "Collector's Box Set",              price: "$89.99",              imageSrc: "https://img.b2bpic.net/free-photo/mixing-engineer-pressing-sliders-control-desk-balance-tracks_482257-122057.jpg",              imageAlt: "Collector's Box Set",              initialQuantity: 1
+            }
+          ]}
+          gridVariant="three-columns-all-equal-width"
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground="noInvert"
+        />
+      </div>
+
       <div id="discography" data-section="discography">
         <FeatureCardTwentyThree
           title="Complete Discography"
@@ -197,7 +233,7 @@ export default function LandingPage() {
         />
       </div>
 
-      <div id="contact" data-section="contact">
+      <div id="contact-newsletter" data-section="contact-newsletter">
         <ContactSplit
           tag="Newsletter"
           tagIcon={Mail}
@@ -213,6 +249,18 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Ready to work together? Get in touch with Bibito's team for inquiries, collaborations, and bookings."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Send Message", href: "mailto:booking@bibito.music" },
+            { text: "Schedule Call", href: "#" }
+          ]}
+          useInvertedBackground="invertDefault"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="Bibito"
@@ -244,4 +292,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}