🏔️ Mountain · standalone
Hotel Ramonda
Draft
Boljevac, RS ★ 4 🏚️ Stari sajt — audit
3 frames Vision-om Postojeći hotel sajt
https://ramondahotel.com Era: 2018–2020 (kasna WordPress era pre Elementor modernizacije)
Redesign direction: Uvesti subtle parallax na hero, fade-in reveal animacije za pakete i biblioteku, elevation-based hover states na CTA dugmadima, i soft shadow layering na sve image komponente — sve to uz zadržavanju existujuće boje i mountain iconography.
✓ Strengths (zadržati)
- Prirodna boja paleta je autentična i topla — dobro resonuje sa mountain resort tenom
- Hero sekcija sa Rtanjem je moćna — memorabilan visual anchor
- Tipografska hijerarhija je jasna i čitljiva — nema zbunjenosti
- Paket struktura (weekend/romantični/porodični) je intuitivna i konverziona
- Biblioteka sekcija dodaje personality — nije generic hotel sajt
✗ Weaknesses (zameniti)
- Nema animacija ili motion-a — sajt osjeća se statičan i inertna (2015 WordPress energy)
- Hover states nisu vidljivi — CTA dugme verovatno samo zmenja boju, nema elevation/shadow effekta
- Nije responsive-optimizovan vidljivo — card layout verovatno preskače na mobile
- Slika tretman je flat — bez subtle shadows, depth-a ili layering-a koja bi dala 3D osećaj
- Sekcije se ne animiraju na scroll — sve je dostupno odjednom bez reveal ritma
🏷️ Brand signals
Branchs warm brown (#8B7355) kao dominantna boja — asocira na prirodu, drvo, toplinuMountain imagery (Rtanj) kao jezgro identiteta — nature-first positioningMinimalistička elegancija — bez previše dekorativnih elemenataSerif tipografija za header naslove — premium, heritage osećajCard-based paketi sa jasnom CTA (REZERVIŠITE dugme)
🎨 Trenutna paleta
Typography: Serif za naslove (elegantno), sans-serif za body tekst, klasična hijerarhija, mali contrast između nivoa
Layout: Hero sa slikom planine (full-width background) → sekcija sa rezervacijom (brown overlay) → tri card-a sa paketima (side-by-side) → biblioteka sekcija (image + tekst) → footer sa linkovima i kontaktima
Hero: Full-width fotografija Rtanja planine sa semi-transparent overlay-om; mali logo Ramonde u donjem levom uglu; tekstualni sadržaj minimalan
Image treatment: Velike fotografije kao background (hero); manje fotografije u paketima (bez border-a); biblioteka sekcija sa wooden shelves (prirodna tekstura); sve slike bez filter-a ili overlays-a
⚡ Detektovani efekti + DOM signali
Sajt je vizuelno stabilan ali kinematički inertna — nema scroll magic-a ili motion hierarchy-a koja bi vodila user attention kroz sekcije. Redesign bi trebalo da uvede tihi parallax na hero (max 30% offset za subtlety), staggered fade-in na pakete na 400ms delay, i smooth hover elevation na CTA dugmadima (3-5px lift sa shadow expansion) — sve to zadržavajući existujući warm brown identitet i mountain iconography za premium mountain resort feel.
Scroll: Native scroll bez ikakvih animacija — nema parallax-a, nema fade-in reveals, nema sticky elemenata (osim nav-a). Sve sekcije su statične i učitane odjednom. User scrolluje kroz statičnu stranicu.
Hover: Samo default browser hover — verovatno samo tekstualna boja ili minimal underline na linkovima. CTA dugme (REZERVIŠITE) ima verovatno fill-color change ali bez elevation, shadow, ili smooth transition delay.
Transitions: CSS @keyframes detected: fa-spin (Font Awesome loader), rotating (verovatno za loading icon), ZoomInOut (mogla bi biti na nekom element ali se ne vidi u aktualnoj implementaciji). Card components imaju CSS transition za hover state, ali efekti su minimalni.
Scroll anims: Nema parallax-a, nema fade-in on scroll, nema stagger animacija na card-ovima. Biblioteka sekcija je čisto statična dva-kolona layout. Ceo sajt je bez scroll-triggered motion language-a.
Video/Motion: Jedan <video> element detektovan — verovatno background video na nekoj sekciji (nije vidljiv u screenshot-ima). Nema YouTube/Vimeo iframe-a, nema Lottie animacija.
Raw DOM signali ▾
@keyframes (3): fa-spin, rotating, ZoomInOut
Cards sa CSS transition: 2 · Sticky/fixed: 2 · SVG: 0 · Video: 1 (+ 0 iframe)
✗ native scroll · ✗ default cursor · ✗ no WebGL
What to keep
Warm brown paleta, mountain hero imaging, jasna card-based paket struktura i serif typography — to je srce Ramonda identiteta koji resonuje.
What to replace
Statičan scroll behavior, nedostajući hover micro-interactions, flat image treatment bez depth-a, i generic button styling — sve to mora biti upgrade-ovano za premium 2025 osećaj.
🏆 Reference sajtovi — deep Vision
Inspiracija (2 OK / 2 ukupno)
aman.com
↗ 4 frames Paleta
Typography: serif heritage display (Aman logotip karakteristični) + sans-serif body, ekstremno visokog kontrasta sa minimalističkim beline; elegantna, diskretna, Italijanska baština
Layout: hero sa cinematic background (fiksna slika arhitekture + parallax), sekvencijalna sekcija-po-sekcija sa varijantnim grid-ima — akomodacija gallery (slider sa navigacijom), multimedia blend (slike + mapa), footer sa site mapom + social linkovi
Hero: full-bleed hero sa fotografijom stropne ornamentike i svetiljke; tekstura je klasična italijanska — sepia/warm tone; tekst minimalan, poravnat centralno, logotip ispod; efekt dubine kroz suptilnu parallax sliku; bez CTA dugmeta u vidljivo polju, pre scroll-a
Image treatment: fotografije su cinematic, warm-toned (sepia/ochre cast), high-contrast sa belim tekstilima i tamnom ornamentikom; korišćene su kao full-bleed hero background sa subtilnom overlay (semi-transparentna), kao sekcione divajzere (image blocks sa fade-in animacijom), i kao gallery rotacije (smooth transitions između frame-a); slike poseduju dubinu i jasnu fokus tačku (svetiljka, prostorija, jelo)
Spacing: airy — ekstremno generozna whitespace, čak i između tekstualnih elemenata u footeru; sekcionih razmakivanja su ~100-150px (large padding-y); kompresovana samo u modal-u gde je tekst + dugmići
Footer: tamna pozadina (gde se vide teksture iz DOM-a), bela tipografija; struktura je tri kolone (Forthcoming Developments, Careers, Leadership itd) + druga kolona sa Locations listom (15+ properties sa 'Coming Soon' indikatorima); treća kolona sa 'Follow us on' tekstom i 8 social ikona; copyright linija dole sa 'Aman Group S.a.r.l.' 2026
Section patterns
Akomodacija showcase — rotujući slider sa fotografijama soba (left/right navigacija strelicama, smooth fade-in); tekst overlay sa nazivom i kraćim opisomFeature grid — 3-kolona layout sa fotografijama (restoran, spa, event) + tekstualnim sadržajem ispod, bela pozadina, minimal paddingMapa sekcija — embedded Mapbox sa lokacijom hotela (interaktivna, zoom-able); tekstualni info blok sa adresom i travel instructions (Marco Polo Airport, 50 min by boat)Footer lista — linkovi organizovani u 3 kolone (Forthcoming, Legal, Careers, Locations); horizontalni social icon red (FB, Twitter, Instagram, YouTube, Pinterest, WeChat, WhatsApp)Cookie consent modal — modal dialog sa logotipom, tekstom, 'Cookies Settings' underlined link + 'Accept All Cookies' primary button
Notable elements
- Logotip AMAN kao minimalistički simbol (tri horizontalne linije — geometrijski, moderne linije izbegavaju serife)
- Sticky header sa 'AMAN VENICE' breadcrumb, navigacijom 'Accommodations | Dining | Experiences | Wellness | Celebrations | Exclusive Offers' i 'Reserve' CTA; sve u minimalnom font-weight, sans-serif
- Cookie modal sa belo-crnom bijom, underlined link 'cookie policy here' sa hover state
- Parallax hero sa fiksnom pozadinom (viewport-relative movement na scroll)
- Sekcijske ivice su često fotografije u punoj dužini (divajzeri bez boje, samo slike)
- Social icon red sa 8+ platformi — WeChat, WhatsApp, Weibo, Xiaozhu itd (multi-region targeting)
- Mapa sa labeled POI-ji (SANTA MARIA GLORIOSA DEI FRARI BASILICA, ST. MARK'S BELL TOWER, OPERA HOUSE)
★ What to steal
- Cinematic hero sa warm-tone sepia fotografijom, fiksna parallax background, centralni tekstualni blok + sticky header koji se sužava na scroll — efekt je luksuzni, editorial, non-intrusive
- Sekvencijalna fade-in reveal animacija na sekcijama pri scroll-u — svaka sekcija ulazi sa subtle opacity transition + mogućim slide-up od ~20px; ovo kreira sense of discovery bez agresivne motion sickness
- Modal-based cookie consent sa visual hierarchy: logotip > kopija teksta > underlined policy link (informacijski ton, ne napadačan) > CTA dugme sa clear contrast; replicira luksuzni tone čak i u compliance elementima
⚡ Effects + animation
Sajt deluje miran i cinematic — parallax hero sa warm sepia tonama kreira sense of depth i heritage, dok fade-in reveal sekcije na scroll-u drže korisnika fokusiranog na bogatstvo sadržaja bez agresivnih micro-interactions; sve je orchestrirano sa high-end editorial feel gde je motion poslednja detalja, ne primarni komunikacijski jezik.
Scroll: Smooth scroll sa parallax hero-om gde background slika ostaje fiksna (CSS background-attachment: fixed ili JS parallax implementation); sekcije se pojavljuju sa fade-in + mild slide-up na viewport enter (AOS-like klase 'fade-in' detektovane u DOM); sticky header sa shrink-down animacijom kada scroll dosegne ~80px (header padding se smanjuje, logotip se skalira malo manje)
Hover: Room card sekcije (ako su klikkable) imaju suptilan shadow expand i mogući scale 1.02-1.03 na hover; social link ikoni u footer-u imaju opacity fade ili color tint na hover (npr. белина -> gole ili sepia tone); underlined linkovi ('View all accommodation', 'Book now', 'cookie policy here') imaju slide-in underline ili color fade 0.3s ease
Transitions: Linkovi i dugmići koriste ~0.3-0.4s CSS transitions (color, background-color, opacity); image hover u gallery-jima ima 0.6s ease-out zoom (scale 1.05); modal fade-in 0.5s ease-out; hero parallax je smooth (ne jittery), što sugeriše Lenis ili requestAnimationFrame implementaciju
Scroll anims: Fade-in klasa na sekcijama pri scroll + parallax hero sa fiksnim background; sticky navigation sa transform translateY animacijom pri shrink; svaka sekcija ima 'slide-in-bottom' ili 'slide-in-left' CSS keyframe koji se trigger-uje kada element uđe u ~80% viewport (AOS offset default); hero parallax sugeriše continuous scroll listener (ne samo discrete Intersection Observer); footer ostaje u flux-u, nema sticky footer
Video/motion: Nema detektovanih <video> elemenata; 2 iframe video elementa (YT/Vimeo) sugeriše da su negde na sajtu embeddovani video testimoniali ili property walkthroughs (vidljivi u nižim sekcijama mimo ovih screenshot-a); hero je slika, ne auto-play video
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
✨ Opulent yet understated — Italijanska baština kroz arhitekturu i toplu boju, ali ekspresija je minimalistička, fokusirana na prostornost i kvalitet fotografije; klijent je ultra-high-net-worth putnik očekujući refinement bez flashiness.
www.belmond.com
↗ 2 frames Paleta
Typography: serif heritage displejni naslovi sa sans-serif telom, visoki kontrast između velikih naslova i sitnog teksta, elegantna klasičnost
Layout: full-width hero sa fixed background slike, sekcije sa centralnim contentom i asimetrična poravnanja, footer sa 3-kolona grid
Hero: full-screen hero sa plaža motivom, fixed/parallax background, veliki serif naslov 'PAGE NOT FOUND' centriran, CTA dugme sa outlineom ispod
Image treatment: large cinematic background images sa subtle dim/gradient overlay za readability teksta, responsive slike u background-image CSS-u
Spacing: airy
Footer: tri-kolona layout sa contact info levo (adresa, telefon), links sredi (terms, careers, about), newsletter signup desno sa input field i sign-up button
Section patterns
cookie consent modal - centriran white box sa tekstom i 3 akcije dugmetafull-width hero sa fixed background i text overlayfooter section sa contact info (levo), linkovi (sredina), newsletter signup (desno)
Notable elements
- fixed navigation bar sa logo centriran na crnoj pozadini
- cookie consent dialog sa soft gray dugmima i outline primary CTA
- beach lounge chairs kao hero background — aspirational lifestyle imagery
- outline-style buttons (border samo, bez bg boja)
★ What to steal
- fixed background parallax hero sa overlay tekstom — cinematic, ne distraktuje navigaciju
- soft button styling sa outline + hover state — minimalistički a elegantno, visoki kontrast
- modal dialog za cookie consent sa neutralnom paletom i jasnom CTA hijerarhijom (reject/accept)
⚡ Effects + animation
Sajt emituje spokojnu, cinematic eleganciju kroz fixed background parallax na herou, suptilne CSS transitions na svim CTA elementima i minimalistički outline button styling — premium editorial feel bez JavaScript-heavy animacija, fokus na kontentu i aspiracijskoj imagineaciji
Scroll: fixed background image hero sa parallax effektom na scroll — background ostaje statičan dok tekst scrolluje preko njega, suptilan parallax bez agresivnog kretanja
Hover: outline dugmovi sa subtle color/border transitions na hover, navigation items sa underline reveal ili opacity change, link elements sa color fade-in
Transitions: CSS transitions na svim interactive elementima — button hover 0.3-0.4s ease, link color transitions smooth, modal fade-in 0.3s ease-out
Scroll anims: fade-in animacije na sekcijama kao što su detektovane CSS klase (fade-in, animate), no nema aggressive GSAP ScrollTrigger patterna vidljivih — pre svega subtle fade-in na element reveal, sticky navigation sa shrink efektom na scroll (header ostajeFixed)
Video/motion: nema video elemenata ili iframe-ova — pure CSS backgrounds sa parallax efektom
Raw DOM ▾
@keyframes: fadein, arrow-bounce, fadeIn, fadeOut, slideInLeft, slideInRight…
cards-transition: 9 · sticky: 6 · SVG: 19
✨ mirna, aspiracijska luksuznost — premium travel brand za globalno bogatu klijentelu sa potrebom za jednostavnošću i sofisticiranom elegancijom
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.