364 lines
18 KiB
HTML
364 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MRM & Co - Solutions Informatiques Innovantes</title>
|
|
<meta name="description"
|
|
content="MRM & Co, votre partenaire technologique pour la transformation digitale et les solutions informatiques innovantes.">
|
|
|
|
<!-- Tailwind CSS via CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
<!-- Configuration et styles externes -->
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
<script src="assets/js/config.js"></script>
|
|
|
|
<!-- SVG sprite icons (inline for performance) -->
|
|
<svg aria-hidden="true" style="display:none">
|
|
<symbol id="icon-web" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M12 4a8 8 0 100 16 8 8 0 000-16zm1 2v2h3a6 6 0 00-3-2zM6 8h3V6a6 6 0 00-3 2zm0 8a6 6 0 003 2v-2H6zm9 0v2a6 6 0 003-2h-3zM9 9h6v6H9V9z">
|
|
</path>
|
|
</symbol>
|
|
<symbol id="icon-software" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7H3zm7 6H8v-2h2v2zm6 0h-2v-2h2v2zM8 11H6V9h2v2zm10 0h-2V9h2v2z">
|
|
</path>
|
|
</symbol>
|
|
<symbol id="icon-mobile" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M7 2h10a2 2 0 012 2v16a2 2 0 01-2 2H7a2 2 0 01-2-2V4a2 2 0 012-2zm5 18a1 1 0 100-2 1 1 0 000 2z">
|
|
</path>
|
|
</symbol>
|
|
<symbol id="icon-linkedin" viewBox="0 0 24 24">
|
|
<path fill="currentColor"
|
|
d="M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.5 8.5h4V24h-4V8.5zM8.5 8.5h3.84v2.06h.05c.53-1 1.82-2.06 3.75-2.06 4.01 0 4.75 2.64 4.75 6.07V24h-4V15.5c0-2.02-.04-4.62-2.81-4.62-2.81 0-3.24 2.2-3.24 4.48V24h-4V8.5z">
|
|
</path>
|
|
</symbol>
|
|
</svg>
|
|
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var primary = (typeof config !== 'undefined' && config.colors && config.colors.primary) ? config.colors.primary : '#008455';
|
|
var svg = document.querySelector('svg[aria-hidden="true"]');
|
|
if (!svg) return;
|
|
svg.querySelectorAll('symbol > path').forEach(function (p) {
|
|
p.setAttribute('fill', primary);
|
|
});
|
|
} catch (e) {
|
|
// silent
|
|
}
|
|
})();
|
|
</script>
|
|
</head>
|
|
|
|
<body class="smooth-scroll bg-gray-50">
|
|
|
|
<!-- Interactive background canvas (behind content) -->
|
|
<canvas id="bg-canvas" aria-hidden="true" style="position:fixed;inset:0;z-index:-1;pointer-events:none;"></canvas>
|
|
|
|
<!-- Header / Navigation -->
|
|
<header class="fixed w-full top-0 z-50 bg-white shadow-md">
|
|
<nav class="container mx-auto px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Logo -->
|
|
<div class="flex items-center">
|
|
<a href="#" class="text-2xl font-bold" style="color: var(--color-primary)">
|
|
<span class="gradient-bg bg-clip-text text-transparent">MRM & Co</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigation Desktop -->
|
|
<div class="hidden md:flex items-center space-x-8">
|
|
<a href="#accueil" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Accueil</a>
|
|
<a href="#services" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Services</a>
|
|
<a href="#testimonials"
|
|
class="nav-link text-gray-700 hover:text-gray-900 font-medium">Témoignages</a>
|
|
<a href="#equipe" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Équipe</a>
|
|
<a href="#contact" class="nav-link text-gray-700 hover:text-gray-900 font-medium">Contact</a>
|
|
<a href="#contact" class="btn-primary text-white px-6 py-2 rounded-lg font-medium">
|
|
Devis gratuit
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Menu Mobile Toggle -->
|
|
<button id="mobile-menu-btn" class="md:hidden text-gray-700">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Menu Mobile -->
|
|
<div id="mobile-menu" class="hidden md:hidden pt-4 pb-2">
|
|
<a href="#accueil" class="block py-2 text-gray-700 hover:text-gray-900">Accueil</a>
|
|
<a href="#services" class="block py-2 text-gray-700 hover:text-gray-900">Services</a>
|
|
<a href="#testimonials" class="block py-2 text-gray-700 hover:text-gray-900">Témoignages</a>
|
|
<a href="#equipe" class="block py-2 text-gray-700 hover:text-gray-900">Équipe</a>
|
|
<a href="#contact" class="block py-2 text-gray-700 hover:text-gray-900">Contact</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="accueil" class="pt-24 pb-16 md:pt-32 md:pb-24">
|
|
<div class="container mx-auto px-6">
|
|
<div class="flex flex-col md:flex-row items-center">
|
|
<!-- Contenu Hero -->
|
|
<div class="md:w-1/2 mb-8 md:mb-0">
|
|
<h1 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
|
|
Transformez votre <span class="gradient-bg bg-clip-text text-transparent">vision digitale</span>
|
|
en réalité
|
|
</h1>
|
|
<p class="text-lg md:text-xl text-gray-600 mb-8 leading-relaxed" id="hero-description">
|
|
Solutions informatiques innovantes pour propulser votre entreprise vers le futur
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<a href="#contact"
|
|
class="btn-primary text-white px-8 py-4 rounded-lg font-semibold text-center shadow-lg">
|
|
Démarrer un projet
|
|
</a>
|
|
<a href="#services"
|
|
class="bg-white text-gray-800 px-8 py-4 rounded-lg font-semibold text-center border-2 border-gray-200 hover:border-gray-300 transition">
|
|
Découvrir nos services
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Hero / Illustration -->
|
|
<div class="md:w-1/2 md:pl-12">
|
|
<div class="relative hero-illustration" id="hero-illustration">
|
|
<div class="bg-blob blob-1 rounded-full"></div>
|
|
<div class="bg-blob blob-2 rounded-full"></div>
|
|
|
|
<!-- Simple abstract SVG illustration -->
|
|
<svg viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="g1" x1="0" x2="1">
|
|
<stop offset="0%" stop-color="#60a5fa" stop-opacity="1" />
|
|
<stop offset="100%" stop-color="#7c3aed" stop-opacity="1" />
|
|
</linearGradient>
|
|
</defs>
|
|
<g transform="translate(100,30)">
|
|
<rect x="0" y="40" width="560" height="360" rx="28" fill="url(#g1)" opacity="0.14">
|
|
</rect>
|
|
<g transform="translate(40,20)">
|
|
<circle cx="220" cy="160" r="90" fill="#fff" opacity="0.85"></circle>
|
|
<rect x="60" y="90" width="340" height="200" rx="18" fill="#fff" opacity="0.18">
|
|
</rect>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section id="services" class="py-16 md:py-24 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Nos Services
|
|
</h2>
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto mt-8">
|
|
Des solutions complètes et sur-mesure pour répondre à tous vos besoins informatiques
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Services générés dynamiquement -->
|
|
<div id="services-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<!-- Les services seront injectés ici par JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Testimonials -->
|
|
<section id="testimonials" class="py-16 md:py-24">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center mb-8">
|
|
<h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">Témoignages</h2>
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto mt-2">Ce que disent nos clients</p>
|
|
</div>
|
|
|
|
<div class="testimonials max-w-4xl mx-auto p-8 rounded-2xl shadow-lg bg-white">
|
|
<div id="testimonial-slides">
|
|
<div class="testimonial-slide active">
|
|
<blockquote class="text-gray-700 text-lg">“MRM & Co nous a aidés à moderniser notre plateforme —
|
|
résultats visibles dès le premier mois.”</blockquote>
|
|
<p class="mt-4 font-semibold">— Client A, CTO</p>
|
|
</div>
|
|
<div class="testimonial-slide">
|
|
<blockquote class="text-gray-700 text-lg">“Une équipe réactive et très professionnelle,
|
|
recommandée pour toute transformation digitale.”</blockquote>
|
|
<p class="mt-4 font-semibold">— Client B, CEO</p>
|
|
</div>
|
|
<div class="testimonial-slide">
|
|
<blockquote class="text-gray-700 text-lg">“Livraison dans les délais et performances au
|
|
rendez-vous — excellentes pratiques de dev.”</blockquote>
|
|
<p class="mt-4 font-semibold">— Client C, Product Lead</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls mt-6">
|
|
<button id="prev-testimonial" class="px-4 py-2 rounded-lg border">◀</button>
|
|
<div id="testimonial-dots" class="flex items-center gap-3 px-4"></div>
|
|
<button id="next-testimonial" class="px-4 py-2 rounded-lg border">▶</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Équipe Section -->
|
|
<section id="equipe" class="py-16 md:py-24 bg-gray-50">
|
|
<div class="container mx-auto px-6">
|
|
<div class="text-center mb-16">
|
|
<h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Notre Équipe
|
|
</h2>
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto mt-8">
|
|
Des experts passionnés dédiés à votre succès
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Équipe générée dynamiquement -->
|
|
<div id="team-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
|
<!-- Les membres de l'équipe seront injectés ici par JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Section -->
|
|
<section id="contact" class="py-16 md:py-24 bg-white">
|
|
<div class="container mx-auto px-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="text-center mb-12">
|
|
<h2 class="section-title text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
Contactez-nous
|
|
</h2>
|
|
<p class="text-lg text-gray-600 mt-8">
|
|
Parlons de votre projet et de vos ambitions digitales
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Formulaire -->
|
|
<div class="bg-gray-50 p-8 rounded-xl">
|
|
<form id="contact-form" class="space-y-6">
|
|
<div>
|
|
<label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nom
|
|
complet</label>
|
|
<input type="text" id="name" name="name" required
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Email</label>
|
|
<input type="email" id="email" name="email" required
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="phone"
|
|
class="block text-sm font-semibold text-gray-700 mb-2">Téléphone</label>
|
|
<input type="tel" id="phone" name="phone"
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
|
|
</div>
|
|
<div>
|
|
<label for="message"
|
|
class="block text-sm font-semibold text-gray-700 mb-2">Message</label>
|
|
<textarea id="message" name="message" rows="4" required
|
|
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"></textarea>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="w-full btn-primary text-white px-6 py-4 rounded-lg font-semibold shadow-lg">
|
|
Envoyer le message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Informations -->
|
|
<div class="space-y-6">
|
|
<div class="bg-gray-50 p-6 rounded-xl">
|
|
<div class="flex items-start">
|
|
<div class="text-3xl mr-4">📧</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">Email</h3>
|
|
<p class="text-gray-600" id="contact-email">contact@mrmco.fr</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-6 rounded-xl">
|
|
<div class="flex items-start">
|
|
<div class="text-3xl mr-4">📍</div>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-900 mb-1">Adresse</h3>
|
|
<p class="text-gray-600" id="contact-address">Paris, France</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-gray-900 text-white py-12">
|
|
<div class="container mx-auto px-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
|
|
<!-- À propos -->
|
|
<div class="md:col-span-2">
|
|
<h3 class="text-2xl font-bold mb-4 gradient-bg bg-clip-text text-transparent">MRM & Co</h3>
|
|
<p class="text-gray-400 mb-4" id="footer-description">
|
|
Votre partenaire technologique de confiance pour la transformation digitale et l'innovation.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Liens rapides -->
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Liens Rapides</h4>
|
|
<ul class="space-y-2">
|
|
<li><a href="#accueil" class="text-gray-400 hover:text-white transition">Accueil</a></li>
|
|
<li><a href="#services" class="text-gray-400 hover:text-white transition">Services</a></li>
|
|
<li><a href="#testimonials" class="text-gray-400 hover:text-white transition">Témoignages</a>
|
|
</li>
|
|
<li><a href="#equipe" class="text-gray-400 hover:text-white transition">Équipe</a></li>
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Réseaux sociaux -->
|
|
<div>
|
|
<h4 class="font-semibold mb-4">Suivez-nous</h4>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-2xl">🔗</a>
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-2xl">🐦</a>
|
|
<a href="#" class="text-gray-400 hover:text-white transition text-2xl">📘</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-800 pt-8 text-center text-gray-400">
|
|
<p>© <span id="current-year"></span> MRM & Co. Tous droits réservés.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript principal -->
|
|
<script src="assets/js/app.js"></script>
|
|
</body>
|
|
|
|
</html> |