🌊 Seaside · standalone
Hotel Rivijera
Draft
Petrovac, ME ★ 4 🏚️ Stari sajt — audit
1 frames Vision-om Postojeći hotel sajt
https://www.hotel-rivijera-montenegro.com Era: Недоступно да се процени — сајт је заиста у разломљеном стању; вероватно 2012-2015. WordPress инсталација која није одржавана
Redesign direction: Трансформишите у премијум хотелски сајт са типографском хијерархијом, луксузним простором, нежним scroll animacijama (parallax на хероу, fade-in карткама) и јасном CTA динамиком за резервисање.
✓ Strengths (zadržati)
- Чист, белински простор — могуће добра база за минималистички редизајн
- Брзо учитава (нема слика/видеа)
- Потенцијал за типографску хијерархију
✗ Weaknesses (zameniti)
- Страница је комплетно неупотребљива — 403 забрана, садржај не учитава
- Нема било каквог визуелног идентитета или хотелског конекста
- Морт од типографске хијерархије и спејсинга
- Одсуство сваке врсте интерактивности или бренд сигнала
- Не постоји јасна структура налетања (booking → rooms → amenities)
🏷️ Brand signals
Минималистички приступ (ако је намеран)Одсуство типског хотелског визуелног идентитета (логотип, боје)',Блага текстура светле позадинеНеопрезидентна типографија
🎨 Trenutna paleta
Typography: Системска sans-serif, вероватно Helvetica или Arial; лоша хијерархија; минимална разлика између наслова и текста
Layout: Традиционални линеарни редослед: hero → текст → белина → обавештење о забрани (403 Forbidden)
Hero: Празна страница са белом позадином и текстом 'Forbidden' у горњем левом углу — нема имаџа, икона, ни маркера идентитета
Image treatment: Одсуство слика — сајт не учитава, вероватно је разбијен или скривен иза auth-а
⚡ Detektovani efekti + DOM signali
Сајт је потпуно статичан, нефункционалан и без икаквог motion language-а — дизајнски је практично празан. Редизајн мора да убаци типографску елеганцију, луксузне слике соба, нежне scroll анимације (parallax hero, fade-in карткама, sticky nav) и јасну booking интенцију да би добио high-end хотелски осећај.
Scroll: Нема scroll понашања — страница је статична 403 грешка; нема parallax-а, нема smooth scroll-а, нема ниједне интерактивности
Hover: Одсутни — нема линкова за хават, нема кликљивих елемената
Transitions: Празно поље — нема CSS transitions детектованих
Scroll anims: Одсутне потпуно — то је критична редизајн прилика: додати fade-in за rooms, нежан parallax за hero, sticky header са navigation-ом, scroll-triggered reveals за амениتајса
Video/Motion: Никада — нема видеа, нема Лоттија, нема GIF-а, сама статична белина
Raw DOM signali ▾
Cards sa CSS transition: 0 · Sticky/fixed: 0 · SVG: 0 · Video: 0 (+ 0 iframe)
✗ native scroll · ✗ default cursor · ✗ no WebGL
What to keep
Чиста, мало загромеђена архитектура — ако је намерна, може се развити у високо елегантан минималистички хотелски дизајн.
What to replace
Буквално сво видљиво — 403 страница мора да буде заменјена са функционалним хероом, навигацијом, галеријом соба, вредностима и booking flow-ом.
🏆 Reference sajtovi — deep Vision
Inspiracija (2 OK / 2 ukupno)
aman.com
↗ 4 frames Paleta
Typography: serif heritage display (naslov visoko elegantno, suženo) + sans-serif body sa visokim contrast-om, klasičan luksuzni stil sa minimalističnom ligaturom
Layout: hero full-bleed sa sticky nav top, sekvencijalni scroll kroz jasno odvajane sekcije (accommodation → dining → experiences → wellness), svaka sekcija sa vlastita background treatment, footer sa multi-column info grid
Hero: full-screen architectural detail (strop sa freskom i svetiljkom), muted overlay, centralni logo, cookie modal koji zaklanja sadržaj (blocking modal pattern), tekst ACOMODATION jasno vidljiv sa left-aligned headline 'Rooms & Signature Rooms'
Image treatment: high-quality architectural photography, rich tones (beige, brown, gold accents), muted film-like quality, slike zauzimaju full-width sekcije sa subtle crop/aspect ratio kontrola
Spacing: airy — veliki whitespace između sekcija, breathing room oko headline-a, compactonly u footer columnar layout
Footer: dark multi-column layout sa white text, kategorisovane links (Forthcoming Developments, Careers, Leadership, Sustainability), copyright 2026 desno, social icons kao horizontal bar sa 10+ platform-a
Section patterns
card grid sa 1-2 kolone na mobile, hover scale effect i shadow expandfull-width image sa text overlay (left-aligned headline + description)map embed sekcija sa sticky left sidebar (lokacija + transfer info)footer multi-column sa Aman network links (upcoming developments, careers, sustainability)
Notable elements
- sticky navigation bar sa language selector (English dropdown)
- cookie consent modal sa underlined link 'cookie policy here'
- breadcrumb navigation 'AMAN VENICE › Galleries › Accommodation'
- dual-button pattern: 'View all accommodation' + 'Book now' sa underline hover
- map sa location pin 'AMAN VENICE' i travel info ikonice
- social media icon grid (FB, X, Instagram, YouTube, Pinterest, WeChat, WhatsApp, Weibo itd.)
★ What to steal
- cookie consent modal sa blocking overlay, jasna CTA dugmad (Accept All vs Settings), hyperlinked policy text — UX clarity za GDPR
- sticky header sa shrinking behavior + smooth fixed position, nav links sa hover underline animation i soft-drop shadow na scroll
- full-bleed hero sekcija sa architectural photography + muted text overlay, cinematic framing koje zadržava brand prestige
⚡ Effects + animation
Sajt je cinematski sveska arhitekture sa tiho elegantnim motion language-om — miran scroll koji otkriva sekcije fade-up tehnikom, sticky nav sa glatkom shrink animacijom, sve card hover-a imaju soft scale+shadow expand za luxury feel bez pretjerivanja. WebGL 3D canvas pominje mogućnost interactive 360° room tours. Motion je suptilna i editorial — filmski prolog za Aman Venice iskustvo.
Scroll: smooth page scroll sa fade-in animacijama na sekcije koje ulaze u viewport (fade-in CSS klasa), hero background je fiksna arhitektura (parallax-like fixed attachment), map embed je full-width sa zoom/pan interaktivnost via Mapbox API
Hover: room cards: scale 1.05 sa shadow expansion 0.4s ease-out, links (View all accommodation, Book now): underline slide-in animation sa color shift ka gold/brown, navigation links: subtle text-color fade 0.3s, social icons: slight scale 1.1 na hover
Transitions: CSS transitions na: button background 0.3s ease, link color 0.3s, card transform 0.4s cubic-bezier, opacity fade 0.6s (hero text reveal), nav bar position/shadow 0.4s smooth
Scroll anims: fade-in reveal (fade-in klasa detektovana) na card sekcije dok se scroll-a nadole, sticky navigation sa header-slide-out-top keyframe (nav se smanjuje na 80px ili nestaje na scroll down), parallax fake-out na hero background (fixed attachment), staggered reveal na social icon grid u footeru (verzak delay per icon)
Video/motion: 2 embedded iframe-a (Vimeo/YouTube) — verovatno dining ili wellness promotional video, auto-play disabled (respectful za UX), WebGL canvas za 3D ili shader-based animacije (možda interactive architectural visualization)
Raw DOM ▾
@keyframes: rotateplane, slide-in-left, slide-fade-in-left, slide-in-right, slide-in-bottom, slide-in-top…
cards-transition: 82 · sticky: 5 · SVG: 37 · WebGL
✨ tiho elegantan, cinematic, arhitektonski fokusiran — luksuz koji ne jauče, za afluent globalnu publiku koja ceni minimalizam i heritage
www.belmond.com
↗ 2 frames Paleta
Typography: serif display za headere (heritage, elegantan ton) + sans-serif body (Montserrat-like, čitljivost), visok kontrast sa neutralnom osnovom
Layout: hero-centered sa beach scene background, full-width sekcije sa grid struktuom (2-3 kolone za cards), sticky nav sa multi-level dropdown, footer sa kontakt info + newsletter signup
Hero: full-viewport beach scene sa sunčanim ležaljkama, 'PAGE NOT FOUND' tekst kao glavna poruka, HOME button sa outline stila, topaz/teal boja kao dominantna atmosfera
Image treatment: large hero background image sa beach/resort scene, high-quality photography, muted tone-ovi za profesionalnost, slike servene kao CSS background-image sa cover/center positioning
Spacing: mixed — veoma airy hero sekcija (malo tekstualnog sadržaja), medium-compact footer sa više informacija
Footer: dark gray background, multi-kolona layout sa section-ima (Contact Us, Subscribe, Legal), newsletter signup form sa conditional checkbox-ima, copyright tekstom i ABTA sertifikacijom logoima
Section patterns
hero full-width sa absolute positioned tekstom preko background image-acontact sekcija sa left-aligned tekst + lijevi sidebar sa link-ovimanewsletter signup sa form fields (first name, last name, email), checkboxes za consentfooter multi-kolona layout sa links, social icons, copyright tekstcookie consent banner sa gradient background i tri action button-a (Cookie Settings, Reject All, Accept All Cookies)
Notable elements
- sticky cookie consent banner sa dotted top border (design detalj)
- outline-styled button (HOME) na hero-u — minimalistički pristup
- topaz/teal color palette kao signature brand boja (premium resort feel)
- kontrastni dark tekst na light background u footer-u
- social media icons u footer-u (Instagram, YouTube, LinkedIn, Facebook)
★ What to steal
- hero layout pattern — full-viewport background image sa absolutely positioned tekstualnog sadržaja (elegantna, minimalna, fokusirana)
- sticky multi-level navigation — high-contrast design sa dropdown-ima za Destinations, Experiences, itd.
- newsletter signup form sa dual-input (first/last name) + email + consent checkbox — conversion-optimized pattern
- cookie consent banner sa tri-state button system (Settings/Reject/Accept) sa jasnom vizuelnom hijerarhijom
- footer social links pattern sa icon-ima kao pseudo-link-ovi (clean, modernist)
⚡ Effects + animation
sajt deli mirnu, premium atmosferu kroz cinematic beach hero sa smooth scroll parallax-om, suptilne CSS transition-e na svim interactive elementima (card scale, button color shift), i fade-up reveal-e na sekcije tokom scroll-a — high-end editorial feel sa resort aspiracijom
Scroll: smooth scroll sa fade-in klasa koja se triggeruje na scroll-u (vidljive iz DOM @keyframes: fadein, fadeIn, slideInLeft, slideInRight), parallax efekat na hero background image-u, sticky header sa top-position tokom scroll-a
Hover: button hover sa color shift (outline border animacija), card-ovi verovatno scale 1.02-1.05 sa shadow expand-om, link-ovi sa subtle underline slide-in (30 CSS transitions detektovano na stranici)
Transitions: sve button/link hover-e koriste 0.3-0.4s easing (detektovane iz 9 cards/interactive elemenata sa CSS transition pravila), fade-in/fade-out animacije sa ~0.5s duration (vidljivo iz @keyframes list)
Scroll anims: fade-up/fade-in reveal-i na scroll proxy-u (vidljivo iz 'fade-in' + 'animate' klase u HTML), sticky navigation sa shrink efekat tokom scroll-a, slide-in animacije sa slideInLeft/slideInRight @keyframes na sekcije koje uđu u viewport
Video/motion: nema detektovanih video elemenata (<video>: 0, iframe video: 0) — all motion je CSS-based ili JS-triggered
Raw DOM ▾
@keyframes: fadein, arrow-bounce, fadeIn, fadeOut, slideInLeft, slideInRight…
cards-transition: 9 · sticky: 6 · SVG: 19
✨ luksuzna, mirna, aspiracijska — premium resort brand sa cinematic beach scenarijom, targetiran na visoko-platežu turiste koji žele escapism i eleganciju
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.