| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DC & Peluqueros - Expertos en Rizos</title> |
| <meta name="description" content="Peluquería especializada en rizos en Madrid. Tratamientos naturales para rizos con la experiencia de la estilista dominicana Diana Castillo."> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <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@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| body { |
| font-family: 'Montserrat', sans-serif; |
| color: #3D405B; |
| } |
| h1, h2, h3, h4 { |
| font-family: 'Playfair Display', serif; |
| } |
| .hero-overlay { |
| background-color: rgba(61, 64, 91, 0.6); |
| } |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } |
| .gallery-item { |
| transition: all 0.3s ease; |
| } |
| .gallery-item:hover { |
| transform: scale(1.03); |
| } |
| .hero-section { |
| background-image: url('https://cdn.shopify.com/s/files/1/0610/4488/3714/files/Tight-Curl---Rake-_-Shake_step_4_480x480.gif?v=1692105821'); |
| background-size: cover; |
| background-position: center; |
| background-repeat: no-repeat; |
| } |
| .testimonial-card { |
| background-color: rgba(255, 255, 255, 0.9); |
| backdrop-filter: blur(5px); |
| } |
| @media (max-width: 768px) { |
| .hero-section { |
| background-position: 60% center; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-[#F4F1DE]"> |
| |
| <a href="wa.link/jli9zd" class="fixed bottom-6 right-6 bg-[#25D366] text-white w-14 h-14 rounded-full flex items-center justify-center text-2xl shadow-lg z-50 hover:bg-[#128C7E] transition-all"> |
| <i class="fab fa-whatsapp"></i> |
| </a> |
|
|
| |
| <nav class="bg-white shadow-md sticky top-0 z-40"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <a href="#" class="text-2xl font-bold text-[#3D405B]"> |
| <span class="text-[#E07A5F]">DC</span> & Peluqueros |
| </a> |
| |
| |
| <div class="hidden md:flex space-x-8"> |
| <a href="#inicio" class="text-[#3D405B] hover:text-[#E07A5F] transition">Inicio</a> |
| <a href="#nosotros" class="text-[#3D405B] hover:text-[#E07A5F] transition">Nosotros</a> |
| <a href="#servicios" class="text-[#3D405B] hover:text-[#E07A5F] transition">Servicios</a> |
| <a href="#galeria" class="text-[#3D405B] hover:text-[#E07A5F] transition">Galería</a> |
| <a href="#contacto" class="text-[#3D405B] hover:text-[#E07A5F] transition">Contacto</a> |
| </div> |
| |
| |
| <button id="mobile-menu-button" class="md:hidden text-[#3D405B]"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> |
| <a href="#inicio" class="block py-2 text-[#3D405B] hover:text-[#E07A5F] transition">Inicio</a> |
| <a href="#nosotros" class="block py-2 text-[#3D405B] hover:text-[#E07A5F] transition">Nosotros</a> |
| <a href="#servicios" class="block py-2 text-[#3D405B] hover:text-[#E07A5F] transition">Servicios</a> |
| <a href="#galeria" class="block py-2 text-[#3D405B] hover:text-[#E07A5F] transition">Galería</a> |
| <a href="#contacto" class="block py-2 text-[#3D405B] hover:text-[#E07A5F] transition">Contacto</a> |
| </div> |
| </nav> |
|
|
| |
| <section id="inicio" class="hero-section relative h-screen flex items-center justify-center"> |
| <div class="hero-overlay absolute inset-0"></div> |
| <div class="container mx-auto px-4 z-10 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">Cada rizo cuenta una historia,<br>y nosotros sabemos cómo cuidarla.</h1> |
| <p class="text-xl text-white mb-8 max-w-2xl mx-auto">Especialistas en rizos naturales con técnicas ancestrales dominicanas y lo último en innovación capilar.</p> |
| <a href="wa.link/jli9zd" class="bg-[#E07A5F] hover:bg-[#C6AC8F] text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> |
| Reserva tu Tratamiento |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-[#3D405B]">Nuestra Esencia</h2> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="text-center p-6"> |
| <div class="text-4xl text-[#E07A5F] mb-4"> |
| <i class="fas fa-globe-americas"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-[#3D405B]">Experiencia Internacional</h3> |
| <p class="text-gray-600">Técnicas aprendidas en República Dominicana, Estados Unidos y España para ofrecer lo mejor a tu cabello.</p> |
| </div> |
| <div class="text-center p-6"> |
| <div class="text-4xl text-[#E07A5F] mb-4"> |
| <i class="fas fa-heart"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-[#3D405B]">Calidad Dominicana</h3> |
| <p class="text-gray-600">Productos naturales y métodos tradicionales que respetan la estructura única de cada rizo.</p> |
| </div> |
| <div class="text-center p-6"> |
| <div class="text-4xl text-[#E07A5F] mb-4"> |
| <i class="fas fa-hands"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-[#3D405B]">Espacio Seguro</h3> |
| <p class="text-gray-600">Un ambiente donde tu cabello natural es celebrado y cuidado con profesionalismo y cariño.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="nosotros" class="py-16 bg-[#F4F1DE]"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <img src="https://i.imgur.com/uIQLNUD.png" alt="Diana Castillo - Fundadora" class="rounded-lg shadow-lg w-full max-w-md mx-auto"> |
| </div> |
| <div class="md:w-1/2"> |
| <h2 class="text-3xl font-bold mb-6 text-[#3D405B]">Sobre Nosotros</h2> |
| <blockquote class="text-xl italic mb-6 text-[#3D405B]"> |
| "Fundado por Diana Castillo, estilista dominicana con 15 años de experiencia internacional, DC & Peluqueros fusiona técnicas ancestrales con innovación para celebrar tu identidad." |
| </blockquote> |
| <p class="mb-6">En DC & Peluqueros entendemos que cada rizo es único. Nuestro enfoque personalizado garantiza que recibas el cuidado específico que tu tipo de cabello necesita, respetando su textura natural.</p> |
| |
| <div class="bg-[#C6AC8F] p-6 rounded-lg"> |
| <h3 class="text-xl font-bold mb-3 text-white">Ubicación</h3> |
| <p class="mb-4 text-white">Paseo de Castilla 35, Alcorcón, Madrid</p> |
| <a href="https://share.google/vfs9xF9MlQqpWJCiR" target="_blank" class="bg-white text-[#3D405B] hover:bg-[#E07A5F] hover:text-white font-bold py-2 px-4 rounded transition duration-300 inline-block"> |
| Ver en Google Maps |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="servicios" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-[#3D405B]">Nuestros Servicios</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="service-card bg-[#F4F1DE] rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="bg-[#E07A5F] text-white p-4 text-center"> |
| <i class="fas fa-cut text-3xl mb-2"></i> |
| <h3 class="text-xl font-bold">Corte Especializado</h3> |
| </div> |
| <div class="p-6"> |
| <p class="mb-4">Corte en seco o mojado según el patrón de rizo para realzar su forma natural y volumen.</p> |
| <a href="wa.link/jli9zd" class="text-[#E07A5F] hover:text-[#3D405B] font-medium transition duration-300 inline-block"> |
| Consultar Disponibilidad → |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-[#F4F1DE] rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="bg-[#E07A5F] text-white p-4 text-center"> |
| <i class="fas fa-water text-3xl mb-2"></i> |
| <h3 class="text-xl font-bold">Definición de Rizos</h3> |
| </div> |
| <div class="p-6"> |
| <p class="mb-4">Técnicas personalizadas para definir tus rizos sin frizz, resaltando su patrón natural.</p> |
| <a href="wa.link/jli9zd" class="text-[#E07A5F] hover:text-[#3D405B] font-medium transition duration-300 inline-block"> |
| Consultar Disponibilidad → |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-[#F4F1DE] rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="bg-[#E07A5F] text-white p-4 text-center"> |
| <i class="fas fa-spa text-3xl mb-2"></i> |
| <h3 class="text-xl font-bold">Hidratación Profunda</h3> |
| </div> |
| <div class="p-6"> |
| <p class="mb-4">Mascarillas y aceites naturales que devuelven la humedad y vitalidad a tu cabello rizado.</p> |
| <a href="wa.link/jli9zd" class="text-[#E07A5F] hover:text-[#3D405B] font-medium transition duration-300 inline-block"> |
| Consultar Disponibilidad → |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-[#F4F1DE] rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="bg-[#E07A5F] text-white p-4 text-center"> |
| <i class="fas fa-magic text-3xl mb-2"></i> |
| <h3 class="text-xl font-bold">Color para Rizos</h3> |
| </div> |
| <div class="p-6"> |
| <p class="mb-4">Tintes especializados que respetan la estructura del rizo y mantienen su salud.</p> |
| <a href="wa.link/jli9zd" class="text-[#E07A5F] hover:text-[#3D405B] font-medium transition duration-300 inline-block"> |
| Consultar Disponibilidad → |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-[#F4F1DE] rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="bg-[#E07A5F] text-white p-4 text-center"> |
| <i class="fas fa-birthday-cake text-3xl mb-2"></i> |
| <h3 class="text-xl font-bold">Peinados para Eventos</h3> |
| </div> |
| <div class="p-6"> |
| <p class="mb-4">Estilos especiales para bodas, fiestas y ocasiones importantes que celebran tus rizos.</p> |
| <a href="wa.link/jli9zd" class="text-[#E07A5F] hover:text-[#3D405B] font-medium transition duration-300 inline-block"> |
| Consultar Disponibilidad → |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="service-card bg-[#F4F1DE] rounded-lg overflow-hidden shadow-md transition duration-300"> |
| <div class="bg-[#E07A5F] text-white p-4 text-center"> |
| <i class="fas fa-graduation-cap text-3xl mb-2"></i> |
| <h3 class="text-xl font-bold">Talleres de Autocuidado</h3> |
| </div> |
| <div class="p-6"> |
| <p class="mb-4">Aprende a cuidar tus rizos en casa con nuestros talleres prácticos y personalizados.</p> |
| <a href="wa.link/jli9zd" class="text-[#E07A5F] hover:text-[#3D405B] font-medium transition duration-300 inline-block"> |
| Consultar Disponibilidad → |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="galeria" class="py-16 bg-[#F4F1DE]"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-[#3D405B]">Nuestros Trabajos</h2> |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="gallery-item overflow-hidden rounded-lg shadow-lg relative group"> |
| <img src="https://www.leslielovescurls.com/wp-content/uploads/2019/02/Curly-3.png" alt="Transformación de rizos definidos" class="w-full h-80 object-cover"> |
| <div |
| </html> |
