diff --git a/src/app/faqs/page.tsx b/src/app/faqs/page.tsx
new file mode 100644
index 0000000..cd3ff8c
--- /dev/null
+++ b/src/app/faqs/page.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import CalloutItem from "@/components/callout-item"
+
+export default function FAQsPage() {
+  return (
+    <main className="w-full">
+      <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>
+  )
+}
diff --git a/src/components/callout-item/index.tsx b/src/components/callout-item/index.tsx
new file mode 100644
index 0000000..4bf26e3
--- /dev/null
+++ b/src/components/callout-item/index.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+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"
+import { cn } from "@/lib/utils"
+import type { CalloutItemProps } from "./types"
+
+export default function CalloutItem({ title, href, buttonText, className }: CalloutItemProps) {
+  return (
+    <Item className={cn("flex w-full flex-col", className)}>
+      <ItemInner>
+        <ItemContent>
+          <ItemTitle>{title}</ItemTitle>
+        </ItemContent>
+        <ItemActions>
+          <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>
+    </Item>
+  )
+}
diff --git a/src/components/callout-item/types.ts b/src/components/callout-item/types.ts
new file mode 100644
index 0000000..e4d35f8
--- /dev/null
+++ b/src/components/callout-item/types.ts
@@ -0,0 +1,6 @@
+export type CalloutItemProps = {
+  title: string
+  href: string
+  buttonText: string
+  className?: string
+}
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 }