Update src/app/shop/page.tsx

Merge version_2 into main

src/app/blog/page.tsx

@@ -8,7 +8,7 @@ import { useBlogPosts } from "@/hooks/useBlogPosts";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 // Section Import
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import BlogCardThree from '@/components/sections/blog/BlogCardThree'; // Changed from ProductCardTwo
 
 // Footer Import
 import FooterMedia from '@/components/sections/footer/FooterMedia';
@@ -19,6 +19,7 @@ export default function BlogPage() {
     const navItems = [
         { name: 'Home', id: '/' },
         { name: 'Products', id: '/shop' },
+        { name: 'Blog', id: '/blog' },
         { name: 'About', id: '/#about' },
         { name: 'Features', id: '/#features' },
         { name: 'Testimonials', id: '/#testimonials' },
@@ -26,15 +27,17 @@ export default function BlogPage() {
         { name: 'Contact', id: '/#contact' },
     ];
 
-    const blogProducts = posts?.map((post: any) => ({
+    const blogsData = posts?.map((post: any) => ({
         id: post.id,
-        brand: post.author?.name || 'By Find Me',
+        category: 'General',
-        name: post.title,
+        title: post.title,
-        price: post.publishedAt ? new Date(post.publishedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : '',
+        excerpt: post.excerpt || 'Read more about this topic...', // Placeholder excerpt
-        rating: 5,
-        reviewCount: '',
         imageSrc: post.coverImage?.url || '/placeholders/placeholder1.webp',
         imageAlt: post.title,
+        authorName: post.author?.name || 'Find Me Team',
+        authorAvatar: '/avatars/default_author.jpg', // Placeholder avatar
+        date: post.publishedAt ? new Date(post.publishedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : '',
+        onBlogClick: () => console.log(`Navigating to blog post ${post.id}`), // Placeholder click handler
     })) || [];
 
     return (
@@ -68,14 +71,23 @@ export default function BlogPage() {
             ) : (
                 <main className="pt-24">
                      <div id="blog" data-section="blog">
-                        <ProductCardTwo
+                        <BlogCardThree
-                            products={blogProducts}
+                            blogs={blogsData}
                             title="From Our Blog"
                             description="Explore the latest stories, tips, and insights from our team."
                             animationType="slide-up"
                             textboxLayout="default"
                             useInvertedBackground={false}
-                            gridVariant='uniform-all-items-equal'
+                            className="bg-card"
+                            textBoxClassName="text-foreground"
+                            textBoxTitleClassName="text-foreground"
+                            textBoxDescriptionClassName="text-foreground"
+                            cardClassName="bg-card/80 shadow-soft-shadow"
+                            categoryTagClassName="text-accent"
+                            cardTitleClassName="text-foreground"
+                            excerptClassName="text-foreground/80"
+                            authorNameClassName="text-primary-cta"
+                            dateClassName="text-foreground/70"
                         />
                     </div>
                 </main>
@@ -98,6 +110,7 @@ export default function BlogPage() {
                                 { label: "About Us", href: "/#about" },
                                 { label: "Our Promise", href: "/#features" },
                                 { label: "Contact", href: "/#contact" },
+                                { label: 'Blog', href: '/blog' }
                             ],
                         },
                         {
@@ -119,4 +132,4 @@ export default function BlogPage() {
             </div>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

@@ -13,7 +13,7 @@ export const metadata: Metadata = {
   openGraph: {
     title: "Find Me - Discover Your Signature Scent",    description: "Explore Find Me's exquisite collection of luxury perfumes. Unveil unique fragrances, get expert guidance, and find your perfect signature scent.",    url: "https://findmeperfume.com",    siteName: "Find Me",    images: [
       {
-        url: "https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg",        alt: "Elegant perfume bottles"},
+        url: "https://img.b2bpic.net/free-photo/containers-liquid-soap-shampoo-with-dispenser-is-sold-supermarket_169016-50305.jpg",        alt: "Elegant perfume bottles"}
     ],
     type: "website"},
   twitter: {
@@ -1409,4 +1409,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -18,6 +18,7 @@ export default function LandingPage() {
   const navItems = [
     { name: 'Home', id: '/' },
     { name: 'Products', id: '/shop' },
+    { name: 'Blog', id: '/blog' },
     { name: 'About', id: '/#about' },
     { name: 'Features', id: '/#features' },
     { name: 'Testimonials', id: '/#testimonials' },
@@ -86,7 +87,7 @@ export default function LandingPage() {
           tag="Our Philosophy"
           tagIcon={Award}
           tagAnimation="slide-up"
-          buttons={[{ text: 'Learn More', href: '#about' }]} 
+          buttons={[{ text: 'Learn More', href: '#about' }]}
           buttonAnimation="slide-up"
           imageSrc="https://img.b2bpic.net/free-photo/high-angle-ecological-zero-waster-concept_23-2148591681.jpg"
           imageAlt="Close up of a perfumer's tools and ingredients, glass bottles and delicate flowers"
@@ -248,7 +249,7 @@ export default function LandingPage() {
           imageAlt="Abstract luxury texture background with soft gradients"
           columns={[
             { title: 'Shop', items: [{ label: 'New Arrivals', href: '/shop' }, { label: 'Best Sellers', href: '/shop' }, { label: 'Discovery Sets', href: '/shop' }] },
-            { title: 'Company', items: [{ label: 'About Us', href: '#about' }, { label: 'Our Promise', href: '#features' }, { label: 'Contact', href: '#contact' }] },
+            { title: 'Company', items: [{ label: 'About Us', href: '#about' }, { label: 'Our Promise', href: '#features' }, { label: 'Contact', href: '#contact' }, { label: 'Blog', href: '/blog' }] },
             { title: 'Support', items: [{ label: 'FAQ', href: '#faq' }, { label: 'Shipping', href: '#' }, { label: 'Returns', href: '#' }] },
           ]}
           logoText="Find Me"
@@ -262,4 +263,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/shop/[id]/page.tsx

@@ -18,6 +18,7 @@ interface ProductPageProps {
 const navItems = [
     { name: 'Home', id: '/' },
     { name: 'Products', id: '/shop' },
+    { name: 'Blog', id: '/blog' },
     { name: 'About', id: '/#about' },
     { name: 'Features', id: '/#features' },
     { name: 'Testimonials', id: '/#testimonials' },
@@ -175,7 +176,7 @@ function ProductPageContent({ params }: ProductPageProps) {
                 <FooterMedia
                     imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=4"
                     imageAlt="Abstract luxury texture background with soft gradients"
-                    columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, { label: "Discovery Sets", href: "/shop" }] }, { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Promise", href: "/#features" }, { label: "Contact", href: "/#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
+                    columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, { label: "Discovery Sets", href: "/shop" }] }, { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Promise", href: "/#features" }, { label: "Contact", href: "/#contact" }, { label: 'Blog', href: '/blog' }] }, { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
                     logoText="Find Me"
                     copyrightText="© 2024 Find Me. All rights reserved."
                     className="bg-card"
@@ -187,4 +188,4 @@ function ProductPageContent({ params }: ProductPageProps) {
             </div>
         </ThemeProvider>
     );
-}
+}

src/app/shop/page.tsx

@@ -10,6 +10,7 @@ import { useProductCatalog } from "@/hooks/useProductCatalog";
 const navItems = [
     { name: 'Home', id: '/' },
     { name: 'Products', id: '/shop' },
+    { name: 'Blog', id: '/blog' },
     { name: 'About', id: '/#about' },
     { name: 'Features', id: '/#features' },
     { name: 'Testimonials', id: '/#testimonials' },
@@ -70,7 +71,7 @@ function ShopPageContent() {
                 <FooterMedia
                     imageSrc="https://img.b2bpic.net/free-vector/pink-silk-background_1048-401.jpg?_wi=3"
                     imageAlt="Abstract luxury texture background with soft gradients"
-                    columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, { label: "Discovery Sets", href: "/shop" }] }, { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Promise", href: "/#features" }, { label: "Contact", href: "/#contact" }] }, { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
+                    columns={[{ title: "Shop", items: [{ label: "New Arrivals", href: "/shop" }, { label: "Best Sellers", href: "/shop" }, { label: "Discovery Sets", href: "/shop" }] }, { title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Promise", href: "/#features" }, { label: "Contact", href: "/#contact" }, { label: 'Blog', href: '/blog' }] }, { title: "Support", items: [{ label: "FAQ", href: "/#faq" }, { label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] }]}
                     logoText="Find Me"
                     copyrightText="© 2024 Find Me. All rights reserved."
                     className="bg-card"
@@ -90,4 +91,4 @@ export default function ShopPage() {
             <ShopPageContent />
         </Suspense>
     );
-}
+}