← Svi hoteli
💎 Luxury · standalone

Zepter Hotel Belgrade, member of Zepter Hotels

Draft Beograd, RS ★ 4
↗ Preview
🏚️ Stari sajt — audit
4 frames Vision-om

Postojeći hotel sajt

https://hotelzepter.rs
Era: 2018-2020. Struktura je WordPress Elementor free template, bez custom motion language karakteristike za 2023-2024 luxury hotel segment.
Redesign direction: Transformisati sajt iz static 2018 WordPress template-a u premium luxury hospitality experience sa tihem motion language (fade-in headlini na scroll, parallax za hero, staggered image reveals) — zadržati gold + geometric language kao anchor.
✓ Strengths (zadržati)
  • Čista, neprekombinirana boja paleta (crna + gold + bela) — lako je raditi sa njom
  • Geometric border system je čitljiv i može se skalirati
  • Newsletter + social links footer je funkcionalan i standardan
  • Datumski widget za booking je pravi CTA (nie loose)
  • Logo je diskretno pozicioniran, ne dominira
✗ Weaknesses (zameniti)
  • NEMA scroll animacija ili motion — sajt je vizuelno statičan i dosadan za 2024
  • Hero je generički (gate slika + dating picker — videti se na svakom hotel sajtu)
  • Breakfast slika je marketing-y, nema storytelling-a — trebalo bi luxury food photography
  • Therapy/treatment sekcija je samo 'informativna', nema luxury experience messaging
  • Footer je ozbiljan ali bland — nedostaje emocija ili premium osećaja
