Moderní webové stránky pro přední oční kliniku v Plzni
Komplexní webová platforma postavená na Next.js 14 s důrazem na UX, konverze a flexibilní správu obsahu. Vícejazyčná prezentace s pokročilými funkcemi pro rezervace a edukaci pacientů.
Klient
OFTA s.r.o.
Odvětví
Zdravotnictví
Role
Full-stack Development
Launch
Prosinec 2024
O projektu
Klient a cíl
OFTA s.r.o. je renomovaná oční klinika s 32letou historií, specializující se na laserové zákroky a mikrochirurgii oka. Provozuje centra v Plzni a Chebu.
Cílem bylo modernizovat web s důrazem na mobile-first přístup, konverze pacientů a vytvoření důvěryhodné prezentace expertního týmu. Součástí bylo i vytvoření CMS systému pro snadnou správu obsahu.
Scope
- ✓Kompletní redesign a UI/UX optimalizace
- ✓Technická migrace na moderní Next.js 14 stack
- ✓Vícejazyčná podpora (CZ/DE) s next-intl
- ✓Integrace Strapi CMS pro správu obsahu
- ✓Formulářové systémy s validací a email zasíláním
- ✓SEO optimalizace a schema markup
Technologie
Framework
Next.js 14 App Router
Styling
Tailwind CSS
Animace
Framer Motion
Forms
React Hook Form + Zod
UI Components
Radix UI
CMS
Strapi (Headless)
Nodemailer
i18n
next-intl (CS/DE)
Design systém a branding
Klíčové principy
Medicínská důvěryhodnost
Čistý, profesionální design s důrazem na serióznost a odbornost. Minimalistický přístup s dostatkem bílého prostoru.
Typografie
Montserrat – moderní geometrický font s vynikající čitelností, ideální pro zdravotnické prostředí.
Animace a interakce
Jemné Framer Motion přechody, které podporují orientaci uživatele bez rozptylování. Smooth scrolling a micro-interactions.
Barevná paleta
OFTA Blue 900
#0E1F3F
Primární tmavá
OFTA Blue 600
#1D3E7A
Sekundární
OFTA Blue 450
#4F7ACF
Světlejší akcent
OFTA Blue 300
#63B8E8
Jasný akcent
OFTA Aqua
#63D1C4
Call-to-action
OFTA Gray
#F5F5F5
Pozadí
Klíčové stránky a funkce
Homepage
/
- •Video hero background s fallback obrázky
- •Dynamické načítání novinek ze Strapi CMS
- •Testimonial carousel s auto-play
- •Prezentace týmu lékařů
- •Služby v responzivní grid layout
Laserová korekce zraku
/laserova-korekce-zraku
- •Detailní edukační obsah
- •FAQ sekce s expandable položkami
- •Video testimonials
- •Schema.org markup pro SEO
Léčba šedého zákalu
/lecba-sedeho-zakalu
- •Konverzně optimalizované CTA
- •Showcase přístrojového vybavení
- •Before/after testimonials
- •Detailní popis procesu
Objednávka
/objednejte-se
- •Tabbed interface (Rezervace, Dotaz, eRecept)
- •URL state management (?tab=reservation)
- •React Hook Form s real-time validací
- •Email odesílání přes Nodemailer API
Náš tým
/nas-tym
- •Detailní profily lékařů
- •Foto, tituly, specializace
- •Expandable bio s kvalifikacemi
- •Důvěryhodná prezentace
Aktuality
/aktuality
- •Dynamic content ze Strapi CMS
- •Pagination
- •Detail stránky s rich text
- •Kategorie a tagy
Screenshots
Strapi CMS – Flexibilní správa obsahu
Pro OFTA jsme implementovali pokročilé řešení správy obsahu pomocí Strapi CMS, které umožňuje týmu kliniky snadno spravovat všechny informace bez technických znalostí.
Alert Dialog systém
Globální alertní upozornění pro urgentní sdělení pacientům, spravované přes CMS s možností aktivace/deaktivace.
Správa aktualit
Publikování novinek s rich text editorem, nahráváním obrázků, SEO meta daty a verzováním obsahu.
Výzvy a řešení
Výzva
Velké video soubory pro hero
Řešení
Transcode do moderních formátů (WebM, MP4), lazy loading, fallback obrázky a detekce viewportu pro kontrolu přehrávání.
Výzva
Vícejazyčnost (CZ/DE)
Řešení
Implementace next-intl s automatickou detekcí jazyka, lokalizovanými routami a CMS integrací pro překlady.
Výzva
Správa medicínského obsahu
Řešení
Strapi CMS s custom content types, taxonomy pro zákroky a indikace, workflow pro schvalování a role management.
SEO optimalizace
- ✓Schema.org markup pro lékařské služby, FAQ a organizaci
- ✓Strukturovaný sitemap pro všechny stránky a jazykové verze
- ✓Custom meta tags management přes CMS
- ✓Canonical URLs a hreflang tagy pro i18n
- ✓Open Graph a Twitter Card optimalizace
Chcete podobný projekt?
Vytvoříme vám moderní webovou prezentaci, která přináší výsledky. Kontaktujte nás pro nezávaznou konzultaci.