Development & Design Case Study

Luma Spa

Analiza dizajna i tehničke implementacije. Kako smo preveli organski ambijent u digitalni kod koristeći Tailwind CSS, semantički HTML i custom tipografiju.

Filozofija: Digitalni Mir

Glavni zahtjev klijenta bio je: "Želimo da se klijent osjeća opušteno čim otvori web." Odbacio sam klasični "agresivni" marketing pristup. Umjesto pop-upova i blještećih boja, koristili smo:

Negative Space: Puno "zraka" između elemenata kako bi sadržaj disao.
Soft Transitions: Sve interakcije (hover, scroll) su usporene (duration-300/500) kako bi imitirale smirenost.
Organski oblici: Zaobljeni rubovi (rounded-xl, rounded-full) umjesto oštrih kutova.

Design System

Paleta i Tipografija

Primary Green

#688E4E

Glavna boja brenda. Priroda, zdravlje, bambus.

Soft Mist

#D5DDDF

Pozadina (Light Mode). Smirenost, čistoća.

Deep Charcoal

#1B2727

Tekst i Dark Mode pozadina. Elegancija.

Melodrama

Aa Bb Cc Dd Ee

Korišten za naslove (Headings). Elegantan serif font koji daje dozu luksuza i ženstvenosti, idealan za beauty industriju.

Manrope

Aa Bb Cc Dd Ee

Korišten za body tekst. Moderan sans-serif, izuzetno čitljiv na svim ekranima, balansira dekorativni naslovni font.

<!-- Tailwind Konfiguracija -->
theme: {
  extend: {
    colors: {
      "primary": "#688E4E", 
      "background-light": "#D5DDDF", 
      "background-dark": "#1B2727"
    },
    animation: {
      'fade-in-up': 'fadeInUp 0.8s ease-out',
    }
  }
}
                

Kod: Čistoća & Brzina

Stranica je izgrađena na modernom stacku s fokusom na performanse. Nema teških frameworka koji usporavaju učitavanje.

Tailwind CSS: Omogućio je rapidno stiliziranje i konzistentnost kroz Utility-first pristup. Custom konfiguracija boja osigurava da se brending poštuje u svakoj komponenti.
Semantički HTML5: Pravilno korištenje <section>, <article> i <header> tagova za bolju pristupačnost i SEO.
Dark Mode Support: Implementiran dark: prefiks u Tailwindu, omogućavajući automatsku prilagodbu sustavu korisnika (prelazak na #1B2727 pozadinu).

SEO

Lijepa stranica mora biti i funkcionalna. Integrirali smo SEO najbolje prakse.

SEO Metadata

Svaka slika sadrži optimizirani data-alt i alt tag. Meta opisi su napisani da privuku lokalne pretrage (npr. "Maderoterapija Slavonski Brod").

Gift Shop Integracija

Posebna sekcija za prodaju poklon bonova (Vouchera). Jednostavan UX tok: Odaberi iznos -> Unesi podatke -> Plati/Rezerviraj. Fokus na konverziju bez distrakcija.

Trebate ovakvu preciznost?

Dizajniram sustave, ne samo stranice. Od palete boja do linije koda, sve ima svoju svrhu.

Angažiraj me na Upworku