|
|
<!DOCTYPE html> |
|
|
<html lang="cs"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>tommei.cz</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> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
|
|
} |
|
|
|
|
|
.section-divider { |
|
|
height: 100px; |
|
|
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); |
|
|
} |
|
|
|
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.animate-float { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-white text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 py-3"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://www.tommei.cz/wp-content/uploads/2023/08/Datovy-zdroj-14@10x.png" alt="Tommei Logo" class="h-12 hovered-element"> |
|
|
</div> |
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#" class="text-gray-800 hover:text-blue-600 font-medium">Domů</a> |
|
|
<a href="#" class="text-gray-800 hover:text-blue-600 font-medium">Služby</a> |
|
|
<a href="#" class="text-gray-800 hover:text-blue-600 font-medium">O nás</a> |
|
|
<a href="#" class="text-gray-800 hover:text-blue-600 font-medium">Kontakt</a> |
|
|
</div> |
|
|
<button class="md:hidden focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl text-gray-800"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="gradient-bg py-20"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 leading-tight mb-6"> |
|
|
Profesionální marketingové řešení |
|
|
</h1> |
|
|
<p class="text-lg text-gray-600 mb-8"> |
|
|
Pomáháme vašemu byznysu růst pomocí efektivních marketingových strategií. |
|
|
</p> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300"> |
|
|
Kontaktujte nás |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://www.tommei.cz/wp-content/uploads/elementor/thumbs/Datovy-zdroj-9@10x-qawx3q0cfsmgpwox9skxj6b2e6nw0o0v6gf5waphq8.png" |
|
|
alt="Marketing Illustration" |
|
|
class="w-full max-w-md animate-float"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Naše výhody</h2> |
|
|
<div class="w-20 h-1 bg-blue-600 mx-auto"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg feature-card transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-eye text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800">Budete vidět</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg feature-card transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-ad text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800">Reklama co prodává</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg feature-card transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-file-invoice-dollar text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800">Žádné překvapení na faktuře</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg feature-card transition duration-300"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="bg-blue-100 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-clipboard-list text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-gray-800">Jasný plán na míru</h3> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
Ďábel je v detailu a každý business je specifický. Proto každá naše spolupráce bude dávat smysl. Cíle a měřitelnost je základ úspěchu. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div class="flex items-center justify-center"> |
|
|
<img src="https://www.tommei.cz/wp-content/uploads/elementor/thumbs/Datovy-zdroj-10@10x-qawx9ynrt75tnqfbj6310yv894dcqk7cxaouzjhwxs.png" |
|
|
alt="Marketing Illustration" |
|
|
class="rounded-xl shadow-lg w-full max-w-md"> |
|
|
</div> |
|
|
<div class="flex items-center justify-center"> |
|
|
<img src="https://www.tommei.cz/wp-content/uploads/elementor/thumbs/Datovy-zdroj-11@10x-qawxflowtevxghfowfg6jodsoi3way6qh993973d34.png" |
|
|
alt="Marketing Illustration" |
|
|
class="rounded-xl shadow-lg w-full max-w-md"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-blue-600 text-white"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<img src="https://www.tommei.cz/wp-content/uploads/elementor/thumbs/Datovy-zdroj-13@10x-qawxhxcjpo2g5s26bxlz7l9tjsnkc0eugrbaytnbpc.png" |
|
|
alt="Marketing Illustration" |
|
|
class="w-32 mx-auto mb-8"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Začněte s námi spolupracovat ještě dnes</h2> |
|
|
<p class="text-xl mb-8">Nabízíme řešení šitá na míru vašim potřebám.</p> |
|
|
<button class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-full transition duration-300"> |
|
|
Domluvte si konzultaci |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<img src="https://www.tommei.cz/wp-content/uploads/2023/08/Datovy-zdroj-14@10x.png" alt="Tommei Logo" class="h-12 mb-4 hovered-element"> |
|
|
<p class="text-gray-400">Profesionální marketingové řešení pro váš business.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Navigace</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Domů</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Služby</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">O nás</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Kontakt</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Kontakt</h3> |
|
|
<ul class="space-y-2 text-gray-400"> |
|
|
<li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Adresa 123, Praha</li> |
|
|
<li class="flex items-center"><i class="fas fa-phone mr-2"></i> +420 123 456 789</li> |
|
|
<li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@tommei.cz</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-lg font-bold mb-4">Sledujte nás</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-gray-800 hover:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center transition"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-10 pt-6 text-center text-gray-400"> |
|
|
<p>© 2023 tommei.cz. Všechna práva vyhrazena.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
// Simple mobile menu toggle functionality |
|
|
document.querySelector('button.md\\:hidden').addEventListener('click', function() { |
|
|
const menu = document.createElement('div'); |
|
|
menu.className = 'fixed inset-0 bg-white z-50 flex flex-col items-center justify-center space-y-8'; |
|
|
menu.innerHTML = ` |
|
|
<button class="absolute top-6 right-6 text-2xl"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
<a href="#" class="text-2xl font-medium hover:text-blue-600">Domů</a> |
|
|
<a href="#" class="text-2xl font-medium hover:text-blue-600">Služby</a> |
|
|
<a href="#" class="text-2xl font-medium hover:text-blue-600">O nás</a> |
|
|
<a href="#" class="text-2xl font-medium hover:text-blue-600">Kontakt</a> |
|
|
`; |
|
|
|
|
|
document.body.appendChild(menu); |
|
|
|
|
|
menu.querySelector('button').addEventListener('click', function() { |
|
|
document.body.removeChild(menu); |
|
|
}); |
|
|
}); |
|
|
</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=tommei/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
