Spaces:

---

dides67

/

missionquest

like 0

Running

import React, { useState } from 'react'; import { Search, Filter, X, Heart, MapPin, Clock, Zap, ChevronRight } from 'lucide-react'; const MissionAventure = () => { const [currentPage, setCurrentPage] = useState('home'); const [selectedMission, setSelectedMission] = useState(null); const [searchTerm, setSearchTerm] = useState(''); const [selectedPassions, setSelectedPassions] = useState(['all']); const [favorites, setFavorites] = useState([]); const [formData, setFormData] = useState({ name: '', email: '', message: '' }); const [showApplicationForm, setShowApplicationForm] = useState(false); const passions = [ { id: 'all', label: 'Toutes', emoji: '✨' }, { id: 'sustainability', label: 'Durabilité', emoji: '🌱' }, { id: 'innovation', label: 'Innovation', emoji: '🚀' }, { id: 'creativity', label: 'Créativité', emoji: '🎨' }, { id: 'education', label: 'Éducation', emoji: '📚' }, { id: 'technology', label: 'Technologie', emoji: '💻' }, { id: 'social-impact', label: 'Impact Social', emoji: '🌍' } ]; const missions = [ { id: 1, title: 'Co-créer un atlas visuel de la mode durable parisienne', client: 'Atelier Vert', avatar: 'AV', impact: 8.5, emoji: '🌱', passions: ['sustainability', 'creativity'], tags: ['Durabilité', 'Storytelling', 'Photographie'], duration: '3-4 semaines', level: 'Défi modéré', description: 'Réinventons ensemble comment la mode durable peut transformer l\'industrie parisienne. Cette mission vous invite à créer un atlas visuel qui celebrate les artisans et créateurs qui redéfinissent la mode.', fullDescription: 'Rejoignez Atelier Vert pour un projet ambitieux et créatif. Nous cherchons un freelancer passionné par la mode durable pour documenter et raconter les histoires inspirantes des créateurs parisiens. Vous allez créer un atlas visuel complet qui servira de référence pour l\'industrie.', requirements: ['Expérience en photographie', 'Sens du storytelling', 'Connaissance de la mode durable'], budget: '€3,500 - €5,500', location: 'Paris' }, { id: 2, title: 'Développer une app de connexion intergénérationnelle', client: 'TechPourTous', avatar: 'TP', impact: 9.2, emoji: '🎯', passions: ['innovation', 'technology'], tags: ['Innovation', 'UX Design', 'Impact Social'], duration: '6-8 semaines', level: 'Grand défi', description: 'Créons un pont numérique entre les générations ! Cette mission consiste à développer une application qui connecte les seniors avec les jeunes pour un apprentissage mutuel.', fullDescription: 'TechPourTous cherche un développeur full-stack pour créer une plateforme innovante qui réunit les générations. L\'objectif est de faciliter l\'apprentissage mutuel et la transmission de savoirs entre seniors et jeunes adultes.', requirements: ['Développement React/Vue', 'Design UX/UI', 'Base de données'], budget: '€8,000 - €12,000', location: 'Télétravail' }, { id: 3, title: 'Co-concevoir un espace d\'apprentissage collaboratif', client: 'LeMans Innovation', avatar: 'LM', impact: 7.8, emoji: '📚', passions: ['education', 'social-impact'], tags: ['Éducation', 'Architecture', 'Innovation'], duration: '4-5 semaines', level: 'Défi créatif', description: 'Transformons un espace physique en un laboratoire d\'apprentissage collaboratif pour les entrepreneurs locaux.', fullDescription: 'LeMans Innovation souhaite réinventer un espace pour en faire un véritable lieu d\'innovation pédagogique. Nous recherchons un designer/architecte pour concevoir cet espace unique.', requirements: ['Design d\'espace', 'Pédagogie innovante', 'Gestion de projet'], budget: '€4,000 - €7,000', location: 'Le Mans' }, { id: 4, title: 'Créer une expérience sensorielle autour des bières artisanales', client: 'Brasserie Paysanne', avatar: 'BP', impact: 8.1, emoji: '🍺', passions: ['creativity', 'innovation'], tags: ['Créativité', 'Expérience', 'Storytelling'], duration: '2-3 semaines', level: 'Aventure rapide', description: 'Développons une expérience immersive qui raconte l\'histoire de chaque bière artisanale à travers les sens.', fullDescription: 'Brasserie Paysanne cherche un créateur d\'expériences pour concevoir une installation immersive unique. Votre mission sera de traduire la passion brassicole en une expérience mémorable.', requirements: ['Design créatif', 'Storytelling', 'Connaissances en brasserie'], budget: '€2,500 - €4,500', location: 'Bretagne' }, { id: 5, title: 'Concevoir une plateforme de démocratie participative locale', client: 'Citoyen Connecté', avatar: 'CC', impact: 9.5, emoji: '🌍', passions: ['technology', 'social-impact'], tags: ['Technologie', 'Démocratie', 'Innovation'], duration: '8-10 semaines', level: 'Mission majeure', description: 'Bâtissons ensemble un outil numérique qui redynamise la participation citoyenne dans les villes moyennes.', fullDescription: 'Citoyen Connecté lance un projet ambitieux pour transformer la démocratie locale. Nous recherchons une équipe multidisciplinaire pour concevoir une plateforme révolutionnaire.', requirements: ['Développement web avancé', 'Architecture logicielle', 'Engagement civique'], budget: '€12,000 - €18,000', location: 'Télétravail' }, { id: 6, title: 'Développer un curriculum d\'éducation alimentaire durable', client: 'VertGouter', avatar: 'VG', impact: 8.8, emoji: '🥕', passions: ['sustainability', 'education'], tags: ['Éducation', 'Durabilité', 'Pédagogie'], duration: '5-6 semaines', level: 'Défi éducatif', description: 'Créons ensemble un programme éducatif qui transforme la relation des enfants à l\'alimentation.', fullDescription: 'VertGouter souhaite créer un curriculum innovant pour enseigner l\'alimentation durable aux enfants. Nous cherchons un pédagogue passionné pour développer ce projet.', requirements: ['Expertise en pédagogie', 'Connaissances en durabilité', 'Créativité'], budget: '€3,500 - €6,000', location: 'France' } ]; const filteredMissions = missions.filter(mission => { const matchesSearch = mission.title.toLowerCase().includes(searchTerm.toLowerCase()) || mission.client.toLowerCase().includes(searchTerm.toLowerCase()); const matchesPassion = selectedPassions.includes('all') || mission.passions.some(p => selectedPassions.includes(p)); return matchesSearch && matchesPassion; }); const togglePassion = (passionId) => { if (passionId === 'all') { setSelectedPassions(['all']); } else { setSelectedPassions(prev => { const updated = prev.filter(p => p !== 'all'); if (updated.includes(passionId)) { return updated.filter(p => p !== passionId); } return [...updated, passionId]; }); } }; const toggleFavorite = (missionId) => { setFavorites(prev => prev.includes(missionId) ? prev.filter(id => id !== missionId) : [...prev, missionId] ); }; const handleFormChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleFormSubmit = (e) => { e.preventDefault(); console.log('Application submitted:', { ...formData, mission: selectedMission.id }); setFormData({ name: '', email: '', message: '' }); setShowApplicationForm(false); alert('Candidature envoyée avec succès !'); }; return (