feat: add matricole intro

src/app/matricole/page.tsx

@@ -1,8 +1,16 @@
+import type { Metadata } from "next"
 import { FAQsPage } from "@/components/matricole/faqs"
+import { MatricoleIntro } from "@/components/matricole/intro"
 
-export default function Home() {
+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 />
       <FAQsPage />
     </main>
   )

src/components/card-icon/classes.ts

@@ -1,34 +1,39 @@
 import type { SizeClassMap } from "./types"
 
 export const ICON_SIZE_CLASSES: SizeClassMap = {
+  compact: "h-8 w-8",
   xs: "h-10 w-10",
   sm: "h-14 w-14",
   md: "h-32 w-32",
   lg: "h-44 w-44",
 }
 
 export const CARD_PADDING_WITHOUT_DESCRIPTION: SizeClassMap = {
+  compact: "p-3",
   xs: "p-3",
   sm: "px-8 py-4",
   md: "p-8",
   lg: "p-8",
 }
 
 export const CARD_PADDING_WITH_DESCRIPTION: SizeClassMap = {
+  compact: "px-6 py-8",
   xs: "p-8",
   sm: "p-8",
   md: "p-8",
   lg: "p-8",
 }
 
 export const CONTENT_GAP_CLASSES: SizeClassMap = {
+  compact: "gap-4",
   xs: "gap-2",
   sm: "gap-2",
   md: "gap-6",
   lg: "gap-6",
 }
 
 export const TITLE_SIZE_CLASSES: SizeClassMap = {
+  compact: "typo-headline-small",
   xs: "typo-label-large",
   sm: "typo-headline-medium",
   md: "typo-headline-medium",

src/components/card-icon/index.tsx

@@ -7,10 +7,26 @@ import type { CardIconProps } from "./types"
 import { getCardPaddingClasses, getContentGapClasses, getTitleSizeClasses } from "./utils"
 
 export function CardIcon(props: CardIconProps) {
-  const { title, icon, size = "md", href, hoverEffect = false, className } = props
+  const { title, icon, size = "md", href, hoverEffect = false, align = "center", className } = props
   const description = "description" in props ? props.description : undefined
   const Root = href ? "a" : "div"
   const isDescriptionCard = Boolean(description)
+  const isStartAligned = align === "start"
+  const isCompactDescriptionCard = isDescriptionCard && size === "compact"
+  const contentAlignmentClass = isDescriptionCard
+    ? isStartAligned
+      ? "items-start justify-start text-left"
+      : "justify-between"
+    : isStartAligned
+      ? "items-start justify-center text-left"
+      : "items-center justify-center text-center"
+  const textAlignmentClass = isDescriptionCard
+    ? isStartAligned
+      ? "items-start gap-5 text-left"
+      : "gap-2 text-left"
+    : isStartAligned
+      ? "items-start text-left"
+      : "items-center text-center"
 
   return (
     <Glass
@@ -29,31 +45,36 @@ export function CardIcon(props: CardIconProps) {
         {hoverEffect && <CardHoverBackground />}
 
         <div
-          className={cn(
-            "relative z-10 flex h-full flex-1 flex-col",
-            getContentGapClasses(size),
-            isDescriptionCard ? "justify-between" : "items-center justify-center text-center"
-          )}
+          className={cn("relative z-10 flex h-full flex-1 flex-col", getContentGapClasses(size), contentAlignmentClass)}
         >
-          <div className="flex justify-center">
+          <div className={cn("flex", isStartAligned ? "justify-start" : "justify-center")}>
             {isDescriptionCard ? (
               <DescriptionCardMedia icon={icon} size={size} />
             ) : (
               <BasicCardMedia icon={icon} size={size} />
             )}
           </div>
 
-          <div className={cn("flex flex-col", isDescriptionCard ? "gap-2 text-left" : "items-center text-center")}>
+          <div className={cn("flex flex-col", textAlignmentClass)}>
             <h3
               className={cn(
                 getTitleSizeClasses(size),
                 "bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent",
-                isDescriptionCard ? "text-left" : "text-center"
+                isDescriptionCard || isStartAligned ? "text-left" : "text-center"
               )}
             >
               {title}
             </h3>
-            {description && <p className="typo-body-medium max-w-sm text-left text-text-primary">{description}</p>}
+            {description && (
+              <p
+                className={cn(
+                  "text-left text-text-primary",
+                  isCompactDescriptionCard ? "typo-body-small max-w-60" : "typo-body-medium max-w-sm"
+                )}
+              >
+                {description}
+              </p>
+            )}
           </div>
         </div>
       </Root>

src/components/card-icon/types.ts

@@ -1,7 +1,8 @@
 import type { GradientIconType } from "@/components/gradient-icon"
 
-export type CardSize = "xs" | "sm" | "md" | "lg"
+export type CardSize = "compact" | "xs" | "sm" | "md" | "lg"
 export type CardBreakpoint = "base" | "sm" | "md" | "lg"
+export type CardAlign = "center" | "start"
 
 export type SizeClassMap = Record<CardSize, string>
 
@@ -18,6 +19,7 @@ export type SharedCardProps = {
   title: string
   icon: GradientIconType
   size?: ResponsiveCardSize
+  align?: CardAlign
   href?: string
   hoverEffect?: boolean
   className?: string

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/faqs.tsx

@@ -37,14 +37,14 @@ const accordionItems: AccordionListItem[] = [
 
 export function FAQsPage() {
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-16 px-9 py-49 sm:gap-20">
+    <section className="mx-auto flex w-full max-w-400 flex-col items-center justify-center gap-16 px-9 py-49 sm:gap-20">
       <h2 className="typo-headline-medium sm:typo-display-medium text-center text-text-primary">
         Domande Frequenti tra le Matricole
       </h2>
 
       <div className="mx-auto flex w-full max-w-255 flex-col">
         <AccordionList items={accordionItems} />
       </div>
-    </main>
+    </section>
   )
 }

src/components/matricole/intro.tsx

@@ -0,0 +1,38 @@
+import { FiBarChart2, FiMonitor } from "react-icons/fi"
+import { CardIcon } from "@/components/card-icon"
+
+const resources = [
+  {
+    title: "Graduatorie",
+    description: "Risultati storici e soglie di accesso per i vari corsi di laurea.",
+    icon: FiBarChart2,
+  },
+  {
+    title: "Progetto TOL",
+    description: "Informazioni sul test di ingresso (TOL) e su come prepararsi al meglio.",
+    icon: FiMonitor,
+  },
+] as const
+
+export function MatricoleIntro() {
+  return (
+    <section className="flex min-h-screen w-full flex-col items-center px-6 pt-40 pb-16 sm:px-10">
+      <div className="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-6 text-center">
+          <h1 className="typo-display-large md:typo-display-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent">
+            Matricole
+          </h1>
+          <p className="typo-title-large md:typo-headline-small 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-30 grid w-full max-w-205 gap-6 md:grid-cols-2">
+          {resources.map((resource) => (
+            <CardIcon key={resource.title} {...resource} align="start" className="h-full min-h-50" size="compact" />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}