From e7ea6b08defc58ce7b8642c1965d0cf8922b41a4 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Tue, 14 Apr 2026 12:17:17 +0200
Subject: [PATCH 1/2] feat: add Collection component and integrate into Home
 page

---
 src/app/projects/page.tsx              |   9 +++
 src/components/projects/collection.tsx | 107 +++++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/app/projects/page.tsx
 create mode 100644 src/components/projects/collection.tsx

diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
new file mode 100644
index 0000000..fae4bab
--- /dev/null
+++ b/src/app/projects/page.tsx
@@ -0,0 +1,9 @@
+import { Collection } from "@/components/projects/collection"
+
+export default function Home() {
+  return (
+    <main className="w-full">
+      <Collection />
+    </main>
+  )
+}
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
new file mode 100644
index 0000000..ba1fc7e
--- /dev/null
+++ b/src/components/projects/collection.tsx
@@ -0,0 +1,107 @@
+import { FiArrowDown, FiSearch, FiUploadCloud } from "react-icons/fi"
+import { CardIcon } from "@/components/card-icon"
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+
+// TODO da sostituire con dati veri
+const collectionCards = [
+  {
+    title: "Title 1",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 2",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 3",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 4",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 5",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 6",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 7",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectet ur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+  {
+    title: "Title 8",
+    description:
+      "description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    size: "sm",
+    href: "#",
+  },
+] as const
+
+export function Collection() {
+  return (
+    <section className="mx-auto flex max-w-400 flex-col items-center justify-center gap-22 px-4 py-20">
+      <div className="flex flex-col items-center gap-8">
+        <h2 className="typo-display-medium text-center">Esplora la raccolta completa dei progetti</h2>
+        <div className="flex w-full justify-center">
+          <Input
+            icon={<FiSearch className="h-5 w-5" />}
+            type="text"
+            placeholder="Search by name"
+            aria-label="Search by name"
+            containerClassName="max-w-xl"
+            className="typo-body-medium"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-12">
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {/* TODO sostituire la card con la versione corretta */}
+          {collectionCards.map((card) => (
+            <CardIcon key={card.title} {...card} className="h-full" />
+          ))}
+        </div>
+        <div className="flex justify-center">
+          <Button variant="primary" size="lg">
+            Mostra di più
+            <FiArrowDown />
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}

From f83385effbbdf7c6368b0025f8ad2568cf1d592c Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Tue, 14 Apr 2026 12:32:03 +0200
Subject: [PATCH 2/2] fix: adjust min-height style for Collection component
 section

---
 src/components/projects/collection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
index ba1fc7e..6bd547a 100644
--- a/src/components/projects/collection.tsx
+++ b/src/components/projects/collection.tsx
@@ -73,7 +73,7 @@ const collectionCards = [
 
 export function Collection() {
   return (
-    <section className="mx-auto flex max-w-400 flex-col items-center justify-center gap-22 px-4 py-20">
+    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-22 px-4">
       <div className="flex flex-col items-center gap-8">
         <h2 className="typo-display-medium text-center">Esplora la raccolta completa dei progetti</h2>
         <div className="flex w-full justify-center">