Reveal Quote Card

1<script>
2  import { fly } from 'svelte/transition';
3</script>
4
5<div class="quote" in:fly={{ y: 20, duration: 600 }}>
6  <div class="mark">”</div>
7  <p>Endlich Komponenten, die framework-übergreifend funktionieren und wirklich schön sind.</p>
8  <div class="who">
9    <div class="ava">M</div>
10    <div><strong>Marco T.</strong><span>Frontend-Entwickler</span></div>
11  </div>
12</div>
13
14<style>
15  .quote{width:320px;padding:26px;border-radius:20px;border:1px solid rgba(255,255,255,.1);
16    background:linear-gradient(160deg,rgba(139,92,246,.08),rgba(6,182,212,.04));font-family:system-ui}
17  .mark{font-size:46px;line-height:0;color:#a78bfa;height:20px}
18  .quote p{color:#e8e8f0;font-size:15px;line-height:1.65;margin:0 0 18px}
19  .who{display:flex;align-items:center;gap:12px}
20  .ava{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
21    background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;font-weight:700}
22  .who strong{display:block;color:#fff;font-size:14px}
23  .who span{color:rgba(255,255,255,.5);font-size:13px}
24</style>