🏷️ Brand signals
Minimalističan gold akcenat (#c4a747) samo na dugmetu i razdelnicamaGeometrijski line-art border detalji (repeating pattern u corner-ima sekcija)Gate/ulazni motif kao simbolika (luxury hospitality visual language)Best Rate Guarantee logo sa shield ikonicom (trust signal, retro stil)Srpski jezik kao primarni — lokalni premium positioning
🎨 Trenutna paleta
Typography: Tradicionalna sans-serif, visoki kontrast, retko korišćena size hijerarhija. Headeri debeli, brody tekst srednje težine bez karaktera.
Layout: Hero sa dating widget-om → Promo sekcija → Content grid sa slikom/tekstom → Footer sa newsletter. Linearna, bez preklapanja ili dinamičkog flow-a.
Hero: Full-width background slika sa gate/ulazom, overlay sa check-in/check-out datumima i teal 'BOOK NOW' dugme. Statična bez animacija.
Image treatment: Obične, statične fotografije sa minimalnim obradom. Jedna hero slika, jedna breakfast promo slika, jedna therapy treatment slika. Bez masking-a, effects-a ili dinamičkog loading-a.
⚡ Detektovani efekti + DOM signali
Sajt je vizuelno statičan i daje late-2010s WordPress feel — bez ikakve motion language ili scroll behavior. Redesign mora da uvede lazy-loaded image reveals, subtle parallax na hero i therapy sekcijama, staggered fade-in-a na tekst headlini-e, i custom hover states na interactive elementi-ma (dating widget, social links, cards). Ovo će transformisati sajt iz 'template-like' u 'premium custom experience' bez drastične boja ili tipografije promene.
JS biblioteke (DOM-detected)
Swiper (carousels)Splide (carousels)WordPress
Scroll: Native scroll bez smooth-scroll CSS. Nema parallax-a, nema sticky navbar-a (samo 1 sticky element detectovan ali nije vidljiv u flow-u). Sve sekcije su static block — nema transformacija tokom skrolovanja.
Hover: Samo default browser hover na linkovima. BOOK NOW dugme verovatno ima opacity change ali nije vidljivo iz screenshot-a. Nema custom transitions na card-ima ili image hover-a.
Transitions: CSS transitions su na 24 card elementa (verovatno default Elementor hover effect — opacity 0.7-0.8). Bez kubnih timinga ili spring animacija.
Scroll anims: Apsolutno NEMA. Nema fade-in-a na scroll, nema parallax-a, nema transform-a, nema sticky section-a. Sve je hardcoded bez @keyframes za user scroll events.
Video/Motion: 2 video elementa detectovana u DOM-u — verovatno u Damira Sertića sekciji (therapy treatment demo) + possible background video u nekom footer-u. Nema Lottie animacija.
Raw DOM signali ▾
@keyframes (10): sbi-sk-scaleout, fa-spin, show-content-image, turn-on-visibility, turn-off-visibility, lightbox-zoom-in, lightbox-zoom-out, overlay-menu__fade-in-animation…
Anim CSS klase: parallax, animate
Cards sa CSS transition: 24 · Sticky/fixed: 1 · SVG: 3 · Video: 2 (+ 0 iframe)
✓ smooth-scroll · ✗ default cursor · ✗ no WebGL
What to keep
Gold akcenat, geometrijski border detalji, čista tipografija i srpski language positioning — ovo su authentični brand foundation.
What to replace
Statičnu hero sliku sa nečim manje generičkim (ili čak video-om); dodaj scroll reveals i subtle parallax; upgrade therapy/dining imagery u luxury editorial stil; uvedi micro-interactions na booking widget-u.
🏆 Reference sajtovi — deep Vision

Inspiracija (1 OK / 1 ukupno)

www.metropolpalace.com ↗
4 frames
Paleta
Typography: serif display za headinge (elegantna, uzvišena) + sans-serif za body tekst, visok kontrast između naslova i sadržaja, kerning pristup luxury brenda
Layout: hero fullscreen sa centered text overlay → horizontalni carousel sekcija sa image tile-ovima → amenities sekcija sa left image/right text, staggered layout → meeting/events sekcija sa dual image layout → footer sa tri kolumne + newsletter signup
Hero: fullscreen background hotel corridor/entryway sa centered white serif heading 'EXPERIENCE A STUNNING HOTEL', dva call-to-action dugmeta (BOOK WITH US, DINE WITH US) sa inverted bg/text styling, subtle dark overlay za kontrast
Image treatment: fotografije u pravilnim grid sekcijama, bez zaobljenih углова, krupne do fullscreen width, koristi se image tint/overlay za kontrast sa tekstom (poluprozirni dark overlay), carousel sa snap points
Spacing: mixed — hero je tight (tekst blizu ivica), middle sekcije airy sa white space-om između image grid-a i teksta, footer compressed sa gustim linkovima
Footer: dark brown background (#3d3238), tri-kolumni layout sa copyright + kontakt info, legal linkovi (Terms, Privacy, Pet Policy), newsletter signup sa email input polje + Subscribe dugme, Michelin Guide badge u levoj kolumni, scroll-to-top ikona u desnoj
Section patterns
Carousel image showcase sa bočnim scroll indicatorima (mobile-first responsive)Amenities heading + fotografija sa tekstom u grid-u, mixed alignmentEvent planning sekcija sa dual full-width slike sa geometric overlay tekstomFooter sa Michelin Guide badge, kontakt info + tri kolumne linkova
Notable elements
  • Sticky/fixed header sa logo i hamburger menu na desktop
  • Two persistent CTA buttons (BOOK WITH US, DINE WITH US) na kraju svake sekcije
  • Newsletter subscription form u footer-u sa email input poljem
  • Michelin Guide badge (prestiž signal) u footer kolumni
  • Lottie animirana EV charger ikona sa text 'Power up your ride with our EV charger service'
  • Social media ikone (FB, Instagram, LinkedIn) u footer-u sa link struktuom
★ What to steal
  • Fullscreen hero sa centered serif heading + dva kontrastna CTA dugmeta sa inverted styling — jednostavno, moćno, konverziono
  • Carousel sa snap points i side scrollability umesto klasičnog slider-a — natural mobile interaction
  • Mixed image layout (carousel → side-image-text → dual full-width) umesto monotone grid-a — vizuelna raznovrsnost bez kaosa
⚡ Effects + animation
Sajt deluje miran i cinemaatski — hero sa fixed background kreira parallax effect tokom inicijalne scroll interakcije, svi image grid-ovi imaju fade-in reveal animacije dok se uđe u viewport, CTA dugmeta i linkovi imaju micro-interaction hover states sa color/shadow transitions. Lottie animacija EV charger-a dodaje suptilan motion akcenat bez da remeti minimalistički dizajn. Motion language je 'restrained elegance' — sve animacije su suptilne, brze (0.3-0.6s), i namenjene da pojačaju readability i engagement bez visual chaos-a.
LottieSwiper (carousels)WordPress
Scroll: smooth native scroll sa fade-in efektima na image sekcijama dok se scrolluje, hero je fullscreen sa fixed background što daje parallax efekat tokom prvog scroll-a, sekcije se fade-in-uju sa opacity/translateY animacijama kada uđu u viewport, sticky nav ostaje dostupan tokom celog scroll-a
Hover: CTA dugmeta imaju subtle background color shift ili border highlight na hover (inverted style), image karticama hover-uje sa suptilnim zoom ili shadow expansion, linkovi u navigaciji/footer-u imaju color transition na hover
Transitions: CSS transition na svim hover states (~0.3s ease), button state changes sa color/bg-color transition, image hover zoom sa ~0.6s cubic-bezier easing, opacity fade za reveal animacije (~0.4-0.8s)
Scroll anims: CSS @keyframes za fade-in (fadeTop, fadeBottom, fadeLeft, fadeRight, fadeIn), multi-view-image-fade animacija na carousel-u, 54 CSS transition elementa što sugeriše da je svaka kartica/sekcija animirana na scroll trigger, sticky nav element (#2) ostaje fixed tokom scrollanja sa position sticky CSS-om, reveal pattern je fade + vertical translate (fade-up)
Video/motion: Nema video elemenata detektovanih (<video> = 0, iframe video = 0), ali Lottie animirana ikona (EV charger) sa loop motion, sve je statička slika + CSS animation
Raw DOM ▾
@keyframes: sbi-sk-scaleout, fa-spin, multi-view-image-fade, fadeBottom, fadeLeft, fadeRight…
cards-transition: 54 · sticky: 2 · SVG: 2
✨ Tiho luksuzna, cinemaatska, namerna — brend koji govori kroz arhitekturu i detalje, target su iskusni putnici koji cene kvalitet preko buke.
Vision audit: Ova analiza je input za Faza C template-generator. AI brief (theme + brand_colors + design_brief + homepage_sections) je generisan kombinacijom ovih signala + PHOBS metadata + scraped sadržaja.