BYW-VoiceHub/app/components/year-review/FirstSongSlide.vue

<template>
  <div v-if="data.firstSong" class="slide-container">
    <!-- Background Image Blur -->
    <div
      v-if="data.firstSong.cover"
      class="bg-blur"
      :style="{ backgroundImage: `url(${data.firstSong.cover})` }"
    />

    <Transition name="entry" appear>
      <div v-show="active" class="content">
        <span class="badge">{{ yearReview.firstSongBadge }}</span>

        <p class="text-intro">{{ yearReview.firstSongIntro }}</p>

        <div class="vinyl-container">
          <div class="vinyl-record">
            <img
              v-if="data.firstSong.cover"
              :src="data.firstSong.cover"
              alt="Cover"
              class="cover-img"
            >
            <div v-else class="placeholder-icon">
              <svg
                width="64"
                height="64"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M9 18V5l12-2v13" />
                <circle cx="6" cy="18" r="3" />
                <circle cx="18" cy="16" r="3" />
              </svg>
            </div>
            <div class="glossy-overlay" />
          </div>
        </div>

        <div class="song-info">
          <h2 class="song-title">{{ data.firstSong.title }}</h2>
          <p class="song-artist">{{ data.firstSong.artist }}</p>
        </div>

        <p class="date-text">{{ formatDate(data.firstSong.createdAt) }}</p>
      </div>
    </Transition>
  </div>
</template>

<script setup>
import { useLocale } from '~/utils/locale'

defineProps({
  data: Object,
  active: Boolean
})
const { yearReview } = useLocale()

const formatDate = (dateStr) => {
  const date = new Date(dateStr)
  return yearReview.value.date(date.getMonth() + 1, date.getDate())
}
</script>

<style scoped>
.slide-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-primary);
}

.bg-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  filter: blur(80px);
  transform: scale(1.1);
}

.content {
  z-index: 10;
  width: 100%;
  max-width: 450px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  border: 1px solid var(--overlay-20);
  background: var(--overlay-5);
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--color-pink); /* brand-pink */
  font-weight: 600;
}

.text-intro {
  font-size: 1.5rem;
  color: var(--text-primary-lighter);
  font-weight: 300;
  margin-bottom: 2rem;
}

.highlight {
  color: var(--text-primary);
  font-weight: 700;
  margin: 0 0.5rem;
}

.vinyl-container {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin-bottom: 2rem;
}

.vinyl-record {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px var(--mask-50);
  border: 1px solid var(--overlay-10);
  background: var(--panel-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}

.vinyl-record:hover .cover-img {
  transform: scale(1.05);
}

.placeholder-icon {
  color: var(--text-muted);
}

.glossy-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, var(--overlay-10), transparent);
  pointer-events: none;
}

.song-info {
  width: 100%;
  margin-bottom: 0.5rem;
}

.song-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.song-artist {
  font-size: 1.125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-text {
  margin-top: 2rem;
  font-size: 1.125rem;
  color: var(--text-muted);
  font-family:
    'MiSans',
    system-ui,
    -apple-system,
    sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .text-intro {
    font-size: 1.125rem;
  }
  .song-title {
    font-size: 1.5rem;
  }
  .vinyl-container {
    max-width: 280px;
  }
}
</style>