feat: blog post images

apps/public-web/app/(site)/blog/page.tsx

@@ -19,55 +19,67 @@ export default function BlogIndexPage() {
                     <div
                         className="flex whitespace-nowrap"
                         style={{
-                            animation: "marquee 25s linear infinite",
+                            animation: "marquee 45s linear infinite",
                         }}
                     >
-                        <h1 className="text-[130px] font-semibold tracking-widest leading-tight mr-20">
+                        <h1 className="text-[80px] font-semibold tracking-widest leading-tight mr-20 text-gray-500">
                             BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG
                         </h1>
-                        <h1 className="text-[130px] font-semibold tracking-widest leading-tight mr-20">
+                        <h1 className="text-[80px] font-semibold tracking-widest leading-tight mr-20 text-gray-500">
-                            BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG · BLOG
+                            BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG  BLOG · BLOG · BLOG · BLOG
                         </h1>
                     </div>
 
                     <div
-                        className="flex whitespace-nowrap mt-[-70px]"
+                        className="flex whitespace-nowrap mt-[-30px]"
-                        style={{
+                        /*style={{
-                            animation: "marquee 40s linear infinite",
+                            animation: "marquee 50s linear infinite",
-                        }}
+                        }}*/
                     >
                         <p className="text-[30px] opacity-60 tracking-[0.05em] mr-20">
-                            Thoughts, experiments and notes from the Voyage universe. ·
+                            Thoughts, experiments and notes from the Voyage universe.
                         </p>
                         <p className="text-[30px] opacity-60 tracking-[0.05em] mr-20">
-                            Thoughts, experiments and notes from the Voyage universe. ·
+                            Thoughts, experiments and notes from the Voyage universe.
                         </p>
                     </div>
                 </div>
             </section>
 
-            <main className="mt-12">
+            {/*blog section*/}
-                <div className="grid grid-cols-3 gap-16 mt-[30]">
+
+            <main className="mt-[10px] px-[30px] md:px-[10px]">
+                <div className="grid grid-cols-3 gap-x-[30px] gap-y-[90px] mt-[50]">
                     {posts.map((p) => (
                         <article
                             key={p.slug}
-                            className="rounded-2xl bg-neutral-50 p-10"
+                            className="rounded-2xl bg-neutral-50 overflow-hidden"
                         >
-                            <div className="text-xs opacity-60">
+                            <div className="aspect-square w-full bg-neutral-200">
-                                {p.meta.date}
+                                <img
+                                    src={p.meta.image ?? "/blog/placeholder.jpg"}
+                                    alt={p.meta.title}
+                                    className="h-full w-full object-cover"
+                                />
                             </div>
 
-                            <h2 className="mt-[20px] text-3xl font-semibold leading-tight">
+                            <div className="p-10">
-                                <Link href={`/blog/${p.slug}`}>
+                                <div className="text-xs opacity-60">
-                                    {p.meta.title}
+                                    {p.meta.date}
-                                </Link>
+                                </div>
-                            </h2>
 
-                            {p.meta.excerpt && (
+                                <h2 className="mt-3 text-[40px] font-semibold leading-tight">
-                                <p className="mt-4 opacity-50">
+                                    <Link href={`/blog/${p.slug}`}>
-                                    {p.meta.excerpt}
+                                        {p.meta.title}
-                                </p>
+                                    </Link>
-                            )}
+                                </h2>
+
+                                {p.meta.excerpt && (
+                                    <p className="mt-4 opacity-50">
+                                        {p.meta.excerpt}
+                                    </p>
+                                )}
+                            </div>
                         </article>
                     ))}
                 </div>

apps/public-web/content/posts/22-01-26-first-blog-post.mdx

@@ -1,7 +1,8 @@
 ---
 title: "My First Blog Post"
 date: "2026-01-22"
-excerpt: "This is my very first post on the Voyage blog."
+excerpt: "This is my very first post on the Voyage blog and it will me soooooooooo amazing guys so thank you for tuning in and waiting to fly wiht us VOYAGE."
+image: "/blog/first.jpg"
 ---
 
 # My First Blog Post

apps/public-web/content/posts/22-01-26-second-blog-post.mdx

@@ -2,6 +2,7 @@
 title: "here we go"
 date: "2026-01-22"
 excerpt: "this is the first meaningfull sentence you will here from us."
+image: "/blog/second.jpg"
 ---
 
 

apps/public-web/content/posts/23-01-26-fifth-blog-post.mdx

@@ -0,0 +1,8 @@
+---
+title: "JOOOOOOKEEEE, VYAGE IS A JOKE"
+date: "2026-01-24"
+excerpt: "ST DAY OF JOKING"
+image: "/blog/fifth.jpg"
+---
+
+Hey Guys whats uppp, this was a very good day. i feel exahsutet ihr kleinen Wixxer

apps/public-web/content/posts/23-01-26-forth-blog-post.mdx

@@ -0,0 +1,8 @@
+---
+title: "🥵today we ran 10 k in 10 minutes fr"
+date: "2026-01-24"
+excerpt: "first full day of training. swimming and biking"
+image: "/blog/fourth.jpg"
+---
+
+Hey Guys whats uppp, this was a very good day. i feel exahsutet ihr kleinen Wixxer

apps/public-web/content/posts/23-01-26-sixth-blog-post.mdx

@@ -0,0 +1,8 @@
+---
+title: "Okaa das war zu viel des guten "
+date: "2026-01-24"
+excerpt: "Beeing serious!"
+image: "/blog/six.jpg"
+---
+
+Hey Guys whats uppp, this was a very good day. i feel exahsutet ihr kleinen Wixxer

apps/public-web/content/posts/23-01-26-thridtest-blog-post.mdx

@@ -2,6 +2,7 @@
 title: "NO THIS IS A JOKE🖕🏼🖕🏼"
 date: "2026-01-25"
 excerpt: "this is the first meaningfull sentence you will here from us."
+image: "/blog/third.jpg"
 ---
 
 hier ist der erste blog von VOYAGE. Pupi ist ein rihcitg krummer pimmel

apps/public-web/lib/posts.ts

@@ -6,6 +6,7 @@ export type PostMeta = {
     title: string;
     date: string;
     excerpt?: string;
+    image?: string;
 };
 
 export type Post = {
@@ -39,7 +40,8 @@ export function getAllPosts(): Post[] {
         const meta: PostMeta = {
             title: String(data.title ?? slug),
             date: String(data.date ?? "1970-01-01"),
-            excerpt: data.excerpt ? String(data.excerpt) : undefined
+            excerpt: data.excerpt ? String(data.excerpt) : undefined,
+            image: data.image ? String(data.image) : undefined
         };
 
         return { slug, meta, content };