Add Item component structure based on shadcn

src/app/faqs/page.tsx

@@ -2,6 +2,7 @@
 
 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"
@@ -96,6 +97,14 @@ export default function FAQsPage() {
           ))}
         </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>
   )
 }

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

src/components/callout-item/types.ts

@@ -0,0 +1,6 @@
+export type CalloutItemProps = {
+  title: string
+  href: string
+  buttonText: string
+  className?: string
+}

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 }