Components
Questa è la pagina principale dei componenti di ColivingLiguria. Qui definiamo tutti i componenti UI riutilizzabili del sito.
🏗️ Core Philosophy: Single Source of Truth
IMPORTANT
Tutti i componenti sono definiti QUI, una sola volta.
- Ogni componente TSX vive in
quartz/components/- Le altre pagine del sito importano questi componenti senza copiare codice
- Modificando un componente qui, si aggiornano automaticamente TUTTE le pagine che lo usano
- In questo modo evitiamo duplicazione e garantiamo consistenza visiva
TIP
Come usare i componenti:
- Layout Quartz: Registra il componente in
quartz.layout.ts- Pagine custom: Importa direttamente in pagine TSX
- Mai copiare: Se serve lo stesso componente altrove, importalo sempre dalla sorgente
📚 Component Areas
We categorize our components into specific functional domains:
0. Common Utilities
- Purpose: Reusable UI elements used throughout the site.
- Key Components:
ContactCTA: Standardized contact section with Email (mailto), WhatsApp, and Calendar support. Supports internationalization.Translate: Bilingual text rendering.
1. Financial Register
- Purpose: Real-time visualization of economic flows using data from our SQL database.
- Key Components:
AnimeCashflow(Income/Expense Bars),AnimeStats(Growth Metrics).
2. Candidate Register
- Purpose: Tracking and visualizing the recruitment pipeline.
- Key Components:
AnimeCandidateViz(Pipeline Bubbles, Demographics).
3. Contracts & Legal
- Purpose: Providing clear, interactive status indicators for bureaucratic processes.
- Key Components:
AnimeStatusBadge(Document Status),AnimeChecklist,BureaucracyLabel.
4. Location & Maps
- Purpose: Visualising our physical assets and surroundings.
- Key Components:
AnimeLocation(Interactive Maps).
5. Time & Events
- Purpose: Managing calendars and temporal data.
- Key Components:
AnimeEvents(Timeline).
🛠️ Technology Stack (Installed Versions)
NOTE
Queste sono le versioni esatte installate in
package.json. Usare sempre queste per la compatibilità.
🎬 Animation & Motion
| Library | Version | Purpose |
|---|---|---|
| Anime.js | 4.3.5 | Primary animation engine (timelines, stagger, springs) |
| GSAP | 3.14.2 | Advanced animation (ScrollTrigger, complex sequences) |
| Framer Motion | 12.29.2 | Declarative React animations |
| Tween.js | 25.0.0 | Tweening engine |
🧱 UI Framework
| Library | Version | Purpose |
|---|---|---|
| Preact | 10.27.2 | Lightweight React alternative (3kb) |
| @preact/compat | 18.3.1 | React API compatibility layer |
| Chakra UI | 3.31.0 | Component library |
| Lucide React | 0.562.0 | Icon system |
| React Icons | 5.5.0 | Icon library |
📊 Data Visualization
🎮 3D & Interactive
| Library | Version | Purpose |
|---|---|---|
| Three.js | 0.182.0 | 3D graphics engine |
| @react-three/fiber | 9.5.0 | React renderer for Three.js |
| @react-three/drei | 10.7.7 | Useful helpers for R3F |
| Spline | 4.1.0 | No-code 3D scene embedding |
| PixiJS | 8.14.0 | Fast 2D WebGL renderer |
| OGL | 1.0.11 | Minimal WebGL framework |
🎨 Creative Components
| Library | Version | Purpose |
|---|---|---|
| ReactBits | 1.0.3 | Creative animated components (Hyperspeed, Ballpit, etc.) |
| Matter.js | 0.20.0 | 2D physics engine |
This document serves as the master guide for all developers and AI agents working on the ColivingLiguria platform.