Sito showcase moderno e tecnologico per Vibrazioni, azienda di sviluppo software, con animazioni 3D interattive che reagiscono allo scroll.

• Hero Section con geometria 3D animata (sfera distorta)
• About Section con sistema di particelle 3D
• Products Section con 4 prodotti software e card 3D interattive
• Custom Solutions con form per richiesta preventivo/programmi custom
• Tech Stack Section con cubi wireframe 3D animati
• Contact Section con form contatti e informazioni aziendali
• Animazioni fluide basate su scroll con GSAP ScrollTrigger
• Design moderno con effetti glassmorphism
• Palette colori tech (blu, cyan, viola)

• Next.js 14 - Framework React
• TypeScript - Type safety
• React Three Fiber - Rendering 3D con React
• Three.js - Libreria 3D WebGL
• @react-three/drei - Helper per R3F
• GSAP - Animazioni avanzate
• Tailwind CSS - Styling utility-first
• Framer Motion - Animazioni UI

• Node.js 18+
• npm o yarn

1. Naviga nella directory del progetto:

cd vibrazioni-showcase

2. Installa le dipendenze:

npm install
# oppure
yarn install

3. Avvia il server di sviluppo:

npm run dev
# oppure
yarn dev

4. Apri http://localhost:3000 nel browser

npm run build
npm start

vibrazioni-showcase/
├── app/
│   ├── layout.tsx          # Layout principale
│   ├── page.tsx            # Homepage
│   └── globals.css         # Stili globali
├── components/
│   ├── HeroSection.tsx     # Hero con 3D sphere
│   ├── AboutSection.tsx    # Chi siamo + particelle
│   ├── ProductsSection.tsx # Showcase prodotti
│   ├── CustomSolutionsSection.tsx # Form preventivo
│   ├── TechSection.tsx     # Stack tecnologico
│   └── ContactSection.tsx  # Contatti e form
├── public/                 # Asset statici
└── package.json

Modifica i colori in tailwind.config.js:

colors: {
  primary: { ... },
  accent: {
    purple: '#a855f7',
    cyan: '#06b6d4',
  },
}

Modifica l'array products in components/ProductsSection.tsx

Aggiorna i dati in components/ContactSection.tsx e components/AboutSection.tsx

• Animazioni 3D ottimizzate per 60 FPS
• Lazy loading degli asset 3D
• Code splitting automatico con Next.js
• Ottimizzazione immagini built-in

• Chrome (ultimi 2 versioni)
• Firefox (ultimi 2 versioni)
• Safari (ultimi 2 versioni)
• Edge (ultimi 2 versioni)

• Le animazioni 3D richiedono WebGL
• Per migliori performance, usa browser moderni
• I form sono attualmente collegati a console.log - integra con il tuo backend

Proprietario - Vibrazioni S.r.l.