feat: Add FAQs page

src/app/faqs/page.tsx

@@ -1,108 +1,143 @@
 "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 = [
+const faqItems: {
+  value: string
+  label: string
+  icon: IconType
+  accordionItems: AccordionListItem[]
+}[] = [
   {
     value: "tab1",
     label: "Lezioni",
-    content: "Content for Tab 1",
     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",
-    content: "Content for Tab 2",
     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",
-    content: "Content for Tab 3",
     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",
-    content: "Content for Tab 4",
     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",
-    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.",
+    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-68 sm:gap-79">
+        <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
+          <TabsNavigation items={faqItems} className="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">
+              <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"
+          buttonText={
+            <>
+              <span className="sm:hidden">Guide</span>
+              <span className="hidden sm:inline">Esplora le Guide</span>
+            </>
+          }
+          className="w-full"
         />
       </div>
     </main>

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
 }

src/components/tabs/tabs-list.tsx

@@ -6,15 +6,19 @@ 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>
   )
 }

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-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">) {