From 0bf2a01d72e9de5b3d93cb99c168002172473590 Mon Sep 17 00:00:00 2001
From: Sacha VAUDEY <sacha.vaudey@epita.fr>
Date: Sat, 31 May 2025 21:53:14 +0200
Subject: [PATCH] Improve UI unity

---
 banquise-website/src/App.tsx                  |  30 ++--
 .../src/components/layout/Footer.tsx          |  18 +--
 .../src/components/layout/Navigation.tsx      |  10 +-
 .../src/components/sections/AboutSection.tsx  | 130 ++++++++++++------
 .../src/components/sections/HeroSection.tsx   |  28 ++--
 .../components/sections/ServicesSection.tsx   |  18 +--
 .../sections/TechFeaturesSection.tsx          |  32 ++---
 .../src/components/ui/AccordionItem.tsx       |  10 +-
 8 files changed, 160 insertions(+), 116 deletions(-)

diff --git a/banquise-website/src/App.tsx b/banquise-website/src/App.tsx
index 39d0115..fce47f6 100644
--- a/banquise-website/src/App.tsx
+++ b/banquise-website/src/App.tsx
@@ -80,32 +80,32 @@ const App: React.FC = () => {
       <Navigation />
 
       <main className="flex-1 flex flex-col overflow-x-hidden overflow-y-auto">
-        <div className="relative flex-1 bg-ocean-gradient w-full min-h-[calc(100vh-72px)] flex flex-col justify-start items-center overflow-x-hidden">
+        <div className="relative flex-1 bg-ocean-gradient w-full min-h-screen flex flex-col justify-start items-center overflow-x-hidden">
           
           <HeroSection />
           <TechFeaturesSection />
           <ServicesSection services={services} onServiceClick={setSelectedService} />
           <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
 
-          {/* Waves effect */}
-          <div className="absolute bottom-0 left-0 w-full h-52 overflow-hidden z-1 pointer-events-none">
-            <div className="absolute bottom-0 left-0 w-full h-28 bg-wave-pattern bg-repeat-x opacity-30 animate-wave-1 z-1" style={{ backgroundSize: '1200px 100px' }}></div>
-            <div className="absolute -bottom-3 left-0 w-full h-28 bg-wave-pattern bg-repeat-x opacity-50 animate-wave-2 z-2" style={{ backgroundSize: '1200px 100px', animationDelay: '-5s' }}></div>
-            <div className="absolute -bottom-5 left-0 w-full h-28 bg-wave-pattern bg-repeat-x opacity-70 animate-wave-3 z-3" style={{ backgroundSize: '1200px 100px', animationDelay: '-2s' }}></div>
+          {/* Waves effect - repositioned to not interfere with content */}
+          <div className="absolute bottom-0 left-0 w-full h-40 overflow-hidden z-0 pointer-events-none">
+            <div className="absolute bottom-0 left-0 w-full h-24 bg-wave-pattern bg-repeat-x opacity-20 animate-wave-1 z-1" style={{ backgroundSize: '1200px 100px' }}></div>
+            <div className="absolute -bottom-2 left-0 w-full h-24 bg-wave-pattern bg-repeat-x opacity-30 animate-wave-2 z-2" style={{ backgroundSize: '1200px 100px', animationDelay: '-5s' }}></div>
+            <div className="absolute -bottom-4 left-0 w-full h-24 bg-wave-pattern bg-repeat-x opacity-40 animate-wave-3 z-3" style={{ backgroundSize: '1200px 100px', animationDelay: '-2s' }}></div>
           </div>
 
-          {/* Bubbles effect */}
-          <div className="absolute w-full h-full overflow-hidden top-0 left-0 z-1 pointer-events-none">
-            {[...Array(7)].map((_, i) => (
+          {/* Bubbles effect - reduced quantity and repositioned */}
+          <div className="absolute w-full h-full overflow-hidden top-0 left-0 z-0 pointer-events-none">
+            {[...Array(5)].map((_, i) => (
               <div
                 key={i}
-                className={`absolute -bottom-5 rounded-full bg-banquise-blue-lightest/20 opacity-80 animate-rise`}
+                className={`absolute -bottom-5 rounded-full bg-banquise-blue-lightest/15 opacity-60 animate-rise`}
                 style={{
-                  width: `${[25, 30, 35, 28, 22, 32, 20][i]}px`,
-                  height: `${[25, 30, 35, 28, 22, 32, 20][i]}px`,
-                  left: `${[10, 20, 35, 50, 65, 80, 90][i]}%`,
-                  animationDuration: `${[8, 9, 10, 7, 12, 9, 8][i]}s`,
-                  animationDelay: `${[0, 1, 2, 0, 3, 1.5, 2.5][i]}s`,
+                  width: `${[20, 25, 30, 22, 28][i]}px`,
+                  height: `${[20, 25, 30, 22, 28][i]}px`,
+                  left: `${[15, 35, 55, 75, 95][i]}%`,
+                  animationDuration: `${[10, 12, 14, 11, 13][i]}s`,
+                  animationDelay: `${[0, 2, 4, 1, 3][i]}s`,
                 }}
               ></div>
             ))}
diff --git a/banquise-website/src/components/layout/Footer.tsx b/banquise-website/src/components/layout/Footer.tsx
index 7ad770c..be2e1cf 100644
--- a/banquise-website/src/components/layout/Footer.tsx
+++ b/banquise-website/src/components/layout/Footer.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
 export const Footer: React.FC = () => (
-  <footer className="bg-banquise-blue-dark text-white py-16 px-8 pt-16 relative z-3 border-t border-white/10 w-full box-border">
-    <div className="flex flex-wrap justify-between max-w-6xl mx-auto">
-      <div className="flex-1 min-w-64 mb-8 text-left px-6">
-        <h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest">
+  <footer className="bg-banquise-blue-dark text-white py-20 px-8 relative z-10 border-t border-banquise-blue-lightest/20 w-full box-border mt-20">
+    <div className="flex flex-wrap justify-between max-w-6xl mx-auto gap-8">
+      <div className="flex-1 min-w-64 mb-8 text-left">
+        <h4 className="text-xl mb-8 text-banquise-blue-lightest relative pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
           Services
         </h4>
         <ul className="list-none p-0 m-0">
@@ -26,8 +26,8 @@ export const Footer: React.FC = () => (
         </ul>
       </div>
       
-      <div className="flex-1 min-w-64 mb-8 text-left px-6">
-        <h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest">
+      <div className="flex-1 min-w-64 mb-8 text-left">
+        <h4 className="text-xl mb-8 text-banquise-blue-lightest relative pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
           Communauté
         </h4>
         <ul className="list-none p-0 m-0">
@@ -39,8 +39,8 @@ export const Footer: React.FC = () => (
         </ul>
       </div>
       
-      <div className="flex-1 min-w-64 mb-8 text-left px-6">
-        <h4 className="text-xl mb-6 text-banquise-blue-lightest relative pb-3 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-10 after:h-0.5 after:bg-banquise-blue-lightest">
+      <div className="flex-1 min-w-64 mb-8 text-left">
+        <h4 className="text-xl mb-8 text-banquise-blue-lightest relative pb-4 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-12 after:h-0.5 after:bg-gradient-to-r after:from-banquise-blue-lightest after:to-banquise-blue">
           Support
         </h4>
         <ul className="list-none p-0 m-0">
@@ -58,7 +58,7 @@ export const Footer: React.FC = () => (
       </div>
     </div>
     
-    <div className="border-t border-white/10 pt-6 mt-8 text-center text-sm text-white/70 max-w-6xl mx-auto">
+    <div className="border-t border-banquise-blue-lightest/20 pt-8 mt-12 text-center text-sm text-banquise-gray/70 max-w-6xl mx-auto">
       © 2024 La Banquise. Tous droits réservés.
     </div>
   </footer>
diff --git a/banquise-website/src/components/layout/Navigation.tsx b/banquise-website/src/components/layout/Navigation.tsx
index 162c335..6ed18f1 100644
--- a/banquise-website/src/components/layout/Navigation.tsx
+++ b/banquise-website/src/components/layout/Navigation.tsx
@@ -4,17 +4,17 @@ export const Navigation: React.FC = () => {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <nav className="flex justify-between items-center py-3 px-8 bg-banquise-blue-dark/95 text-white shadow-lg w-full box-border z-10 backdrop-blur-lg border-b border-white/10 sticky top-0">
+    <nav className="flex justify-between items-center py-4 px-8 bg-banquise-blue-dark/95 text-white shadow-xl w-full box-border z-50 backdrop-blur-lg border-b border-banquise-blue-lightest/20 sticky top-0">
       <div className="flex items-center">
-        <img src="/src/assets/banquise.png" alt="Logo La Banquise" className="h-9 w-auto mr-4 drop-shadow-lg" style={{ filter: 'drop-shadow(0 0 5px rgba(168, 218, 255, 0.4))' }} />
+        <img src="/src/assets/banquise.png" alt="Logo La Banquise" className="h-10 w-auto mr-4 drop-shadow-lg" style={{ filter: 'drop-shadow(0 0 8px rgba(168, 218, 255, 0.4))' }} />
         <h1 className="text-2xl font-bold m-0 text-white tracking-wide font-heading">La Banquise</h1>
       </div>
       
-      <div className="flex items-center gap-3 md:flex hidden">
-        <a href="https://discord.gg/labanquise" className="flex items-center bg-banquise-blue text-white border-0 py-2 px-5 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 hover:text-white hover:shadow-banquise-blue/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
+      <div className="flex items-center gap-4 md:flex hidden">
+        <a href="https://discord.gg/labanquise" className="flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-3 px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1 hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
           Discord
         </a>
-        <a href="#login" className="flex items-center bg-banquise-blue-light/90 text-white border-0 py-2 px-5 rounded-md cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-200 hover:bg-banquise-blue-light hover:-translate-y-0.5 hover:shadow-xl hover:text-white hover:shadow-banquise-blue-light/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
+        <a href="#login" className="flex items-center bg-banquise-blue-light/90 text-white border-0 py-3 px-6 rounded-xl cursor-pointer no-underline font-semibold tracking-wide shadow-lg transition-all duration-300 hover:bg-banquise-blue-light hover:-translate-y-1 hover:shadow-xl hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
           <span className="mr-2">👤</span>
           Connexion
         </a>
diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx
index 3f710cf..1c2e691 100644
--- a/banquise-website/src/components/sections/AboutSection.tsx
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -7,38 +7,44 @@ interface AboutSectionProps {
 }
 
 export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
-  <section className="relative bg-banquise-blue-dark/15 backdrop-blur-lg m-0 py-16 px-8 z-2 border-t border-white/10 border-b border-white/10 w-full box-border">
-    <div className="max-w-5xl mx-auto flex flex-col items-center w-full">
-      <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)' }}>
-        À Propos
-      </h2>
-      
-      <div className="max-w-48 mx-auto mb-8 relative z-2">
-        <img 
-          src="/src/assets/banquise.png" 
-          alt="Logo La Banquise" 
-          className="w-full h-auto rounded-full p-4 bg-white/5 border-2 border-banquise-blue-lightest/30 shadow-xl animate-gentle-float"
-          style={{ boxShadow: '0 10px 25px rgba(31, 93, 137, 0.3)' }}
-        />
-      </div>
-      
-      <div className="text-center max-w-4xl mx-auto mb-10 text-banquise-gray text-lg leading-relaxed" style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }}>
-        La Banquise est une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
+  <section className="relative bg-gradient-to-b from-banquise-blue-dark/15 to-banquise-blue-dark/20 backdrop-blur-lg py-24 px-8 z-2 border-t border-banquise-blue-lightest/20 w-full box-border mt-20">
+    <div className="max-w-4xl mx-auto">
+      {/* Header */}
+      <div className="text-center mb-20">
+        <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-8 font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
+          À Propos de La Banquise
+        </h2>
+        <p className="text-banquise-gray/90 text-xl max-w-3xl mx-auto leading-relaxed" style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.1)' }}>
+          Une communauté passionnée qui propose des services d'hébergement et des outils collaboratifs pour les développeurs et les gamers.
+        </p>
       </div>
 
-      <div className="w-full flex flex-col gap-4 mt-6">
+      {/* FAQ Section */}
+      <div className="space-y-6">
+        <h3 className="text-2xl font-bold text-banquise-gray mb-12 font-heading flex items-center justify-center">
+          <span className="text-3xl mr-3">❓</span>
+          Questions Fréquentes
+        </h3>
+        
         <AccordionItem
           title="🎯 Notre Mission"
           isOpen={openAccordion === "mission"}
           onToggle={() => toggleAccordion("mission")}
         >
-          <p className="mt-0 mb-4">
-            Fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble.
-          </p>
-          <p className="mb-0">
-            Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe.
-          </p>
+          <div className="space-y-4">
+            <p className="text-banquise-gray/90 leading-relaxed">
+              Fournir une plateforme stable et accessible pour héberger vos projets, partager vos connaissances et jouer ensemble.
+            </p>
+            <p className="text-banquise-gray/90 leading-relaxed">
+              Nous croyons en la puissance de la collaboration et mettons à disposition des outils modernes pour faciliter le travail en équipe.
+            </p>
+            <div className="flex flex-wrap gap-2 mt-4">
+              <span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Collaboration</span>
+              <span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Innovation</span>
+              <span className="bg-banquise-blue/20 text-banquise-blue-light px-3 py-1 rounded-full text-sm font-medium">Accessibilité</span>
+            </div>
+          </div>
         </AccordionItem>
 
         <AccordionItem
@@ -46,14 +52,36 @@ export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggl
           isOpen={openAccordion === "services"}
           onToggle={() => toggleAccordion("services")}
         >
-          <ul className="mt-2 mb-2 pl-6">
-            <li className="mb-2"><strong>Wiki :</strong> Documentation collaborative et guides détaillés</li>
-            <li className="mb-2"><strong>Gitea :</strong> Gestion de versions Git auto-hébergée</li>
-            <li className="mb-2"><strong>Panel de Jeux :</strong> Interface de gestion pour serveurs de jeux</li>
-          </ul>
-          <p className="mb-0">
-            Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
-          </p>
+          <div className="space-y-6">
+            <div className="grid gap-4">
+              <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
+                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">📚</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">Wiki</h4>
+                  <p className="text-banquise-gray/80 text-sm">Documentation collaborative et guides détaillés</p>
+                </div>
+              </div>
+              
+              <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
+                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">🔧</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">Gitea</h4>
+                  <p className="text-banquise-gray/80 text-sm">Gestion de versions Git auto-hébergée</p>
+                </div>
+              </div>
+              
+              <div className="flex items-start space-x-4 p-4 bg-banquise-blue-dark/10 rounded-xl border border-banquise-blue-lightest/20">
+                <div className="w-10 h-10 bg-gradient-to-br from-banquise-blue to-banquise-blue-light rounded-lg flex items-center justify-center text-white font-bold">🎮</div>
+                <div>
+                  <h4 className="font-semibold text-banquise-gray mb-1">Panel de Jeux</h4>
+                  <p className="text-banquise-gray/80 text-sm">Interface de gestion pour serveurs de jeux</p>
+                </div>
+              </div>
+            </div>
+            <p className="text-banquise-gray/90 leading-relaxed mt-4">
+              Tous nos services sont maintenus avec soin et régulièrement mis à jour pour garantir une expérience optimale.
+            </p>
+          </div>
         </AccordionItem>
 
         <AccordionItem
@@ -61,16 +89,32 @@ export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggl
           isOpen={openAccordion === "community"}
           onToggle={() => toggleAccordion("community")}
         >
-          <p className="mt-0 mb-4">
-            Rejoignez notre serveur Discord pour échanger avec la communauté, obtenir de l'aide et rester informé des dernières nouveautés.
-          </p>
-          <a 
-            href="https://discord.gg/labanquise"
-            className="inline-flex items-center bg-banquise-blue text-white border-0 py-3 px-5 rounded-md mt-4 no-underline font-semibold transition-all duration-200 hover:bg-banquise-blue/80 hover:-translate-y-1 hover:shadow-lg"
-          >
-            <span className="mr-2 text-sm">💬</span>
-            Rejoindre Discord
-          </a>
+          <div className="space-y-6">
+            <p className="text-banquise-gray/90 leading-relaxed">
+              Rejoignez notre serveur Discord pour échanger avec la communauté, obtenir de l'aide et rester informé des dernières nouveautés.
+            </p>
+            
+            <div className="bg-gradient-to-r from-banquise-blue-dark/20 to-banquise-blue/10 rounded-2xl p-6 border border-banquise-blue-lightest/30">
+              <h4 className="font-semibold text-banquise-gray mb-3 flex items-center">
+                <span className="text-xl mr-2">💬</span>
+                Avantages de rejoindre
+              </h4>
+              <ul className="space-y-2 text-banquise-gray/80 text-sm mb-6">
+                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Support technique prioritaire</li>
+                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Accès aux bêta-tests</li>
+                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Échanges avec les développeurs</li>
+                <li className="flex items-center"><span className="text-banquise-blue-light mr-2">•</span> Annonces en avant-première</li>
+              </ul>
+              
+              <a 
+                href="https://discord.gg/labanquise"
+                className="inline-flex items-center bg-gradient-to-r from-banquise-blue to-banquise-blue-light text-white border-0 py-3 px-6 rounded-xl no-underline font-bold transition-all duration-300 hover:shadow-lg hover:-translate-y-1 hover:scale-105"
+              >
+                <span className="mr-3 text-lg">🚀</span>
+                Rejoindre Discord
+              </a>
+            </div>
+          </div>
         </AccordionItem>
       </div>
     </div>
diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx
index bd20dca..7324423 100644
--- a/banquise-website/src/components/sections/HeroSection.tsx
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -1,30 +1,30 @@
 import React from 'react';
 
 export const HeroSection: React.FC = () => (
-  <section className="min-h-[calc(70vh-72px)] flex flex-col justify-center items-center text-center pt-12 pb-12 mt-0 w-full max-w-6xl mx-auto px-8 relative z-3">
-    <div className="mb-8 w-40 h-40 rounded-full bg-white/10 p-4 shadow-2xl animate-gentle-float">
-      <img src="/src/assets/banquise.png" alt="Logo La Banquise" className="w-full h-full object-contain" style={{ filter: 'drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2))' }} />
+  <section className="min-h-[calc(80vh-72px)] flex flex-col justify-center items-center text-center py-20 w-full max-w-6xl mx-auto px-8 relative z-3">
+    <div className="mb-12 w-48 h-48 rounded-full bg-gradient-to-br from-banquise-blue-dark/20 to-banquise-blue/10 p-6 shadow-2xl animate-gentle-float backdrop-blur-sm border border-banquise-blue-lightest/30">
+      <img src="/src/assets/banquise.png" alt="Logo La Banquise" className="w-full h-full object-contain" style={{ filter: 'drop-shadow(0 10px 25px rgba(31, 93, 137, 0.3))' }} />
     </div>
     
-    <h1 className="text-banquise-gray text-6xl mb-6 font-extrabold leading-tight max-w-4xl font-heading" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
+    <h1 className="text-banquise-gray text-5xl md:text-6xl mb-8 font-extrabold leading-tight max-w-4xl font-heading" style={{ textShadow: '0 2px 10px rgba(0, 0, 0, 0.3)' }}>
       Bienvenue sur La Banquise
     </h1>
     
-    <p className="text-banquise-gray text-2xl mb-10 max-w-3xl font-normal opacity-90" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
-      Votre plateforme d'hébergement communautaire
+    <p className="text-banquise-gray text-xl md:text-2xl mb-12 max-w-3xl font-normal opacity-90 leading-relaxed" style={{ textShadow: '0 1px 4px rgba(0, 0, 0, 0.2)' }}>
+      Votre plateforme d'hébergement communautaire dédiée aux développeurs et gamers
     </p>
     
-    <a href="#services" className="inline-flex items-center justify-center bg-banquise-gray text-banquise-blue-dark border-0 py-4 px-10 rounded-full text-lg font-semibold no-underline shadow-lg transition-all duration-300 min-w-52 hover:-translate-y-1 hover:shadow-xl hover:bg-white">
+    <a href="#services" className="inline-flex items-center justify-center bg-gradient-to-r from-banquise-gray to-white text-banquise-blue-dark border-0 py-5 px-12 rounded-2xl text-lg font-bold no-underline shadow-xl transition-all duration-300 min-w-64 hover:-translate-y-2 hover:shadow-2xl hover:scale-105 backdrop-blur-sm border border-banquise-blue-lightest/20">
       Découvrir nos services
-      <span className="ml-3 transition-transform duration-200 hover:translate-x-1">→</span>
+      <span className="ml-3 text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
     </a>
 
-    {/* Tech elements background */}
-    <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-1">
-      <div className="absolute top-[15%] left-[10%] text-4xl text-white/15 animate-tech-float">🖥️</div>
-      <div className="absolute top-[25%] right-[15%] text-4xl text-white/15 animate-tech-float" style={{ animationDelay: '2s' }}>⚙️</div>
-      <div className="absolute bottom-[20%] left-[15%] text-4xl text-white/15 animate-tech-float" style={{ animationDelay: '1s' }}>🚀</div>
-      <div className="absolute bottom-[30%] right-[10%] text-4xl text-white/15 animate-tech-float" style={{ animationDelay: '3s' }}>💻</div>
+    {/* Tech elements background - repositioned to avoid overlap */}
+    <div className="absolute top-0 left-0 w-full h-full pointer-events-none z-1 overflow-hidden">
+      <div className="absolute top-[20%] left-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float">🖥️</div>
+      <div className="absolute top-[30%] right-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '2s' }}>⚙️</div>
+      <div className="absolute bottom-[25%] left-[8%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '1s' }}>🚀</div>
+      <div className="absolute bottom-[35%] right-[5%] text-3xl text-banquise-blue-lightest/20 animate-tech-float" style={{ animationDelay: '3s' }}>💻</div>
     </div>
   </section>
 );
diff --git a/banquise-website/src/components/sections/ServicesSection.tsx b/banquise-website/src/components/sections/ServicesSection.tsx
index 279b892..5e8cb7c 100644
--- a/banquise-website/src/components/sections/ServicesSection.tsx
+++ b/banquise-website/src/components/sections/ServicesSection.tsx
@@ -16,12 +16,12 @@ interface ServicesSectionProps {
 }
 
 export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onServiceClick }) => (
-  <section id="services" className="relative z-2 pt-12 pb-20 mt-0 mb-0 w-full max-w-6xl mx-auto px-8">
+  <section id="services" className="relative z-2 py-20 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)' }}>
+    <h2 className="text-banquise-gray text-4xl mb-6 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
       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)' }}>
+    <p className="text-banquise-gray text-xl opacity-90 mb-16 max-w-4xl text-center mx-auto leading-relaxed" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
       Cliquez sur un service pour découvrir toutes ses fonctionnalités
     </p>
     
@@ -29,28 +29,28 @@ export const ServicesSection: React.FC<ServicesSectionProps> = ({ services, onSe
       {services.map((service) => (
         <div
           key={service.name}
-          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"
+          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-4 hover:shadow-2xl hover:border-banquise-blue-lightest/50 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8"
           onClick={() => onServiceClick(service)}
         >
           {/* Icon */}
-          <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">
+          <div className="mb-8 w-24 h-24 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-110 transition-transform duration-300 mx-auto">
             {service.icon}
           </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">
+          <h3 className="text-2xl font-bold text-banquise-gray mb-6 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">
+          <p className="text-banquise-gray/80 leading-relaxed mb-8 text-center">
             {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">
+          <div className="flex items-center justify-center text-banquise-blue-light font-bold 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>
+            <span className="ml-2 text-lg transition-transform duration-300 group-hover:translate-x-2">→</span>
           </div>
           
           {/* Subtle hover effect */}
diff --git a/banquise-website/src/components/sections/TechFeaturesSection.tsx b/banquise-website/src/components/sections/TechFeaturesSection.tsx
index ffaf5ec..bd4b451 100644
--- a/banquise-website/src/components/sections/TechFeaturesSection.tsx
+++ b/banquise-website/src/components/sections/TechFeaturesSection.tsx
@@ -1,45 +1,45 @@
 import React from 'react';
 
 export const TechFeaturesSection: React.FC = () => (
-  <section className="pt-12 pb-16 relative z-2 w-full max-w-6xl mx-auto px-8">
+  <section className="py-20 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)' }}>
+    <h2 className="text-banquise-gray text-4xl mb-6 text-center font-heading font-bold tracking-tight" style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)' }}>
       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)' }}>
+    <p className="text-banquise-gray text-xl opacity-90 mb-16 max-w-4xl text-center mx-auto leading-relaxed" style={{ textShadow: '0 1px 3px rgba(0, 0, 0, 0.2)' }}>
       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-4 gap-8 w-full">
-      <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 className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 w-full">
+      <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-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
           🚀
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Serveurs performants</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Serveurs performants</h3>
         <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-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 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-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
           💾
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Stockage sécurisé</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Stockage sécurisé</h3>
         <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-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 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-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
           🌐
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Réseau optimisé</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">Réseau optimisé</h3>
         <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 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-3 hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8 hover:shadow-xl hover:border-banquise-blue-lightest/50 group">
+        <div className="text-4xl mb-6 text-white bg-gradient-to-br from-banquise-blue to-banquise-blue-light w-20 h-20 flex items-center justify-center rounded-2xl shadow-lg group-hover:scale-110 transition-transform duration-300">
           🛡️
         </div>
-        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold">Sécurité renforcée</h3>
+        <h3 className="text-xl mb-4 text-banquise-gray font-heading font-semibold group-hover:text-banquise-blue-lightest transition-colors duration-300">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>
diff --git a/banquise-website/src/components/ui/AccordionItem.tsx b/banquise-website/src/components/ui/AccordionItem.tsx
index 42e5a14..74b7556 100644
--- a/banquise-website/src/components/ui/AccordionItem.tsx
+++ b/banquise-website/src/components/ui/AccordionItem.tsx
@@ -9,17 +9,17 @@ interface AccordionItemProps {
 }
 
 export const AccordionItem: React.FC<AccordionItemProps> = ({ title, children, isOpen, onToggle }) => (
-  <div className={`bg-banquise-blue-dark/10 rounded-xl overflow-hidden border border-banquise-blue-lightest/20 transition-all duration-300 shadow-sm ${isOpen ? 'shadow-lg' : ''} hover:bg-banquise-blue-dark/20 hover:shadow-md`}>
+  <div className={`bg-gradient-to-br from-banquise-blue-dark/15 to-banquise-blue-dark/5 backdrop-blur-lg rounded-2xl overflow-hidden border border-banquise-blue-lightest/30 transition-all duration-300 shadow-sm ${isOpen ? 'shadow-xl border-banquise-blue-lightest/50 scale-[1.01]' : ''} hover:shadow-lg hover:border-banquise-blue-lightest/40`}>
     <div 
-      className="p-5 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray bg-banquise-blue-dark/20 transition-all duration-200 text-lg select-none hover:bg-banquise-blue/20"
+      className="p-8 cursor-pointer flex items-center justify-between font-semibold text-banquise-gray transition-all duration-200 text-lg select-none hover:bg-banquise-blue-dark/10"
       onClick={onToggle}
     >
-      {title}
-      <span className={`text-xl transition-transform duration-300 text-banquise-blue-lightest ${isOpen ? 'rotate-180' : ''}`}>
+      <span className="flex items-center">{title}</span>
+      <span className={`text-2xl transition-transform duration-300 text-banquise-blue-lightest ${isOpen ? 'rotate-180' : ''}`}>
         ▼
       </span>
     </div>
-    <div className={`transition-all duration-500 overflow-hidden bg-banquise-blue-dark/5 ${isOpen ? 'max-h-1000 p-6' : 'max-h-0'}`}>
+    <div className={`transition-all duration-500 overflow-hidden ${isOpen ? 'max-h-[1000px] pb-8 px-8' : 'max-h-0'}`}>
       <div className="text-banquise-gray/90 leading-relaxed">
         {children}
       </div>