From 5991015b268a49fbb5f1e998300f139c471ddd68 Mon Sep 17 00:00:00 2001
From: Paul Fresnel <paul.fresnel1@gmail.com>
Date: Thu, 7 Nov 2024 14:17:37 +0100
Subject: [PATCH] card css flip effect

---
 src/app/globals.css         | 31 ++++++++++++++++++++++++++-----
 src/components/HomePage.tsx | 12 ++++++------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 637015c..dca8096 100644
--- a/src/app/globals.css
+++ b/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;
-  width: 100%;
-  height: 100%;
+  -webkit-backface-visibility: hidden;
   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;
 }
\ No newline at end of file
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index b5c492e..3cb5a8e 100644
--- a/src/components/HomePage.tsx
+++ b/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 relative w-full h-full">
+          <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">
               {/* 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>