marcogll/AnchorOS
1
0
Fork 0
mirror of https://github.com/marcogll/AnchorOS.git synced 2026-03-15 14:24:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Ajustar estilos según site_requirements.md

Browse Source 
- Aplicar paleta de colores específica (Bone White, Soft Cream, Mocha Taupe, Deep Earth, Charcoal Brown)
- Eliminar colores saturados, gradientes y sombras duras
- Usar fuente serif Playfair Display para headings
- Aumentar márgenes y espaciado (grid amplio, espacio negativo dominante)
- Ajustar copy de landing page según especificaciones
  - Subtítulo: "Belleza anclada en exclusividad"
  - Fundamento: Texto completo de site_requirements
  - Servicios: Descripciones actualizadas
- Actualizar servicios page con descripciones correctas
- Layout: Ritmo vertical lento, sin UI densa
This commit is contained in:
Marco Gallegos
2026-01-16 15:58:28 -06:00
parent 133b4f6c42
commit c864f47382
4 changed files with 134 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
app/globals.css
View File

@@ -4,37 +4,47 @@
@layer base { @layer base {
:root { :root {
--foreground-rgb: 20, 20, 20; --bone-white: #F6F1EC;
--background-rgb: 255, 255, 255; --soft-cream: #EFE7DE;
--accent-rgb: 180, 150, 120; --mocha-taupe: #B8A89A;
--accent-dark-rgb: 140, 110, 80; --deep-earth: #6F5E4F;
--charcoal-brown: #3F362E;
} }
body { body {
color: rgb(var(--foreground-rgb)); color: var(--charcoal-brown);
background: rgb(var(--background-rgb)); background: var(--bone-white);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
} }
} }
@layer components { @layer components {
.site-header { .site-header {
@apply fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100; @apply fixed top-0 left-0 right-0 z-50;
background: var(--bone-white);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--mocha-taupe);
} }
.nav-primary { .nav-primary {
@apply max-w-7xl mx-auto px-6 py-4 flex items-center justify-between; @apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between;
} }
.logo a { .logo a {
@apply text-2xl font-bold tracking-tight text-gray-900 hover:text-gray-700 transition-colors; @apply text-2xl tracking-tight hover:opacity-80 transition-opacity;
color: var(--charcoal-brown);
} }
.nav-links { .nav-links {
@apply hidden md:flex items-center space-x-8; @apply hidden md:flex items-center space-x-12;
} }
.nav-links a { .nav-links a {
@apply text-gray-600 hover:text-gray-900 transition-colors font-medium; @apply hover:opacity-70 transition-opacity font-medium;
color: var(--charcoal-brown);
} }
.nav-actions { .nav-actions {
@@ -42,166 +52,211 @@
} }
.btn-primary { .btn-primary {
@apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all; @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
background: var(--deep-earth);
color: var(--bone-white);
border-color: var(--deep-earth);
}
.btn-primary:hover {
opacity: 0.85;
} }
.btn-secondary { .btn-secondary {
@apply inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all; @apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
background: var(--soft-cream);
color: var(--charcoal-brown);
border-color: var(--mocha-taupe);
}
.btn-secondary:hover {
background: var(--mocha-taupe);
} }
.hero { .hero {
@apply min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 pt-20; @apply min-h-screen flex items-center justify-center pt-24;
background: var(--bone-white);
} }
.hero-content { .hero-content {
@apply max-w-7xl mx-auto px-6 text-center; @apply max-w-7xl mx-auto px-8 text-center;
} }
.logo-mark { .logo-mark {
@apply w-24 h-24 mx-auto mb-8 text-gray-900; @apply w-24 h-24 mx-auto mb-12;
color: var(--charcoal-brown);
} }
.hero h1 { .hero h1 {
@apply text-6xl md:text-8xl font-bold text-gray-900 mb-4 tracking-tight; @apply text-7xl md:text-9xl mb-6 tracking-tight;
color: var(--charcoal-brown);
} }
.hero h2 { .hero h2 {
@apply text-2xl md:text-3xl font-light text-gray-600 mb-4; @apply text-2xl md:text-3xl mb-8;
color: var(--charcoal-brown);
opacity: 0.85;
} }
.hero p { .hero p {
@apply text-lg text-gray-500 mb-8 max-w-2xl mx-auto; @apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
color: var(--charcoal-brown);
opacity: 0.7;
} }
.hero-actions { .hero-actions {
@apply flex items-center justify-center gap-4 flex-wrap; @apply flex items-center justify-center gap-6 flex-wrap;
} }
.hero-image { .hero-image {
@apply mt-12 rounded-2xl overflow-hidden shadow-2xl; @apply mt-16 rounded-2xl overflow-hidden;
background: var(--soft-cream);
} }
.foundation { .foundation {
@apply max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center; @apply max-w-7xl mx-auto px-8 py-32 grid md:grid-cols-2 gap-16 items-center;
} }
.foundation article { .foundation article {
@apply space-y-6; @apply space-y-8;
} }
.foundation h3 { .foundation h3 {
@apply text-sm font-semibold text-gray-500 tracking-widest uppercase; @apply text-sm font-semibold tracking-widest uppercase mb-4;
color: var(--mocha-taupe);
} }
.foundation h4 { .foundation h4 {
@apply text-3xl md:text-4xl font-bold text-gray-900; @apply text-4xl md:text-5xl mb-6;
color: var(--charcoal-brown);
} }
.foundation p { .foundation p {
@apply text-lg text-gray-600 leading-relaxed; @apply text-xl leading-relaxed;
color: var(--charcoal-brown);
opacity: 0.85;
} }
.foundation-image { .foundation-image {
@apply rounded-2xl overflow-hidden shadow-xl h-96 bg-gradient-to-br from-gray-200 to-gray-300; @apply rounded-2xl overflow-hidden h-96;
background: var(--soft-cream);
} }
.services-preview { .services-preview {
@apply max-w-7xl mx-auto px-6 py-24; @apply max-w-7xl mx-auto px-8 py-32;
} }
.services-preview h3 { .services-preview h3 {
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-12 text-center; @apply text-4xl md:text-5xl mb-16 text-center;
color: var(--charcoal-brown);
} }
.service-cards { .service-cards {
@apply grid md:grid-cols-3 gap-8 mb-12; @apply grid md:grid-cols-3 gap-12 mb-16;
} }
.service-card { .service-card {
@apply p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100; @apply p-10 rounded-2xl transition-shadow;
background: var(--soft-cream);
} }
.service-card h4 { .service-card h4 {
@apply text-xl font-semibold text-gray-900 mb-4; @apply text-2xl mb-6;
color: var(--charcoal-brown);
} }
.service-card p { .service-card p {
@apply text-gray-600; color: var(--charcoal-brown);
opacity: 0.8;
} }
.testimonials { .testimonials {
@apply max-w-7xl mx-auto px-6 py-24 bg-gradient-to-br from-gray-50 to-gray-100 rounded-3xl mb-12; @apply max-w-7xl mx-auto px-8 py-32 rounded-3xl mb-12;
background: var(--soft-cream);
} }
.testimonials h3 { .testimonials h3 {
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-12 text-center; @apply text-4xl md:text-5xl mb-16 text-center;
color: var(--charcoal-brown);
} }
.testimonial-grid { .testimonial-grid {
@apply grid md:grid-cols-2 gap-8 mb-12; @apply grid md:grid-cols-2 gap-12 mb-16;
} }
.testimonial { .testimonial {
@apply p-8 bg-white rounded-2xl shadow-lg; @apply p-10 rounded-2xl;
background: var(--bone-white);
} }
.testimonial .stars { .testimonial .stars {
@apply text-2xl mb-4; @apply text-2xl mb-6;
color: var(--mocha-taupe);
} }
.testimonial p { .testimonial p {
@apply text-lg text-gray-700 mb-4 italic; @apply text-xl mb-6 italic leading-relaxed;
color: var(--charcoal-brown);
opacity: 0.85;
} }
.testimonial cite { .testimonial cite {
@apply text-gray-900 font-semibold not-italic block; @apply font-semibold not-italic block;
color: var(--charcoal-brown);
} }
.site-footer { .site-footer {
@apply bg-gray-900 text-white py-12; @apply py-16;
background: var(--charcoal-brown);
} }
.site-footer a { .site-footer a {
@apply text-gray-400 hover:text-white transition-colors; @apply hover:opacity-70 transition-opacity;
color: var(--mocha-taupe);
} }
.footer-brand { .footer-brand {
@apply max-w-7xl mx-auto px-6 mb-8; @apply max-w-7xl mx-auto px-8 mb-12;
} }
.footer-brand span { .footer-brand span {
@apply text-2xl font-bold block mb-2; @apply text-2xl block mb-3;
color: var(--bone-white);
} }
.footer-brand p { .footer-brand p {
@apply text-gray-400; color: var(--mocha-taupe);
} }
.footer-links { .footer-links {
@apply max-w-7xl mx-auto px-6 mb-8 flex flex-wrap gap-6; @apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
} }
.footer-legal { .footer-legal {
@apply max-w-7xl mx-auto px-6 mb-8 flex flex-wrap gap-6; @apply max-w-7xl mx-auto px-8 mb-12 flex flex-wrap gap-8;
} }
.footer-contact { .footer-contact {
@apply max-w-7xl mx-auto px-6 flex flex-wrap gap-6; @apply max-w-7xl mx-auto px-8 flex flex-wrap gap-8;
color: var(--mocha-taupe);
} }
.section { .section {
@apply py-24; @apply py-32;
} }
.section-header { .section-header {
@apply max-w-7xl mx-auto px-6 mb-12; @apply max-w-7xl mx-auto px-8 mb-16;
} }
.section-title { .section-title {
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-4; @apply text-4xl md:text-5xl mb-6;
color: var(--charcoal-brown);
} }
.section-subtitle { .section-subtitle {
@apply text-lg text-gray-600 max-w-2xl; @apply text-xl max-w-2xl leading-relaxed;
color: var(--charcoal-brown);
opacity: 0.8;
} }
} }

