Imported from danis-slobodni-od-nikotina/iskustva (AGENTS.md). Install upstream with npx skills add danis-slobodni-od-nikotina/iskustva. Copyright stays with the author.

utisci-SON

Statična Astro stranica: zid utisaka za slobodniodnikotinaiskustva.com. Zamjenjuje slobodniodnikotina.com/zid-utisaka.

Tok rada

Prva faza rada je uspostavljanje i dorada vizuelnog dizajna stranice. Nakon toga, većina zahtjeva će biti dodavanje novih utisaka u postojeće sekcije: video utisci, tekstualni utisci, screenshot utisci ili detaljne case study kartice na vrhu stranice.

Korisnik daje izvorni materijal i kontekst za svaki utisak (screenshot, YouTube link, citat, podaci o osobi). Zadatak je:

• odrediti u koju sekciju/komponentu utisak ide,
• implementirati ga kroz postojeće strukture podataka (src/data/*.ts) i postojeće komponente — bez novih layout obrazaca ili abstrakcija za pojedinačne utiske,
• zadržati uspostavljen vizuelni stil i konzistentnost cijele stranice,
• nikad ne izmišljati podatke o polazniku koji nisu dati (vidi pravilo ispod).

Pravila

• Jezik sadržaja je bosanski. Nazivi varijabli, komentari i UI tekst — sve bs.
• Nikad ne izmišljaj podatke o polaznicima. Ime, grad, profesija, broj cigareta, godine pušenja — ako podatak nije potvrđen, polje ostaje prazno. Komponente su pisane tako da prazna polja uredno sakriju.
• Brend tokeni (boje, font, radiusi) žive samo u @theme bloku u src/styles/global.css — preuzeti su 1:1 sa glavnog sajta. Ne hardkoduj boje po komponentama.
• Cilj je nula JS bundle-ova. Interakcije se pišu kao mali inline <script> u .astro komponenti; ne dodavati framework (React/Vue) bez jake potrebe.
• YouTube se nikad ne embeduje direktno u HTML — samo poster slika, iframe se ubacuje tek na klik.
• Sve slike u src/assets/ su AVIF (quality 88, chroma 4:4:4 — tekst na screenshotovima mora ostati čitljiv). Nove slike ubacuj kroz npm run slika.
• Imena fajlova slika su SEO signal: NNN-utisak-<ime-prezime>.avif, a za anonimne NNN-utisak-<kratak-opis>.avif.
• Bez duge crte (em dash) u tekstu stranice. Zarez ili tačka. Izuzetak su doslovni citati polaznika u citati.ts.
• Redoslijed sekcija: hero, detaljne priče polaznika, video utisci, tekstualni utisci, screenshotovi. Bez filtera i bez podjele videa na „utiske” i „intervjue” — sve ide u jednu video sekciju.
• Kartice unutar iste sekcije drže konzistentan, jednostavan izgled, bez pilova ili detalja (broj cigareta, dana bez nikotina…) koji se pojavljuju samo na pojedinim karticama i djeluju nasumično. Takvi detalji idu samo u case study kartice na vrhu stranice, gdje su namjerno detaljne.
• Screenshotovi poruka nemaju nikakav prateći tekst — ni ime, ni grad, ni naslov. Samo originalna slika. Video kartice zadržavaju naslov utiska ispod slike (i ime/grad ako postoje) jer bez teksta ne bi bilo jasno o čemu je video prije klika.
• Sekcijski naslovi (eyebrow + h2 + opis) i sadržaj stranice su centrirani, na svim veličinama ekrana.

Komande

npm run dev
npm run build                        # ~4 min (obrada slika)
npm run check                        # astro check (tipovi)
npm run slika -- <putanja> <ime>     # konvertuje screenshot u AVIF i imenuje ga
npm run video -- <YT_ID> <naziv>     # skine poster sliku za novi video

Gdje šta stoji

Sav sadržaj je u src/data/ (poruke.ts, videi.ts, caseStudies.ts, site.ts). Detaljno uputstvo za dodavanje utisaka je u README.md.