Feature/add 3D hover effect to membership card component

- Add @Input() hover3d property to enable/disable 3D hover effect
- Implement 8 hover zones for dynamic 3D tilt effect
- Add CSS-only 3D transformations based on mouse position
- Update Storybook stories with hover3d

libs/ui/src/lib/membership-card/membership-card.component.html

@@ -1,3 +1,4 @@
+<div class="card-wrapper" [class.hover-3d-enabled]="hover3d">
   <div
     class="card-container position-relative"
     [ngClass]="{ premium: name === 'Premium' }"
@@ -48,3 +49,14 @@
       </div>
     </a>
   </div>
+  @if (hover3d) {
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+    <div class="hover-zone"></div>
+  }
+</div>

libs/ui/src/lib/membership-card/membership-card.component.scss

@@ -7,6 +7,14 @@
   padding-top: calc(1 * var(--borderWidth));
   width: 100%;
 
+  .card-wrapper {
+    position: relative;
+
+    &.hover-3d-enabled {
+      perspective: 1000px;
+    }
+  }
+
   .card-container {
     border-radius: var(--borderRadius);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
@@ -69,4 +77,217 @@
       }
     }
   }
+
+  .hover-3d-enabled {
+    .card-container {
+      transition:
+        transform 300ms ease,
+        box-shadow 300ms ease;
+      transform-style: preserve-3d;
+      will-change: transform;
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(
+          circle at 50% 0%,
+          rgba(255, 255, 255, 0.25),
+          transparent 60%
+        );
+        opacity: 0;
+        mix-blend-mode: screen;
+        transition: opacity 300ms ease;
+        pointer-events: none;
+        border-radius: var(--borderRadius);
+        z-index: 1;
+      }
+    }
+
+    .hover-zone {
+      position: absolute;
+      width: 33.333%;
+      height: 33.333%;
+      pointer-events: auto;
+      z-index: 2;
+
+      &:nth-child(3) {
+        top: 0;
+        left: 0;
+      }
+
+      &:nth-child(4) {
+        top: 0;
+        left: 33.333%;
+      }
+
+      &:nth-child(5) {
+        top: 0;
+        right: 0;
+      }
+
+      &:nth-child(6) {
+        top: 33.333%;
+        left: 0;
+      }
+
+      &:nth-child(7) {
+        top: 33.333%;
+        right: 0;
+      }
+
+      &:nth-child(8) {
+        bottom: 0;
+        left: 0;
+      }
+
+      &:nth-child(9) {
+        bottom: 0;
+        left: 33.333%;
+      }
+
+      &:nth-child(10) {
+        bottom: 0;
+        right: 0;
+      }
+    }
+
+    &:has(.hover-zone:nth-child(3):hover) .card-container {
+      transform: perspective(1000px) rotateX(5deg) rotateY(-5deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 0% 0%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(4):hover) .card-container {
+      transform: perspective(1000px) rotateX(5deg) rotateY(0deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 50% 0%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(5):hover) .card-container {
+      transform: perspective(1000px) rotateX(5deg) rotateY(5deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 100% 0%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(6):hover) .card-container {
+      transform: perspective(1000px) rotateX(0deg) rotateY(-5deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 0% 50%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(7):hover) .card-container {
+      transform: perspective(1000px) rotateX(0deg) rotateY(5deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 100% 50%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(8):hover) .card-container {
+      transform: perspective(1000px) rotateX(-5deg) rotateY(-5deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 0% 100%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(9):hover) .card-container {
+      transform: perspective(1000px) rotateX(-5deg) rotateY(0deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 50% 100%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+
+    &:has(.hover-zone:nth-child(10):hover) .card-container {
+      transform: perspective(1000px) rotateX(-5deg) rotateY(5deg)
+        translateY(-2px);
+      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
+
+      &::before {
+        opacity: 1;
+        background: radial-gradient(
+          circle at 100% 100%,
+          rgba(255, 255, 255, 0.35),
+          transparent 60%
+        );
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hover-3d-enabled {
+      .card-container {
+        transition: none !important;
+        transform: none !important;
+
+        &::before {
+          transition: none !important;
+        }
+      }
+
+      &:has(.hover-zone:hover) .card-container {
+        transform: none !important;
+      }
+    }
+  }
 }

libs/ui/src/lib/membership-card/membership-card.component.stories.ts

@@ -29,6 +29,9 @@ export default {
     name: {
       control: { type: 'select' },
       options: ['Basic', 'Premium']
+    },
+    hover3d: {
+      control: { type: 'boolean' }
     }
   }
 } as Meta<GfMembershipCardComponent>;
@@ -37,7 +40,8 @@ type Story = StoryObj<GfMembershipCardComponent>;
 
 export const Basic: Story = {
   args: {
-    name: 'Basic'
+    name: 'Basic',
+    hover3d: false
   }
 };
 
@@ -45,6 +49,7 @@ export const Premium: Story = {
   args: {
     expiresAt: addYears(new Date(), 1).toLocaleDateString(),
     hasPermissionToCreateApiKey: true,
-    name: 'Premium'
+    name: 'Premium',
+    hover3d: false
   }
 };

libs/ui/src/lib/membership-card/membership-card.component.ts

@@ -34,6 +34,7 @@ import { GfLogoComponent } from '../logo';
 export class GfMembershipCardComponent {
   @Input() public expiresAt: string;
   @Input() public hasPermissionToCreateApiKey: boolean;
+  @Input() public hover3d = false;
   @Input() public name: string;
 
   @Output() generateApiKeyClicked = new EventEmitter<void>();