lool

Signed-off-by: Max Schmidt <max.schmidt@outlook.de>

astro/src/pages/index.astro

@@ -5,22 +5,41 @@ import { getPosts } from "../utils/payload";
 const posts = await getPosts();
 ---
 
-<Layout title="Welcome to Astroad">
-  <main class="flex flex-col items-center py-10 gap-5">
-    <h1>This is Astroad</h1>
-    {
-      posts ? (
-        posts.reverse().map((post) => (
-          <a href={`/posts/${post.id}`}>
-            <article class="text-teal-950 bg-yellow-100 px-5 py-3 rounded-md shadow-md w-64 text-center">
-              <h2>{post.title}</h2>
-              <p>{new Date(post.updatedAt).toLocaleDateString("de-DE")}</p>
-            </article>
-          </a>
-        ))
-      ) : (
-        <p>No posts...</p>
-      )
-    }
+<Layout title="Astroad">
+  <main class="">
+    <h1>Astroad</h1>
+    <p class="mt-3 text-lg">
+      Astroad is a pre-configured setup for Astro and Payloadcms that makes it
+      easy to get started with building your website. With Astroad, 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, Astrotus 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>
+    <h2 class="mt-6">Posts</h2>
+    <div class="grid grid-cols-3 mt-3">
+      {
+        posts.length > 0 ? (
+          posts.reverse().map((post) => (
+            <a href={`/posts/${post.id}`}>
+              <article class="text-gray bg-gray-light px-5 py-3 rounded-md shadow-md w-64 text-center hover:-translate-y-1 transition-transform">
+                <h3>{post.title}</h3>
+                {post.publishedDate && (
+                  <p>
+                    {new Date(post.publishedDate).toLocaleDateString("de-DE")}
+                  </p>
+                )}
+              </article>
+            </a>
+          ))
+        ) : (
+          <p>Add Posts in Payloadcms</p>
+        )
+      }
+    </div>
   </main>
 </Layout>

astro/src/pages/posts/[id].astro

@@ -18,8 +18,8 @@ const post = id && (await getPost(id));
 
 {
   post ? (
-    <Layout title={post.title!}>
-      <div class="max-w-3xl mx-auto space-y-3 my-3">
+    <Layout title={`Astroad | ${post.title!}`}>
+      <div class="space-y-3 my-3">
         <a href="/">BACK</a>
         <h1>{post.title}</h1>
         {post.content && <Content content={post.content} />}