✨ feat: Implement blog post layout and page template

This commit introduces the layout and page components for the blog post feature.

The main changes include:

- Implement the `RootLayout` component in `app/blogpost/layout.tsx` to provide the overall structure and styling for the blog post pages.
- Implement the `PostPage` component in `app/blogpost/page.tsx` to display the content of a specific blog post, including the post title, metadata, and the post body (template).
- Add placeholder content and styling for the blog post page, including the use of the `Image` component to display a featured image.

These changes lay the foundation for the blog post feature, allowing users to view and interact with individual blog posts on the website.

app/blogpost/layout.tsx

@@ -0,0 +1,16 @@
+import "../globals.css";
+
+import Link from "next/link";
+import AnimatedLink from "@/components/animatedLink";
+import Image from "next/image";
+
+import MainHeader from "@/components/header/main";
+import MainFooter from "@/components/footer/main";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="text-base">
+      {children}
+    </div>
+  );
+}

app/blogpost/page.tsx

@@ -0,0 +1,47 @@
+// Markdown and LaTeX page here will be after posting throught BackndPitt
+
+import Image from "next/image";
+import postPic from "@/public/images/retrofuturism.webp"
+
+
+export default function PostPage() {
+  return (
+    <div className="pt-12 pb-8">
+      <h1 className="post-label text-3xl mb-1.5">How to install Docker & Docker Compose</h1>
+      <p className="post-time text-slate-400">Posted <em className="text-indigo-400">20 December 2024</em> | Updated <em className="text-rose-400">12 January 2025</em></p>
+      <div className="mt-4 bg-slate-500 w-10/12 h-90 rounded-2xl flex justify-self-center">
+        {/* <Image
+          src={postPic}
+          alt="RetrospectiveScience"
+          blurDataURL="data:..." // automatically provided
+          placeholder="blur" // Optional blur-up while loading
+          className="rounded-xl"
+        /> */}
+      </div>
+      <p className="mt-4">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nisi et nunc ullamcorper venenatis non in erat. Phasellus consectetur, lorem et scelerisque rutrum, velit magna lacinia augue, a condimentum elit dolor nec nibh. Nulla vel ligula accumsan, maximus ante vitae, interdum magna. Integer non ex a sapien tristique pharetra. Sed eu laoreet nisl, ac commodo orci. Quisque sit amet facilisis ex. Sed facilisis felis sed neque mattis elementum. Donec sagittis turpis vel dui tristique mollis.
+      </p>
+      <p className="mt-4">
+        Ut rutrum nibh eu nisl dapibus, eget ultricies neque sollicitudin. Fusce ex ipsum, condimentum at arcu at, gravida malesuada mi. Sed tincidunt ipsum nec ultricies porttitor. Maecenas at egestas ipsum. Cras vitae scelerisque quam, vitae sollicitudin quam. In hac habitasse platea dictumst. Aenean a vestibulum felis, sed ultrices dui. Nullam in orci sit amet arcu sodales iaculis nec vitae arcu. Phasellus consequat purus eget nulla porta vulputate.
+      </p>
+      <div className="mt-4 bg-slate-500 w-10/12 h-90 rounded-2xl flex justify-self-center">
+        {/* <Image
+          src={postPic}
+          alt="RetrospectiveScience"
+          blurDataURL="data:..." // automatically provided
+          placeholder="blur" // Optional blur-up while loading
+          className="rounded-xl"
+        /> */}
+      </div>
+      <p className="mt-4">
+        Nam et consequat dui. Fusce est lorem, mattis rutrum porta ac, ultrices eget urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam pharetra condimentum quam, ut pretium lacus finibus vel. Sed porttitor, neque nec volutpat rhoncus, nulla nibh condimentum lacus, non cursus arcu lorem non sem. Maecenas sed mi at sapien sodales suscipit eu non purus. In eget neque commodo, blandit diam id, vestibulum nisi. Phasellus cursus purus congue, tempus dolor sed, ultricies purus. Quisque massa sem, porta accumsan molestie malesuada, maximus vitae felis. Vestibulum sagittis metus erat, vel bibendum est dignissim eget. Duis ligula velit, placerat ut volutpat vel, hendrerit eu risus. Quisque ut ultrices ligula, ut eleifend tortor. Fusce sit amet sapien vulputate, lacinia nisi vitae, luctus diam. Curabitur a nisl sed ipsum tempus fringilla. Nulla feugiat porta convallis.
+      </p>
+      <p className="mt-4">
+        Fusce consequat faucibus augue, ac dapibus tortor facilisis sit amet. Nulla tincidunt scelerisque est vel aliquam. Ut erat diam, elementum placerat lacus vel, faucibus pretium dolor. Morbi tincidunt sapien nec mi congue pretium. Suspendisse et enim dignissim, tincidunt ipsum a, suscipit eros. Morbi congue arcu posuere nibh aliquam molestie. Mauris placerat erat eu augue tristique dignissim. Maecenas et pellentesque urna, non laoreet velit. Maecenas efficitur imperdiet bibendum.
+      </p>
+      <p className="mt-4">
+        Phasellus semper semper imperdiet. Praesent ligula neque, egestas id venenatis ac, vulputate vitae ex. Integer at pellentesque dui. Fusce semper egestas lorem, tincidunt tristique nibh tristique quis. In ac tincidunt est. Proin at erat ultrices, ornare lacus vitae, aliquam nibh. Morbi ut mauris erat. Quisque rhoncus sapien eu massa lacinia tempor. Quisque volutpat nisi sed augue facilisis maximus. Nam lobortis sollicitudin arcu, non elementum orci commodo eget. Praesent porta velit eget felis euismod, porta vestibulum diam semper. Curabitur accumsan, turpis at tincidunt fringilla, velit dui efficitur quam, ut porta ipsum lacus vitae quam. Donec malesuada urna sed diam suscipit dapibus. Pellentesque et ante id nunc sagittis vulputate.
+      </p>
+    </div>
+  );
+}