1. Estetika: Slatki Luksuz 1. Aesthetics: Sweet Luxury 1. Ästhetik: Süßer Luxus

Paleta Okusa Flavor Palette Geschmackspalette

Vanilla Cream

#FFF5E6

Dark Cocoa

#000000

Antique Gold

#8C5A09

Pistachio

#93C572

Tipografija Typography Typografie

Playfair

Display Typography

Jedinstven, zaobljen serifni font koji podsjeća na topljenu čokoladu i ručno rađene ukrase na tortama. Odabran da komunicira tradiciju i artizanat. Unique, rounded serif font reminiscent of melted chocolate and handmade cake decorations. Chosen to communicate tradition and craftsmanship. Einzigartige, abgerundete Serifenschrift, die an geschmolzene Schokolade und handgefertigte Tortendekorationen erinnert. Ausgewählt, um Tradition und Handwerkskunst zu vermitteln.

2. Ispod Haube: GSAP Power 2. Under the Hood: GSAP Power 2. Unter der Haube: GSAP Power

Kako bi postigli "smooth" osjećaj pri skrolanju i animacijama, koristili smo industrijski standard za motion web - GreenSock Animation Platform (GSAP). To achieve a "smooth" scrolling feel and animations, we used the industry standard for motion web - GreenSock Animation Platform (GSAP). Um ein "sanftes" Scroll-Gefühl und Animationen zu erreichen, haben wir den Industriestandard für Motion Web verwendet - GreenSock Animation Platform (GSAP).

GSAP

Animation Engine

Tailwind CSS

Custom Cursor Logic

animations.js

gsap.from('.reveal-text', {
  scrollTrigger: {
    trigger: element,
    start: 'top 80%',
    toggleActions: 'play none none reverse'
  },
  y: 50,
  opacity: 0,
  duration: 1,
  ease: 'power3.out'
});

3. UX i Interakcija 3. UX and Interaction 3. UX und Interaktion

Preloader

Animirani loading ekran s logotipom stvara anticipaciju prije nego što se sadržaj otkrije, skrivajući učitavanje teških slika. Animated loading screen with logo creates anticipation before content is revealed, hiding heavy image loading. Animierter Ladebildschirm mit Logo weckt Vorfreude, bevor der Inhalt enthüllt wird, und verbirgt das Laden schwerer Bilder.

Parallax Scroll

Slike i dekorativni elementi pomiču se različitim brzinama (scrub: 1), stvarajući osjećaj dubine i trodimenzionalnosti. Images and decorative elements move at different speeds (scrub: 1), creating a sense of depth and three-dimensionality. Bilder und dekorative Elemente bewegen sich mit unterschiedlichen Geschwindigkeiten (scrub: 1) und erzeugen ein Gefühl von Tiefe und Dreidimensionalität.

Custom Cursor

Prilagođeni kursor koji prati pokret miša dodaje "premium" osjećaj i unificira vizualni identitet stranice. Custom cursor following mouse movement adds a "premium" feel and unifies the site's visual identity. Benutzerdefinierter Cursor, der der Mausbewegung folgt, verleiht ein "Premium"-Gefühl und vereinheitlicht die visuelle Identität der Website.

Zaključak Conclusion Fazit

"Projekt Aroma nije samo web stranica, već digitalna ekstenzija fizičkog prostora slastičarnice. Kroz pažljiv odabir tipografije, boja i fluidnih animacija, uspjeli smo prenijeti osjećaj topline, mirisa i okusa na ekran korisnika." "Project Aroma is not just a website, but a digital extension of the physical patisserie space. Through careful selection of typography, colors, and fluid animations, we managed to convey the feeling of warmth, smell, and taste to the user's screen." "Projekt Aroma ist nicht nur eine Website, sondern eine digitale Erweiterung des physischen Raums der Konditorei. Durch sorgfältige Auswahl von Typografie, Farben und fließenden Animationen ist es uns gelungen, das Gefühl von Wärme, Geruch und Geschmack auf den Bildschirm des Benutzers zu übertragen."