🏔️ Mountain · standalone
Hotel Porto Tara
Draft
Žabljak, ME ★ 4 🏚️ Stari sajt — audit
4 frames Vision-om Postojeći hotel sajt
https://www.portotara.me/ Era: Poslednji redizajn aproksimativno 2019-2020; WordPress theme sa Elementor-om ili sličnim page builder-om koji je uglavnom neodrađen od tada
Redesign direction: Čuvati autentičnost prirodnih materijala dok se transformiše statični layout u dinamičan, motion-forward dizajn sa tiho stavljenim parallax-om, fade-in reveals i hover states koji odražavaju luksuznost brenda.
✓ Strengths (zadržati)
- Odličan fotograf material — visoka kvaliteta slike bora, arhitekture, krajolika
- Čist color scheme — prirodne boje koje odražavaju lokaciju i materijale
- Dobra white space upotreba — čitljivost je odličan
- Jasna informacijska hijerarhija — gosti mogu lako naći cenu, galeriju, kontakt
- Logo je pamtljiv i može se skalirati — dobra vektorska logika
✗ Weaknesses (zameniti)
- Nema scroll animacija ili motion — sajt je statičan kao 2015. WordPress template
- Hover states su minimalni — samo default browser underline na linkovima
- Sekcije nemaju connection — svaka je kao odvojena kutija, bezflow-a
- Responsive dizajn nije očigledan iz screenshot-a — potencijalno neadekvatna za mobile
- CTA buttons su neutočni — 'BOOK NOW' dugme nema vizuelne povratne informacije (nema box-shadow, nema color change na hover)
🏷️ Brand signals
Prirodne, rustične materijale (drvo, kamen, metal) kroz fotografijuToplo-neutralna boja paleta sa akcentima od zlata/bežElegantna serif tipografija za nazive ('Hotel Porto Tara')Minimalističke button-e sa kontrastnim stroke-ovima (bez fill-a)Luksuzni, tihi branding — bez aggresivnih CTA-ova
🎨 Trenutna paleta
Typography: Sans-serif za navegaciju i naslov (weights: bold za h1, regular za body); serif osećaj kroz natural woodsy esthetic; font-size hierarchy jasna ali konzervativna
Layout: Hero full-width sa overlay tekstom → Accommodation cards sa slajderom → Special offer section sa desnom slikom → Footer sa kontakt info; sve sekcije pravolinijske, bez overlapa ili dinamike
Hero: Full-width fotografija objekta sa crnim semi-transparent overlay-om; beli tekst 'Welcome in HOTEL PORTO TARA' sa cenom od 54€ desno; CTA dugme 'BOOK NOW' u gornjem desnom uglu
Image treatment: Fotografije su high-quality ali statično postavljene; nema zoom/pan efekata; slike u accommodation sekciji imaju jednostavne white space margins; hero slika je hero — više nema dinamike
⚡ Detektovani efekti + DOM signali
Sajt je u potpunosti statičan — to je tipičan 2015-2018 WordPress Elementor build sa high-end fotografijom ali nula motion language-a. Redizajn MORA da uvede tihe parallax reveals na Hero-u (slike odozgo dolaze lagano), fade-in animacije na Accommodation cards na scroll, micro-hover states na svim interactive elementima, i sticky navigation sa subtle scale/opacity transition — sve to док ostaje minimalistički i luksuzno (bez agresivnih animacija).
JS biblioteke (DOM-detected)
WordPress
Scroll: Native scroll bez smooth scrolling; nema parallax-a; sve sekcije su statične i korak-po-korak — hero, akomodacija, special offer, footer u linearnom redosledu bez overlay-a ili depth effects
Hover: Minimalni — samo default browser hover na link-ovima (underline); dugmići nemaju custom transition na hover (bez color shift, bez lift efekata, bez box-shadow); slike u galeriji nemaju zoom/scale animation
Transitions: CSS @keyframes detektovani ali su retko implementirani — fa-spin, show-content-image, lightbox-zoom — to su verovatno Lightbox plugin animacije, ali nisu primenjene na glavne sekcije; nema fade-in reveal-a na scroll-u
Scroll anims: Nema fade-in reveal-a; nema AOS.js ili Intersection Observer patterna; nema parallax-a na bilo kojoj sekciji; nema sticky elementos koji se aktiviraju na scroll-u (osim navigation koja je sticky ali bez animation)
Video/Motion: Nema video elemenata; nema Lottie animacija; nema background video-a na hero sekciji — samo statična slika
Raw DOM signali ▾
@keyframes (12): 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: 6 · SVG: 0 · Video: 0 (+ 0 iframe)
✗ native scroll · ✗ default cursor · ✗ no WebGL
What to keep
Fotografski materijal, prirodna paleta boja, minimalistički approach i logomark — to su čvrsti temelji luksuznog brenda.
What to replace
Motionless sekcije, generički WordPress layout grid, defaultne browser interakcije — trebalo bi uvesti subtilne scroll animations, layered depth preko pseudo-elemenata i micro-interakcije na svim clickable elementima.
🏆 Reference sajtovi — deep Vision
Inspiracija (1 OK / 1 ukupno)
www.monazlatibor.com
↗ 4 frames Paleta
Typography: serif heritage display (Mona logotip) + sans-serif body, visoki kontrast između elegantnog headinga i čitljivog teksta, minimalistički pristup sa obilnom beline
Layout: hero sa booking widget fiksiran dole, sekcije od 100vh sa centralnim sadržajem, galerija kao grid od 6 kartica, footer sa 4-kolumnskom informativnom strukturom, sve sa velikim breathing room-om između sekcija
Hero: full-screen cinematic kadra sa 4 osobe u spa odelima oko bazena, topla osvetljenost, nature tones, booking widget sa datumom (fiksiran 06.05.2026), odabir broja noći i osoba, CTA 'BOOK' u tetrachromatic teal-u — luxury editorial feel
Image treatment: fotografije u prirodnim bojama (okra, krem, tamna zelena), portretne i produktne slike sa mekim sjenama, bez šumova — minimalist luxury fotograf stil. Sekcija 'Wellness' pokazuje zensku figuru sa kamenčićima, 'Gastro' fokus na detalj jela, galerija mješavina nature (obala), arhitekture (zimska scena), i lifestyle (osoba u krevetu, detaljni kadri ambijenta)
Spacing: airy — velika vertikalna razmaka između sekcija (100vh hero, padding 60-80px između blokova), wide gutter-i u gridu, obilan whitespace oko teksta i kartica
Footer: tamni footer sa 4-kolumnskom strukturom (Kontakt — telefon/adresa/email, Informacije — linkovi do hotel/apartmani/promo/kontakt, Dostupnosti — kongresni centar/tim building/restorani, Newsletter — email input + dugme 'PRIJAVITE SE'), logo Mona Plaza plus 'Mona Hospitality Management', copyright © 2026, linkovi do Uslova privatnosti i Kompendijuma, 4 društvene mreže ikone (Instagram, Facebook, LinkedIn, YouTube)
Section patterns
Hero sa fiksnom booking bar-om dole (sticky na scroll)Dve kartične sekcije sa tekstom + slikom (Wellness / Gastro) — side-by-side layoutGalerija sa 6 kartica fotografija raspoređena u grid (2x3 ili responsive)Kontakt sekcija sa 3 info-boks-a (telefon, adresa, email) u tirkiznom akcentuForma sa tekstualnim poljima (ime, telefon, email, naslov, komentar, anti-spam polje)Footer sa 4 kolone (Kontakt info, Informacije, Dostupnosti, Newsletter) + društvene mreže ikone
Notable elements
- Fiksna booking bar sa datumom i dropdown-ima za izbor noći/osoba, CTA dugme u akcentnoj boji
- Tirkizna boja (#20b2a4) kao primarni akcent za dugmadi i hover states
- Sekcije 'Wellness doživi' i 'Gastro doživi' kao levo-desno raspoređene kartice sa image-text kombinacijom
- Teal-zelena kružna ikonica sa telefonom, lokacijom i email-om u Kontakt sekciji
- Galerija od 6 kartica sa hover state-ima na scroll-u
- Typography: 'NaN°C' kao bold, compact branding element (temperatura kao metaphora za coolness/freshness)
- Sticky nav sa horizontalnim menu-om i language switch (RS/EN) gore desno
★ What to steal
- Fiksni booking widget na dnu stranice — jednostavan, visoko konverzioni, accessibility-friendly sa date picker-om i dropdown-ima (pattern je čest kod luxury travel sites ali izvršen elegantan sa pravim spacing-om)
- Airy layout sa 100vh sekcijama i centralnim kontentom — pravi breathing room koji čini sajt premium i čitljivim umjesto clutter-ovanih single-page design-a
- Tetra-boja scheme sa neutralnom paletom (krem, zelena, teal akcent) — minimalističan ali topao, pogodno za luxury hospitality branding bez puke hladnoće moderna minimalizama
⚡ Effects + animation
Sajt deluje premijum i miran sa cinematic scroll parallax-om na hero sekciji i fade-up reveal animacijama na galeriji pri scroll-u (AOS), sticky booking widget fiksiran dole za high conversion focus. Suptilne hover transitions na svim interaktivnim elementima (cards scale, dugmadi color shift) stvaraju luxury editorial feel bez flashiness — high-end, editorial, wellness-focused mood.
Scroll: smooth scroll kroz sekcije sa sticky booking bar-om koji ostaje vidljiv pri dnu ekrana tokom celog scrollinga, verovatno Lenis ili native scroll-behavior: smooth. Hero sekcija se čini fiksna sa parallax efektom na pozadini (video ili background-attachment: fixed). Fade-up reveal animacije na galeriji karticama kad uđu u viewport — AOS (Animate On Scroll) biblioteka sa 'fade-up' klasa.
Hover: galerija kartice — scale 1.05 ili brightness povećanje na hover (12 transitions detektovane), 'BOOK' dugme — background color shift iz teal-a u tamnu zelen sa shadow ekspanzijom (0.3-0.4s), form input-i — border color transicija sa focus state-om, linkovi u footer-u — underline slide-in ili color fade (0.25-0.3s)
Transitions: CSS transitions na svim dugmadima (0.3s ease-out), hover states na karticama (image zoom 0.6s ease-out, shadow expand 0.4s), form validation transitions, booking widget dropdown animacije (max-height collapse/expand 0.4s), nav link underline animations
Scroll anims: galerija kartica — fade-up animacija sa AOS bibliotekom na scroll (video evidence: kartica se pojavljuje sa opacity: 0 → 1 i transform: translateY(-30px) → translateY(0) kad uđe 30% u viewport). Sticky booking bar — ostaje fiksna na dnu tokom celog scrollinga (position: fixed sa z-index, verovatno sa bottom: 0 padding-adjustment pri bottom-of-page). Hero sekcija — verovatno ima subtle parallax sa background-position shift ili slow-scroll offset na hero sliku dok user scrolla. Kontakt forma — verovatno fade-in pri scroll dolaska te sekcije. Sveukupan scroll feel je miran, cinematic, bez agresivnih skokova.
Video/motion: Hero sekcija prikazuje stati-liknu sliku (moguće video hero sa MP4 u fullscreen modu ili background-attachment: fixed sa static slike), 10 detektovanih @keyframes uključuje 'bgscroll' što sugeriše animirani background ili subtle parallax scroll. Nema Lottie ikona detektovano, ali 'pulse' keyframe sugeriše subtle pulsing animacije na akcent elementima (možda CTA dugme ili booking widget pulsira na load-u).
Raw DOM ▾
@keyframes: fa-spin, progress-bar-stripes, fancybox-rotate, fade, pulse, slideLeft…
cards-transition: 16 · sticky: 16 · SVG: 0
✨ premijum, spokojno opuštajuće, editorial luxury — ciljana je kupovna moć srednje i gornje klase (35-65 god, wellness-conscious, gastro-entuzijasti), atmosfera je spa-poput: sveže, prirodne, toplo-osvetljeno, bez žurbe.
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.