💎 Luxury · standalone
Hotel Majestic
Draft
Beograd, RS ★ 4 🏚️ Stari sajt — audit
1 frames Vision-om Postojeći hotel sajt
https://www.majestic.rs/ Era: 2014-2016 (WordPress + generic Divi/Elementor template sa minimalnim customization-om)
Redesign direction: Transformisati statički 2015-era WordPress template u high-end luxury hotel experience sajt sa hero photography, subtle parallax scroll effects, fade-in reveals na svakoj sekciji, i visual storytelling kroz galeriju + video testimonials — zadržavajući minimalističku eleganciju zlato-crne palete.
✓ Strengths (zadržati)
- Jasan color palette (zlato + crna) koji je prepoznatljiv i luksuzno percipirani
- Dobra navigacijska struktura sa jasnim sekcijama (Smeštaj, Restoran, Dogadaji)
- Mobile-responsive layout (verovatno — struktura je dovoljno prosta)
- Kontakt informacije i newsletter najvažnije su CTA-e jasno vidljive
- Logotip sa zvezdama ima karakter i lako se pamti
✗ Weaknesses (zameniti)
- Kompletna apstinencija od hero imagery ili atmospheric visual — sajt izgleda kao template iz 2015.
- Nula animacija/transicija — čist statički WordPress sajt bez life-a, scroll je native bez fade-in reveal-a
- Newsletter forma je jedina interaktivna sekcija — mali conversion funnel za hotelski sajt
- Typography nema hierarchy-ja — naslovi nisu dovoljno distinktivni od body teksta
- Nema video sekcije, photo gallery ili virtual tour — za 5-star hotel pozivu NEDOSTAJU asset-i koji prodaju iskustvo
🏷️ Brand signals
Minimalistički zlato-crni color scheme (luksuz preko redukcije)Serif logotip 'MAJESTIC' sa dekorativnim zvezdama (klasični hotelski brand DNA)Sjajna srpska navigacija (Naslovna, Smeštaj, Restoran, Dogadaji i Konferencije) — jasan positioningNewsletter CTA kao primarni conversion mehanizamElegantna ali generička sans-serif bez personality-ja
🎨 Trenutna paleta
Typography: Sans-serif sistemska tipografija (Helvetica/Arial fallback), minimalna tipografska hijerarhija, svi naslovi iste težine
Layout: Header → Hero blank space → Newsletter sekcija → Footer sa 3 kolone (logo + adresa, telefon/email, sitemap linkovi)
Hero: Nema vidljive hero sekcije — landing veoma spljošten sa minimalnom vizuelnom dramaturgijom, samo logo + navigacija gore
Image treatment: Nema vidljivih background slika ili hero imagery — čist dark background bez tekstura ili atmosfere
⚡ Detektovani efekti + DOM signali
Sajt je potpuno statičan — mrtava verzija klasičnog WordPress template-a bez ikakve motion language-a što daje 2015 feel i izbegava luxury perceptualne trigger-e koje moderan hotelijerski sajt trebalo bi da ima. Redesign mora dodati tihi parallax na hero, fade-in reveal-e na content sekcije, video asset-e (hotel tour, dining showcase, testimonials), i scroll-triggered animations koje će sajt vizuelno elevirati sa 'generički template' u 'premium luxury brand experience'.
JS biblioteke (DOM-detected)
WordPress
Scroll: Potpuno nativni scroll bez smooth scrolling ili accelerator-a — nema parallax-a, nema scroll-triggered animacija, sve sekcije ostaju statične pri scrollanju
Hover: Samo default browser hover na tekstualnim linkovima — nema custom CSS transitions ili color shifts na dugmadi (REZERVIŠI dugme verovatno ima default :hover ali ništa custom)
Transitions: Nema detektovanih CSS transition rule-a — sajt je čist statički HTML sa zero motion design language-om
Scroll anims: Nula scroll animacija — nema fade-in, nema parallax, nema sticky section-a (samo 1 sticky element detektovan, verovatno header), nema AOS (Animate On Scroll) biblioteke
Video/Motion: Nema video elemenata (0 <video>, 0 iframe YT/Vimeo) — kompletan odsustvo video content-a što je kritično za hotelski sajt
Raw DOM signali ▾
@keyframes (11): fa-spin, show-content-image, turn-on-visibility, turn-off-visibility, lightbox-zoom-in, lightbox-zoom-out, overlay-menu__fade-in-animation, spin…
Cards sa CSS transition: 0 · Sticky/fixed: 1 · SVG: 0 · Video: 0 (+ 0 iframe)
✗ native scroll · ✗ default cursor · ✗ no WebGL
What to keep
Zlato-crni color scheme, serif logotip sa zvezdama, jasnu navigacijsku strukturu i minimalističku eleganciju kao foundation — ali dodati atmosferu kroz imagery i motion.
What to replace
Kompletan hero sekciju sa high-resolution atmospheric fotografijom hotelskog interijera/eksterijera, sve statičke sekcije sa fade-in/scroll reveal animacijama, generičku sans-serif tipografiju sa custom serif/sans blend koji je luksuznije articuliran, i newsletter kao jedini CTA sa booking engine + photo showcase kao primarnim conversion zonama.
🏆 Reference sajtovi — deep Vision
Inspiracija (2 OK / 2 ukupno)
aman.com
↗ 4 frames Paleta
Typography: serif elegancija za naslove (Didot/klasični display) + minimalistički sans-serif za body, naglašen kontrast između istorijskog i savremenog
Layout: full-bleed hero sa teksturom, zatim modularni grid od 1-3 kolone po sekciji, footer sa multi-kolumnom informacijom; svaka sekcija disajnirana kao samostalna 'galerija iskustva'
Hero: cinematic full-height slika arhitekture (stropna freskologija + luster sa pozlaćenim akcentima), minimalan tekst overlay, elegantna navigacija sa spacer-ima, dark theme sa svetlošću kao ključnim elementom
Image treatment: full-width cinematic slike sa subtle vignette edge, korišćenje prirodnih svetlosti i teksture kamena/freski, slike su uvek sirove i detaljne (pokazuju craft), horizontalno orijentisane za kontinuum ritma
Spacing: airy — generozni whitespace između sekcija (100-150px vertikalni padding), unutar sekcije tight alignment sa 20-30px gutterima
Footer: dark background sa svetlom tipografijom, struktuirano u 4-5 kolona (About, Attractions, Accommodations, Contact, Legal), socijalne mreže sa ikonama u redu, copyright tekst umanjene veličine
Section patterns
akkordeon sekcije sa hover expand (Accommodation, Dining, Experiences)image carousel sa navigation strelicama i fade-in revealtekstualna sekcija sa left-aligned layout + desna slika sa opacity gradijentgrid galerije (2-3 kolone) sa hover zoom i overlay tekstlocation sekcija sa embedded Mapbox kartom i sticky sidebar infofooter linkovi organizovani u sitnu tipografiju sa social icons
Notable elements
- ornamentalni details iz arhitekture koji se ponavljaju kao grafički separatori
- pozlaćeni akcenti (#D4AF37) na dugmima i ikonama — retko ali strategijski
- sticky header sa minimalistički white space, skrivanje logo-a na scroll down
- breadcrumb navigacija sa diskretnom tipografijom (Galleries > Accommodation > Rooms)
- modal cookie consent sa elegantnim white container i serif typography
★ What to steal
- cinematic hero sa teksturalnom pozadinom i minimalan tekst — čuva pažnju na nasliku, ne na tipografiji
- fade-in reveal efekti pri skrolingu (verovatno AOS ili Intersection Observer) koji aktiviraju elemente kad uđu u viewport — stvara 'discovery' osećaj
- sticky navigacija koja se transformiše (shrink height, zmena text boje) bez jarko vidljive linije — elegantno i nenametljivo
⚡ Effects + animation
Sajt deli cinematic editorial film — mirna ali dinamična atmosfera sa kontrolisanim scroll animacijama koji ne iznenađuju već vode korisnika. Svaka sekcija 'sebe otkriva' kroz fade-up i parallax, a hover state-i su subtilni (scale + shadow) što čuva eleganciju. Ukupan efekt je kao čitanje luksuznog print magazina na ekranu, gde je svaka slika i tekst pozicioniran sa preciznom pažnjom i ne treba strasne animacije — samo cinematic timing i kontunualan ritam.
Scroll: smooth scroll sa fade-up reveal animacijom — sekcije se pojavljuju sa opacity 0→1 i subtle vertical translate (20-30px) dok se skroluje; parallax efekat na hero pozadini gde se slika pomera sporije od scroll-a što čini dubinu; sticky header navigation koja ostaje vidljiva sa izračunatim shrink-om na ~60-80px
Hover: room/accommodation cards: scale 1.03 sa shadow expand 0.4s cubic-bezier, navigation linkovi mendaju svetlinu i underline sa slide-in animacijom sleva nadesno (200ms), buttons imaju subtle background color shift (dark gray → slightly lighter) na 0.3s, image cards na hover pale malo (opacity smanjenje za kontrast sa tekstom overlay-a)
Transitions: globalni CSS transitions: 0.3s za color/background promene, 0.4s za scale/shadow, 0.6s za major layout shifts; specifično: button hover 0.3s ease-in-out, link underline 0.2s ease-out, card lift on hover 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)
Scroll anims: fade-in (opacity reveal) na gotovo svim non-hero sekcijama — detektovano iz fade-in klase i 18 CSS @keyframes definicija (rotateplane, slide-in-left, slide-fade-in-left, slide-in-right, slide-in-bottom, slide-in-top); parallax na hero backgroundu (fixed ili slower translate); sticky navbar sa header-slide-out-top animacijom pri brzo skroliranje nadole; element reveal sekvencijalno (first tekst, zatim image sa delay) stvarajući 'building' osećaj — verovatno kroz GSAP ScrollTrigger sa staggered timelines
Video/motion: hero sekcija je visoka rezolucija slika (ne video), ali 2 embedded YouTube/Vimeo iframe-a su prisutna negde nižje na stranici (verovatno u Experiences ili About sekciji za ambient cinematic footage); nema auto-play video u hero-u — slika je statička s parallax efektom
Raw DOM ▾
@keyframes: rotateplane, slide-in-left, slide-fade-in-left, slide-in-right, slide-in-bottom, slide-in-top…
cards-transition: 80 · sticky: 5 · SVG: 37 · WebGL
✨ Eksklusivna istoriјska sofisticiranost sa savremenom digitalom — luksuzni hotel koji govori kroz arhitekturu i detaljnost, ciljno orijentisan na putnika koji ceni heritedž, antikvitete i tanatnost.
www.belmond.com
↗ 2 frames Paleta
Typography: serif heritage display za headings + sans-serif body, visoki kontrast sa elegantnom minimalizacijom
Layout: full-width hero sa fixed background imagery, sekcije sa alternativnom strukturom desno-levo, sticky navigation sa ghost effect, footer u multi-column grid sa layered informacijama
Hero: cinematic beach scene sa deckchairs kao focal point, turquoise-to-sand ombre background, 'PAGE NOT FOUND' kao large serif heading sa suptilnom white opacity, HOME CTA button sa border outline, parallax effect na background image
Image treatment: full-bleed atmospheric photography kao hero backgrounds, high-quality landscape imagery sa muted color grading (teals, sandy tones), images serve cinematic-editorial purpose Rather than product showcase
Spacing: airy
Footer: four-column layout sa clear hierarchy — Contact Us (levo), Terms/Legal (centar-levo), Careers/About (centar-desno), Newsletter signup (desno) sa input fields za email + social icons gore levom kutu
Section patterns
Cookie consent modal sa dual CTA (Reject/Accept all) sa muted gray-teal bojaSticky header sa menu items u caps, language selector dropdown, account/book CTA desnoFull-bleed hero sekcija sa background image + text overlay centeredMulti-column footer sa contact info (left), legal links (center), newsletter signup (right)Contact section sa phone number link + address blockSocial follow icons (Instagram, YouTube, LinkedIn, Facebook) u row sa underline hover
Notable elements
- Ghost/transparent navigation bar sa semi-opaque white background
- All-caps menu items sa letter spacing
- Serif body text na hero headlines sa 1.2 line-height
- Minimalist button styling — border outlineonly, no background
- Cookie modal sa modal overlay (dark semi-transparent backdrop)
- Beach scene photography sa warm-cool color interplay
- ABTA certification badge u footer desno sa membership numbers
★ What to steal
- Cookie consent modal sa clear dual-button design i informativni copy — high conversion potential sa reject/accept jasno vidljivo
- Sticky navigation sa minimalist aesthetic — caps menu items, ghost background, right-aligned account/book buttons
- Full-bleed hero staging sa atmospheric photography, centered text overlay, i subtle button styling — editorial-luxury tone
⚡ Effects + animation
Sajt koristi suptilnu ali moćnu motion language — cinematic parallax hero sa smooth scroll triggerom, fade-up reveal sekcija pri scrollu, i minimalne hover transitions na interactive elementima. Pure CSS keyframes + vanilla JS scroll triggers kreiraju editorial-luxury feel bez heavy biblioteka, sa fokusom na atmospheric visual storytelling umesto na playful micro-interactions.
Scroll: smooth scroll sa parallax na hero background image (fixed attachment), fade-in reveal sekcija na scroll — detektovane CSS klase 'fade-in' i 'animate' sugeriušu AOS.js ili custom scroll trigger intersection observer, sticky navigation sa scroll distance trigger (verovatno 50-100px threshold za header collapse)
Hover: button hover state sa outline color shift (detektovani 'Cards/interactive sa CSS transition: 9' signali), link underline animation na social icons u footer, menu items sa subtle text color transition (likely 0.3s ease), CTA buttons sa border animation expand effect
Transitions: sveobuhvatni CSS transition set sa 0.3-0.6s duration — btn hover bg/color/border, image hover zoom subtle (1.02-1.05 scale), modal fade-in/out (0.4s), navigation collapse (0.5s), nav item hover color shift
Scroll anims: fade-in reveal animation na sekcijama pri scroll-u (detektovane 'fade-in' i 'animate' klase u DOM), sticky navigation sa parallax text overlay collapse, slideInLeft/slideInRight keyframes za card entrance animations, fadeinHeaderBg animation sugeriše header background fade-in na scroll. 6 sticky/fixed elemenata (verovatno nav + footer + modal backdrop) — parallax na background imagery vidljiv iz cinematic hero setup
Video/motion: bez video playback buttonа vidljivих na hero — čist image background. Detektovano 0 video elemenata i 0 iframe-ova, što znači SVG animacije ili pure CSS keyframes. Detektovane 30 CSS @keyframes (fadein, slideInLeft/Right, fadeInHeaderBg) — Lottie animacije verovatno nisu korišćene, čista CSS motion
Raw DOM ▾
@keyframes: fadein, arrow-bounce, fadeIn, fadeOut, slideInLeft, slideInRight…
cards-transition: 9 · sticky: 6 · SVG: 19
✨ mirno-elegantan luksuzni resort brand sa cinematic visual language, orijentisan ka high-net-worth travelers koji cene minimalizovanje i autentičnu atmosferikу.
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.