PŘÍPADOVÁ STUDIE

Amarosi

Kompletní redesign webu výrobce bazénových zastřešení

Next.js 16React 19TypeScriptVanilla CSSNodemailerVercel
Amarosi s.r.o.
Olomouc
Výrobce bazénových zastřešení
REDESIGN · KONFIGURÁTOR · FORMULÁŘE · GALERIE · SEO · MATERIÁLY · REALIZACE · LIGHTBOX · REDESIGN · KONFIGURÁTOR · FORMULÁŘE · GALERIE · SEO · MATERIÁLY · REALIZACE · LIGHTBOX ·REDESIGN · KONFIGURÁTOR · FORMULÁŘE · GALERIE · SEO · MATERIÁLY · REALIZACE · LIGHTBOX · REDESIGN · KONFIGURÁTOR · FORMULÁŘE · GALERIE · SEO · MATERIÁLY · REALIZACE · LIGHTBOX ·

O KLIENTOVI

Amarosi s.r.o. je český výrobce prémiových bazénových zastřešení se sídlem v Olomouci. Firma se specializuje na výrobu a montáž hliníkových zastřešení s polykarbonátovými výplněmi — od nízkých nepodchozích po vysoká podchozí a kombinovaná řešení.

S více než 600 realizacemi po celé České republice i na Slovensku a 10+ lety zkušeností patří Amarosi mezi zavedené hráče na trhu bazénových zastřešení.

600+Realizací
10+Let zkušeností
9Modelů zastřešení
99%Spokojenost

VÝCHOZÍ STAV — STARÝ WEB

Starý web (amarosi.cz) trpěl řadou zásadních problémů, které bránily firmě v efektivní online prezentaci a získávání poptávek.

KRITICKÉ

Fixní šířka ~500px

Web zobrazoval na desktopu úzký sloupec — na Full HD monitoru zůstávalo 70% plochy nevyužito. Mobilní layout na velkém monitoru.

KRITICKÉ

Zastaralý design (2010–2015)

Modrošedé gradienty, abstraktní vlnkové vzory na pozadí. Žádné moderní vizuální prvky, žádný glassmorphism.

KRITICKÉ

Poptávkový formulář bez UX

Dlouhý jednosloupcový formulář na samostatné stránce. 15+ polí naráz, materiály přes dropdown bez náhledů.

Žádné animace

Plně statický web bez jakýchkoli hover efektů, scroll animací nebo přechodů.

KRITICKÉ

Galerie bez lightboxu

Kliknutí na fotku v galerii otevřelo surový .webp soubor přímo v prohlížeči. Žádná navigace mezi fotkami.

Žádný responsivní design

Web neměl žádné breakpointy — stejný úzký layout na mobilu i desktopu bez přizpůsobení.

VIZUÁLNÍ SROVNÁNÍ

Přepínejte mezi záložkami PŘED a PO a podívejte se, jak dramatická je vizuální proměna.

Homepage — Hero sekce

Nový web Amarosi — homepage
Starý web Amarosi — homepage
PŘEDPO
Starý web Amarosi — homepage
Nový web Amarosi — homepage

Produktová stránka — Yndy

Nový web — produktová stránka Yndy
Starý web — produktová stránka Yndy
PŘEDPO
Starý web — produktová stránka Yndy
Nový web — produktová stránka Yndy

Galerie realizací

Nový web — Bento Grid s lightboxem
Starý web — základní thumbnail grid
PŘEDPO
Starý web — základní thumbnail grid
Nový web — Bento Grid s lightboxem

Kontaktní stránka

Nový web — profesionální dvousloupcový layout s formulářem
Starý web — jednoduchý výpis kontaktů
PŘEDPO
Starý web — jednoduchý výpis kontaktů
Nový web — profesionální dvousloupcový layout s formulářem

Poptávkový konfigurátor

Nový web — multi-step konfigurátor s vizuálním výběrem
Starý web — jednoduchý formulář s 15+ poli naráz
PŘEDPO
Starý web — jednoduchý formulář s 15+ poli naráz
Nový web — multi-step konfigurátor s vizuálním výběrem

CO JSME VYTVOŘILI

Nový web je postaven od základů jako moderní webová aplikace. Obsahuje 14 stránek, 2 API endpointy, 4 e-mailové šablony, vizuální materiálový konfigurátor a multi-step poptávkový formulář.

14 stránek

Homepage, sortiment, realizace, materiály, kontakty + 9 produktových stránek.

9 produktových stránek

Každý model má hero, popis, výhody, tech. výkres, galerii, materiály a formulář.

4-krokový konfigurátor

Multi-step poptávkový formulář integrovaný přímo v produktové stránce.

100+ fotografií

Bento Grid galerie s fullscreen lightboxem a navigací mezi fotkami.

4 e-mailové šablony

Brandované HTML e-maily: potvrzení poptávky, kontakt — zákazník i firma.

Materiálový konfigurátor

13 klikacích karet s fotografiemi místo dropdown selectů.

Google Maps

Embedded mapa provozovny s overlay kartičkou a navigací.

Sdílená architektura

ProductPage.tsx — jedna komponenta pro všech 9 modelů, data-driven rendering.

PODROBNÉ SROVNÁNÍ

Design & Vizuální identita

