From c9ba6c35e366f0b9960eaa76d37dcf2eb168d27b Mon Sep 17 00:00:00 2001 From: adevopg Date: Mon, 13 Jul 2026 00:09:58 +0000 Subject: [PATCH] =?UTF-8?q?Dise=C3=B1o=20visual:=20tema=20NovaWoW=20(token?= =?UTF-8?q?s=20Tailwind),=20hero=20en=20la=20home,=20cabecera=20pulida?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - globals.css: tokens @theme (nw-bg/panel/border/gold/text/muted), fondo con degradado + brillo radial, y componentes reutilizables (.nw-btn, .nw-btn-ghost, .nw-card, .nw-heading con oro degradado). - Header: sticky con backdrop-blur y marca en oro degradado. - Home: sección hero (nombre del server + tagline + CTAs Crear cuenta / Foros) y estado del servidor + noticias en tarjetas (nw-card). Textos hero en catálogos. Verificado: build OK, home renderiza el hero/tarjetas, los tokens nw compilan en el CSS. Sistema visual base listo para aplicar al resto de páginas. Co-Authored-By: Claude Opus 4.8 (1M context) --- web-next/app/[locale]/page.tsx | 132 +++++++++++++++++++++------------ web-next/app/globals.css | 42 ++++++++++- web-next/components/Header.tsx | 4 +- web-next/messages/en.json | 5 +- web-next/messages/es.json | 5 +- 5 files changed, 134 insertions(+), 54 deletions(-) diff --git a/web-next/app/[locale]/page.tsx b/web-next/app/[locale]/page.tsx index 28e66a3..e2f5764 100644 --- a/web-next/app/[locale]/page.tsx +++ b/web-next/app/[locale]/page.tsx @@ -1,4 +1,5 @@ import { getTranslations, setRequestLocale } from 'next-intl/server' +import { Link } from '@/i18n/navigation' import { getNoticias, getServerStatus, type Noticia, type ServerStatus } from '@/lib/home' // SSR por petición: los datos se leen DIRECTAMENTE de MySQL desde el servidor Next. @@ -19,54 +20,91 @@ export default async function HomePage({ params }: { params: Promise<{ locale: s const { noticias, status } = await getData() return ( -
-

{t('brand')}

- -
-

{t('serverStatus')}

- {status ? ( -
    -
  • - {t('server')}: {status.server_name ?? '—'} ({status.expansion}) -
    • -
  • - {t('onlineCharacters')}: {status.online_characters} -
    • -
  • - {t('login')}:{' '} - {status.status} -
    • -
  • - {t('address')}: {status.address ?? '—'} -
    • -
- ) : ( -

{t('notAvailable')}

- )} +
+ {/* Hero */} +
+
+

+ WotLK Classic 3.4.3 +

+

Nova WoW

+

{t('tagline')}

+
+ + {t('ctaRegister')} + + + {t('ctaForum')} + +
+
-
-

{t('news')}

- {noticias.length === 0 ? ( -

{t('noNews')}

- ) : ( - noticias.map((n) => ( -
-

{n.titulo}

- {n.fecha && {new Date(n.fecha).toLocaleString(locale)}} -
- {n.enlace && ( -

- {t('link')}:{' '} - - {t('here')} - -

- )} -
- )) - )} -
-
+
+
+ {/* Estado del servidor */} + + + {/* Noticias */} +
+

{t('news')}

+ {noticias.length === 0 ? ( +

{t('noNews')}

+ ) : ( +
+ {noticias.map((n) => ( +
+

{n.titulo}

+ {n.fecha && ( + {new Date(n.fecha).toLocaleString(locale)} + )} +
+ {n.enlace && ( +

+ {t('link')}:{' '} + + {t('here')} + +

+ )} +
+ ))} +
+ )} +
+
+
+ ) } diff --git a/web-next/app/globals.css b/web-next/app/globals.css index cdda13b..f931a77 100644 --- a/web-next/app/globals.css +++ b/web-next/app/globals.css @@ -1,11 +1,47 @@ @import 'tailwindcss'; -/* Tema base NovaWoW (provisional; se afinará al portar el diseño). */ +/* Tokens de diseño NovaWoW (paleta oscura fantasía WotLK). */ +@theme { + --color-nw-bg: #140d08; + --color-nw-panel: #241812; + --color-nw-panel-2: #2c1e14; + --color-nw-border: #4a3320; + --color-nw-gold: #d79602; + --color-nw-gold-light: #f0b93f; + --color-nw-text: #e8dccb; + --color-nw-muted: #b1997f; +} + :root { color-scheme: dark; } body { - background: #1b120b; - color: #e8dccb; + background: + radial-gradient(1100px 520px at 50% -8%, rgba(215, 150, 2, 0.12), transparent 62%), + linear-gradient(180deg, #1b120b 0%, #120b07 100%); + background-attachment: fixed; + color: var(--color-nw-text); + min-height: 100vh; +} + +/* Componentes reutilizables */ +@layer components { + .nw-btn { + @apply inline-flex items-center justify-center rounded-md bg-nw-gold px-5 py-2.5 font-semibold text-[#1b120b] transition hover:bg-nw-gold-light; + } + .nw-btn-ghost { + @apply inline-flex items-center justify-center rounded-md border border-nw-border px-5 py-2.5 font-semibold text-nw-text transition hover:border-nw-gold hover:text-nw-gold-light; + } + .nw-card { + @apply rounded-xl border border-nw-border/70 bg-nw-panel/80 p-5 shadow-lg shadow-black/30 backdrop-blur; + } + .nw-heading { + @apply bg-gradient-to-b from-nw-gold-light to-nw-gold bg-clip-text font-extrabold tracking-wide text-transparent; + } +} + +/* Contenido HTML de noticias/foro */ +.prose :where(a) { + color: #7cc0f7; } diff --git a/web-next/components/Header.tsx b/web-next/components/Header.tsx index 86f261a..8fc2626 100644 --- a/web-next/components/Header.tsx +++ b/web-next/components/Header.tsx @@ -10,9 +10,9 @@ export async function Header() { const loggedIn = Boolean(session.username) return ( -
+
- + Nova WoW