<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Site Professionnel</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="font-sans bg-gray-50">
<!-- Header -->
<header class="bg-white shadow-sm">
<div class="container mx-auto px-6 py-4">
<div class="flex items-center justify-between">
<div class="flex items-center">
<a href="#" class="text-2xl font-bold text-blue-600">Logo</a>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-700 hover:text-blue-600">Accueil</a>
<a href="#" class="text-gray-700 hover:text-blue-600">Services</a>
<a href="#" class="text-gray-700 hover:text-blue-600">À propos</a>
<a href="#" class="text-gray-700 hover:text-blue-600">Portfolio</a>
<a href="#" class="text-gray-700 hover:text-blue-600">Contact</a>
</nav>
<button class="md:hidden text-gray-700">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gradient-to-r from-blue-600 to-indigo-7 00 text-white py-20">
<div class="container mx-auto px-6 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Créez votre présence en ligne professionnelle</h1>
<p class="text-xl mb-8 max-w-2xl mx-auto">Notre plateforme AI vous permet de concevoir des sites web haut de gamme avec des fonctionnalités avancées en quelques clics.</p>
<div class="flex justify-center space-x-4">
<button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Commencer</button>
<button class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition duration-300">Voir la démo</button>
</div>
</div>
</section>
<!-- More content will be generated by AI... -->
</body>
</html>
body {
font-family: 'Roboto', sans-serif;
background-color: #f8fafc;
color: #1e293b;
}
.header {
background-color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle
const menuButton = document.querySelector('.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
menuButton.addEventListener('click', function() {
menu.classList.toggle('hidden');
});
});