Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Richiedi un preventivo per i nostri servizi di allestimento scenografico"> | |
| <title>Contatti | StageCrafters Pro</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <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=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="js/tailwind.js"></script> | |
| <script src="js/feather-icons.js"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <!-- Contact Hero --> | |
| <section class="relative py-20 bg-gradient-to-r from-indigo-800 to-purple-900 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Richiedi un preventivo</h1> | |
| <p class="text-xl max-w-2xl mx-auto">Compila il form e ti risponderemo entro 24 ore con una soluzione personalizzata per il tuo evento.</p> | |
| </div> | |
| </section> | |
| <!-- Contact Form --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <div class="bg-gray-50 rounded-xl p-8 md:p-12 shadow-lg"> | |
| <form id="contactForm"> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nome *</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-gray-700 font-medium mb-2">Azienda</label> | |
| <input type="text" id="company" name="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Telefono *</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="eventType" class="block text-gray-700 font-medium mb-2">Tipo di evento *</label> | |
| <select id="eventType" name="eventType" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"> | |
| <option value="">Seleziona...</option> | |
| <option value="concerto">Concerto</option> | |
| <option value="teatro">Spettacolo Teatrale</option> | |
| <option value="evento">Evento Aziendale</option> | |
| <option value="mostra">Mostra/Esposizione</option> | |
| <option value="altro">Altro</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Descrizione del tuo progetto *</label> | |
| <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"></textarea> | |
| </div> | |
| <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center"> | |
| Invia richiesta <i data-feather="send" class="ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Info --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-xl p-8 shadow-lg text-center"> | |
| <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Email</h3> | |
| <p class="text-gray-600">info@stagecrafterspro.it</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-lg text-center"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="phone" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Telefono</h3> | |
| <p class="text-gray-600">+39 012 345 6789</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-lg text-center"> | |
| <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto"> | |
| <i data-feather="map-pin" class="text-yellow-600 w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Sede</h3> | |
| <p class="text-gray-600">Via dello Spettacolo 123, Milano</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| // Form validation and submission would be added here | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Form submission logic would go here | |
| alert('Grazie per la tua richiesta! Ti contatteremo al più presto.'); | |
| this.reset(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |