From ab85b5e1fa344e99bdd44f8a2769057578746553 Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Sat, 25 Oct 2025 22:01:26 +0700
Subject: [PATCH] feat: add sections components

---
 apps/landing/src/app/admin/apikeys/page.tsx     |  5 +++--
 apps/landing/src/app/admin/master/page.tsx      |  5 +++--
 .../src/components/shared/NarrowSection.tsx     | 17 +++++++++++++++++
 apps/landing/src/components/shared/Section.tsx  | 17 +++++++++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 apps/landing/src/components/shared/NarrowSection.tsx
 create mode 100644 apps/landing/src/components/shared/Section.tsx

diff --git a/apps/landing/src/app/admin/apikeys/page.tsx b/apps/landing/src/app/admin/apikeys/page.tsx
index a73046f..1e5cc61 100644
--- a/apps/landing/src/app/admin/apikeys/page.tsx
+++ b/apps/landing/src/app/admin/apikeys/page.tsx
@@ -6,6 +6,7 @@ import { createProjectApiKey, listApiKeys } from '@/lib/actions/apiKeyActions';
 import KeyDisplay from '@/components/admin/KeyDisplay';
 import AdminFormInput from '@/components/admin/AdminFormInput';
 import AdminButton from '@/components/admin/AdminButton';
+import { Section } from '@/components/shared/Section';
 
 const STORAGE_KEY = 'banatie_master_key';
 
@@ -68,7 +69,7 @@ export default function ApiKeysPage() {
   }
 
   return (
-    <div className="max-w-6xl mx-auto px-6 py-8">
+    <Section>
       {/* Page Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-white mb-2">Project API Keys</h1>
@@ -188,6 +189,6 @@ export default function ApiKeysPage() {
           </div>
         )}
       </div>
-    </div>
+    </Section>
   );
 }
diff --git a/apps/landing/src/app/admin/master/page.tsx b/apps/landing/src/app/admin/master/page.tsx
index 23ad318..3b761a9 100644
--- a/apps/landing/src/app/admin/master/page.tsx
+++ b/apps/landing/src/app/admin/master/page.tsx
@@ -5,6 +5,7 @@ import { bootstrapMasterKey } from '@/lib/actions/apiKeyActions';
 import KeyDisplay from '@/components/admin/KeyDisplay';
 import AdminFormInput from '@/components/admin/AdminFormInput';
 import AdminButton from '@/components/admin/AdminButton';
+import { NarrowSection } from '@/components/shared/NarrowSection';
 
 const STORAGE_KEY = 'banatie_master_key';
 
@@ -66,7 +67,7 @@ export default function MasterKeyPage() {
   };
 
   return (
-    <div className="max-w-4xl mx-auto px-6 py-8">
+    <NarrowSection>
       {/* Page Header */}
       <div className="mb-8">
         <h1 className="text-4xl font-bold text-white mb-2">Master Key Management</h1>
@@ -132,6 +133,6 @@ export default function MasterKeyPage() {
           Save Manual Key
         </AdminButton>
       </div>
-    </div>
+    </NarrowSection>
   );
 }
diff --git a/apps/landing/src/components/shared/NarrowSection.tsx b/apps/landing/src/components/shared/NarrowSection.tsx
new file mode 100644
index 0000000..b14c5cf
--- /dev/null
+++ b/apps/landing/src/components/shared/NarrowSection.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface NarrowSectionProps {
+  children: ReactNode;
+  className?: string;
+  bgClassName?: string;
+}
+
+export const NarrowSection = ({ children, className = '', bgClassName = '' }: NarrowSectionProps) => {
+  return (
+    <div className={bgClassName}>
+      <div className={`max-w-4xl mx-auto px-6 py-8 ${className}`}>
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/landing/src/components/shared/Section.tsx b/apps/landing/src/components/shared/Section.tsx
new file mode 100644
index 0000000..96acdcb
--- /dev/null
+++ b/apps/landing/src/components/shared/Section.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+interface SectionProps {
+  children: ReactNode;
+  className?: string;
+  bgClassName?: string;
+}
+
+export const Section = ({ children, className = '', bgClassName = '' }: SectionProps) => {
+  return (
+    <div className={bgClassName}>
+      <div className={`max-w-7xl mx-auto px-6 py-8 ${className}`}>
+        {children}
+      </div>
+    </div>
+  );
+};