Marketing/4ventures-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Pomelli-inspired Brand Overview to Zona de marca.

Browse Source 
Light Centro de Mando layout with logo, fonts, colors, tagline, values, tone and completeness — edits still live in Detalles del kit.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
2026-10-14 10:01:46 +02:00
parent a225f8c2a6
commit f9dddd5bf9
2 changed files with 455 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/BrandZone.tsx
View File

@@ -14,7 +14,7 @@ import {
Type,
Palette,
} from 'lucide-react';
import { PageHeader, Surface, SectionTitle } from '@/components/ui';
import { PageHeader, Surface, SectionTitle, SegmentedControl } from '@/components/ui';
import {
ASSET_KIND_LABELS,
BRANDBOOK_SECTIONS,
@@ -31,6 +31,7 @@ import {
type FontToken,
} from '@/lib/brandbook';
import GoogleFontsGallery from '@/components/GoogleFontsGallery';
import BrandOverview from '@/components/BrandOverview';
function Field({
label,
@@ -94,6 +95,7 @@ function KitThumb({ assetFileId, alt }: { assetFileId: string; alt: string }) {
}
export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
const [viewMode, setViewMode] = useState<'overview' | 'edit'>('overview');
const [section, setSection] = useState<BrandbookSectionId>('identidad');
const [book, setBook] = useState<Brandbook>(() => emptyBrandbook(tenantLabel));
const [slug, setSlug] = useState('');
@@ -311,7 +313,7 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
<PageHeader
eyebrow="Marca"
title="Zona de marca"
description={`${tenantLabel}${slug ? ` · ${slug}` : ''} · Brand kit completo para ads, calendarios, LinkedIn y blog.`}
description={`${tenantLabel}${slug ? ` · ${slug}` : ''} · Brand Overview + kit editable para ads, calendarios, LinkedIn y blog.`}
actions={
<div className="flex flex-wrap gap-2">
<button
@@ -344,6 +346,42 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
}
/>
<SegmentedControl
value={viewMode}
onChange={setViewMode}
options={[
{ id: 'overview', label: 'Brand Overview' },
{ id: 'edit', label: 'Detalles del kit' },
]}
/>
{err ? (
<p className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
{err}
</p>
) : null}
{okMsg ? (
<p className="text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">
{okMsg}
</p>
) : null}
{viewMode === 'overview' ? (
<BrandOverview
book={book}
tenantLabel={tenantLabel}
score={score}
missing={missing}
onContinueEdit={() => setViewMode('edit')}
onEditSection={(id) => {
setSection(id);
setViewMode('edit');
}}
/>
) : null}
{viewMode === 'edit' ? (
<>
{/* Identity strip */}
<Surface className="!p-4">
<div className="flex flex-col sm:flex-row gap-4 items-start">
@@ -485,17 +523,6 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
</div>
</Surface>
{err ? (
<p className="text-sm text-red-600 bg-red-50 border border-red-100 rounded-lg px-3 py-2">
{err}
</p>
) : null}
{okMsg ? (
<p className="text-sm text-emerald-700 bg-emerald-50 border border-emerald-100 rounded-lg px-3 py-2">
{okMsg}
</p>
) : null}
<div className="flex flex-col lg:flex-row gap-4">
<nav className="lg:w-56 shrink-0 flex lg:flex-col gap-1 overflow-x-auto pb-1">
{BRANDBOOK_SECTIONS.map((s) => (
@@ -1696,6 +1723,8 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
)}
</Surface>
</div>
</>
) : null}
</div>
);
}