🏔️ Mountain · standalone
Hotel Crni vrh
Draft
Divčibare, RS ★ 4 🏚️ Stari sajt — audit
4 frames Vision-om Postojeći hotel sajt
https://hotelcrnivrh.rs Era: 2018-2020; WordPress template base sa minimalnim customizacijom nakon inicijalnog launchanja
Redesign direction: Zadržati elegantnu paletu i tipografiju, ali uvesti tihu motion language kroz fade-in reveal-e pri scrollanju, subtle parallax na hero-u, i micro-interactions na dugmadi/linkovima — bez da bude intruzivno, samo dovoljno da sajt osjeća moderno i premium.
✓ Strengths (zadržati)
- Jasan vizuelni hijerarhija i čitljivost
- Elegantna serif kombinacija koja komunicira premium positioning
- Dobar kontrast boje (белина → temni background)
- Mobilna responzivnost je očito implementirana
- Lokalno relevantna copy (srpski, referenca na Divčibare/Beograd)
✗ Weaknesses (zameniti)
- Kompletna odsutnost micro-interactions i scroll animacija — sajt se osjeća kao statička brošura
- Hero sekcija je generička slika bez unique brand storytelling-a
- Nema video sadržaja ili immersive elemenata — samo fotografije
- CTA dugme ('REZERVIŠI') je vizuelno slabo izdvojeno
- Datumi promo paketa ('30.06.2026', '31.12.2026') su text-based bez visual hierarchy-ja
🏷️ Brand signals
Златна/bronze akcenatna boja kao marker premijumaSerif tipografija (hotel elegancija)Prirodna paleta — bež/smeđa/crnaMinimalistički layout sa 'breathing space'Enfazis na текstуалном sadržaju preko vizuelnog spektakla
🎨 Trenutna paleta
Typography: Serif (Playfair Display) za naslove, sans-serif za telo teksta; elegantna ali konvencionalna kombinacija iz 2018-2020 perioda
Layout: Hero sa tekstom overlay → sekcija sa tekstom + slika u 2-kolone → detalji paketa sa checkmark listom → footer sa kontakt podacima
Hero: Full-screen slika hotelske sobe sa 'PROMO' tekstom center aligned; statična, bez animacija ili parallax efekta
Image treatment: Direktne fotografije bez filtera; slike postavljene u jednostavne box layout-e bez maskiranja, depth efekta ili creative cropping-a
⚡ Detektovani efekti + DOM signali
Sajt je kompletno statičan — WordPress template iz 2018-2020 bez ikakve motion language-a. Redesign bi MORАО da integrише Intersection Observer API za fade-in reveal-e na scroll-u, subtle parallax na hero i CTA sekcijama, CSS transitions na button hover-ima, i eventualno Lottie animacije za promo pakete — sve u subtle, luxury hotel tone (ne preterano, ali dovoljno da se osjeća sveži i premium).
JS biblioteke (DOM-detected)
WordPress
Scroll: Native scroll bez smooth scrolling, nema parallax efekta, sve sekcije se učitavaju statično — sajt je potpuno neusmeren prema scroll-based iskustvu
Hover: Samo default browser cursor change na linkovima; nema custom CSS hover transitions, nema color shift-a, nema underline animations — čist default HTML behavior
Transitions: 11 CSS @keyframes detektovano, ali su to uglavnom loading spinners i utility animacije (fa-spin, show-content-image); nema primenjenih transition-a na vidljive elemente
Scroll anims: Nema fade-in/parallax/sticky pattern-a; kompletan nedostatak scroll-triggered animacija — to je velik redesign opportunity
Video/Motion: Nema video elemenata (0 <video>, 0 iframe YT/Vimeo); Nema Lottie animacija; Samo statične slike
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
Elegantnu serif tipografiju za naslove, prirodnu bežu/smeđu/zlatnu paletu, i jasan minimalistički layout struktura — to su validni premium hotel signali.
What to replace
Statičnu hero sekciju sa parallax ili subtle zoom efektom, dodati Lottie animacije za pakete/checkmark-e, implementirati smooth scroll behavior, i redesignirati CTA dugmad sa hover state-ima i micro-animations.
🏆 Reference sajtovi — deep Vision
Inspiracija (2 OK / 2 ukupno)
aman.com
↗ 4 frames Paleta
Typography: serif heritage elegancija (display) + sans-serif minimalistički body, екстремно висок контраст и раздвајање јерархије, vrlo luksuzno
Layout: full-width hero sa cinematic visual, sekcije sa kardovима у grid-у (3 колона), alternating text-left/image-right bloкови, footer sa multi-column info + social links
Hero: full viewport visina sa masivnom фото/video背景, centered AMAN logo i text, možda subtle motion паралаx, soft overlay za čitljivost
Image treatment: large, cinematic photography sa soft focus/bokeh backdrops, muted earth tones (sage greens, warm browns), subtle vignette, slike su hero-proporcionalne и доминирају дизајну
Spacing: airy
Footer: dark background (charcoal/near-black), multi-column grid sa destinations, corporate links (Careers, Leadership, Sustainability), social icons row sa 10+ платформи, copyright notice 2026
Section patterns
Accommodation showcase - 3 колонне картице са image + caption, reveal на scrollExperience blocks - чередни layout са текстом лево и слика десно, tight spacingMap section - embedded Mapbox са локацијом и направљањимаFooter directory - 4-колонски layout са destination linkovima, careers, policySocial icons row - хоризонтална листа са иконама (FB, X, Instagram, YouTube, Pinterest, WeChat, WhatsApp, итд.)
Notable elements
- Sticky navigation bar sa drop-shadow на scroll
- Language selector (English dropdown) - top right
- Reserve button - persistent CTA u header-u
- WebGL 3D canvas element - вероватно subtle background animation или interactive element
- SVG decorative elements (37 укупно) - vjerовано логи, икице, декоративни separators
- Fade-in animation класа - све нове sekcije имају fade-in при scroll-у
★ What to steal
- Sticky header sa minimal nav + persistent Reserve button — невероватно ефикасно за CTA конверзију
- Full-width cinematic hero са мутед паллетом и centered branding — creates immediate luxury perception
- Airy card-based section pattern са reveal-на-scroll — natural visual rhythm која nicht clogs страницу
⚡ Effects + animation
Веома кинематички, уредни лоо́к са озбиљном parallax-depth層ївањем и сuptilnim reveal-auf-scroll анимацијама — све мирно, неинтензивно, висока-разрешена јачина емоције кроз слику а не motion техника. Вишк мирноће него flash.
Scroll: Smooth scroll sa fade-up reveal animacijama na kardovima (AOS-style), parallax background на hero sekciji (fixed background層), sticky header sa scroll-shrink (nav se kompresuje na ~80px kada user skrolira down), možda Lenis smooth scrolling za cinematic feel
Hover: Room cards: scale 1.05 + shadow expansion (0.4s cubic-bezier), link hover ima underline slide-in animation (0.3s), social icons вероватно имају color shift или scale effect на hover
Transitions: CSS transitions: 0.3-0.6s за већину interaktивних елемената, cubic-bezier easing за smoothness, button hover: color fade + background shift, image zoom на hover (1.05-1.1x scale)
Scroll anims: Fade-in animation класа na svim kardovima i sekcijama при scroll-u (Intersection Observer trigger), parallax背景 на hero (fixed attachment, možda transform: translateY() na scroll), sticky navigation са shrink effect при scroll down, možda staggered fade-in na multiple elements u list-ima
Video/motion: Auto-play hero video (možda MP4 фајл за cinematic background), 2 embeddovana YouTube/Vimeo iframe-a (вероватно у Experience или Dining sekcijama), nema detektovanih Lottie animacija ali CSS @keyframes (18 укупно) покрива sve motion needs
Raw DOM ▾
@keyframes: rotateplane, slide-in-left, slide-fade-in-left, slide-in-right, slide-in-bottom, slide-in-top…
cards-transition: 82 · sticky: 8 · SVG: 37 · WebGL
✨ Mirna, kontemplativna eksklusivnost — ciljana globalna luksuzna publika koja vrednuje minimalizum, prirodu i cinematic iskustvo.
www.jumpinnhotelbelgrade.com
↗ 4 frames Paleta
Typography: serif heritage za headinge (ekran 1-2 prikazuje klasičan serif display na 'Welcome to Jump INN'), sans-serif body za opis i navigaciju, visok kontrast belo-na-crnom sa akcentnom lime-green boji (#C4C447) za CTA dugmadi
Layout: hero fullscreen sa split right-side booking formom → sekcija sa carousel-om room kartica (4 vidljive odjednom, Swiper carousel) → sekcija sa city landmarks u takođe carousel formatu → footer sa dark background i kontakt info sa social ikonama. Vertikalna akordeonska dinamika sa jasnim vizuelnim separacijom sekcija.
Hero: fullscreen hero sa dark overlay-om i teksturom, whitespace-rich leva strana sa serif headline, desna strana ocupljena booking widget-om (lime-green CTA dugme sa jasnom vizuelnom hijerarhijom). Background ima suptilnu ilustraciju (ikona hula-hoop figura). Sticky nav sa hotelskim logom ostaje vidljiva tokom scrollanja.
Image treatment: room slike: high-quality fotografije sa mekom osvjetljenošću, neutralnom paletom (belo, svetlo smeđe, zeleno-sivo). Landmark slike: cinematic perspectives sa sky/outdoor scenama, overlay tekst labels sa dark semi-transparent pozadinom. Sve slike imaju suptilne shadow effects i soft edges.
Spacing: mixed — hero i carousel sekcije su airier (veliki padding, breathing room), ali booking forma je tighter sa compact input poljima. Sekcije imaju jasne vertikalne razmake (najmanje 40-60px između sekcija), što stvara 'pauziranje' tokom scrollanja.
Footer: dark background (#2D2D2D), multi-kolumna sa left side (logo, adresa, telefon, email) i right side (nav linkovi: Home, Hotel rules, Photo gallery, Pressclipping, Restaurant, Cookies, Privacy Policy). Social icons u left-bottom kutu. Jasna informacijska hijerarhija bez vizuelnog šuma.
Section patterns
hero + side booking form (split 50/50 layout)carousel sekcija sa room karticama — svaka karta ima sliku, serif naslov, sans-serif opis, 1/4 brojačcarousel sekcija sa lokacijama — slike sa overlay tekstom (npr. 'The Sava promenade ~ 500m'), dark semi-transparent background na tekstufooter sa multi-column layout — logo + adresa + telefon + email + nav linkovi + social icons
Notable elements
- Lime-green CTA dugme sa bold weight — dominira booking formom
- Room carousel sa vidljivim indeksom '1 / 4' — čini jasno da je carousel, ne statična lista
- Sticky navigation sa reduced padding na scroll (shrinking nav pattern)
- Semi-transparent dark overlays na landmark slike sa white serif tekst labele
- Booking forma sa date picker (08, Maj, 2026) sa dropdown-ima — jasno ux-oriented design
- Social media icon footer sa linked-in, facebook, instagram, youtube, tiktok ikonama
★ What to steal
- Split hero layout sa booking formom na desnoj strani — immediate conversion focus bez otuđivanja brandinga
- Carousel sekcije sa explicit page indicators (1/4, 2/14) — orijentisu user kroz sadržaj i pozivaju na exploration
- Lime-green accent boja (#C4C447) kao singular CTA highlight — sve ostalo je neutralno, što čini dugme magnetski privlačnim
⚡ Effects + animation
Sajt deluje miran i elegantna sa cinematic scroll revealom (fade-in sekcije pri ulasku u viewport) i minimal hover transitions na room karticama (scale + shadow). Sticky nav i booking forma čine immediate conversion experience bez žustrine — high-end editorial feel sa e-commerce fokus. Motion je suptilna i namerna, nikada pretjerana.
Swiper (carousels)Elementor (WordPress)WordPress
Scroll: smooth scroll via CSS scroll-behavior: smooth na <html> elementu. Hero sekcija je fixed/static, ali pri scrollanju se vidi fade-out efekt (transparency transition). Room carousel ostaje u viewport-u sa visible pagination. Landmark sekcija se pojavljuje sa fade-in revealom verovatno putem Intersection Observer-a (AOS detektovan u keyframes). Parallax nema detektovan (nema transform: translateZ ili background-attachment: fixed u DOM signalima).
Hover: room karticama verovatno scale 1.02-1.05 sa box-shadow expansion na 0.4s ease-out. CTA dugme (#C4C447) ima suptilan hover — lighter shade ili shadow elevation. Carousel navigation strelice (← →) imaju hover state (likely color: #C4C447 na hover).
Transitions: CSS transitions detektovane: 0.3s na button hover (color/bg), 0.4s na card hover (scale + shadow), 0.6s fade-in na scroll reveal (opacity: 0 → 1). Carousel koristi Swiper default transition (300ms inter-slide animation). Input polja u booking formi imaju 0.2s focus state (border-color, box-shadow).
Scroll anims: fadeIn/fadeOut @keyframes detektovani → verovatno fade-up reveal na scroll (opacity: 0 → 1, transform: translateY(20px) → translateY(0)). slideInUp/slideOutDown takođe prisutni → sekcije se mogu klizati u/van pri scrollanju. Sticky elementi (4 detektovana): sticky nav bar, verovatno sticky booking forma tokom scroll-a kroz hero/rooms sekcije. Nema jasnog parallax-a iz screenshot-a, ali suptilni depth efekti su mogući (box-shadow na cards, transparency na overlays).
Video/motion: 1× iframe embeded (YT/Vimeo detektovan, ali ne vidi se na screenshotima — verovatno na 'PHOTO GALLERY' stranici). Nema auto-play hero videa, nema Lottie animacija. Sve je CSS keyframe bazirana (spin, blink, fadeIn, fadeOut, slideInUp, slideOutDown, progress-bar-stripes, spinner-border — standardni WordPress/Elementor animacijski set).
Raw DOM ▾
@keyframes: spin, blink, fadeIn, fadeOut, slideInUp, slideOutDown…
cards-transition: 7 · sticky: 4 · SVG: 3 · smooth-scroll
✨ Luksuzan, suptilan, cinematic — hotel za informirane putnicima koji cenе design, lokaciju i gde mogu brzo da bukiraju. Serif heritage + dark elegancija + lime-green akcent = kontemporarna luksuznost bez pretenzije.
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.