mirror of
https://github.com/Dvorinka/sportcreative.git
synced 2026-06-04 03:42:55 +00:00
Your Name
972 lines
41 KiB
HTML
972 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SportCreative | Digitální Marketing pro Sportovní Kluby | Uherské Hradiště</title>
|
|
<meta name="robots" content="index, follow, max-image-preview:large">
|
|
<meta name="geo.region" content="CZ-ZL" />
|
|
<meta name="geo.placename" content="Uherské Hradiště" />
|
|
<meta name="geo.position" content="49.0695;17.4597" />
|
|
<meta name="ICBM" content="49.0695, 17.4597" />
|
|
<link rel="canonical" href="https://sportcreative.cz/" />
|
|
<link rel="alternate" hreflang="cs" href="https://sportcreative.cz/" />
|
|
<link rel="alternate" hreflang="x-default" href="https://sportcreative.cz/" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/esm/ionicons.min.js"></script>
|
|
<!-- Custom JS will be included here -->
|
|
<script src="script.js" defer></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="icon" href="logo.ico" type="image/x-icon">
|
|
<meta name="description" content="SportCreative - Profesionální digitální marketing pro sportovní kluby v Uherském Hradišti a Zlínském kraji. Specializujeme se na správu sociálních sítí, tvorbu videí, webdesign a online propagaci sportovních týmů.">
|
|
<meta name="keywords" content="digitální marketing Uherské Hradiště, správa sociálních sítí, sportovní marketing, tvorba videí pro sport, webdesign pro sportovní kluby, online propagace sportu, Zlínský kraj, fotbalový marketing, sportovní fotografie, grafický design">
|
|
<meta name="author" content="SportCreative">
|
|
|
|
<script
|
|
src="https://rybbit.tdvorak.dev/api/script.js"
|
|
data-site-id="893de12949b8"
|
|
defer
|
|
></script>
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://sportcreative.cz/">
|
|
<meta property="og:title" content="SportCreative | Profesionální digitální marketing pro sportovní kluby">
|
|
<meta property="og:description" content="Zvyšte viditelnost vašeho sportovního klubu. Specializujeme se na správu sociálních sítí, tvorbu videí a webdesign pro sportovní týmy.">
|
|
<meta property="og:image" content="https://sportcreative.cz/page-prev.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:locale" content="cs_CZ">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:url" content="https://sportcreative.cz/">
|
|
<meta property="twitter:title" content="SportCreative | Profesionální digitální marketing pro sportovní kluby">
|
|
<meta property="twitter:description" content="Zvyšte viditelnost vašeho sportovního klubu. Specializujeme se na správu sociálních sítí, tvorbu videí a webdesign pro sportovní týmy.">
|
|
<meta property="twitter:image" content="https://sportcreative.cz/page-prev.png">
|
|
|
|
<!-- Structured Data -->
|
|
<script type="application/ld+json">
|
|
[{
|
|
"@context": "https://schema.org",
|
|
"@type": "ProfessionalService",
|
|
"@id": "https://sportcreative.cz/#business",
|
|
"name": "SportCreative",
|
|
"image": [
|
|
"https://sportcreative.cz/logo.png",
|
|
"https://sportcreative.cz/page-prev.png"
|
|
],
|
|
"url": "https://sportcreative.cz/",
|
|
"telephone": "+420775247633",
|
|
"priceRange": "Kč",
|
|
"hasOfferCatalog": {
|
|
"@type": "OfferCatalog",
|
|
"name": "Služby",
|
|
"itemListElement": [
|
|
{
|
|
"@type": "Offer",
|
|
"itemOffered": {
|
|
"@type": "Service",
|
|
"name": "Správa sociálních sítí"
|
|
}
|
|
},
|
|
{
|
|
"@type": "Offer",
|
|
"itemOffered": {
|
|
"@type": "Service",
|
|
"name": "Tvorba videí"
|
|
}
|
|
},
|
|
{
|
|
"@type": "Offer",
|
|
"itemOffered": {
|
|
"@type": "Service",
|
|
"name": "Webdesign"
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"address": {
|
|
"@type": "PostalAddress",
|
|
"streetAddress": "Náměstí 1",
|
|
"addressLocality": "Uherské Hradiště",
|
|
"postalCode": "686 01",
|
|
"addressRegion": "Zlínský kraj",
|
|
"addressCountry": "CZ"
|
|
},
|
|
"geo": {
|
|
"@type": "GeoCoordinates",
|
|
"latitude": 49.0695,
|
|
"longitude": 17.4597
|
|
},
|
|
"openingHoursSpecification": [{
|
|
"@type": "OpeningHoursSpecification",
|
|
"dayOfWeek": [
|
|
"Monday",
|
|
"Tuesday",
|
|
"Wednesday",
|
|
"Thursday",
|
|
"Friday"
|
|
],
|
|
"opens": "09:00",
|
|
"closes": "17:00"
|
|
}],
|
|
"sameAs": [
|
|
"https://www.facebook.com/vasstranka",
|
|
"https://www.instagram.com/vasucet",
|
|
"https://www.linkedin.com/company/vasfirma"
|
|
],
|
|
"areaServed": [{
|
|
"@type": "State",
|
|
"name": "Zlínský kraj",
|
|
"containsPlace": [{
|
|
"@type": "City",
|
|
"name": "Uherské Hradiště"
|
|
}]
|
|
}]
|
|
},
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "BreadcrumbList",
|
|
"itemListElement": [{
|
|
"@type": "ListItem",
|
|
"position": 1,
|
|
"name": "Úvod",
|
|
"item": "https://sportcreative.cz/"
|
|
}]
|
|
},
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"mainEntity": [{
|
|
"@type": "Question",
|
|
"name": "Proč zvolit SportCreative pro správu sociálních sítí?",
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": "Specializujeme se na sportovní kluby v Uherském Hradišti a Zlínském kraji, rozumíme potřebám místních týmů a umíme zvýšit vaši online přítomnost."
|
|
}
|
|
}, {
|
|
"@type": "Question",
|
|
"name": "Jak dlouho trvá vytvoření webových stránek?",
|
|
"acceptedAnswer": {
|
|
"@type": "Answer",
|
|
"text": "Doba realizace webových stránek se pohybuje obvykle 2-4 týdny v závislosti na rozsahu a požadavcích."
|
|
}
|
|
}]
|
|
}]
|
|
</script>
|
|
|
|
<!-- Preload critical resources -->
|
|
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
|
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>
|
|
<!-- Preconnect to required origins -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
|
|
|
<!-- Load Montserrat with font-display: swap -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
|
|
<noscript><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet"></noscript>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'sport-purple': '#6c38d9',
|
|
'sport-orange': '#ff9933',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!-- Add to your Tailwind config -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'sport-purple': {
|
|
DEFAULT: '#6c38d9',
|
|
light: '#8a5ad1',
|
|
dark: '#5a2cbf'
|
|
},
|
|
'sport-orange': {
|
|
DEFAULT: '#ff9933',
|
|
light: '#ffb366',
|
|
dark: '#e6892d'
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
},
|
|
animation: {
|
|
'float': 'float 6s ease-in-out infinite',
|
|
'glow': 'glow 2s ease-in-out infinite alternate',
|
|
},
|
|
keyframes: {
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-10px)' }
|
|
},
|
|
glow: {
|
|
'from': { boxShadow: '0 0 5px rgba(255, 153, 51, 0.5)' },
|
|
'to': { boxShadow: '0 0 15px rgba(255, 153, 51, 0.9)' }
|
|
}
|
|
},
|
|
borderRadius: {
|
|
'4xl': '2rem',
|
|
},
|
|
spacing: {
|
|
'72': '18rem',
|
|
'84': '21rem',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* Custom utility classes */
|
|
.custom-gradient {
|
|
background: linear-gradient(135deg, #6c38d9 0%, #ff9933 100%);
|
|
}
|
|
|
|
.neon-border {
|
|
box-shadow: 0 0 5px rgba(108, 56, 217, 0.3),
|
|
0 0 15px rgba(255, 153, 51, 0.2);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.service-icon {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
.service-icon:hover {
|
|
transform: scale(1.1) rotate(5deg);
|
|
}
|
|
|
|
/* FAQ Section Styles */
|
|
.faq-section .bg-gray-50 > button {
|
|
transition: all 0.2s ease-in-out;
|
|
position: relative;
|
|
overflow: hidden;
|
|
-webkit-tap-highlight-color: transparent;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button::before,
|
|
.faq-section .bg-gray-50 > button::after {
|
|
content: none !important;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button:hover {
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Colored borders for FAQ items */
|
|
.faq-section h3:has(ion-icon.text-sport-purple) + .space-y-4 .bg-gray-50 {
|
|
border: 2px solid #6c38d9 !important;
|
|
}
|
|
|
|
.faq-section h3:has(ion-icon.text-sport-orange) + .space-y-4 .bg-gray-50 {
|
|
border: 2px solid #ff9933 !important;
|
|
}
|
|
|
|
/* Hover effects */
|
|
.faq-section .bg-gray-50:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Purple section hover */
|
|
.faq-section h3:has(ion-icon.text-sport-purple) + .space-y-4 .bg-gray-50 > button:hover {
|
|
background-color: #6c38d9;
|
|
}
|
|
|
|
/* Orange section hover */
|
|
.faq-section h3:has(ion-icon.text-sport-orange) + .space-y-4 .bg-gray-50 > button:hover {
|
|
background-color: #ff9933;
|
|
}
|
|
|
|
/* Text color on hover */
|
|
.faq-section .bg-gray-50 > button:hover .text-gray-800,
|
|
.faq-section .bg-gray-50 > button:hover .text-sport-purple,
|
|
.faq-section .bg-gray-50 > button:hover .text-sport-orange {
|
|
color: white !important;
|
|
}
|
|
|
|
/* FAQ Section Background */
|
|
.faq-section {
|
|
background-color: white;
|
|
}
|
|
|
|
/* FAQ Item Styling */
|
|
.faq-section .bg-gray-50 {
|
|
background-color: #f9fafb;
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 0.5rem;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.faq-section .bg-gray-50:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button {
|
|
padding: 1rem 1.5rem;
|
|
width: 100%;
|
|
text-align: left;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button {
|
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > button .text-gray-800 {
|
|
font-weight: 500;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > div {
|
|
padding: 2rem 1.5rem 1.5rem;
|
|
color: #4b5563;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.faq-section .bg-gray-50 > div p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Portfolio item hover and active states */
|
|
.portfolio-item {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0.5rem;
|
|
display: block;
|
|
}
|
|
|
|
.portfolio-item .portfolio-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
padding: 1.5rem;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
|
|
transform: translateY(20px);
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.portfolio-item:hover .portfolio-overlay {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.portfolio-item img {
|
|
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.portfolio-item:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.portfolio-item .portfolio-overlay h3,
|
|
.portfolio-item .portfolio-overlay p,
|
|
.portfolio-item .portfolio-overlay div {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
|
|
}
|
|
|
|
.portfolio-item:hover .portfolio-overlay h3,
|
|
.portfolio-item:hover .portfolio-overlay p,
|
|
.portfolio-item:hover .portfolio-overlay div {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.portfolio-item:hover .portfolio-overlay,
|
|
.portfolio-item:focus .portfolio-overlay,
|
|
.portfolio-item:focus-within .portfolio-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.portfolio-item .portfolio-overlay.opacity-0 {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.portfolio-item .portfolio-overlay.opacity-100 {
|
|
opacity: 1 !important;
|
|
pointer-events: auto; /* Allow interactions with overlay content */
|
|
}
|
|
|
|
/* Scrollbar customization */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #6c38d9;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Portfolio Filter Buttons */
|
|
.portfolio-filter-btn {
|
|
transition: all 0.2s ease-in-out;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.portfolio-filter-btn:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.portfolio-filter-btn.bg-sport-purple {
|
|
background-color: #6c38d9 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.portfolio-filter-btn.bg-sport-orange {
|
|
background-color: #ff9933 !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.portfolio-filter-btn:not(.bg-sport-purple):not(.bg-sport-orange):hover {
|
|
background-color: #f3f4f6 !important;
|
|
}
|
|
|
|
/* Glassmorphism effect */
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Neon glow effect */
|
|
.neon-glow {
|
|
text-shadow: 0 0 5px rgba(255, 153, 51, 0.7),
|
|
0 0 10px rgba(255, 153, 51, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased">
|
|
<!-- Header Section -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center py-4">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<a href="index.html" class="logo">
|
|
<img src="header-logo.png" alt="SportCreative" class="logo">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="index.html" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Domů</a>
|
|
<a href="sluzby.html" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Služby</a>
|
|
<a href="portfolio.html" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Portfolio</a>
|
|
<a href="o-nas.html" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">O nás</a>
|
|
<a href="kontakt.html" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Kontakt</a>
|
|
</nav>
|
|
|
|
<!-- CTA Button -->
|
|
<div class="hidden md:block">
|
|
<a href="kontakt.html" class="bg-sport-purple text-white px-6 py-2 rounded-full font-medium hover:shadow-lg transition duration-300">
|
|
Nezávazná konzultace
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Button -->
|
|
<div class="md:hidden">
|
|
<button type="button" class="mobile-menu-button text-gray-700 hover:text-sport-purple focus:outline-none p-2" aria-label="Menu" aria-expanded="false">
|
|
<ion-icon name="menu-outline" class="h-8 w-8 transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation -->
|
|
<div class="mobile-menu w-full absolute top-full left-0 bg-white shadow-lg">
|
|
<nav class="px-2 pt-2 pb-4 space-y-1">
|
|
<a href="index.html" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Domů</a>
|
|
<a href="sluzby.html" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Služby</a>
|
|
<a href="portfolio.html" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Portfolio</a>
|
|
<a href="o-nas.html" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">O nás</a>
|
|
<a href="kontakt.html" class="block px-4 py-3 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-sport-purple rounded-lg transition-colors duration-200">Kontakt</a>
|
|
</nav>
|
|
<div class="px-4 py-3 border-t border-gray-100">
|
|
<a href="kontakt.html" class="block w-full text-center px-6 py-3 border border-transparent rounded-full text-base font-medium text-white bg-sport-purple hover:bg-sport-orange transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
|
|
Nezávazná konzultace
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow">
|
|
<!-- Hero Section -->
|
|
<section class="bg-sport-purple py-20" style="background: #6c38d9;">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Často kladené otázky</h1>
|
|
<p class="text-xl text-white/90 max-w-3xl mx-auto">Zde najdete odpovědi na nejčastější dotazy ohledně našich služeb a spolupráce.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Q&A Section -->
|
|
<section class="faq-section py-16 bg-white">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="mb-12 text-center">
|
|
<h2 class="text-3xl font-bold text-gray-900">Nejčastější dotazy</h2>
|
|
<div class="mt-2 h-1 w-24 bg-sport-orange mx-auto"></div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Category: Obecné dotazy -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
<ion-icon name="help-circle-outline" class="text-sport-purple mr-2"></ion-icon>
|
|
Obecné dotazy
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<!-- Question 1 -->
|
|
<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
|
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none hover:bg-gray-100 transition-colors" onclick="toggleFAQ(this)">
|
|
<span class="text-lg font-medium text-gray-800">Jaké služby nabízíte?</span>
|
|
<ion-icon name="chevron-down-outline" class="text-sport-purple text-xl transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
<div class="px-6 pb-4 pt-4 hidden">
|
|
<p class="text-gray-600">Nabízíme komplexní digitální marketingové služby včetně správy sociálních sítí, správy webových stránek, grafického designu, focení, natáčení a střihu videí, copywritingu a dalších služeb na míru potřebám sportovních týmů a organizací. Kontaktujte nás na čísle +420 775 247 633.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 2 -->
|
|
<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
|
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none hover:bg-gray-100 transition-colors" onclick="toggleFAQ(this)">
|
|
<span class="text-lg font-medium text-gray-800">Pro koho jsou vaše služby určeny?</span>
|
|
<ion-icon name="chevron-down-outline" class="text-sport-purple text-xl transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
<div class="px-6 pb-4 pt-4 hidden">
|
|
<p class="text-gray-600">Naše služby jsou určeny především pro sportovní kluby, týmy, jednotlivé sportovce, sportovní svazy, pořadatele sportovních akcí a další subjekty působící ve sportovním prostředí. Vytváříme řešení na míru jak pro malé amatérské týmy, tak pro velké profesionální organizace.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category: Spolupráce -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
<ion-icon name="people-outline" class="text-sport-orange mr-2"></ion-icon>
|
|
Spolupráce
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<!-- Question 3 -->
|
|
<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
|
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none hover:bg-gray-100 transition-colors" onclick="toggleFAQ(this)">
|
|
<span class="text-lg font-medium text-gray-800">Jak probíhá spolupráce?</span>
|
|
<ion-icon name="chevron-down-outline" class="text-sport-orange text-xl transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
<div class="px-6 pb-4 pt-4 hidden">
|
|
<p class="text-gray-600">Spolupráce začíná nezávaznou konzultací, kde zjistíme vaše potřeby a cíle. Následně připravíme návrh spolupráce na míru. Po schválení se domluvíme na harmonogramu a začneme pracovat na vašem projektu. Průběžně vás informujeme o pokroku a jsme vám plně k dispozici pro jakékoliv dotazy.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 4 -->
|
|
<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
|
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none hover:bg-gray-100 transition-colors" onclick="toggleFAQ(this)">
|
|
<span class="text-lg font-medium text-gray-800">Jak dlouho trvá zpracování zakázky?</span>
|
|
<ion-icon name="chevron-down-outline" class="text-sport-orange text-xl transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
<div class="px-6 pb-4 pt-4 hidden">
|
|
<p class="text-gray-600">Doba zpracování se liší podle typu a rozsahu zakázky. Jednoduché grafické práce mohou být hotové do několika dní, zatímco správa webových stránek nebo rozsáhlé marketingové kampaně mohou trvat několik týdnů. Vždy se snažíme najít optimální termín, který bude vyhovovat oběma stranám. Pro více informací nás kontaktujte na +420 775 247 633.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Category: Ceny a platby -->
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
<ion-icon name="wallet-outline" class="text-sport-purple mr-2"></ion-icon>
|
|
Ceny a platby
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<!-- Question 5 -->
|
|
<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
|
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none hover:bg-gray-100 transition-colors" onclick="toggleFAQ(this)">
|
|
<span class="text-lg font-medium text-gray-800">Jaké jsou vaše ceny?</span>
|
|
<ion-icon name="chevron-down-outline" class="text-sport-purple text-xl transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
<div class="px-6 pb-4 pt-4 hidden">
|
|
<p class="text-gray-600">Ceny našich služeb se odvíjejí od rozsahu a náročnosti zakázky. Každý projekt je jedinečný, a proto vám rádi připravíme individuální cenovou nabídku na základě vašich konkrétních požadavků. Kontaktujte nás pro nezávaznou konzultaci, kde vám rádi představíme naše cenové možnosti.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Question 6 -->
|
|
<div class="bg-gray-50 rounded-lg shadow-sm overflow-hidden border border-gray-200">
|
|
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none hover:bg-gray-100 transition-colors" onclick="toggleFAQ(this)">
|
|
<span class="text-lg font-medium text-gray-800">Jaké jsou platební podmínky?</span>
|
|
<ion-icon name="chevron-down-outline" class="text-sport-purple text-xl transition-transform duration-300"></ion-icon>
|
|
</button>
|
|
<div class="px-6 pb-4 pt-4 hidden">
|
|
<p class="text-gray-600">Standardně vyžadujeme zálohu ve výši 30-50% z celkové ceny projektu před zahájením práce. Zbývající částka je splatná po dokončení a předání práce. U dlouhodobějších projektů lze platbu rozložit do více splátek dle domluvy. Všechny podmínky jsou uvedeny ve smlouvě, kterou s klientem předem projednáme.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact CTA -->
|
|
<div class="mt-16 bg-sport-purple/5 rounded-xl p-8 text-center border border-sport-purple/10">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-4">Máte další otázky?</h3>
|
|
<p class="text-gray-600 mb-6 max-w-2xl mx-auto">Neváhejte nás kontaktovat, rádi vám odpovíme na jakékoliv dotazy ohledně našich služeb a spolupráce.</p>
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
|
<a href="kontakt.html" class="inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-full font-medium text-white bg-sport-purple hover:bg-sport-purple-dark transition duration-300">
|
|
Napište nám
|
|
<ion-icon name="chatbubbles-outline" class="ml-2"></ion-icon>
|
|
</a>
|
|
<a href="tel:+420775247633" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 rounded-full font-medium text-gray-700 bg-white hover:bg-gray-50 transition duration-300">
|
|
Zavolejte nám
|
|
<ion-icon name="call-outline" class="ml-2"></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-900 text-white">
|
|
<!-- Main Footer -->
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- Column 1: Logo & About -->
|
|
<div>
|
|
<div class="text-2xl font-bold mb-4">
|
|
<span class="text-sport-purple">Sport</span><span class="text-sport-orange">Creative</span>
|
|
</div>
|
|
<p class="text-gray-400 mb-4">
|
|
Digitální marketingová agentura specializovaná na sportovní týmy a organizace. Tvoříme obsah, který inspiruje a spojuje fanoušky.
|
|
</p>
|
|
<div class="flex space-x-4">
|
|
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
|
|
<ion-icon name="logo-facebook" class="text-xl"></ion-icon>
|
|
</a> -->
|
|
<a href="https://www.instagram.com/sportcreative_cz/" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
|
<ion-icon name="logo-instagram" class="text-xl"></ion-icon>
|
|
</a>
|
|
<!-- <a href="#" class="text-gray-400 hover:text-white transition duration-150">
|
|
<ion-icon name="logo-twitter" class="text-xl"></ion-icon>
|
|
</a> -->
|
|
<a href="https://www.linkedin.com/company/sportcreative-eu" target="_blank" class="text-gray-400 hover:text-white transition duration-150">
|
|
<ion-icon name="logo-linkedin" class="text-xl"></ion-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Column 2: Services -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-white">Služby</h3>
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<a href="sluzby/video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
|
</li>
|
|
<li>
|
|
<a href="sluzby/sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
|
</li>
|
|
<li>
|
|
<a href="sluzby/tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
|
</li>
|
|
<li>
|
|
<a href="sluzby/fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
|
</li>
|
|
<li>
|
|
<a href="sluzby/web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
|
</li>
|
|
<li>
|
|
<a href="sluzby/design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</a>
|
|
</li>
|
|
<li>
|
|
<a href="sluzby/marketing.html" class="text-gray-400 hover:text-white transition duration-150">Digitální Marketing</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Column 3: Quick Links -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-white">Rychlé odkazy</h3>
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<a href="index.html" class="text-gray-400 hover:text-white transition duration-150">Domů</a>
|
|
</li>
|
|
<li>
|
|
<a href="o-nas.html" class="text-gray-400 hover:text-white transition duration-150">O nás</a>
|
|
</li>
|
|
<li>
|
|
<a href="portfolio.html" class="text-gray-400 hover:text-white transition duration-150">Portfolio</a>
|
|
</li>
|
|
<li>
|
|
<a href="kariéra.html" class="text-gray-400 hover:text-white transition duration-150">Kariéra</a>
|
|
</li>
|
|
<li>
|
|
<a href="kontakt.html" class="text-gray-400 hover:text-white transition duration-150">Kontakt</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Column 4: Contact Info -->
|
|
<div>
|
|
<h3 class="text-lg font-semibold mb-4 text-white">Kontakt</h3>
|
|
<ul class="space-y-3">
|
|
<!-- <li class="flex items-start">
|
|
<ion-icon name="location-outline" class="text-sport-orange text-xl mt-1 mr-2"></ion-icon>
|
|
<span class="text-gray-400">Sportovní 123, 150 00 Praha 5</span>
|
|
</li> -->
|
|
<li class="flex items-start">
|
|
<ion-icon name="call-outline" class="text-sport-orange text-xl mt-1 mr-2"></ion-icon>
|
|
<div>
|
|
<div class="text-gray-400">+420 775 247 633</div>
|
|
<div class="text-gray-400">+420 778 701 838</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<ion-icon name="mail-outline" class="text-sport-orange text-xl mr-2 mt-1"></ion-icon>
|
|
<div>
|
|
<div class="text-gray-400 cursor-pointer hover:text-white transition-colors" onclick="copyEmailAndRedirect('info@sportcreative.eu')">info@sportcreative.eu</div>
|
|
<div class="text-sm text-sport-orange">Odpovídáme do 24 hodin</div>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<ion-icon name="time-outline" class="text-sport-orange text-xl mt-1 mr-2"></ion-icon>
|
|
<span class="text-gray-400">Po-Ne: 8:00 - 20:00</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Copyright -->
|
|
<div class="border-t border-gray-800 py-6">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center">
|
|
<p class="text-gray-400 text-sm mb-4 md:mb-0">
|
|
© <span id="currentYear"></span> SportCreative. Všechna práva vyhrazena.
|
|
</p>
|
|
<div class="flex space-x-4 text-sm text-gray-400">
|
|
<a href="obchodni-podminky.html" class="hover:text-white transition duration-150">Podmínky použití</a>
|
|
<a href="gdpr.html" class="hover:text-white transition duration-150">Ochrana soukromí</a>
|
|
<a href="cookies.html" class="hover:text-white transition duration-150">Cookies</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Back to Top Button -->
|
|
<button class="fixed bottom-6 right-6 bg-sport-orange rounded-full shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-sport-purple hover:scale-110" id="backToTop">
|
|
<ion-icon name="arrow-up-outline"></ion-icon>
|
|
</button>
|
|
|
|
<!-- Ionicons Script - Placed at the end for performance -->
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
|
|
|
|
<!-- Simple JavaScript for Back to Top functionality -->
|
|
<script>
|
|
// Copy email to clipboard and redirect to contact page
|
|
function copyEmailAndRedirect(email) {
|
|
// Copy email to clipboard
|
|
navigator.clipboard.writeText(email).then(function() {
|
|
// Show copied tooltip or feedback if needed
|
|
console.log('Email zkopírován do schránky');
|
|
|
|
// Redirect to contact page
|
|
window.location.href = 'kontakt.html';
|
|
}).catch(function(err) {
|
|
console.error('Nepodařilo se zkopírovat email: ', err);
|
|
// Still redirect even if copy fails
|
|
window.location.href = 'kontakt.html';
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const backToTopButton = document.getElementById('backToTop');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.pageYOffset > 300) {
|
|
backToTopButton.classList.remove('opacity-0', 'invisible');
|
|
backToTopButton.classList.add('opacity-100', 'visible');
|
|
} else {
|
|
backToTopButton.classList.remove('opacity-100', 'visible');
|
|
backToTopButton.classList.add('opacity-0', 'invisible');
|
|
}
|
|
});
|
|
|
|
backToTopButton.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<script src="script.js" defer></script>
|
|
|
|
<style>
|
|
/* Cookie Consent Styles */
|
|
.cookie-consent {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
padding: 16px;
|
|
display: flex;
|
|
justify-content: center;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.cookie-consent.hidden {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.cookie-consent-banner {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
|
|
0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cookie-message {
|
|
flex: 1;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
}
|
|
|
|
.cookie-link {
|
|
color: #6c38d9;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
margin-left: 0.25rem;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.cookie-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.cookie-button {
|
|
border: none;
|
|
border-radius: 9999px;
|
|
padding: 0.6rem 1.75rem;
|
|
font-weight: 600;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
white-space: nowrap;
|
|
min-width: 120px;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, #6c38d9 0%, #8a5ad1 100%);
|
|
color: white;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.cookie-button:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.cookie-consent-banner {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.cookie-button {
|
|
width: 100%;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Cookie Consent HTML -->
|
|
<div id="cookieConsent" class="cookie-consent hidden">
|
|
<div class="cookie-consent-banner">
|
|
<p class="cookie-message">
|
|
Pro zajištění nejlepšího zážitku používáme cookies. Pokračováním souhlasíte s naším
|
|
<a href="cookies.html" class="cookie-link" target="_blank" rel="noopener noreferrer">
|
|
sběrem a používáním dat
|
|
</a>
|
|
</p>
|
|
<button id="cookieConsentButton" class="cookie-button">Rozumím</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cookieConsent = document.getElementById('cookieConsent');
|
|
const consentButton = document.getElementById('cookieConsentButton');
|
|
const consentKey = 'cookieConsentAccepted';
|
|
|
|
// Check if consent was already given
|
|
if (!localStorage.getItem(consentKey)) {
|
|
cookieConsent.classList.remove('hidden');
|
|
}
|
|
|
|
// Handle button click
|
|
consentButton.addEventListener('click', function() {
|
|
localStorage.setItem(consentKey, 'true');
|
|
cookieConsent.classList.add('hidden');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |