style: update

1 files changed, 60 insertions, 15 deletions

diff --git a/src/pages/Blog.tsx b/src/pages/Blog.tsx
index c950a23..6a5c22c 100644
--- a/src/pages/Blog.tsx
+++ b/src/pages/Blog.tsx
@@ -1,4 +1,12 @@
-import Entry from "../components/Entry";
+import { ArrowRight } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
+import Gallery from "@/components/Gallery";
 
 interface Meta {
   slug: string;
@@ -8,6 +16,14 @@ interface Meta {
   cover?: string;
 }
 
+const images =[
+  { src: "/images/3ds.webp", alt: "Nintendo 3DS", id: 1 },
+  { src: "/images/esp32.webp", alt: "ESP 32", id: 2 },
+  { src: "/images/setup.webp", alt: "Setup", id: 4 },
+  { src: "/images/ocarinaoftime.webp", alt: "Ocarina of Time", id: 6 },
+  { src: "/images/hellsparadise.webp", alt: "Hells paradise", id: 7 }
+]
+
 const postFiles = import.meta.glob("../blog/*.md", { eager: true }) as Record<
   string,
   { attributes: Omit<Meta, "slug"> }
@@ -25,21 +41,50 @@ const posts: Meta[] = Object.entries(postFiles)
 export default function Blog() {
   return (
     <>
-      <title>߸ projects</title>
-      <h1>Blog</h1>
-      <div className="grid grid-cols-2 gap-4 [grid-auto-rows:1fr]">
- 
-      {posts.map((post) => (
-          <Entry
-            title={post.title}
-            excerpt={post.excerpt}
-            cover={post.cover}
-            href={`/blog/${post.slug}`}
-            date={post.date}
-          />
-      ))}
-              </div>
+      <title>Blog</title>
+      <main className="container mx-auto py-12">
+          <h1 className="text-3xl font-semibold mb-4">
+            Blog Posts
+          </h1>
+          <div className="grid gap-6 md:grid-cols-2 lg:gap-8">
+            {posts.map((post) => (
+              <Card className="bg-secondary border border-border p-0" key={post.slug}>
+                <CardHeader className="p-0">
+                  <a
+                    href={`/blog/${post.slug}`}
+                    className="block rounded-t-xl overflow-hidden"
+                  >
+                    <img
+                      src={post.cover}
+                      alt={post.title}
+                      className="h-48 w-full object-cover object-center"
+                      style={{ marginTop: 0, paddingTop: 0 }}
+                    />
+                  </a>
+                </CardHeader>
+                <CardContent className="pb-4 px-6">
+                  <CardTitle className="text-lg font-semibold hover:underline md:text-xl mb-2">
+                    <a href={`/blog/${post.slug}`}>{post.title}</a>
+                  </CardTitle>
+                  <CardDescription className="mb-4">{post.excerpt}</CardDescription>
+                  <a
+                    href={`/blog/${post.slug}`}
+                    className="inline-flex items-center text-foreground font-medium hover:underline text-sm"
+                  >
+                    Read more
+                    <ArrowRight className="ml-2 size-4" />
+                  </a>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
 
+          <section className="mt-12">
+          <h2 className="text-2xl font-semibold mb-6">Some images</h2>
+          <Gallery images={images} />
+        </section>
+        
+      </main>
     </>
   );
 }