Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Arcell delivers high-tech translation with native-speaker validation and defense-grade security for rare and mission-critical languages."> | |
| <meta name="keywords" content="rare language translation, Fulani translation, Wolof translation, Dari linguist, Urdu translation security"> | |
| <title>Arcell — Rare Language Translation Platform | Fulani, Wolof, Urdu, Dari</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #2563eb; | |
| --secondary: #1e40af; | |
| --accent: #f59e0b; | |
| --light: #f8fafc; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f8fafc; | |
| } | |
| header { | |
| background: linear-gradient(135deg, #9c7c38, #5a3e1b); | |
| color: white; | |
| padding: 8rem 1rem; | |
| clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); | |
| } | |
| .demo-card { | |
| background: white; | |
| border: 1px solid #d4a76a; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.05); | |
| padding: 2.5rem; | |
| margin: 2rem 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .demo-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .language-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| background: var(--light); | |
| padding: 0.6rem 1.2rem; | |
| border-radius: 9999px; | |
| margin: 0.5rem; | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.05); | |
| transition: all 0.2s ease; | |
| } | |
| .language-badge:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.1); | |
| } | |
| footer { | |
| background: #5a3e1b; | |
| color: white; | |
| padding: 3rem 1rem; | |
| margin-top: 6rem; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #9c7c38, #c19a5b); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="container mx-auto px-4 text-center animate__animated animate__fadeIn"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">Breaking Barriers in <span class="gradient-text">Rare Language</span> Translation</h1> | |
| <p class="text-xl md:text-2xl opacity-90 mb-8 max-w-3xl mx-auto">Arcell delivers secure, culturally accurate translations for languages critical to today's global security and humanitarian needs.</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#demo" class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1"> | |
| Try the Demo | |
| </a> | |
| <a href="#contact" class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition-all duration-300"> | |
| Contact Us | |
| </a> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-16 max-w-6xl"> | |
| <section id="about" class="mb-24 animate__animated animate__fadeIn"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">About <span class="gradient-text">Arcell</span></h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-amber-400 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center gap-12"> | |
| <div class="md:w-1/2"> | |
| <p class="text-lg md:text-xl text-gray-700 leading-relaxed mb-8">In today's interconnected world, communication barriers in rare languages can mean the difference between success and failure in critical missions. Arcell specializes in non-mainstream languages with defense-grade security and cultural nuance.</p> | |
| <div class="flex flex-wrap justify-center md:justify-start"> | |
| <span class="language-badge" style="background-color: #d4a76a;"><i data-feather="globe" class="w-4 h-4 mr-2"></i> Fulani</span> | |
| <span class="language-badge" style="background-color: #ba8c4a;"><i data-feather="globe" class="w-4 h-4 mr-2"></i> Wolof</span> | |
| <span class="language-badge" style="background-color: #9c7c38;"><i data-feather="globe" class="w-4 h-4 mr-2"></i> Urdu</span> | |
| <span class="language-badge" style="background-color: #7d5d34;"><i data-feather="globe" class="w-4 h-4 mr-2"></i> Dari</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="http://static.photos/office/640x360/42" alt="Translation Team Working" class="rounded-xl shadow-xl w-full"> | |
| <img src="http://static.photos/technology/640x360/78" alt="Language Technology" class="rounded-xl shadow-xl w-full mt-8"> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="demo" class="demo-card animate__animated animate__fadeIn"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Translation Demo</h2> | |
| <p class="text-gray-600">Experience our technology in action</p> | |
| </div> | |
| <form id="translationForm" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="sourceLang" class="block text-sm font-medium text-gray-700 mb-2">Source Language</label> | |
| <select id="sourceLang" required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"> | |
| <option value="" selected disabled>Select source</option> | |
| <option value="fulani">Fulani</option> | |
| <option value="wolof">Wolof</option> | |
| <option value="urdu">Urdu</option> | |
| <option value="dari">Dari</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="targetLang" class="block text-sm font-medium text-gray-700 mb-2">Target Language</label> | |
| <select id="targetLang" required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"> | |
| <option value="" selected disabled>Select target</option> | |
| <option value="english">English</option> | |
| <option value="french">French</option> | |
| <option value="spanish">Spanish</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="fileUpload" class="block text-sm font-medium text-gray-700 mb-2">Upload Audio or Text File</label> | |
| <div class="flex items-center justify-center w-full"> | |
| <label class="flex flex-col w-full h-32 border-2 border-dashed rounded-lg hover:bg-gray-50 transition-all cursor-pointer"> | |
| <div class="flex flex-col items-center justify-center pt-7"> | |
| <i data-feather="upload" class="w-8 h-8 text-gray-400"></i> | |
| <p class="pt-1 text-sm tracking-wider text-gray-500">Drag & drop your file here</p> | |
| </div> | |
| <input type="file" id="fileUpload" accept=".txt,.mp3,.wav" required class="opacity-0"> | |
| </label> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-6 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | |
| Translate Now | |
| </button> | |
| </form> | |
| <div id="result" class="mt-8 p-6 bg-gray-50 rounded-xl" style="display: none;"> | |
| <h3 class="text-xl font-semibold mb-4">Translation Result</h3> | |
| <div id="translationOutput" class="p-4 bg-white rounded-lg shadow-inner text-gray-700"></div> | |
| <small class="text-gray-500 italic mt-2 block">This is a demo version. Not all translations are complete.</small> | |
| </div> | |
| </section> | |
| <section id="use-cases" class="mt-24 animate__animated animate__fadeIn"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Use <span class="gradient-text">Cases</span></h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-amber-400 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <article class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 group"> | |
| <div class="w-full mb-4 overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/legal/640x360/23" alt="Security Translation" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"> | |
| </div> | |
| <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-amber-600 transition-all"> | |
| <i data-feather="shield" class="w-6 h-6 text-amber-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Defense & Security</h3> | |
| <p class="text-gray-600">Accurate, real-time translation of intercepted communications or field intelligence with cultural context.</p> | |
| </article> | |
| <article class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 group"> | |
| <div class="w-full mb-4 overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/humanitarian/640x360/56" alt="Humanitarian Translation" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"> | |
| </div> | |
| <div class="w-12 h-12 bg-amber-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-amber-600 transition-all"> | |
| <i data-feather="heart" class="w-6 h-6 text-amber-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Humanitarian Response</h3> | |
| <p class="text-gray-600">Bridge cultural and communication gaps in crisis situations with local populations.</p> | |
| </article> | |
| <article class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 group"> | |
| <div class="w-full mb-4 overflow-hidden rounded-lg"> | |
| <img src="http://static.photos/field/640x360/89" alt="Field Translation" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"> | |
| </div> | |
| <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-600 transition-all"> | |
| <i data-feather="map" class="w-6 h-6 text-green-600 group-hover:text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Field Operations</h3> | |
| <p class="text-gray-600">Support for linguistically complex regions with cultural and situational awareness.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <section id="contact" class="mt-24 animate__animated animate__fadeIn"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Contact <span class="gradient-text">Us</span></h2> | |
| <div class="w-24 h-1 bg-gradient-to-r from-blue-500 to-amber-400 mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-12"> | |
| <div class="md:w-1/2"> | |
| <form id="contactForm" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name</label> | |
| <input type="text" id="name" required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label> | |
| <input type="email" id="email" required | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="organization" class="block text-sm font-medium text-gray-700 mb-2">Organization</label> | |
| <input type="text" id="organization" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-2">Message</label> | |
| <textarea id="message" required rows="5" | |
| class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-6 rounded-lg font-medium shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2 bg-gray-50 p-8 rounded-xl"> | |
| <h3 class="text-xl font-semibold mb-6">Get in Touch</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-blue-100 p-2 rounded-lg"> | |
| <i data-feather="mail" class="w-5 h-5 text-blue-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Email us at</p> | |
| <p class="font-medium">[email protected]</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-amber-100 p-2 rounded-lg"> | |
| <i data-feather="phone" class="w-5 h-5 text-amber-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Call us at</p> | |
| <p class="font-medium">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-green-100 p-2 rounded-lg"> | |
| <i data-feather="map-pin" class="w-5 h-5 text-green-500"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm text-gray-500">Visit us at</p> | |
| <p class="font-medium">123 Tech Street, San Francisco, CA 94107</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-200"> | |
| <h4 class="text-lg font-medium mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-amber-200 transition-all"> | |
| <i data-feather="twitter" class="text-amber-600"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-amber-300 transition-all"> | |
| <i data-feather="facebook" class="text-amber-700"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-amber-400 transition-all"> | |
| <i data-feather="youtube" class="text-amber-800"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center hover:bg-amber-500 transition-all"> | |
| <i data-feather="linkedin" class="text-amber-900"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center py-8"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold text-white">Arcell</a> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8"> | |
| <a href="#about" class="text-white hover:text-amber-200 transition-colors">About</a> | |
| <a href="#demo" class="text-white hover:text-amber-200 transition-colors">Demo</a> | |
| <a href="#use-cases" class="text-white hover:text-amber-200 transition-colors">Use Cases</a> | |
| <a href="#contact" class="text-white hover:text-amber-200 transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-400 pt-8 pb-4"> | |
| <p class="text-center text-blue-100">© 2023 Arcell. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| document.getElementById('translationForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const sourceLang = document.getElementById('sourceLang').value; | |
| const targetLang = document.getElementById('targetLang').value; | |
| // Animation while loading | |
| const button = this.querySelector('button[type="submit"]'); | |
| button.innerHTML = '<span class="animate-spin">⏳</span> Translating...'; | |
| button.disabled = true; | |
| // Mock translation output with delay for better UX | |
| setTimeout(() => { | |
| const translations = { | |
| fulani: { | |
| english: "This is a sample translation from Fulani to English.", | |
| french: "Ceci est une traduction d'exemple du fulani vers le français.", | |
| spanish: "Esta es una traducción de muestra del fulani al español." | |
| }, | |
| wolof: { | |
| english: "This is a sample translation from Wolof to English.", | |
| french: "Ceci est une traduction d'exemple du wolof vers le français.", | |
| spanish: "Esta es una traducción de muestra del wolof al español." | |
| }, | |
| urdu: { | |
| english: "This is a sample translation from Urdu to English.", | |
| french: "Ceci est une traduction d'exemple de l'ourdou vers le français.", | |
| spanish: "Esta es una traducción de muestra del urdu al español." | |
| }, | |
| dari: { | |
| english: "This is a sample translation from Dari to English.", | |
| french: "Ceci est une traduction d'exemple du dari vers le français.", | |
| spanish: "Esta es una traducción de muestra del dari al español." | |
| } | |
| }; | |
| document.getElementById('translationOutput').textContent = translations[sourceLang][targetLang]; | |
| // Show result with animation | |
| const result = document.getElementById('result'); | |
| result.style.display = 'block'; | |
| result.classList.add('animate__animated', 'animate__fadeIn'); | |
| // Reset button | |
| button.innerHTML = 'Translate Now'; | |
| button.disabled = false; | |
| }, 1500); | |
| }); | |
| document.getElementById('contactForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Show success message with animation | |
| const button = this.querySelector('button[type="submit"]'); | |
| button.innerHTML = '<span class="animate-pulse">✓</span> Message Sent'; | |
| button.classList.add('bg-green-500'); | |
| setTimeout(() => { | |
| const alertDiv = document.createElement('div'); | |
| alertDiv.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg animate__animated animate__fadeIn animate__faster'; | |
| alertDiv.innerHTML = 'Thank you for your message! We will contact you shortly.'; | |
| document.body.appendChild(alertDiv); | |
| // Remove alert after 5 seconds | |
| setTimeout(() => { | |
| alertDiv.classList.add('animate__fadeOut'); | |
| setTimeout(() => alertDiv.remove(), 300); | |
| }, 5000); | |
| this.reset(); | |
| button.innerHTML = 'Send Message'; | |
| button.classList.remove('bg-green-500'); | |
| }, 500); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |