Spaces:
Running
Running
| <html lang="fi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TuuliaTrade - Ammattitaitoista siivouspalvelua</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> | |
| .hero-image { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://www.tuuliatrade.com/wp-content/uploads/2020/08/jeshoots-com-__ZMnefoI3k-unsplash-scaled.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .price-card { | |
| transition: all 0.3s ease; | |
| } | |
| .price-card:hover { | |
| transform: scale(1.03); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-broom text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-blue-800">TuuliaTrade</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#about" class="text-gray-700 hover:text-blue-600 font-medium">Meistä</a> | |
| <a href="#services" class="text-gray-700 hover:text-blue-600 font-medium">Palvelut</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-blue-600 font-medium">Hinnasto</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 font-medium">Ota Yhteyttä</a> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-image h-96 flex items-center justify-center text-white"> | |
| <div class="text-center px-4"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Luotettavaa yrityssiivousta jo vuodesta 2011</h1> | |
| <p class="text-xl mb-8">Toimeentarttuva ja reipas yrittäjänainen apujoukkoineen on valmis tulemaan avuksesi</p> | |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> | |
| Ota yhteyttä | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Welcome Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl font-bold text-blue-800 mb-6">Tervetuloa, olet oikealla sivulla!</h2> | |
| <p class="text-gray-700 mb-4">TuuliaTrade - our work is great!</p> | |
| <p class="text-gray-700 mb-4">Arvoinamme on huolehtia asiakkaan toimitiloista kuin omistamme, ja teemme tarpeen mukaan "myös vähän yli", jotta asiakas pystyy keskittymään omaan perusosaamiseensa.</p> | |
| <p class="text-gray-700">Olemme saaneet kiitosta erinomaisesta työnjäljestä sekä mutkattomasta ja sujuvasta yhteistyöstä. Kauttamme saat luotettavan ja huolellisen tekijän!</p> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="http://www.tuuliatrade.com/wp-content/uploads/2020/08/good-soul-shop-DlO0yz4U67A-unsplash-scaled.jpg" | |
| alt="Siivoustyötä" | |
| class="rounded-lg shadow-xl w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-blue-800 mb-12">Minkälaista siivouspalvelua kaipaat?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md service-card transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-user-tie text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Jatkuva laatu</h3> | |
| <p class="text-gray-700">Tasainen laatu on siivouksessa tärkeää. Jatkuvan laadun varmistamiseksi TuuliaTradella tekijät eivät vaihdu.</p> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md service-card transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-user-shield text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Oma siivooja</h3> | |
| <p class="text-gray-700">Saat meiltä omasiivoojan, joka huolehtii tiloistasi ammattitaitoisesti sekä huolellisesti, ihan joka kerta.</p> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-md service-card transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-clock text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Joustavuus</h3> | |
| <p class="text-gray-700">Yksityisen omasiivojan etuina onkin joustavuus. Meille voit huoletta antaa avaimesi, huolehdimme puhtaanpidosta iltaisin ja viikonloppuisin.</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 inline-block"> | |
| Aloita viikkosi puhtaalta pöydältä | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-blue-800 mb-12">Hinnasto</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Price Card 1 --> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-md price-card border-t-4 border-blue-600"> | |
| <h3 class="text-xl font-bold mb-4 text-center text-blue-800">Yrityssiivous</h3> | |
| <p class="text-center text-gray-700 mb-6">Alkaen</p> | |
| <p class="text-3xl font-bold text-center text-blue-600 mb-6">37 € <span class="text-sm font-normal">(alv. 0%)</span></p> | |
| <p class="text-xl text-center text-gray-700 mb-6">45,88 € <span class="text-sm">(alv 24%)</span></p> | |
| <div class="text-center"> | |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium">Kysy tarjous!</a> | |
| </div> | |
| </div> | |
| <!-- Price Card 2 --> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-md price-card border-t-4 border-blue-600"> | |
| <h3 class="text-xl font-bold mb-4 text-center text-blue-800">Kodinhoitotyöt</h3> | |
| <p class="text-center text-gray-700 mb-6">Alkaen</p> | |
| <p class="text-3xl font-bold text-center text-blue-600 mb-6">37 € <span class="text-sm font-normal">(sis. alv)</span></p> | |
| <p class="text-center text-gray-700 mb-6">min. 2h / kerta</p> | |
| <div class="text-center"> | |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium">Lisätiedot</a> | |
| </div> | |
| </div> | |
| <!-- Price Card 3 --> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-md price-card border-t-4 border-blue-600"> | |
| <h3 class="text-xl font-bold mb-4 text-center text-blue-800">Sopimussiivoukset</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-gray-700">Arkisin alkaen</p> | |
| <p class="text-lg font-bold text-blue-600">37 €/h <span class="text-sm font-normal">(alv 0%)</span></p> | |
| <p class="text-gray-700">45,88 €/h <span class="text-sm">(alv 24%)</span></p> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">Viikonloppuisin alkaen</p> | |
| <p class="text-lg font-bold text-blue-600">46 €/h <span class="text-sm font-normal">(alv 0%)</span></p> | |
| <p class="text-gray-700">57,04 €/h <span class="text-sm">(alv 24%)</span></p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <a href="#contact" class="text-blue-600 hover:text-blue-800 font-medium">Kertasiivoukset sopimuksen mukaan</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center text-blue-800 mb-12">Yhteydenotto</h2> | |
| <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-blue-600 text-white p-8"> | |
| <h3 class="text-2xl font-bold mb-6">Ota meihin yhteyttä</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-4"></i> | |
| <div> | |
| <p class="font-bold">Puhelin</p> | |
| <p>+358 40 123 4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-4"></i> | |
| <div> | |
| <p class="font-bold">Sähköposti</p> | |
| <p>info@tuuliatrade.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-4"></i> | |
| <div> | |
| <p class="font-bold">Toimipiste</p> | |
| <p>Helsinki, Suomi</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-xl font-bold mb-4">Seuraa meitä</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-blue-200 text-2xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-white hover:text-blue-200 text-2xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-white hover:text-blue-200 text-2xl"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nimi</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Sähköposti</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Puhelin</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Viesti</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| Lähetä viesti | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-broom text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">TuuliaTrade</span> | |
| </div> | |
| <p class="mt-2">Luotettavaa yrityssiivousta jo vuodesta 2011</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-700 mt-6 pt-6 text-center md:text-left"> | |
| <p>© 2023 TuuliaTrade. Kaikki oikeudet pidätetään.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple mobile menu toggle functionality | |
| document.querySelector('button.md\\:hidden').addEventListener('click', function() { | |
| const nav = document.querySelector('div.hidden.md\\:flex'); | |
| nav.classList.toggle('hidden'); | |
| nav.classList.toggle('flex'); | |
| nav.classList.toggle('flex-col'); | |
| nav.classList.toggle('absolute'); | |
| nav.classList.toggle('top-16'); | |
| nav.classList.toggle('left-0'); | |
| nav.classList.toggle('right-0'); | |
| nav.classList.toggle('bg-white'); | |
| nav.classList.toggle('shadow-md'); | |
| nav.classList.toggle('p-4'); | |
| nav.classList.toggle('space-y-4'); | |
| }); | |
| // 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> | |
| <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=TeemuSor/tuuliatrade-refactor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |