/* ============================================
JAK PRACUJEME - apple-style horizontal cards
============================================ */
function Realizations() {
const mobile = useIsMobile();
const [active, setActive] = React.useState(0);
const [viewportWidth, setViewportWidth] = React.useState(window.innerWidth);
const [card0Zoomed, setCard0Zoomed] = React.useState(false);
const sectionRef = React.useRef(null);
const carouselRef = React.useRef(null);
const trackRef = React.useRef(null);
const card0ImgRef = React.useRef(null);
const videoRefs = React.useRef({});
const videoPlayedRef = React.useRef({});
const [videoEndedSet, setVideoEndedSet] = React.useState(new Set());
const [cardAutoPlay, setCardAutoPlay] = React.useState(false);
const [cardProgress, setCardProgress] = React.useState(0);
const cardAutoPlayRef = React.useRef(false);
const cardProgressRef = React.useRef(null);
const cardActiveRef = React.useRef(0);
const CARD_DURATION = 7000;
const cards = [
{
eyebrow: 'Váš designer',
title: 'Návrh od profíka, který naslouchá.',
text: 'Naši designéři neskládají katalogové krabice. Společně s vámi vymyslí ergonomické a chytré řešení na míru vašemu vkusu a rozpočtu.',
image: 'images/imagove-4.jpg',
fullBleed: true,
bg: '#a6705a',
ink: '#ffffff',
boldFirst: true,
},
{
eyebrow: 'Premium partner Gorenje',
title: 'Přes 30 let zkušeností.',
text: 'Jako smluvní partner Gorenje stavíme na dekádami ověřené kvalitě, precizním plánování a jistotě, že tu pro vás budeme i za deset let.',
image: 'images/namiru_3.webp',
fullBleed: true,
bg: '#898672',
ink: '#ffffff',
gorenje: true,
boldFirst: true,
},
{
eyebrow: 'Doba realizace',
title: 'Nová kuchyně už za 7 až 12 týdnů.',
text: 'Díky efektivnímu plánování a přímé vazbě na výrobu držíme slovo i termíny. Používáme prémiové materiály, které vydrží dekády provozu.',
video: 'images/namiru_vid1.mp4',
fullBleed: true,
bg: '#b99884',
ink: '#ffffff',
boldFirst: true,
},
{
eyebrow: 'Výroba a montáž',
title: 'Montáž bez chyb a reklamací.',
text: 'Naši zkušení řemeslníci si poradí s každým detailem i nerovností stěn. Kuchyni předáváme kompletně čistou, seřízenou a plně funkční.',
image: 'images/namiru_7.webp',
fullBleed: true,
bg: '#EEF3EA',
ink: '#ffffff',
dark: true,
boldFirst: true,
},
{
eyebrow: 'Letní akce',
title: 'Využijte aktuální nabídku a pořiďte si vysněnou kuchyni za výhodnější cenu.',
text: 'Začněte 3D návrhem zdarma.',
boldLast: true,
bg: '#a6192e',
ink: '#ffffff',
promo: true,
},
];
const scrollToCard = (index, stopAutoPlay = true) => {
if (stopAutoPlay) {
cardAutoPlayRef.current = false;
setCardAutoPlay(false);
if (cardProgressRef.current) cancelAnimationFrame(cardProgressRef.current);
setCardProgress(0);
}
cardActiveRef.current = index;
setActive(index);
if (!trackRef.current) return;
const card = trackRef.current.querySelector(`[data-card-index="${index}"]`);
if (card) {
const sidePadding = Math.max(20, (trackRef.current.clientWidth - card.getBoundingClientRect().width) / 2);
trackRef.current.scrollTo({
left: card.offsetLeft - sidePadding,
behavior: 'smooth',
});
}
};
const next = () => scrollToCard(Math.min(cards.length - 1, active + 1));
const prev = () => scrollToCard(Math.max(0, active - 1));
const startCardProgress = React.useCallback(() => {
let start = null;
const animate = (ts) => {
if (!cardAutoPlayRef.current) return;
if (!start) start = ts;
const elapsed = ts - start;
const pct = Math.min(elapsed / CARD_DURATION, 1);
setCardProgress(pct);
if (pct < 1) {
cardProgressRef.current = requestAnimationFrame(animate);
} else {
const next = cardActiveRef.current + 1;
if (next >= cards.length) {
cardAutoPlayRef.current = false;
setCardAutoPlay(false);
setCardProgress(0);
return;
}
scrollToCard(next, false);
setCardProgress(0);
start = null;
cardProgressRef.current = requestAnimationFrame(animate);
}
};
cardProgressRef.current = requestAnimationFrame(animate);
}, []);
React.useEffect(() => {
const track = trackRef.current;
if (!track) return;
const onScroll = () => {
const cardNodes = Array.from(track.querySelectorAll('[data-card-index]'));
const center = track.scrollLeft + track.clientWidth / 2;
let closest = 0;
let closestDistance = Infinity;
cardNodes.forEach((card) => {
const distance = Math.abs(card.offsetLeft + card.getBoundingClientRect().width / 2 - center);
if (distance < closestDistance) {
closestDistance = distance;
closest = Number(card.dataset.cardIndex);
}
});
setActive(closest);
};
track.addEventListener('scroll', onScroll, { passive: true });
return () => track.removeEventListener('scroll', onScroll);
}, [mobile]);
React.useEffect(() => {
const onResize = () => setViewportWidth(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
React.useEffect(() => {
if (cards[active]?.video && !videoPlayedRef.current[active] && videoRefs.current[active]) {
videoPlayedRef.current[active] = true;
videoRefs.current[active].play();
}
}, [active]);
React.useEffect(() => {
const el = card0ImgRef.current;
if (!el) return;
const observer = new IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
setCard0Zoomed(true);
observer.disconnect();
}
},
{ threshold: 0.3 }
);
observer.observe(el);
return () => observer.disconnect();
}, []);
React.useEffect(() => {
const section = sectionRef.current;
if (!section) return;
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting && !cardAutoPlayRef.current) {
cardAutoPlayRef.current = true;
setCardAutoPlay(true);
startCardProgress();
}
}, { threshold: 0.2 });
observer.observe(section);
return () => {
observer.disconnect();
cardAutoPlayRef.current = false;
if (cardProgressRef.current) cancelAnimationFrame(cardProgressRef.current);
};
}, [startCardProgress]);
const cardWidth = mobile
? Math.min(viewportWidth * 0.75, 320)
: Math.min(viewportWidth * 0.47, 921);
const sidePadding = mobile
? 20
: Math.max(80, (viewportWidth - 1440) / 2 + 80);
const controls = (
{cards.map((card, index) => (
active === index ? (
/* Active dot — animated progress fill */
scrollToCard(index)}
style={{
width: mobile ? '48px' : '58px',
height: mobile ? '9px' : '10px',
borderRadius: '999px',
background: 'rgba(88,88,88,0.22)',
overflow: 'hidden',
cursor: 'pointer',
flexShrink: 0,
}}
>
) : (
scrollToCard(index)}
aria-label={`Zobrazit kartu ${index + 1}`}
style={{
width: mobile ? '9px' : '10px',
height: mobile ? '9px' : '10px',
borderRadius: '999px',
background: 'rgba(88,88,88,0.34)',
transition: 'width 0.25s ease, background 0.25s ease',
boxShadow: 'none',
flexShrink: 0,
}}
/>
)
))}
Proč kuchyně od DOTu
Kuchyně bez starostí a kompromisů
Vy víte, jak chcete bydlet. My víme, jak to vyrobit, aby to vydrželo roky . Od prvního tahu tužkou designéra až po precizní montáž – u nás máte jistotu, že celý proces proběhne hladce, transparentně a bez zbytečných starostí .
{cards.map((card, index) => (
index !== active && scrollToCard(index)}
style={{
flex: `0 0 ${cardWidth}px`,
flexShrink: 0,
scrollSnapAlign: 'start',
display: 'flex',
flexDirection: 'column',
cursor: index === active ? 'default' : 'pointer',
}}
>
{/* Image / visual card — full rounded corners */}
{/* Step number */}
{/* Promo: centered numbers + CTA inside */}
{card.promo && (
{mobile ? (
) : (
)}
{ e.stopPropagation(); window.scrollToKontakt(); }}>MÁM ZÁJEM →
{card.video ? (
<>
{ if (el) videoRefs.current[index] = el; }}
src={card.video}
muted
playsInline
preload="auto"
onEnded={() => setVideoEndedSet(prev => new Set([...prev, index]))}
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
display: 'block',
}}
/>
{videoEndedSet.has(index) && (
{
e.stopPropagation();
setVideoEndedSet(prev => { const s = new Set(prev); s.delete(index); return s; });
videoRefs.current[index].currentTime = 0;
videoRefs.current[index].play();
}}
title="Přehrát znovu"
style={{
position: 'absolute',
top: '18px',
right: '18px',
zIndex: 10,
width: '36px',
height: '36px',
borderRadius: '50%',
background: 'rgba(255,255,255,0.18)',
border: '1px solid rgba(255,255,255,0.32)',
backdropFilter: 'blur(8px)',
WebkitBackdropFilter: 'blur(8px)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
color: '#ffffff',
}}
>
)}
) : (
)}
{card.gorenje && (
<>
{/* Text below the image card */}
{(card.fullBleed || card.promo) && (
{(() => {
const full = [card.title, card.text].filter(Boolean).join(' ');
if (card.boldFirst) {
const dotIdx = full.indexOf('. ');
if (dotIdx === -1) return {full} ;
return <>{full.slice(0, dotIdx + 1)} {full.slice(dotIdx + 1)};
}
if (card.boldLast) {
const dotIdx = full.lastIndexOf('. ');
if (dotIdx === -1) return {full} ;
return <>{full.slice(0, dotIdx + 2)}{full.slice(dotIdx + 2)} ;
}
return full;
})()}
)}
{!card.fullBleed && !card.promo && (
{card.eyebrow}
{card.title}
)}
))}
{controls}
);
}
window.Realizations = Realizations;
/* ============================================
KITCHEN SLIDESHOW
============================================ */
function KitchenSlideshow() {
const mobile = useIsMobile();
const trackRef = React.useRef(null);
const animRef = React.useRef(null);
const scrollPos = React.useRef(0);
const isDragging = React.useRef(false);
const dragStartX = React.useRef(0);
const dragStartY = React.useRef(0);
const dragStartScroll = React.useRef(0);
const isDirectionSet = React.useRef(false);
const [viewportW, setViewportW] = React.useState(window.innerWidth);
React.useEffect(() => {
const onResize = () => setViewportW(window.innerWidth);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, []);
const images = [
'000e5b8cea114e90b9c418fd348895b3',
'0d56726e2aee49d79903b5d04aa1eefa',
'1a57c8e8406340a3a6ce83d908b92c90',
'291390cc3d7b4ce09651e1a98f18750f',
'2b9d638143a740a4b351b9df0710d9c8',
'55c247452ceb46b3b327b1d7092b15a6',
'65a9bb3bdfe14caaa3493b630bb77254',
'756a1bc85132416e9c68d80d115ee4d1',
'a6bdac0366fd4f6fa010351b0ceaa178',
'bb4bf1a24709493b9b7ba55c9b180702',
'd0417ebe70d1433fba9591e0c725a0db',
'dfe0ca918774419d889cb07dfad1ce2d',
'ec95f703df114cd188a2b52da6d31c6a',
'fca9f33e90394865a808cbe21b02e23a',
];
const allImages = [...images, ...images, ...images];
const imgW = mobile ? 206 : 308;
const gap = mobile ? 50 : 70;
React.useEffect(() => {
const track = trackRef.current;
if (!track) return;
const singleSetW = images.length * (imgW + gap);
scrollPos.current = singleSetW;
track.scrollLeft = singleSetW;
const speed = 0.864;
const updateCards = () => {
const containerCx = track.getBoundingClientRect().left + track.clientWidth / 2;
const threshold = imgW * 1.4;
Array.from(track.querySelectorAll('[data-kit-img]')).forEach(card => {
const r = card.getBoundingClientRect();
const cx = r.left + r.width / 2;
const d = Math.abs(cx - containerCx);
const t = Math.max(0, 1 - d / threshold);
const s = 1 + 0.3 * t;
card.style.transform = `scale(${s})`;
card.style.zIndex = Math.round(t * 10);
});
};
const tick = () => {
if (!isDragging.current) {
scrollPos.current += speed;
if (scrollPos.current >= singleSetW * 2) scrollPos.current -= singleSetW;
track.scrollLeft = scrollPos.current;
}
updateCards();
animRef.current = requestAnimationFrame(tick);
};
animRef.current = requestAnimationFrame(tick);
const onPointerDown = (e) => {
dragStartX.current = e.clientX ?? 0;
dragStartY.current = e.clientY ?? 0;
dragStartScroll.current = scrollPos.current;
if (e.pointerType !== 'touch') {
isDragging.current = true;
track.style.cursor = 'grabbing';
track.setPointerCapture?.(e.pointerId);
} else {
isDragging.current = false;
isDirectionSet.current = false;
}
};
const onPointerMove = (e) => {
if (e.pointerType === 'touch') {
if (!isDirectionSet.current) {
const dx = Math.abs(e.clientX - dragStartX.current);
const dy = Math.abs(e.clientY - dragStartY.current);
if (dx < 6 && dy < 6) return;
isDirectionSet.current = true;
if (dx >= dy * 1.2) {
isDragging.current = true;
track.setPointerCapture?.(e.pointerId);
} else {
isDragging.current = false;
return;
}
}
if (!isDragging.current) return;
} else {
if (!isDragging.current) return;
}
const delta = dragStartX.current - e.clientX;
let next = dragStartScroll.current + delta;
if (next >= singleSetW * 2) next -= singleSetW;
if (next < singleSetW) next += singleSetW;
scrollPos.current = next;
track.scrollLeft = next;
};
const onPointerUp = () => {
isDragging.current = false;
isDirectionSet.current = false;
track.style.cursor = 'grab';
};
track.addEventListener('pointerdown', onPointerDown);
track.addEventListener('pointermove', onPointerMove);
track.addEventListener('pointerup', onPointerUp);
track.addEventListener('pointercancel', onPointerUp);
return () => {
cancelAnimationFrame(animRef.current);
track.removeEventListener('pointerdown', onPointerDown);
track.removeEventListener('pointermove', onPointerMove);
track.removeEventListener('pointerup', onPointerUp);
track.removeEventListener('pointercancel', onPointerUp);
};
}, [mobile]);
return (
{allImages.map((img, i) => (
))}
);
}
window.KitchenSlideshow = KitchenSlideshow;
/* ============================================
ORIGINAL KITCHEN OPTIONS
============================================ */
function InfiniteKitchenOptions() {
const mobile = useIsMobile();
return (
{mobile ? (
Kuchyně na míru
Váš prostor.
Nekombinujeme unifikované skříňky z katalogu. Nasloucháme tomu, jak žijete, jak rádi vaříte a kolik úložného prostoru skutečně potřebujete. Výsledkem je kuchyně navržená na milimetr přesně pro váš prostor , vaše zvyky a váš rozpočet .
{/* Stats — mobile: above slideshow */}
{[
{ icon:
, label: '7 000+ realizací' },
{ icon:
, label: '30 let zkušeností' },
{ icon:
, label: '4,8 hodnocení', href: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje' },
{ icon:
, label: '10+ designérů' },
{ icon:
, label: 'Německo-česká výroba' },
].map((it, i) => {
const inner = (
<>
{it.icon}
{it.label}
);
const sharedStyle = { display: 'flex', alignItems: 'flex-start', gap: '12px', color: 'var(--ink)', fontFamily: 'var(--sans)', fontSize: '17px', fontWeight: 400, paddingLeft: '10px', textDecoration: 'none' };
return it.href
?
{inner}
:
{inner}
;
})}
) : (
Kuchyně na míru
Váš prostor.
Nekombinujeme unifikované skříňky z katalogu. Nasloucháme tomu, jak žijete, jak rádi vaříte a kolik úložného prostoru skutečně potřebujete. Výsledkem je kuchyně navržená na milimetr přesně pro váš prostor , vaše zvyky a váš rozpočet .
)}
{!mobile &&
{[
{ icon:
, label: '7 000+ realizací' },
{ icon:
, label: '30 let zkušeností' },
{ icon:
, label: '4,8 hodnocení', href: 'https://www.recenze-kuchyne.cz/recenze/kuchyne-gorenje' },
{ icon:
, label: '10+ designérů' },
{ icon:
, label: 'Německo-česká výroba' },
].map((it, i) => {
const inner = (
<>
{it.icon}
{it.label}
);
const sharedStyle = { display: 'flex', alignItems: 'flex-start', gap: '12px', color: 'var(--ink)', fontFamily: 'var(--sans)', fontSize: mobile ? '17px' : '18px', fontWeight: 400, paddingLeft: mobile ? '64px' : '0', textDecoration: 'none' };
return it.href
?
{inner}
:
{inner}
;
})}
}
);
}
window.InfiniteKitchenOptions = InfiniteKitchenOptions;
/* ============================================
SCROLL-DRIVEN PROCESS STEPS SECTION
============================================ */
function ProcessStepsSection() {
const mobile = useIsMobile();
const sectionRef = React.useRef(null);
const introRef = React.useRef(null);
const videoRef = React.useRef(null);
const blockRef = React.useRef(null);
const [videoFailed, setVideoFailed] = React.useState(false);
React.useEffect(() => {
const video = videoRef.current;
const block = blockRef.current;
if (!video || !block) return;
let rafId;
const tick = () => {
if (video.duration) {
const rect = block.getBoundingClientRect();
const winH = window.innerHeight;
const isMob = window.innerWidth < 768;
const startDelay = isMob ? 0 : block.offsetHeight * 0.33;
const scrolled = Math.max(0, (winH - rect.top) - startDelay);
const total = winH + block.offsetHeight - startDelay;
const progress = Math.max(0, Math.min(1, (scrolled / total) * 1.6));
const target = progress * video.duration;
// Lerp toward target: 18% per frame ≈ smooth but responsive at 60fps
const diff = target - video.currentTime;
if (Math.abs(diff) > 0.0005) {
video.currentTime += diff * 0.18;
}
}
rafId = requestAnimationFrame(tick);
};
// iOS Safari ignores preload="auto" and requires play() to be called
// before currentTime can be set programmatically. We play briefly then
// immediately pause so metadata + frames load, enabling scroll-scrub.
const initPromise = video.play();
if (initPromise !== undefined) {
initPromise.then(() => {
video.pause();
video.currentTime = 0;
rafId = requestAnimationFrame(tick);
}).catch(() => {
// Autoplay blocked or video failed to load — show poster fallback
setVideoFailed(true);
});
} else {
// Older browsers without Promise-based play()
video.pause();
video.currentTime = 0;
rafId = requestAnimationFrame(tick);
}
return () => cancelAnimationFrame(rafId);
}, []);
return (
{/* ── Intro (scrolls normally) ── */}
Od představy k realitě
Cesta k vaší nové kuchyni
Dobrá kuchyně nevzniká náhodou. Vzniká přesným zaměřením , promyšleným návrhem a pečlivou realizací , ve které do sebe všechno přirozeně zapadne.
{/* ── Sticky two-column block (desktop only) ── */}
{mobile ? (
/* Mobile: static layout */
{videoFailed ? (
) : (
setVideoFailed(true)}
style={{ width: '100%', borderRadius: '10px', display: 'block' }}
/>
)}
Navrženo podle prostoru. Promyšleno podle vás.
Ať zařizujete novostavbu, nebo rekonstruujete starší kuchyň, navrhneme uspořádání, které využije prostor naplno . Promyslíme pracovní zóny, úložná místa i pohodlný pohyb tak, aby se vám v kuchyni dobře fungovalo každý den. Dlouholeté zkušenosti nám pomáhají odhalit nepraktická řešení dřív, než vzniknou.
{/* Left: video */}
{/* Right: text */}
Navrženo podle prostoru. Promyšleno podle vás.
Ať zařizujete novostavbu, nebo rekonstruujete starší kuchyň, navrhneme uspořádání, které využije prostor naplno . Promyslíme pracovní zóny, úložná místa i pohodlný pohyb tak, aby se vám v kuchyni dobře fungovalo každý den.
Dlouholeté zkušenosti nám pomáhají odhalit nepraktická řešení dřív, než vzniknou.
);
}
window.ProcessStepsSection = ProcessStepsSection;
/* ============================================
KITCHEN DESIGN SECTION — Krok 2
============================================ */
function KitchenDesignSection() {
const mobile = useIsMobile();
const [activeTab, setActiveTab] = React.useState(0);
const tabs = [
{ label: 'Styly' },
{ label: 'Materiály' },
{ label: 'Prac. desky' },
{ label: 'Vybavení' },
];
const tabIcons = [
,
,
,
,
];
const kitchenStyles = [
{ name: 'Moderní', desc: 'Čisté linie, bez kompromisů', img: 'images/kit7.webp' },
{ name: 'Skandinávský', desc: 'Světlo, dřevo, příroda', img: 'images/kitchensize_1.webp' },
{ name: 'Industriální', desc: 'Kov, beton, charakter', img: 'images/kit2.webp' },
{ name: 'Provence', desc: 'Vzduch a styl Francie', img: 'images/kit3.webp' },
{ name: 'Luxusní', desc: 'Materiály bez kompromisů', img: 'images/kit4.webp' },
{ name: 'Retro', desc: 'Osobitý, plný energie', img: 'images/kit8.webp' },
];
const materials = [
{ name: 'Lamino', desc: 'Odolné, cenově dostupné', bg: 'linear-gradient(160deg,#EDEAE4 0%,#E2DDD4 100%)' },
{ name: 'Lak', desc: 'Hedvábný povrch, tisíce odstínů', bg: 'linear-gradient(140deg,#DDDAD4 0%,#F6F4F0 36%,#ECEAE4 56%,#DEDAD4 100%)' },
{ name: 'Profilovaná dvířka', desc: 'Klasický rámeček, moderní nádech', type: 'profiled', bg: '#EDEAE3' },
{ name: 'Dýha', desc: 'Přírodní dřevěný vzor', bg: 'repeating-linear-gradient(86deg,#C8A87A 0px,#C8A87A 3px,#B49060 3px,#B49060 4px,#C8A87A 4px,#C8A87A 11px)' },
{ name: 'Masiv', desc: 'Tradiční řemeslo, na generace', bg: 'repeating-linear-gradient(88deg,#8E6B3E 0px,#8E6B3E 8px,#7A5A2E 8px,#7A5A2E 9px,#8E6B3E 9px,#8E6B3E 22px)' },
{ name: '∞ barev', desc: 'Tisíce kombinací pro každý styl', type: 'colors' },
];
const countertops = [
{ name: 'Vysokotlaký laminát', img: 'images/worktops/940-kronos-wood.webp' },
{ name: 'Kompaktní desky', img: 'images/worktops/898-beton-antracit.webp' },
{ name: 'Technistone', img: 'images/worktops/927-terrazzo-color.webp' },
{ name: 'Silestone', img: 'images/worktops/931-kamen-cernosedy.webp' },
{ name: 'Corian', bg: 'linear-gradient(160deg,#F0ECE4 0%,#E6E0D6 50%,#EDEAE2 100%)' },
{ name: 'Keramické desky', img: 'images/worktops/977-keramika.webp' },
{ name: 'Přírodní kámen', img: 'images/worktops/896-mramor.webp' },
{ type: 'colorNote' },
];
const interiorSolutions = [
{ name: 'Rohové řešení', url: 'https://images.pexels.com/photos/7533923/pexels-photo-7533923.jpeg' },
{ name: 'Šuplíky', url: 'https://images.pexels.com/photos/9646744/pexels-photo-9646744.jpeg' },
{ name: 'Výsuvy', url: 'https://images.pexels.com/photos/6264416/pexels-photo-6264416.jpeg' },
{ name: 'Výklopy', url: 'https://images.pexels.com/photos/7303850/pexels-photo-7303850.jpeg' },
{ name: 'Odpadové koše', url: 'https://images.pexels.com/photos/7512975/pexels-photo-7512975.jpeg' },
{ name: 'Vnitřní organizéry', url: 'https://images.pexels.com/photos/3722563/pexels-photo-3722563.jpeg' },
];
const renderContent = () => {
if (activeTab === 0) {
const card = (item, idx) => (
);
if (mobile) {
const row1 = kitchenStyles.slice(0, 3);
const row2 = kitchenStyles.slice(3, 6);
return (
{row1.map((item, idx) => (
{card(item, idx)}
))}
{row2.map((item, idx) => (
{card(item, idx + 3)}
))}
);
}
return (
{kitchenStyles.map((item, idx) => card(item, idx))}
);
}
if (activeTab === 1) {
const allColors = [
'#FAFAF7','#F5F2EB','#EDE8DF','#D4C5A9','#C8B898','#B0A888','#A89278','#8A7862',
'#C8DDB8','#8A9B7A','#5A7A62','#3D5A4A','#2E4A3A','#1E3428','#7AB0C8','#4A8AAA',
'#2C5A7A','#2C3E5A','#1A2A42','#0E1A2E','#D4B864','#C4A044','#B88030','#8A6020',
'#F0A888','#D4886A','#B85C3C','#8A3C2A','#6A2418','#7A2535','#C4968A','#D4A090',
'#F5F0E8','#E8E4DE','#D4D0CC','#B8B4AE','#909088','#6A6862','#4A4A52','#1A1A22',
];
const renderBg = (item) => {
if (item.type === 'profiled') {
return (
);
}
return
;
};
return (
{materials.map((item, idx) => {
if (item.type === 'colors') {
return (
{allColors.map((hex, i) => (
))}
Nekonečné množství barev
);
}
return (
{renderBg(item)}
{item.name}
);
})}
{ctNames.map((name, i) => (
))}
{ctImages.map((img, i) => (
))}
);
}
if (activeTab === 3) {
const card = (item, idx) => (
);
if (mobile) {
const row1 = interiorSolutions.slice(0, 3);
const row2 = interiorSolutions.slice(3, 6);
return (
{row1.map((item, idx) => (
{card(item, idx)}
))}
{row2.map((item, idx) => (
{card(item, idx + 3)}
))}
);
}
return (
{interiorSolutions.map((item, idx) => card(item, idx))}
);
}
};
return (
{/* Left: text */}
Váš styl v každém detailu
Někdo chce čistý minimalismus, jiný teplo dřeva nebo výrazné barvy. Z tisíců kombinací společně vytvoříme řešení, které bude odpovídat vašemu stylu i způsobu života .
Krásný vzhled doplníme chytrým vnitřním řešením , díky kterému bude mít vše své místo a kuchyně bude fungovat stejně dobře, jako vypadá.
{/* Right: interactive panel */}
{/* Visual content area */}
{/* Tab switcher — light design */}
{tabs.map((tab, i) => {
const isActive = activeTab === i;
return (
setActiveTab(i)} style={{
flex: 1,
background: isActive ? '#c4b8a8' : 'transparent',
borderRadius: '10px', border: 'none',
padding: mobile ? '13px 6px' : '16px 8px',
cursor: 'pointer',
display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '5px',
color: isActive ? 'var(--ink)' : 'rgba(0,0,0,0.45)',
transition: 'background 0.2s ease, color 0.2s ease',
fontFamily: 'var(--sans)',
fontSize: mobile ? '11px' : '13px',
fontWeight: isActive ? 500 : 400,
lineHeight: 1.2, textAlign: 'center',
}}>
{tabIcons[i]}
{tab.label}
);
})}
);
}
window.KitchenDesignSection = KitchenDesignSection;
/* ============================================
KITCHEN APPLIANCES SECTION — Krok 3
============================================ */
function KitchenAppliancesSection() {
const mobile = useIsMobile();
const brands = [
{
name: 'gorenje',
tagline: 'Život jednoduše',
text: 'Spolehlivé a dostupné spotřebiče pro každodenní život. Čistý design, snadná obsluha a prověřená funkčnost, která vydrží roky.',
logo: 'images/Gorenje-spotrebice.png',
logoScale: 1.35,
img: 'images/gorenje_pic1.webp',
},
{
name: 'Hisense',
tagline: 'Pro fanoušky smart technologií',
text: 'Inovativní technologie a chytré funkce pro moderní domácnost. Široká řada spotřebičů s připojením a pokročilými funkcemi za dostupnou cenu.',
logo: 'images/Hisense.png',
img: 'images/hisense_pic1.webp',
},
{
name: 'ASKO',
tagline: 'Skandinávská prémiová kvalita',
text: 'Prémiové spotřebiče pro nejnáročnější. Nordický minimalismus, výjimečná trvanlivost a výkon, který ocení každý, kdo vaření bere vážně.',
logo: 'images/Asko-spotrebice.png',
img: 'images/asko_pic1.webp',
},
{
name: 'MORA',
tagline: 'Tradice a rodinná pohoda',
text: 'Česká tradice s více než 70letou historií. Spotřebiče, kterým důvěřují generace rodin — spolehlivé, tiché a přirozené do každé kuchyně.',
logo: 'images/Mora-spotrebice.png',
img: 'images/mora_pic1.webp',
},
];
return (
{/* Top: centered text */}
Technika, která vám usnadní každý den
Někdo hledá jednoduchost, jiný chytré funkce nebo prémiový výkon . Porovnáme možnosti jednotlivých značek a doporučíme spotřebiče podle vašich návyků, prostoru i plánovaného rozpočtu .
Spolupracujeme s
{/* Bottom: brand cards — 4 in one row on desktop, 2×2 on mobile */}
{brands.map((brand, i) => (
{brand.tagline}
{brand.text}
))}
{/* Secondary brands strip */}
Na přání dokážeme dodat i spotřebiče dalších prémiových značek:
{mobile ? (
{/* Row 1: Bosch + Siemens + AEG */}
{[
{ src: 'images/logo_bosh.png', alt: 'Bosch', scale: 1.2 },
{ src: 'images/siemens_logo.png', alt: 'Siemens', scale: 0.85 },
{ src: 'images/log_AEG.png', alt: 'AEG', scale: 0.85 },
].map((b) => (
))}
{/* Row 2: Miele + LG + Whirlpool */}
{[
{ src: 'images/miele_logo.png', alt: 'Miele', scale: 0.85 },
{ src: 'images/LG_logo.png', alt: 'LG', scale: 0.85 },
{ src: 'images/whirpool_logo.png', alt: 'Whirlpool', scale: 1.1 },
].map((b) => (
))}
) : (
{[
{ src: 'images/logo_bosh.png', alt: 'Bosch', scale: 1.4 },
{ src: 'images/siemens_logo.png', alt: 'Siemens', scale: 1 },
{ src: 'images/log_AEG.png', alt: 'AEG', scale: 1 },
{ src: 'images/miele_logo.png', alt: 'Miele', scale: 1 },
{ src: 'images/LG_logo.png', alt: 'LG', scale: 1 },
{ src: 'images/whirpool_logo.png', alt: 'Whirlpool', scale: 1.5 },
].map((b) => (
))}
)}
);
}
window.KitchenAppliancesSection = KitchenAppliancesSection;
/* ============================================
JAK SESTAVÍME TU VAŠI? SECTION
============================================ */
function KitchenAssemblySection() {
const mobile = useIsMobile();
return (
{/* CTA banner */}
{mobile ? (
) : (
)}
3D návrh zdarma
Přijďte se podívat, jak může vypadat ta vaše. 3D návrh od designéra je zcela zdarma.
window.scrollToKontakt()} style={{
padding: mobile ? '12px 24px' : '15px 36px',
borderRadius: '999px',
background: '#ffffff',
border: 'none',
fontFamily: 'var(--sans)',
fontSize: mobile ? '13px' : '15px',
fontWeight: 600,
letterSpacing: '0.06em',
textTransform: 'uppercase',
color: '#a6192e',
cursor: 'pointer',
whiteSpace: 'nowrap',
}}>
DOMLUVIT KONZULTACI →
);
}
window.KitchenAssemblySection = KitchenAssemblySection;
/* ============================================
PRICING SECTION
============================================ */
function PricingSection() {
const mobile = useIsMobile();
const [activeIndex, setPricingActive] = React.useState(1);
const tiers = [
{
label: 'Základní',
labelColor: '#e8f0e8',
labelText: '#3a6b3a',
total: '228 000 Kč',
img: 'images/price_1.png',
items: [
{ name: 'Nábytek v laminátu', price: '130 000', highlight: false },
{ name: 'Vnitřní vybavení Hettich', price: '14 000', highlight: false },
{ name: 'Deska laminát 38 mm', price: '8 000', highlight: false },
{ name: 'Spotřebiče Gorenje', price: '42 000', highlight: false },
{ name: 'Doplňky (dřez, baterie, LED)', price: '9 000', highlight: false },
{ name: 'Montáž, doprava, zaměření', price: '25 000', highlight: false },
],
note: 'Laminátová dvířka s klasickými úchytkami. Hettich vybavení s tlumením, laminátová deska. Plnohodnotná kuchyně za rozumnou cenu.',
noteBold: 'Plnohodnotná kuchyně za rozumnou cenu.',
},
{
label: 'Komfortní',
labelColor: '#e8eef8',
labelText: '#2a4a8a',
total: '315 000 Kč',
img: 'images/price_2.png',
items: [
{ name: 'Nábytek v laku', price: '165 000', highlight: false },
{ name: 'Bezúchytové řešení', price: '12 000', highlight: false },
{ name: 'Vnitřní vybavení Blum Antaro', price: '27 000', highlight: false },
{ name: 'Skryté potravinové šuplíky', price: '12 000', highlight: false },
{ name: 'Deska laminát 25 mm', price: '8 000', highlight: false },
{ name: 'Spotřebiče Hisense', price: '52 000', highlight: false },
{ name: 'Doplňky + odpadkové koše', price: '14 000', highlight: false },
{ name: 'Montáž, doprava, zaměření', price: '25 000', highlight: false },
],
note: '+87 000 Kč oproti základní variantě. Lakovaná dvířka bez úchytek, Blum Antaro s tlumením a skryté šuplíky.',
noteBold: '+87 000 Kč oproti základní variantě.',
},
{
label: 'Prémiová',
labelColor: '#f5f0e8',
labelText: '#7a5a20',
total: '506 000 Kč',
img: 'images/price_3.png',
items: [
{ name: 'Nábytek v laku na míru (NCS/RAL)', price: '210 000', highlight: false },
{ name: 'Bezúchytové řešení', price: '14 000', highlight: false },
{ name: 'Vnitřní vybavení Blum Merivobox', price: '52 000', highlight: false },
{ name: 'Skryté potravinové šuplíky', price: '16 000', highlight: false },
{ name: 'Pracovní deska Technistone 20 mm', price: '48 000', highlight: false },
{ name: 'Skleněný obklad na míru', price: '22 000', highlight: false },
{ name: 'Spotřebiče Asko', price: '98 000', highlight: false },
{ name: 'Doplňky + odpadkové koše', price: '18 000', highlight: false },
{ name: 'Montáž, doprava, zaměření', price: '28 000', highlight: false },
],
note: '+278 000 Kč oproti základní variantě. Lak na míru NCS/RAL, Blum Merivobox, kamenná deska Technistone, skleněný obklad, Asko spotřebiče.',
noteBold: '+278 000 Kč oproti základní variantě.',
},
];
const activeTier = tiers[activeIndex];
const tabLabels = ['Základní', 'Komfortní', 'Prémiová'];
const TabButtons = ({ dark }) => (
{tiers.map((tier, i) => (
setPricingActive(i)}
style={{
flex: 1,
padding: '10px 4px',
fontSize: '13px',
fontWeight: 600,
borderRadius: '8px 8px 0 0',
borderTop: activeIndex === i ? `2px solid ${dark ? 'rgba(255,255,255,0.5)' : 'var(--ink)'}` : `1px solid ${dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)'}`,
borderLeft: activeIndex === i ? `2px solid ${dark ? 'rgba(255,255,255,0.5)' : 'var(--ink)'}` : `1px solid ${dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)'}`,
borderRight: activeIndex === i ? `2px solid ${dark ? 'rgba(255,255,255,0.5)' : 'var(--ink)'}` : `1px solid ${dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)'}`,
borderBottom: activeIndex === i ? `2px solid ${dark ? '#2d4a3e' : '#ffffff'}` : `1px solid ${dark ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.15)'}`,
background: dark ? '#2d4a3e' : '#ffffff',
color: dark ? (activeIndex === i ? '#ffffff' : 'rgba(255,255,255,0.5)') : (activeIndex === i ? 'var(--ink)' : 'var(--ink-muted)'),
cursor: 'pointer',
position: 'relative',
zIndex: activeIndex === i ? 2 : 1,
marginBottom: activeIndex === i ? '-2px' : '-1px',
}}
>
{tabLabels[i]}
))}
);
const CardContent = ({ dark, stretch }) => (
{/* Tier name */}
{activeTier.label}
{/* Line items */}
{activeTier.items.map((item) => (
{item.name}
{item.price}
))}
{/* Divider + total */}
Celkem
{activeTier.total}
{/* Header */}
Na míru vašemu budgetu
Kolik bude stát ta vaše?
Stejný styl umíme připravit dostupně i ve špičkovém provedení. Řekněte nám svůj rozpočet — my z něj dostaneme maximum.
{/* Photo — first on mobile, right on desktop */}
{mobile && (
{tiers.map((tier, i) => (
))}
)}
{/* Green pricing panel */}
Vzorový příklad
Jeden styl, tři různé ceny. Co vše ovlivňuje finální cenu kuchyně?
{/* Photo — right on desktop only */}
{!mobile && (
{tiers.map((tier, i) => (
))}
)}
{/* CTA */}
Kolik bude stát ta vaše?
Získejte 3D návrh a nacenění zdarma — bez závazků, přímo na vašem studiu.
window.scrollToKontakt(e)} className="btn" style={{
background: '#a6192e',
color: '#ffffff',
borderRadius: '999px',
padding: '15px 36px',
fontSize: '15px',
fontWeight: 600,
letterSpacing: '0.06em',
textTransform: 'uppercase',
whiteSpace: 'nowrap',
flexShrink: 0,
}}>
MÁM ZÁJEM →
);
}
window.PricingSection = PricingSection;
/* ============================================
QUALITY SECTION
============================================ */
function QualitySection() {
const mobile = useIsMobile();
const cards = [
{
img: 'images/kitchengrid.webp',
tag: 'Prověřeno časem',
title: 'Jistota opřená o 30 let zkušeností',
text: 'Kuchyň na míru je investicí na desítky let, proto je důležité vybrat si stabilního partnera. S více než 7 000 úspěšnými realizacemi po celé zemi víme přesně, jaké nástrahy plánování kuchyní obnáší a jak jim včas předejít. S námi neriskujete – sázíte na jistotu a stabilní zázemí.',
},
{
img: 'images/kitchen_factory.webp',
tag: 'Prověřená výroba',
title: 'Vyrobeno tam, kde to umí nejlépe',
text: 'Spolupracujeme s výrobci, jejichž práci a standardy dlouhodobě známe. Převážná část produkce probíhá v Německu, vybraná řešení vznikají v Česku. Společným základem je přesné zpracování a kontrola každého detailu.',
},
{
img: 'images/kitchenbuild.webp',
tag: 'Stoprocentní servis',
title: 'Ručíme za každý detail instalace',
text: 'Žádní externisti, ale výhradně naši vlastní kmenoví montážníci. Postaráme se o kompletní montáž od čistého složení skříněk až po bezpečné zapojení veškeré techniky. Držíme slovo, termíny a stoprocentní kvalitu provedení.',
},
];
return (
Garance klidu
Partner, na kterého se můžete spolehnout
Nejsme jen prodejce kuchyní. Hlídáme návrh, výrobu, spotřebiče i montáž a za celý výsledek neseme odpovědnost. Vy tak máte jednoho partnera , na kterého se můžete obrátit od první schůzky i roky po dokončení.
{cards.map((card) => (
{card.tag}
{card.title}
{card.text}
))}
);
}
window.QualitySection = QualitySection;
) : (
