Add Item component structure based on shadcn

src/app/faqs/page.tsx

@@ -0,0 +1,35 @@
+"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">
+        <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>
+      </div>
+    </main>
+  )
+}

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 }