|
|
<!DOCTYPE html> |
|
|
<html lang="cs"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Ai-czech.tech | Pokročilé AI Agenty pro Korporace</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> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(30, 58, 138, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.glow-card { |
|
|
box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); |
|
|
} |
|
|
.animated-underline { |
|
|
position: relative; |
|
|
} |
|
|
.animated-underline::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #3b82f6; |
|
|
transform: scaleX(0); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
.animated-underline:hover::after { |
|
|
transform: scaleX(1); |
|
|
} |
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
.floating { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800 bg-gray-50"> |
|
|
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-20 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-10" src="https://via.placeholder.com/150x50?text=Ai-czech.tech" alt="Ai-czech.tech logo"> |
|
|
</div> |
|
|
<div class="hidden md:block ml-10"> |
|
|
<div class="flex space-x-8"> |
|
|
<a href="#revoluce" class="animated-underline text-gray-900 px-1 text-sm font-medium">AI Revoluce</a> |
|
|
<a href="#pepa" class="animated-underline text-gray-900 px-1 text-sm font-medium">Váš Pepa</a> |
|
|
<a href="#rozdil" class="animated-underline text-gray-900 px-1 text-sm font-medium">Náhrada vs Operátor</a> |
|
|
<a href="#reseni" class="animated-underline text-gray-900 px-1 text-sm font-medium">Naše Řešení</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block"> |
|
|
<a href="#kontakt" class="ml-8 inline-flex items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition duration-300"> |
|
|
Kontaktujte Nás |
|
|
</a> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center md:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"> |
|
|
<span class="sr-only">Otevřít menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl"> |
|
|
<span class="block">Váš Virtuální</span> |
|
|
<span class="block text-blue-200">Specialista na Míru</span> |
|
|
</h1> |
|
|
<p class="mt-6 max-w-md mx-auto text-lg text-blue-100 sm:text-xl md:mt-8 md:max-w-3xl"> |
|
|
Nejen chatboti. Skuteční digitální kolegové, kteří rozumí vašemu byznysu a pracují vedle vašich zaměstnanců. |
|
|
</p> |
|
|
<div class="mt-10 flex justify-center"> |
|
|
<div class="rounded-md shadow"> |
|
|
<a href="#pepa" class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10 transition duration-300"> |
|
|
Poznejte Pepu |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5"> |
|
|
<div class="col-span-1 flex justify-center items-center"> |
|
|
<img class="h-12" src="https://via.placeholder.com/150x60?text=GDPR" alt="GDPR Compliant"> |
|
|
</div> |
|
|
<div class="col-span-1 flex justify-center items-center"> |
|
|
<img class="h-12" src="https://via.placeholder.com/150x60?text=EU" alt="European Technology"> |
|
|
</div> |
|
|
<div class="col-span-1 flex justify-center items-center"> |
|
|
<img class="h-12" src="https://via.placeholder.com/150x60?text=ISO27001" alt="ISO Certified"> |
|
|
</div> |
|
|
<div class="col-span-1 flex justify-center items-center"> |
|
|
<img class="h-12" src="https://via.placeholder.com/150x60?text=Secure" alt="Data Secure"> |
|
|
</div> |
|
|
<div class="col-span-2 flex justify-center items-center md:col-span-1"> |
|
|
<img class="h-12" src="https://via.placeholder.com/150x60?text=CZ+Tech" alt="Czech Technology"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="revoluce" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Budoucnost práce</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Revoluce v Korporátních Procesech |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto"> |
|
|
Přestaňte automatizovat úkoly. Začněte vytvářet digitální kolegy. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16"> |
|
|
<div class="grid gap-16 lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16"> |
|
|
<div class="relative"> |
|
|
<div class="absolute top-0 left-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-user-tie text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-20"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Expertní Znalosti</h3> |
|
|
<p class="mt-3 text-base text-gray-600"> |
|
|
Naši agenti nejsou jen skripty. Mají hluboké znalosti vašeho oboru, regulací a firemních procesů. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute top-0 left-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-handshake text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-20"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Kolega, ne Nástroj</h3> |
|
|
<p class="mt-3 text-base text-gray-600"> |
|
|
Pracují vedle vašich lidí, rozumí kontextu a přispívají k týmové dynamice. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<div class="absolute top-0 left-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-brain text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-20"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Kontinuální Učení</h3> |
|
|
<p class="mt-3 text-base text-gray-600"> |
|
|
Každá interakce zlepšuje jejich výkon. Rostou s vaší firmou. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="pepa" class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
<span class="block">Představujeme</span> |
|
|
<span class="block text-blue-600">Pepu - Vašeho Digitálního Kolegu</span> |
|
|
</h2> |
|
|
<p class="mt-6 text-lg text-gray-600"> |
|
|
Pepa není chatbot. Pepa je plnohodnotný člen týmu, který zná vaše procesy, terminologii a firemní kulturu. |
|
|
</p> |
|
|
<div class="mt-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-full p-2"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700"> |
|
|
<span class="font-medium">Naučte ho za 5 minut</span> - Stačí popsat, co má dělat, ne jak to má dělat |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-full p-2"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700"> |
|
|
<span class="font-medium">Pracuje na vaší infrastruktuře</span> - Žádná citlivá data v cloudu |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-4 flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-full p-2"> |
|
|
<i class="fas fa-check text-blue-600"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700"> |
|
|
<span class="font-medium">Mluví vaším jazykem</span> - Doslova i obrazně |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-xl glow-card floating"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-12 w-12 rounded-full bg-blue-500 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Pepa - Váš Digitální Asistent</h3> |
|
|
<p class="text-sm text-gray-500">Připraven k nasazení</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 space-y-4"> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-user text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-gray-900">Jan Novák</p> |
|
|
<p class="text-sm text-gray-500">Jak mi můžeš pomoct s fakturacemi?</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-gray-900">Pepa</p> |
|
|
<p class="text-sm text-gray-500">Podle firemní politiky mohu: |
|
|
<br>1. Vygenerovat fakturu z objednávky |
|
|
<br>2. Zkontrolovat splatnosti |
|
|
<br>3. Připravit report pro účetní |
|
|
<br>Co bys potřeboval?</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-6 -right-6 bg-yellow-400 text-gray-900 px-4 py-2 rounded-lg shadow-lg"> |
|
|
<p class="text-sm font-medium">"Jako bych měl kolegu na faktury!"</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="rozdil" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Revoluční Přístup: <span class="text-blue-600">Operátor, ne Náhrada</span> |
|
|
</h2> |
|
|
<p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto"> |
|
|
Tradiční AI nahrazuje lidi. Naše AI dělá lidi lepšími. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16"> |
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
<div class="bg-gray-50 p-8 rounded-xl border border-gray-200"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-red-100 rounded-md p-3"> |
|
|
<i class="fas fa-times text-red-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Náhrada</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Tradiční přístup k AI</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-red-500"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">Zaměstnanec se musí naučit pracovat s AI nástrojem</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-red-500"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">AI dělá úkoly místo člověka</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-red-500"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">Omezené na předdefinované scénáře</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-red-500"> |
|
|
<i class="fas fa-arrow-down"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">Nízká adaptabilita na změny</p> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 p-8 rounded-xl border border-blue-200 glow-card"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-100 rounded-md p-3"> |
|
|
<i class="fas fa-check text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Operátor</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Náš přístup k AI</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-green-500"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">AI se učí od zaměstnance a pracuje s ním</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-green-500"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">AI poskytuje expertízu tam, kde ji zaměstnanec potřebuje</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-green-500"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">Přizpůsobí se jakékoli situaci v rámci své role</p> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<div class="flex-shrink-0 text-green-500"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</div> |
|
|
<p class="ml-3 text-base text-gray-700">Neustále se učí a zlepšuje</p> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 bg-white p-8 rounded-xl shadow-lg border border-gray-200 max-w-3xl mx-auto"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-xl font-medium text-gray-900">"Nemusím se učit faktury, mám na to Pepu."</h3> |
|
|
<p class="mt-4 text-gray-600"> |
|
|
Zaměstnanec nepotřebuje znát všechny detaily procesu. Stačí, že ví, že na to má Pepu - svého digitálního specialistu, který mu pomůže kdykoli to potřebuje. |
|
|
</p> |
|
|
<div class="mt-6 flex justify-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0"> |
|
|
<img class="h-12 w-12 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-sm font-medium text-gray-900">Petra Nová</p> |
|
|
<p class="text-sm text-gray-500">Obchodní ředitel, TechCorp</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="reseni" class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Naše <span class="text-blue-600">Řešení</span> |
|
|
</h2> |
|
|
<p class="mt-6 max-w-2xl text-xl text-gray-600 mx-auto"> |
|
|
Vytváříme specializované agenty pro všechny oblasti vašeho byznysu |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 grid gap-8 lg:grid-cols-3"> |
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-200 transition duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-md p-3"> |
|
|
<i class="fas fa-headset text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Zákaznický Servis</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Kolega pro vaše klienty</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<p class="text-base text-gray-700"> |
|
|
Nejen odpovídá na dotazy, ale skutečně rozumí produktům a dokáže řešit komplexní požadavky. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800"> |
|
|
<i class="fas fa-check-circle mr-2"></i> 24/7 dostupnost |
|
|
</span> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 ml-2"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Znalost produktů |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-200 transition duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-100 rounded-md p-3"> |
|
|
<i class="fas fa-file-invoice-dollar text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Finance & Účetnictví</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Váš Pepa na čísla</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<p class="text-base text-gray-700"> |
|
|
Rozumí fakturaci, reportům a daňovým předpisům. Přesně ví, co a kdy je potřeba udělat. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Kontrola chyb |
|
|
</span> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 ml-2"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Legislativa |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md border border-gray-200 transition duration-300"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-100 rounded-md p-3"> |
|
|
<i class="fas fa-users-cog text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-lg font-medium text-gray-900">HR & Personalistika</h3> |
|
|
<p class="mt-1 text-sm text-gray-500">Digitální HR specialista</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6"> |
|
|
<p class="text-base text-gray-700"> |
|
|
Zná všechny procesy od náboru po offboarding. Pomáhá zaměstnancům i HR týmu. |
|
|
</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Onboarding |
|
|
</span> |
|
|
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800 ml-2"> |
|
|
<i class="fas fa-check-circle mr-2"></i> Benefit systém |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<a href="#kontakt" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition duration-300"> |
|
|
Chci vlastního Pepu |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center"> |
|
|
<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Implementace</h2> |
|
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> |
|
|
Jak to Funguje |
|
|
</p> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-600 lg:mx-auto"> |
|
|
Jednoduchý proces pro komplexní výsledky |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16"> |
|
|
<div class="lg:grid lg:grid-cols-3 lg:gap-8"> |
|
|
<div class="relative"> |
|
|
<div class="absolute top-0 left-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<span class="text-blue-600 font-bold text-xl">1</span> |
|
|
</div> |
|
|
<div class="ml-20"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Konzultace</h3> |
|
|
<p class="mt-3 text-base text-gray-600"> |
|
|
Společně identifikujeme procesy a role, kde váš Pepa přinese největší hodnotu. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 lg:mt-0 relative"> |
|
|
<div class="absolute top-0 left-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<span class="text-blue-600 font-bold text-xl">2</span> |
|
|
</div> |
|
|
<div class="ml-20"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Školení Pepy</h3> |
|
|
<p class="mt-3 text-base text-gray-600"> |
|
|
Naši experti naučí Pepu vše potřebné - procesy, terminologii, firemní kulturu. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 lg:mt-0 relative"> |
|
|
<div class="absolute top-0 left-0 h-16 w-16 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<span class="text-blue-600 font-bold text-xl">3</span> |
|
|
</div> |
|
|
<div class="ml-20"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Nasazení</h3> |
|
|
<p class="mt-3 text-base text-gray-600"> |
|
|
Pepa začne pracovat s vaším týmem a neustále se učí z každé interakce. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="gradient-bg"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
<span class="block">Připraveni na digitální kolegu?</span> |
|
|
<span class="block text-blue-200">Začněte během 14 dní.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#kontakt" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-blue-50 transition duration-300"> |
|
|
Kontaktujte Nás |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="kontakt" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-16"> |
|
|
<div class="mb-12 lg:mb-0"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Kontaktujte Náš Tým |
|
|
</h2> |
|
|
<p class="mt-6 text-lg text-gray-600"> |
|
|
Máte otázky nebo chcete začít s implementací? Napište nám a my se vám ozveme do 24 hodin. |
|
|
</p> |
|
|
<div class="mt-8"> |
|
|
<div class="flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-full p-3"> |
|
|
<i class="fas fa-map-marker-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-base font-medium text-gray-900">Sídlo společnosti</p> |
|
|
<p class="mt-1 text-base text-gray-600">Václavské náměstí 1, Praha 1, Česká republika</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-full p-3"> |
|
|
<i class="fas fa-phone-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-base font-medium text-gray-900">Telefon</p> |
|
|
<p class="mt-1 text-base text-gray-600">+420 123 456 789</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-start"> |
|
|
<div class="flex-shrink-0 bg-blue-100 rounded-full p-3"> |
|
|
<i class="fas fa-envelope text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<p class="text-base font-medium text-gray-900">Email</p> |
|
|
<p class="mt-1 text-base text-gray-600">[email protected]</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-8 rounded-xl shadow-md"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="jmeno" class="block text-sm font-medium text-gray-700">Vaše jméno</label> |
|
|
<div class="mt-1"> |
|
|
<input type="text" id="jmeno" name="jmeno" class="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Váš email</label> |
|
|
<div class="mt-1"> |
|
|
<input type="email" id="email" name="email" class="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="firma" class="block text-sm font-medium text-gray-700">Název firmy</label> |
|
|
<div class="mt-1"> |
|
|
<input type="text" id="firma" name="firma" class="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="zprava" class="block text-sm font-medium text-gray-700">Vaše zpráva</label> |
|
|
<div class="mt-1"> |
|
|
<textarea id="zprava" name="zprava" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-blue-500 focus:border-blue-500 border-gray-300 rounded-md"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300"> |
|
|
Odeslat poptávku |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 gap-8 md:grid-cols-4"> |
|
|
<div class="col-span-2"> |
|
|
<img class="h-8" src="https://via.placeholder.com/150x50?text=Ai-czech.tech" alt="Ai-czech.tech"> |
|
|
<p class="mt-4 text-sm text-gray-300"> |
|
|
Evropská hi-tech společnost specializující se na pokročilé AI agenty pro korporátní prostředí. |
|
|
</p> |
|
|
<div class="mt-4 flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300"> |
|
|
<i class="fab fa-github"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Řešení</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">Zákaznický Servis</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">Finance & Účetnictví</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">HR & Personalistika</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">Vlastní Řešení</a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Společnost</h3> |
|
|
<div class="mt-4 space-y-4"> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">O Nás</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">Kariéra</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">Blog</a> |
|
|
<a href="#" class="text-base text-gray-400 hover:text-white block">Kontakt</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-12 border-t border-gray-700 pt-8 flex flex-col items-center"> |
|
|
<p class="text-base text-gray-400 text-center"> |
|
|
© 2023 Ai-czech.tech. Všechna práva vyhrazena. |
|
|
</p> |
|
|
<div class="mt-4 flex space-x-6"> |
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">Ochrana osobních údajů</a> |
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">Podmínky použití</a> |
|
|
<a href="#" class="text-sm text-gray-400 hover:text-white">Cookies</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('form').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
alert('Děkujeme za vaši poptávku! Náš tým vás bude kontaktovat do 24 hodin.'); |
|
|
this.reset(); |
|
|
}); |
|
|
|
|
|
|
|
|
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=KairosEtp/ai-czech" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
