);
}
diff --git a/mvp/b2c/src/app/globals.css b/mvp/b2c/src/app/globals.css
index 9ea7a94..3afe9d9 100644
--- a/mvp/b2c/src/app/globals.css
+++ b/mvp/b2c/src/app/globals.css
@@ -1,5 +1,24 @@
@import "tailwindcss";
+/* Instrument Serif (display) — usada por los presets de tema con titulares serif.
+ Los .woff2 viven en /public/b2b-assets/fonts. */
+@font-face {
+ font-family: 'Instrument Serif';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/b2b-assets/fonts/421ba28b-7abe-4b86-a87c-fcd3e94378f7.woff2') format('woff2');
+ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+ font-family: 'Instrument Serif';
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url('/b2b-assets/fonts/15d36112-e39a-4059-ae12-06c58a5747ac.woff2') format('woff2');
+ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
@theme {
/* Colors */
--color-black: #0a0a0a;
@@ -111,4 +130,23 @@
.badge-accent {
@apply bg-accent-light text-accent;
}
+
+ /* Botón con el color de marca del reformista (tema de la landing). */
+ .btn-brand {
+ background-color: var(--brand, #0a0a0a);
+ color: var(--brand-contrast, #ffffff);
+ border: 2px solid var(--brand, #0a0a0a);
+ }
+ .btn-brand:hover {
+ background-color: var(--brand-dark, #1a1a1a);
+ border-color: var(--brand-dark, #1a1a1a);
+ transform: translateY(-1px);
+ }
+}
+
+/* Presets de tema con titulares en serif (terracota, arena). */
+.theme-serif :is(h1, h2, h3) {
+ font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
+ font-weight: 400;
+ letter-spacing: -0.01em;
}
\ No newline at end of file
diff --git a/mvp/b2c/src/app/login/page.tsx b/mvp/b2c/src/app/login/page.tsx
index 6b8e762..27f79b0 100644
--- a/mvp/b2c/src/app/login/page.tsx
+++ b/mvp/b2c/src/app/login/page.tsx
@@ -1,27 +1,59 @@
'use client';
+import Link from 'next/link';
import { useActionState } from 'react';
import { login } from './actions';
+import AuthShell from '@/components/auth/AuthShell';
export default function LoginPage() {
const [error, formAction, pending] = useActionState(login, null);
return (
-
-
+
);
}
diff --git a/mvp/b2c/src/app/panel/empresa/actions.ts b/mvp/b2c/src/app/panel/empresa/actions.ts
index c178adb..9be7eca 100644
--- a/mvp/b2c/src/app/panel/empresa/actions.ts
+++ b/mvp/b2c/src/app/panel/empresa/actions.ts
@@ -6,6 +6,7 @@ import { db } from '@/db';
import { tenants } from '@/db/schema';
import { getCurrentTenantId as getTenantId } from '@/lib/auth/current-user';
import { validarSlug } from '@/lib/validation/signup';
+import { THEME_PRESETS, isHexColor, type ThemePresetId } from '@/lib/funnel/themes';
const LOGO_MAX_BYTES = 500_000;
const LOGO_TIPOS = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'];
@@ -126,3 +127,24 @@ export async function quitarAboutFoto() {
await db.update(tenants).set({ aboutFotoUrl: null }).where(eq(tenants.id, tenantId));
revalidatePath('/panel/empresa');
}
+
+// Guarda el tema de la landing del reformista: preset + color personalizado opcional.
+export async function guardarTema(
+ _prev: LogoResult | null,
+ formData: FormData
+): Promise {
+ const tenantId = await getTenantId();
+ const presetRaw = String(formData.get('themePreset') ?? '');
+ const themePreset: ThemePresetId = presetRaw in THEME_PRESETS ? (presetRaw as ThemePresetId) : 'pizarra';
+
+ const usarColor = formData.get('usarColor') === 'on';
+ const colorRaw = String(formData.get('themeColor') ?? '').trim();
+ const themeColor = usarColor && isHexColor(colorRaw) ? colorRaw : null;
+
+ await db
+ .update(tenants)
+ .set({ themePreset, themeColor })
+ .where(eq(tenants.id, tenantId));
+ revalidatePath('/panel/empresa');
+ return { ok: true };
+}
diff --git a/mvp/b2c/src/app/panel/empresa/page.tsx b/mvp/b2c/src/app/panel/empresa/page.tsx
index 280bd18..99d22e8 100644
--- a/mvp/b2c/src/app/panel/empresa/page.tsx
+++ b/mvp/b2c/src/app/panel/empresa/page.tsx
@@ -3,6 +3,7 @@ import { getTenantPerfil } from '@/db/tenant-queries';
import { actualizarEmpresa } from './actions';
import LogoUploader from '@/components/panel/LogoUploader';
import AboutFotoUploader from '@/components/panel/AboutFotoUploader';
+import ThemePicker from '@/components/panel/ThemePicker';
export const dynamic = 'force-dynamic';
@@ -17,7 +18,7 @@ export default async function EmpresaPage() {
return (
-
Datos de empresa
+
Datos de empresa
Estos datos y el logo aparecen en la cabecera de los presupuestos en PDF que recibe el
cliente. Manténlos al día.
@@ -184,7 +185,7 @@ export default async function EmpresaPage() {
/>
-
+
+
+
Tema de tu funnel
+
+ Elige los colores y la tipografía con los que tus clientes ven tu landing. Puedes partir
+ de un preset y, si quieres, fijar tu propio color de marca.
+
+
+
);
}
diff --git a/mvp/b2c/src/app/panel/galeria/actions.ts b/mvp/b2c/src/app/panel/galeria/actions.ts
new file mode 100644
index 0000000..8be213d
--- /dev/null
+++ b/mvp/b2c/src/app/panel/galeria/actions.ts
@@ -0,0 +1,56 @@
+'use server';
+
+import { and, eq } from 'drizzle-orm';
+import { revalidatePath } from 'next/cache';
+import { db } from '@/db';
+import { galeriaFotos } from '@/db/schema';
+import { getCurrentTenantId as getTenantId } from '@/lib/auth/current-user';
+import { GALERIA_MAX_FOTOS } from '@/lib/galeria';
+
+const GALERIA_MAX_BYTES = 2_000_000;
+const GALERIA_TIPOS = ['image/png', 'image/jpeg', 'image/webp'];
+
+export type GaleriaResult = { ok: boolean; error?: string };
+
+export async function subirFotoGaleria(
+ _prev: GaleriaResult | null,
+ formData: FormData
+): Promise {
+ const tenantId = await getTenantId();
+ const file = formData.get('foto');
+ if (!(file instanceof File) || file.size === 0) {
+ return { ok: false, error: 'Selecciona una imagen.' };
+ }
+ if (!GALERIA_TIPOS.includes(file.type)) {
+ return { ok: false, error: 'Formato no válido. Usa PNG, JPG o WEBP.' };
+ }
+ if (file.size > GALERIA_MAX_BYTES) {
+ return { ok: false, error: 'La imagen no puede superar los 2 MB.' };
+ }
+
+ const existentes = await db
+ .select({ id: galeriaFotos.id })
+ .from(galeriaFotos)
+ .where(eq(galeriaFotos.tenantId, tenantId));
+ if (existentes.length >= GALERIA_MAX_FOTOS) {
+ return { ok: false, error: `Has alcanzado el máximo de ${GALERIA_MAX_FOTOS} fotos.` };
+ }
+
+ const titulo = String(formData.get('titulo') ?? '').trim() || null;
+ const base64 = Buffer.from(await file.arrayBuffer()).toString('base64');
+ const dataUri = `data:${file.type};base64,${base64}`;
+
+ await db
+ .insert(galeriaFotos)
+ .values({ tenantId, url: dataUri, titulo, orden: existentes.length });
+ revalidatePath('/panel/galeria');
+ return { ok: true };
+}
+
+export async function eliminarFotoGaleria(id: string) {
+ const tenantId = await getTenantId();
+ await db
+ .delete(galeriaFotos)
+ .where(and(eq(galeriaFotos.id, id), eq(galeriaFotos.tenantId, tenantId)));
+ revalidatePath('/panel/galeria');
+}
diff --git a/mvp/b2c/src/app/panel/galeria/page.tsx b/mvp/b2c/src/app/panel/galeria/page.tsx
new file mode 100644
index 0000000..752a4a8
--- /dev/null
+++ b/mvp/b2c/src/app/panel/galeria/page.tsx
@@ -0,0 +1,73 @@
+import { getGaleriaPanel } from '@/db/tenant-queries';
+import { eliminarFotoGaleria } from './actions';
+import { GALERIA_MAX_FOTOS } from '@/lib/galeria';
+import GaleriaUploader from '@/components/panel/GaleriaUploader';
+
+export const dynamic = 'force-dynamic';
+
+export default async function GaleriaPage() {
+ const fotos = await getGaleriaPanel();
+
+ return (
+
+
+
Galería de trabajos
+
+ Sube fotos de reformas que ya has hecho. Aparecen en tu funnel para dar confianza al
+ cliente antes de pedir presupuesto.
+
+
+
+
+
+ {fotos.length === 0 ? (
+
+ Aún no has subido ninguna foto. La galería no se mostrará en tu funnel hasta que añadas la
+ primera.
+
+ {foto.titulo && (
+ 
- ) : null}
-