Header - Copy this React, Tailwind Component to your project
Genera il codice per un sito web e commerce completamente funzionale, progettato per vendere prodotti online. Segui queste specifiche: Struttura della pagina principale: Header: Logo del negozio. Menu di navigazione con link: Home, Prodotti, Chi Siamo, Blog, Contatti. Barra di ricerca per cercare i prodotti. Icona del carrello con contatore degli articoli. Home Page: Hero Section: Immagine di sfondo accattivante con un titolo principale come "Scopri il meglio della rasatura di lusso" e pulsante CTA "Acquista Ora". Sezione Prodotti in Evidenza: Mostra i prodotti più venduti o in promozione con immagine, nome, prezzo e pulsante Aggiungi al carrello. Testimonianze dei Clienti: Recensioni con foto, nomi e citazioni. Footer: Link a tutte le pagine principali, social media, e informazioni di copyright. Pagine interne: Catalogo Prodotti: Elenco dei prodotti con filtri per categoria, prezzo e valutazione. Ogni prodotto deve mostrare immagine, nome, breve descrizione, prezzo, pulsante Aggiungi al carrello e pulsante Visualizza Dettagli. Pagina Prodotto: Dettagli completi del prodotto, incluse immagini multiple, descrizione, specifiche tecniche, recensioni dei clienti e pulsante Aggiungi al carrello. Carrello: Visualizzazione degli articoli aggiunti al carrello con quantità, prezzo per unità, totale parziale e pulsanti Aggiorna Quantità e Procedi al Checkout. Checkout: Modulo per i dettagli di spedizione e pagamento. Riepilogo dell’ordine con costo totale (incluse eventuali spese di spedizione). Pulsante Conferma Ordine. Area Utente (opzionale): Pagina Il mio account per consentire agli utenti di accedere, registrarsi e gestire ordini. Pagina Contatti: Modulo di contatto e informazioni come email, telefono e indirizzo dell'azienda. Stile e Design: Palette di colori: trasmettere lusso e professionalità. Tipografia: Usa font leggibili e moderni, come Roboto per i testi e Playfair Display per i titoli. Layout: Design responsivo per una perfetta esperienza su desktop, tablet e mobile. Funzionalità richieste: Ricerca dinamica: Suggerimenti automatici mentre l’utente digita nella barra di ricerca. Filtri avanzati: Per categoria, prezzo e valutazione nella pagina del catalogo. Carrello interattivo: Si aggiorna automaticamente quando vengono aggiunti/rimossi prodotti. Animazioni fluide: Effetti hover sui pulsanti e transizioni sui cambi di pagina. Sistema di pagamento: Integrazione con piattaforme come PayPal o Stripe per il checkout sicuro. Database mock: Per gestire prodotti, utenti e ordini (puoi usare JSON come mock data). Output desiderato: HTML, CSS e JavaScript per l’interfaccia utente. Commenti chiari nel codice che spiegano ogni sezione. Suggerimenti di librerie esterne (es. Bootstrap per il layout, Swiper.js per slider, o Axios per richieste API
