Home page con componenti


Titolo Esercizio: Creazione di una Homepage Personale con Layout e Componenti

Consegna:

Dovrete creare la homepage di un sito web. Il sito avrà un tema specifico (assegnato individualmente, vedi sotto) e dovrà rispettare i seguenti requisiti:

  1. Layout Condiviso:

    • La homepage deve utilizzare un layout condiviso.
    • Questo layout conterrà la navbar (vedi punto 2) e gestirà la struttura di base di tutte le pagine del sito (anche se per questo esercizio creerete solo la homepage).
  2. Navbar:

    • Create un componente Navbar.js (o adattatene uno esistente).
    • La navbar deve essere inclusa nel layout condiviso.
    • Deve contenere: 
      • Un logo.
      • Almeno tre link di navigazione: "Home", "Progetti" (o "Portfolio"), e "Contatti". Per ora, i link possono puntare a # (segnaposto).
    • Utilizzate Tailwind CSS per stilizzare la navbar.
  3. Immagine Hero:

    • Create un componente Hero.js.
    • La homepage deve includere un'immagine "hero" immediatamente sotto la navbar.
    • Questa immagine deve: 
      • Avere un rapporto di aspetto di 4:1 (larghezza 4 volte l'altezza). 
      • Occupare  tutta la larghezza della finestra del browser.
      • Avere un titolo e un breve testo sovrapposti, posizionati in modo che siano ben leggibili (facoltativo).
    • L'immagine deve essere pertinente al tema assegnato al vostro sito.
  4. Componenti Preesistenti (da adattare e riutilizzare):

    • Dovete utilizzare i seguenti componenti, che avete già creato (o che creerete, se non li avete ancora): 
      • Bannerone: Usatelo almeno una volta nella homepage. Pensate a come posizionarlo in modo strategico. Adattate il testo del banner al tema del vostro sito.
      • Product: Usatelo almeno quattro volte. Le card devono mostrare contenuti diversi, ma coerenti con il tema del vostro sito. Ad esempio, se il sito è un portfolio di un fotografo, le card potrebbero mostrare diverse foto; se è un blog di cucina, potrebbero mostrare diverse ricette.
  5. Struttura della Homepage (app/page.js):

    • La homepage deve includere, in ordine: 
      • La Hero section (con l'immagine 4:1).
      • Il componente Bannerone.
      • Almeno quattro componenti Card.
  6. Stilizzazione:

    • Tutto il sito deve essere stilizzato utilizzando Tailwind CSS.
  7. Temi Individuali:

    • Ognuno di voi avrà un tema specifico per il proprio sito web:

      • BASSETTO MATTIA: Sito portfolio per un fotografo naturalista.
      • CAGAYAN MENGO ALESSANDRO: Blog di viaggi, focus su destinazioni esotiche.
      • CALZAVARA CARLO ANDREA: Sito web per un musicista/band (genere: rock).
      • CANCIAN ACHILLE: Portfolio di un web designer/developer.
      • CAPIOTTO FILIPPO: Blog di cucina, focus su ricette vegane.
      • COSI FILIPPO: Sito portfolio per un illustratore digitale.
      • DRIUSSO GIULIANO: Blog personale su argomenti di tecnologia e programmazione.
      • KRASNIQI ARDISON: Sito web per un personal trainer/fitness coach.
      • MAFTEUTA LIVIU: Blog di recensioni di libri (genere: fantasy/sci-fi).
      • MASCHIETTO DEBRA: Sito portfolio per una make-up artist.
      • POLI PIETRO: Sito web per un'attività di vendita di prodotti artigianali (es. gioielli, ceramiche).
      • PURISIOL ACHILLE: Blog di giardinaggio e cura delle piante.
      • RIVOLI LUCA: Sito portfolio per un videomaker/filmmaker.
      • ROMAN CARLO: Blog di storia locale, con focus sulla propria città/regione.
      • SOCAL MATTIA: Sito web per un'associazione sportiva locale (es. calcio, basket).
      • VIGANO’ PIERPAOLO: Portfolio di un architetto/interior designer.
      • ZOIA MANUEL: Blog di recensioni di videogiochi.
    • Scegliete immagini, colori, font e contenuti coerenti con il tema assegnato.