✨ feat(BlogPost): Add image component and local image

Adds the `Image` component from Next.js to display a local image in the
BlogPost component. The local image file `retrofuturism.webp` is added to
the `public/images` directory and referenced in the component.

components/blogpost.tsx

@@ -1,4 +1,9 @@
+'use client';
+
 import Link from 'next/link';
+import Image from 'next/image';
+
+import blogTestPic from './retrofuturism.webp';
 
 interface BlogPost {
   label: string;
@@ -19,10 +24,12 @@ export default function BlogArea({ blogposts }: BlogAreaProps) {
           <div key={index} className="blogpost flex flex-row overflow-hidden mb-8">
             <div className="left mr-5">
               <div className="blogpost-image">
-                <img
+                <Image
-                  src="/images/retrofuturism.webp"
+                  src="/images/retrofuturism.webp" // Path to the local image
                   alt="Retrospective Science Image"
-                  className="w-96 h-96 rounded-lg border border-white"
+                  width={384} // Set width (in pixels)
+                  height={384} // Set height (in pixels)
+                  className="rounded-lg"
                 />
               </div>
             </div>