tarmaq.ch — Accélérateur d'opportunités à Genève

Vue d'ensemble

tarmaq est un accélérateur d'opportunités pour les jeunes qui souhaitent explorer l'IA, entreprendre, créer et rêver. Nous proposons un espace ouvert à tous, avec des équipements de pointe, des programmes concrets, des expériences terrain et une communauté active pour apprendre en faisant.

Structure du site

Le site est maintenant entièrement intégré dans une application React moderne avec un système de basculement intelligent entre les vues desktop et mobile :

⚛️ Application React unifiée (src/App.jsx)

• Interface moderne et interactive avec composants React
• Basculement automatique entre vues desktop et mobile
• Design responsive qui s'adapte automatiquement à tous les écrans
• Navigation intelligente avec menus déroulants et navigation mobile
• Gestion d'état avancée avec hooks React et localStorage

🎯 Fonctionnalités intégrées

• Hero section avec gradient et call-to-actions
• Navigation complète avec menus déroulants pour desktop
• Menu hamburger pour mobile avec overlay
• Sections programmatiques : Programmes, Expériences, Agenda, Partenaires
• Footer complet avec newsletter et informations de contact
• Basculement de vue persistant entre sessions

Navigation et routage

🔄 Système de basculement intelligent

• Bouton de basculement dans le header de chaque vue
• Préférences sauvegardées automatiquement dans le localStorage
• Transition fluide entre les modes desktop et mobile
• Design adaptatif qui s'ajuste automatiquement

🎨 Vue Desktop

• Navigation complète avec menus déroulants
• Layout en grille pour grands écrans
• Menus de navigation étendus
• Boutons CTA visibles en permanence

📱 Vue Mobile

• Interface optimisée pour petits écrans
• Menu hamburger avec overlay
• Navigation simplifiée et accessible
• Design mobile-first avec frame simulé

Technologies utilisées

⚛️ Frontend React

• React 18 : Hooks modernes et gestion d'état
• Tailwind CSS : Framework CSS utilitaire via CDN
• Responsive Design : Adaptation automatique à tous les écrans
• Local Storage : Persistance des préférences utilisateur

🎨 Design et UX

• Design System cohérent avec la marque tarmaq
• Animations fluides et micro-interactions
• Navigation intuitive avec feedback visuel
• Accessibilité : Navigation clavier et lecteurs d'écran

🧪 Tests et Qualité

• Jest : Framework de tests unitaires
• React Testing Library : Tests d'intégration
• Tests automatisés : Couverture des composants principaux

Démarrage rapide

🚀 Accès immédiat

1. Ouvrir index.html dans un navigateur
2. L'application React se charge automatiquement
3. Utiliser le bouton de basculement pour changer de vue
4. Les préférences sont sauvegardées automatiquement

🔧 Développement local

# Installer les dépendances
npm install

# Lancer en mode développement
npm run dev

# Lancer les tests
npm test

# Build de production
npm run build

🌐 Déploiement

• Version complète : Déployer index.html et le dossier src/
• Build optimisé : Utiliser npm run build et déployer le dossier dist/

Fonctionnalités clés

✨ Interface utilisateur unifiée

• Design responsive et moderne
• Animations fluides et transitions
• Navigation intuitive et accessible
• Thème cohérent avec la marque tarmaq

🔍 Navigation intelligente

• Basculement automatique entre vues
• Sauvegarde des préférences utilisateur
• Navigation contextuelle selon la taille d'écran
• Menus déroulants et navigation mobile

📱 Multi-plateforme intégré

• Vue desktop optimisée pour grands écrans
• Vue mobile adaptée aux petits écrans
• Basculement fluide entre les modes
• Design adaptatif automatique

Structure des fichiers

tarmaq/
├── index.html                 # Page d'accueil avec React intégré
├── src/
│   ├── App.jsx               # Application React principale
│   ├── main.jsx              # Point d'entrée React
│   ├── App.test.jsx          # Tests de l'application
│   ├── setupTests.js         # Configuration des tests
│   └── assets/               # Images et ressources
├── package.json              # Dépendances et scripts
├── vite.config.js            # Configuration Vite
└── README.md                 # Documentation

Composants React

🏗️ Architecture des composants

• App.jsx : Composant principal avec logique de basculement
• DesktopHeader : Navigation desktop avec menus déroulants
• MobileHeader : Navigation mobile avec menu hamburger
• Sections : Hero, Programmes, Expériences, Agenda, Partenaires
• Footer : Informations de contact et newsletter

🔄 Gestion d'état

• useState : Gestion des menus et modes de vue
• useEffect : Gestion des événements et localStorage
• useCallback : Optimisation des fonctions de gestion d'événements
• LocalStorage : Persistance des préférences utilisateur

Support et maintenance

🐛 Résolution de problèmes

• Application ne charge pas : Vérifier la console du navigateur
• Problèmes de style : Vérifier la connexion internet (Tailwind CDN)
• Erreurs React : Vérifier les dépendances avec npm install

📞 Contact

• Email : info@tarmaq.ch
• Site : tarmaq.ch
• Support technique : Vérifier la console du navigateur pour les erreurs

🔧 Maintenance

• Mise à jour des dépendances : npm update
• Tests automatisés : npm test
• Build de production : npm run build
• Déploiement : Copier les fichiers dans le dossier web

---

tarmaq — Accélérateur d'opportunités pour la relève à Genève