File size: 7,120 Bytes
d5fdf28 | 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 | <!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QA Expert | Odborné služby kontroly kvality v ČR</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-gradient {
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
}
.service-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);
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: scale(1.02);
}
.nav-link {
position: relative;
}
.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #3b82f6;
transition: width 0.3s ease;
}
.nav-link:hover:after {
width: 100%;
}
</style>
</head>
<body class="font-sans text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-3">
QA
</div>
<h1 class="text-xl font-bold text-blue-800">QA<span class="text-blue-500">Expert</span></h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Domů</a>
<a href="#services" class="nav-link text-gray-700 hover:text-blue-600">Služby</a>
<a href="#about" class="nav-link text-gray-700 hover:text-blue-600">O nás</a>
<a href="#clients" class="nav-link text-gray-700 hover:text-blue-600">Klienti</a>
<a href="#contact" class="nav-link text-gray-700 hover:text-blue-600">Kontakt</a>
</nav>
<div class="flex items-center space-x-4">
<div class="hidden md:flex items-center space-x-2 text-blue-600">
<i class="fas fa-phone"></i>
<span>+420 123 456 789</span>
</div>
<button class="md:hidden text-gray-700" id="mobile-menu-button">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile menu -->
<div class="md:hidden hidden bg-white py-4 px-4 shadow-md" id="mobile-menu">
<div class="flex flex-col space-y-4">
<a href="#home" class="text-gray-700 hover:text-blue-600">Domů</a>
<a href="#services" class="text-gray-700 hover:text-blue-600">Služby</a>
<a href="#about" class="text-gray-700 hover:text-blue-600">O nás</a>
<a href="#clients" class="text-gray-700 hover:text-blue-600">Klienti</a>
<a href="#contact" class="text-gray-700 hover:text-blue-600">Kontakt</a>
<div class="flex items-center space-x-2 text-blue-600 pt-2">
<i class="fas fa-phone"></i>
<span>+420 123 456 789</span>
</div>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="hero-gradient text-white py-20 md:py-32">
<div class="container mx-auto px-4 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 mb-6">Profesionální kontrola kvality v České republice</h1>
<p class="text-xl mb-8 opacity-90">Zajišťujeme komplexní služby kontroly kvality pro výrobní podniky, logistická centra a dodavatelské řetězce.</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#contact" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Kontaktujte nás</a>
<a href="#services" class="border-2 border-white hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg font-semibold text-center transition duration-300">Naše služby</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Quality control" class="rounded-lg shadow-2xl max-w-full h-auto">
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-gray-50 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">15+</div>
<div class="text-gray-600">Let zkušeností</div>
</div>
<div class="p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">500+</div>
<div class="text-gray-600">Spokojených klientů</div>
</div>
<div class="p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">98%</div>
<div class="text-gray-600">Úspěšnost kontrol</div>
</div>
<div class="p-4">
<div class="text-4xl font-bold text-blue-600 mb-2">24/7</div>
<div class="text-gray-600">Dostupnost služeb</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class
<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=Alsakr78/https-cdn-tailwindcss-com-script" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |