feat: Add FAQs page

src/app/faqs/page.tsx

@@ -1,110 +1,17 @@
-"use client"
+import type { Metadata } from "next"
+import { FaqsTabs } from "@/components/faqs/faqs-tabs"
+import { Hero } from "@/components/ui/hero"
 
-import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
-import AccordionList from "@/components/accordion-list"
-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.",
-  },
-]
+export const metadata: Metadata = {
+  title: "FAQs",
+  description: "Risposte chiare per vivere al meglio la community",
+}
 
 export default function FAQsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto w-225 py-12">
-        <AccordionList items={accordionItems} defaultValue="item-1" />
-      </div>
-      <div className="mx-auto w-225 py-12">
-        <Tabs defaultValue="tab5" className="flex flex-col items-center">
-          <TabsNavigation items={faqItems} />
-          {faqItems.map((item) => (
-            <TabsContent value={item.value} key={item.value}>
-              {item.content}
-            </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"
-        />
-      </div>
+    <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">
+      <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
+      <FaqsTabs />
     </main>
   )
 }

src/components/accordion-association/index.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import Image from "next/image"
 import { GradientIcon } from "../gradient-icon"
 import { Accordion } from "./accordion"

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

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",
+          "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
         )}
       >
-        {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 px-2.5 max-md:px-10"
+            {...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">) {

src/styles/globals.css

@@ -31,3 +31,11 @@
     margin-right: 0px !important;
   }
 }
+
+@media (max-width: 767px) {
+  /* max-md */
+  .scroll-fade-x {
+    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);
+  }
+}