radionica3d/src/components/ReviewsSection.vue

<template>
  <section v-if="reviews.length > 0" class="py-24 bg-background relative overflow-hidden">
    <!-- Background Decor -->
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-full pointer-events-none">
      <div class="absolute top-24 left-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
      <div class="absolute bottom-24 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl" />
    </div>

    <div class="container mx-auto px-4 relative z-10">
      <div class="text-center mb-16">
        <h2 class="font-display text-4xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-foreground to-foreground/60">
          {{ t('home.reviews.title') }}
        </h2>
        <p class="text-muted-foreground max-w-2xl mx-auto">
          {{ t('home.reviews.subtitle') }}
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div 
          v-for="(review, idx) in reviews" 
          :key="idx"
          v-motion
          :initial="{ opacity: 0, y: 20 }"
          :enter="{ opacity: 1, y: 0, transition: { delay: idx * 100 } }"
          class="bg-card/40 backdrop-blur-xl border border-border/50 p-8 rounded-3xl hover:border-primary/30 transition-all group"
        >
          <div class="flex gap-0.5 mb-6">
            <Star 
              v-for="i in 5" 
              :key="i"
              class="w-4 h-4" 
              :class="i <= review.rating ? 'text-yellow-500 fill-yellow-500' : 'text-muted-foreground/20'"
            />
          </div>
          
          <p class="text-foreground/80 leading-relaxed mb-8 italic">
            "{{ review.review_text }}"
          </p>

          <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
              {{ review.first_name[0] }}
            </div>
            <div>
              <p class="font-bold text-sm">{{ review.first_name }}</p>
              <p class="text-[10px] text-muted-foreground uppercase tracking-widest">{{ t('home.reviews.verifiedCustomer') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { Star } from 'lucide-vue-next';
import { getPublicReviews } from '@/lib/api';

const { t } = useI18n();
const reviews = ref<any[]>([]);

onMounted(async () => {
  try {
    reviews.value = await getPublicReviews();
  } catch (e) {
    console.error('Failed to load reviews:', e);
  }
});
</script>