diff --git a/src/app/page.tsx b/src/app/page.tsx
index ee5205f..861fa4b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import { AboutUs } from "@/components/home/about-us"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 import { Projects } from "@/components/home/projects"
+import { CallToAction } from "@/components/ui/call-to-action"
 
 export default function Home() {
   return (
@@ -17,6 +18,7 @@ export default function Home() {
       <Materials />
       <Projects />
       <AboutUs />
+      <CallToAction title="Scopri di più su di noi" href="/about" icon={FiGithub} />
       <div className="mx-auto flex w-fit flex-col items-center gap-4 py-12">
         <DropdownButton
           placeholder="Select language"
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index c66b16d..1c0b8a5 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,9 +1,11 @@
+import { Collection } from "@/components/projects/collection"
 import { CommunityNews } from "@/components/projects/community-news"
 import { Upload } from "@/components/projects/upload"
 
 export default function Home() {
   return (
     <main className="w-full">
+      <Collection />
       <CommunityNews />
       <Upload />
     </main>
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
new file mode 100644
index 0000000..81221e0
--- /dev/null
+++ b/src/components/projects/collection.tsx
@@ -0,0 +1,115 @@
+import { FiArrowDown, FiSearch, FiUploadCloud } from "react-icons/fi"
+import { CardCaption } from "../card-caption"
+import { Button } from "../ui/button"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { Input } from "../ui/input"
+
+const collectionCards = [
+  {
+    title: "Title 1",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 2",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 3",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 4",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 5",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 6",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 7",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectet ur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+  {
+    title: "Title 8",
+    caption:
+      "caption: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.",
+    icon: FiUploadCloud,
+    href: "#",
+  },
+] as const
+
+export function Collection() {
+  return (
+    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-12 px-4 sm:gap-22">
+      <div className="flex flex-col items-center gap-8">
+        <h2 className="typo-headline-medium sm: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="hidden flex-col gap-12 sm:flex">
+        <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+          {collectionCards.map((card) => (
+            <CardCaption key={card.title} {...card} />
+          ))}
+        </div>
+        <div className="flex justify-center">
+          <Button variant="primary" size="lg">
+            Mostra di più
+            <FiArrowDown />
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex w-full items-center justify-center sm:hidden">
+        <Carousel className="w-full">
+          <CarouselContent>
+            {collectionCards.map((card) => (
+              <CarouselItem key={card.title}>
+                <div className="flex justify-center">
+                  <CardCaption {...card} />
+                </div>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselDots className="mt-8" />
+        </Carousel>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 836b8a3..4e51830 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,8 +1,9 @@
-import * as React from "react"
+import type * as React from "react"
 import type { IconType } from "react-icons"
 import { cn } from "@/lib/utils"
 import { CardHoverBackground } from "../card-icon/hover-background"
 import { Glass } from "../glass"
+import { GradientIcon } from "../gradient-icon"
 import { Button } from "./button"
 
 function Card({
@@ -69,27 +70,24 @@ function CardAction({
   iconSize?: "xs" | "sm" | "md" | "lg"
   gradient?: boolean
 }) {
-  const gradientId = React.useId()
+  const sizeClass =
+    iconSize === "xs"
+      ? "h-4 w-4"
+      : iconSize === "sm"
+        ? "h-6 w-6"
+        : iconSize === "md"
+          ? "h-8 w-8"
+          : iconSize === "lg"
+            ? "h-14 w-14"
+            : ""
+
   return (
     <div
       data-slot="card-action"
       className={cn("col-start-2 row-span-2 row-start-1 self-auto justify-self-end", className)}
       {...props}
     >
-      <Icon
-        size={
-          iconSize === "xs"
-            ? "1.125rem"
-            : iconSize === "sm"
-              ? "1.5rem"
-              : iconSize === "md"
-                ? "2rem"
-                : iconSize === "lg"
-                  ? "3.5rem"
-                  : iconSize
-        }
-        {...(gradient ? { fill: `url(#${gradientId})`, stroke: `url(#${gradientId})` } : { stroke: "currentColor" })}
-      />
+      {gradient ? <GradientIcon icon={Icon} className={sizeClass} /> : <Icon className={sizeClass} />}
     </div>
   )
 }