🎨 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">

components/blogpost.tsx

@@ -0,0 +1,61 @@
+import Link from 'next/link';
+
+interface BlogPost {
+  label: string;
+  body: string;
+  publish: string;
+  get_absolute_url: string;
+}
+
+interface BlogAreaProps {
+  blogposts: BlogPost[];
+}
+
+export default function BlogArea({ blogposts }: BlogAreaProps) {
+  return (
+    <div className="blog-area py-16 border-t border-white w-full">
+      <div className="blogposts">
+        {blogposts.map((blogpost, index) => (
+          <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
+            <div className="left mr-5">
+              <div className="blogpost-image">
+                <img
+                  src="/images/retrofuturism.webp"
+                  alt="Retrospective Science Image"
+                  className="w-96 h-96 rounded-lg border border-white"
+                />
+              </div>
+            </div>
+            <div className="right flex flex-col">
+              <div className="blogpost-label text-2xl mb-4">
+                <h2>
+                  <Link href={blogpost.get_absolute_url} className="text-white hover:underline">
+                    {blogpost.label}
+                  </Link>
+                </h2>
+              </div>
+              <ul className="blogpost-tags flex flex-row space-x-4 mb-4">
+                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Games</li>
+                <li className="tag bg-gray-800 px-4 py-2 rounded-full text-2xl">Science</li>
+              </ul>
+              <div className="blogpost-description text-base mb-4">
+                {blogpost.body.slice(0, 512)}...
+              </div>
+              <div className="blogpost-other flex flex-row justify-between items-center">
+                <div className="text-base">
+                  <p>Posted: {blogpost.publish}</p>
+                </div>
+                <div className="text-2xl">
+                  <Link href={blogpost.get_absolute_url} className="text-white hover:underline">
+                    Read
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      {/* Include Pagination Component Here */}
+    </div>
+  );
+}