17
app/layout.tsx
View File

@@ -2,11 +2,15 @@ import type { Metadata } from 'next'
import { Inter } from 'next/font/google' import { Inter } from 'next/font/google'
import './globals.css' import './globals.css'
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({
subsets: ['latin'],
variable: '--font-sans',
display: 'swap',
})
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'ANCHOR:23 — Belleza Anclada en Exclusividad', title: 'ANCHOR:23 — Belleza anclada en exclusividad',
description: 'Salón de ultra lujo. Un estándar exclusivo de precisión y elegancia.', description: 'Salón de ultra lujo. Un estándar exclusivo de lujo y precisión.',
} }
export default function RootLayout({ export default function RootLayout({
@@ -16,7 +20,12 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="es"> <html lang="es">
<body className={inter.className}> <head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body className={`${inter.variable} font-sans`}>
<header className="site-header"> <header className="site-header">
<nav className="nav-primary"> <nav className="nav-primary">
<div className="logo"> <div className="logo">

17
app/page.tsx
View File

@@ -11,7 +11,7 @@ export default function HomePage() {
</svg> </svg>
</div> </div>
<h1>ANCHOR:23</h1> <h1>ANCHOR:23</h1>
<h2>Belleza Anclada en Exclusividad</h2> <h2>Belleza anclada en exclusividad</h2>
<p>Un estándar exclusivo de lujo y precisión.</p> <p>Un estándar exclusivo de lujo y precisión.</p>
<div className="hero-actions"> <div className="hero-actions">
@@ -21,7 +21,7 @@ export default function HomePage() {
</div> </div>
<div className="hero-image"> <div className="hero-image">
<div className="w-full h-96 bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center"> <div className="w-full h-96 flex items-center justify-center">
<span className="text-gray-500 text-lg">Imagen Hero</span> <span className="text-gray-500 text-lg">Imagen Hero</span>
</div> </div>
</div> </div>
@@ -35,10 +35,15 @@ export default function HomePage() {
Anchor:23 nace de la unión de dos creativos que creen en el lujo Anchor:23 nace de la unión de dos creativos que creen en el lujo
como estándar, no como promesa. como estándar, no como promesa.
</p> </p>
<p>
Aquí, lo excepcional es norma: una experiencia exclusiva y coherente,
diseñada para quienes entienden que el verdadero lujo está en la
precisión, no en el exceso.
</p>
</article> </article>
<aside className="foundation-image"> <aside className="foundation-image">
<div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">
<span className="text-gray-500 text-lg">Imagen Fundamento</span> <span className="text-gray-500 text-lg">Imagen Fundamento</span>
</div> </div>
</aside> </aside>
@@ -50,17 +55,17 @@ export default function HomePage() {
<div className="service-cards"> <div className="service-cards">
<article className="service-card"> <article className="service-card">
<h4>Spa de Alta Gama</h4> <h4>Spa de Alta Gama</h4>
<p>Experiencias diseñadas para el rejuvenecimiento.</p> <p>Sauna y spa excepcionales, diseñados para el rejuvenecimiento y el equilibrio.</p>
</article> </article>
<article className="service-card"> <article className="service-card">
<h4>Arte y Manicure de Precisión</h4> <h4>Arte y Manicure de Precisión</h4>
<p>Detalle, exactitud y perfección.</p> <p>Estilización y técnica donde el detalle define el resultado.</p>
</article> </article>
<article className="service-card"> <article className="service-card">
<h4>Peinado y Maquillaje de Lujo</h4> <h4>Peinado y Maquillaje de Lujo</h4>
<p>Transformaciones discretas y sofisticadas.</p> <p>Transformaciones discretas y sofisticadas para ocasiones selectas.</p>
</article> </article>
</div> </div>

6
app/servicios/page.tsx
View File

@@ -2,17 +2,17 @@ export default function ServiciosPage() {
const services = [ const services = [
{ {
category: 'Spa de Alta Gama', category: 'Spa de Alta Gama',
description: 'Experiencias diseñadas para el rejuvenecimiento.', description: 'Sauna y spa excepcionales, diseñados para el rejuvenecimiento y el equilibrio.',
items: ['Tratamientos Faciales', 'Masajes Terapéuticos', 'Hidroterapia'] items: ['Tratamientos Faciales', 'Masajes Terapéuticos', 'Hidroterapia']
}, },
{ {
category: 'Arte y Manicure de Precisión', category: 'Arte y Manicure de Precisión',
description: 'Detalle, exactitud y perfección.', description: 'Estilización y técnica donde el detalle define el resultado.',
items: ['Manicure de Precisión', 'Pedicure Spa', 'Arte en Uñas'] items: ['Manicure de Precisión', 'Pedicure Spa', 'Arte en Uñas']
}, },
{ {
category: 'Peinado y Maquillaje de Lujo', category: 'Peinado y Maquillaje de Lujo',
description: 'Transformaciones discretas y sofisticadas.', description: 'Transformaciones discretas y sofisticadas para ocasiones selectas.',
items: ['Corte y Estilismo', 'Color Premium', 'Maquillaje Profesional'] items: ['Corte y Estilismo', 'Color Premium', 'Maquillaje Profesional']
}, },
{ {