Hugging Face's logo

Spaces:
Hanoxbh
/
minehost
Running

App Files Community
Hanoxbh commited on
Commit
ed7166f
·
verified ·
1 Parent(s): e0a3566

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +94 -226
index.html CHANGED
@@ -71,7 +71,7 @@
71
  <div class="container mx-auto px-4 py-3">
72
  <div class="flex justify-between items-center">
73
  <div class="flex items-center">
74
- <a href="#" class="flex items-center">
75
  <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
76
  <i class="fas fa-server text-white text-xl"></i>
77
  </div>
@@ -80,26 +80,66 @@
80
  </div>
81
 
82
  <nav class="hidden md:flex space-x-8">
83
- <a href="#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Services</a>
84
- <a href="#features" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Fonctionnalités</a>
85
- <a href="#pricing" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Tarifs</a>
86
- <a href="#about" class="nav-link text-gray-600 hover:text-blue-600 font-medium">À propos</a>
87
- <a href="#contact" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Contact</a>
88
  </nav>
89
 
90
  <div class="flex items-center space-x-4">
91
- <a href="#" class="hidden md:block text-gray-600 hover:text-blue-600">
92
- <i class="fas fa-user"></i>
93
- </a>
94
- <a href="#" class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-all">
95
- Commander
96
- </a>
97
- <button class="md:hidden text-gray-600 focus:outline-none">
 
 
 
 
 
 
 
 
 
 
98
  <i class="fas fa-bars text-xl"></i>
99
  </button>
100
  </div>
101
  </div>
102
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  </header>
104
 
105
  <!-- Hero Section -->
@@ -110,10 +150,10 @@
110
  <h1 class="text-4xl md:text-5xl font-bold mb-6">Hébergement Web Haute Performance</h1>
111
  <p class="text-xl mb-8 text-blue-100">Des solutions d'hébergement fiables, sécurisées et optimisées pour vos projets web.</p>
112
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
113
- <a href="#pricing" class="px-8 py-3 bg-white text-blue-600 font-semibold rounded-md hover:bg-gray-100 transition-all text-center">
114
  Voir nos offres
115
  </a>
116
- <a href="#contact" class="px-8 py-3 border-2 border-white text-white font-semibold rounded-md hover:bg-white hover:text-blue-600 transition-all text-center">
117
  Nous contacter
118
  </a>
119
  </div>
@@ -167,7 +207,7 @@
167
  </div>
168
  <h3 class="text-xl font-bold text-gray-800 mb-3">Hébergement Mutualisé</h3>
169
  <p class="text-gray-600">Solution économique parfaite pour les petits sites web avec des ressources partagées.</p>
170
- <a href="#" class="mt-4 inline-flex items-center text-blue-600 font-medium">
171
  En savoir plus
172
  <i class="fas fa-arrow-right ml-2"></i>
173
  </a>
@@ -179,7 +219,7 @@
179
  </div>
180
  <h3 class="text-xl font-bold text-gray-800 mb-3">Serveurs VPS</h3>
181
  <p class="text-gray-600">Ressources dédiées avec la flexibilité d'un serveur virtuel privé pour plus de contrôle.</p>
182
- <a href="#" class="mt-4 inline-flex items-center text-green-600 font-medium">
183
  En savoir plus
184
  <i class="fas fa-arrow-right ml-2"></i>
185
  </a>
@@ -191,7 +231,7 @@
191
  </div>
192
  <h3 class="text-xl font-bold text-gray-800 mb-3">Serveurs Dédiés</h3>
193
  <p class="text-gray-600">Performance maximale avec un serveur physique entièrement dédié à votre projet.</p>
194
- <a href="#" class="mt-4 inline-flex items-center text-purple-600 font-medium">
195
  En savoir plus
196
  <i class="fas fa-arrow-right ml-2"></i>
197
  </a>
@@ -203,7 +243,7 @@
203
  </div>
204
  <h3 class="text-xl font-bold text-gray-800 mb-3">Hébergement Cloud</h3>
205
  <p class="text-gray-600">Solution évolutive avec des ressources distribuées sur plusieurs serveurs pour une haute disponibilité.</p>
