From 9fb289d5a0b6599566c000f778c2afe0c1ebb0d0 Mon Sep 17 00:00:00 2001
From: Developing-Gamer <maxcodes11110@gmail.com>
Date: Wed, 27 May 2026 12:47:44 -0700
Subject: [PATCH] Add account settings page layout and section primitives.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../page-layout.tsx                           |  9 ++++++++
 .../dashboard-account-settings/section.tsx    | 21 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx
 create mode 100644 apps/dashboard/src/components/dashboard-account-settings/section.tsx

diff --git a/apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx b/apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx
new file mode 100644
index 000000000..cee4d95f0
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/page-layout.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+export function PageLayout(props: { children: React.ReactNode }) {
+  return (
+    <div className='flex flex-col gap-4'>
+      {props.children}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/dashboard-account-settings/section.tsx b/apps/dashboard/src/components/dashboard-account-settings/section.tsx
new file mode 100644
index 000000000..4f4b6e3c0
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-account-settings/section.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export function Section(props: { title: string, description?: string, children: React.ReactNode }) {
+  return (
+    <div className="border border-black/[0.08] dark:border-white/[0.08] bg-white/80 dark:bg-background/80 backdrop-blur-xl rounded-2xl p-6 shadow-sm ring-1 ring-black/[0.04] dark:ring-0 flex flex-col md:flex-row gap-4 items-start md:items-center justify-between transition-colors">
+      <div className="flex-1 flex flex-col justify-center min-w-0">
+        <h3 className="font-semibold text-base text-foreground leading-snug">
+          {props.title}
+        </h3>
+        {props.description && (
+          <p className="text-muted-foreground text-sm mt-1 leading-relaxed">
+            {props.description}
+          </p>
+        )}
+      </div>
+      <div className="w-full md:w-auto flex flex-col md:items-end justify-end shrink-0">
+        {props.children}
+      </div>
+    </div>
+  );
+}