```text

 ██████  █████  ██████  ██████      ██████  ███    ███
██      ██   ██ ██   ██ ██   ██     ██   ██ ████  ████
██      ███████ ██████  ██   ██     ██████  ██ ████ ██
██      ██   ██ ██   ██ ██   ██     ██      ██  ██  ██
 ██████ ██   ██ ██   ██ ██████      ██      ██      ██

    CARD.PM v4.0 - ADVANCED DIGITAL BUSINESS CARDS
```

# CARD.PM Digital Studio

**Experience the future of professional networking.** CARD.PM is a high-fidelity vCard and micro-site engine designed for premium digital identities. Built with a "Mobile-First" DNA and state-of-the-art web technologies.

---

## 🚀 Technical Specifications

### **Core Stack**
- **Framework**: [React 18](https://reactjs.org/) (Functional Components, Hooks)
- **Bundler**: [Vite 5](https://vitejs.dev/) (Lightning fast HMR & multi-entry build)
- **PWA**: Fully offline capable via [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa)
- **Icons**: [Lucide React](https://lucide.dev/) (Comprehensive SVG icon set)

### **Visuals & UX**
- **3D Engine**: [Three.js](https://threejs.org/) via [React Three Fiber](https://r3f.docs.pmnd.rs/) (Parallax & depth effects)
- **Analytics**: [Chart.js](https://www.chartjs.org/) (Interactive KPIs on the dashboard)
- **Design System**: Premium Vanilla CSS + Tailwind integration. Custom Glassmorphism engine.
- **Wizard**: Typeform-style multi-step assistant for onboarding & link management.

### **Integrations**
- **Google Maps**: Google Places API for address autocomplete & business review lookup.
- **Internal Pages**: Rich-media sub-pages (Bio, Services, Video Tour) with autonomous routing.
- **Multilingual**: Native support for FR/EN and direction-aware layout.

---

## 🛠️ Feature Overview

- [x] **Universal Add Link Wizard**: 7+ link types with tailored inputs and smart validation.
- [x] **Autonomous Dashboard**: Real-time stats, card switcher, and quick-action grid.
- [x] **3D Interactive Card**: Fully responsive 3D preview with flip and tilt mechanics.
- [x] **Advanced Multi-Card Support**: Slug-based routing (`#slug`) for managing entire fleets.
- [x] **Media Lab**: Simulation of image cropping, background removal (Magic Wand), and PDF imports.

---

## 💻 Development

### Setup
```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Production build
npm run build
```

### Architecture
- `/src/components/card`: Rendering engine for the vCards.
- `/src/components/editor`: Custom UI components for the studio.
- `/src/views`: High-level route views (Dashboard, Editor, CardsList).
- `/public/api`: Data-driven infrastructure (JSON cards, translations, contexts).

---

> [!TIP]
> **Pro Tip**: Use the dashboard to quickly switch between visual themes and monitor your link performance at a glance.

---
© 2026 CARD.PM - Precision Digital Identities.