src/app/blog/page.tsx

@@ -20,6 +20,18 @@ type BlogPost = {
     onBlogClick?: () => void;
 };
 
+type BlogCard = {
+    id: string;
+    title: string;
+    author: string;
+    description: string;
+    tags: string[];
+    onBlogClick?: () => void;
+} & (
+    | { imageSrc: string; imageAlt?: string; videoSrc?: never; videoAriaLabel?: never }
+    | { videoSrc: string; videoAriaLabel?: string; imageSrc?: never; imageAlt?: never }
+);
+
 const defaultPosts: BlogPost[] = [
     {
         id: "1",        title: "The Art of Coffee Brewing",        author: "Sarah Johnson",        description: "Discover the secrets behind the perfect cup of coffee with our comprehensive brewing guide.",        tags: ["Coffee", "Brewing", "Guide"],
@@ -39,6 +51,43 @@ const defaultPosts: BlogPost[] = [
     },
 ];
 
+function convertToBlogCard(post: BlogPost): BlogCard {
+    // Ensure we have either imageSrc or videoSrc, prioritizing imageSrc
+    if (post.imageSrc) {
+        return {
+            id: post.id,
+            title: post.title,
+            author: post.author,
+            description: post.description,
+            tags: post.tags,
+            imageSrc: post.imageSrc,
+            imageAlt: post.imageAlt,
+            onBlogClick: post.onBlogClick
+        };
+    } else if (post.videoSrc) {
+        return {
+            id: post.id,
+            title: post.title,
+            author: post.author,
+            description: post.description,
+            tags: post.tags,
+            videoSrc: post.videoSrc,
+            videoAriaLabel: post.videoAriaLabel,
+            onBlogClick: post.onBlogClick
+        };
+    } else {
+        // Fallback to placeholder image if neither exists
+        return {
+            id: post.id,
+            title: post.title,
+            author: post.author,
+            description: post.description,
+            tags: post.tags,
+            imageSrc: "/placeholders/placeholder1.webp",            imageAlt: "Blog post image",            onBlogClick: post.onBlogClick
+        };
+    }
+}
+
 export default function BlogPage() {
     const [posts, setPosts] = useState<BlogPost[]>(defaultPosts);
     const [isLoading, setIsLoading] = useState(true);
@@ -58,7 +107,8 @@ export default function BlogPage() {
                 const url = `${apiUrl}/posts/${projectId}`;
                 const response = await fetch(url, {
                     method: "GET",                    headers: {
-                        "Content-Type": "application/json"},
+                        "Content-Type": "application/json"
+                    },
                 });
 
                 if (response.ok) {
@@ -84,6 +134,9 @@ export default function BlogPage() {
         fetchPosts();
     }, []);
 
+    // Convert BlogPost[] to BlogCard[]
+    const blogCards: BlogCard[] = posts.map(convertToBlogCard);
+
     return (
         <ThemeProvider
             defaultButtonVariant="elastic-effect"
@@ -116,7 +169,7 @@ export default function BlogPage() {
                         </div>
                     ) : (
                         <BlogCardEleven
-                            blogs={posts}
+                            blogs={blogCards}
                             animationType="slide-up"
                             title="Coffee Chronicles"
                             description="Discover the latest insights, stories, and brewing wisdom from our coffee experts and passionate baristas."

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';