🎨 feat(blog): Implement blog area component

This commit introduces a new `BlogArea` component that displays a list of blog posts. The changes include:

- Added a new `BlogArea` component in `components/blogpost.tsx` that renders a list of blog posts with their title, description, and a link to the full post.
- Integrated the `BlogArea` component into the `Home` page in `app/page.tsx`.
- Added mock data for the blog posts in `app/page.tsx` to demonstrate the functionality.

app/page.tsx

@@ -1,4 +1,21 @@
 import Image from "next/image";
+import BlogArea from "../components/blogpost";
+
+// Mock data for blog posts
+const blogposts = [
+  {
+    label: 'Retro Futurism: A Journey Through Time',
+    body: 'Explore the fascinating world of retro futurism and its impact on modern science and culture.',
+    publish: '2023-10-01',
+    get_absolute_url: '/blog/retro-futurism',
+  },
+  {
+    label: 'The Science Behind Video Games',
+    body: 'Discover how video games are pushing the boundaries of technology and human interaction.',
+    publish: '2023-09-25',
+    get_absolute_url: '/blog/science-video-games',
+  },
+];
 
 export default function Home() {
   return (
@@ -21,7 +38,7 @@ export default function Home() {
       </header>
 
       <main>
-        {/* Blogpost Components Here */}
+        <BlogArea blogposts={blogposts} />
       </main>
 
       <footer className="border-t border-white pt-4 flex flex-row justify-around text-2xl">