Styl
Zastaralý (2010–2015), modré gradienty
Moderní glassmorphism, pixel-perfect z Figma
Font
Systémový Arial, malé písmo
Google Fonts (Inter + Geist) — optimální čitelnost
Animace
Žádné (plně statický)
10+ typů (scroll, counter, hover, parallax…)
CTA tlačítka
Základní obdélníky s border
Gradient CTA s hover animacemi
Navigace
Jednoduchý textový overlay
Sticky glassmorphism navbar se scroll detekcí
Karty
Box-shadow obdélníky
Glassmorphism s backdrop-filter: blur(12px)

Layout & Responzivita

Desktop layout
Fixní šířka ~500px (70% plochy nevyužito)
Plná šířka viewportu s inteligentním max-width
Breakpointy
0 breakpointů
4 breakpointy (1200/900/768/480px)
Mobilní menu
Textový overlay seznam
Hamburger s fullscreen slide-in animací
Hero sekce
1 statická fotka, žádné CTA
Fullscreen hero s gradient overlay a 2× CTA
Footer
Jednoduchý textový patička
4-sloupcový sdílený footer se všemi modely

Poptávkový formulář

Umístění
Samostatná stránka (/poptavka.php)
Integrovaný přímo v produktové stránce
Struktura
15+ polí naráz v jednom sloupci
4 jasné kroky s progress barem
Materiály
Dropdown select seznamy
Klikací karty s fotografiemi (13 variant)
Přístup
Formulář-first (kontakt na začátku)
Customer-first (produkt → kontakt v kroku 3)
Souhrn
Žádný
Kontrola všech údajů před odesláním

Galerie realizací

Layout
Základní thumbnail grid
Bento Grid s asymetrickým layoutem
Klik na fotku
Otevře surový .webp soubor
Fullscreen lightbox s prev/next
Navigace
Žádná
Quick navigace s thumbnail náhledy modelů
URL
Ploché
Hash-based (#yndy, #katrine…)
Počet fotek
~40
100+

SEO & Technické

URL struktura
/pages/yndy.php, .html koncovky
Čisté SEO URL (/yndy, /sortiment)
Meta tagy
Základní nebo chybí
Title + description + OG na každé stránce
Open Graph
Chybí
OG image 1200×630, title, description
Sémantické HTML
Bez section, nav, footer
Kompletní sémantická struktura
Framework
Statické HTML + PHP
Next.js 16 + React 19 + TypeScript
Obrázky
Mix formátů, neoptimalizované
100+ WebP s lazy loading přes Next.js Image

TECHNOLOGICKÝ STACK

Next.js 16App Router
React 19React Compiler
TypeScript 5Type-safe
Vanilla CSS6 400+ řádků
NodemailerSMTP e-maily
SharpImage optimalizace
TurbopackRychlý HMR
VercelEdge deploy + CDN

VÝSLEDKY V ČÍSLECH

14Stránek celkem+17% oproti starému webu
100+Fotografií v galeriích+150%
9Produktových stráneksdílená architektura
4Kroky formulářemísto 1 dlouhého
13Materiálových vzorků+30% oproti selectům
6 400+Řádků CSS+700%
4E-mailových šablon+300%
4Breakpointyresponsivní design

NOVÉ FUNKCE

Funkce, které starý web vůbec neměl a které jsme vytvořili zcela od nuly.

01

4-krokový poptávkový konfigurátor

Vizuální multi-step formulář integrovaný přímo v produktu. Konfigurace → Materiály → Kontakt → Souhrn. Customer-first přístup.

02

Vizuální materiálový konfigurátor

13 klikacích karet s fotografiemi místo dropdown seznamů. Povrchové úpravy, polykarbonát a barvy kolejnic.

03

Bento Grid galerie s lightboxem

Asymetrický grid layout pro vizuální atraktivitu. Fullscreen lightbox s prev/next navigací a počítadlem fotek.

04

Sdílená ProductPage architektura

Jedna univerzální komponenta pro všech 9 modelů zastřešení. Data-driven rendering — žádný duplicitní kód.

05

Brandovaný e-mailový systém

4 HTML šablony s Nodemailer — potvrzení poptávky a kontaktu pro zákazníka i firmu. Inline CSS, MSO kompatibilita.

06

Glassmorphism navigace

Sticky navbar s backdrop-filter blur efektem podmíněným scrollem. Hamburger menu s fullscreen overlay a slide-in animací.

07

Animovaný model carousel

Split-card carousel na homepage s filtrováním modelů (Nízké/Vysoké/Kombinované), thumbnail navigací a animovanými statistikami.

08

Plně responsivní design

4 breakpointy (1200/900/768/480px) s přizpůsobeným layoutem pro každé zařízení — od 4-sloupcového gridu po single-column na mobilu.

Nový web posouvá Amarosi na úroveň prémiového výrobce bazénových zastřešení s celorepublikovým dosahem.

Z úrovně „statický web z roku 2010 s fixní šířkou 500px" na úroveň odpovídající firmě s 600+ realizacemi a 10+ lety zkušeností na trhu.

POTŘEBUJETE PODOBNOU PROMĚNU?

Ať už jde o kompletní redesign, nový web, nebo webovou aplikaci na míru — rádi si poslechneme vaše potřeby a navrhneme řešení.

NEZÁVAZNÁ KONZULTACE