loaylty card css

src/app/globals.css

@@ -2,8 +2,25 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   @apply bg-bakery-50 text-bakery-900;
+  opacity: 0;
+  animation: fadeIn 0.5s ease-in forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @layer components {
@@ -11,3 +28,29 @@ body {
     @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
   }
 }
+
+/* Add card flip animation */
+.card-container {
+  perspective: 1000px;
+}
+
+.card {
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.card:hover {
+  transform: rotateY(180deg);
+}
+
+.card-front,
+.card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}

src/components/HomePage.tsx

@@ -88,6 +88,33 @@ const HomePage = () => {
             Rejoignez notre programme de fidélité et bénéficiez d'avantages exclusifs.
             Votre 10ème baguette offerte !
           </p>
+          
+          {/* Loyalty Card with Flip Effect */}
+          <div className="card-container max-w-2xl mx-auto h-[200px] mb-8">
+            <div className="card relative w-full h-full">
+              {/* Front of the card */}
+              <div className="card-front">
+                <Image
+                  src="/images/ressources/card-front.png"
+                  alt="Carte de fidélité - Recto"
+                  fill
+                  className="object-contain rounded-xl shadow-lg"
+                  priority
+                />
+              </div>
+              {/* Back of the card */}
+              <div className="card-back">
+                <Image
+                  src="/images/ressources/card-back.png"
+                  alt="Carte de fidélité - Verso"
+                  fill
+                  className="object-contain rounded-xl shadow-lg"
+                  priority
+                />
+              </div>
+            </div>
+          </div>
+
           <button className="bg-white text-bakery-600 px-8 py-3 rounded-md hover:bg-bakery-50 transition">
             Obtenir ma carte
           </button>