# Bottega Iblea — E-commerce Demo · PixelArtsLab

Demo di un **e-commerce di prodotti gastronomici siciliani artigianali** (olio EVO Monti Iblei DOP, pistacchio di Bronte, miele millefiori, cioccolato di Modica, formaggi stagionati, cofanetti regalo) da piccoli produttori della zona iblea (Ragusa/Modica).

Sito **dimostrativo** realizzato da **PixelArtsLab** per il portfolio: non è un'attività reale. Bottega, produttori, indirizzi e prezzi sono di fantasia.

🔗 **Anteprima**: apri `index.html` nel browser, oppure lancia un server locale:

```bash
cd bottega-iblea
python -m http.server 8000     # oppure: npx serve .
```

## Pagine

| Pagina | File | Contenuto |
|---|---|---|
| Home | `index.html` | Hero, categorie, prodotti in evidenza, newsletter |
| Catalogo | `catalogo.html` | 15 prodotti, **filtro per categoria**, ordinamento per prezzo/nome |
| Prodotto | `prodotto.html?id=…` | Scheda singola: provenienza, formato, abbinamenti, correlati |
| Carrello | `carrello.html` | Quantità, totale live, barra spedizione gratuita, checkout simulato |
| Chi siamo | `chi-siamo.html` | Storia e legame con i 6 produttori locali |
| Contatti | `contatti.html` | Form di contatto, info bottega, orari |

## Caratteristiche

- 🛒 **Carrello front-end** — aggiungi/rimuovi prodotti, modifica quantità, subtotale e spedizione in tempo reale, salvataggio in `localStorage` (`bottega-iblea-cart`). Spedizione **gratuita sopra i 90 €** con barra di avanzamento. Nessun pagamento reale: il checkout è una simulazione dimostrativa.
- 🗂 **Catalogo completo** — 15 prodotti reali (nomi, provenienze e formati specifici), 4 categorie: *Oli e condimenti · Dolci, miele e conserve · Formaggi e salumi · Cofanetti regalo*, badge (DOP, Novità, Bestseller).
- 🏷 **Identità visiva gastronomica** — palette crema/terracotta/pistacchio/miele, font Fraunces + Karla + Caveat, card con look da etichetta artigianale, timbri e texture carta.
- 📱 **Completamente responsive** — menu hamburger su mobile, griglie adattive.
- ♿ Accessibilità: skip-link, focus visibile, `aria-label`, `prefers-reduced-motion`.
- 📄 Convenzioni portfolio: badge **«Sito demo — PixelArtsLab»** fisso in ogni pagina, `<meta name="robots" content="noindex, nofollow">`, disclaimer in *Chi siamo* e *Contatti*.

## Struttura

```
bottega-iblea/
├── index.html          # Home
├── catalogo.html       # Catalogo con filtri
├── prodotto.html       # Scheda prodotto (?id=)
├── carrello.html       # Carrello + checkout simulato
├── chi-siamo.html      # Storia e produttori
├── contatti.html       # Form e contatti
├── css/
│   └── style.css       # Design system (variabili, componenti, responsive)
├── js/
│   ├── products-data.js # Dati shop, categorie, 15 prodotti
│   ├── cart.js          # Carrello: localStorage, badge, toast, render pagina
│   └── main.js          # Nav, render prodotti, filtri, dettaglio, form
└── README.md
```

## Tecnologie

HTML5, CSS3 (custom properties, grid, flexbox, animazioni), JavaScript vanilla. Nessun framework, nessuna dipendenza. Pronta per essere caricata così com'è dentro `public_html/portfolio/demowebsites/`.

## Personalizzazione rapida

- **Prodotti e prezzi**: `js/products-data.js`
- **Colori e font**: variabili CSS in cima a `css/style.css`
- **Soglia spedizione gratuita**: `freeShippingThreshold` in `js/products-data.js`
- **Contatti e orari**: header/footer delle pagine HTML