<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mate & Move - Trouve ton coéquipier</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;600;700&family=Gotham:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<!-- En-tête -->
<header>
<nav>
<div class="logo">
<img src="images/Mate_and_move.webp" alt="Mate and move">
<span>Mate & Move</span>
</div>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#application">Application</a></li>
<li><a href="#evenements">Événements</a></li>
<li><a href="#apropos">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="accueil">
<h1>Trouve ton coéquipier idéal</h1>
<p>Connecte-toi avec des sportifs passionnés près de chez toi</p>
<a href="#application" class="cta-button">Découvrir l'app</a>
</section>
<!-- Application -->
<section id="application">
<h2 class="section-title">Notre Application</h2>
<div class="app-features">
<div class="feature-card">
<div class="feature-icon icon-vert">🏃</div>
<h3>Trouve des partenaires</h3>
<p>Découvre des sportifs qui partagent ta passion et ton niveau dans ta région.</p>
</div>
<div class="feature-card">
<div class="feature-icon icon-orange">📅</div>
<h3>Organise tes sessions</h3>
<p>Planifie facilement tes entraînements et matchs avec tes nouveaux coéquipiers.</p>
</div>
<div class="feature-card">
<div class="feature-icon icon-violet">🎯</div>
<h3>Rejoins des groupes</h3>
<p>Intègre des communautés sportives actives et participe à des événements locaux.</p>
</div>
</div>
</section>
<!-- À propos -->
<section class="about" id="apropos">
<h2 class="section-title" style="color: white;">À propos de Mate & Move</h2>
<div class="about-content">
<div>
<h3>Notre Mission</h3>
<p>Mate & Move est né d'une passion commune pour le sport et le besoin de faciliter les rencontres entre sportifs. Notre objectif est de créer une communauté dynamique où chacun peut trouver son partenaire de jeu idéal.</p>
</div>
<div>
<h3>Notre Vision</h3>
<p>Nous croyons que le sport est plus motivant et amusant quand on le pratique ensemble. Notre plateforme connecte les passionnés et facilite l'organisation de sessions sportives, quel que soit votre niveau.</p>
</div>
</div>
</section>
<!-- Événements -->
<section class="events" id="evenements">
<h2 class="section-title">Événements à venir</h2>
<div class="event-grid">
<div class="event-card">
<div class="event-card-header event-orange">
<h3>Tournoi de football</h3>
</div>
<div class="event-card-body">
<p><strong>Date:</strong> 15 décembre 2025</p>
<p><strong>Lieu:</strong> Stade municipal</p>
<p>Rejoignez-nous pour un tournoi amical entre passionnés!</p>
</div>
</div>
<div class="event-card">
<div class="event-card-header event-bleu">
<h3>Session basket</h3>
</div>
<div class="event-card-body">
<p><strong>Date:</strong> 20 décembre 2025</p>
<p><strong>Lieu:</strong> Gymnase central</p>
<p>Entraînement collectif ouvert à tous les niveaux.</p>
</div>
</div>
<div class="event-card">
<div class="event-card-header event-violet">
<h3>Course collective</h3>
</div>
<div class="event-card-body">
<p><strong>Date:</strong> 22 décembre 2025</p>
<p><strong>Lieu:</strong> Parc de la ville</p>
<p>Course matinale pour bien commencer le week-end!</p>
</div>
</div>
</div>
</section>
<!-- Footer / Contact -->
<footer id="contact">
<div class="footer-content">
<div class="footer-section">
<h3>Mate & Move</h3>
<p>La plateforme qui connecte les sportifs passionnés.</p>
</div>
<div class="footer-section">
<h3>Navigation</h3>
<p><a href="#accueil" style="color: white;">Accueil</a></p>
<p><a href="#application" style="color: white;">Application</a></p>
<p><a href="#evenements" style="color: white;">Événements</a></p>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>Email: contact@mateandmove.com</p>
<p>Téléphone: +33 X XX XX XX XX</p>
</div>
<div class="footer-section">
<h3>Légal</h3>
<p>Mentions légales</p>
<p>CGU</p>
<p>Politique de confidentialité</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Mate & Move. Tous droits réservés.</p>
</div>
</footer>
<!-- Chatbot -->
<div id="chatbot-container">
<div id="chatbot-button">
<span>💬</span>
</div>
<div id="chatbot-window">
<div id="chatbot-header">
<h3>Assistant Mate & Move</h3>
<button id="chatbot-close">✕</button>
</div>
<div id="chatbot-messages">
<div class="bot-message">
Bonjour ! 👋 Je suis là pour vous aider. Que souhaitez-vous savoir sur Mate & Move ?
</div>
</div>
<div id="chatbot-input-container">
<input type="text" id="chatbot-input" placeholder="Posez votre question...">
<button id="chatbot-send">➤</button>
</div>
</div>
</div>
<script>
// Chatbot functionality
const chatbotButton = document.getElementById('chatbot-button');
const chatbotWindow = document.getElementById('chatbot-window');
const chatbotClose = document.getElementById('chatbot-close');
const chatbotInput = document.getElementById('chatbot-input');
const chatbotSend = document.getElementById('chatbot-send');
const chatbotMessages = document.getElementById('chatbot-messages');
// Toggle chatbot
chatbotButton.addEventListener('click', () => {
chatbotWindow.style.display = chatbotWindow.style.display === 'flex' ? 'none' : 'flex';
chatbotButton.style.display = 'none';
});
chatbotClose.addEventListener('click', () => {
chatbotWindow.style.display = 'none';
chatbotButton.style.display = 'flex';
});
// Send message
function sendMessage() {
const message = chatbotInput.value.trim();
if (message === '') return;
// Add user message
const userDiv = document.createElement('div');
userDiv.className = 'user-message';
userDiv.textContent = message;
chatbotMessages.appendChild(userDiv);
chatbotInput.value = '';
// Scroll to bottom
chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
// Simulate bot response
setTimeout(() => {
const botDiv = document.createElement('div');
botDiv.className = 'bot-message';
botDiv.textContent = getBotResponse(message);
chatbotMessages.appendChild(botDiv);
chatbotMessages.scrollTop = chatbotMessages.scrollHeight;
}, 500);
}
chatbotSend.addEventListener('click', sendMessage);
chatbotInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
// Simple bot responses
function getBotResponse(message) {
const msg = message.toLowerCase();
if (msg.includes('sport') || msg.includes('activité')) {
return 'Mate & Move propose de nombreux sports : football, basket, running, tennis et bien plus ! Quelle activité vous intéresse ?';
} else if (msg.includes('inscri') || msg.includes('commenc')) {
return 'Pour commencer, téléchargez notre application et créez votre profil. C\'est simple et rapide !';
} else if (msg.includes('événement') || msg.includes('tournoi')) {
return 'Consultez notre section "Événements" pour voir tous les tournois et sessions à venir !';
} else if (msg.includes('gratuit') || msg.includes('prix')) {
return 'L\'inscription est gratuite ! Certains événements premium peuvent avoir un coût symbolique.';
} else if (msg.includes('contact') || msg.includes('aide')) {
return 'Vous pouvez nous contacter à contact@mateandmove.com ou par téléphone. Notre équipe répond sous 24h !';
} else {
return 'Merci pour votre question ! Pour plus d\'informations, n\'hésitez pas à explorer notre site ou nous contacter directement.';
}
}
</script>
</body>
</html>
