Spaces:
Running
Running
Crée un site vitrine complet pour mon activité d’assistante administrative indépendante. Nom de marque : GC AssistPro Logo : insère le fichier cec1d4ab-0b26-4f71-96b9-4353a404601e.png en haut à gauche dans l’en-tête, à côté du nom. Taille environ 60px de haut, bien aligné. Style visuel : sobre, épuré, moderne, avec une palette neutre et professionnelle (blanc, gris clair, bleu doux). Mise en page fluide, responsive (adaptée à mobile et tablette). 📌 Structure de la page Header (fixe en haut) Logo + Nom de marque Menu de navigation avec ancres : À propos – Services – Avantages – Témoignages – Blog – FAQ – Contact Hero section (bandeau d’accueil) Phrase d’accroche : “Assistante administrative indépendante – Gagnez du temps, simplifiez vos démarches.” Bouton d’appel à l’action : “Contactez-moi dès aujourd’hui”. À propos de moi Photo/icône pro Texte présentant Gaëlle Clemenceau (assistante administrative indépendante avec +10 ans d’expérience). Mise en avant des valeurs : rigueur, discrétion, efficacité. Services Liste illustrée avec icônes : Gestion administrative Organisation de dossiers Gestion des mails RH/Paie Assistance pour PME & indépendants Avantages Trois blocs visuels : Gain de temps – Sérénité – Organisation simplifiée Témoignages (clients) Prévoir 2 à 3 encarts avec avis (texte fictif que je pourrai remplacer plus tard). Blog (articles courts) Section avec 3 aperçus d’articles (ex. : “Comment mieux organiser ses papiers ?”, “Les erreurs administratives à éviter”, “Déléguer pour gagner du temps”). Chaque article avec bouton “Lire la suite” (même si ce n’est qu’un aperçu). FAQ Exemple de 3 questions/réponses : “Combien coûtent vos services ?” → Tarifs adaptés aux besoins, devis personnalisé. “Travaillez-vous à distance ?” → Oui, totalement en ligne. “Puis-je confier uniquement une tâche ponctuelle ?” → Oui, prestations flexibles. Contact Formulaire (Nom, Email, Message). Adresse mail : gc.assistpro.services@gmail.com. Bouton “Envoyer”. Footer Logo + nom de marque Réseaux sociaux (LinkedIn, TikTok, Facebook, Instagram) Mentions légales (texte basique). ⚙️ Contraintes techniques Site responsive et rapide. Icônes modernes (ex. FontAwesome). Call-to-action clair et répété (ex. bouton “Contactez-moi”). Logo bien intégré dans le header et le footer. Objectif : site vitrine complet, crédible et professionnel qui donne envie aux indépendants et petites entreprises de me contacter. - Initial Deployment
2fcd290
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GC AssistPro - Assistante Administrative Indépendante</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-section { | |
| background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .logo-img { | |
| height: 60px; | |
| width: auto; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .testimonial-card { | |
| transition: all 0.3s ease; | |
| } | |
| .testimonial-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .article-card:hover { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://via.placeholder.com/60x60.png?text=GC+Logo" alt="GC AssistPro Logo" class="logo-img"> | |
| <h1 class="text-xl md:text-2xl font-bold text-gray-800">GC AssistPro</h1> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-6 lg:space-x-8"> | |
| <a href="#about" class="nav-link text-gray-700 hover:text-blue-600 font-medium">À propos</a> | |
| <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Services</a> | |
| <a href="#advantages" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Avantages</a> | |
| <a href="#testimonials" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Témoignages</a> | |
| <a href="#blog" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Blog</a> | |
| <a href="#faq" class="nav-link text-gray-700 hover:text-blue-600 font-medium">FAQ</a> | |
| <a href="#contact" class="nav-link text-blue-600 font-medium">Contact</a> | |
| </nav> | |
| </div> | |
| <!-- Mobile Navigation --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white w-full px-4 pb-4"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#about" class="text-gray-700 hover:text-blue-600 py-2">À propos</a> | |
| <a href="#services" class="text-gray-700 hover:text-blue-600 py-2">Services</a> | |
| <a href="#advantages" class="text-gray-700 hover:text-blue-600 py-2">Avantages</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 py-2">Témoignages</a> | |
| <a href="#blog" class="text-gray-700 hover:text-blue-600 py-2">Blog</a> | |
| <a href="#faq" class="text-gray-700 hover:text-blue-600 py-2">FAQ</a> | |
| <a href="#contact" class="text-blue-600 py-2">Contact</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-section pt-32 pb-20 px-4"> | |
| <div class="container mx-auto text-center"> | |
| <h1 class="text-3xl md:text-5xl font-bold text-gray-800 mb-6">Assistante administrative indépendante</h1> | |
| <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">Gagnez du temps, simplifiez vos démarches.</p> | |
| <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 inline-block"> | |
| Contactez-moi dès aujourd'hui | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 px-4 bg-white"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">À propos de moi</h2> | |
| <div class="flex flex-col md:flex-row items-center gap-8 max-w-5xl mx-auto"> | |
| <div class="md:w-1/3 flex justify-center"> | |
| <div class="w-48 h-48 rounded-full bg-gray-200 overflow-hidden flex items-center justify-center"> | |
| <i class="fas fa-user-tie text-6xl text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Gaëlle Clemenceau</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Assistante administrative indépendante avec plus de 10 ans d'expérience dans divers secteurs d'activité. | |
| Passionnée par l'organisation et la gestion efficace, je mets mes compétences à votre service pour | |
| vous libérer des tâches administratives chronophages. | |
| </p> | |
| <div class="flex flex-wrap gap-3 mt-6"> | |
| <span class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Rigueur</span> | |
| <span class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Discrétion</span> | |
| <span class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Efficacité</span> | |
| <span class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium">Réactivité</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 px-4 bg-gray-50"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Mes services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-folder-open text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Gestion administrative</h3> | |
| <p class="text-gray-600"> | |
| Prise en charge complète de vos tâches administratives courantes : gestion de courrier, | |
| classement de documents, préparation de dossiers. | |
| </p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-tasks text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Organisation de dossiers</h3> | |
| <p class="text-gray-600"> | |
| Mise en place d'un système d'archivage efficace, numérisation et classement de vos documents | |
| pour un accès rapide et sécurisé. | |
| </p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-envelope text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Gestion des mails</h3> | |
| <p class="text-gray-600"> | |
| Tri, réponse et suivi de vos emails professionnels pour une boîte de réception organisée | |
| et une communication fluide. | |
| </p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-users text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">RH/Paie</h3> | |
| <p class="text-gray-600"> | |
| Assistance dans la gestion des ressources humaines : préparation des bulletins de paie, | |
| suivi des congés, gestion des contrats. | |
| </p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-briefcase text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Assistance pour PME</h3> | |
| <p class="text-gray-600"> | |
| Soutien administratif sur mesure pour les petites et moyennes entreprises : gestion | |
| administrative globale ou partielle selon vos besoins. | |
| </p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-user-tie text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Assistance pour indépendants</h3> | |
| <p class="text-gray-600"> | |
| Accompagnement des professionnels indépendants dans leurs démarches administratives | |
| pour leur permettre de se concentrer sur leur cœur de métier. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Advantages Section --> | |
| <section id="advantages" class="py-16 px-4 bg-white"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Pourquoi faire appel à mes services ?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Advantage 1 --> | |
| <div class="text-center p-6 rounded-lg bg-blue-50 border border-blue-100"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-clock text-5xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Gain de temps</h3> | |
| <p class="text-gray-600"> | |
| Libérez-vous des tâches chronophages et concentrez-vous sur votre activité principale | |
| et votre développement commercial. | |
| </p> | |
| </div> | |
| <!-- Advantage 2 --> | |
| <div class="text-center p-6 rounded-lg bg-blue-50 border border-blue-100"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-heart text-5xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Sérénité</h3> | |
| <p class="text-gray-600"> | |
| Confiez vos démarches administratives à une professionnelle et bénéficiez d'un suivi | |
| rigoureux et d'une gestion sans stress. | |
| </p> | |
| </div> | |
| <!-- Advantage 3 --> | |
| <div class="text-center p-6 rounded-lg bg-blue-50 border border-blue-100"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-check-circle text-5xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Organisation simplifiée</h3> | |
| <p class="text-gray-600"> | |
| Bénéficiez d'une organisation optimale de vos documents et dossiers pour un accès | |
| rapide et une gestion efficace. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-16 px-4 bg-gray-50"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Ils me font confiance</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Marie D.</h4> | |
| <p class="text-sm text-gray-500">Gérante de boutique</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Gaëlle a révolutionné ma gestion administrative. En tant qu'indépendante, je passais | |
| des heures sur des tâches qui ne relevaient pas de mon cœur de métier. Désormais, | |
| je peux me concentrer sur mon activité et mes clients." | |
| </p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Thomas L.</h4> | |
| <p class="text-sm text-gray-500">Consultant indépendant</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Service impeccable et réactif. Gaëlle gère toute ma paperasse avec une rigueur | |
| exemplaire. Je recommande vivement ses services à tous les indépendants qui veulent | |
| gagner du temps et de la sérénité." | |
| </p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 mr-4 flex items-center justify-center"> | |
| <i class="fas fa-user text-xl text-gray-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-gray-800">Sophie R.</h4> | |
| <p class="text-sm text-gray-500">Directrice de PME</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic"> | |
| "Nous avons externalisé une partie de notre gestion administrative avec GC AssistPro | |
| et c'est un vrai soulagement pour toute l'équipe. Professionnalisme, discrétion et | |
| efficacité sont au rendez-vous." | |
| </p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section id="blog" class="py-16 px-4 bg-white"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Mon blog</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Article 1 --> | |
| <div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-5xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Comment mieux organiser ses papiers ?</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Découvrez mes astuces pour un classement efficace de vos documents administratifs | |
| et gagnez un temps précieux au quotidien. | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> | |
| Lire la suite <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-exclamation-triangle text-5xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Les erreurs administratives à éviter</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Tour d'horizon des erreurs courantes qui peuvent vous coûter cher et comment les | |
| prévenir pour une gestion sans accroc. | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> | |
| Lire la suite <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Article 3 --> | |
| <div class="article-card bg-white border border-gray-200 rounded-lg overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-clock text-5xl text-blue-600"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Déléguer pour gagner du temps</h3> | |
| <p class="text-gray-600 mb-4"> | |
| Pourquoi et comment externaliser vos tâches administratives peut être le meilleur | |
| investissement pour votre activité professionnelle. | |
| </p> | |
| <a href="#" class="text-blue-600 font-medium hover:text-blue-800 inline-flex items-center"> | |
| Lire la suite <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-16 px-4 bg-gray-50"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Questions fréquentes</h2> | |
| <div class="space-y-4"> | |
| <!-- FAQ Item 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-question w-full text-left p-6 font-medium text-gray-800 hover:bg-gray-50 focus:outline-none flex justify-between items-center"> | |
| <span>Combien coûtent vos services ?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-6 text-gray-600 hidden"> | |
| Mes tarifs sont adaptés à vos besoins spécifiques. Après analyse de vos demandes, | |
| je vous propose un devis personnalisé transparent. Je travaille au forfait ou à | |
| l'heure selon la nature de la prestation. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-question w-full text-left p-6 font-medium text-gray-800 hover:bg-gray-50 focus:outline-none flex justify-between items-center"> | |
| <span>Travaillez-vous à distance ?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-6 text-gray-600 hidden"> | |
| Oui, la majorité de mes prestations peuvent être réalisées totalement à distance | |
| grâce aux outils numériques sécurisés. Cela me permet d'accompagner des clients | |
| sur toute la France sans contrainte géographique. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <button class="faq-question w-full text-left p-6 font-medium text-gray-800 hover:bg-gray-50 focus:outline-none flex justify-between items-center"> | |
| <span>Puis-je confier uniquement une tâche ponctuelle ?</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-answer px-6 pb-6 text-gray-600 hidden"> | |
| Absolument. Je propose des prestations flexibles adaptées à tous les besoins, | |
| qu'il s'agisse d'une mission ponctuelle ou d'un accompagnement régulier. Nous | |
| définissons ensemble le cadre de notre collaboration. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 px-4 bg-white"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Contactez-moi</h2> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| Envoyer | |
| </button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2 bg-blue-50 p-8 rounded-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Coordonnées</h3> | |
| <p class="text-gray-600 mb-6"> | |
| Vous avez une question ou souhaitez un devis personnalisé ? N'hésitez pas à me contacter | |
| par email ou via les réseaux sociaux. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope text-blue-600 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Email</h4> | |
| <a href="mailto:gc.assistpro.services@gmail.com" class="text-blue-600 hover:underline">gc.assistpro.services@gmail.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock text-blue-600 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Horaires</h4> | |
| <p class="text-gray-600">Lundi au vendredi : 9h - 18h</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mt-1 mr-4"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Zone d'intervention</h4> | |
| <p class="text-gray-600">Travail à distance sur toute la France</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-medium text-gray-800 mb-3">Suivez-moi</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-2xl"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-2xl"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-2xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-2xl"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-8"> | |
| <div class="flex items-center space-x-3 mb-6 md:mb-0"> | |
| <img src="https://via.placeholder.com/60x60.png?text=GC+Logo" alt="GC AssistPro Logo" class="logo-img"> | |
| <h2 class="text-xl font-bold">GC AssistPro</h2> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#about" class="hover:text-blue-300">À propos</a> | |
| <a href="#services" class="hover:text-blue-300">Services</a> | |
| <a href="#blog" class="hover:text-blue-300">Blog</a> | |
| <a href="#contact" class="hover:text-blue-300">Contact</a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0"> | |
| © 2023 GC AssistPro - Tous droits réservés | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-tiktok"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center md:text-left"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a> | |
| <span class="mx-2 text-gray-600">•</span> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a> | |
| <span class="mx-2 text-gray-600">•</span> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">CGV</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // FAQ accordion | |
| document.querySelectorAll('.faq-question').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const answer = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| // Toggle answer visibility | |
| answer.classList.toggle('hidden'); | |
| // Rotate icon | |
| icon.classList.toggle('rotate-180'); | |
| // Close other answers | |
| document.querySelectorAll('.faq-question').forEach(otherButton => { | |
| if (otherButton !== button) { | |
| otherButton.nextElementSibling.classList.add('hidden'); | |
| otherButton.querySelector('i').classList.remove('rotate-180'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| // Calculate position with header offset | |
| const headerHeight = document.querySelector('header').offsetHeight; | |
| const targetPosition = targetElement.offsetTop - headerHeight; | |
| window.scrollTo({ | |
| top: targetPosition, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Gaelle29/gc-assistpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |