radionica3d/src/views/PrivacyPolicy.vue

<template>
  <div class="min-h-screen bg-white pt-24 pb-16">
    <div class="container mx-auto px-4 max-w-3xl">
      <div class="mb-12 animate-slide-up">
        <h1 class="font-display text-4xl sm:text-5xl font-extrabold mb-4 tracking-tight">
          {{ t("privacy.title") }}
        </h1>
        <p class="text-foreground/60 text-lg font-medium leading-relaxed">
          {{ t("privacy.subtitle") }}
        </p>
      </div>

      <div class="space-y-10">
        <section 
          v-for="(section, idx) in (tm('privacy.sections') as any)" 
          :key="idx"
          class="animate-slide-up"
          :style="{ animationDelay: `${idx * 100}ms` }"
        >
          <div class="flex items-start gap-4">
            <div class="w-10 h-10 bg-primary/5 rounded-xl flex items-center justify-center flex-shrink-0 mt-1">
              <span class="text-primary font-display font-bold">0{{ idx + 1 }}</span>
            </div>
            <div class="space-y-2">
              <h2 class="font-display text-xl font-bold tracking-tight text-foreground">
                {{ rt(section.title) }}
              </h2>
              <p class="text-foreground/50 text-base leading-relaxed font-medium">
                {{ rt(section.content) }}
              </p>
            </div>
          </div>
        </section>
      </div>

      <div class="mt-16 p-8 rounded-[2rem] bg-secondary/30 animate-fade-in">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-6">
          <div class="space-y-1">
            <h3 class="font-display text-lg font-bold">{{ t("footer.contact") }}</h3>
            <p class="text-foreground/40 text-sm font-medium">{{ t("privacy.responseNotice") }}</p>
          </div>
          <a href="mailto:hello@radionica3d.me" class="inline-flex items-center gap-2 px-6 py-3 bg-white border border-black/[0.05] rounded-2xl font-bold text-sm hover:shadow-md transition-all active:scale-95">
            <Mail class="w-4 h-4 text-primary" />
            hello@radionica3d.me
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { Mail } from "lucide-vue-next";

const { t, tm, rt } = useI18n();
</script>