Hamiti Alpine
Faqe web për një biznes familjar në Zermatt për pastrim, kujdes për prona dhe concierge: tre kalkulatorë, shtëpia juaj si model 3D dhe tetë gjuhë.
Hamiti Alpine Service është një biznes familjar në Zermatt me rreth 30 vjet përvojë: pastrim, kujdes për apartamente pushimi dhe chalet-e, housekeeping për hotele, concierge dhe qiradhënie. Faqja u drejtohet hoteleve dhe pronarëve dhe nuk duhej të dukej si firmë pastrimi, por e qetë dhe fisnike: blu alpine, shumë hapësirë e bardhë, një shkrim i hollë me serife dhe Matterhorn-i si botë pamore.
Hyrja jeton me vendin. E njëjta pamje e Matterhorn-it ekziston në katër stinë dhe tri shkallë drite (natë, drita e parë, ditë). Faqja e zgjedh sipas muajit dhe orës në Zermatt dhe kalon butë nga njëra shkallë te tjetra në një canvas. Kur në fshat bie borë ose shi, bie edhe në pamje, ndërsa në vjeshtë fluturojnë gjilpëra larshi. Një shirit i vogël tregon orën lokale, temperaturën dhe erën. Në vizitën e parë logoja vizatohet shkurt vetë, para se të shfaqet faqja.
Zemra e faqes është kalkulatori i ofertës. Ai të çon te kërkesa në gjashtë hapa (objekti, madhësia, shërbimet, detajet, periudha, kontakti) dhe tregon gjatë rrugës një çmim orientues, edhe për disa objekte në një kërkesë. Kush shkruan një adresë ose emrin e një shtëpie, nuk ka pothuajse asgjë për të plotësuar: faqja i merr të dhënat publike nga regjistri federal zviceran i ndërtesave dhe banesave (viti i ndërtimit, katet, banesat, dhomat, sipërfaqja) dhe i plotëson paraprakisht llojin dhe madhësinë e objektit. Hotelet, restorantet dhe dyqanet gjenden që gjatë shkrimit, përmes një indeksi emrash të ndërtuar nga të dhënat e OpenStreetMap.
Për adresën e njohur faqja ndërton një skenë 3D: modeli i vërtetë i lartësive rreth Zermatt-it, sipër tij fotografia ajrore e swisstopo, bashkë me të gjitha shtëpitë e fshatit dhe pyllin në shpate. Kamera fluturon nga lart në luginë, shtëpitë rriten nga toka dhe në fund shtëpia e kërkuar qëndron aty, në pozicionin, drejtimin dhe madhësinë e vërtetë, kat për kat. Çdo banesë është trup më vete dhe zgjidhet direkt në model ose në listën përbri, ndërsa banesat e zgjedhura ndriçojnë në vjollcë. Three.js ngarkohet vetëm për këtë skenë dhe vetëm kur një adresë është njohur vërtet. Pa WebGL shfaqet një hartë e sheshtë.
Përveç kalkulatorit të ofertës ka edhe dy të tjerë, të gjithë në një vend. Në kalkulatorin e concierge-it përzgjidhen shërbime si blerjet para mbërritjes, dorëzimi i çelësave ose transferi nga aeroporti, ose merret një paketë e gatshme, dhe transferi e tregon rrugën në një hartë të Zvicrës. Kalkulatori i qiradhënies vlerëson të ardhurat e një banese në tri modele. Një objekt i njohur një herë vlen për të gjithë kalkulatorët dhe të dhënat nuk humbasin gjatë ndërrimit. Në telefon çmimi orientues mbetet si shirit në fund të ekranit.
Ndërtuar me React 19, Vite, TypeScript dhe Tailwind, pa UI kit: një router i vogël i vetin, fjalorë të tipizuar, ndërrim faqesh përmes View Transitions API. Secila nga më shumë se 200 faqet pararenderohet statikisht në tetë gjuhë (gjermanisht, anglisht, frëngjisht, italisht, portugalisht, shqip, japonisht, kinezisht) dhe në shfletues vetëm gjallërohet. GSAP dhe Lenis ngarkohen pas pamjes së parë. Efektet e skrollimit punojnë vetëm me maus ose trackpad, pajisjet me prekje skrollojnë natyrshëm dhe lëvizja e reduktuar respektohet kudo.
Për t’u gjetur lehtë kujdesen një udhërrëfyes me artikuj të vetët rreth apartamenteve të pushimit dhe Zermatt-it, një faqe pyetjesh, një portal aplikimi për punë, si dhe të dhëna të strukturuara, hreflang dhe një pamje paraprake e veçantë për çdo faqe dhe gjuhë.
Mbrojtja e të dhënave dhe siguria janë pjesë e konceptit: pa cookies, pa trackers, fonte të hostuara vetë dhe një Content Security Policy e rreptë pa skripte inline. Shfletuesi flet vetëm me domenin e vet, madje edhe kërkimi në regjistrin federal dhe moti kalojnë përmes serverit të vet. Hartat janë vizatuar vetë nga të dhëna të hapura, pa shërbim hartash. Formularët mbrohen me proof of work në vend të reCAPTCHA, dhe emaili i konfirmimit nuk përsërit kurrë tekst të lirë, që formulari të mos keqpërdoret për spam.


