From 3b9edf2a63d13925efe2891e126ffcb49488be0f Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Wed, 15 Apr 2026 11:53:11 +0200
Subject: [PATCH 1/7] feat: add Item component structure based on shadcn

---
 src/app/faqs/page.tsx      | 25 +++++++++++++++++++++++++
 src/components/ui/item.tsx | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/app/faqs/page.tsx
 create mode 100644 src/components/ui/item.tsx

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
new file mode 100644
index 0000000..4a8e751
--- /dev/null
+++ b/src/app/faqs/page.tsx
@@ -0,0 +1,25 @@
+import { FiArrowUpRight } from "react-icons/fi"
+import { Button } from "@/components/ui/button"
+import { Item, ItemActions, ItemContent, ItemInner, ItemTitle } from "@/components/ui/item"
+
+export default function FAQsPage() {
+  return (
+    <main className="w-full">
+      <div className="flex flex-col items-center py-12">
+        <Item className="flex w-full max-w-4xl flex-col">
+          <ItemInner>
+            <ItemContent>
+              <ItemTitle>Non trovi ciò che stai cercando?</ItemTitle>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="primary" size="lg" className="w-fit">
+                Esplora le Guide
+                <FiArrowUpRight />
+              </Button>
+            </ItemActions>
+          </ItemInner>
+        </Item>
+      </div>
+    </main>
+  )
+}
diff --git a/src/components/ui/item.tsx b/src/components/ui/item.tsx
new file mode 100644
index 0000000..9ee61ab
--- /dev/null
+++ b/src/components/ui/item.tsx
@@ -0,0 +1,37 @@
+import type * as React from "react"
+import { Glass } from "@/components/glass"
+import { cn } from "@/lib/utils"
+
+function Item({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <Glass
+      data-slot="item"
+      className={cn("rounded-4xl border-white/50 bg-background-blur p-0 text-card-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemInner({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-inner"
+      className={cn("flex items-center justify-between gap-4 py-4 pr-4 pl-8", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-content" className={cn("flex min-w-0 flex-1 items-center", className)} {...props} />
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"p">) {
+  return <p data-slot="item-title" className={cn("typo-title-medium text-blue-secondary", className)} {...props} />
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-actions" className={cn("flex shrink-0 items-center", className)} {...props} />
+}
+
+export { Item, ItemInner, ItemContent, ItemTitle, ItemActions }

From 059d5fa37ddb97b05734ed14a6ca7bcc41835f6b Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Wed, 15 Apr 2026 12:19:32 +0200
Subject: [PATCH 2/7] fix: update Button class for better layout in FAQsPage

---
 src/app/faqs/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 4a8e751..80ea344 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -12,7 +12,7 @@ export default function FAQsPage() {
               <ItemTitle>Non trovi ciò che stai cercando?</ItemTitle>
             </ItemContent>
             <ItemActions>
-              <Button variant="primary" size="lg" className="w-fit">
+              <Button variant="primary" size="lg" className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10">
                 Esplora le Guide
                 <FiArrowUpRight />
               </Button>

From 7a02cd8c56d4398da773ea9ca13288e803b44ebb Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Wed, 15 Apr 2026 12:32:15 +0200
Subject: [PATCH 3/7] fix: refactor FAQsPage component for improved readability
 and structure

---
 src/app/faqs/page.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 80ea344..0de3e0a 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -1,8 +1,14 @@
+"use client"
+
+import { useRouter } from "next/navigation"
 import { FiArrowUpRight } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { Item, ItemActions, ItemContent, ItemInner, ItemTitle } from "@/components/ui/item"
 
 export default function FAQsPage() {
+
+  const router = useRouter()
+
   return (
     <main className="w-full">
       <div className="flex flex-col items-center py-12">
@@ -12,9 +18,14 @@ export default function FAQsPage() {
               <ItemTitle>Non trovi ciò che stai cercando?</ItemTitle>
             </ItemContent>
             <ItemActions>
-              <Button variant="primary" size="lg" className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10">
+              <Button
+                variant="primary"
+                size="lg"
+                className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10"
+                onClick={() => router.push("/guides")}
+              >
                 Esplora le Guide
-                <FiArrowUpRight />
+                <FiArrowUpRight aria-hidden="true" />
               </Button>
             </ItemActions>
           </ItemInner>

From 2f60392e8e40a5912e51d73b26b45d68acc2f758 Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Wed, 15 Apr 2026 12:33:12 +0200
Subject: [PATCH 4/7] fix: remove unnecessary blank line in FAQsPage component

---
 src/app/faqs/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 0de3e0a..4a1c039 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -6,7 +6,6 @@ import { Button } from "@/components/ui/button"
 import { Item, ItemActions, ItemContent, ItemInner, ItemTitle } from "@/components/ui/item"
 
 export default function FAQsPage() {
-
   const router = useRouter()
 
   return (

From 2893654b0ad55d4a07689246846b2a34d4ba2f9a Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 16 Apr 2026 11:10:53 +0200
Subject: [PATCH 5/7] feat: implement CalloutItem component for improved FAQ
 navigation

---
 src/app/faqs/page.tsx                 | 32 +++++++-------------------
 src/components/callout-item/index.tsx | 33 +++++++++++++++++++++++++++
 src/components/callout-item/types.ts  |  6 +++++
 3 files changed, 47 insertions(+), 24 deletions(-)
 create mode 100644 src/components/callout-item/index.tsx
 create mode 100644 src/components/callout-item/types.ts

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index 4a1c039..cf55f8b 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -1,34 +1,18 @@
 "use client"
 
-import { useRouter } from "next/navigation"
-import { FiArrowUpRight } from "react-icons/fi"
-import { Button } from "@/components/ui/button"
-import { Item, ItemActions, ItemContent, ItemInner, ItemTitle } from "@/components/ui/item"
+import CalloutItem from "@/components/callout-item"
 
 export default function FAQsPage() {
-  const router = useRouter()
-
   return (
     <main className="w-full">
       <div className="flex flex-col items-center py-12">
-        <Item className="flex w-full max-w-4xl flex-col">
-          <ItemInner>
-            <ItemContent>
-              <ItemTitle>Non trovi ciò che stai cercando?</ItemTitle>
-            </ItemContent>
-            <ItemActions>
-              <Button
-                variant="primary"
-                size="lg"
-                className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10"
-                onClick={() => router.push("/guides")}
-              >
-                Esplora le Guide
-                <FiArrowUpRight aria-hidden="true" />
-              </Button>
-            </ItemActions>
-          </ItemInner>
-        </Item>
+        <CalloutItem
+          title="Non trovi ciò che stai cercando?"
+          href="/guides"
+          buttonText="Esplora le Guide"
+          className="max-w-4xl"
+        />
+
       </div>
     </main>
   )
diff --git a/src/components/callout-item/index.tsx b/src/components/callout-item/index.tsx
new file mode 100644
index 0000000..29833e5
--- /dev/null
+++ b/src/components/callout-item/index.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { FiArrowUpRight } from "react-icons/fi"
+import { Button } from "@/components/ui/button"
+import { Item, ItemActions, ItemContent, ItemInner, ItemTitle } from "@/components/ui/item"
+import { cn } from "@/lib/utils"
+import type { CalloutItemProps } from "./types"
+
+export default function CalloutItem({ title, href, buttonText, className }: CalloutItemProps) {
+    const router = useRouter()
+
+    return (
+        <Item className={cn("flex w-full flex-col", className)}>
+            <ItemInner>
+                <ItemContent>
+                    <ItemTitle>{title}</ItemTitle>
+                </ItemContent>
+                <ItemActions>
+                    <Button
+                        variant="primary"
+                        size="lg"
+                        className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10"
+                        onClick={() => router.push(href)}
+                    >
+                        {buttonText}
+                        <FiArrowUpRight aria-hidden="true" />
+                    </Button>
+                </ItemActions>
+            </ItemInner>
+        </Item>
+    )
+}
diff --git a/src/components/callout-item/types.ts b/src/components/callout-item/types.ts
new file mode 100644
index 0000000..67662e8
--- /dev/null
+++ b/src/components/callout-item/types.ts
@@ -0,0 +1,6 @@
+export type CalloutItemProps = {
+    title: string
+    href: string
+    buttonText: string
+    className?: string
+}

From 72a2eb073c69fe01f767dbe242c63b30c84345fd Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 16 Apr 2026 11:44:40 +0200
Subject: [PATCH 6/7] fix: biome

---
 src/app/faqs/page.tsx                 |  1 -
 src/components/callout-item/index.tsx | 42 +++++++++++++--------------
 src/components/callout-item/types.ts  |  8 ++---
 3 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
index cf55f8b..cd3ff8c 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -12,7 +12,6 @@ export default function FAQsPage() {
           buttonText="Esplora le Guide"
           className="max-w-4xl"
         />
-
       </div>
     </main>
   )
diff --git a/src/components/callout-item/index.tsx b/src/components/callout-item/index.tsx
index 29833e5..e28c709 100644
--- a/src/components/callout-item/index.tsx
+++ b/src/components/callout-item/index.tsx
@@ -8,26 +8,26 @@ import { cn } from "@/lib/utils"
 import type { CalloutItemProps } from "./types"
 
 export default function CalloutItem({ title, href, buttonText, className }: CalloutItemProps) {
-    const router = useRouter()
+  const router = useRouter()
 
-    return (
-        <Item className={cn("flex w-full flex-col", className)}>
-            <ItemInner>
-                <ItemContent>
-                    <ItemTitle>{title}</ItemTitle>
-                </ItemContent>
-                <ItemActions>
-                    <Button
-                        variant="primary"
-                        size="lg"
-                        className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10"
-                        onClick={() => router.push(href)}
-                    >
-                        {buttonText}
-                        <FiArrowUpRight aria-hidden="true" />
-                    </Button>
-                </ItemActions>
-            </ItemInner>
-        </Item>
-    )
+  return (
+    <Item className={cn("flex w-full flex-col", className)}>
+      <ItemInner>
+        <ItemContent>
+          <ItemTitle>{title}</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <Button
+            variant="primary"
+            size="lg"
+            className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10"
+            onClick={() => router.push(href)}
+          >
+            {buttonText}
+            <FiArrowUpRight aria-hidden="true" />
+          </Button>
+        </ItemActions>
+      </ItemInner>
+    </Item>
+  )
 }
diff --git a/src/components/callout-item/types.ts b/src/components/callout-item/types.ts
index 67662e8..e4d35f8 100644
--- a/src/components/callout-item/types.ts
+++ b/src/components/callout-item/types.ts
@@ -1,6 +1,6 @@
 export type CalloutItemProps = {
-    title: string
-    href: string
-    buttonText: string
-    className?: string
+  title: string
+  href: string
+  buttonText: string
+  className?: string
 }

From f61a2caa9d29b53056ccf402ba580836755ee7da Mon Sep 17 00:00:00 2001
From: Bianca <ianoselbiancaroberta02@gmail.com>
Date: Thu, 16 Apr 2026 14:11:27 +0200
Subject: [PATCH 7/7] fix: replace useRouter with Link for navigation in
 CalloutItem component

---
 src/components/callout-item/index.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/src/components/callout-item/index.tsx b/src/components/callout-item/index.tsx
index e28c709..4bf26e3 100644
--- a/src/components/callout-item/index.tsx
+++ b/src/components/callout-item/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useRouter } from "next/navigation"
+import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { Button } from "@/components/ui/button"
 import { Item, ItemActions, ItemContent, ItemInner, ItemTitle } from "@/components/ui/item"
@@ -8,8 +8,6 @@ import { cn } from "@/lib/utils"
 import type { CalloutItemProps } from "./types"
 
 export default function CalloutItem({ title, href, buttonText, className }: CalloutItemProps) {
-  const router = useRouter()
-
   return (
     <Item className={cn("flex w-full flex-col", className)}>
       <ItemInner>
@@ -17,14 +15,11 @@ export default function CalloutItem({ title, href, buttonText, className }: Call
           <ItemTitle>{title}</ItemTitle>
         </ItemContent>
         <ItemActions>
-          <Button
-            variant="primary"
-            size="lg"
-            className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10"
-            onClick={() => router.push(href)}
-          >
-            {buttonText}
-            <FiArrowUpRight aria-hidden="true" />
+          <Button variant="primary" size="lg" asChild className="gap-8 pr-6 pl-10 has-[>svg]:pr-6 has-[>svg]:pl-10">
+            <Link href={href}>
+              {buttonText}
+              <FiArrowUpRight aria-hidden="true" />
+            </Link>
           </Button>
         </ItemActions>
       </ItemInner>