206
- <a href="#" class="mt-4 inline-flex items-center text-red-600 font-medium">
207
  En savoir plus
208
  <i class="fas fa-arrow-right ml-2"></i>
209
  </a>
@@ -352,7 +392,7 @@
352
  <span>Certificat SSL gratuit</span>
353
  </li>
354
  </ul>
355
- <a href="#" class="block w-full py-3 px-4 text-center bg-gray-100 text-gray-800 font-medium rounded-md hover:bg-gray-200 transition-all">
356
  Choisir ce plan
357
  </a>
358
  </div>
@@ -392,7 +432,7 @@
392
  <span>Certificat SSL gratuit</span>
393
  </li>
394
  </ul>
395
- <a href="#" class="block w-full py-3 px-4 text-center bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-all">
396
  Choisir ce plan
397
  </a>
398
  </div>
@@ -429,7 +469,7 @@
429
  <span>Certificat SSL gratuit</span>
430
  </li>
431
  </ul>
432
- <a href="#" class="block w-full py-3 px-4 text-center bg-gray-100 text-gray-800 font-medium rounded-md hover:bg-gray-200 transition-all">
433
  Choisir ce plan
434
  </a>
435
  </div>
@@ -437,7 +477,7 @@
437
 
438
  <div class="text-center mt-12">
439
  <p class="text-gray-600 mb-4">Vous avez des besoins spécifiques ?</p>
440
- <a href="#contact" class="inline-flex items-center px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition-all">
441
  <i class="fas fa-envelope mr-2"></i>
442
  Contactez notre équipe
443
  </a>
@@ -517,85 +557,16 @@
517
  </div>
518
  </section>
519
 
520
- <!-- About Section -->
521
- <section id="about" class="py-20 bg-white">
522
- <div class="container mx-auto px-4">
523
- <div class="flex flex-col lg:flex-row items-center">
524
- <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
525
- <h2 class="text-3xl font-bold text-gray-800 mb-6">Notre histoire</h2>
526
- <p class="text-gray-600 mb-6">Fondée en 2010, HostFlow est née de la passion pour les technologies web et du constat que de nombreux hébergeurs négligeaient l'expérience client.</p>
527
- <p class="text-gray-600 mb-6">Notre mission : fournir des solutions d'hébergement performantes, sécurisées et accompagnées d'un service client exceptionnel.</p>
528
- <p class="text-gray-600 mb-8">Aujourd'hui, avec plus de 50 employés et 15 centres de données à travers le monde, nous hébergeons des milliers de sites web tout en restant fidèles à nos valeurs initiales.</p>
529
-
530
- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
531
- <a href="#" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-all flex items-center justify-center">
532
- <i class="fas fa-users mr-2"></i>
533
- Rencontrer l'équipe
534
- </a>
535
- <a href="#" class="px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition-all flex items-center justify-center">
536
- <i class="fas fa-building mr-2"></i>
537
- Nos datacenters
538
- </a>
539
- </div>
540
- </div>
541
-
542
- <div class="lg:w-1/2">
543
- <div class="bg-gray-100 p-8 rounded-xl">
544
- <h3 class="text-xl font-bold text-gray-800 mb-6">Nos valeurs</h3>
545
-
546
- <div class="space-y-6">
547
- <div class="flex">
548
- <div class="mr-6">
549
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
550
- <i class="fas fa-hand-holding-heart text-blue-600 text-xl"></i>
551
- </div>
552
- </div>
553
- <div>
554
- <h4 class="text-lg font-semibold text-gray-800 mb-2">Engagement client</h4>
555
- <p class="text-gray-600">Votre satisfaction est notre priorité absolue. Nous faisons tout notre possible pour répondre à vos besoins.</p>
556
- </div>
557
- </div>
558
-
559
- <div class="flex">
560
- <div class="mr-6">
561
- <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
562
- <i class="fas fa-leaf text-green-600 text-xl"></i>
563
- </div>
564
- </div>
565
- <div>
566
- <h4 class="text-lg font-semibold text-gray-800 mb-2">Écoresponsabilité</h4>
567
- <p class="text-gray-600">Nos datacenters utilisent des énergies renouvelables et des systèmes de refroidissement optimisés.</p>
568
- </div>
569
- </div>
570
-
571
- <div class="flex">
572
- <div class="mr-6">
573
- <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
574
- <i class="fas fa-lightbulb text-purple-600 text-xl"></i>
575
- </div>
576
- </div>
577
- <div>
578
- <h4 class="text-lg font-semibold text-gray-800 mb-2">Innovation</h4>
579
- <p class="text-gray-600">Nous investissons continuellement dans les dernières technologies pour améliorer nos services.</p>
580
- </div>
581
- </div>
582
- </div>
583
- </div>
584
- </div>
585
- </div>
586
- </div>
587
- </section>
588
-
589
  <!-- CTA Section -->
