From ffce9ba6bbd0ca0855587503e735c33fe173d2ee Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Wed, 8 Apr 2026 09:30:06 +0200
Subject: [PATCH 1/5] feat: implement Materials component and update Home page
 layout

---
 src/app/page.tsx                  | 54 +-------------------------
 src/components/home/materials.tsx | 63 +++++++++++++++++++++++++++++++
 2 files changed, 65 insertions(+), 52 deletions(-)
 create mode 100644 src/components/home/materials.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 62c7213..473d389 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,61 +1,11 @@
-import { FiBook, FiBookOpen, FiClipboard, FiFileText, FiPenTool, FiTriangle, FiUploadCloud } from "react-icons/fi"
-import { CardIcon } from "@/components/card-icon"
 import { Hero } from "@/components/home/hero"
-
-const schoolCards = [
-  { title: "Scuola di Architettura", icon: FiTriangle, size: "md" },
-  { title: "Scuola di Design", icon: FiPenTool, size: "md" },
-  { title: "Scuola di Ingegneria", icon: FiBookOpen, size: "md" },
-] as const
-
-const materialCards = [
-  {
-    title: "Carica",
-    description:
-      "Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo è prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
-    icon: FiUploadCloud,
-    size: "lg",
-  },
-  {
-    title: "Visualizza",
-    description:
-      "Cerca ciò che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
-    icon: FiBookOpen,
-    size: "lg",
-  },
-] as const
-
-const otherCards = [
-  { title: "Dispense", icon: FiBook, size: "sm" },
-  { title: "Appunti", icon: FiFileText, size: "sm" },
-  { title: "Esami", icon: FiClipboard, size: "sm" },
-] as const
+import { Materials } from "@/components/home/materials"
 
 export default function Home() {
   return (
     <main className="w-full">
       <Hero />
-      <div className="mx-auto flex max-w-6xl flex-col gap-12">
-        <section>
-          <div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3">
-            {schoolCards.map((card) => (
-              <CardIcon key={card.title} {...card} href="#" hoverEffect />
-            ))}
-          </div>
-        </section>
-        <section className="flex max-w-4xl flex-col gap-6">
-          <div className="grid gap-32 sm:grid-cols-2">
-            {materialCards.map((card) => (
-              <CardIcon key={card.title} {...card} href="#" />
-            ))}
-          </div>
-          <div className="grid gap-16 sm:grid-cols-3">
-            {otherCards.map((card) => (
-              <CardIcon key={card.title} {...card} href="#" />
-            ))}
-          </div>
-        </section>
-      </div>
+      <Materials />
     </main>
   )
 }
diff --git a/src/components/home/materials.tsx b/src/components/home/materials.tsx
new file mode 100644
index 0000000..2b15892
--- /dev/null
+++ b/src/components/home/materials.tsx
@@ -0,0 +1,63 @@
+import { FiArrowUpRight, FiBook, FiBookOpen, FiClipboard, FiFileText, FiUploadCloud } from "react-icons/fi"
+import { CardIcon } from "@/components/card-icon"
+import { Button } from "@/components/ui/button"
+
+const featuredCards = [
+  {
+    title: "Carica",
+    description:
+      "Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo é prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
+    icon: FiUploadCloud,
+    size: "lg",
+    href: "#",
+  },
+  {
+    title: "Visualizza",
+    description:
+      "Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
+    icon: FiBookOpen,
+    size: "lg",
+    href: "#",
+  },
+] as const
+
+const quickLinks = [
+  { title: "Dispense", icon: FiBook, size: "sm", href: "#" },
+  { title: "Esami", icon: FiFileText, size: "sm", href: "#" },
+  { title: "Appunti", icon: FiClipboard, size: "sm", href: "#" },
+] as const
+
+export function Materials() {
+  return (
+    <section className="mx-auto grid gap-8 px-4 py-10 sm:px-8 sm:py-12 lg:gap-10 lg:px-12 xl:grid-cols-2 xl:items-start xl:gap-12 xl:px-16 2xl:gap-16 2xl:px-32">
+      <div className="order-2 flex flex-col gap-5 lg:gap-6 xl:order-1 xl:gap-8 xl:pt-12 2xl:pt-42">
+        <div className="grid gap-12 md:grid-cols-2 2xl:gap-20">
+          {featuredCards.map((card) => (
+            <CardIcon key={card.title} {...card} className="h-full" />
+          ))}
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 sm:gap-12 lg:grid-cols-3 2xl:gap-20">
+          {quickLinks.map((card) => (
+            <CardIcon key={card.title} {...card} className="h-full" />
+          ))}
+        </div>
+      </div>
+
+      <div className="order-1 flex flex-col items-start gap-8 xl:order-2 xl:justify-self-end">
+        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
+          Materials
+        </h2>
+        <p className="typo-body-large max-w-lg">
+          Il piu grande archivio didattico creato dagli studenti per gli studenti del Politecnico di Milano. Cerca tra
+          migliaia di appunti, dispense, temi d'esame e molto altro. Carica i tuoi file per far crescere la community e
+          trova tutto cio che ti serve, organizzato per corso di studi.
+        </p>
+        <Button variant="primary" size="lg" className="w-fit">
+          Scopri di piu
+          <FiArrowUpRight />
+        </Button>
+      </div>
+    </section>
+  )
+}

