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

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>
+  );
+}