From fc620081a8c1610ff6b9627ef11d1014cf957b06 Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:17:08 +0330
Subject: [PATCH] Import source: vault/app/page

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 vault/app/page.tsx | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 vault/app/page.tsx

diff --git a/vault/app/page.tsx b/vault/app/page.tsx
new file mode 100644
index 0000000..77d9272
--- /dev/null
+++ b/vault/app/page.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Hero } from "@/components/hero";
+import { SnippetCard } from "@/components/snippet-card";
+import { api } from "@/lib/api-client";
+import { Snippet } from "@/lib/types";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+export default function HomePage() {
+  const [snippets, setSnippets] = useState<Snippet[]>([]);
+
+  useEffect(() => {
+    api.listSnippets()
+      .then(({ snippets }) => setSnippets(snippets.slice(0, 3)))
+      .catch(() => setSnippets([]));
+  }, []);
+
+  return (
+    <div>
+      <Hero />
+
+      {snippets.length > 0 && (
+        <section className="mx-auto max-w-6xl px-4 sm:px-6 pb-20">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-bold">Recent snippets</h2>
+            <Link href="/snippets">
+              <Button variant="ghost" className="gap-2 text-muted-foreground hover:text-foreground">
+                View all
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+            </Link>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-3">
+            {snippets.map((snippet, i) => (
+              <SnippetCard key={snippet.id} snippet={snippet} view="grid" index={i} />
+            ))}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}