590
  <section class="py-20 bg-blue-600 text-white">
591
  <div class="container mx-auto px-4 text-center">
592
  <h2 class="text-3xl font-bold mb-6">Prêt à lancer votre projet ?</h2>
593
  <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8">Rejoignez des milliers de clients satisfaits qui font confiance à HostFlow pour leur hébergement web.</p>
594
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
595
- <a href="#pricing" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-md hover:bg-gray-100 transition-all">
596
  Choisir un plan d'hébergement
597
  </a>
598
- <a href="#contact" class="px-8 py-4 border-2 border-white text-white font-bold rounded-md hover:bg-white hover:text-blue-600 transition-all">
599
  Nous contacter
600
  </a>
601
  </div>
@@ -665,7 +636,7 @@
665
 
666
  <div class="text-center mt-12">
667
  <p class="text-gray-600 mb-4">Vous ne trouvez pas la réponse à votre question ?</p>
668
- <a href="#contact" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-all">
669
  <i class="fas fa-envelope mr-2"></i>
670
  Contactez notre support
671
  </a>
@@ -674,122 +645,12 @@
674
  </div>
675
  </section>
676
 
677
- <!-- Contact Section -->
678
- <section id="contact" class="py-20 bg-white">
679
- <div class="container mx-auto px-4">
680
- <div class="text-center mb-16">
681
- <h2 class="text-3xl font-bold text-gray-800 mb-4">Contactez-nous</h2>
682
- <p class="text-xl text-gray-600 max-w-3xl mx-auto">Notre équipe est à votre disposition pour répondre à toutes vos questions.</p>
683
- </div>
684
-
685
- <div class="flex flex-col lg:flex-row">
686
- <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
687
- <div class="bg-gray-50 p-8 rounded-xl">
688
- <h3 class="text-xl font-bold text-gray-800 mb-6">Informations de contact</h3>
689
-
690
- <div class="space-y-6">
691
- <div class="flex">
692
- <div class="mr-6">
693
- <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
694
- <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
695
- </div>
696
- </div>
697
- <div>
698
- <h4 class="text-lg font-semibold text-gray-800 mb-1">Adresse</h4>
699
- <p class="text-gray-600">Rue du Serveur 42, 1000 Lausanne, Suisse</p>
700
- </div>
701
- </div>
702
-
703
- <div class="flex">
704
- <div class="mr-6">
705
- <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
706
- <i class="fas fa-phone-alt text-green-600 text-xl"></i>
707
- </div>
708
- </div>
709
- <div>
710
- <h4 class="text-lg font-semibold text-gray-800 mb-1">Téléphone</h4>
711
- <p class="text-gray-600">+41 21 123 45 67</p>
712
- <p class="text-gray-600">Support 24/7</p>
713
- </div>
714
- </div>
715
-
716
- <div class="flex">
717
- <div class="mr-6">
718
- <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
719
- <i class="fas fa-envelope text-purple-600 text-xl"></i>
720
- </div>
721
- </div>
722
- <div>
723
- <h4 class="text-lg font-semibold text-gray-800 mb-1">Email</h4>
724
- <p class="text-gray-600">contact@hostflow.ch</p>
725
- <p class="text-gray-600">support@hostflow.ch</p>
726
- </div>
727
- </div>
728
- </div>
729
-
730
- <div class="mt-10">
731
- <h3 class="text-xl font-bold text-gray-800 mb-4">Suivez-nous</h3>
732
- <div class="flex space-x-4">
733
- <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-all">
734
- <i class="fab fa-facebook-f"></i>
735
- </a>
736
- <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-all">
737
- <i class="fab fa-twitter"></i>
738
- </a>
739
- <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-all">
740
- <i class="fab fa-linkedin-in"></i>
741
- </a>
742
- <a href="#" class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 hover:bg-blue-200 transition-all">
743
- <i class="fab fa-instagram"></i>
744
- </a>
745
- </div>
746
- </div>
747
- </div>
748
- </div>
749
-
750
- <div class="lg:w-1/2">
751
- <form class="bg-gray-50 p-8 rounded-xl">
752
- <div class="mb-6">
753
- <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label>
754
- <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Votre nom">
755
- </div>
756
-
757
- <div class="mb-6">
758
- <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
759
- <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="votre@email.com">
760
- </div>
761
-
762
- <div class="mb-6">
763
- <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label>
764
- <select id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
765
- <option value="">Sélectionnez un sujet</option>
766
- <option value="sales">Demande commerciale</option>
767
- <option value="support">Support technique</option>
768
- <option value="billing">Question facturation</option>
769
- <option value="other">Autre</option>
770
- </select>
771
- </div>
772
-
773
- <div class="mb-6">
774
- <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
775
- <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Votre message..."></textarea>
776
- </div>
777
-
778
- <button type="submit" class="w-full py-3 px-4 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-all">
779
- Envoyer le message
780
- </button>
781
- </form>
782
- </div>
783
- </div>
784
- </div>
785
- </section>
786
-
787
  <!-- Footer -->
