feature - added about page

Frontend/app/(public)/about/page.tsx

@@ -0,0 +1,77 @@
+import PageHeader from "@/sections/PageHeader";
+import BlogCard from "@/components/BlogCard";
+import getPostMetadata from "@/utils/getPostMetaData";
+import React from "react";
+import Background from "@/components/Utilities/Background";
+import Footer from "@/components/Footer";
+import Image from "next/image";
+
+export default async function BlogsPage() {
+  const postMetadata = await getPostMetadata();
+
+  const postPreviews = postMetadata
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .map((post) => <BlogCard key={post.slug} {...(post as any)} />);
+  return (
+    <main
+      id="content"
+      role="main"
+      className="h-full flex-grow flex flex-col bg-base-100"
+    >
+      {/*  Page sections */}
+      <PageHeader title="Helping Developers Build" />
+      <div className="max-w-4xl mx-auto mb-auto pb-24 h-full w-full py-12 px-8 flex flex-col gap-y-6 text-center items-center">
+        <p className="text-lg text-base-content font-thin">
+          In 2023 I built <b className="font-bold">Sign365</b> using pocketbase
+          and setup an open source library to help people get setup with Stripe
+          + Pocketbase. As 2024 has come around I have had more and more
+          requests for applications and features on the existing code. I built a
+          codebase that would save me 20 hours + in the bootstrapping time to
+          get my applications ready. That is why I had to build FastPocket an
+          easy solution to give everyone a head start.
+        </p>
+        <p className="text-lg text-base-content font-thin">
+          After reflecting on the challenges that developers face building their
+          applications, I&apos;ve seen that there will never be one codebase
+          that suits all developers. But I am sure for those who are
+          opensourcing, self-hosting and want to spin up an application quickly
+          they will be able to do it using FastPocket
+        </p>
+        <p className="text-lg text-base-content font-thin">
+          I am taking all of the knowledge that I have gained accross 20+
+          different React projects and combining it into 1 single codebase. It
+          includes personal philosophies on styling, theming and building and
+          will help indie-hackers, startups make complex technical decisions
+          that have been battle tested in enterprise code
+        </p>
+        <p className="text-lg text-base-content font-thin">
+          So I&apos;ve committed to building FastPocket to help you build your
+          projects faster to get paid.
+        </p>
+        <p className="text-xl text-base-content font-bold">
+          FastPocket will get you producing more with less development.
+        </p>
+        <p className="text-lg text-base-content font-thin">
+          I know that your next project will grow exponentially because of the
+          work I have already done.
+        </p>
+        <p className="text-xl text-base-content font-bold">
+          Ready to launch your next product?
+        </p>
+
+        <Image
+          src={"/images/sam.jpeg"}
+          alt={"samuel wyndham"}
+          width={1200}
+          height={1200}
+          className="w-48 h-48 rounded-full object-cover my-8"
+        />
+
+        <button className="btn w-40 btn-primary rounded-full  outline-none border-none capitalize">
+          Let&apos;s go!
+        </button>
+      </div>
+      <Footer />
+    </main>
+  );
+}

Frontend/components/Navigation.tsx

@@ -46,7 +46,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
                 </Link>
               </li>
               <li>
-                <Link href="/blogs">Meet Sam</Link>
+                <Link href="/about">Meet Sam</Link>
               </li>
 
               {/* <li>
@@ -85,7 +85,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
             <Link href="/pricing">Get Your FastPocket</Link>
           </li>
           <li>
-            <Link href="/blogs">Meet Sam</Link>
+            <Link href="/about">Meet Sam</Link>
           </li>
 
           {/* <li>

Frontend/sections/PageHeader.tsx

@@ -2,11 +2,12 @@ import React, { ReactNode } from "react";
 
 interface PageHeaderProps {
   title: string;
-  subtitle: ReactNode;
+  subtitle?: ReactNode;
+  className?: string;
 }
-function PageHeader({ title, subtitle }: PageHeaderProps) {
+function PageHeader({ title, subtitle, className }: PageHeaderProps) {
   return (
-    <div className="pt-28 max-w-screen flex flex-col">
+    <div className={`pt-48 max-w-screen flex flex-col ${className}`}>
       <h1 className="text-4xl md:text-5xl text-center font-bold text-base-content  mb-6 mx-auto">
         {title}
       </h1>