Add filtering

src/app/(normal)/page.tsx

@@ -1,8 +1,55 @@
+import { ArrowBigRight } from "lucide-react";
 
 export default function Home() {
   return (
-    <div>
-      Home
-    </div>
+    <div className="flex flex-col gap-10 px-4 py-8">
+      {/* Hero Section */}
+      <div className="text-center flex flex-col items-center justify-center mt-10 px-4">
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">
+          Welcome to my place!
+        </h1>
+        <p className="text-muted-foreground max-w-xl text-lg mb-6">
+          I&apos;m an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i&apos;ve created.
+        </p>
+        <p className="text-muted-foreground max-w-xl text-lg mb-6">
+          If you want to commission me<br />you can find all the information you need here:<br /> <a href="https://linktr.ee/gaertan" target="_blank" className="underline text-primary"  ><ArrowBigRight className="w-4 h-4 inline" /> Linktree</a>
+        </p>
+
+        {/* Search */}
+        {/* <div className="relative w-full max-w-lg">
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            <Search className="w-4 h-4" />
+          </span>
+          <Input
+            type="text"
+            placeholder="Search artworks, commissions, pages..."
+            className="p-6 pl-10"
+          />
+        </div> */}
+      </div>
+
+
+      {/* Section Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {/* <p>
+          If you want to commission me you can find all the information you need under following link: <a href="https://linktr.ee/gaertan" target="_blank">Linktree</a>
+        </p> */}
+        {/* {sections.map((section) => (
+          <Link href={section.href} key={section.title}>
+            <Card className="hover:shadow-xl transition-shadow group">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <section.icon className="w-5 h-5 text-muted-foreground group-hover:text-primary" />
+                  {section.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="text-sm text-muted-foreground">
+                {section.description}
+              </CardContent>
+            </Card>
+          </Link>
+        ))} */}
+      </div>
+    </div >
   );
 }