Add paystro visual components

src/app/(app)/page.tsx

@@ -1,20 +1,32 @@
-import { Badge } from '@/components/Badge'
-import { Background } from '@/components/Background'
+import ThemeSwitcher from '@/components/ThemeSwitcher'
+import { getCurrentYear } from '@/utils/date'
 import Link from 'next/link'
 import React from 'react'
-import LexicalContent from '@/components/LexicalContent'
+import Header from '@/components/Header'
 
-const Page = () => {
-  /* const url = 'http://localhost:3000/api/pages/66781d2fb752297de17a3368?depth=1&draft=false'
-
-  const content = fetch(url)
-  console.log(content) */
+interface Props {}
 
+const Page = (props: Props) => {
   return (
     <>
-      <h1>Lexical content hereinafter</h1>
-
-      {/* <LexicalContent lazyLoadImages={false} childrenNodes={content?.root?.children} locale={''} /> */}
+      <main className="flex flex-col gap-4 flex-grow">
+        <Header />
+        <h1 className="">Nextload</h1>
+        <p className="mt-3">
+          {`Nextload is a pre-configured setup for Nextjs and PayloadCMS that makes it easy to get started with building your website. With Nextload, you'll have a complete development environment that you can run locally using Docker. This makes it easy to test and develop your website before deploying it to a production environment.`}
+          <br />
+          {`When you're ready to deploy the website on your own server, Nextload comes with a production environment that requires the use of Traefik as a reverse proxy. This setup provides a secure and scalable production environment for your website.`}
+        </p>
+        {/* <section className="mt-4">
+          <Posts posts={posts} />
+        </section> */}
+      </main>
+      <footer className="flex justify-between items-center py-4">
+        <p className="text-lg font-semibold">
+          &copy; {getCurrentYear()} Autonomic. Template distributed under AGPL 3.0.
+        </p>
+        <ThemeSwitcher />
+      </footer>
     </>
   )
 }