FP
Francesco Panzitta

Header e Barra di Navigazione

Header e barra di navigazione (in alto): Nella parte superiore della pagina, c'è un'area di navigazione orizzontale. Sul lato sinistro c'è il logo "Serghey Magala" e l'indicazione del ruolo "Top Trader". Al centro, un campo di ricerca testuale con la dicitura "find people, documents, and more". Sulla destra, c'è l'orologio che segna l'ora attuale (18:08) e un pulsante "Clock In", con un indicatore "NEW" accanto. Un'icona dell'utente a destra mostra un avatar (l'utente attuale, Francesco Panzitta) con un menu a tendina "My plan" e il pulsante "Invite" accanto. Barra laterale sinistra: Ci sono delle icone disposte verticalmente, probabilmente per la navigazione tra diverse sezioni del sito. Queste includono: Home Notifiche (con un badge rosso che indica 2 nuove notifiche) Documenti (con un badge "99+" rosso) Chat/Conversazioni Calendario CG Impostazioni (probabilmente) Sezione principale Feed: Nella sezione principale della pagina, c'è un feed con un post di Gianluca Tenuta (datato 7 Settembre 15:29), contenente gli auguri a Serghey Magala, seguito da emoji di champagne. Sotto il post, c'è una sezione di commenti, con Serghey Magala che risponde, e altri commenti successivi da Alin Salagian e Francesco Velardi. Al fondo della sezione, c'è un campo di testo per aggiungere un nuovo commento. Sopra i commenti, si trovano i pulsanti di interazione per il post: Like, Comment, Unfollow, More, e CoPilot con un indicatore di visualizzazioni (12). Sezione laterale destra: In alto c'è una piccola barra "LIVE" con l'indicatore "8", e accanto ci sono piccole immagini dei profili utente. Sotto, una sezione "Company Pulse" con un indicatore che segna "4" e una barra di avanzamento che mostra "0%". Sotto "My Tasks", sono elencati i task dell'utente corrente suddivisi in categorie: "Ongoing" (0) "Assisting" (1 con un'icona rossa di allarme) "Set by me" (0) "Following" (0). Più in basso, un box arancione indica i compleanni, con il nome e la data del prossimo compleanno (Marcella Colombari, 29 Ottobre). Altri compleanni includono Gianluca Tenuta, Francesco Velardi, e Megan Evans. Dettagli visivi e di stile: Colori predominanti: Il sito utilizza una combinazione di bianco per lo sfondo, con accenti di blu per le icone, pulsanti, e alcuni indicatori come la barra di avanzamento. Gli avatar hanno colori e immagini distintivi. I numeri di task e notifiche sono evidenziati con badge rossi. Font: I caratteri sembrano moderni, puliti, probabilmente sans serif. Layout: Disposizione a tre colonne: Colonna sinistra: Menù di navigazione. Colonna centrale: Sezione principale con il feed. Colonna destra: Task e notifiche personali.

Prompt
Component Preview

About

Scopri come creare una header e una barra di navigazione responsive e funzionale con React e Tailwind CSS, includendo logo, ricerca, orologio, menu utente e notifiche.

Share

Last updated 1 month ago