788
  <footer class="bg-gray-900 text-white pt-16 pb-8">
789
  <div class="container mx-auto px-4">
790
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
791
  <div>
792
- <a href="#" class="flex items-center mb-6">
793
  <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
794
  <i class="fas fa-server text-white text-xl"></i>
795
  </div>
@@ -815,33 +676,33 @@
815
  <div>
816
  <h3 class="text-lg font-semibold mb-6">Services</h3>
817
  <ul class="space-y-3">
818
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Hébergement Mutualisé</a></li>
819
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Serveurs VPS</a></li>
820
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Serveurs Dédiés</a></li>
821
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Hébergement Cloud</a></li>
822
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Hébergement WordPress</a></li>
823
  </ul>
824
  </div>
825
 
826
  <div>
827
  <h3 class="text-lg font-semibold mb-6">Entreprise</h3>
828
  <ul class="space-y-3">
829
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">À propos</a></li>
830
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Carrières</a></li>
831
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Blog</a></li>
832
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Presse</a></li>
833
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Partenaires</a></li>
834
  </ul>
835
  </div>
836
 
837
  <div>
838
  <h3 class="text-lg font-semibold mb-6">Support</h3>
839
  <ul class="space-y-3">
840
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Centre d'aide</a></li>
841
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Documentation</a></li>
842
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Statut des services</a></li>
843
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">Contact</a></li>
844
- <li><a href="#" class="text-gray-400 hover:text-white transition-all">FAQ</a></li>
845
  </ul>
846
  </div>
847
  </div>
@@ -850,9 +711,9 @@
850
  <div class="flex flex-col md:flex-row justify-between items-center">
851
  <p class="text-gray-400 mb-4 md:mb-0">© 2023 HostFlow. Tous droits réservés.</p>
852
  <div class="flex space-x-6">
853
- <a href="#" class="text-gray-400 hover:text-white transition-all">Mentions légales</a>
854
- <a href="#" class="text-gray-400 hover:text-white transition-all">Politique de confidentialité</a>
855
- <a href="#" class="text-gray-400 hover:text-white transition-all">Conditions générales</a>
856
  </div>
857
  </div>
858
  </div>
@@ -878,8 +739,15 @@
878
  });
879
  });
880
 
881
- // Mobile menu toggle (would need implementation)
882
- // Form submission handling (would need backend implementation)
 
 
 
 
 
 
 
883
  </script>
884
  <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=Hanoxbh/minehost" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
885
  </html>
 
71
  <div class="container mx-auto px-4 py-3">
72
  <div class="flex justify-between items-center">
73
  <div class="flex items-center">
