Smjernice i struktura redizajna

1 Vizualni identitet

Vizualni identitet Lonia d.o.o. redizajna temelji se na estetici Exaggerated Minimalism — puno bijele površine, čista tipografija, snažna monokromatska paleta. Primarna inspiracija: scalaeiendom.no.

1.1 Paleta boja

Prilagođena UUPM preporuci za real estate + monokromatska estetika scalaeiendom.no:

Kontrast provjere (WCAG 2.1):

• Bijeli tekst na #0B2E5B (Dark Navy): ~11.9:1 ✓ AA
• Bijeli tekst na #1F6F78 (Teal): ~5.3:1 ✓ AA
• Tamni tekst #071D3B na #C8922E (Gold CTA): ~6.8:1 ✓ AA
• Tamni tekst (#1A1A1A) na bijeloj: ~18:1 ✓ AA

1.2 Tipografija

UUPM preporuka za real estate / luxury positioning. Cinzel = elegantan serif za naslove. Josefin Sans = čist geometrijski sans za body.

Fluid formula skalira veličine između 576px i 1400px bez skokova na breakpointima.

Google Fonts import:

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Josefin+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

1.3 Ikonografija i asseti

• Ikone: Phosphor Light (@phosphor-icons/web@2.1.1) — class="ph-light ph-{name}", font-size 24px (elegantno, ne masivno)
• Border radius: 0px kartice (Exaggerated Minimalism estetika), 4px gumbi, 2px input polja
• Fotografije: visokokvalitetne, arhitektonski kadrirane (shopping centri izvana/iznutra, poslovni prostori, ambijent)
• Fotografije: NE koristiti generičke stock fotke s osmijehom — koristiti prostorne/arhitektonske (Scala stil)
• Razmaci sekcija: 80–120px vertikalno (velika bijela površina — UUPM Exaggerated Minimalism)

2 Informacijska arhitektura

2.1 Nova navigacijska struktura

Ključne promjene u odnosu na stari sajt:
Stari: LONIA GRUPA | NEKRETNINE ZA IZNAJMLJIVANJE | SHOPPING CENTRI | Novosti | Kontakt (5 stavki, kompleksni dropdowni)
Novi: Lokacije | Najam | Lonia Grupa ▾ | Više ▾ | [CTA: Upit] — jasno, namjenski usmjereno

[Logo: Lonia Grupa]                              [CTA gumb: Upit za najam]
Lokacije | Najam | Lonia Grupa ▾ | Više ▾
          Lonia Grupa ▾:              Više ▾:
          ├── O Lonia Grupi           ├── Portfolio
          └── Društva u grupi ▾       ├── Česta pitanja
              ├── LONIA d.o.o.        └── Kontakt
              ├── Silverleaf DVA
              ├── Vinkovci Projekt
              ├── Saluto
              ├── Atlas Immo Invest 1
              ├── Spuga-K Nekretnine
              ├── Next Nekretnine
              ├── Projekt Pirovac
              ├── Gradska Pekara
              └── Mlin Podravski

Napomena: SLOGA PODRAVSKA TRGOVINA d.o.o. je pripojeno društvo (23. 12. 2024.) — prikazuje se na stranici Društva u grupi, ali nema zasebnu info stranicu.

2.2 Struktura naslovne stranice

┌─────────────────────────────────────────────────────┐
│  NAVIGATION (sticky, bijela pozadina, shadow on scroll)│
├─────────────────────────────────────────────────────┤
│  HERO (full-viewport visina)                         │
│  Pozadina: puna fotografija shopping centra          │
│  Overlay: tamni gradijent (opacity 50-60%)          │
│  H1 (Cinzel, display, bijelo): "Mjesta gdje         │
│       posao cvjeta"                                  │
│  Lead (Josefin, bijelo): Upravljamo premium          │
│       shopping centrima i poslovnim prostorima       │
│       diljem Hrvatske.                               │
│  [CTA1: Istražite lokacije] [CTA2: Upit za najam]  │
├─────────────────────────────────────────────────────┤
│  KLJUČNE METRIKE (4 kartice, #F0F4F8 pozadina)      │
│  [5 Shopping centara] [4 Dostupna prostora]          │
│  [5 Gradova] [Godišnji posjetitelji: 1M+]            │
├─────────────────────────────────────────────────────┤
│  PORTFELJ LOKACIJA (bijela, grid 1+2 layout)        │
│  "Istražite naš portfelj"                            │
│  Istaknuta lokacija (velika) + 2 manje kartice      │
├─────────────────────────────────────────────────────┤
│  DOSTUPNI PROSTORI ZA NAJAM (#F0F4F8)               │
│  Listing kartica s adresom, m², CTA "Upit"          │
├─────────────────────────────────────────────────────┤
│  PROCES NAJMA (bijela, 4 koraka horizontalno)        │
│  1. Kontakt → 2. Obilazak → 3. Ugovor → 4. Useljenje│
├─────────────────────────────────────────────────────┤
│  O LONIA GRUPI (2-col: tekst lijevo, slika desno)  │
│  Kratki opis + link "Saznajte više"                  │
├─────────────────────────────────────────────────────┤
│  KONTAKT CTA (Dark Navy pozadina, bijeli tekst)      │
│  "Tražite prostor za vaše poslovanje?"               │
│  [Pošaljite upit]                                    │
├─────────────────────────────────────────────────────┤
│  FOOTER (bijela, 3 kolone)                          │
│  Logo | Navigacija | Kontakt + Social               │
│  OIB, adresa, copyright                             │
└─────────────────────────────────────────────────────┘

3 Opis stranica

Početna — /

Svrha: Konverzija posjetitelja u zakupce — jasna komunikacija ponude i CTA

Sadržaj: Hero, metrike, portfelj lokacija, dostupni prostori, proces najma, O nama, CTA

CTA: "Istražite lokacije" + "Upit za najam"

Prioritet: Visoki

---

Lokacije — /lokacije/

Svrha: Pregled svih shopping centara s filterom (po gradu, po vrsti prostora)

Sadržaj: Filter bar, grid karata shopping centara, lista dostupnih prostora

CTA: "Pogledajte detalje" → stranica lokacije

Prioritet: Visoki

---

Detalji lokacije — /lokacije/:slug/

Svrha: Detaljan prikaz jednog shopping centra

Sadržaj: Galerija, ključne info (grad, m², broj zakupaca), karta, lista dostupnih prostora u centru, opis, kontakt za upit

CTA: "Pošaljite upit za ovaj prostor"

Prioritet: Visoki

---

Najam — /najam/

Svrha: B2B landing stranica za potencijalne zakupce — nova stranica bez ekvivalenta na starom sajtu

Sadržaj: Zašto Lonia, prednosti lokacija, liste dostupnih prostora s filtrom, proces najma, FAQ preview, CTA

CTA: "Upit za najam"

Prioritet: Visoki

---

Lista dostupnih prostora — /lista-dostupnih-prostora/

Svrha: Katalog svih trenutno dostupnih poslovnih prostora

Sadržaj: Filter (grad, m², vrsta), kartica prostora (adresa, m², fotografija, CTA)

CTA: "Pošaljite upit" po svakom prostoru

Prioritet: Visoki

---

Upit za najam — /upit-za-najam/

Svrha: Kontaktni obrazac specifičan za zakupce

Sadržaj: Forma: ime, firma, telefon, email, grad interesa, m² potrebe, poruka

CTA: "Pošaljite upit"

Prioritet: Visoki

---

Proces najma — /proces-najma/

Svrha: Edukacija potencijalnih zakupaca o toku najma

Sadržaj: 4 koraka (Kontakt → Obilazak → Pregovaranje → Useljenje), FAQ, CTA

CTA: "Počnite danas — pošaljite upit"

Prioritet: Srednji

---

Portfolio — /portfolio/

Svrha: Vizualni pregled svih nekretnina

Sadržaj: Grid svih 5 shopping centara s fotografijama, ključnim podacima i linkom

CTA: "Pogledajte detalje"

Prioritet: Srednji

---

O Lonia grupi — /o-lonia-grupi/

Svrha: Trust building — tko je Lonia, zašto im vjerovati

Sadržaj: Kratka povijest (od 1992.), misija, vrijednosti, popis 11 poduzeća grupe, tim vodstva

CTA: "Pogledajte naše lokacije"

Prioritet: Srednji

---

Česta pitanja — /cesta-pitanja/

Svrha: Smanjiti opterećenje kontakt forme — odgovori za zakupce

Sadržaj: Accordion FAQ (uvjeti najma, minimalni m², proces, tipovi prostora, parking)

CTA: "Nije ovdje odgovora? Kontaktirajte nas"

Prioritet: Srednji

---

Kontakt — /kontakt/

Svrha: Direktan kontakt

Sadržaj: Adresa (Kutina, Kolodvorska 19), telefon (044/669-200), email (lonia@lonia.hr), Google Maps, forma

CTA: "Pošaljite poruku"

Prioritet: Visoki

4 Tehničke preporuke

Stack

• WordPress + Hello Elementor tema + Elementor Pro (Theme Builder, Form, Loop Grid)
• OneTap Accessibility (pristupačnost toolbar)
• WPManageNinja Pro (sigurnost — firewall, brute force zaštita)
• ASE Pro (admin utilities — clean head, disable XML-RPC, redirect after login)
• SlimSEO Pro (SEO, 301 redirecti, Schema.org LocalBusiness/RealEstateListing)
• LiteSpeed Cache
• WebP Uploads (automatska WebP konverzija)
• CookieYes (GDPR cookie banner)

Performanse

• WebP format za sve slike (WebP Uploads plugin)
• Elementor: Optimized DOM Output + Improved Asset Loading
• LiteSpeed Cache s CDN
• Lazy load za slike ispod pregiba
• Cilj: PageSpeed 80+ (mobile), 90+ (desktop)

Pristupačnost (WCAG 2.1 AA)

• OneTap Accessibility toolbar
• Sve fotografije imaju alt tekstove s opisom lokacije i sadržaja
• Semantički HTML: h1→h2→h3 bez preskakanja
• Kontrast provjeren za sve boje (vidjeti sekciju 1.1)
• Keyboard navigacija funkcionalna za forme i navigaciju
• Izjava o pristupačnosti na /pristupacnost/

SEO

• SlimSEO Pro: meta opisi za sve stranice, Schema.org (Organization + LocalBusiness + RealEstateAgent)
• Open Graph tagovi za dijeljenje
• 301 redirecti za sve promijenjene URL-ove (SlimSEO Pro)
• Strukturirani podaci za svaku lokaciju (address, geo, openingHours)
• Ciljane ključne riječi: "poslovni prostori za najam Kutina", "shopping centri Hrvatska", "poslovni prostor za iznajmljivanje [grad]"

Sigurnost

• WPManageNinja Pro: firewall, brute force zaštita, login limit
• ASE Pro: Disable XML-RPC, Clean up head (remove version strings)
• HTTPS aktivan (SSL certifikat)
• Redovite WordPress + plugin nadogradnje

5 UX poboljšanja

1. Ključne metrike na naslovnoj — dodati 4 stat kartice (shopping centara, dostupnih prostora, gradova, posjetitelja) — ključno za trust u B2B kontekstu, radi izvrsno kod Scala Eiendom i Ingre
2. Jasni CTA gumb u navigaciji — "Upit za najam" uvijek vidljiv, ne skrivati u dropdownu
3. Sticky header — navigacija ostaje vidljiva pri scrollu (bez skrivanja), s blagim shadow-om
4. Filter na stranici lokacija — po gradu i vrsti prostora — jedini od svih analiziranih sajtova koji bi imao ovu funkcionalnost
5. Proces najma kao stranica — educira zakupce, smanjuje broj nestrukturiranih upita
6. Informativni footer — adresa, telefon, email, linkovi, social mreže, OIB (trenutno potpuno prazan)
7. Google Maps embed — riješiti JS-rendered problem, koristiti Elementor Google Maps widget ili ACF + iframe
8. Fotografije lokacija — svaki shopping centar i dostupni prostor mora imati visokokvalitetnu fotografiju (trenutno nema)
9. Višejezičnost (EN) — opcija za budući razvoj — sve 4 konkurentske stranice s kojima se uspoređujemo imaju ili planiraju EN verziju
10. Social mreže — definirati i aktivirati Facebook + LinkedIn profil, linkovati sa sajta

6 Prioriteti implementacije