Improve UI on section

banquise-website/src/App.tsx

@@ -12,14 +12,59 @@ interface Service {
   name: string;
   url: string;
   image: string;
+  description: string;
+  features: string[];
+  icon: string;
 }
 
 const App: React.FC = () => {
-  // Define services directly in the component
+  // Define services directly in the component with enhanced data
   const services: Service[] = [
-    { name: "Wiki", url: "https://wiki.labanquise.org", image: "/src/assets/iceberg.png" },
+    { 
-    { name: "Gitea", url: "https://git.labanquise.org", image: "/src/assets/iceberg.png" },
+      name: "Wiki", 
-    { name: "Panel", url: "https://panel.labanquise.org", image: "/src/assets/iceberg.png" }
+      url: "https://wiki.labanquise.org", 
+      image: "/src/assets/iceberg.png",
+      icon: "📚",
+      description: "Notre wiki collaboratif est votre centre de documentation technique. Accédez à des guides détaillés, des tutoriels et de la documentation API pour tous nos services.",
+      features: [
+        "Documentation collaborative en temps réel",
+        "Guides d'installation détaillés",
+        "API et références techniques",
+        "Tutoriels pas à pas",
+        "Base de connaissances communautaire",
+        "Recherche avancée intégrée"
+      ]
+    },
+    { 
+      name: "Gitea", 
+      url: "https://git.labanquise.org", 
+      image: "/src/assets/iceberg.png",
+      icon: "🔧",
+      description: "Instance Gitea auto-hébergée pour la gestion de vos dépôts Git. Collaborez sur vos projets avec un contrôle total sur votre code source.",
+      features: [
+        "Dépôts Git illimités",
+        "Issues et pull requests",
+        "Actions CI/CD intégrées",
+        "Gestion d'équipes et permissions",
+        "Interface web intuitive",
+        "Intégration avec outils externes"
+      ]
+    },
+    { 
+      name: "Panel", 
+      url: "https://panel.labanquise.org", 
+      image: "/src/assets/iceberg.png",
+      icon: "🎮",
+      description: "Interface de gestion centralisée pour vos serveurs de jeux. Déployez, configurez et surveillez vos serveurs gaming en quelques clics.",
+      features: [
+        "Déploiement automatisé de serveurs",
+        "Monitoring en temps réel",
+        "Gestion des ressources système",
+        "Interface d'administration web",
+        "Support multi-jeux",
+        "Sauvegarde automatique des données"
+      ]
+    }
   ];
 
   const [selectedService, setSelectedService] = useState<Service | null>(null);

banquise-website/src/components/sections/ServicesSection.tsx

@@ -5,6 +5,9 @@ interface Service {
   name: string;
   url: string;
   image: string;
+  description: string;
+  features: string[];
+  icon: string;
 }
 
 interface ServicesSectionProps {
@@ -19,27 +22,39 @@ export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onSe
       Nos Services
     </h2>
     <p className="text-banquise-gray text-xl opacity-90 mb-14 max-w-4xl text-center mx-auto" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
-      Cliquez sur un iceberg pour accéder au service correspondant
+      Cliquez sur un service pour découvrir toutes ses fonctionnalités
     </p>
     
-    <div className="relative w-full max-w-5xl h-auto min-h-96 z-2 flex justify-center items-center mx-auto my-12 p-0 gap-[5%] flex-wrap">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
-      {services.map((service, index) => (
+      {services.map((service) => (
         <div
           key={service.name}
-          className={`relative cursor-pointer no-underline w-64 h-52 flex items-center justify-center transition-transform duration-300 z-3 m-6 hover:-translate-y-4 ${
+          className="group relative bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 border border-banquise-blue-lightest/30 transition-all duration-300 cursor-pointer hover:-translate-y-3 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8"
-            index === 0 ? 'animate-float-1' : index === 1 ? 'animate-float-2' : 'animate-float-3'
-          }`}
           onClick={() => onServiceClick(service)}
         >
-          <img 
+          {/* Icon */}
-            src={service.image} 
+          <div className="mb-6 w-20 h-20 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-2xl flex items-center justify-center text-4xl shadow-lg group-hover:scale-105 transition-transform duration-300 mx-auto">
-            alt={`Iceberg ${service.name}`}
+            {service.icon}
-            className="w-full h-auto max-w-64 max-h-52 object-contain"
-            style={{ filter: 'drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3))' }}
-          />
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-banquise-blue-dark font-bold text-xl bg-white/92 py-3 px-5 rounded-lg text-center shadow-lg z-4 font-heading tracking-tight border border-banquise-blue-lightest/80 backdrop-blur-sm transition-all duration-300 min-w-40 max-w-[90%] w-auto hover:bg-white/97 hover:shadow-xl hover:-translate-y-1 hover:text-banquise-blue" style={{ boxShadow: '0 4px 15px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(165, 240, 255, 0.5)' }}>
-            {service.name}
           </div>
+          
+          {/* Service name */}
+          <h3 className="text-2xl font-bold text-banquise-gray mb-4 font-heading text-center group-hover:text-banquise-blue-lightest transition-colors duration-300">
+            {service.name}
+          </h3>
+          
+          {/* Short teaser description */}
+          <p className="text-banquise-gray/80 leading-relaxed mb-8 text-center text-sm">
+            {service.description.split('.')[0]}.
+          </p>
+          
+          {/* CTA */}
+          <div className="flex items-center justify-center text-banquise-blue-light font-bold text-sm group-hover:text-banquise-blue-lightest transition-colors duration-300">
+            Découvrir toutes les fonctionnalités
+            <span className="ml-2 transition-transform duration-300 group-hover:translate-x-1">→</span>
+          </div>
+          
+          {/* Subtle hover effect */}
+          <div className="absolute inset-0 bg-gradient-to-br from-banquise-blue-lightest/10 to-banquise-blue/5 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
         </div>
       ))}
     </div>

banquise-website/src/components/sections/TechFeaturesSection.tsx

@@ -4,35 +4,43 @@ export const TechFeaturesSection: React.FC = () => (
   <section className="pt-12 pb-16 relative z-2 w-full max-w-6xl mx-auto px-8">
     <div className="w-20 h-1 bg-gradient-to-r from-banquise-blue-lightest to-banquise-blue mx-auto mb-8 rounded-full"></div>
     <h2 className="text-banquise-gray text-4xl mb-4 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
-      Technologies Avancées
+      Notre Infrastructure
     </h2>
     <p className="text-banquise-gray text-xl opacity-90 mb-14 max-w-4xl text-center mx-auto" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
-      Découvrez les outils et services que nous mettons à votre disposition
+      Une infrastructure robuste et sécurisée pour vos projets les plus exigeants
     </p>
     
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 w-full">
-      <div className="bg-banquise-blue-dark/10 rounded-xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-white/5 hover:-translate-y-2 hover:bg-banquise-blue-dark/20">
+      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
-        <div className="text-4xl mb-6 text-banquise-blue-lightest bg-banquise-blue-dark/30 w-18 h-18 flex items-center justify-center rounded-full shadow-lg">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
-          📚
+          🚀
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Documentation</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Serveurs performants</h3>
-        <p className="text-banquise-gray/85 leading-relaxed">Accédez à notre wiki complet avec guides et tutoriels détaillés.</p>
+        <p className="text-banquise-gray/80 leading-relaxed text-sm">Infrastructure optimisée pour assurer des performances élevées et une disponibilité maximale de vos applications</p>
       </div>
       
-      <div className="bg-banquise-blue-dark/10 rounded-xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-white/5 hover:-translate-y-2 hover:bg-banquise-blue-dark/20">
+      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
-        <div className="text-4xl mb-6 text-banquise-blue-lightest bg-banquise-blue-dark/30 w-18 h-18 flex items-center justify-center rounded-full shadow-lg">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
-          🔧
+          💾
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Gestion de Code</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Stockage sécurisé</h3>
-        <p className="text-banquise-gray/85 leading-relaxed">Gitea pour le versioning et la collaboration sur vos projets.</p>
+        <p className="text-banquise-gray/80 leading-relaxed text-sm">Solutions de stockage distribuées avec redondance pour garantir l'intégrité et la durabilité de vos données</p>
       </div>
       
-      <div className="bg-banquise-blue-dark/10 rounded-xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-white/5 hover:-translate-y-2 hover:bg-banquise-blue-dark/20">
+      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
-        <div className="text-4xl mb-6 text-banquise-blue-lightest bg-banquise-blue-dark/30 w-18 h-18 flex items-center justify-center rounded-full shadow-lg">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
-          🎮
+          🌐
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Panel de Jeux</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Réseau optimisé</h3>
-        <p className="text-banquise-gray/85 leading-relaxed">Interface de gestion pour vos serveurs de jeux préférés.</p>
+        <p className="text-banquise-gray/80 leading-relaxed text-sm">Architecture réseau à haute disponibilité avec une faible latence pour vos applications critiques</p>
+      </div>
+
+      <div className="bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl p-8 flex flex-col items-center text-center transition-all duration-300 border border-banquise-blue-lightest/30 hover:-translate-y-2 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-18 h-18 flex items-center justify-center rounded-2xl shadow-lg">
+          🛡️
+        </div>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Sécurité renforcée</h3>
+        <p className="text-banquise-gray/80 leading-relaxed text-sm">Protection contre les menaces avec systèmes de sécurité modernes et mises à jour régulières</p>
       </div>
     </div>
   </section>

banquise-website/src/components/ui/Popup.tsx

@@ -5,6 +5,9 @@ interface Service {
   name: string;
   url: string;
   image: string;
+  description: string;
+  features: string[];
+  icon: string;
 }
 
 interface PopupProps {
@@ -13,29 +16,79 @@ interface PopupProps {
 }
 
 export const Popup: React.FC<PopupProps> = ({ service, onClose }) => (
-  <div className="fixed inset-0 bg-black/70 flex justify-center items-center z-50 p-4 backdrop-blur-sm animate-fadeIn">
+  <div className="fixed inset-0 bg-black/60 flex justify-center items-center z-50 p-4 backdrop-blur-md animate-fadeIn">
-    <div className="bg-gradient-to-br from-banquise-gray to-blue-50 text-banquise-blue-dark rounded-xl p-8 max-w-lg w-full shadow-2xl relative overflow-hidden animate-slideUp">
+    <div className="bg-white text-banquise-blue-dark rounded-3xl max-w-2xl w-full shadow-2xl relative overflow-hidden animate-slideUp border border-banquise-blue-lightest/20">
-      <button
+      
-        onClick={onClose}
+      {/* Header */}
-        className="absolute top-4 right-4 bg-transparent border-0 text-2xl cursor-pointer text-banquise-blue-dark flex items-center justify-center w-8 h-8 rounded-full transition-colors hover:bg-banquise-blue/10 p-0"
+      <div className="relative bg-gradient-to-r from-banquise-blue to-banquise-blue-light p-8 text-white">
-      >
+        <button
-        ×
+          onClick={onClose}
-      </button>
+          className="absolute top-6 right-6 bg-white/20 hover:bg-white/30 border-0 text-2xl cursor-pointer text-white flex items-center justify-center w-12 h-12 rounded-full transition-all duration-200 backdrop-blur-sm hover:scale-110"
-      <h2 className="font-heading text-3xl mt-0 mb-4 text-banquise-blue-dark leading-tight">
+        >
-        {service.name}
+          ×
-      </h2>
+        </button>
-      <p className="text-lg leading-relaxed mb-6 text-banquise-blue-dark">
+        
-        Accédez directement au service {service.name} en cliquant sur le bouton ci-dessous.
+        <div className="flex items-center mb-4">
-      </p>
+          <div className="w-20 h-20 bg-white/20 rounded-3xl flex items-center justify-center text-4xl mr-6 backdrop-blur-sm">
-      <a
+            {service.icon}
-        href={service.url}
+          </div>
-        target="_blank"
+          <div>
-        rel="noopener noreferrer"
+            <h2 className="font-heading text-4xl mt-0 mb-2 leading-tight">
-        className="inline-flex items-center bg-banquise-blue text-white border-0 py-3 px-6 rounded-md cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-200 hover:bg-banquise-blue/80 hover:-translate-y-0.5 hover:shadow-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-banquise-blue-light"
+              {service.name}
-      >
+            </h2>
-        <span className="mr-2 text-lg">🚀</span>
+            <div className="text-white/90 text-lg font-medium">
-        Accéder à {service.name}
+              Service d'hébergement professionnel
-      </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-8">
+        {/* Description */}
+        <div className="mb-8">
+          <h3 className="text-xl font-bold text-banquise-blue-dark mb-4 font-heading flex items-center">
+            <span className="text-2xl mr-3">📋</span>
+            Description
+          </h3>
+          <p className="text-banquise-blue-dark/80 leading-relaxed text-lg">
+            {service.description}
+          </p>
+        </div>
+
+        {/* Features */}
+        <div className="mb-8">
+          <h3 className="text-xl font-bold text-banquise-blue-dark mb-6 font-heading flex items-center">
+            <span className="text-2xl mr-3">⚡</span>
+            Fonctionnalités principales
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {service.features.map((feature, index) => (
+              <div key={index} className="flex items-center bg-banquise-blue/5 rounded-xl p-4 border border-banquise-blue/10 hover:bg-banquise-blue/10 transition-colors duration-200">
+                <div className="w-3 h-3 bg-banquise-blue rounded-full mr-4 flex-shrink-0"></div>
+                <span className="text-banquise-blue-dark/90 font-medium">{feature}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Call to action */}
+        <div className="pt-6 border-t border-banquise-blue/10">
+          <a
+            href={service.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="w-full inline-flex items-center justify-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-4 px-8 rounded-2xl cursor-pointer no-underline font-bold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-banquise-blue-light text-lg hover:scale-[1.02]"
+          >
+            <span className="mr-3 text-2xl">🚀</span>
+            Accéder à {service.name}
+          </a>
+        </div>
+      </div>
+
+      {/* Decorative elements */}
+      <div className="absolute top-0 right-0 w-32 h-32 bg-banquise-blue-lightest/10 rounded-full -translate-y-16 translate-x-16"></div>
+      <div className="absolute bottom-0 left-0 w-24 h-24 bg-banquise-blue/5 rounded-full translate-y-12 -translate-x-12"></div>
     </div>
   </div>
 );