Files
AnchorOS/app/servicios/page.tsx
Marco Gallegos 8fc9d3717e docs: add comprehensive code comments, update README and TASKS, create training and troubleshooting guides
- Add JSDoc comments to API routes and business logic functions
- Update README.md with Phase 2 status and deployment/production notes
- Enhance TASKS.md with estimated timelines and dependencies
- Create docs/STAFF_TRAINING.md for team onboarding
- Create docs/CLIENT_ONBOARDING.md for customer experience
- Create docs/OPERATIONAL_PROCEDURES.md for daily operations
- Create docs/TROUBLESHOOTING.md for common setup issues
- Fix TypeScript errors in hq/page.tsx
2026-01-16 18:42:45 -06:00

67 lines
2.5 KiB
TypeScript

/** @description Static services page component displaying available salon services and categories. */
export default function ServiciosPage() {
const services = [
{
category: 'Spa de Alta Gama',
description: 'Sauna y spa excepcionales, diseñados para el rejuvenecimiento y el equilibrio.',
items: ['Tratamientos Faciales', 'Masajes Terapéuticos', 'Hidroterapia']
},
{
category: 'Arte y Manicure de Precisión',
description: 'Estilización y técnica donde el detalle define el resultado.',
items: ['Manicure de Precisión', 'Pedicure Spa', 'Arte en Uñas']
},
{
category: 'Peinado y Maquillaje de Lujo',
description: 'Transformaciones discretas y sofisticadas para ocasiones selectas.',
items: ['Corte y Estilismo', 'Color Premium', 'Maquillaje Profesional']
},
{
category: 'Cuidado Corporal',
description: 'Ritual de bienestar integral.',
items: ['Exfoliación Profunda', 'Envolturas Corporales', 'Tratamientos Reductores']
},
{
category: 'Membresías Exclusivas',
description: 'Acceso prioritario y experiencias personalizadas.',
items: ['Gold Tier', 'Black Tier', 'VIP Tier']
}
]
return (
<div className="section">
<div className="section-header">
<h1 className="section-title">Nuestros Servicios</h1>
<p className="section-subtitle">
Experiencias diseñadas con precisión y elegancia para clientes que valoran la exclusividad.
</p>
</div>
<div className="max-w-7xl mx-auto px-6">
<div className="grid md:grid-cols-2 gap-8">
{services.map((service, index) => (
<article key={index} className="p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
<h2 className="text-2xl font-semibold text-gray-900 mb-3">{service.category}</h2>
<p className="text-gray-600 mb-4">{service.description}</p>
<ul className="space-y-2">
{service.items.map((item, idx) => (
<li key={idx} className="flex items-center text-gray-700">
<span className="w-1.5 h-1.5 bg-gray-900 rounded-full mr-2" />
{item}
</li>
))}
</ul>
</article>
))}
</div>
<div className="mt-12 text-center">
<a href="https://booking.anchor23.mx" className="btn-primary">
Reservar Cita
</a>
</div>
</div>
</div>
)
}