mirror of
https://github.com/Dvorinka/sportcreative.git
synced 2026-06-03 19:32:56 +00:00
Small fix
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,845 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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="#" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Domů</a>
|
||||||
|
<a href="#" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Služby</a>
|
||||||
|
<a href="#" class="text-gray-700 hover:text-sport-purple font-medium transition duration-150">Portfolio</a>
|
||||||
|
<a href="#" 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>
|
||||||
|
<!-- Portfolio Section -->
|
||||||
|
<section class="py-16 bg-gradient-to-b from-gray-50 to-white">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="text-center mb-16 max-w-3xl mx-auto">
|
||||||
|
<span class="inline-block text-sport-orange font-semibold mb-3">Naše tvorba</span>
|
||||||
|
<h2 class="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-sport-purple to-sport-purple">Portfolio projektů</h2>
|
||||||
|
<p class="text-gray-600 text-lg">Objevte naše nejlepší práce, které pomáhají sportovním týmům a organizacím vyniknout v digitálním světě.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filter Navigation -->
|
||||||
|
<div class="filter-container flex flex-wrap justify-center gap-3 mb-16 px-4">
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-white bg-sport-purple border-2 border-sport-purple hover:bg-sport-purple/90 hover:border-sport-purple/90 shadow-sm" data-filter="all">
|
||||||
|
<ion-icon name="eye-outline" class="mr-2 text-lg"></ion-icon> Vše
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="design">
|
||||||
|
<ion-icon name="color-palette-outline" class="mr-2 text-lg"></ion-icon> Design
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="fotografie">
|
||||||
|
<ion-icon name="camera-outline" class="mr-2 text-lg"></ion-icon> Fotografie
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="video">
|
||||||
|
<ion-icon name="videocam-outline" class="mr-2 text-lg"></ion-icon> Video
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="marketing">
|
||||||
|
<ion-icon name="megaphone-outline" class="mr-2 text-lg"></ion-icon> Marketing
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="socialni-site">
|
||||||
|
<ion-icon name="share-social-outline" class="mr-2 text-lg"></ion-icon> Sociální sítě
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="reels">
|
||||||
|
<ion-icon name="film-outline" class="mr-2 text-lg"></ion-icon> Reels
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="video-editing">
|
||||||
|
<ion-icon name="cut-outline" class="mr-2 text-lg"></ion-icon> Video Editing
|
||||||
|
</a>
|
||||||
|
<a href="#" class="filter-btn flex items-center px-5 py-2.5 rounded-full font-medium transition-all duration-200 text-gray-700 border-2 border-gray-200 hover:border-sport-purple hover:text-sport-purple shadow-sm" data-filter="web">
|
||||||
|
<ion-icon name="globe-outline" class="mr-2 text-lg"></ion-icon> Web
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.filter-btn {
|
||||||
|
text-decoration: none !important;
|
||||||
|
outline: none !important;
|
||||||
|
border: 2px solid #6c38d9 !important;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
.filter-btn.active {
|
||||||
|
background-color: #6c38d9 !important;
|
||||||
|
color: white !important;
|
||||||
|
border-color: #6c38d9 !important;
|
||||||
|
box-shadow: 0 1px 3px rgba(108, 56, 217, 0.2);
|
||||||
|
}
|
||||||
|
.filter-btn:not(.active) {
|
||||||
|
border-color: #e2e8f0 !important;
|
||||||
|
color: #4a5568 !important;
|
||||||
|
}
|
||||||
|
.filter-btn:not(.active):hover {
|
||||||
|
border-color: #6c38d9 !important;
|
||||||
|
color: #6c38d9 !important;
|
||||||
|
transform: translateY(-1px);
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||||
|
|
||||||
|
filterButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
// Remove active class from all buttons
|
||||||
|
filterButtons.forEach(btn => btn.classList.remove('active'));
|
||||||
|
// Add active class to clicked button
|
||||||
|
this.classList.add('active');
|
||||||
|
// Your existing filter logic here
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Set first button as active by default
|
||||||
|
if (filterButtons.length > 0) {
|
||||||
|
filterButtons[0].classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- Portfolio Grid -->
|
||||||
|
<div class="portfolio-masonry px-4 max-w-7xl mx-auto">
|
||||||
|
<!-- First Row: 2 items - 1:1 and 16:9 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 items-stretch">
|
||||||
|
<!-- 1:1 Image -->
|
||||||
|
<div class="portfolio-item group md:col-span-1 h-full" data-category="design">
|
||||||
|
<div class="portfolio-square relative overflow-hidden rounded-2xl shadow-lg h-full">
|
||||||
|
<img src="assets/portfolio/1x1/bizoni1.png"
|
||||||
|
alt="1:1 Square Image"
|
||||||
|
class="portfolio-image"
|
||||||
|
loading="lazy">
|
||||||
|
<div class="portfolio-overlay">
|
||||||
|
<span class="text-white text-sm font-medium bg-sport-purple px-3 py-1 rounded-full inline-block mb-2">1:1 Image</span>
|
||||||
|
<h3 class="text-xl font-bold text-white mb-2">Square Format</h3>
|
||||||
|
<p class="text-gray-200 text-sm">Perfect for profile pictures and logos</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 16:9 Video -->
|
||||||
|
<div class="portfolio-item group md:col-span-2" data-category="video">
|
||||||
|
<div class="portfolio-landscape relative overflow-hidden rounded-2xl shadow-lg">
|
||||||
|
<video src="assets/portfolio/videos/bizoni_v1.mp4"
|
||||||
|
alt="16:9 Video Thumbnail"
|
||||||
|
class="portfolio-image"
|
||||||
|
controls muted loop autoplay playsinline
|
||||||
|
loading="lazy">
|
||||||
|
<div class="video-badge">
|
||||||
|
<ion-icon name="play" class="text-xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-overlay">
|
||||||
|
<span class="text-white text-sm font-medium bg-sport-orange px-3 py-1 rounded-full inline-block mb-2">16:9 Video</span>
|
||||||
|
<h3 class="text-xl font-bold text-white mb-2">Wide Video Format</h3>
|
||||||
|
<p class="text-gray-200 text-sm">Standard format for most video content</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Second Row: 2 items - 16:9 and 1:1 -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 items-stretch">
|
||||||
|
<!-- 16:9 Image -->
|
||||||
|
<div class="portfolio-item group md:col-span-2 h-full" data-category="fotografie">
|
||||||
|
<div class="portfolio-landscape relative overflow-hidden rounded-2xl shadow-lg">
|
||||||
|
<img src="assets/portfolio/photos/Bizoni/b1.jpg"
|
||||||
|
alt="16:9 Landscape Image"
|
||||||
|
class="portfolio-image"
|
||||||
|
loading="lazy">
|
||||||
|
<div class="portfolio-overlay">
|
||||||
|
<span class="text-white text-sm font-medium bg-blue-500 px-3 py-1 rounded-full inline-block mb-2">16:9 Image</span>
|
||||||
|
<h3 class="text-xl font-bold text-white mb-2">Wide Landscape</h3>
|
||||||
|
<p class="text-gray-200 text-sm">Ideal for landscape photos and banners</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 9:16 Reels -->
|
||||||
|
<div class="portfolio-item group md:col-span-1 h-full" data-category="reels">
|
||||||
|
<div class="portfolio-portrait relative overflow-hidden rounded-2xl shadow-lg">
|
||||||
|
<video src="assets/portfolio/reels/bizoni_s2.mp4"
|
||||||
|
alt="9:16 Reels Video"
|
||||||
|
class="portfolio-image"
|
||||||
|
controls muted loop autoplay playsinline
|
||||||
|
loading="lazy">
|
||||||
|
<div class="video-badge">
|
||||||
|
<ion-icon name="play" class="text-xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-overlay">
|
||||||
|
<span class="text-white text-sm font-medium bg-pink-500 px-3 py-1 rounded-full inline-block mb-2">9:16 Reels</span>
|
||||||
|
<h3 class="text-xl font-bold text-white mb-2">Vertical Video</h3>
|
||||||
|
<p class="text-gray-200 text-sm">Optimized for mobile viewing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Third Row: Full width custom format -->
|
||||||
|
<div class="grid grid-cols-1 gap-6 items-stretch">
|
||||||
|
<!-- Custom Format -->
|
||||||
|
<div class="portfolio-item group" data-category="custom">
|
||||||
|
<div class="relative overflow-hidden rounded-2xl shadow-lg" style="aspect-ratio: 16/5;">
|
||||||
|
<img src="https://placehold.co/1400x440/10b981/ffffff?text=16:5+Banner"
|
||||||
|
alt="16:5 Banner Image"
|
||||||
|
class="portfolio-image"
|
||||||
|
loading="lazy">
|
||||||
|
<div class="portfolio-overlay">
|
||||||
|
<span class="text-white text-sm font-medium bg-green-500 px-3 py-1 rounded-full inline-block mb-2">Custom Format</span>
|
||||||
|
<h3 class="text-2xl md:text-3xl font-bold text-white mb-2">Full Width Banner</h3>
|
||||||
|
<p class="text-gray-200 text-sm md:text-base">Perfect for featured content and promotions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Portfolio Item Presets */
|
||||||
|
.portfolio-item {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image Presets */
|
||||||
|
.portfolio-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transition: transform 0.7s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover and touch states */
|
||||||
|
@media (hover: hover) {
|
||||||
|
.portfolio-item:hover .portfolio-image {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
.portfolio-item:hover .portfolio-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Touch devices */
|
||||||
|
@media (hover: none) {
|
||||||
|
.portfolio-item:active .portfolio-overlay,
|
||||||
|
.portfolio-item:focus .portfolio-overlay,
|
||||||
|
.portfolio-item:focus-within .portfolio-overlay {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Overlay */
|
||||||
|
.portfolio-overlay {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 1rem;
|
||||||
|
background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
-webkit-backdrop-filter: blur(2px);
|
||||||
|
backdrop-filter: blur(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overlay content */
|
||||||
|
.portfolio-overlay span {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-overlay h3 {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-overlay p {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.portfolio-overlay {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-overlay span {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-overlay h3 {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-overlay p {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Types */
|
||||||
|
.portfolio-square {
|
||||||
|
aspect-ratio: 1;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-landscape {
|
||||||
|
aspect-ratio: 16/9;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-portrait {
|
||||||
|
aspect-ratio: 9/16;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-custom {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Video Badge */
|
||||||
|
.video-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
background: rgba(0,0,0,0.7);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom Styles */
|
||||||
|
.portfolio-masonry {
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item {
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transform: translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: linear-gradient(135deg, rgba(108, 56, 217, 0.1) 0%, rgba(255, 153, 51, 0.1) 100%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item:hover::before {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation for filter changes */
|
||||||
|
@keyframes fadeInUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item.animate-in {
|
||||||
|
animation: fadeInUp 0.5s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom scrollbar for filter buttons */
|
||||||
|
.filter-scroll-container {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-scroll-container::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- Portfolio Filtering Script -->
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||||
|
const portfolioItems = document.querySelectorAll('.portfolio-item');
|
||||||
|
|
||||||
|
filterButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', function() {
|
||||||
|
// Remove active class from all buttons
|
||||||
|
filterButtons.forEach(btn => {
|
||||||
|
btn.classList.remove('bg-sport-purple', 'text-white');
|
||||||
|
btn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-200');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add active class to clicked button
|
||||||
|
this.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-200');
|
||||||
|
this.classList.add('bg-sport-purple', 'text-white');
|
||||||
|
|
||||||
|
const filter = this.getAttribute('data-filter');
|
||||||
|
|
||||||
|
portfolioItems.forEach(item => {
|
||||||
|
if (filter === 'all' || item.getAttribute('data-category') === filter) {
|
||||||
|
item.style.display = 'block';
|
||||||
|
setTimeout(() => {
|
||||||
|
item.style.opacity = '1';
|
||||||
|
item.style.transform = 'translateY(0)';
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
item.style.opacity = '0';
|
||||||
|
item.style.transform = 'translateY(20px)';
|
||||||
|
setTimeout(() => {
|
||||||
|
item.style.display = 'none';
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize with 'all' filter active
|
||||||
|
document.querySelector('[data-filter="all"]').classList.add('bg-sport-purple', 'text-white');
|
||||||
|
document.querySelector('[data-filter="all"]').classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-200');
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<!-- 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">
|
||||||
|
© 2025 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>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 941 KiB After Width: | Height: | Size: 228 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 628 KiB After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 MiB After Width: | Height: | Size: 623 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 928 KiB After Width: | Height: | Size: 257 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 872 KiB After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 369 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 606 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 553 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 517 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 741 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1017 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 435 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 760 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 531 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1006 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 865 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 33 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+888
@@ -0,0 +1,888 @@
|
|||||||
|
<!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">
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||||||
|
<div class="bg-white rounded-xl shadow-md p-8 md:p-10">
|
||||||
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center">Zásady používání cookies</h1>
|
||||||
|
|
||||||
|
<div class="prose max-w-none text-gray-700">
|
||||||
|
<p class="mb-6">Datum poslední aktualizace: 20. června 2025</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">Co jsou to cookies?</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Cookies jsou malé textové soubory, které webové stránky ukládají do vašeho zařízení při jejich prohlížení. Tyto soubory pomáhají webu pamatovat si informace o vaší návštěvě, jako je preferovaný jazyk a další nastavení, což může zefektivnit váš další výlet stránkou a zlepšit její použitelnost.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-10 mb-4">Jaké cookies používáme?</h2>
|
||||||
|
<p class="mb-4">Náš web používá pouze nezbytně nutné cookies, které jsou nezbytné pro základní funkce webu:</p>
|
||||||
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||||
|
<li><strong>Relace (Session) cookies</strong> - Uchovávají informace o vašem přihlášení a dalších základních funkcích webu.</li>
|
||||||
|
<li><strong>Bezpečnostní cookies</strong> - Pomáhají zabezpečit formuláře a předcházet neoprávněnému přístupu.</li>
|
||||||
|
<li><strong>Cloudflare cookies</strong> - Slouží k identifikaci důvěryhodného provozu a zabezpečení webu.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-bold text-gray-900 mt-10 mb-4">Jak můžete cookies spravovat?</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Většina prohlížečů automaticky přijímá cookies, ale vy můžete své nastavení upravit. V nastavení vašeho prohlížeče můžete:
|
||||||
|
<ul class="list-disc pl-6 mt-2 space-y-2">
|
||||||
|
<li>Smazat všechna nebo jednotlivá cookies</li>
|
||||||
|
<li>Blokovat ukládání cookies</li>
|
||||||
|
<li>Nastavit upozornění při ukládání nových cookies</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
<p class="mb-6">
|
||||||
|
Pokud zakážete cookies, některé části našeho webu nemusí správně fungovat.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-bold text-gray-900 mt-10 mb-4">Analytika</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Pro analýzu návštěvnosti používáme Google Search Console, který neukládá cookies a nevyžaduje souhlas podle GDPR. Tento nástroj nám pomáhá porozumět, jak návštěvníci s naším webem interagují, aniž by shromažďoval osobně identifikovatelné údaje.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-bold text-gray-900 mt-10 mb-4">Změny v zásadách používání cookies</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Tyto zásady mohou být pravidelně aktualizovány. Doporučujeme vám tuto stránku pravidelně navštěvovat, abyste měli přehled o případných změnách.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-bold text-gray-900 mt-10 mb-4">Kontakt</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Máte-li jakékoli dotazy ohledně našich zásad používání cookies, neváhejte nás kontaktovat na adrese <a href="mailto:company@sportcreative.eu" class="text-sport-purple hover:underline">company@sportcreative.eu</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-500 mt-12 border-t pt-4">
|
||||||
|
Tyto zásady používání cookies jsou platné a účinné od 20. června 2025.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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">
|
||||||
|
© 2025 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>
|
||||||
@@ -0,0 +1,923 @@
|
|||||||
|
<!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">
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- GDPR Content -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||||||
|
<div class="bg-white rounded-xl shadow-md p-8 md:p-10">
|
||||||
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center">Zásady ochrany osobních údajů</h1>
|
||||||
|
|
||||||
|
<div class="prose max-w-none text-gray-700">
|
||||||
|
<p class="mb-6">Datum poslední aktualizace: 20. června 2025</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">1. Správce osobních údajů</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Správcem Vašich osobních údajů je:<br>
|
||||||
|
<strong>SportCreative</strong><br>
|
||||||
|
IČ: [VAŠE IČ]<br>
|
||||||
|
Sídlo: [VAŠE ADRESA]<br>
|
||||||
|
E-mail: info@sportcreative.eu<br>
|
||||||
|
Telefon: +420 775 247 633
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-10 mb-4">2. Jaké osobní údaje zpracováváme</h2>
|
||||||
|
<p class="mb-4">Můžeme zpracovávat tyto kategorie osobních údajů:</p>
|
||||||
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||||
|
<li>Kontaktní údaje (jméno, příjmení, e-mailová adresa, telefonní číslo)</li>
|
||||||
|
<li>Fakturační a platební údaje</li>
|
||||||
|
<li>Technické údaje o připojení (IP adresa, informace o prohlížeči, údaje o používání webu)</li>
|
||||||
|
<li>Obsah komunikace mezi námi</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-10 mb-4">3. Právní základ a účel zpracování</h2>
|
||||||
|
<p class="mb-4">Vaše osobní údaje zpracováváme na základě:</p>
|
||||||
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||||
|
<li>Platné smlouvy mezi námi (poskytování služeb)</li>
|
||||||
|
<li>Oprávněného zájmu (např. zajištění bezpečnosti webu, přímý marketing)</li>
|
||||||
|
<li>Výslovného souhlasu (např. pro marketingové účely)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-10 mb-4">4. Doba uchovávání údajů</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Osobní údaje uchováváme po dobu nezbytnou k naplnění účelu, pro který byly shromážděny, nebo po dobu stanovenou zákonem:
|
||||||
|
<ul class="list-disc pl-6 mt-2 space-y-2">
|
||||||
|
<li>Fakturační údaje: 10 let od vystavení (dle zákona o účetnictví)</li>
|
||||||
|
<li>Kontaktní údaje: po dobu trvání smluvního vztahu + 4 roky po jeho skončení</li>
|
||||||
|
<li>Cookies: dle nastavení prohlížeče, maximálně 2 roky</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-10 mb-4">5. Příjemci osobních údajů</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Vaše údaje mohou být předány:
|
||||||
|
<ul class="list-disc pl-6 mt-2 space-y-2">
|
||||||
|
<li>Zpracovatelům IT služeb (správce webu, hosting, e-mailové služby)</li>
|
||||||
|
<li>Účetním službám</li>
|
||||||
|
<li>Státním orgánům v rozsahu stanoveném právními předpisy</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-10 mb-4">6. Vaše práva</h2>
|
||||||
|
<p class="mb-4">V souladu s GDPR máte tato práva:</p>
|
||||||
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||||
|
<li>Právo na přístup k osobním údajům</li>
|
||||||
|
<li>Právo na opravu nepřesných údajů</li>
|
||||||
|
<li>Právo na výmaz (právo být zapomenut)</li>
|
||||||
|
<li>Právo na omezení zpracování</li>
|
||||||
|
<li>Právo na přenositelnost údajů</li>
|
||||||
|
<li>Právo vznést námitku</li>
|
||||||
|
<li>Právo podat stížnost u Úřadu pro ochranu osobních údajů (www.uoou.cz)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-bold text-gray-900 mt-10 mb-4">7. Cookies a sledování</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Tento web používá soubory cookies pro zajištění základních funkcí webu, analýzu návštěvnosti a personalizaci obsahu.
|
||||||
|
Více informací naleznete v našich <a href="cookies.html" class="text-sport-purple hover:underline">Zásadách používání cookies</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-xl font-bold text-gray-900 mt-10 mb-4">8. Kontaktní údaje</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Máte-li jakékoli dotazy ohledně ochrany osobních údajů, můžete nás kontaktovat na:<br>
|
||||||
|
E-mail: <a href="mailto:company@sportcreative.eu" class="text-sport-purple hover:underline">company@sportcreative.eu</a><br>
|
||||||
|
Telefon: +420 775 247 633<br>
|
||||||
|
Adresa: [VAŠE ADRESA]
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-500 mt-12 border-t pt-4">
|
||||||
|
Tyto zásady ochrany osobních údajů jsou platné a účinné od 20. června 2025. Právo provádět změny si vyhrazujeme.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
© 2025 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>
|
||||||
+921
-232
File diff suppressed because it is too large
Load Diff
+729
-257
File diff suppressed because it is too large
Load Diff
+1191
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,900 @@
|
|||||||
|
<!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">
|
||||||
|
|
||||||
|
<!-- 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 Content -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||||||
|
<div class="bg-white rounded-xl shadow-md p-8 md:p-10">
|
||||||
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-8 text-center">Obchodní podmínky</h1>
|
||||||
|
|
||||||
|
<div class="prose max-w-none text-gray-700">
|
||||||
|
<p class="mb-6">Datum poslední aktualizace: 21. června 2025</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">1. Úvodní ustanovení</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Tyto obchodní podmínky (dále jen „podmínky") upravují vzájemná práva a povinnosti smluvních stran vzniklé v souvislosti s uzavřením smlouvy o poskytování služeb mezi společností SportCreative, IČ: [VAŠE IČ], se sídlem [VAŠE ADRESA], zapsanou v obchodním rejstříku vedeném [SOUD], sp. zn. [ČÍSLO VKLADU] (dále jen „poskytovatel") a zákazníkem (dále jen „zákazník").
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">2. Předmět smlouvy</h2>
|
||||||
|
<p class="mb-4">
|
||||||
|
Předmětem smlouvy je poskytování těchto služeb:
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||||
|
<li>Správa sociálních sítí</li>
|
||||||
|
<li>Tvorba videí a fotografií</li>
|
||||||
|
<li>Webdesign a vývoj webových stránek</li>
|
||||||
|
<li>Grafický design</li>
|
||||||
|
<li>Marketingové poradenství</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">3. Uzavření smlouvy</h2>
|
||||||
|
<p class="mb-4">
|
||||||
|
Smlouva se považuje za uzavřenou okamžikem odeslání objednávky zákazníkem a jejím potvrzením poskytovatelem.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">4. Cena a platební podmínky</h2>
|
||||||
|
<p class="mb-4">
|
||||||
|
Ceny služeb jsou uvedeny v aktuálním ceníku nebo jsou stanoveny individuální nabídkou. Ceny jsou uvedeny v českých korunách včetně DPH.
|
||||||
|
</p>
|
||||||
|
<p class="mb-6">
|
||||||
|
Faktura je splatná do 14 dnů od data vystavení, pokud není písemně dohodnuto jinak. V případě opožděné platby má poskytovatel právo účtovat úrok z prodlení ve výši 0,05 % z dlužné částky za každý den prodlení.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">5. Práva k dílům</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Veškerá autorská práva k vytvořeným dílům přecházejí na zákazníka po úplném zaplacení fakturované částky. Do té doby si poskytovatel vyhrazuje všechna práva k dílům.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">6. Odstoupení od smlouvy</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Zákazník má právo od smlouvy odstoupit do 14 dnů od jejího uzavření bez uvedení důvodu. V případě, že byly služby zahájeny se souhlasem zákazníka před uplynutím této lhůty, zákazník hradí poskytovateli poměrnou část sjednané odměny za skutečně poskytnuté služby.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">7. Ochrana osobních údajů</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Ochrana osobních údajů se řídí samostatnými Zásadami ochrany osobních údajů, které jsou dostupné na našich webových stránkách.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2 class="text-2xl font-bold text-gray-900 mt-8 mb-4">8. Závěrečná ustanovení</h2>
|
||||||
|
<p class="mb-6">
|
||||||
|
Vztahy mezi smluvními stranami se řídí českým právem. Případné spory budou řešeny před příslušnými soudy České republiky.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="text-sm text-gray-500 mt-12 border-t pt-4">
|
||||||
|
Tyto obchodní podmínky jsou platné a účinné od 21. června 2025. Právo provádět změny si poskytovatel vyhrazuje.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
© 2025 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>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 928 KiB |
@@ -0,0 +1,966 @@
|
|||||||
|
<!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">
|
||||||
|
|
||||||
|
<!-- 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">
|
||||||
|
© 2025 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>
|
||||||
+27
@@ -0,0 +1,27 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
Disallow: /admin/
|
||||||
|
Disallow: /cgi-bin/
|
||||||
|
Disallow: /includes/
|
||||||
|
Disallow: /tmp/
|
||||||
|
Disallow: /private/
|
||||||
|
|
||||||
|
Sitemap: https://sportcreative.cz/sitemap.xml
|
||||||
|
|
||||||
|
# Crawl-delay: 10
|
||||||
|
# Uncomment the above line if your server is getting too many requests
|
||||||
|
|
||||||
|
# Allow all bots to crawl all assets
|
||||||
|
User-agent: *
|
||||||
|
Allow: /*.css$
|
||||||
|
Allow: /*.js$
|
||||||
|
Allow: /*.png$
|
||||||
|
Allow: /*.jpg$
|
||||||
|
Allow: /*.jpeg$
|
||||||
|
Allow: /*.gif$
|
||||||
|
Allow: /*.svg$
|
||||||
|
Allow: /*.webp$
|
||||||
|
|
||||||
|
# Set the preferred domain
|
||||||
|
User-agent: *
|
||||||
|
Host: https://sportcreative.cz
|
||||||
@@ -1,3 +1,19 @@
|
|||||||
|
// FAQ Toggle Function
|
||||||
|
function toggleFAQ(button) {
|
||||||
|
const content = button.nextElementSibling;
|
||||||
|
const icon = button.querySelector('ion-icon');
|
||||||
|
|
||||||
|
// Toggle the content
|
||||||
|
content.classList.toggle('hidden');
|
||||||
|
|
||||||
|
// Rotate the icon
|
||||||
|
if (content.classList.contains('hidden')) {
|
||||||
|
icon.style.transform = 'rotate(0deg)';
|
||||||
|
} else {
|
||||||
|
icon.style.transform = 'rotate(180deg)';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Mobile menu functionality
|
// Mobile menu functionality
|
||||||
const menuButton = document.querySelector('.mobile-menu-button');
|
const menuButton = document.querySelector('.mobile-menu-button');
|
||||||
@@ -70,21 +86,64 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
|
// Highlight section based on URL hash
|
||||||
|
function highlightSectionFromHash() {
|
||||||
|
// Remove any existing highlights
|
||||||
|
document.querySelectorAll('.highlighted-section').forEach(el => {
|
||||||
|
el.classList.remove('highlighted-section');
|
||||||
|
el.style.border = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Check for hash in URL
|
||||||
|
if (window.location.hash) {
|
||||||
|
const targetId = window.location.hash.substring(1);
|
||||||
|
const targetElement = document.getElementById(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
targetElement.classList.add('highlighted-section');
|
||||||
|
targetElement.style.border = '3px solid #ff9933';
|
||||||
|
targetElement.style.borderRadius = '0.5rem';
|
||||||
|
targetElement.style.padding = '1rem';
|
||||||
|
targetElement.style.transition = 'all 0.3s ease';
|
||||||
|
|
||||||
|
// Smooth scroll to the element
|
||||||
|
setTimeout(() => {
|
||||||
|
targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Run on page load and when hash changes
|
||||||
|
highlightSectionFromHash();
|
||||||
|
window.addEventListener('hashchange', highlightSectionFromHash);
|
||||||
|
|
||||||
// Portfolio filtering functionality - only run if elements exist
|
// Portfolio filtering functionality - only run if elements exist
|
||||||
const filterButtons = document.querySelectorAll('.portfolio-filter-btn');
|
const filterButtons = document.querySelectorAll('.portfolio-filter-btn');
|
||||||
const portfolioItems = document.querySelectorAll('.portfolio-item');
|
const allPortfolioItems = document.querySelectorAll('.portfolio-item');
|
||||||
|
|
||||||
// Only run portfolio filtering if we have both buttons and items
|
// Only run portfolio filtering if we have both buttons and items
|
||||||
if (filterButtons.length > 0 && portfolioItems.length > 0) {
|
if (filterButtons.length > 0 && allPortfolioItems.length > 0) {
|
||||||
// Filter functionality
|
// Filter functionality
|
||||||
filterButtons.forEach(button => {
|
filterButtons.forEach(button => {
|
||||||
button.addEventListener('click', function() {
|
button.addEventListener('click', function() {
|
||||||
// Remove active class from all buttons
|
// Remove active classes from all buttons
|
||||||
filterButtons.forEach(btn => btn.classList.remove('bg-sport-purple', 'text-white'));
|
filterButtons.forEach(btn => {
|
||||||
// Add active class to clicked button
|
btn.classList.remove('bg-sport-purple', 'bg-sport-orange', 'text-white');
|
||||||
this.classList.add('bg-sport-purple', 'text-white');
|
btn.classList.add('bg-white', 'text-gray-700');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add appropriate active class based on button type
|
||||||
|
if (this.getAttribute('data-filter') === 'all') {
|
||||||
|
this.classList.remove('bg-white', 'text-gray-700');
|
||||||
|
this.classList.add('bg-sport-purple', 'text-white');
|
||||||
|
} else {
|
||||||
|
this.classList.remove('bg-white', 'text-gray-700');
|
||||||
|
this.classList.add('bg-sport-orange', 'text-white');
|
||||||
|
}
|
||||||
|
|
||||||
const filterValue = this.getAttribute('data-filter');
|
const filterValue = this.getAttribute('data-filter');
|
||||||
|
|
||||||
@@ -106,49 +165,56 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Initialize portfolio with "all" selected
|
// Initialize portfolio with "all" selected and set initial button colors
|
||||||
const allFilterButton = document.querySelector('[data-filter="all"]');
|
filterButtons.forEach(btn => {
|
||||||
if (allFilterButton) {
|
if (btn.getAttribute('data-filter') === 'all') {
|
||||||
allFilterButton.click();
|
btn.classList.remove('bg-white', 'text-gray-700');
|
||||||
}
|
btn.classList.add('bg-sport-purple', 'text-white');
|
||||||
|
} else {
|
||||||
|
btn.classList.remove('bg-sport-orange', 'text-white');
|
||||||
|
btn.classList.add('bg-white', 'text-gray-700');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Portfolio item hover effects
|
// Show all items initially
|
||||||
portfolioItems.forEach(item => {
|
portfolioItems.forEach(item => {
|
||||||
item.addEventListener('mouseenter', function() {
|
item.style.display = 'block';
|
||||||
const overlay = this.querySelector('.portfolio-overlay');
|
});
|
||||||
if (overlay) {
|
|
||||||
overlay.classList.remove('opacity-0');
|
|
||||||
overlay.classList.add('opacity-100');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
item.addEventListener('mouseleave', function() {
|
// Portfolio item hover effects - using CSS for hover instead
|
||||||
|
// This ensures hover works regardless of filter state
|
||||||
|
portfolioItems.forEach(item => {
|
||||||
|
// Remove any existing mouseenter/mouseleave event listeners
|
||||||
|
const newItem = item.cloneNode(true);
|
||||||
|
item.parentNode.replaceChild(newItem, item);
|
||||||
|
|
||||||
|
// Add click handler for each portfolio item
|
||||||
|
newItem.addEventListener('click', function(e) {
|
||||||
|
// Prevent the click from bubbling up to parent elements
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
// Toggle a class to handle the overlay visibility on click
|
||||||
const overlay = this.querySelector('.portfolio-overlay');
|
const overlay = this.querySelector('.portfolio-overlay');
|
||||||
if (overlay) {
|
if (overlay) {
|
||||||
overlay.classList.remove('opacity-100');
|
overlay.classList.toggle('opacity-0');
|
||||||
overlay.classList.add('opacity-0');
|
overlay.classList.toggle('opacity-100');
|
||||||
|
|
||||||
|
// Close other open overlays
|
||||||
|
portfolioItems.forEach(otherItem => {
|
||||||
|
if (otherItem !== this) {
|
||||||
|
const otherOverlay = otherItem.querySelector('.portfolio-overlay');
|
||||||
|
if (otherOverlay) {
|
||||||
|
otherOverlay.classList.add('opacity-0');
|
||||||
|
otherOverlay.classList.remove('opacity-100');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enhanced button hover effects - limited to actual buttons
|
|
||||||
const buttons = document.querySelectorAll('button:not(.portfolio-filter-btn), .btn');
|
|
||||||
buttons.forEach(button => {
|
|
||||||
button.addEventListener('mouseenter', function(e) {
|
|
||||||
const x = e.pageX - this.offsetLeft;
|
|
||||||
const y = e.pageY - this.offsetTop;
|
|
||||||
|
|
||||||
const ripple = document.createElement('span');
|
|
||||||
ripple.classList.add('ripple');
|
|
||||||
ripple.style.left = `${x}px`;
|
|
||||||
ripple.style.top = `${y}px`;
|
|
||||||
|
|
||||||
this.appendChild(ripple);
|
|
||||||
|
|
||||||
setTimeout(() => ripple.remove(), 1000);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Back to top functionality with smooth show/hide
|
// Back to top functionality with smooth show/hide
|
||||||
const backToTop = document.getElementById('backToTop');
|
const backToTop = document.getElementById('backToTop');
|
||||||
|
|||||||
Binary file not shown.
+69
@@ -0,0 +1,69 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
|
||||||
|
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
|
||||||
|
|
||||||
|
<!-- Main Pages -->
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>daily</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/sluzby.html</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.9</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/portfolio.html</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/kontakt.html</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.7</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- Legal Pages -->
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/gdpr.html</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>yearly</changefreq>
|
||||||
|
<priority>0.3</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/cookies.html</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>yearly</changefreq>
|
||||||
|
<priority>0.3</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- FAQ Page -->
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/faq.html</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>0.6</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
<!-- Blog Section (uncomment when you have a blog) -->
|
||||||
|
<!--
|
||||||
|
<url>
|
||||||
|
<loc>https://sportcreative.cz/blog/</loc>
|
||||||
|
<lastmod>2024-06-21</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
-->
|
||||||
|
|
||||||
|
</urlset>
|
||||||
+778
-111
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,416 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Grafický Design</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Tvorba vizuální identity, grafických prvků pro sociální sítě, plakátů a propagačních materiálů v Adobe Photoshop. Design, který podtrhne vaši značku.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50" style="padding: 4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="color-palette-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Logo, bannery, plakáty</h3>
|
||||||
|
<p class="text-gray-600 text-center">Profesionální tvorba loga, bannerů a plakátů na míru vašim potřebám.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="share-social-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Grafika pro sociální sítě</h3>
|
||||||
|
<p class="text-gray-600 text-center">Poutavé vizuály pro vaše sociální sítě, které zvýší dosah a interakce.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="brush-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Branding a vizuální identita</h3>
|
||||||
|
<p class="text-gray-600 text-center">Komplexní vytvoření jednotného vizuálního stylu vaší značky.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-16" style="padding: 4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Naše práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Image Placeholder 1 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<img src="../assets/images/design/1.jpg" alt="Design">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Image Placeholder 2 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<img src="../assets/images/design/2.jpg" alt="Design">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Video Placeholder -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video md:aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<img src="../assets/images/design/3.jpg" alt="Design">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video md:aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<iframe src="https://www.instagram.com/winnersport_cz/embed" width="450" height="450" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video md:aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<iframe src="https://www.instagram.com/fkkofolakrnov/embed" width="450" height="450" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video md:aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<iframe src="https://www.instagram.com/fcbizoni_uh/embed" width="450" height="450" frameborder="0" scrolling="no" allowtransparency="true"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,409 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Profesionální fotografie a videa</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Profesionální fotografie a videa z vašich sportovních akcí. Od působivých momentek z utkání přes týmové fotografie až po propagační videa.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="camera-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Reportážní a akční fotografie</h3>
|
||||||
|
<p class="text-gray-600 text-center">Zachycení klíčových momentů z vašich sportovních akcí a utkání v té nejlepší kvalitě.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="people-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Týmové a portrétní focení</h3>
|
||||||
|
<p class="text-gray-600 text-center">Profesionální fotografie celého týmu i jednotlivých hráčů v pózách, které vystihují váš týmového ducha.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="videocam-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Propagační videa a spoty</h3>
|
||||||
|
<p class="text-gray-600 text-center">Výroba poutavých videí, která představí váš tým, hráče a úspěchy širokému publiku.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-16" style="padding:4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Naše práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-stretch">
|
||||||
|
<!-- Left Column - spans 2 rows -->
|
||||||
|
<div class="md:row-span-2 flex flex-col gap-6">
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video flex-1">
|
||||||
|
<img src="https://eu.zonerama.com/photos/535685030_1752x1168.jpg" class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video flex-1">
|
||||||
|
<video src="../assets/video/kostelany.mp4" class="w-full h-full object-cover" controls muted loop autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Middle Column - single tall image -->
|
||||||
|
<div class="md:row-span-2">
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden h-full">
|
||||||
|
<img src="https://eu.zonerama.com/photos/535685772_1752x1168.jpg" class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Column - spans 2 rows -->
|
||||||
|
<div class="md:row-span-2 flex flex-col gap-6">
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video flex-1">
|
||||||
|
<img src="https://eu.zonerama.com/photos/529783073_2420x1614_16.jpg" class="w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video flex-1">
|
||||||
|
<video src="../assets/video/bizoni.mp4" class="w-full h-full object-cover" controls muted loop autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,401 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Digitální marketing</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Komplexní digitální marketingové strategie na míru pro sportovní týmy a organizace.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="calendar-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Plánování a realizace kampaní</h3>
|
||||||
|
<p class="text-gray-600 text-center">Komplexní plánování a realizace marketingových kampaní na míru vašim cílům a rozpočtu.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="analytics-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Analýza trhu a konkurence</h3>
|
||||||
|
<p class="text-gray-600 text-center">Důkladná analýza trhu a konkurence pro efektivní nastavení vaší marketingové strategie.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="megaphone-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Online reklama a PPC</h3>
|
||||||
|
<p class="text-gray-600 text-center">Efektivní správa PPC reklamních kampaní pro maximální návratnost investic.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-16">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Naše práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Marketing Campaign 1 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<span>Marketingová kampaň</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Market Analysis -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<span>Analýza trhu</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- PPC Campaign -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<span>PPC kampaň</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,401 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Sociální sítě</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Kompletní správa profilů na Instagramu a Facebooku, tvorba engagujícího obsahu, plánování příspěvků a analytika. Zvýšíme povědomí o vašem týmu.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="analytics-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Strategie a plánování obsahu</h3>
|
||||||
|
<p class="text-gray-600 text-center">Vytvoříme strategii obsahu na míru, která osloví vaše publikum a posílí vaši značku na sociálních sítích.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="megaphone-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Správa reklamních kampaní</h3>
|
||||||
|
<p class="text-gray-600 text-center">Efektivní správa a optimalizace reklam na sociálních sítích pro maximální dosah a konverze.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="bar-chart-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Analýza a reporting výkonu</h3>
|
||||||
|
<p class="text-gray-600 text-center">Pravidelná analýza výkonu a podrobné reporty o dosahu a angažovanosti vašich příspěvků.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-16">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Naše práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Social Media Post 1 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<span>Instagram příspěvek</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Social Media Post 2 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-square">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<span>Facebook příspěvek</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Analytics -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<span>Analytika výkonu</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,401 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Tvorba Reels</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Atraktivní krátká videa pro Instagram a Facebook Reels, která zachytí klíčové momenty a zvýší váš dosah. Virální potenciál pro oslovení nových fanoušků.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50" style="padding: 4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="videocam-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Kreativní scénáře a střih</h3>
|
||||||
|
<p class="text-gray-600 text-center">Návrh poutavých scénářů a profesionální střih, který zaujme vaše publikum.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="trending-up-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Optimalizace pro maximální dosah</h3>
|
||||||
|
<p class="text-gray-600 text-center">Optimalizace obsahu pro algoritmy sociálních sítí a maximální viditelnost.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="analytics-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Analýza úspěšnosti</h3>
|
||||||
|
<p class="text-gray-600 text-center">Pravidelná analýza výkonu a doporučení pro zlepšení dosahu a angažovanosti.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-16" style="padding: 4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Naše práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Reels Example 1 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-[9/16] max-w-[300px] mx-auto w-full">
|
||||||
|
<div class="w-full h-full flex items-center justify-center bg-black">
|
||||||
|
<video class="w-full h-full object-cover" src="https://v58.tiktokcdn-eu.com/video/tos/no1a/tos-no1a-ve-0068-no/oEUIVLDrIGQ6knEVCALZAp6YQeanfZLIcfIKvg/?a=1233&bti=NDU3ZjAwOg%3D%3D&ch=0&cr=3&dr=0&lr=tiktok&cd=0%7C0%7C0%7C&cv=1&br=1576&bt=788&cs=0&ds=3&ft=bYeKAmcdPD12Nr458h-UxD42hY3W3wv25QcAp&mime_type=video_mp4&qs=0&rc=ZzQ3ODo3aGQ2OWUzZTQ8NEBpM2dodW85cmZxNDMzbzgzNUBjNTBfYWM0XjAxMS1iYzMuYSMvbDNjMmRzaTFhLS1kLzFzcw%3D%3D&vvpl=1&l=20250621221618D860B6743BD489D67813&VExpiration=1750601837&VSignature=Skir_PXGsi9a6BnTRpvrpw&btag=e00088000" controls muted loop autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Reels Example 2 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-[9/16] max-w-[300px] mx-auto w-full">
|
||||||
|
<div class="w-full h-full flex items-center justify-center bg-black">
|
||||||
|
<video class="w-full h-full object-cover" src="https://v77.tiktokcdn-eu.com/4a5024f5b0a6065a85a2b998020f0838/685811f2/video/tos/useast2a/tos-useast2a-ve-0068c001-euttp/oMGrnSEeQDutTleyEYeEVugQDfA9FGgl5E4PhI/?a=1233&bti=NDU3ZjAwOg%3D%3D&ch=0&cr=3&dr=0&lr=tiktok&cd=0%7C0%7C0%7C&cv=1&br=1366&bt=683&cs=0&ds=3&ft=b84FGmm_PD12N.k28h-UxD42hY3W3wv25QcAp&mime_type=video_mp4&qs=0&rc=aDc4NTlmMzw3Ojc4MzU1OEBpamw0bW05cjRqeDMzZjgzM0BhXmAvYjQ1Ni8xL2AzYGFiYSNlbS5vMmQ0c2ZgLS1kL2Nzcw%3D%3D&vvpl=1&l=20250621222323F98F517A624FBCD70234&btag=e000b8000" controls muted loop autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Reels Example 3 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-[9/16] max-w-[300px] mx-auto w-full">
|
||||||
|
<div class="w-full h-full flex items-center justify-center bg-black">
|
||||||
|
<video class="w-full h-full object-cover" src="https://scontent-prg1-1.cdninstagram.com/o1/v/t16/f2/m86/AQPi3Zq-dmCzEHwCvrbAxXviQwQfpnQ3YGtFIEQ_Ko6baDYKvW5eDB8zW1pekquw7Efm1t_vbV5col7cXG-izMuXJErsdCBnhKBi31s.mp4?stp=dst-mp4&efg=eyJxZV9ncm91cHMiOiJbXCJpZ193ZWJfZGVsaXZlcnlfdnRzX290ZlwiXSIsInZlbmNvZGVfdGFnIjoidnRzX3ZvZF91cmxnZW4uY2xpcHMuYzIuNzIwLmJhc2VsaW5lIn0&_nc_cat=102&vs=1234616278391167_43930922&_nc_vs=HBksFQIYUmlnX3hwdl9yZWVsc19wZXJtYW5lbnRfc3JfcHJvZC9CODQyOEMxNUJBQTM5Nzk0REIzMzA5MkQwRDU3RjVBNV92aWRlb19kYXNoaW5pdC5tcDQVAALIARIAFQIYOnBhc3N0aHJvdWdoX2V2ZXJzdG9yZS9HQURoc0IzRHJQWVZmaTREQUhYUGphOVNvbEotYnFfRUFBQUYVAgLIARIAKAAYABsAFQAAJrz60fCr%2FNo%2FFQIoAkMzLBdAUhKfvnbItBgSZGFzaF9iYXNlbGluZV8xX3YxEQB1%2Fgdl5p0BAA%3D%3D&_nc_rid=6a3b095d97&ccb=9-4&oh=00_AfMQqN09f_qVp_DfdM1qW2xiOE6an8SV8FUAoIxd0MQQAA&oe=6858896B&_nc_sid=10d13b" controls muted loop autoplay playsinline></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,401 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Video Editing</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Profesionální střih videí ze sportovních utkání, tréninků a akcí s využitím DaVinci Resolve. Vytváříme dynamické a poutavé materiály pro vaši prezentaci.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="film-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Střih a postprodukce</h3>
|
||||||
|
<p class="text-gray-600 text-center">Profesionální střih sportovních videí, úprava barev a zvuku pro dokonalý výsledek.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="color-wand-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Grafika a efekty</h3>
|
||||||
|
<p class="text-gray-600 text-center">Přidání grafiky, titulků a speciálních efektů pro profesionální vzhled videa.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="phone-portrait-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Optimalizace</h3>
|
||||||
|
<p class="text-gray-600 text-center">Příprava videí pro sociální sítě a web v nejlepší možné kvalitě.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-16" style="padding-left:4rem; padding-right:4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Ukázky naší práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Video 1 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<iframe src="https://www.youtube-nocookie.com/embed/M2kb2QvBKPw?vq=hd1080&autoplay=1&modestbranding=1&rel=0&iv_load_policy=3&fs=0&color=white&controls=0&disablekb=1&mute=1" width="560" height="315" title="SK UP Olomouc 2-9 FK Chrudim | HIGHLIGHTS | 1. Futsal liga 2024/25" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Video 2 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<iframe src="https://www.youtube-nocookie.com/embed/V91k9Dirvkg?vq=hd1080&autoplay=1&modestbranding=1&rel=0&iv_load_policy=3&fs=0&color=white&controls=0&disablekb=1&mute=1" width="560" height="315" title="FC Bizoni UH 19-2 FC Kozlany-Bohdalice | HIGHLIGHTS" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Video 3 -->
|
||||||
|
<div class="bg-gray-200 rounded-lg overflow-hidden aspect-video">
|
||||||
|
<div class="w-full h-full flex items-center justify-center text-gray-400">
|
||||||
|
<iframe src="https://www.youtube-nocookie.com/embed/LTEZcrev6xI?vq=hd1080&autoplay=1&modestbranding=1&rel=0&iv_load_policy=3&fs=0&color=white&controls=0&disablekb=1&mute=1" width="560" height="315" title="FC Bizoni UH 10-0 FFT Vinohrady Brno | HIGHLIGHTS" frameborder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+416
@@ -0,0 +1,416 @@
|
|||||||
|
<!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 Sport</title>
|
||||||
|
<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í týmy a organizace. Specializujeme se na video editing, správu sociálních.">
|
||||||
|
<meta name="keywords" content="sport, marketing, video editing, sociální sítě, webdesign, fotografie, grafický design, digitální marketing"></meta>
|
||||||
|
<meta name="author" content="SportCreative"></meta>
|
||||||
|
<meta property="og:title" content="SportCreative - Digitální Marketing pro Sport">
|
||||||
|
<meta property="og:description" content="SportCreative - Profesionální digitální marketing pro sportovní týmy a organizace. Specializujeme se na video editing, správu sociálních sítí, webdesign a další služby.">
|
||||||
|
<!-- Add Montserrat font -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap" rel="stylesheet">
|
||||||
|
<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>
|
||||||
|
</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="#" 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>
|
||||||
|
<!-- Hero Banner -->
|
||||||
|
<section class="bg-white py-20">
|
||||||
|
<div class="container mx-auto px-4 text-center">
|
||||||
|
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-800">Správa Webu</h1>
|
||||||
|
<p class="text-xl max-w-3xl mx-auto mb-8 text-gray-600">Komplexní péče o váš web - od aktualizace obsahu přes technickou správu až po SEO optimalizaci. Zajistíme, aby váš online domov fungoval perfektně.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Services Grid -->
|
||||||
|
<section class="py-16 bg-gray-50" style="padding-left: 4rem; padding-right: 4rem;">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-12">Co nabízíme</h2>
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="document-text-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Aktualizace a správa obsahu</h3>
|
||||||
|
<p class="text-gray-600 text-center">Pravidelné aktualizace textů, obrázků a dalšího obsahu vašeho webu, aby vždy odpovídal aktuálním informacím a trendům.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-orange text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="search-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">SEO optimalizace</h3>
|
||||||
|
<p class="text-gray-600 text-center">Zvýšení viditelnosti vašeho webu ve vyhledávačích, které přivede více návštěvníků a potenciálních zákazníků.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="bg-white p-8 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||||
|
<div class="bg-sport-purple text-white w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
|
||||||
|
<ion-icon name="settings-outline" class="text-2xl"></ion-icon>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-semibold mb-4 text-center">Technická podpora a údržba</h3>
|
||||||
|
<p class="text-gray-600 text-center">Pravidelná údržba, zálohování a řešení technických problémů, aby byl váš web vždy funkční a bezpečný.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Portfolio Showcase -->
|
||||||
|
<section class="py-0">
|
||||||
|
<div class="container mx-auto px-0">
|
||||||
|
<h2 class="text-3xl font-bold text-center mb-4 mt-12">Naše práce</h2>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-2 max-w-6xl mx-auto">
|
||||||
|
<!-- Website 1 -->
|
||||||
|
<a href="https://www.winnersport.cz" target="_blank" class="group block h-full">
|
||||||
|
<div class="bg-white overflow-hidden h-full flex flex-col border-2 border-sport-orange hover:border-sport-purple transition-all duration-300">
|
||||||
|
<div class="relative overflow-hidden" style="padding-bottom: 120%;">
|
||||||
|
<img src="../assets/images/web/1.png" class="absolute inset-0 w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-1 bg-gray-50 border-t border-gray-100">
|
||||||
|
<h3 class="text-sm font-medium text-center text-gray-800 group-hover:text-sport-purple transition-colors">Winnersport</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- Website 2 -->
|
||||||
|
<a href="https://www.bizoniuh.cz" target="_blank" class="group block h-full">
|
||||||
|
<div class="bg-white overflow-hidden h-full flex flex-col border-2 border-sport-orange hover:border-sport-purple transition-all duration-300">
|
||||||
|
<div class="relative overflow-hidden" style="padding-bottom: 120%;">
|
||||||
|
<img src="../assets/images/web/2.png" class="absolute inset-0 w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-1 bg-gray-50 border-t border-gray-100">
|
||||||
|
<h3 class="text-sm font-medium text-center text-gray-800 group-hover:text-sport-purple transition-colors">Bizoni UH</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- Website 3 -->
|
||||||
|
<a href="https://www.fotbalkrnov.cz" target="_blank" class="group block h-full">
|
||||||
|
<div class="bg-white overflow-hidden h-full flex flex-col border-2 border-sport-orange hover:border-sport-purple transition-all duration-300">
|
||||||
|
<div class="relative overflow-hidden" style="padding-bottom: 120%;">
|
||||||
|
<img src="../assets/images/web/3.png" class="absolute inset-0 w-full h-full object-cover">
|
||||||
|
</div>
|
||||||
|
<div class="p-1 bg-gray-50 border-t border-gray-100">
|
||||||
|
<h3 class="text-sm font-medium text-center text-gray-800 group-hover:text-sport-purple transition-colors">Fotbal Krnov</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="text-center mt-12 mb-12">
|
||||||
|
<a href="../kontakt.html" class="bg-sport-purple text-white px-8 py-3 rounded-full font-medium hover:bg-sport-orange transition duration-300 inline-block">
|
||||||
|
Chci konzultaci
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- 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="video-editing.html" class="text-gray-400 hover:text-white transition duration-150">Video Editing</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="sociální-sítě.html" class="text-gray-400 hover:text-white transition duration-150">Sociální sítě</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="tvorba-reels.html" class="text-gray-400 hover:text-white transition duration-150">Tvorba Reels</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="fotografie-video.html" class="text-gray-400 hover:text-white transition duration-150">Profi Fotografie & Video</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="web.html" class="text-gray-400 hover:text-white transition duration-150">Správa Webu</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="design.html" class="text-gray-400 hover:text-white transition duration-150">Grafický Design</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">
|
||||||
|
© 2025 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>
|
||||||
|
<!-- CookieConsent CSS (optional, for better styling) -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
|
||||||
|
|
||||||
|
<!-- CookieConsent JS -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener("load", function(){
|
||||||
|
window.cookieconsent.initialise({
|
||||||
|
palette: {
|
||||||
|
popup: { background: "#000" },
|
||||||
|
button: { background: "#f1d600", text: "#000" }
|
||||||
|
},
|
||||||
|
theme: "classic",
|
||||||
|
type: "info", // Just informs, doesn't block cookies
|
||||||
|
content: {
|
||||||
|
message: "Tento web používá pouze nezbytné cookies pro správné fungování.",
|
||||||
|
dismiss: "Rozumím",
|
||||||
|
link: "Zásady ochrany osobních údajů",
|
||||||
|
href: "../gdpr.html" // You can create this page if you want
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user