Quiz-PDF/Frontend/app/(public)/about/page.tsx

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