74
+ <a href="index.php" class="flex items-center">
75
  <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
76
  <i class="fas fa-server text-white text-xl"></i>
77
  </div>
 
80
  </div>
81
 
82
  <nav class="hidden md:flex space-x-8">
83
+ <a href="index.php#services" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Services</a>
84
+ <a href="index.php#features" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Fonctionnalités</a>
85
+ <a href="index.php#pricing" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Tarifs</a>
86
+ <a href="about.php" class="nav-link text-gray-600 hover:text-blue-600 font-medium">À propos</a>
87
+ <a href="contact.php" class="nav-link text-gray-600 hover:text-blue-600 font-medium">Contact</a>
88
  </nav>
89
 
90
  <div class="flex items-center space-x-4">
91
+ <?php if(isset($_SESSION['user'])): ?>
92
+ <a href="account.php" class="flex items-center text-gray-600 hover:text-blue-600">
93
+ <i class="fas fa-user-circle text-xl mr-1"></i>
94
+ <span>Mon compte</span>
95
+ </a>
96
+ <a href="logout.php" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-all">
97
+ Déconnexion
98
+ </a>
99
+ <?php else: ?>
100
+ <a href="login.php" class="hidden md:block text-gray-600 hover:text-blue-600">
101
+ <i class="fas fa-user"></i>
102
+ </a>
103
+ <a href="register.php" class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-all">
104
+ Créer un compte
105
+ </a>
106
+ <?php endif; ?>
107
+ <button class="md:hidden text-gray-600 focus:outline-none" id="mobile-menu-button">
108
  <i class="fas fa-bars text-xl"></i>
109
  </button>
110
  </div>
111
  </div>
112
  </div>
113
+
114
+ <!-- Mobile menu -->
115
+ <div class="md:hidden hidden bg-white shadow-md" id="mobile-menu">
116
+ <div class="container mx-auto px-4 py-3">
117
+ <div class="flex flex-col space-y-4">
118
+ <a href="index.php#services" class="text-gray-600 hover:text-blue-600 font-medium">Services</a>
119
+ <a href="index.php#features" class="text-gray-600 hover:text-blue-600 font-medium">Fonctionnalités</a>
120
+ <a href="index.php#pricing" class="text-gray-600 hover:text-blue-600 font-medium">Tarifs</a>
121
+ <a href="about.php" class="text-gray-600 hover:text-blue-600 font-medium">À propos</a>
122
+ <a href="contact.php" class="text-gray-600 hover:text-blue-600 font-medium">Contact</a>
123
+ <div class="pt-4 border-t border-gray-200">
124
+ <?php if(isset($_SESSION['user'])): ?>
125
+ <a href="account.php" class="block mb-3 text-gray-600 hover:text-blue-600 font-medium">
126
+ <i class="fas fa-user-circle mr-2"></i>Mon compte
127
+ </a>
128
+ <a href="logout.php" class="block px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-all text-center">
129
+ Déconnexion
130
+ </a>
131
+ <?php else: ?>
132
+ <a href="login.php" class="block mb-3 px-4 py-2 bg-gray-100 text-gray-800 rounded-md hover:bg-gray-200 transition-all text-center">
133
+ Connexion
134
+ </a>
135
+ <a href="register.php" class="block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-all text-center">
136
+ Créer un compte
137
+ </a>
138
+ <?php endif; ?>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
  </header>
144
 
145
  <!-- Hero Section -->
 
150
  <h1 class="text-4xl md:text-5xl font-bold mb-6">Hébergement Web Haute Performance</h1>
151
  <p class="text-xl mb-8 text-blue-100">Des solutions d'hébergement fiables, sécurisées et optimisées pour vos projets web.</p>
152
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
153
+ <a href="index.php#pricing" class="px-8 py-3 bg-white text-blue-600 font-semibold rounded-md hover:bg-gray-100 transition-all text-center">
154
  Voir nos offres
155
  </a>
156
+ <a href="contact.php" class="px-8 py-3 border-2 border-white text-white font-semibold rounded-md hover:bg-white hover:text-blue-600 transition-all text-center">
157
  Nous contacter
158
  </a>
159
  </div>
 
207
  </div>
