Spaces:
Running
Running
File size: 28,555 Bytes
0e82ba4 27ac2b3 0e82ba4 27ac2b3 0e82ba4 27ac2b3 0e82ba4 2ad1758 0e82ba4 50f82ff 9bd490f 50f82ff 0e82ba4 50f82ff 70a1a92 0e82ba4 d10f440 aa084dd 70a1a92 d10f440 70a1a92 d10f440 70a1a92 d10f440 70a1a92 d10f440 70a1a92 d10f440 70a1a92 aa084dd 50f82ff d10f440 50f82ff bc3b647 d10f440 e799bf5 d10f440 50f82ff ea10329 92ff11c 6981f75 50f82ff 3bce69d d10f440 3bce69d ea10329 3bce69d 6981f75 3bce69d d10f440 3bce69d ea10329 3bce69d 6981f75 3bce69d d10f440 3bce69d ea10329 3bce69d 6981f75 3bce69d d10f440 3bce69d ea10329 3bce69d 6981f75 3bce69d 50f82ff 11b6f85 6981f75 50f82ff 0e82ba4 50f82ff 11b6f85 6981f75 50f82ff 0e82ba4 50f82ff 11b6f85 6981f75 50f82ff 0e82ba4 50f82ff 0e82ba4 33ebfd0 0e82ba4 5671a04 0e82ba4 27ac2b3 0e82ba4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 |
<!DOCTYPE html>
<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> |