feat: add Flipcard component support with configuration and styling for enhanced interactivity

apps/web/styles/globals.css

@@ -251,3 +251,35 @@ layer(base);
     @apply border-border;}
   body {
     @apply bg-background text-foreground;}}
+
+    /* Flipcard 3D Animation Styles */
+.flipcard-container {
+  perspective: 1000px;
+}
+
+.flipcard-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.7s ease-in-out;
+  transform-style: preserve-3d;
+}
+
+.flipcard-inner.flipped {
+  transform: rotateY(180deg);
+}
+
+.flipcard-front,
+.flipcard-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border-radius: 12px;
+}
+
+.flipcard-back {
+  transform: rotateY(180deg);
+}