208
  <h3 class="text-xl font-bold text-gray-800 mb-3">Hébergement Mutualisé</h3>
209
  <p class="text-gray-600">Solution économique parfaite pour les petits sites web avec des ressources partagées.</p>
210
+ <a href="shared-hosting.php" class="mt-4 inline-flex items-center text-blue-600 font-medium">
211
  En savoir plus
212
  <i class="fas fa-arrow-right ml-2"></i>
213
  </a>
 
219
  </div>
220
  <h3 class="text-xl font-bold text-gray-800 mb-3">Serveurs VPS</h3>
221
  <p class="text-gray-600">Ressources dédiées avec la flexibilité d'un serveur virtuel privé pour plus de contrôle.</p>
222
+ <a href="vps.php" class="mt-4 inline-flex items-center text-green-600 font-medium">
223
  En savoir plus
224
  <i class="fas fa-arrow-right ml-2"></i>
225
  </a>
 
231
  </div>
232
  <h3 class="text-xl font-bold text-gray-800 mb-3">Serveurs Dédiés</h3>
233
  <p class="text-gray-600">Performance maximale avec un serveur physique entièrement dédié à votre projet.</p>
234
+ <a href="dedicated.php" class="mt-4 inline-flex items-center text-purple-600 font-medium">
235
  En savoir plus
236
  <i class="fas fa-arrow-right ml-2"></i>
237
  </a>
 
243
  </div>
244
  <h3 class="text-xl font-bold text-gray-800 mb-3">Hébergement Cloud</h3>
245
  <p class="text-gray-600">Solution évolutive avec des ressources distribuées sur plusieurs serveurs pour une haute disponibilité.</p>
246
+ <a href="cloud.php" class="mt-4 inline-flex items-center text-red-600 font-medium">
247
  En savoir plus
248
  <i class="fas fa-arrow-right ml-2"></i>
249
  </a>
 
392
  <span>Certificat SSL gratuit</span>
393
  </li>
394
  </ul>
395
+ <a href="order.php?plan=starter" class="block w-full py-3 px-4 text-center bg-gray-100 text-gray-800 font-medium rounded-md hover:bg-gray-200 transition-all">
396
  Choisir ce plan
397
  </a>
398
  </div>
 
432
  <span>Certificat SSL gratuit</span>
433
  </li>
434
  </ul>
435
+ <a href="order.php?plan=professional" class="block w-full py-3 px-4 text-center bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-all">
436
  Choisir ce plan
437
  </a>
438
  </div>
 
469
  <span>Certificat SSL gratuit</span>
470
  </li>
471
  </ul>
472
+ <a href="order.php?plan=business" class="block w-full py-3 px-4 text-center bg-gray-100 text-gray-800 font-medium rounded-md hover:bg-gray-200 transition-all">
473
  Choisir ce plan
474
  </a>
475
  </div>
 
477
 
478
  <div class="text-center mt-12">
479
  <p class="text-gray-600 mb-4">Vous avez des besoins spécifiques ?</p>
480
+ <a href="contact.php" class="inline-flex items-center px-6 py-3 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition-all">
481
  <i class="fas fa-envelope mr-2"></i>
482
  Contactez notre équipe
483
  </a>
 
557
  </div>
558
  </section>
559
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
560
  <!-- CTA Section -->
561
  <section class="py-20 bg-blue-600 text-white">
562
  <div class="container mx-auto px-4 text-center">
563
  <h2 class="text-3xl font-bold mb-6">Prêt à lancer votre projet ?</h2>
564
  <p class="text-xl text-blue-100 max-w-3xl mx-auto mb-8">Rejoignez des milliers de clients satisfaits qui font confiance à HostFlow pour leur hébergement web.</p>
565
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
566
+ <a href="order.php" class="px-8 py-4 bg-white text-blue-600 font-bold rounded-md hover:bg-gray-100 transition-all">
567
  Choisir un plan d'hébergement
568
  </a>
569
+ <a href="contact.php" class="px-8 py-4 border-2 border-white text-white font-bold rounded-md hover:bg-white hover:text-blue-600 transition-all">
570
  Nous contacter
571
  </a>
572
  </div>
 
