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

fix: tema claro blanco, logo 4Ventures y menú original

Browse Source 
Fondo blanco en la app; menú con labels/iconos originales; logo en sidebar y login.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
2026-09-24 09:53:36 +02:00
parent 6d1602bd68
commit 068faa3d25
33 changed files with 642 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/CreativePlacementPreview.tsx
View File

@@ -105,14 +105,14 @@ function MediaBlock({
>
{(data.format || '').toLowerCase() === 'video' ||
(data.format || '').toLowerCase() === 'reel' ? (
<Play className="w-10 h-10 text-white/50" />
<Play className="w-10 h-10 text-gray-900/50" />
) : (
<ImageIcon className="w-10 h-10 text-white/40" />
<ImageIcon className="w-10 h-10 text-gray-900/40" />
)}
<p className="text-[11px] text-white/60 px-4 text-center line-clamp-3">
<p className="text-[11px] text-gray-900/60 px-4 text-center line-clamp-3">
{data.headline || data.title}
</p>
<p className="text-[10px] text-white/35 uppercase tracking-wider">
<p className="text-[10px] text-gray-900/35 uppercase tracking-wider">
Sin media · añade URL
</p>
</div>
@@ -130,11 +130,11 @@ function PhoneChrome({
}) {
return (
<div
className={`rounded-2xl overflow-hidden border border-gray-700 bg-black shadow-lg shadow-black/40 ${
className={`rounded-2xl overflow-hidden border border-gray-200 bg-black shadow-lg shadow-black/40 ${
stories ? 'aspect-[9/16] max-h-[420px]' : ''
}`}
>
<div className="flex items-center justify-between px-3 py-2 bg-[#111827] border-b border-gray-800">
<div className="flex items-center justify-between px-3 py-2 bg-white border-b border-gray-200">
<span className="text-[10px] font-bold tracking-wide text-sky-300 uppercase">
{pill}
</span>
@@ -149,9 +149,9 @@ function MetaFeedPreview({ data }: { data: CreativePreviewData }) {
const brand = data.brand_name || 'Marca';
return (
<PhoneChrome pill="Meta Ads · feed">
<div className="bg-white text-gray-900">
<div className="bg-gray-900 text-white">
<div className="flex items-center gap-2 px-3 py-2">
<div className="w-8 h-8 rounded-full bg-[#7C66B8] text-white text-[10px] font-bold flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-[#7C66B8] text-gray-900 text-[10px] font-bold flex items-center justify-center">
{brand.slice(0, 2).toUpperCase()}
</div>
<div className="min-w-0 flex-1">
@@ -193,7 +193,7 @@ function InstagramFeedPreview({ data }: { data: CreativePreviewData }) {
const brand = data.brand_name || 'cuenta';
return (
<PhoneChrome pill="Instagram · feed">
<div className="bg-white text-gray-900">
<div className="bg-gray-900 text-white">
<div className="flex items-center gap-2 px-3 py-2">
<div className="w-7 h-7 rounded-full bg-gradient-to-tr from-amber-400 via-pink-500 to-violet-600 p-[2px]">
<div className="w-full h-full rounded-full bg-white flex items-center justify-center text-[9px] font-bold text-pink-600">
@@ -224,7 +224,7 @@ function StoriesPreview({ data }: { data: CreativePreviewData }) {
const brand = data.brand_name || 'cuenta';
return (
<PhoneChrome pill="Stories · 9:16" stories>
<div className="relative h-full bg-black text-white">
<div className="relative h-full bg-black text-gray-900">
<div className="absolute inset-0">
<MediaBlock data={data} tall dark />
</div>
@@ -238,7 +238,7 @@ function StoriesPreview({ data }: { data: CreativePreviewData }) {
{brand.slice(0, 2).toUpperCase()}
</div>
<p className="text-xs font-bold">{brand}</p>
<span className="text-[10px] text-white/60">ahora</span>
<span className="text-[10px] text-gray-900/60">ahora</span>
</div>
</div>
<div className="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-black/80 to-transparent space-y-2">
@@ -250,7 +250,7 @@ function StoriesPreview({ data }: { data: CreativePreviewData }) {
{data.cta}
</span>
) : (
<span className="inline-block text-[10px] text-white/70">
<span className="inline-block text-[10px] text-gray-900/70">
Sticker / encuesta
</span>
)}
@@ -264,9 +264,9 @@ function LinkedInPreview({ data }: { data: CreativePreviewData }) {
const brand = data.brand_name || 'Empresa';
return (
<PhoneChrome pill="LinkedIn · feed">
<div className="bg-white text-gray-900">
<div className="bg-gray-900 text-white">
<div className="flex items-start gap-2 px-3 py-2.5">
<div className="w-9 h-9 rounded bg-[#0A66C2] text-white text-[10px] font-bold flex items-center justify-center">
<div className="w-9 h-9 rounded bg-[#0A66C2] text-gray-900 text-[10px] font-bold flex items-center justify-center">
{brand.slice(0, 2).toUpperCase()}
</div>
<div className="min-w-0 flex-1">
@@ -298,9 +298,9 @@ function FacebookFeedPreview({ data }: { data: CreativePreviewData }) {
const brand = data.brand_name || 'Página';
return (
<PhoneChrome pill="Facebook · feed">
<div className="bg-white text-gray-900">
<div className="bg-gray-900 text-white">
<div className="flex items-center gap-2 px-3 py-2">
<div className="w-8 h-8 rounded-full bg-[#1877F2] text-white text-[10px] font-bold flex items-center justify-center">
<div className="w-8 h-8 rounded-full bg-[#1877F2] text-gray-900 text-[10px] font-bold flex items-center justify-center">
{brand.slice(0, 1).toUpperCase()}
</div>
<div className="min-w-0 flex-1">
@@ -336,7 +336,7 @@ function FacebookFeedPreview({ data }: { data: CreativePreviewData }) {
function GoogleSearchPreview({ data }: { data: CreativePreviewData }) {
const host = hostOf(data.landing_url);
return (
<div className="rounded-2xl border border-gray-700 bg-white text-gray-900 p-4 shadow-lg">
<div className="rounded-2xl border border-gray-200 bg-gray-900 text-white p-4 shadow-lg">
<p className="text-[10px] font-bold uppercase tracking-wider text-sky-600 mb-2">
Google Ads · búsqueda
</p>
@@ -385,8 +385,8 @@ function GoogleDisplayPreview({
: '1.91:1 · landscape';
return (
<div className="rounded-2xl border border-gray-700 bg-[#111827] overflow-hidden">
<p className="text-[10px] font-bold uppercase tracking-wider text-sky-400 px-3 py-2 border-b border-gray-800">
<div className="rounded-2xl border border-gray-200 bg-white overflow-hidden">
<p className="text-[10px] font-bold uppercase tracking-wider text-sky-400 px-3 py-2 border-b border-gray-200">
Google Ads · Performance Max · {label}
</p>
<div className={`${ratio} overflow-hidden bg-gray-900`}>
@@ -395,7 +395,7 @@ function GoogleDisplayPreview({
tall={aspect === 'vertical' || aspect === 'portrait'}
/>
</div>
<div className="p-3 bg-white text-gray-900">
<div className="p-3 bg-gray-900 text-white">
<p className="text-sm font-bold line-clamp-2">
{data.headline || data.title}
</p>
@@ -410,17 +410,17 @@ function GoogleDisplayPreview({
function YouTubePreview({ data }: { data: CreativePreviewData }) {
return (
<div className="rounded-2xl border border-gray-700 bg-[#111827] overflow-hidden">
<p className="text-[10px] font-bold uppercase tracking-wider text-red-400 px-3 py-2 border-b border-gray-800">
<div className="rounded-2xl border border-gray-200 bg-white overflow-hidden">
<p className="text-[10px] font-bold uppercase tracking-wider text-red-400 px-3 py-2 border-b border-gray-200">
Google Ads · YouTube
</p>
<div className="aspect-video relative bg-black">
<MediaBlock data={data} tall />
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<Play className="w-12 h-12 text-white/80" />
<Play className="w-12 h-12 text-gray-900/80" />
</div>
</div>
<div className="p-3 bg-white text-gray-900">
<div className="p-3 bg-gray-900 text-white">
<p className="text-sm font-bold line-clamp-2">
{data.headline || data.title}
</p>