Hover Lift Card

1<template>
2  <div class="lift" :class="{on}" @mouseenter="on=true" @mouseleave="on=false">
3    <div class="badge">Neu</div>
4    <h3>Design-Tokens</h3>
5    <p>Konsistente Farben, Abstände und Typo als wiederverwendbares System.</p>
6    <span class="more">Mehr →</span>
7  </div>
8</template>
9<script>
10export default { data: () => ({ on: false }) }
11</script>
12<style>
13.lift{width:300px;padding:24px;border-radius:20px;border:1px solid rgba(255,255,255,.1);background:#101019;
14  font-family:system-ui;transition:transform .3s,box-shadow .3s,border-color .3s}
15.lift.on{transform:translateY(-6px);border-color:rgba(167,139,250,.4);box-shadow:0 20px 50px -20px rgba(139,92,246,.5)}
16.badge{display:inline-block;padding:3px 10px;border-radius:20px;background:rgba(6,182,212,.15);color:#67e8f9;font-size:12px;font-weight:600}
17.lift h3{margin:14px 0 8px;color:#fff;font-size:19px}
18.lift p{margin:0;color:rgba(255,255,255,.6);font-size:14px;line-height:1.6}
19.more{display:inline-block;margin-top:14px;color:#a78bfa;font-size:14px;font-weight:600}
20</style>