Spaces:
No application file
No application file
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rosa Costuras - Ateliê de Costura Criativa</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .logo { | |
| position: relative; | |
| font-weight: 700; | |
| } | |
| .logo::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%); | |
| transform: scaleX(0); | |
| transform-origin: right; | |
| transition: transform 0.4s ease; | |
| } | |
| .logo:hover::after { | |
| transform: scaleX(1); | |
| transform-origin: left; | |
| } | |
| .gallery-item { | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| overflow: hidden; | |
| } | |
| .gallery-item:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .gallery-image { | |
| transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .gallery-item:hover .gallery-image { | |
| transform: scale(1.05); | |
| } | |
| .category-btn.active { | |
| background-color: #f43f5e; | |
| color: white; | |
| box-shadow: 0 4px 6px -1px rgba(244, 63, 94, 0.3), 0 2px 4px -1px rgba(244, 63, 94, 0.1); | |
| } | |
| .repair-form { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| box-shadow: 0 8px 32px 0 rgba(244, 63, 94, 0.1); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: #f43f5e; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%); | |
| box-shadow: 0 4px 6px -1px rgba(244, 63, 94, 0.3), 0 2px 4px -1px rgba(244, 63, 94, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(244, 63, 94, 0.3), 0 4px 6px -2px rgba(244, 63, 94, 0.1); | |
| } | |
| .service-card { | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .input-field { | |
| transition: all 0.3s ease; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .input-field:focus { | |
| border-color: #f43f5e; | |
| box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1); | |
| } | |
| .modal-overlay { | |
| background: rgba(0, 0, 0, 0.6); | |
| backdrop-filter: blur(5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-rose-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <!-- Logo with scissors and line --> | |
| <div class="flex flex-col items-center"> | |
| <div class="relative"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="6" cy="6" r="3"></circle> | |
| <circle cx="6" cy="18" r="3"></circle> | |
| <line x1="20" y1="4" x2="8.12" y2="15.88"></line> | |
| <line x1="14.47" y1="14.48" x2="20" y2="20"></line> | |
| <line x1="8.12" y1="8.12" x2="12" y2="12"></line> | |
| </svg> | |
| <div class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-rose-500 to-pink-500"></div> | |
| </div> | |
| <h1 class="text-2xl font-bold text-gray-800 logo">Rosa Costuras</h1> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-rose-600 font-medium">Início</a> | |
| <a href="#gallery" class="nav-link text-gray-700 hover:text-rose-600 font-medium">Galeria</a> | |
| <a href="#services" class="nav-link text-gray-700 hover:text-rose-600 font-medium">Serviços</a> | |
| <a href="#repairs" class="nav-link text-gray-700 hover:text-rose-600 font-medium">Reparos</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-rose-600 font-medium">Contato</a> | |
| </nav> | |
| <button class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="relative py-20 overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-rose-100 to-pink-100 opacity-90"></div> | |
| <div class="container mx-auto px-6 relative z-10 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6 leading-tight">Costuras feitas com <span class="text-rose-600">amor</span> e <span class="text-rose-600">dedicação</span></h2> | |
| <p class="text-lg text-gray-700 mb-8 max-w-lg">No ateliê Rosa Costuras, cada peça é única e feita especialmente para você, com atenção aos detalhes e qualidade excepcional.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#gallery" class="btn-primary text-white font-semibold py-3 px-8 rounded-full inline-flex items-center"> | |
| Ver Nossos Trabalhos <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| <a href="#contact" class="border border-rose-500 text-rose-600 font-semibold py-3 px-8 rounded-full hover:bg-rose-50 transition inline-flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> Contato | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1598705262210-5afa8d6d8c3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Ateliê de costura" | |
| class="rounded-xl shadow-2xl w-full max-w-md transform rotate-1"> | |
| <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="bg-rose-100 p-3 rounded-full mr-3"> | |
| <i class="fas fa-award text-rose-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="font-bold text-gray-800">+10 anos</p> | |
| <p class="text-sm text-gray-600">de experiência</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section with Categories --> | |
| <section id="gallery" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-rose-600 font-semibold">Nossos Trabalhos</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Galeria de Peças</h2> | |
| <div class="w-20 h-1 bg-rose-600 mx-auto mt-4"></div> | |
| </div> | |
| <!-- Category Buttons --> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <button onclick="filterGallery('all')" class="category-btn active bg-white text-gray-800 px-6 py-2 rounded-full font-medium transition border border-gray-200 hover:border-rose-300"> | |
| <i class="fas fa-th-large mr-2"></i> Todos | |
| </button> | |
| <button onclick="filterGallery('new')" class="category-btn bg-white text-gray-800 px-6 py-2 rounded-full font-medium transition border border-gray-200 hover:border-rose-300"> | |
| <i class="fas fa-star mr-2"></i> Lançamentos | |
| </button> | |
| <button onclick="filterGallery('novelty')" class="category-btn bg-white text-gray-800 px-6 py-2 rounded-full font-medium transition border border-gray-200 hover:border-rose-300"> | |
| <i class="fas fa-lightbulb mr-2"></i> Novidades | |
| </button> | |
| <button onclick="filterGallery('custom')" class="category-btn bg-white text-gray-800 px-6 py-2 rounded-full font-medium transition border border-gray-200 hover:border-rose-300"> | |
| <i class="fas fa-user-tie mr-2"></i> Sob Medida | |
| </button> | |
| </div> | |
| <!-- Gallery Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> | |
| <!-- New Releases --> | |
| <div class="gallery-item new" data-category="new"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md h-full flex flex-col"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1539533018447-63fcce2678e6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Vestido novo" | |
| class="gallery-image w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-5 flex-grow"> | |
| <h3 class="font-bold text-gray-800 mb-2">Vestido Floral</h3> | |
| <p class="text-sm text-gray-600 mb-3">Novo modelo primavera/verão com tecido leve e fluido</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="inline-block bg-rose-100 text-rose-800 text-xs px-3 py-1 rounded-full">Lançamento</span> | |
| <span class="text-sm font-medium text-gray-700">R$ 189,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Novelties --> | |
| <div class="gallery-item novelty" data-category="novelty"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md h-full flex flex-col"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Blusa estampada" | |
| class="gallery-image w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-5 flex-grow"> | |
| <h3 class="font-bold text-gray-800 mb-2">Blusa Estampada</h3> | |
| <p class="text-sm text-gray-600 mb-3">Tecido leve e respirável com estampa exclusiva</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="inline-block bg-pink-100 text-pink-800 text-xs px-3 py-1 rounded-full">Novidade</span> | |
| <span class="text-sm font-medium text-gray-700">R$ 129,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Custom --> | |
| <div class="gallery-item custom" data-category="custom"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md h-full flex flex-col"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1595341595379-cf2df1f27b1b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Conjunto verão" | |
| class="gallery-image w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-5 flex-grow"> | |
| <h3 class="font-bold text-gray-800 mb-2">Conjunto Verão</h3> | |
| <p class="text-sm text-gray-600 mb-3">Conforto e estilo para dias quentes, feito sob medida</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="inline-block bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">Sob Medida</span> | |
| <span class="text-sm font-medium text-gray-700">R$ 249,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Releases --> | |
| <div class="gallery-item new" data-category="new"> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md h-full flex flex-col"> | |
| <div class="overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1598705262210-5afa8d6d8c3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" | |
| alt="Saia plissada" | |
| class="gallery-image w-full h-64 object-cover"> | |
| </div> | |
| <div class="p-5 flex-grow"> | |
| <h3 class="font-bold text-gray-800 mb-2">Saia Plissada</h3> | |
| <p class="text-sm text-gray-600 mb-3">Movimento e elegância com plissados perfeitos</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="inline-block bg-rose-100 text-rose-800 text-xs px-3 py-1 rounded-full">Lançamento</span> | |
| <span class="text-sm font-medium text-gray-700">R$ 159,90</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Button --> | |
| <div class="text-center mt-16"> | |
| <button onclick="openUploadModal()" class="btn-primary text-white font-semibold py-3 px-8 rounded-full inline-flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Adicionar Foto do Seu Trabalho | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-rose-50"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-rose-600 font-semibold">O Que Oferecemos</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Nossos Serviços</h2> | |
| <div class="w-20 h-1 bg-rose-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-rose-500 text-4xl mb-6"> | |
| <div class="bg-rose-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-tshirt"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Roupas Sob Medida</h3> | |
| <p class="text-gray-600 mb-6">Criação de peças exclusivas feitas especialmente para você, com medidas personalizadas e tecidos selecionados.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Medidas precisas | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Tecidos premium | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Design exclusivo | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-rose-500 text-4xl mb-6"> | |
| <div class="bg-rose-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-redo"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Reformas e Ajustes</h3> | |
| <p class="text-gray-600 mb-6">Transformamos suas peças antigas em novas criações, atualizando o estilo e ajustando ao seu corpo.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Ajuste de modelagem | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Atualização de estilo | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Conserto profissional | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="service-card bg-white p-8 rounded-xl shadow-md"> | |
| <div class="text-rose-500 text-4xl mb-6"> | |
| <div class="bg-rose-100 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-magic"></i> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Customização</h3> | |
| <p class="text-gray-600 mb-6">Adicionamos detalhes exclusivos às suas peças, como bordados, apliques e ajustes criativos.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Bordados personalizados | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Apliques e detalhes | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-rose-500 mr-2"></i> Transformação criativa | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Repair Requests Section --> | |
| <section id="repairs" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-rose-600 font-semibold">Precisa de Ajuda?</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mt-2">Solicitar Reparos</h2> | |
| <div class="w-20 h-1 bg-rose-600 mx-auto mt-4"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="repair-form p-8 md:p-12 rounded-xl border border-rose-100"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Envie sua peça para reparo</h3> | |
| <p class="text-gray-600 mb-8">Preencha o formulário abaixo e entraremos em contato para avaliar seu pedido</p> | |
| <form id="repairForm" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Seu Nome*</label> | |
| <input type="text" id="name" required class="input-field w-full px-4 py-3 rounded-lg"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">E-mail*</label> | |
| <input type="email" id="email" required class="input-field w-full px-4 py-3 rounded-lg"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Telefone*</label> | |
| <input type="tel" id="phone" required class="input-field w-full px-4 py-3 rounded-lg"> | |
| </div> | |
| <div> | |
| <label for="repairType" class="block text-gray-700 font-medium mb-2">Tipo de Reparo*</label> | |
| <select id="repairType" required class="input-field w-full px-4 py-3 rounded-lg"> | |
| <option value="">Selecione...</option> | |
| <option value="bainha">Ajuste de bainha</option> | |
| <option value="rasgo">Conserto de rasgo</option> | |
| <option value="ziper">Troca de zíper</option> | |
| <option value="botao">Reposição de botões</option> | |
| <option value="ajuste">Ajuste de modelagem</option> | |
| <option value="outro">Outro</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="description" class="block text-gray-700 font-medium mb-2">Descrição do Reparo*</label> | |
| <textarea id="description" rows="4" required class="input-field w-full px-4 py-3 rounded-lg"></textarea> | |
| </div> | |
| <div> | |
| <label for="photo" class="block text-gray-700 font-medium mb-2">Foto da Peça (opcional)</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label for="photo" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i> | |
| <p class="mb-2 text-sm text-gray-500">Clique para enviar ou arraste a foto</p> | |
| <p class="text-xs text-gray-500">PNG, JPG (MAX. 5MB)</p> | |
| </div> | |
| <input id="photo" type="file" class="hidden" accept="image/*"> | |
| </label> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn-primary w-full text-white font-semibold py-4 px-6 rounded-lg mt-6"> | |
| Enviar Solicitação <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <span class="text-rose-400 font-semibold">Entre em Contato</span> | |
| <h2 class="text-3xl md:text-4xl font-bold text-white mt-2">Visite Nosso Ateliê</h2> | |
| <div class="w-20 h-1 bg-rose-500 mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-8">Informações de Contato</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-rose-600 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Endereço</h4> | |
| <p class="text-gray-300">Rua Dona Maria Umbelina, 268<br>Taquaral<br>Campinas - SP</p> | |
| <a href="#" class="text-rose-400 hover:text-rose-300 text-sm mt-2 inline-block"> | |
| <i class="fas fa-directions mr-1"></i> Ver no mapa | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-rose-600 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Telefone</h4> | |
| <p class="text-gray-300">(19) 98765-4321</p> | |
| <p class="text-gray-300">(19) 1234-5678</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-rose-600 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">E-mail</h4> | |
| <p class="text-gray-300">contato@rosacosturas.com.br</p> | |
| <p class="text-gray-300">orcamentos@rosacosturas.com.br</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-rose-600 p-3 rounded-full mr-4 flex-shrink-0"> | |
| <i class="fas fa-clock text-white"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-1">Horário de Funcionamento</h4> | |
| <p class="text-gray-300">Segunda a Sexta: 9h às 18h</p> | |
| <p class="text-gray-300">Sábado: 9h às 13h</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10"> | |
| <h4 class="font-bold text-lg mb-4">Siga-nos</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-xl transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-xl transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-xl transition"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center text-xl transition"> | |
| <i class="fab fa-pinterest-p"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-8">Envie uma Mensagem</h3> | |
| <form class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="contactName" class="block mb-2">Seu Nome*</label> | |
| <input type="text" id="contactName" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 text-white placeholder-gray-400"> | |
| </div> | |
| <div> | |
| <label for="contactEmail" class="block mb-2">Seu E-mail*</label> | |
| <input type="email" id="contactEmail" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 text-white placeholder-gray-400"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="contactSubject" class="block mb-2">Assunto*</label> | |
| <input type="text" id="contactSubject" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 text-white placeholder-gray-400"> | |
| </div> | |
| <div> | |
| <label for="contactMessage" class="block mb-2">Mensagem*</label> | |
| <textarea id="contactMessage" rows="5" required class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 text-white placeholder-gray-400"></textarea> | |
| </div> | |
| <button type="submit" class="btn-primary w-full text-white font-semibold py-4 px-6 rounded-lg"> | |
| Enviar Mensagem <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| <div class="mt-10 bg-gray-800 p-6 rounded-xl"> | |
| <h4 class="font-bold text-lg mb-3">Dúvidas Frequentes</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="font-medium text-rose-400">Quanto tempo demora um serviço de costura?</p> | |
| <p class="text-gray-400 text-sm">O prazo varia conforme o serviço, mas geralmente entre 3 a 7 dias úteis.</p> | |
| </div> | |
| <div> | |
| <p class="font-medium text-rose-400">Vocês fazem entregas?</p> | |
| <p class="text-gray-400 text-sm">Sim, oferecemos serviço de entrega com taxa adicional.</p> | |
| </div> | |
| <div> | |
| <p class="font-medium text-rose-400">Aceitam cartão de crédito?</p> | |
| <p class="text-gray-400 text-sm">Sim, aceitamos todas as bandeiras.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 border-t border-gray-800"> | |
| <div class="container mx-auto px-6 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f43f5e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> | |
| <circle cx="6" cy="6" r="3"></circle> | |
| <circle cx="6" cy="18" r="3"></circle> | |
| <line x1="20" y1="4" x2="8.12" y2="15.88"></line> | |
| <line x1="14.47" y1="14.48" x2="20" y2="20"></line> | |
| <line x1="8.12" y1="8.12" x2="12" y2="12"></line> | |
| </svg> | |
| <h2 class="text-xl font-bold text-white ml-2">Rosa Costuras</h2> | |
| </div> | |
| <p class="text-sm mb-4">Costurando sonhos e transformando tecidos em arte desde 2010.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Links Rápidos</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="hover:text-white transition">Início</a></li> | |
| <li><a href="#gallery" class="hover:text-white transition">Galeria</a></li> | |
| <li><a href="#services" class="hover:text-white transition">Serviços</a></li> | |
| <li><a href="#repairs" class="hover:text-white transition">Reparos</a></li> | |
| <li><a href="#contact" class="hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Serviços</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Roupas Sob Medida</a></li> | |
| <li><a href="#" class="hover:text-white transition">Reformas e Ajustes</a></li> | |
| <li><a href="#" class="hover:text-white transition">Customização</a></li> | |
| <li><a href="#" class="hover:text-white transition">Consertos Rápidos</a></li> | |
| <li><a href="#" class="hover:text-white transition">Consultoria de Moda</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-4">Newsletter</h3> | |
| <p class="text-sm mb-4">Inscreva-se para receber novidades e promoções.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Seu e-mail" class="px-4 py-2 bg-gray-800 text-white rounded-l-lg focus:outline-none focus:ring-2 focus:ring-rose-500 w-full"> | |
| <button type="submit" class="bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| <p class="text-xs mt-2">Não compartilhamos seus dados.</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center"> | |
| <p>© 2023 Rosa Costuras. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Upload Modal --> | |
| <div id="uploadModal" class="fixed inset-0 modal-overlay flex items-center justify-center z-50 hidden transition-opacity duration-300"> | |
| <div class="bg-white rounded-xl shadow-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800">Adicionar Foto</h3> | |
| <button onclick="closeUploadModal()" class="text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <form id="uploadForm" class="space-y-4"> | |
| <div> | |
| <label for="uploadPhoto" class="block text-gray-700 font-medium mb-2">Selecione a Foto*</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label for="uploadPhoto" class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i> | |
| <p class="mb-2 text-sm text-gray-500">Clique para enviar ou arraste a foto</p> | |
| <p class="text-xs text-gray-500">PNG, JPG (MAX. 5MB)</p> | |
| </div> | |
| <input id="uploadPhoto" type="file" class="hidden" accept="image/*" required> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="photoTitle" class="block text-gray-700 font-medium mb-2">Título*</label> | |
| <input type="text" id="photoTitle" required class="input-field w-full px-4 py-3 rounded-lg"> | |
| </div> | |
| <div> | |
| <label for="photoCategory" class="block text-gray-700 font-medium mb-2">Categoria*</label> | |
| <select id="photoCategory" required class="input-field w-full px-4 py-3 rounded-lg"> | |
| <option value="">Selecione...</option> | |
| <option value="new">Lançamento</option> | |
| <option value="novelty">Novidade</option> | |
| <option value="custom">Sob Medida</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="photoDescription" class="block text-gray-700 font-medium mb-2">Descrição*</label> | |
| <textarea id="photoDescription" rows="3" required class="input-field w-full px-4 py-3 rounded-lg"></textarea> | |
| </div> | |
| <div class="flex justify-end space-x-4 pt-4"> | |
| <button type="button" onclick="closeUploadModal()" class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition"> | |
| Cancelar | |
| </button> | |
| <button type="submit" class="btn-primary px-6 py-2 text-white rounded-lg"> | |
| Enviar Foto | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script> | |
| // Gallery Filter Function | |
| function filterGallery(category) { | |
| const items = document.querySelectorAll('.gallery-item'); | |
| const buttons = document.querySelectorAll('.category-btn'); | |
| // Update active button | |
| buttons.forEach(btn => { | |
| btn.classList.remove('active'); | |
| if ((category === 'all' && btn.textContent.includes('Todos')) || | |
| (category === 'new' && btn.textContent.includes('Lançamentos')) || | |
| (category === 'novelty' && btn.textContent.includes('Novidades')) || | |
| (category === 'custom' && btn.textContent.includes('Sob Medida'))) { | |
| btn.classList.add('active'); | |
| } | |
| }); | |
| // Filter items | |
| items.forEach(item => { | |
| if (category === 'all' || item.dataset.category === category) { | |
| item.style.display = 'block'; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Upload Modal Functions | |
| function openUploadModal() { | |
| const modal = document.getElementById('uploadModal'); | |
| const modalContent = modal.querySelector('div'); | |
| modal.classList.remove('hidden'); | |
| setTimeout(() => { | |
| modal.classList.add('opacity-100'); | |
| modalContent.classList.remove('scale-95', 'opacity-0'); | |
| modalContent.classList.add('scale-100', 'opacity-100'); | |
| }, 10); | |
| } | |
| function closeUploadModal() { | |
| const modal = document.getElementById('uploadModal'); | |
| const modalContent = modal.querySelector('div'); | |
| modalContent.classList.remove('scale-100', 'opacity-100'); | |
| modalContent.classList.add('scale-95', 'opacity-0'); | |
| setTimeout(() => { | |
| modal.classList.remove('opacity-100'); | |
| modal.classList.add('hidden'); | |
| }, 300); | |
| } | |
| // Form Submission | |
| document.getElementById('repairForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| Swal.fire({ | |
| icon: 'success', | |
| title: 'Solicitação enviada!', | |
| text: 'Entraremos em contato em breve para confirmar seu pedido.', | |
| confirmButtonColor: '#f43f5e' | |
| }); | |
| this.reset(); | |
| }); | |
| document.getElementById('uploadForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| Swal.fire({ | |
| icon: 'success', | |
| title: 'Foto enviada!', | |
| text: 'Após análise, sua foto será publicada na galeria.', | |
| confirmButtonColor: '#f43f5e' | |
| }); | |
| this.reset(); | |
| closeUploadModal(); | |
| }); | |
| document.querySelector('#contact form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| Swal.fire({ | |
| icon: 'success', | |
| title: 'Mensagem enviada!', | |
| text: 'Responderemos sua mensagem em breve.', | |
| confirmButtonColor: '#f43f5e' | |
| }); | |
| this.reset(); | |
| }); | |
| // Mobile Menu Toggle | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| // Mobile menu implementation would go here | |
| Swal.fire({ | |
| icon: 'info', | |
| title: 'Menu Mobile', | |
| text: 'A navegação mobile seria implementada aqui', | |
| confirmButtonColor: '#f43f5e' | |
| }); | |
| }); | |
| // Initialize SweetAlert if needed | |
| if (typeof Swal === 'undefined') { | |
| const script = document.createElement('script'); | |
| script.src = 'https://cdn.jsdelivr.net/npm/sweetalert2@11'; | |
| document.head.appendChild(script); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=msribeiro2010/teste" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |