card finished

src/app/globals.css

@@ -29,12 +29,16 @@ body {
   }
 }
 
-/* Update the card flip styles */
+/* Card flip styles */
 .card-container {
   perspective: 1500px;
 }
 
 .card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
   cursor: pointer;
@@ -44,34 +48,15 @@ body {
   transform: rotateY(180deg);
 }
 
-.card-front,
-.card-back {
-  -webkit-backface-visibility: hidden;
+.card-side {
+  position: absolute;
+  width: 100%;
+  height: 100%;
   backface-visibility: hidden;
-  transform-style: preserve-3d;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
-              0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  -webkit-backface-visibility: hidden;
 }
 
+
 .card-back {
   transform: rotateY(180deg);
 }
-
-/* Add a subtle hover effect */
-.card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.1),
-    rgba(255, 255, 255, 0)
-  );
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.card:hover::before {
-  opacity: 1;
-}

src/components/HomePage.tsx

@@ -91,25 +91,27 @@ const HomePage = () => {
           
           {/* Loyalty Card with Flip Effect */}
           <div className="card-container max-w-2xl mx-auto aspect-[1.586/1] mb-8">
-            <div className="card relative w-full h-full rounded-2xl shadow-2xl">
+            <div className="card relative w-full h-full">
               {/* Front of the card */}
-              <div className="card-front absolute w-full h-full rounded-2xl overflow-hidden">
+              <div className="card-side card-front absolute w-full h-full rounded-[24px] overflow-hidden bg-bakery-600">
                 <Image
                   src="/images/ressources/card-front.png"
                   alt="Carte de fidélité - Recto"
                   fill
-                  className="object-cover"
+                  className="object-contain p-1"
                   priority
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                 />
               </div>
               {/* Back of the card */}
-              <div className="card-back absolute w-full h-full rounded-2xl overflow-hidden">
+              <div className="card-side card-back absolute w-full h-full rounded-[24px] overflow-hidden bg-bakery-600">
                 <Image
                   src="/images/ressources/card-back.png"
                   alt="Carte de fidélité - Verso"
                   fill
-                  className="object-cover"
+                  className="object-contain p-1"
                   priority
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                 />
               </div>
             </div>