636
 
637
  <div class="text-center mt-12">
638
  <p class="text-gray-600 mb-4">Vous ne trouvez pas la réponse à votre question ?</p>
639
+ <a href="contact.php" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-all">
640
  <i class="fas fa-envelope mr-2"></i>
641
  Contactez notre support
642
  </a>
 
645
  </div>
646
  </section>
647
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
648
  <!-- Footer -->
649
  <footer class="bg-gray-900 text-white pt-16 pb-8">
650
  <div class="container mx-auto px-4">
651
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
652
  <div>
653
+ <a href="index.php" class="flex items-center mb-6">
654
  <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
655
  <i class="fas fa-server text-white text-xl"></i>
656
  </div>
 
676
  <div>
677
  <h3 class="text-lg font-semibold mb-6">Services</h3>
678
  <ul class="space-y-3">
679
+ <li><a href="shared-hosting.php" class="text-gray-400 hover:text-white transition-all">Hébergement Mutualisé</a></li>
680
+ <li><a href="vps.php" class="text-gray-400 hover:text-white transition-all">Serveurs VPS</a></li>
681
+ <li><a href="dedicated.php" class="text-gray-400 hover:text-white transition-all">Serveurs Dédiés</a></li>
682
+ <li><a href="cloud.php" class="text-gray-400 hover:text-white transition-all">Hébergement Cloud</a></li>
683
+ <li><a href="wordpress.php" class="text-gray-400 hover:text-white transition-all">Hébergement WordPress</a></li>
684
  </ul>
685
  </div>
686
 
687
  <div>
688
  <h3 class="text-lg font-semibold mb-6">Entreprise</h3>
689
  <ul class="space-y-3">
690
+ <li><a href="about.php" class="text-gray-400 hover:text-white transition-all">À propos</a></li>
691
+ <li><a href="careers.php" class="text-gray-400 hover:text-white transition-all">Carrières</a></li>
692
+ <li><a href="blog.php" class="text-gray-400 hover:text-white transition-all">Blog</a></li>
693
+ <li><a href="press.php" class="text-gray-400 hover:text-white transition-all">Presse</a></li>
694
+ <li><a href="partners.php" class="text-gray-400 hover:text-white transition-all">Partenaires</a></li>
695
  </ul>
696
  </div>
697
 
698
  <div>
699
  <h3 class="text-lg font-semibold mb-6">Support</h3>
700
  <ul class="space-y-3">
701
+ <li><a href="help.php" class="text-gray-400 hover:text-white transition-all">Centre d'aide</a></li>
702
+ <li><a href="docs.php" class="text-gray-400 hover:text-white transition-all">Documentation</a></li>
703
+ <li><a href="status.php" class="text-gray-400 hover:text-white transition-all">Statut des services</a></li>
704
+ <li><a href="contact.php" class="text-gray-400 hover:text-white transition-all">Contact</a></li>
705
+ <li><a href="faq.php" class="text-gray-400 hover:text-white transition-all">FAQ</a></li>
706
  </ul>
707
  </div>
708
  </div>
 
711
  <div class="flex flex-col md:flex-row justify-between items-center">
712
  <p class="text-gray-400 mb-4 md:mb-0">© 2023 HostFlow. Tous droits réservés.</p>
713
  <div class="flex space-x-6">
714
+ <a href="legal.php" class="text-gray-400 hover:text-white transition-all">Mentions légales</a>
715
+ <a href="privacy.php" class="text-gray-400 hover:text-white transition-all">Politique de confidentialité</a>
716
+ <a href="terms.php" class="text-gray-400 hover:text-white transition-all">Conditions générales</a>
717
  </div>
718
  </div>
719
  </div>
 
739
  });
740
  });
741
 
742
+ // Mobile menu toggle
743
+ document.getElementById('mobile-menu-button').addEventListener('click', () => {
744
+ const menu = document.getElementById('mobile-menu');
745
+ if (menu.classList.contains('hidden')) {
746
+ menu.classList.remove('hidden');
747
+ } else {
748
+ menu.classList.add('hidden');
749
+ }
750
+ });
751
  </script>
752
  <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=Hanoxbh/minehost" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
753
  </html>