src/app/blog/page.tsx

@@ -20,6 +20,25 @@ 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: "Helping Abandoned Pets Find Forever Homes",        author: "Sarah Johnson",        description: "Learn about our comprehensive adoption process and how we match pets with the perfect families.",        tags: ["Adoption", "Success Stories"],
@@ -58,7 +77,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 +104,34 @@ export default function BlogPage() {
         fetchPosts();
     }, []);
 
+    // Convert BlogPost[] to BlogCard[]
+    const convertToBlogCards = (blogPosts: BlogPost[]): BlogCard[] => {
+        return blogPosts.map(post => {
+            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 {
+                return {
+                    id: post.id,
+                    title: post.title,
+                    author: post.author,
+                    description: post.description,
+                    tags: post.tags,
+                    imageSrc: post.imageSrc || "/placeholders/placeholder1.webp",                    imageAlt: post.imageAlt,
+                    onBlogClick: post.onBlogClick
+                };
+            }
+        });
+    };
+
     return (
         <ThemeProvider
             defaultButtonVariant="text-shift"
@@ -116,7 +164,7 @@ export default function BlogPage() {
                         </div>
                     ) : (
                         <BlogCardEleven
-                            blogs={posts}
+                            blogs={convertToBlogCards(posts)}
                             animationType="slide-up"
                             title="Latest News & Stories"
                             description="Stay updated with our latest rescue stories, adoption successes, and animal care tips from the Happy Paws Shelter community."

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';
@@ -70,7 +70,7 @@ export default function PetShelterPage() {
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
-          useInvertedBackground="invertDefault"
+          useInvertedBackground="noInvert"
           buttons={[
             { text: "Browse All Animals", href: "#contact" }
           ]}
@@ -112,7 +112,7 @@ export default function PetShelterPage() {
           ]}
           animationType="slide-up"
           textboxLayout="default"
-          useInvertedBackground="invertDefault"
+          useInvertedBackground="noInvert"
         />
       </div>
 
@@ -159,7 +159,7 @@ export default function PetShelterPage() {
           gridVariant="uniform-all-items-equal"
           animationType="scale-rotate"
           textboxLayout="default"
-          useInvertedBackground="invertDefault"
+          useInvertedBackground="noInvert"
         />
       </div>