add separator to blog posts

components/home/Blogs.tsx

@@ -1,21 +1,23 @@
 import { getSortedPostsData } from "@/lib/utils/blog/getPosts";
 import PostCard from "./post-card";
-import { Heading } from "@radix-ui/themes";
+import { Heading, Separator } from "@radix-ui/themes";
+import React from "react";
 
 // Define and export the 'RenderPosts' component
 export default function RenderPosts() {
   const posts = getSortedPostsData(); // Call the getSortedPostsData function to retrieve the sorted posts data.
 
   // Render each post as a 'PostCard' component separated by a 'Divider'
   return (
-    <section className="flex flex-col gap-4">
+    <section className="flex w-full flex-col gap-4">
       <Heading as="h2" size="4" className="mb-4">
         Read more about GPV
       </Heading>
       {posts.map((post: BlogPost, index: number) => (
-        <div key={`${index}-post`}>
+        <React.Fragment key={index}>
           <PostCard post={post} key={`${index}-post-card`} />
-        </div>
+          <Separator className="w-full" size="4" key={`${index}-separator`} />
+        </React.Fragment>
       ))}
     </section>
   );