card css flip effect

src/app/globals.css

@@ -29,14 +29,15 @@ body {
   }
 }
 
-/* Add card flip animation */
+/* Update the card flip styles */
 .card-container {
-  perspective: 1000px;
+  perspective: 1500px;
 }
 
 .card {
   transition: transform 0.8s;
   transform-style: preserve-3d;
+  cursor: pointer;
 }
 
 .card:hover {
@@ -45,12 +46,32 @@ body {
 
 .card-front,
 .card-back {
-  position: absolute;
+  -webkit-backface-visibility: hidden;
-  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);
 }
 
 .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

@@ -90,25 +90,25 @@ const HomePage = () => {
           </p>
           
           {/* Loyalty Card with Flip Effect */}
-          <div className="card-container max-w-2xl mx-auto h-[200px] mb-8">
+          <div className="card-container max-w-2xl mx-auto aspect-[1.586/1] mb-8">
-            <div className="card relative w-full h-full">
+            <div className="card relative w-full h-full rounded-2xl shadow-2xl">
               {/* Front of the card */}
-              <div className="card-front">
+              <div className="card-front absolute w-full h-full rounded-2xl overflow-hidden">
                 <Image
                   src="/images/ressources/card-front.png"
                   alt="Carte de fidélité - Recto"
                   fill
-                  className="object-contain rounded-xl shadow-lg"
+                  className="object-cover"
                   priority
                 />
               </div>
               {/* Back of the card */}
-              <div className="card-back">
+              <div className="card-back absolute w-full h-full rounded-2xl overflow-hidden">
                 <Image
                   src="/images/ressources/card-back.png"
                   alt="Carte de fidélité - Verso"
                   fill
-                  className="object-contain rounded-xl shadow-lg"
+                  className="object-cover"
                   priority
                 />
               </div>