add backside of sponsor cards with link

Author: MrSunshyne

packages/frontendmu-nuxt/components/home/SponsorCarousel.vue

@@ -48,31 +48,41 @@ const carouselRef = templateRef<HTMLDivElement>('carouselRef')
         tabindex="0"
         aria-label="Sponsor logos carousel"
       >
-        <div
+        <NuxtLink
           v-for="(sponsor) in sortedSponsors"
           :key="sponsor.id"
-          class="grid place-items-center justify-center items-center bg-white p-4 rounded-md"
-          :title="sponsor.name"
+          :to="{
+            name: 'meetup-id',
+            params: {
+              id: sponsor.meetups[0].id,
+            },
+          }"
+          :title="`${sponsor.name} has sponsored the ${sponsor.meetups[0].title} meetup at ${sponsor.meetups[0].venue}`"
         >
-          <!-- :style="{ opacity: `${opacityValue(index)}%`, width: `${opacityValue(index) / 6}%`, filter: `saturate(${opacityValue(index) / 100})` }" -->
-          <NuxtLink
-            :to="{
-              name: 'meetup-id',
-              params: {
-                id: sponsor.meetups[0].id,
-              },
-            }"
-            :title="`${sponsor.name} has sponsored the ${sponsor.meetups[0].title} meetup at ${sponsor.meetups[0].venue}`"
+          <div
+
+            class="flip-card h-32  w-full object-contain rounded-md"
+            :title="sponsor.name"
           >
-            <img
-              :src="sponsorLogoUrl(sponsor)"
-              :alt="sponsor.name"
-              :class="sponsor.darkbg ? 'dark:bg-verse-900 bg-gray-500' : ''"
-              class="h-20 max-h-24 w-full object-contain rounded-md p-2"
-              draggable="false"
-            >
-          </NuxtLink>
-        </div>
+            <div class="flip-card-inner">
+              <div class="flip-card-front grid place-items-center justify-center items-center bg-white p-4 rounded-md">
+                <img
+                  :src="sponsorLogoUrl(sponsor)"
+                  :alt="sponsor.name"
+                  :class="sponsor.darkbg ? 'dark:bg-verse-900 bg-gray-500' : ''"
+                  class="h-20 max-h-28 w-full object-contain rounded-md p-2"
+                  draggable="false"
+                >
+              </div>
+              <div class="flip-card-back grid place-items-center justify-center items-center bg-white p-4 rounded-md">
+                <span class="z-0 absolute inset-0 h-full text-center w-full items-center justify-center text-gray-200 text-[100px] flex gap-2">
+                  {{ sponsor.meetups[0].date.split('-')[0] }}
+                </span>
+                <span class="z-10 font-medium font-mono text-lg text-center w-full block">{{ `${sponsor.name} has sponsored the ${sponsor.meetups[0].title} meetup` }}</span>
+              </div>
+            </div>
+          </div>
+        </NuxtLink>
       </div>
     </div>
     <div class="text-center">
@@ -82,3 +92,49 @@ const carouselRef = templateRef<HTMLDivElement>('carouselRef')
     </div>
   </section>
 </template>
+
+<style scoped>
+.flip-card {
+  background: transparent;
+  perspective: 200px;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.4s ease-in-out;
+  transform-style: preserve-3d;
+  /* transform-origin: 100px center; */
+}
+
+.flip-card:hover .flip-card-inner,
+.flip-card:focus-within .flip-card-inner {
+  transition: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.5);
+  transform: rotateX(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem; /* match rounded-md */
+}
+
+.flip-card-front {
+  z-index: 2;
+}
+
+.flip-card-back {
+  transform: rotateX(180deg);
+  z-index: 1;
+  background: #fff;
+  color: #222;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+</style>