From 0197cb01def9ead8de276198c05710e8d4b54cab Mon Sep 17 00:00:00 2001
From: Sacha VAUDEY <sacha.vaudey@epita.fr>
Date: Sat, 31 May 2025 22:00:23 +0200
Subject: [PATCH] Update background

---
 banquise-website/src/App.tsx                  | 24 ------
 .../src/components/layout/Footer.tsx          |  4 +-
 .../src/components/sections/AboutSection.tsx  |  2 +-
 .../src/components/sections/HeroSection.tsx   |  8 --
 banquise-website/src/index.css                | 75 +++++++++++++++++++
 5 files changed, 78 insertions(+), 35 deletions(-)

diff --git a/banquise-website/src/App.tsx b/banquise-website/src/App.tsx
index fce47f6..3ff2fe2 100644
--- a/banquise-website/src/App.tsx
+++ b/banquise-website/src/App.tsx
@@ -86,30 +86,6 @@ const App: React.FC = () => {
           <TechFeaturesSection />
           <ServicesSection services={services} onServiceClick={setSelectedService} />
           <AboutSection openAccordion={openAccordion} toggleAccordion={toggleAccordion} />
-
-          {/* 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 - 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/15 opacity-60 animate-rise`}
-                style={{
-                  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>
-            ))}
-          </div>
         </div>
       </main>
 
diff --git a/banquise-website/src/components/layout/Footer.tsx b/banquise-website/src/components/layout/Footer.tsx
index be2e1cf..61e6533 100644
--- a/banquise-website/src/components/layout/Footer.tsx
+++ b/banquise-website/src/components/layout/Footer.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export const Footer: React.FC = () => (
-  <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">
+  <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">
     <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">
@@ -50,7 +50,7 @@ export const Footer: React.FC = () => (
             </a>
           </li>
           <li className="mb-3">
-            <a href="#" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
+            <a href="mailto:contact@la-banquise.fr" className="text-banquise-gray/80 no-underline transition-all duration-200 inline-flex items-center hover:text-banquise-gray hover:translate-x-1">
               Contact
             </a>
           </li>
diff --git a/banquise-website/src/components/sections/AboutSection.tsx b/banquise-website/src/components/sections/AboutSection.tsx
index 1c2e691..62bbfa8 100644
--- a/banquise-website/src/components/sections/AboutSection.tsx
+++ b/banquise-website/src/components/sections/AboutSection.tsx
@@ -7,7 +7,7 @@ interface AboutSectionProps {
 }
 
 export const AboutSection: React.FC<AboutSectionProps> = ({ openAccordion, toggleAccordion }) => (
-  <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">
+  <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">
     <div className="max-w-4xl mx-auto">
       {/* Header */}
       <div className="text-center mb-20">
diff --git a/banquise-website/src/components/sections/HeroSection.tsx b/banquise-website/src/components/sections/HeroSection.tsx
index 7324423..96519e3 100644
--- a/banquise-website/src/components/sections/HeroSection.tsx
+++ b/banquise-website/src/components/sections/HeroSection.tsx
@@ -18,13 +18,5 @@ export const HeroSection: React.FC = () => (
       Découvrir nos services
       <span className="ml-3 text-xl transition-transform duration-300 group-hover:translate-x-1">→</span>
     </a>
-
-    {/* 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/index.css b/banquise-website/src/index.css
index 57c53d0..0c610c7 100644
--- a/banquise-website/src/index.css
+++ b/banquise-website/src/index.css
@@ -7,3 +7,78 @@
   --font-heading: 'Dela Gothic One', sans-serif;
   --font-body: 'Roboto', sans-serif;
 }
+
+/* Parallax animations */
+@keyframes parallax-slow {
+  0% { transform: translateY(0px); }
+  100% { transform: translateY(-50px); }
+}
+
+@keyframes parallax-medium {
+  0% { transform: translateY(0px); }
+  100% { transform: translateY(-80px); }
+}
+
+@keyframes parallax-fast {
+  0% { transform: translateY(0px); }
+  100% { transform: translateY(-120px); }
+}
+
+@keyframes parallax-very-slow {
+  0% { transform: translateY(0px); }
+  100% { transform: translateY(-20px); }
+}
+
+/* Floating animations with different speeds */
+@keyframes float-slow {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-20px) rotate(5deg); }
+}
+
+@keyframes float-medium {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-15px) rotate(-3deg); }
+}
+
+@keyframes float-fast {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-10px) rotate(3deg); }
+}
+
+@keyframes float-very-slow {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  50% { transform: translateY(-30px) rotate(-2deg); }
+}
+
+/* Apply animations */
+.animate-parallax-slow {
+  animation: parallax-slow 20s ease-in-out infinite;
+}
+
+.animate-parallax-medium {
+  animation: parallax-medium 15s ease-in-out infinite;
+}
+
+.animate-parallax-fast {
+  animation: parallax-fast 10s ease-in-out infinite;
+}
+
+.animate-parallax-very-slow {
+  animation: parallax-very-slow 30s ease-in-out infinite;
+}
+
+.animate-float-slow {
+  animation: float-slow 8s ease-in-out infinite;
+}
+
+.animate-float-medium {
+  animation: float-medium 6s ease-in-out infinite;
+}
+
+.animate-float-fast {
+  animation: float-fast 4s ease-in-out infinite;
+}
+
+.animate-float-very-slow {
+  animation: float-very-slow 12s ease-in-out infinite;
+}