From 3f2a904fffa2128c2ac882b7b8c43034389501bb Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Tue, 12 May 2026 16:17:15 +0200
Subject: [PATCH 01/10] feat: restructure FAQ items to include accordion items
 for better organization

---
 src/app/faqs/page.tsx | 198 ++++++++++++++++++++++++------------------
 1 file changed, 114 insertions(+), 84 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index e3dbc0f..1219c03 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -1,108 +1,138 @@
 "use client"
 
+import type { IconType } from "react-icons"
 import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
 import AccordionList from "@/components/accordion-list"
+import type { AccordionListItem } from "@/components/accordion-list/types"
 import CalloutItem from "@/components/callout-item"
 import TabsNavigation from "@/components/tabs"
 import { Tabs } from "@/components/tabs/tabs"
 import { TabsContent } from "@/components/tabs/tabs-content"
 
-const faqItems = [
-  {
-    value: "tab1",
-    label: "Lezioni",
-    content: "Content for Tab 1",
-    icon: FiBookOpen,
-  },
-  {
-    value: "tab2",
-    label: "Tasse",
-    content: "Content for Tab 2",
-    icon: FiDollarSign,
-  },
-  {
-    value: "tab3",
-    label: "Esami",
-    content: "Content for Tab 3",
-    icon: FiEdit,
-  },
-  {
-    value: "tab4",
-    label: "Piano di Studi",
-    content: "Content for Tab 4",
-    icon: FiFileText,
-  },
-  {
-    value: "tab5",
-    label: "Mobilitá Internazionale",
-    content: (
-      <div className="flex flex-col items-start py-4">
-        <h1 className="typo-title-large">Content for Tab 5</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.
-        </p>
-      </div>
-    ),
-    icon: FiSend,
-  },
-]
-
-const accordionItems = [
-  {
-    value: "item-1",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-2",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-3",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-4",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-5",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-]
+const faqItems: {
+  value: string
+  label: string
+  icon: IconType
+  accordionItems: AccordionListItem[]
+}[] = [
+    {
+      value: "tab1",
+      label: "Lezioni",
+      icon: FiBookOpen,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab2",
+      label: "Tasse",
+      icon: FiDollarSign,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab3",
+      label: "Esami",
+      icon: FiEdit,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab4",
+      label: "Piano di Studi",
+      icon: FiFileText,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab5",
+      label: "Mobilitá Internazionale",
+      icon: FiSend,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-2",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-3",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-4",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-5",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+  ]
 
 export default function FAQsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto w-225 py-12">
-        <AccordionList items={accordionItems} defaultValue="item-1" />
+    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-24 px-4 py-49">
+      <div className="flex flex-col items-center gap-6">
+        <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 sm:py-14">
+          FAQs
+        </h2>
+        <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">
+          Risposte chiare per vivere al meglio la community
+        </p>
       </div>
-      <div className="mx-auto w-225 py-12">
-        <Tabs defaultValue="tab5" className="flex flex-col items-center">
-          <TabsNavigation items={faqItems} />
+
+      <div className="mx-auto flex w-full max-w-255 flex-col gap-79">
+        <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
+          <TabsNavigation items={faqItems} className="mx-auto mb-19" />
           {faqItems.map((item) => (
-            <TabsContent value={item.value} key={item.value}>
-              {item.content}
+            <TabsContent value={item.value} key={item.value} className="w-full min-w-0 self-stretch">
+              <AccordionList items={item.accordionItems} defaultValue={item.accordionItems[0]?.value} />
             </TabsContent>
           ))}
         </Tabs>
-      </div>
-      <div className="flex flex-col items-center py-12">
+
         <CalloutItem
           title="Non trovi ciò che stai cercando?"
           href="/guides"
           buttonText="Esplora le Guide"
-          className="max-w-4xl"
+          className="w-full"
         />
       </div>
     </main>

From 50d7c937a8fcb1aea2bdb23a4496c4adf26e554a Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Tue, 12 May 2026 17:05:21 +0200
Subject: [PATCH 02/10] feat: update FAQ layout and improve responsiveness of
 callout item button

---
 src/app/faqs/page.tsx                | 13 +++++++++----
 src/components/callout-item/types.ts |  4 +++-
 src/components/tabs/tabs-list.tsx    | 16 ++++++++++++----
 src/components/ui/item.tsx           |  2 +-
 4 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 1219c03..9139728 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -118,11 +118,11 @@ export default function FAQsPage() {
         </p>
       </div>
 
-      <div className="mx-auto flex w-full max-w-255 flex-col gap-79">
+      <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
         <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
-          <TabsNavigation items={faqItems} className="mx-auto mb-19" />
+          <TabsNavigation items={faqItems} className="mb-19" />
           {faqItems.map((item) => (
-            <TabsContent value={item.value} key={item.value} className="w-full min-w-0 self-stretch">
+            <TabsContent value={item.value} key={item.value} className="w-full min-w-0">
               <AccordionList items={item.accordionItems} defaultValue={item.accordionItems[0]?.value} />
             </TabsContent>
           ))}
@@ -131,7 +131,12 @@ export default function FAQsPage() {
         <CalloutItem
           title="Non trovi ciò che stai cercando?"
           href="/guides"
-          buttonText="Esplora le Guide"
+          buttonText={
+            <>
+              <span className="sm:hidden">Guide</span>
+              <span className="hidden sm:inline">Esplora le Guide</span>
+            </>
+          }
           className="w-full"
         />
       </div>
diff --git a/src/components/callout-item/types.ts b/src/components/callout-item/types.ts
index e4d35f8..f78554d 100644
--- a/src/components/callout-item/types.ts
+++ b/src/components/callout-item/types.ts
@@ -1,6 +1,8 @@
+import type React from "react"
+
 export type CalloutItemProps = {
   title: string
   href: string
-  buttonText: string
+  buttonText: React.ReactNode
   className?: string
 }
diff --git a/src/components/tabs/tabs-list.tsx b/src/components/tabs/tabs-list.tsx
index 804ef07..7c3a070 100644
--- a/src/components/tabs/tabs-list.tsx
+++ b/src/components/tabs/tabs-list.tsx
@@ -6,15 +6,23 @@ import { Glass } from "../glass"
 
 export function TabsList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
   return (
-    <TabsPrimitive.List data-slot="tabs-list" {...props}>
+    <div className="w-full sm:flex sm:justify-center">
       <Glass
         className={cn(
-          "inline-flex items-center gap-2 rounded-3xl border-white/50 bg-background-blur p-2.5 text-card-foreground",
+          "w-full overflow-hidden rounded-3xl border-white/50 bg-background-blur p-2.5 text-card-foreground sm:w-fit",
           className
         )}
       >
-        {children}
+        <div className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          <TabsPrimitive.List
+            data-slot="tabs-list"
+            className="flex min-w-max items-center gap-2"
+            {...props}
+          >
+            {children}
+          </TabsPrimitive.List>
+        </div>
       </Glass>
-    </TabsPrimitive.List>
+    </div>
   )
 }
diff --git a/src/components/ui/item.tsx b/src/components/ui/item.tsx
index 9ee61ab..6d6ae40 100644
--- a/src/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -27,7 +27,7 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<"p">) {
-  return <p data-slot="item-title" className={cn("typo-title-medium text-blue-secondary", className)} {...props} />
+  return <p data-slot="item-title" className={cn("typo-label-small sm:typo-title-medium text-blue-secondary", className)} {...props} />
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {

From 13a0c25ddf26d6be6e532402fe7ab0db4c4ec48c Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Tue, 12 May 2026 17:07:16 +0200
Subject: [PATCH 03/10] feat: biome fix

---
 src/app/faqs/page.tsx             | 180 +++++++++++++++---------------
 src/components/tabs/tabs-list.tsx |   6 +-
 src/components/ui/item.tsx        |   8 +-
 3 files changed, 98 insertions(+), 96 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 9139728..f9acdd0 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -15,96 +15,96 @@ const faqItems: {
   icon: IconType
   accordionItems: AccordionListItem[]
 }[] = [
-    {
-      value: "tab1",
-      label: "Lezioni",
-      icon: FiBookOpen,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab2",
-      label: "Tasse",
-      icon: FiDollarSign,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab3",
-      label: "Esami",
-      icon: FiEdit,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab4",
-      label: "Piano di Studi",
-      icon: FiFileText,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab5",
-      label: "Mobilitá Internazionale",
-      icon: FiSend,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-2",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-3",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-4",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-5",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-  ]
+  {
+    value: "tab1",
+    label: "Lezioni",
+    icon: FiBookOpen,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab2",
+    label: "Tasse",
+    icon: FiDollarSign,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab3",
+    label: "Esami",
+    icon: FiEdit,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab4",
+    label: "Piano di Studi",
+    icon: FiFileText,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab5",
+    label: "Mobilitá Internazionale",
+    icon: FiSend,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-2",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-3",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-4",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-5",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+]
 
 export default function FAQsPage() {
   return (
diff --git a/src/components/tabs/tabs-list.tsx b/src/components/tabs/tabs-list.tsx
index 7c3a070..5b47946 100644
--- a/src/components/tabs/tabs-list.tsx
+++ b/src/components/tabs/tabs-list.tsx
@@ -14,11 +14,7 @@ export function TabsList({ className, children, ...props }: React.ComponentProps
         )}
       >
         <div className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          <TabsPrimitive.List
-            data-slot="tabs-list"
-            className="flex min-w-max items-center gap-2"
-            {...props}
-          >
+          <TabsPrimitive.List data-slot="tabs-list" className="flex min-w-max items-center gap-2" {...props}>
             {children}
           </TabsPrimitive.List>
         </div>
diff --git a/src/components/ui/item.tsx b/src/components/ui/item.tsx
index 6d6ae40..6e9fe15 100644
--- a/src/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -27,7 +27,13 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<"p">) {
-  return <p data-slot="item-title" className={cn("typo-label-small sm:typo-title-medium text-blue-secondary", className)} {...props} />
+  return (
+    <p
+      data-slot="item-title"
+      className={cn("typo-label-small sm:typo-title-medium text-blue-secondary", className)}
+      {...props}
+    />
+  )
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {

From 821a205d2be613e587a78f9776c0cfe59d72ae05 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Mon, 18 May 2026 02:26:33 +0200
Subject: [PATCH 04/10] feat: faqs tabs mobile view

---
 src/app/faqs/page.tsx             | 7 +++++--
 src/components/tabs/tabs-list.tsx | 4 ++--
 src/styles/globals.css            | 7 +++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index f9acdd0..61e7008 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -69,7 +69,7 @@ const faqItems: {
   },
   {
     value: "tab5",
-    label: "Mobilitá Internazionale",
+    label: "Mobilità Internazionale",
     icon: FiSend,
     accordionItems: [
       {
@@ -120,7 +120,10 @@ export default function FAQsPage() {
 
       <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
         <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
-          <TabsNavigation items={faqItems} className="mb-19" />
+          <TabsNavigation
+            items={faqItems}
+            className="max-sm:-mx-2 mb-19 max-sm:w-[calc(100%+1rem)] max-sm:rounded-none"
+          />
           {faqItems.map((item) => (
             <TabsContent value={item.value} key={item.value} className="w-full min-w-0">
               <AccordionList items={item.accordionItems} defaultValue={item.accordionItems[0]?.value} />
diff --git a/src/components/tabs/tabs-list.tsx b/src/components/tabs/tabs-list.tsx
index 5b47946..6164f78 100644
--- a/src/components/tabs/tabs-list.tsx
+++ b/src/components/tabs/tabs-list.tsx
@@ -9,12 +9,12 @@ export function TabsList({ className, children, ...props }: React.ComponentProps
     <div className="w-full sm:flex sm:justify-center">
       <Glass
         className={cn(
-          "w-full overflow-hidden rounded-3xl border-white/50 bg-background-blur p-2.5 text-card-foreground sm:w-fit",
+          "scroll-fade-x w-full overflow-hidden rounded-3xl border-white/50 bg-background-blur px-0 py-2.5 text-card-foreground sm:w-fit",
           className
         )}
       >
         <div className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          <TabsPrimitive.List data-slot="tabs-list" className="flex min-w-max items-center gap-2" {...props}>
+          <TabsPrimitive.List data-slot="tabs-list" className="flex min-w-max items-center gap-2 px-6" {...props}>
             {children}
           </TabsPrimitive.List>
         </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 106db5a..63bf90c 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -19,3 +19,10 @@
     cursor: pointer;
   }
 }
+
+@media (max-width: 639px) {
+  .scroll-fade-x {
+    mask-image: linear-gradient(to right, transparent, black 36px, black calc(100% - 36px), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 36px, black calc(100% - 36px), transparent);
+  }
+}

From eb2dcf96c80452f3d6847cac2025dbb83c289c73 Mon Sep 17 00:00:00 2001
From: diubi <alessandroogioiaa@gmail.com>
Date: Mon, 18 May 2026 02:41:29 +0200
Subject: [PATCH 05/10] tweak: padding and fade

---
 src/app/faqs/page.tsx             | 2 +-
 src/components/tabs/tabs-list.tsx | 6 +++++-
 src/styles/globals.css            | 7 ++++---
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 61e7008..0d35784 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -122,7 +122,7 @@ export default function FAQsPage() {
         <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
           <TabsNavigation
             items={faqItems}
-            className="max-sm:-mx-2 mb-19 max-sm:w-[calc(100%+1rem)] max-sm:rounded-none"
+            className="max-md:-mx-2 mb-19 max-md:w-[calc(100%+1rem)] max-md:rounded-none"
           />
           {faqItems.map((item) => (
             <TabsContent value={item.value} key={item.value} className="w-full min-w-0">
diff --git a/src/components/tabs/tabs-list.tsx b/src/components/tabs/tabs-list.tsx
index 6164f78..5a8a09c 100644
--- a/src/components/tabs/tabs-list.tsx
+++ b/src/components/tabs/tabs-list.tsx
@@ -14,7 +14,11 @@ export function TabsList({ className, children, ...props }: React.ComponentProps
         )}
       >
         <div className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-          <TabsPrimitive.List data-slot="tabs-list" className="flex min-w-max items-center gap-2 px-6" {...props}>
+          <TabsPrimitive.List
+            data-slot="tabs-list"
+            className="flex min-w-max items-center gap-2 px-2.5 max-md:px-10"
+            {...props}
+          >
             {children}
           </TabsPrimitive.List>
         </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 63bf90c..7a75c32 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -20,9 +20,10 @@
   }
 }
 
-@media (max-width: 639px) {
+@media (max-width: 767px) {
+  /* max-md */
   .scroll-fade-x {
-    mask-image: linear-gradient(to right, transparent, black 36px, black calc(100% - 36px), transparent);
-    -webkit-mask-image: linear-gradient(to right, transparent, black 36px, black calc(100% - 36px), transparent);
+    mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 36px), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
   }
 }

From 9842073fe4e538bf49af93384d12b37636fe0c71 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Fri, 22 May 2026 10:15:37 +0200
Subject: [PATCH 06/10] feat: add Hero component and integrate it into
 Associations, CommunityNews, and Deprecated pages

---
 src/app/associations/page.tsx              | 19 ++++++-------------
 src/components/projects/collection.tsx     |  2 +-
 src/components/projects/community-news.tsx | 10 ++--------
 src/components/projects/deprecated.tsx     |  2 +-
 src/components/ui/hero.tsx                 | 12 ++++++++++++
 5 files changed, 22 insertions(+), 23 deletions(-)
 create mode 100644 src/components/ui/hero.tsx

diff --git a/src/app/associations/page.tsx b/src/app/associations/page.tsx
index e0553bb..df87e64 100644
--- a/src/app/associations/page.tsx
+++ b/src/app/associations/page.tsx
@@ -12,6 +12,7 @@ import {
   FiYoutube,
 } from "react-icons/fi"
 import AccordionAssociation from "@/components/accordion-association"
+import { Hero } from "@/components/ui/hero"
 import esnLogo from "../../../public/logos/esn.svg"
 
 const accordionItems = [
@@ -158,19 +159,11 @@ const accordionItems = [
 
 export default function AssociationsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
-        <div className="flex flex-col items-center gap-6">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent md:py-14">
-            Associazioni
-          </h2>
-          <p className="typo-title-large md:typo-headline-small max-w-2xl text-center">
-            Scopri le associazioni studentesche del Politecnico
-          </p>
-        </div>
-        <div className="w-full max-w-300">
-          <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
-        </div>
+    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
+      <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+
+      <div className="w-full max-w-300">
+        <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
       </div>
     </main>
   )
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
index 81221e0..81c651d 100644
--- a/src/components/projects/collection.tsx
+++ b/src/components/projects/collection.tsx
@@ -83,7 +83,7 @@ export function Collection() {
       </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">
+        <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
           {collectionCards.map((card) => (
             <CardCaption key={card.title} {...card} />
           ))}
diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx
index f5881ff..1aa9e9b 100644
--- a/src/components/projects/community-news.tsx
+++ b/src/components/projects/community-news.tsx
@@ -1,6 +1,7 @@
 import { FiCrop } from "react-icons/fi"
 import { CardCaption } from "../card-caption"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { Hero } from "../ui/hero"
 
 const communityCards = [
   {
@@ -36,14 +37,7 @@ const communityCards = [
 export function CommunityNews() {
   return (
     <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
-      <div className="flex flex-col items-center gap-6">
-        <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 sm:py-14">
-          Projects
-        </h2>
-        <p className="typo-title-large sm:typo-headline-small max-w-xl text-center">
-          Esplora e contribuisci ai progetti degli studenti
-        </p>
-      </div>
+      <Hero title="Projects" description=" Esplora e contribuisci ai progetti degli studenti" />
 
       <div className="mx-auto flex w-full flex-col gap-14 sm:w-fit">
         <div className="flex flex-col items-center gap-2 sm:items-start">
diff --git a/src/components/projects/deprecated.tsx b/src/components/projects/deprecated.tsx
index ebff0a9..67a3c07 100644
--- a/src/components/projects/deprecated.tsx
+++ b/src/components/projects/deprecated.tsx
@@ -47,7 +47,7 @@ export function Deprecated() {
         </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">
+          <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
             {communityCards.map((card) => (
               <CardCaption key={card.title} {...card} />
             ))}
diff --git a/src/components/ui/hero.tsx b/src/components/ui/hero.tsx
new file mode 100644
index 0000000..af6de27
--- /dev/null
+++ b/src/components/ui/hero.tsx
@@ -0,0 +1,12 @@
+export function Hero({ title, description }: { title: string; description: string }) {
+    return (
+        <div className="flex flex-col items-center gap-6">
+            <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 sm:py-14">
+                {title}
+            </h2>
+            <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">
+                {description}
+            </p>
+        </div>
+    )
+}
\ No newline at end of file

From f2f6ea3cb1e4d0813a771ffc98aed9ae49802587 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Fri, 22 May 2026 10:18:53 +0200
Subject: [PATCH 07/10] feat: remove unused CarouselMock component from Home
 page

---
 src/components/home/carousel-mock.tsx | 49 ---------------------------
 1 file changed, 49 deletions(-)
 delete mode 100644 src/components/home/carousel-mock.tsx

diff --git a/src/components/home/carousel-mock.tsx b/src/components/home/carousel-mock.tsx
deleted file mode 100644
index c4f9758..0000000
--- a/src/components/home/carousel-mock.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client"
-
-import { CardCaption } from "@/components/card-caption"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
-
-const mockCards = [
-  {
-    title: "WeBeepSync",
-    caption:
-      "WeBeep Sync è una semplice app, user-friendly e senza compromessi che serve per tenere sincronizzati tutti i tuoi file di WeBeep.",
-  },
-  {
-    title: "PolimiSchedule",
-    caption:
-      "Genera un file iCalendar (.ics) a partire dal formato testuale dell’Orario delle lezioni. Possibilità di importare su Google Calendar.",
-  },
-  {
-    title: "WiFiLinux",
-    caption: "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi.",
-  },
-  {
-    title: "The TOL Project",
-    caption: "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.",
-  },
-] as const
-
-// TODO: delete this when merging
-export function CarouselMock() {
-  return (
-    <section className="mx-auto flex min-h-screen w-full max-w-4xl flex-col items-center justify-center gap-16 px-7.5">
-      <h1 className="typo-headline-medium sm:typo-display-large bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
-        PoliNetwork
-      </h1>
-
-      <Carousel className="w-full">
-        <CarouselContent>
-          {mockCards.map((card) => (
-            <CarouselItem key={card.title}>
-              <div className="flex justify-center">
-                <CardCaption {...card} />
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselDots className="mt-8" />
-      </Carousel>
-    </section>
-  )
-}

From c77ef1d8fdf746a62799180d09261fac9b3af2ad Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Fri, 22 May 2026 10:20:19 +0200
Subject: [PATCH 08/10] style: format Hero component for improved readability

---
 src/components/ui/hero.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/hero.tsx b/src/components/ui/hero.tsx
index af6de27..d4ebc4b 100644
--- a/src/components/ui/hero.tsx
+++ b/src/components/ui/hero.tsx
@@ -1,12 +1,10 @@
 export function Hero({ title, description }: { title: string; description: string }) {
-    return (
-        <div className="flex flex-col items-center gap-6">
-            <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 sm:py-14">
-                {title}
-            </h2>
-            <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">
-                {description}
-            </p>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <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 sm:py-14">
+        {title}
+      </h2>
+      <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">{description}</p>
+    </div>
+  )
+}

From df320ea1da0577e7a18849d747bed52119a3e921 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 28 May 2026 16:37:07 +0200
Subject: [PATCH 09/10] fix: update FAQs link in header menu to point to the
 correct route

---
 src/app/faqs/page.tsx              | 186 +++++++++++++++--------------
 src/components/header/constants.ts |   2 +-
 2 files changed, 97 insertions(+), 91 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 0d35784..3532cf2 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import type { Metadata } from "next"
 import type { IconType } from "react-icons"
 import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
 import AccordionList from "@/components/accordion-list"
@@ -9,102 +10,107 @@ import TabsNavigation from "@/components/tabs"
 import { Tabs } from "@/components/tabs/tabs"
 import { TabsContent } from "@/components/tabs/tabs-content"
 
+export const metadata: Metadata = {
+  title: "FAQs",
+  description: "Risposte chiare per vivere al meglio la community",
+}
+
 const faqItems: {
   value: string
   label: string
   icon: IconType
   accordionItems: AccordionListItem[]
 }[] = [
-  {
-    value: "tab1",
-    label: "Lezioni",
-    icon: FiBookOpen,
-    accordionItems: [
-      {
-        value: "item-1",
-        trigger: "Per le lauree le lezioni sono sospese?",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-    ],
-  },
-  {
-    value: "tab2",
-    label: "Tasse",
-    icon: FiDollarSign,
-    accordionItems: [
-      {
-        value: "item-1",
-        trigger: "Per le lauree le lezioni sono sospese?",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-    ],
-  },
-  {
-    value: "tab3",
-    label: "Esami",
-    icon: FiEdit,
-    accordionItems: [
-      {
-        value: "item-1",
-        trigger: "Per le lauree le lezioni sono sospese?",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-    ],
-  },
-  {
-    value: "tab4",
-    label: "Piano di Studi",
-    icon: FiFileText,
-    accordionItems: [
-      {
-        value: "item-1",
-        trigger: "Per le lauree le lezioni sono sospese?",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-    ],
-  },
-  {
-    value: "tab5",
-    label: "Mobilità Internazionale",
-    icon: FiSend,
-    accordionItems: [
-      {
-        value: "item-1",
-        trigger: "Per le lauree le lezioni sono sospese? ",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-      {
-        value: "item-2",
-        trigger: "Per le lauree le lezioni sono sospese? ",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-      {
-        value: "item-3",
-        trigger: "Per le lauree le lezioni sono sospese? ",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-      {
-        value: "item-4",
-        trigger: "Per le lauree le lezioni sono sospese? ",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-      {
-        value: "item-5",
-        trigger: "Per le lauree le lezioni sono sospese? ",
-        content:
-          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-      },
-    ],
-  },
-]
+    {
+      value: "tab1",
+      label: "Lezioni",
+      icon: FiBookOpen,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab2",
+      label: "Tasse",
+      icon: FiDollarSign,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab3",
+      label: "Esami",
+      icon: FiEdit,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab4",
+      label: "Piano di Studi",
+      icon: FiFileText,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese?",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+    {
+      value: "tab5",
+      label: "Mobilità Internazionale",
+      icon: FiSend,
+      accordionItems: [
+        {
+          value: "item-1",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-2",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-3",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-4",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+        {
+          value: "item-5",
+          trigger: "Per le lauree le lezioni sono sospese? ",
+          content:
+            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+        },
+      ],
+    },
+  ]
 
 export default function FAQsPage() {
   return (
diff --git a/src/components/header/constants.ts b/src/components/header/constants.ts
index 38a1e4f..d65fef6 100644
--- a/src/components/header/constants.ts
+++ b/src/components/header/constants.ts
@@ -8,7 +8,7 @@ export const headerMenuItems: HeaderMenuItem[] = [
       { title: "Materials", href: "#", icon: FiChevronRight },
       { title: "Guides", href: "#", icon: FiChevronRight },
       { title: "Computer Recs", href: "#", icon: FiChevronRight },
-      { title: "FAQs", href: "#", icon: FiChevronRight },
+      { title: "FAQs", href: "/faqs", icon: FiChevronRight },
       { title: "Rankings", href: "#", icon: FiArrowUpRight },
       { title: "Tol Project", href: "#", icon: FiArrowUpRight },
     ],

From 8fd177f0c2a943b220e8e0faab10967cb780c960 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 28 May 2026 16:44:15 +0200
Subject: [PATCH 10/10] fix: move client logic to FaqsTabs component to allow
 metadata export

---
 src/app/faqs/page.tsx             | 145 +-----------------------------
 src/components/faqs/faqs-tabs.tsx | 137 ++++++++++++++++++++++++++++
 2 files changed, 141 insertions(+), 141 deletions(-)
 create mode 100644 src/components/faqs/faqs-tabs.tsx

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 3532cf2..e05776f 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -1,154 +1,17 @@
-"use client"
-
 import type { Metadata } from "next"
-import type { IconType } from "react-icons"
-import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
-import AccordionList from "@/components/accordion-list"
-import type { AccordionListItem } from "@/components/accordion-list/types"
-import CalloutItem from "@/components/callout-item"
-import TabsNavigation from "@/components/tabs"
-import { Tabs } from "@/components/tabs/tabs"
-import { TabsContent } from "@/components/tabs/tabs-content"
+import { FaqsTabs } from "@/components/faqs/faqs-tabs"
+import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
   title: "FAQs",
   description: "Risposte chiare per vivere al meglio la community",
 }
 
-const faqItems: {
-  value: string
-  label: string
-  icon: IconType
-  accordionItems: AccordionListItem[]
-}[] = [
-    {
-      value: "tab1",
-      label: "Lezioni",
-      icon: FiBookOpen,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab2",
-      label: "Tasse",
-      icon: FiDollarSign,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab3",
-      label: "Esami",
-      icon: FiEdit,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab4",
-      label: "Piano di Studi",
-      icon: FiFileText,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese?",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-    {
-      value: "tab5",
-      label: "Mobilità Internazionale",
-      icon: FiSend,
-      accordionItems: [
-        {
-          value: "item-1",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-2",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-3",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-4",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-        {
-          value: "item-5",
-          trigger: "Per le lauree le lezioni sono sospese? ",
-          content:
-            "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
-        },
-      ],
-    },
-  ]
-
 export default function FAQsPage() {
   return (
     <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-24 px-4 py-49">
-      <div className="flex flex-col items-center gap-6">
-        <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 sm:py-14">
-          FAQs
-        </h2>
-        <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">
-          Risposte chiare per vivere al meglio la community
-        </p>
-      </div>
-
-      <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
-        <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
-          <TabsNavigation
-            items={faqItems}
-            className="max-md:-mx-2 mb-19 max-md:w-[calc(100%+1rem)] max-md:rounded-none"
-          />
-          {faqItems.map((item) => (
-            <TabsContent value={item.value} key={item.value} className="w-full min-w-0">
-              <AccordionList items={item.accordionItems} defaultValue={item.accordionItems[0]?.value} />
-            </TabsContent>
-          ))}
-        </Tabs>
-
-        <CalloutItem
-          title="Non trovi ciò che stai cercando?"
-          href="/guides"
-          buttonText={
-            <>
-              <span className="sm:hidden">Guide</span>
-              <span className="hidden sm:inline">Esplora le Guide</span>
-            </>
-          }
-          className="w-full"
-        />
-      </div>
+      <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
+      <FaqsTabs />
     </main>
   )
 }
diff --git a/src/components/faqs/faqs-tabs.tsx b/src/components/faqs/faqs-tabs.tsx
new file mode 100644
index 0000000..5d1af7c
--- /dev/null
+++ b/src/components/faqs/faqs-tabs.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import type { IconType } from "react-icons"
+import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
+import AccordionList from "@/components/accordion-list"
+import type { AccordionListItem } from "@/components/accordion-list/types"
+import CalloutItem from "@/components/callout-item"
+import TabsNavigation from "@/components/tabs"
+import { Tabs } from "@/components/tabs/tabs"
+import { TabsContent } from "@/components/tabs/tabs-content"
+
+const faqItems: {
+  value: string
+  label: string
+  icon: IconType
+  accordionItems: AccordionListItem[]
+}[] = [
+  {
+    value: "tab1",
+    label: "Lezioni",
+    icon: FiBookOpen,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab2",
+    label: "Tasse",
+    icon: FiDollarSign,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab3",
+    label: "Esami",
+    icon: FiEdit,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab4",
+    label: "Piano di Studi",
+    icon: FiFileText,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab5",
+    label: "Mobilità Internazionale",
+    icon: FiSend,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-2",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-3",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-4",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-5",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+]
+
+export function FaqsTabs() {
+  return (
+    <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
+      <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
+        <TabsNavigation
+          items={faqItems}
+          className="max-md:-mx-2 mb-19 max-md:w-[calc(100%+1rem)] max-md:rounded-none"
+        />
+        {faqItems.map((item) => (
+          <TabsContent value={item.value} key={item.value} className="w-full min-w-0">
+            <AccordionList items={item.accordionItems} defaultValue={item.accordionItems[0]?.value} />
+          </TabsContent>
+        ))}
+      </Tabs>
+
+      <CalloutItem
+        title="Non trovi ciò che stai cercando?"
+        href="/guides"
+        buttonText={
+          <>
+            <span className="sm:hidden">Guide</span>
+            <span className="hidden sm:inline">Esplora le Guide</span>
+          </>
+        }
+        className="w-full"
+      />
+    </div>
+  )
+}