Profile page UI and functionality implemented

app/components/utility/Divider/Divider.container.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { memo } from "react";
+import { DividerView } from "./Divider.view";
+import type { DividerProps } from "./Divider.types";
+
+/**
+ * Figma: "Utility / Divider" (450:1941). Content vs Menu line weight; horizontal
+ * or vertical.
+ */
+const DividerContainer = memo<DividerProps>((props) => {
+  return <DividerView {...props} />;
+});
+
+DividerContainer.displayName = "Divider";
+
+export default DividerContainer;

app/components/utility/Divider/Divider.types.ts

@@ -0,0 +1,19 @@
+export const DIVIDER_ORIENTATION_OPTIONS = ["horizontal", "vertical"] as const;
+export type DividerOrientation = (typeof DIVIDER_ORIENTATION_OPTIONS)[number];
+
+export const DIVIDER_TYPE_OPTIONS = ["content", "menu"] as const;
+export type DividerType = (typeof DIVIDER_TYPE_OPTIONS)[number];
+
+export type DividerProps = {
+  /** @default "horizontal" */
+  orientation?: DividerOrientation;
+  /**
+   * Content: `--color-border-default-secondary` (subtle, lists / panels).
+   * Menu: `--color-border-default-tertiary` (navigation chrome).
+   * @default "content"
+   */
+  type?: DividerType;
+  className?: string;
+};
+
+export type DividerViewProps = DividerProps;

app/components/utility/Divider/Divider.view.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { memo } from "react";
+import type { DividerViewProps } from "./Divider.types";
+
+const lineColor: Record<"content" | "menu", string> = {
+  content: "bg-[var(--color-border-default-secondary)]",
+  menu: "bg-[var(--color-border-default-tertiary)]",
+};
+
+/**
+ * Figma: "Utility / Divider" — horizontal Content (6894:22988), vertical Content
+ * (6894:22990), Menu horizontal (450:1940), Menu vertical (2002:30943).
+ */
+export const DividerView = memo(function DividerView({
+  orientation = "horizontal",
+  type: dividerType = "content",
+  className = "",
+}: DividerViewProps) {
+  const color = lineColor[dividerType];
+
+  if (orientation === "vertical") {
+    return (
+      <div
+        className={`w-px shrink-0 self-stretch ${color} ${className}`}
+        data-figma-node={dividerType === "content" ? "6894:22990" : "2002:30943"}
+        aria-hidden="true"
+      />
+    );
+  }
+
+  return (
+    <div
+      className={`flex w-full flex-col items-center ${className}`}
+      data-figma-node={dividerType === "content" ? "6894:22988" : "450:1940"}
+    >
+      <div
+        className={`h-px w-full shrink-0 ${color}`}
+        data-figma-node={dividerType === "content" ? "6894:22989" : "2002:30856"}
+        aria-hidden="true"
+      />
+    </div>
+  );
+});
+
+DividerView.displayName = "DividerView";

app/components/utility/Divider/index.tsx

@@ -0,0 +1,6 @@
+export { default } from "./Divider.container";
+export type { DividerProps, DividerOrientation, DividerType } from "./Divider.types";
+export {
+  DIVIDER_ORIENTATION_OPTIONS,
+  DIVIDER_TYPE_OPTIONS,
+} from "./Divider.types";