From d4b7f883e1ec99ea3222a4af9e7680e249ee02c4 Mon Sep 17 00:00:00 2001
From: moh <mf@planetmutlu.com>
Date: Sun, 20 Sep 2026 18:01:03 +0200
Subject: [PATCH] STYLED - Drop section cards in the project form, lay content
 flat on the page

Experiment: remove the AppCard wrappers around Basic Information, Localized
Content, Sections and Cover/Assets, plus the action bar, so the form content
sits directly on the page. Section headers now carry a thin underline and the
action bar a top divider to keep structure without card chrome. Two-column
layout preserved. No field-name or save-logic changes.
---
 components/admin/portfolio-project-form.tsx | 36 ++++++---------------
 1 file changed, 10 insertions(+), 26 deletions(-)

diff --git a/components/admin/portfolio-project-form.tsx b/components/admin/portfolio-project-form.tsx
index 217a0f6..4fcc06b 100644
--- a/components/admin/portfolio-project-form.tsx
+++ b/components/admin/portfolio-project-form.tsx
@@ -337,7 +337,7 @@ function SectionHeader({
   action?: ReactNode;
 }) {
   return (
-    <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+    <div className="flex flex-col gap-4 border-b border-border/60 pb-3 lg:flex-row lg:items-end lg:justify-between">
       <div className="space-y-1">
         <h3 className="text-lg font-semibold text-foreground">{title}</h3>
         <p className="text-sm text-muted-foreground">{description}</p>
@@ -595,9 +595,7 @@ export function PortfolioProjectForm({
       <input ref={intentRef} type="hidden" name="intent" defaultValue="save" />
 
       <div className="grid gap-6 xl:grid-cols-2 xl:items-start">
-        <div>
-          <AppCard level={3} padding="md">
-            <section className="space-y-5">
+        <section className="space-y-5">
               <SectionHeader
                 title="Basic Information"
                 description="Choose the category and the stable project metadata first."
@@ -753,13 +751,9 @@ export function PortfolioProjectForm({
                   }
                 />
               </div>
-            </section>
-          </AppCard>
-        </div>
+        </section>
 
-        <div>
-          <AppCard level={3} padding="md">
-            <section className="space-y-5">
+        <section className="space-y-5">
               <SectionHeader
                 title="Localized Content"
                 description="Finish the user-facing copy before building sections and media."
@@ -804,13 +798,9 @@ export function PortfolioProjectForm({
                 }
                 multiline
               />
-            </section>
-          </AppCard>
-        </div>
+        </section>
 
-        <div>
-          <AppCard level={3} padding="md">
-            <section className="space-y-5">
+        <section className="space-y-5">
               <SectionHeader
                 title="Sections"
                 description="Optional — baue die Projektgeschichte aus einzelnen Abschnitten."
@@ -1010,13 +1000,9 @@ export function PortfolioProjectForm({
                   })}
                 </Accordion>
               )}
-            </section>
-          </AppCard>
-        </div>
+        </section>
 
-        <div>
-          <AppCard level={3} padding="md">
-            <div className="space-y-6">
+        <div className="space-y-6">
               <section className="space-y-4">
               <SectionHeader
                 title="Cover Media"
@@ -1167,12 +1153,10 @@ export function PortfolioProjectForm({
                 </Accordion>
               )}
               </section>
-            </div>
-          </AppCard>
         </div>
       </div>
 
-      <AppCard level={3} padding="md" contentClassName="space-y-4">
+      <div className="space-y-4 border-t border-border/60 pt-6">
         {showValidation && firstIncompleteStep ? (
           <div className="rounded-nested border border-status-warning/30 bg-status-warning-soft px-4 py-3">
             <div className="flex items-start gap-3">
@@ -1202,7 +1186,7 @@ export function PortfolioProjectForm({
             <SubmitButton onSelect={() => setIntent("save")} />
           </div>
         </div>
-      </AppCard>
+      </div>
     </form>
   );
 }