From f88c721802012610f344e3fd90fd7ef4662dbaa6 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Wed, 8 Apr 2026 10:27:06 +0200
Subject: [PATCH 2/5] fix: correct padding value in Materials component

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

diff --git a/src/components/home/materials.tsx b/src/components/home/materials.tsx
index 2b15892..01a1cb6 100644
--- a/src/components/home/materials.tsx
+++ b/src/components/home/materials.tsx
@@ -30,7 +30,7 @@ const quickLinks = [
 export function Materials() {
   return (
     <section className="mx-auto grid gap-8 px-4 py-10 sm:px-8 sm:py-12 lg:gap-10 lg:px-12 xl:grid-cols-2 xl:items-start xl:gap-12 xl:px-16 2xl:gap-16 2xl:px-32">
-      <div className="order-2 flex flex-col gap-5 lg:gap-6 xl:order-1 xl:gap-8 xl:pt-12 2xl:pt-42">
+      <div className="order-2 flex flex-col gap-5 lg:gap-6 xl:order-1 xl:gap-8 xl:pt-12 2xl:pt-44">
         <div className="grid gap-12 md:grid-cols-2 2xl:gap-20">
           {featuredCards.map((card) => (
             <CardIcon key={card.title} {...card} className="h-full" />

From c194cbbeb6cfa1ba387ae3df054c489857f5ffd1 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 9 Apr 2026 09:28:47 +0200
Subject: [PATCH 3/5] fix: correct HTML entity in Not Found page

---
 src/app/not-found.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 7f08738..3dabedd 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -5,7 +5,7 @@ export default async function NotFound() {
     <main className="container mx-auto px-4 py-8">
       <h2 className="mb-4 font-bold text-3xl text-accent-foreground">Not Found</h2>
 
-      <p className="mb-4">This page doesn&apos;t exist or is not available yet.</p>
+      <p className="mb-4">This page doesn't exist or is not available yet.</p>
 
       <Link href="/">Go to homepage</Link>
     </main>

From 3f4cd674d8bd7e08598e95dffb485721eb636482 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 9 Apr 2026 09:30:06 +0200
Subject: [PATCH 4/5] Revert "fix: correct HTML entity in Not Found page"

This reverts commit c194cbbeb6cfa1ba387ae3df054c489857f5ffd1.
---
 src/app/not-found.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 3dabedd..7f08738 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -5,7 +5,7 @@ export default async function NotFound() {
     <main className="container mx-auto px-4 py-8">
       <h2 className="mb-4 font-bold text-3xl text-accent-foreground">Not Found</h2>
 
-      <p className="mb-4">This page doesn't exist or is not available yet.</p>
+      <p className="mb-4">This page doesn&apos;t exist or is not available yet.</p>
 
       <Link href="/">Go to homepage</Link>
     </main>

From 2660373028a69ab756cd9486fbe066f0161e0f7e Mon Sep 17 00:00:00 2001
From: Tommaso Morganti <tommaso.morganti01@gmail.com>
Date: Thu, 9 Apr 2026 21:36:21 +0200
Subject: [PATCH 5/5] fix: smaller gap at large screen sizes

---
 src/components/home/materials.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/home/materials.tsx b/src/components/home/materials.tsx
index 01a1cb6..6d2bacb 100644
--- a/src/components/home/materials.tsx
+++ b/src/components/home/materials.tsx
@@ -29,8 +29,8 @@ const quickLinks = [
 
 export function Materials() {
   return (
-    <section className="mx-auto grid gap-8 px-4 py-10 sm:px-8 sm:py-12 lg:gap-10 lg:px-12 xl:grid-cols-2 xl:items-start xl:gap-12 xl:px-16 2xl:gap-16 2xl:px-32">
-      <div className="order-2 flex flex-col gap-5 lg:gap-6 xl:order-1 xl:gap-8 xl:pt-12 2xl:pt-44">
+    <section className="mx-auto flex max-w-500 flex-col-reverse gap-8 px-4 py-10 sm:px-8 sm:py-12 lg:gap-10 lg:px-12 xl:flex-row xl:items-start xl:gap-12 xl:px-16 2xl:gap-32 2xl:px-32">
+      <div className="flex grow flex-col gap-5 lg:gap-6 xl:gap-8 xl:pt-12 2xl:pt-44">
         <div className="grid gap-12 md:grid-cols-2 2xl:gap-20">
           {featuredCards.map((card) => (
             <CardIcon key={card.title} {...card} className="h-full" />
@@ -44,7 +44,7 @@ export function Materials() {
         </div>
       </div>
 
-      <div className="order-1 flex flex-col items-start gap-8 xl:order-2 xl:justify-self-end">
+      <div className="flex flex-col items-start gap-8 xl:justify-self-end">
         <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent">
           Materials
         </h2>