feat: Materials component and update Home page layout (#59)

* feat: implement Materials component and update Home page layout

* fix: correct padding value in Materials component

* fix: correct HTML entity in Not Found page

* Revert "fix: correct HTML entity in Not Found page"

This reverts commit c194cbb.

* fix: smaller gap at large screen sizes

---------

Co-authored-by: Tommaso Morganti <tommaso.morganti01@gmail.com>

Author: BIA3IA

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>
   )
 }

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 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" />
+          ))}
+        </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="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>
+        <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>
+  )
+}