continue this project, a give a modern design

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 (
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
{/* Header */}
<header className="sticky top-0 z-50 bg-white/95 backdrop-blur-lg border-b border-slate-200">
<div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
<div className="flex items-center gap-2">
<div className="text-3xl">🚀</div>
<h1 className="text-2xl font-bold text-slate-900">MissionAventure</h1>
</div>
<div className="hidden md:flex items-center gap-8">
<button onClick={() => { setCurrentPage('home'); setSelectedMission(null); }} className="text-slate-700 hover:text-slate-900 transition">Missions</button>
<button onClick={() => setCurrentPage('home')} className="text-slate-700 hover:text-slate-900 transition">Comment ça marche</button>
<button onClick={() => setCurrentPage('home')} className="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg hover:shadow-lg transition">Commencer</button>
</div>
</div>
</header>

{/* Mission Detail Page */}
{currentPage === 'mission-detail' && selectedMission && (
<main className="max-w-4xl mx-auto px-4 py-12">
<button onClick={() => { setCurrentPage('home'); setShowApplicationForm(false); }} className="flex items-center gap-2 text-purple-600 hover:text-purple-700 mb-8 transition">
<X size={20} /> Retour
</button>

<div className="bg-white rounded-2xl shadow-xl overflow-hidden">
<div className="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
<div className="text-8xl">{selectedMission.emoji}</div>
</div>

<div className="p-8">
<div className="flex items-start justify-between mb-6">
<div>
<h1 className="text-4xl font-bold text-slate-900 mb-4">{selectedMission.title}</h1>
<div className="flex items-center gap-4 mb-6">
<div className="flex items-center gap-2">
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white

README.md

@@ -1,10 +1,13 @@
 ---
-title: Missionquest
-emoji: 📊
-colorFrom: red
-colorTo: pink
+title: MissionQuest 🚀✨
+colorFrom: yellow
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/mission-card.js

@@ -0,0 +1,225 @@
+class MissionCard extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background: white;
+          border-radius: 1rem;
+          overflow: hidden;
+          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          transition: all 0.3s ease;
+        }
+        
+        :host(:hover) {
+          transform: translateY(-5px);
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        
+        .header {
+          height: 8rem;
+          background: linear-gradient(45deg, #6d28d9, #ec4899);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+        }
+        
+        .emoji {
+          font-size: 3rem;
+        }
+        
+        .favorite-btn {
+          position: absolute;
+          top: 0.75rem;
+          right: 0.75rem;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 50%;
+          width: 2.5rem;
+          height: 2.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        
+        .favorite-btn:hover {
+          background: rgba(255, 255, 255, 0.3);
+        }
+        
+        .content {
+          padding: 1.5rem;
+        }
+        
+        .client {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          margin-bottom: 1rem;
+        }
+        
+        .avatar {
+          width: 2.5rem;
+          height: 2.5rem;
+          border-radius: 50%;
+          background: linear-gradient(45deg, #6d28d9, #ec4899);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          font-weight: bold;
+          font-size: 0.875rem;
+        }
+        
+        .client-name {
+          font-size: 0.875rem;
+          color: #64748b;
+          font-weight: 600;
+        }
+        
+        .title {
+          font-size: 1.125rem;
+          font-weight: 700;
+          color: #1e293b;
+          margin-bottom: 0.75rem;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        
+        .description {
+          font-size: 0.875rem;
+          color: #64748b;
+          margin-bottom: 1rem;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        
+        .stats {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0.75rem 0;
+          border-top: 1px solid #e2e8f0;
+          border-bottom: 1px solid #e2e8f0;
+          margin-bottom: 1rem;
+        }
+        
+        .stat {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+        }
+        
+        .impact {
+          color: #f59e0b;
+        }
+        
+        .duration {
+          color: #64748b;
+        }
+        
+        .tags {
+          display: flex;
+          gap: 0.5rem;
+          flex-wrap: wrap;
+          margin-bottom: 1.5rem;
+        }
+        
+        .tag {
+          font-size: 0.75rem;
+          padding: 0.25rem 0.75rem;
+          background: #f3e8ff;
+          color: #6d28d9;
+          border-radius: 9999px;
+          font-weight: 600;
+        }
+        
+        .view-btn {
+          width: 100%;
+          padding: 0.75rem;
+          border-radius: 0.5rem;
+          background: linear-gradient(45deg, #6d28d9, #ec4899);
+          color: white;
+          font-weight: 600;
+          border: none;
+          cursor: pointer;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.5rem;
+        }
+        
+        .view-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        
+        .arrow {
+          transition: transform 0.2s;
+        }
+        
+        :host(:hover) .arrow {
+          transform: translateX(2px);
+        }
+      </style>
+      
+      <div class="header">
+        <div class="emoji">🚀</div>
+        <button class="favorite-btn">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white">
+            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
+          </svg>
+        </button>
+      </div>
+      
+      <div class="content">
+        <div class="client">
+          <div class="avatar">AV</div>
+          <span class="client-name">Atelier Vert</span>
+        </div>
+        
+        <h3 class="title">Co-créer un atlas visuel de la mode durable parisienne</h3>
+        <p class="description">Réinventons ensemble comment la mode durable peut transformer l'industrie parisienne.</p>
+        
+        <div class="stats">
+          <div class="stat">
+            <svg class="impact" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+            </svg>
+            <span>8.5/10</span>
+          </div>
+          <div class="stat">
+            <svg class="duration" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+              <circle cx="12" cy="12" r="10"></circle>
+              <polyline points="12 6 12 12 16 14"></polyline>
+            </svg>
+            <span>3-4 semaines</span>
+          </div>
+        </div>
+        
+        <div class="tags">
+          <span class="tag">Durabilité</span>
+          <span class="tag">Storytelling</span>
+        </div>
+        
+        <button class="view-btn">
+          Voir les détails
+          <svg class="arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+            <path d="M5 12h14"></path>
+            <path d="M12 5l7 7-7 7"></path>
+          </svg>
+        </button>
+      </div>
+    `;
+  }
+}
+
+customElements.define('mission-card', MissionCard);

components/navbar.js

@@ -0,0 +1,100 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: sticky;
+          top: 0;
+          z-index: 50;
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: blur(12px);
+          border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        }
+        
+        nav {
+          max-width: 1280px;
+          margin: 0 auto;
+          padding: 1rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+        
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          text-decoration: none;
+        }
+        
+        .logo-icon {
+          font-size: 1.75rem;
+        }
+        
+        .logo-text {
+          font-size: 1.25rem;
+          font-weight: 700;
+          color: #1e293b;
+          background: linear-gradient(45deg, #6d28d9, #ec4899);
+          -webkit-background-clip: text;
+          background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        
+        .nav-links {
+          display: none;
+          gap: 2rem;
+          align-items: center;
+        }
+        
+        .nav-link {
+          color: #64748b;
+          font-weight: 500;
+          text-decoration: none;
+          transition: color 0.2s;
+        }
+        
+        .nav-link:hover {
+          color: #6d28d9;
+        }
+        
+        .cta-btn {
+          padding: 0.5rem 1.5rem;
+          border-radius: 0.5rem;
+          font-weight: 600;
+          background: linear-gradient(45deg, #6d28d9, #ec4899);
+          color: white;
+          transition: all 0.2s;
+        }
+        
+        .cta-btn:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        
+        @media (min-width: 768px) {
+          .nav-links {
+            display: flex;
+          }
+        }
+      </style>
+      
+      <nav>
+        <a href="/" class="logo">
+          <span class="logo-icon">🚀</span>
+          <span class="logo-text">MissionQuest</span>
+        </a>
+        
+        <div class="nav-links">
+          <a href="#missions" class="nav-link">Missions</a>
+          <a href="#how-it-works" class="nav-link">Comment ça marche</a>
+          <a href="#get-started" class="cta-btn">Commencer</a>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,499 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+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 (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
+      {/* Header */}
+      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-lg border-b border-slate-200">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="text-3xl">🚀</div>
+            <h1 className="text-2xl font-bold text-slate-900">MissionAventure</h1>
+          </div>
+          <div className="hidden md:flex items-center gap-8">
+            <button onClick={() => { setCurrentPage('home'); setSelectedMission(null); }} className="text-slate-700 hover:text-slate-900 transition">Missions</button>
+            <button onClick={() => setCurrentPage('home')} className="text-slate-700 hover:text-slate-900 transition">Comment ça marche</button>
+            <button onClick={() => setCurrentPage('home')} className="px-6 py-2 bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-lg hover:shadow-lg transition">Commencer</button>
+          </div>
+        </div>
+      </header>
+
+      {/* Mission Detail Page */}
+      {currentPage === 'mission-detail' && selectedMission && (
+        <main className="max-w-4xl mx-auto px-4 py-12">
+          <button onClick={() => { setCurrentPage('home'); setShowApplicationForm(false); }} className="flex items-center gap-2 text-purple-600 hover:text-purple-700 mb-8 transition">
+            <X size={20} /> Retour
+          </button>
+
+          <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
+            <div className="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center">
+              <div className="text-8xl">{selectedMission.emoji}</div>
+            </div>
+
+            <div className="p-8">
+              <div className="flex items-start justify-between mb-6">
+                <div>
+                  <h1 className="text-4xl font-bold text-slate-900 mb-4">{selectedMission.title}</h1>
+                  <div className="flex items-center gap-4 mb-6">
+                    <div className="flex items-center gap-2">
+                      <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white font-bold">
+                        {selectedMission.avatar}
+                      </div>
+                      <span className="font-semibold text-slate-700">{selectedMission.client}</span>
+                    </div>
+                  </div>
+                </div>
+                <button
+                  onClick={() => toggleFavorite(selectedMission.id)}
+                  className="transition transform hover:scale-110"
+                >
+                  <Heart
+                    size={32}
+                    fill={favorites.includes(selectedMission.id) ? '#ec4899' : 'none'}
+                    stroke={favorites.includes(selectedMission.id) ? '#ec4899' : '#cbd5e1'}
+                  />
+                </button>
+              </div>
+
+              <div className="grid md:grid-cols-3 gap-4 mb-8">
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <div className="flex items-center gap-2 text-slate-600 mb-2">
+                    <Zap size={18} />
+                    <span className="text-sm font-semibold">Impact</span>
+                  </div>
+                  <div className="text-3xl font-bold text-purple-600">{selectedMission.impact}/10</div>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <div className="flex items-center gap-2 text-slate-600 mb-2">
+                    <Clock size={18} />
+                    <span className="text-sm font-semibold">Durée</span>
+                  </div>
+                  <div className="text-lg font-semibold text-slate-900">{selectedMission.duration}</div>
+                </div>
+                <div className="bg-slate-50 p-4 rounded-lg">
+                  <div className="flex items-center gap-2 text-slate-600 mb-2">
+                    <MapPin size={18} />
+                    <span className="text-sm font-semibold">Budget</span>
+                  </div>
+                  <div className="text-lg font-semibold text-slate-900">{selectedMission.budget}</div>
+                </div>
+              </div>
+
+              <div className="mb-8">
+                <h2 className="text-2xl font-bold text-slate-900 mb-4">À propos de la mission</h2>
+                <p className="text-lg text-slate-700 leading-relaxed mb-4">{selectedMission.fullDescription}</p>
+              </div>
+
+              <div className="mb-8">
+                <h3 className="text-xl font-bold text-slate-900 mb-4">Compétences requises</h3>
+                <ul className="space-y-2">
+                  {selectedMission.requirements.map((req, i) => (
+                    <li key={i} className="flex items-center gap-3 text-slate-700">
+                      <div className="w-2 h-2 rounded-full bg-purple-600" />
+                      {req}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className="mb-8">
+                <h3 className="text-xl font-bold text-slate-900 mb-4">Tags</h3>
+                <div className="flex flex-wrap gap-2">
+                  {selectedMission.tags.map((tag, i) => (
+                    <span key={i} className="px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold">
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              </div>
+
+              {showApplicationForm ? (
+                <div className="bg-gradient-to-br from-purple-50 to-pink-50 p-8 rounded-xl">
+                  <h3 className="text-2xl font-bold text-slate-900 mb-6">Postuler à cette mission</h3>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-semibold text-slate-700 mb-2">Nom complet</label>
+                      <input
+                        type="text"
+                        name="name"
+                        value={formData.name}
+                        onChange={handleFormChange}
+                        className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200"
+                        placeholder="Votre nom"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-semibold text-slate-700 mb-2">Email</label>
+                      <input
+                        type="email"
+                        name="email"
+                        value={formData.email}
+                        onChange={handleFormChange}
+                        className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200"
+                        placeholder="[email protected]"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-semibold text-slate-700 mb-2">Message de candidature</label>
+                      <textarea
+                        name="message"
+                        value={formData.message}
+                        onChange={handleFormChange}
+                        rows="5"
+                        className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:outline-none focus:border-purple-500 focus:ring-2 focus:ring-purple-200"
+                        placeholder="Dites-nous pourquoi vous êtes intéressé..."
+                      />
+                    </div>
+                    <div className="flex gap-4">
+                      <button 
+                        onClick={handleFormSubmit}
+                        className="flex-1 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-lg hover:shadow-lg transition"
+                      >
+                        Envoyer ma candidature
+                      </button>
+                      <button
+                        onClick={() => setShowApplicationForm(false)}
+                        className="flex-1 py-3 border border-slate-300 text-slate-700 font-bold rounded-lg hover:bg-slate-50 transition"
+                      >
+                        Annuler
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setShowApplicationForm(true)}
+                  className="w-full py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold text-lg rounded-lg hover:shadow-lg transition transform hover:scale-105"
+                >
+                  Postuler à cette mission
+                </button>
+              )}
+            </div>
+          </div>
+        </main>
+      )}
+
+      {/* Home Page */}
+      {currentPage === 'home' && (
+        <>
+          {/* Hero Section */}
+          <section className="max-w-7xl mx-auto px-4 py-20">
+            <div className="grid md:grid-cols-2 gap-12 items-center">
+              <div>
+                <h2 className="text-5xl md:text-6xl font-bold text-slate-900 mb-6 leading-tight">
+                  Votre prochaine mission est une <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">aventure</span>
+                </h2>
+                <p className="text-xl text-slate-600 mb-8">
+                  Découvrez un travail significatif qui s'aligne avec vos passions et nourrit votre croissance
+                </p>
+                <button className="px-8 py-4 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-lg hover:shadow-lg transition transform hover:scale-105">
+                  Trouver une Mission
+                </button>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                {['🎨', '🚀', '🌱', '💡'].map((emoji, i) => (
+                  <div key={i} className="aspect-square bg-gradient-to-br from-purple-100 to-pink-100 rounded-2xl flex items-center justify-center text-6xl hover:scale-110 transition">
+                    {emoji}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+
+          {/* Search and Filters */}
+          <section className="max-w-7xl mx-auto px-4 py-12">
+            <div className="bg-white rounded-2xl shadow-lg p-8">
+              <div className="mb-8">
+                <div className="relative">
+                  <Search className="absolute left-4 top-4 text-slate-400" size={24} />
+                  <input
+                    type="text"
+                    placeholder="Rechercher une mission ou un client..."
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                    className="w-full pl-12 pr-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-purple-500 text-lg"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <h3 className="text-sm font-bold text-slate-600 uppercase tracking-wide mb-4 flex items-center gap-2">
+                  <Filter size={18} />
+                  Filtrer par passion
+                </h3>
+                <div className="flex flex-wrap gap-3">
+                  {passions.map(passion => (
+                    <button
+                      key={passion.id}
+                      onClick={() => togglePassion(passion.id)}
+                      className={`px-4 py-2 rounded-full font-semibold transition ${
+                        selectedPassions.includes(passion.id)
+                          ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white shadow-lg'
+                          : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
+                      }`}
+                    >
+                      {passion.emoji} {passion.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <p className="text-slate-600 mt-6 text-center">
+              {filteredMissions.length} mission{filteredMissions.length > 1 ? 's' : ''} trouvée{filteredMissions.length > 1 ? 's' : ''}
+            </p>
+          </section>
+
+          {/* Missions Grid */}
+          <section className="max-w-7xl mx-auto px-4 pb-20">
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {filteredMissions.map(mission => (
+                <div
+                  key={mission.id}
+                  className="group bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition transform hover:scale-105"
+                >
+                  <div className="h-32 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center text-6xl relative">
+                    {mission.emoji}
+                    <button
+                      onClick={() => toggleFavorite(mission.id)}
+                      className="absolute top-3 right-3 transition"
+                    >
+                      <Heart
+                        size={24}
+                        fill={favorites.includes(mission.id) ? '#ffffff' : 'none'}
+                        stroke="#ffffff"
+                      />
+                    </button>
+                  </div>
+
+                  <div className="p-6">
+                    <div className="flex items-center gap-3 mb-4">
+                      <div className="w-10 h-10 rounded-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white text-sm font-bold">
+                        {mission.avatar}
+                      </div>
+                      <span className="font-semibold text-slate-700 text-sm">{mission.client}</span>
+                    </div>
+
+                    <h3 className="font-bold text-slate-900 mb-3 line-clamp-2 group-hover:text-purple-600 transition">
+                      {mission.title}
+                    </h3>
+
+                    <p className="text-slate-600 text-sm mb-4 line-clamp-2">
+                      {mission.description}
+                    </p>
+
+                    <div className="flex items-center justify-between mb-4 py-3 border-t border-b border-slate-100">
+                      <div className="flex items-center gap-2">
+                        <Zap size={16} className="text-amber-500" />
+                        <span className="text-sm font-semibold text-slate-700">{mission.impact}/10</span>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <Clock size={16} className="text-slate-500" />
+                        <span className="text-sm font-semibold text-slate-700">{mission.duration}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 mb-6">
+                      {mission.tags.slice(0, 2).map((tag, i) => (
+                        <span key={i} className="text-xs px-3 py-1 bg-purple-100 text-purple-700 rounded-full font-semibold">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+
+                    <button
+                      onClick={() => {
+                        setSelectedMission(mission);
+                        setCurrentPage('mission-detail');
+                      }}
+                      className="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-lg hover:shadow-lg transition flex items-center justify-center gap-2 group"
+                    >
+                      Voir les détails
+                      <ChevronRight size={18} className="group-hover:translate-x-1 transition" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {filteredMissions.length === 0 && (
+              <div className="text-center py-20">
+                <div className="text-6xl mb-4">🔍</div>
+                <h3 className="text-2xl font-bold text-slate-900 mb-2">Aucune mission trouvée</h3>
+                <p className="text-slate-600">Essayez d'ajuster vos filtres ou votre recherche</p>
+              </div>
+            )}
+          </section>
+        </>
+      )}
+    </div>
+  );
+};
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>