Spaces:
Running
Running
| <html lang="es" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>La Fragua del Logos</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="components/header.js"></script> | |
| <script src="components/footer.js"></script> | |
| <script src="scripts/languages.js"></script> | |
| <script src="script.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap'); | |
| </style> | |
| </head> | |
| <body class="bg-amber-50 text-gray-900 font-lato"> | |
| <custom-header></custom-header> | |
| <main> | |
| <!-- Hero Section --> | |
| <section class="relative h-screen flex items-center justify-center bg-gradient-to-b from-gray-900 to-amber-900 overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/education/1200x630/1')] opacity-20 bg-cover bg-center"></div> | |
| <div class="relative z-10 text-center px-4 max-w-4xl"> | |
| <h1 class="text-5xl md:text-7xl font-playfair font-bold text-amber-100 mb-6"> | |
| <span class="block" data-i18n="hero_title">Where words are forged into ideas</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-amber-200 mb-8" data-i18n="hero_subtitle"> | |
| And ideas into meaning at the anvil of language | |
| </p> | |
| <a href="#services" class="inline-block px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300"> | |
| <span data-i18n="hero_button">Discover my craft</span> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-12 bg-amber-50"> | |
| <div class="container mx-auto px-4 max-w-5xl"> | |
| <h2 class="text-3xl font-playfair font-bold text-center text-gray-900 mb-8" data-i18n="services_title"> | |
| My Linguistic Services | |
| </h2> | |
| <div class="flex flex-col md:flex-row gap-6 justify-center"> | |
| <!-- Translation Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6 w-full md:w-1/3 flex flex-col"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="globe" class="w-12 h-12 text-amber-700"></i> | |
| </div> | |
| <h3 class="text-lg font-playfair font-bold mb-2 text-center" data-i18n="service1_title">Translation</h3> | |
| <p class="text-gray-700 mb-4 text-sm text-center" data-i18n="service1_desc"> | |
| Precise and culturally adapted translations. | |
| </p> | |
| </div> | |
| <!-- Transcription Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6 w-full md:w-1/3 flex flex-col"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="headphones" class="w-12 h-12 text-amber-700"></i> | |
| </div> | |
| <h3 class="text-lg font-playfair font-bold mb-2 text-center" data-i18n="service2_title">Transcription</h3> | |
| <p class="text-gray-700 mb-4 text-sm text-center" data-i18n="service2_desc"> | |
| Accurate verbatim or edited transcriptions. | |
| </p> | |
| </div> | |
| <!-- Subtitling Card --> | |
| <div class="bg-white rounded-lg shadow-md p-6 w-full md:w-1/3 flex flex-col"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="film" class="w-12 h-12 text-amber-700"></i> | |
| </div> | |
| <h3 class="text-lg font-playfair font-bold mb-2 text-center" data-i18n="service3_title">Subtitling</h3> | |
| <p class="text-gray-700 mb-4 text-sm text-center" data-i18n="service3_desc"> | |
| Professional subtitles with perfect timing. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <a href="#contact" class="inline-block px-6 py-2 bg-amber-700 hover:bg-amber-600 text-white text-sm font-medium rounded-lg transition duration-300"> | |
| <span data-i18n="service_cta">Get in touch</span> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="py-20 bg-gradient-to-b from-amber-50 to-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-playfair font-bold text-center mb-4 text-gray-900" data-i18n="blog_title"> | |
| Más Allá de las Palabras | |
| </h2> | |
| <div class="w-24 h-1 bg-amber-700 mx-auto mb-4"></div> | |
| <p class="text-center text-lg text-gray-700 mb-12 max-w-2xl mx-auto" data-i18n="blog_subtitle"> | |
| El mundo que me inspira y enriquece mi trabajo como traductora | |
| </p> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="flex flex-wrap justify-center gap-3 mb-8"> | |
| <button data-category="mitologia" class="category-btn flex items-center gap-2 bg-amber-700 text-white font-medium hovered-element active-category"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-award w-4 h-4"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg> | |
| <span class="hovered-element">Mitología</span> | |
| </button> | |
| <button data-category="lectura" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium hovered-element"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open w-4 h-4"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg> | |
| <span class="hovered-element" data-i18n="blog_reading">Lectura</span> | |
| </button> | |
| <button data-category="musica" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium hovered-element"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music w-4 h-4"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg> | |
| <span class="hovered-element" data-i18n="blog_music">Música</span> | |
| </button> | |
| <button data-category="etimologia" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium hovered-element"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-type w-4 h-4"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg> | |
| <span class="hovered-element" data-i18n="blog_etymology">Etimología</span> | |
| </button> | |
| <button data-category="idiomas" class="category-btn flex items-center gap-2 bg-white text-gray-700 font-medium hovered-element"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe w-4 h-4"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg> | |
| <span class="hovered-element" data-i18n="blog_languages">Idiomas</span> | |
| </button> | |
| </div> | |
| <!-- Mythology Content --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12" data-category-content="mitologia"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_mythology_title">El Poder de los Mitos</h3> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p1"> | |
| La mitología ha sido mi pasión desde la infancia. Los mitos antiguos no son solo historias fascinantes, sino ventanas a la comprensión de diferentes culturas y la psique humana. | |
| </p> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_mythology_p2"> | |
| Cada mito encierra lecciones universales sobre el valor, el amor, la traición y la redención. | |
| </p> | |
| <p class="text-gray-600 italic" data-i18n="blog_mythology_quote"> | |
| "Los mitos son historias que nunca sucedieron pero siempre están sucediendo." - Salustio | |
| </p> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://cdn.pixabay.com/photo/2016/05/02/01/16/medusa-1366362_960_720.jpg" alt=" Mitología Griega" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Reading Content --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="lectura"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_reading_title">El Universo en las Páginas</h3> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_reading_p1"> | |
| La lectura es mi refugio y mi herramienta más poderosa. Cada libro es un mundo por descubrir, | |
| una oportunidad para expandir mis horizontes y comprender otras realidades. | |
| </p> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_reading_p2"> | |
| Como traductora, la literatura me enseña los matices del lenguaje, las voces únicas de cada autor | |
| y las infinitas posibilidades de expresión. Mis géneros favoritos son la ficción literaria y la poesía. | |
| </p> | |
| <p class="text-gray-600 italic" data-i18n="blog_reading_quote"> | |
| "Un lector vive mil vidas antes de morir. El que nunca lee vive solo una." - George R.R. Martin | |
| </p> | |
| </div> | |
| <div class="order-1 md:order-2 rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://cdn.pixabay.com/photo/2019/02/15/11/04/book-3998252_960_720.jpg" alt="Libro abierto" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Music Content --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="musica"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_music_title">El Ritmo de las Palabras</h3> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_music_p1"> | |
| La música es el lenguaje universal por excelencia. Como traductora, encuentro paralelismos fascinantes | |
| entre la traducción y la interpretación musical. | |
| </p> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_music_p2"> | |
| Cada idioma tiene su propio ritmo y melodía. Escuchar música en diferentes lenguas me ayuda a captar | |
| estos patrones y a aplicarlos en mi trabajo. Mis géneros preferidos son el jazz, el folk y la música clásica. | |
| </p> | |
| <p class="text-gray-600 italic" data-i18n="blog_music_quote"> | |
| "Donde las palabras fallan, la música habla." - Hans Christian Andersen | |
| </p> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://cdn.pixabay.com/photo/2021/04/10/21/45/music-book-6168179_960_720.jpg" alt="Partitura musical" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Etymology Content --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="etimologia"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div class="order-2 md:order-1"> | |
| <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_etymology_title">Raíces y Evolución</h3> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_etymology_p1"> | |
| La etimología es como la arqueología del lenguaje. Descubrir el origen de las palabras me permite | |
| comprender mejor su significado actual y sus connotaciones. | |
| </p> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_etymology_p2"> | |
| En mi trabajo como traductora, conocer la historia de las palabras me ayuda a tomar decisiones más | |
| informadas y a encontrar equivalencias más precisas entre idiomas. | |
| </p> | |
| <p class="text-gray-600 italic" data-i18n="blog_etymology_quote"> | |
| "El estudio de la etimología es el estudio de las relaciones entre lenguas, culturas y pensamientos." - Yakov Malkiel | |
| </p> | |
| </div> | |
| <div class="order-1 md:order-2 rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://cdn.pixabay.com/photo/2018/01/08/08/35/alzheimers-3068938_960_720.jpg" alt="Letras del alfabeto" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Languages Content --> | |
| <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-12 hidden" data-category-content="idiomas"> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h3 class="text-3xl font-playfair font-bold mb-4 text-gray-900" data-i18n="blog_languages_title">Puentes entre Culturas</h3> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_languages_p1"> | |
| Cada idioma que aprendo abre una nueva ventana al mundo. Más allá del dominio técnico, lo que más | |
| me fascina es descubrir cómo cada lengua moldea el pensamiento de sus hablantes. | |
| </p> | |
| <p class="text-lg leading-relaxed mb-4" data-i18n="blog_languages_p2"> | |
| Como traductora, este conocimiento me permite captar no solo el significado literal, sino también | |
| los matices culturales y psicológicos que hacen única a cada lengua. | |
| </p> | |
| <p class="text-gray-600 italic" data-i18n="blog_languages_quote"> | |
| "Los límites de mi lenguaje son los límites de mi mundo." - Ludwig Wittgenstein | |
| </p> | |
| </div> | |
| <div class="rounded-lg overflow-hidden shadow-xl"> | |
| <img src="https://cdn.pixabay.com/photo/2022/08/16/06/30/different-language-7389469_960_720.jpg" alt="La palabra hola en varios idiomas" class="w-full h-full object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blog Posts Grid --> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://cdn.pixabay.com/photo/2017/08/21/08/21/directory-2664470_960_720.jpg" alt="Diosa Atenea - Mitología Griega" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute top-4 left-4 flex flex-wrap gap-2"> | |
| <span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-medium">Mitología</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-600 mb-3"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2"></i> | |
| <span data-i18n="blog_date1">May 15, 2023</span> | |
| </div> | |
| <h3 class="text-xl font-playfair font-bold mb-3 group-hover:text-amber-700 transition-colors" data-i18n="blog_title1"> | |
| Los Orígenes Ardientes de Frases Comunes | |
| </h3> | |
| <p class="text-gray-700 mb-4" data-i18n="blog_excerpt1"> | |
| Explorando cómo la terminología de herrería se forjó en el lenguaje cotidiano... | |
| </p> | |
| <div class="flex items-center text-amber-700 font-medium group-hover:gap-2 transition-all"> | |
| <span data-i18n="blog_readmore">Leer más</span> | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://cdn.pixabay.com/photo/2018/03/19/18/20/tea-time-3240766_960_720.jpg" alt="Símbolos de traducción" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute top-4 left-4 flex flex-wrap gap-2"> | |
| <span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-medium">Tecnología</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-600 mb-3"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2"></i> | |
| <span data-i18n="blog_date2">April 28, 2023</span> | |
| </div> | |
| <h3 class="text-xl font-playfair font-bold mb-3 group-hover:text-amber-700 transition-colors" data-i18n="blog_title2"> | |
| Cuando las Máquinas Traducen Poesía | |
| </h3> | |
| <p class="text-gray-700 mb-4" data-i18n="blog_excerpt2"> | |
| Los desafíos y ocasionales triunfos de la IA en la traducción literaria... | |
| </p> | |
| <div class="flex items-center text-amber-700 font-medium group-hover:gap-2 transition-all"> | |
| <span data-i18n="blog_readmore">Leer más</span> | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Blog Post 3 --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group cursor-pointer"> | |
| <div class="relative h-48 overflow-hidden"> | |
| <img src="https://cdn.pixabay.com/photo/2017/09/27/18/44/lanterns-2792988_960_720.jpg" alt="Letras del alfabeto" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"> | |
| <div class="absolute top-4 left-4 flex flex-wrap gap-2"> | |
| <span class="bg-amber-700 text-white px-3 py-1 rounded-full text-xs font-medium">Cultura</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-600 mb-3"> | |
| <i data-feather="calendar" class="w-4 h-4 mr-2"></i> | |
| <span data-i18n="blog_date3">March 10, 2023</span> | |
| </div> | |
| <h3 class="text-xl font-playfair font-bold mb-3 group-hover:text-amber-700 transition-colors" data-i18n="blog_title3"> | |
| Perdido en la Traducción: Matices Culturales | |
| </h3> | |
| <p class="text-gray-700 mb-4" data-i18n="blog_excerpt3"> | |
| Cómo los modismos y referencias culturales presentan desafíos únicos para los traductores... | |
| </p> | |
| <div class="flex items-center text-amber-700 font-medium group-hover:gap-2 transition-all"> | |
| <span data-i18n="blog_readmore">Leer más</span> | |
| <i data-feather="arrow-right" class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="blog.html" class="inline-flex items-center px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition-all duration-300 group"> | |
| <span data-i18n="blog_viewall">Ver todos los artículos</span> | |
| <i data-feather="arrow-right" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-playfair font-bold text-center mb-4" data-i18n="contact_title"> | |
| Let's Forge Something Together | |
| </h2> | |
| <p class="text-center text-amber-200 max-w-2xl mx-auto mb-12" data-i18n="contact_subtitle"> | |
| Send me a message about your project | |
| </p> | |
| <form action="https://formsubmit.co/mariavidartearana@gmail.com" method="POST" class="max-w-2xl mx-auto"> | |
| <input type="hidden" name="_subject" value="New message from La Fragua del Logos!"> | |
| <input type="hidden" name="_next" value="https://yourdomain.com/thanks.html"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block mb-2 font-medium" data-i18n="contact_name">Your Name</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block mb-2 font-medium" data-i18n="contact_email">Email Address</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block mb-2 font-medium" data-i18n="contact_subject">Subject</label> | |
| <select id="subject" name="subject" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"> | |
| <option value="Translation" data-i18n="contact_option1">Translation Services</option> | |
| <option value="Transcription" data-i18n="contact_option2">Transcription Services</option> | |
| <option value="Subtitling" data-i18n="contact_option3">Subtitling Services</option> | |
| <option value="Other" data-i18n="contact_option4">Other Inquiry</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block mb-2 font-medium" data-i18n="contact_message">Your Message</label> | |
| <textarea id="message" name="message" rows="5" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full md:w-auto px-8 py-3 bg-amber-700 hover:bg-amber-600 text-white font-medium rounded-lg transition duration-300" data-i18n="contact_button"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |