Update src/app/page.tsx

src/app/blog/page.tsx

@@ -54,7 +54,8 @@ export default function BlogPage() {
                 const url = `${apiUrl}/posts/${projectId}?status=published`;
                 const response = await fetch(url, {
                     method: "GET",                    headers: {
-                        "Content-Type": "application/json"},
+                        "Content-Type": "application/json"
+                    },
                 });
 
                 if (response.ok) {
@@ -101,6 +102,7 @@ export default function BlogPage() {
                             { name: "Home", id: "/" },
                             { name: "About", id: "about" },
                             { name: "Books", id: "books" },
+                            { name: "Shop", id: "shop" },
                             { name: "Reviews", id: "testimonials" },
                             { name: "Contact", id: "contact" }
                         ]}
@@ -163,4 +165,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

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

src/app/page.tsx

@@ -32,6 +32,7 @@ export default function LandingPage() {
             { name: "Home", id: "hero" },
             { name: "About", id: "about" },
             { name: "Books", id: "books" },
+            { name: "Shop", id: "shop" },
             { name: "Reviews", id: "testimonials" },
             { name: "Contact", id: "contact" }
           ]}
@@ -90,6 +91,38 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="shop" data-section="shop">
+        <ProductCardOne
+          title="Shop Our Collection"
+          description="Curated books handpicked by our community members. Every purchase supports independent authors and publishers."
+          tag="Bookstore"
+          products={[
+            {
+              id: "shop-1",              name: "The Midnight Library",              price: "£14.99",              imageSrc: "https://img.b2bpic.net/free-photo/antique-book-titles-from-our-own-original-public-domain-library-collection_53876-160406.jpg",              imageAlt: "The Midnight Library book cover"
+            },
+            {
+              id: "shop-2",              name: "Lessons in Chemistry",              price: "£16.50",              imageSrc: "https://img.b2bpic.net/free-photo/wooden-table-with-three-books-top-each-other-daytime_181624-10034.jpg",              imageAlt: "Lessons in Chemistry book cover"
+            },
+            {
+              id: "shop-3",              name: "The Seven Husbands of Evelyn Hugo",              price: "£15.99",              imageSrc: "https://img.b2bpic.net/free-photo/cozy-home-composition-with-books-table-closeup_169016-25849.jpg",              imageAlt: "The Seven Husbands of Evelyn Hugo book cover"
+            },
+            {
+              id: "shop-4",              name: "Educated",              price: "£18.99",              imageSrc: "https://img.b2bpic.net/free-photo/antique-book-titles-from-our-own-original-public-domain-library-collection_53876-160406.jpg",              imageAlt: "Educated book cover"
+            },
+            {
+              id: "shop-5",              name: "Atomic Habits",              price: "£17.50",              imageSrc: "https://img.b2bpic.net/free-photo/wooden-table-with-three-books-top-each-other-daytime_181624-10034.jpg",              imageAlt: "Atomic Habits book cover"
+            },
+            {
+              id: "shop-6",              name: "The Silent Patient",              price: "£16.99",              imageSrc: "https://img.b2bpic.net/free-photo/cozy-home-composition-with-books-table-closeup_169016-25849.jpg",              imageAlt: "The Silent Patient book cover"
+            }
+          ]}
+          textboxLayout="default"
+          useInvertedBackground="invertDefault"
+          gridVariant="bento-grid"
+          animationType="slide-up"
+        />
+      </div>
+
       <div id="features" data-section="features">
         <MetricCardSeven
           title="Why Join 4itaka"
@@ -229,4 +262,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}