first commit

apps/frontend/components/id/action-tile.tsx

@@ -0,0 +1,42 @@
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export function ActionTile({
+  icon: Icon,
+  label,
+  description,
+  className,
+  onClick
+}: {
+  icon: LucideIcon;
+  label: string;
+  description?: string;
+  className?: string;
+  onClick?: () => void;
+}) {
+  const content = (
+    <>
+      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white">
+        <Icon className="h-5 w-5" />
+      </div>
+      <div className="max-w-[92px] text-[12px] font-medium leading-tight">{label}</div>
+      {description ? <p className="line-clamp-2 text-[11px] leading-tight text-[#667085]">{description}</p> : null}
+    </>
+  );
+
+  const baseClass = cn('flex min-h-[92px] flex-col items-center justify-center gap-2 rounded-[22px] bg-[#f4f5f8] p-3 text-center', className);
+
+  if (onClick) {
+    return (
+      <button type="button" onClick={onClick} className={cn(baseClass, 'transition hover:bg-[#eceef4]')}>
+        {content}
+      </button>
+    );
+  }
+
+  return <div className={baseClass}>{content}</div>;
+}
+
+export function SectionTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="mb-4 mt-8 text-[26px] font-medium tracking-tight">{children} ›</h2>;
+}