Implement use cases page

app/components/sections/UseCasesOrgs/UseCasesOrgs.container.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { memo } from "react";
+import UseCasesOrgsView from "./UseCasesOrgs.view";
+import type { UseCasesOrgsProps } from "./UseCasesOrgs.types";
+
+/**
+ * Figma: **Orgs** instance ([21993-33687](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=21993-33687&m=dev)) —
+ * **305×305** `CaseStudy` tiles, **8px** gap, **24px** horizontal / **48px** bottom inset.
+ */
+const UseCasesOrgsContainer = memo<UseCasesOrgsProps>((props) => {
+  return <UseCasesOrgsView {...props} />;
+});
+
+UseCasesOrgsContainer.displayName = "UseCasesOrgs";
+
+export default UseCasesOrgsContainer;

app/components/sections/UseCasesOrgs/UseCasesOrgs.types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+
+export interface UseCasesOrgsProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export interface UseCasesOrgsViewProps extends UseCasesOrgsProps {}

app/components/sections/UseCasesOrgs/UseCasesOrgs.view.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { memo } from "react";
+import type { UseCasesOrgsViewProps } from "./UseCasesOrgs.types";
+
+function UseCasesOrgsView({ children, className = "" }: UseCasesOrgsViewProps) {
+  return (
+    <section
+      data-figma-node="21993-33687"
+      className={`bg-[var(--color-surface-default-primary)] px-[var(--spacing-scale-024)] pb-[var(--spacing-scale-048)] ${className}`.trim()}
+    >
+      <div className="mx-auto flex w-full max-w-[1440px] flex-wrap content-center items-center justify-center gap-[var(--spacing-scale-008)] lg:flex-nowrap">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+UseCasesOrgsView.displayName = "UseCasesOrgsView";
+
+export default memo(UseCasesOrgsView);

app/components/sections/UseCasesOrgs/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./UseCasesOrgs.container";
+export type { UseCasesOrgsProps } from "./UseCasesOrgs.types";