feat: add matricole intro

src/app/matricole/page.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from "next"
+import { MatricoleIntro } from "@/components/matricole/intro"
+
+export const metadata: Metadata = {
+  title: "Matricole",
+  description: "Risorse utili, guide e strumenti per le matricole del Politecnico di Milano.",
+}
+
+export default function MatricolePage() {
+  return (
+    <main className="w-full">
+      <MatricoleIntro />
+    </main>
+  )
+}

src/components/header/constants.ts

@@ -18,7 +18,7 @@ export const headerMenuItems: HeaderMenuItem[] = [
     menu: [
       { title: "Groups", href: "#", icon: FiChevronRight },
       { title: "Projects", href: "#", icon: FiChevronRight },
-      { title: "Freshman", href: "#", icon: FiChevronRight },
+      { title: "Freshman", href: "/matricole", icon: FiChevronRight },
       { title: "Associations", href: "#", icon: FiChevronRight },
     ],
   },

src/components/home/hero.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link"
 import { FiNavigation, FiSearch, FiUserPlus } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -26,9 +27,11 @@ export function Hero() {
       </div>
 
       <div className="flex items-end justify-end">
-        <Button variant="tertiaryBlur" size="lg" className="text-blue-secondary">
-          <FiUserPlus />
-          Sei una matricola?
+        <Button variant="tertiaryBlur" size="lg" className="text-blue-secondary" asChild>
+          <Link href="/matricole">
+            <FiUserPlus />
+            Sei una matricola?
+          </Link>
         </Button>
       </div>
     </section>

src/components/matricole/intro.tsx

@@ -0,0 +1,147 @@
+import Image from "next/image"
+import { FiBarChart2, FiMonitor } from "react-icons/fi"
+import bigTealSvg from "@/assets/shapes/big-teal.svg"
+import looperSvg from "@/assets/shapes/looper.svg"
+import { Glass } from "@/components/glass"
+import { GradientIcon, type GradientIconType } from "@/components/gradient-icon"
+import { cn } from "@/lib/utils"
+
+const resources = [
+  {
+    title: "Graduatorie",
+    description: "Controlla i risultati storici e le soglie di accesso per i vari corsi di laurea",
+    icon: FiBarChart2,
+  },
+  {
+    title: "Progetto TOL",
+    description: "Tutte le informazioni sul test di ingresso (TOL) e come prepararsi al meglio.",
+    icon: FiMonitor,
+  },
+] as const
+
+type ResourceCardProps = {
+  title: string
+  description: string
+  icon: GradientIconType
+  className?: string
+}
+
+function ResourceCard({ title, description, icon, className }: ResourceCardProps) {
+  return (
+    <Glass
+      className={cn(
+        "h-full overflow-hidden rounded-rectangles border-white/50 bg-background-blur p-0 text-card-foreground",
+        className
+      )}
+    >
+      <div className="flex min-h-50 flex-col items-start px-6 py-8 sm:px-8 sm:py-10 md:px-10">
+        <GradientIcon icon={icon} className="h-8 w-8" />
+        <h2 className="typo-headline-small mt-4 bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
+          {title}
+        </h2>
+        <p className="typo-body-small mt-5 max-w-60 text-text-primary">{description}</p>
+      </div>
+    </Glass>
+  )
+}
+
+function MatricoleBackground() {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
+      <div className="absolute top-0 left-0 h-[248.3218vw] w-full">
+        <Image
+          src={bigTealSvg}
+          alt=""
+          aria-hidden
+          priority
+          className="absolute max-w-none select-none"
+          style={{
+            top: 0,
+            left: "-26.0417%",
+            width: "56.3657%",
+            height: "22.6987%",
+          }}
+        />
+        <Image
+          src={bigTealSvg}
+          alt=""
+          aria-hidden
+          priority
+          className="absolute max-w-none select-none"
+          style={{
+            top: "-0.1165%",
+            left: "66.7244%",
+            width: "56.3657%",
+            height: "22.6987%",
+          }}
+        />
+        <div
+          className="absolute flex items-center justify-center"
+          style={{
+            top: "-10.1142%",
+            left: "-32.6389%",
+            width: "111.0005%",
+            height: "43.8377%",
+          }}
+        >
+          <Image
+            src={looperSvg}
+            alt=""
+            aria-hidden
+            priority
+            className="max-w-none rotate-[-12.93deg] select-none"
+            style={{
+              width: "83.9224%",
+              height: "82.954%",
+            }}
+          />
+        </div>
+        <div
+          className="absolute flex items-center justify-center"
+          style={{
+            top: "-12.6544%",
+            left: "17.5347%",
+            width: "125.2498%",
+            height: "49.9899%",
+          }}
+        >
+          <Image
+            src={looperSvg}
+            alt=""
+            aria-hidden
+            priority
+            className="max-w-none rotate-[-151.01deg] select-none"
+            style={{
+              width: "74.3748%",
+              height: "72.7469%",
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function MatricoleIntro() {
+  return (
+    <section className="relative isolate flex min-h-screen w-full flex-col items-center overflow-hidden bg-background px-6 pt-40 pb-16 sm:px-10">
+      <MatricoleBackground />
+      <div className="relative z-10 mx-auto flex w-full max-w-275 flex-col items-center">
+        <div className="flex w-full max-w-200 flex-col items-center gap-7 text-center">
+          <h1 className="typo-display-small sm:typo-display-medium md:typo-display-large bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
+            Matricole
+          </h1>
+          <p className="typo-title-medium w-full max-w-135 text-text-primary">
+            Ecco una raccolta curata di risorse utili, guide e strumenti per supportare il tuo percorso.
+          </p>
+        </div>
+
+        <div className="mt-16 grid w-full max-w-205 gap-4 md:grid-cols-2">
+          {resources.map((resource) => (
+            <ResourceCard key={resource.title} {...resource} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}