feat(home): redesign della homepage (card, pilastri interattivi, indice) - #13
Merged
Conversation
Sostituisce gli SVG line-style inline delle VolumeCard con le icone Font Awesome Pro 7.1.0 in stile duotone (primario currentColor + secondario opacity .4), una per accent del volume: - Vol 1 Programmatore → brackets-curly - Vol 2 Artefice → compass-drafting - Vol 3 Archivista → database - Vol 4 Apprendista → book-open-cover Il colore continua a derivare da --vol-icon-color, quindi nessuna modifica al CSS delle card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
…endo" I box 2 e 3 erano placeholder "Prossimamente" benché i componenti fossero già in produzione: ora mostrano la cosa reale, e si aggiunge una tab per SQL. - Tab 2 "Database dal vivo": SQLRunner sul dataset archivista/biblioteca, query con JOIN + GROUP BY eseguita al mount (runOnMount). - Tab 3 "Algoritmi animati": <Algorithm name="bubble-sort"> reale al posto del pannello statico. - Tab 4 "Cerca, non sfogliare": campo che apre la modale Pagefind reale via CustomEvent 'pdb:open-search' (nuovo listener in SearchBar), al posto dell'input finto disabilitato. - Griglia tab 3 → 4 colonne (2 su tablet, 1 su mobile); sottotitolo non più legato a "tre cose". - Nuovo blocco "E molto altro ancora…": tre peculiarità descrittive (percorsi adattivi, spiegamelo facile, esercizi↔teoria) con icone duotone FA dedicate. Scelta condivisa per non moltiplicare le tab. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
- Le 4 icone delle tab passano a Font Awesome duotone, coerenti con le card-volumi: circle-play, table-cells, chart-simple, magnifying-glass. chart-simple (barre) sostituisce il grafo-nodi, che non evocava gli algoritmi. - All'hover sulla card ogni icona si anima a tema (pulse / nudge / «riordino» delle barre / scan della lente), con guardia reduced-motion. - SearchDuotone è riusata anche nel campo di ricerca (resa neutra/muted). - Testi blocco «E molto altro ancora»: indirizzi → «Informatica, Liceo Scienze Applicate o ITS»; «Spiegamelo facile» riformulato (l'IA non è nel sito: si copia un prompt o lo si manda al proprio LLM); riferimenti a «lezione» invece di «capitolo». Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
Il glow è il pseudo-elemento ::before che segue il cursore via
--at-mx/--at-my. La regola .cardActive::before { opacity: 1 } lo teneva
sempre acceso e la posizione non veniva mai resettata: uscendo dalla tab
attiva il glow restava fermo all'ultimo punto del mouse.
Ora lo spotlight è legato solo a :hover (la card attiva resta distinta da
bordo accent + ombra interna) e onMouseLeave azzera --at-mx/--at-my per
evitare il riapparire all'angolo al rientro.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
Il reset di --at-mx/--at-my su onMouseLeave riportava il gradient al default (centro) mentre l'opacità stava ancora calando (transition 0.3s): si vedeva il glow «saltare» al centro prima di spegnersi. Rimosso il reset: la posizione resta congelata all'ultimo punto del cursore e il glow semplicemente sfuma lì. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
Reimplementa la sezione Indice della homepage seguendo il template Claude Design "Indice - Redesign v2": segmented control a 4 volumi con indicatore scorrevole, header con nome del volume attivo, lista capitoli compatta e footer "volume in stesura". - Icone duotone Font Awesome e accenti per volume identici alle VolumeCard a inizio pagina (blu/rosa/ambra/verde, varianti light/dark) - Conteggio per riga in lezioni anziché sezioni - Tutti e 4 i volumi marcati come "in stesura" - Template hardcoded dark adattato ai token --at-* del sito (light/dark), motion/radius dai token di sistema, guardia prefers-reduced-motion Bump minor: 0.9.0 -> 0.10.0 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
Indicatore del segmented control (ChapterIndex): - riposiziona l'indicator al reflow da caricamento font asincrono via ResizeObserver su segRef (prima restava sbagliato per tutta la sessione: il listener resize non scattava al cambio dimensione dei pulsanti). - non rimonta più il listener a ogni cambio tab: deps [] + activeRef, così la rimonta non emette una notifica che sovrascriveva l'animazione di slide. - moveIndicator memoizzata con useCallback (tutte ref stabili): rimossi i due eslint-disable exhaustive-deps, deps corrette su entrambi gli effect. - activeRef aggiornata nel layout effect, non più durante il render (react-hooks/refs). Cleanup: - icone duotone dei volumi (FA Pro 7.1.0) estratte in src/components/VolumeIcons come sorgente unica con prop `size`: erano duplicate identiche tra index.tsx (22px) e ChapterIndex (20px). - evento 'pdb:open-search' centralizzato in src/lib/events.ts (OPEN_SEARCH_EVENT) e condiviso tra BentoFeatures (dispatch) e SearchBar (listener): una rinomina ora rompe in compilazione invece di rendere il click un no-op silenzioso. Bump a 0.11.0. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YbpGP9DBqBWuJKczky3Pxi
ChapterIndex: - roving tabindex corretto: con le frecce il focus segue il tab attivo (prima restava su un bottone con tabIndex -1 e il Tab si perdeva). - le righe dei capitoli già pubblicati tornano link (intro dei 4 volumi + le 5 lezioni dell'Artefice); freccia e hover solo su quelle, le voci pianificate restano statiche senza affordance da click. - commento sul dato VOLUMES: TOC pianificata, conteggi lezioni di progetto. BentoFeatures: - varianti pastello dark per le icone-tab (#0891b2/#7c3aed/#a21caf) e per gli accenti del blocco «molto altro», ora in classi CSS per-accent invece che inline style (stesso schema light/dark degli accent dei volumi). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01P4vrKns6NFfnFXGqjZTb8B
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Riepilogo
Redesign della homepage. Il branch raccoglie più rifiniture; l'ultimo intervento è la riprogettazione della sezione Indice.
Sezione Indice (ultimo commit)
Reimplementa
ChapterIndexseguendo il template Claude Design "Indice - Redesign v2":VOL. 0N, icona e nome.--at-*del sito, motion/radius dai token di sistema, guardiaprefers-reduced-motion.Altri interventi del branch
Verifiche
npm run typecheck✓ ·npm run lint✓ ·npm run build✓ (gate link verde)Note
Le righe dell'indice non sono link (TOC in gran parte pianificata, non ancora scritta — collegarla romperebbe la build con
onBrokenLinks: 'throw'). Si cablano quando i capitoli esisteranno.🤖 Generated with Claude Code