radionica3d/src/components/QuotingSection.vue

<template>
  <section id="philosophy" class="py-12 sm:py-20 bg-white relative overflow-hidden scroll-mt-24">
    <div class="absolute inset-0 bg-gradient-glow opacity-30" />

    <div class="container mx-auto px-4 relative z-10">
      <div class="text-center mb-10 sm:mb-16 animate-slide-up">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/5 border border-primary/10 text-primary mb-4">
          <Shield class="w-4 h-4" />
          <span class="text-[10px] font-display font-bold tracking-[0.2em] uppercase">{{ t("pricing.badge") }}</span>
        </div>
        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 tracking-tight">
          {{ t("pricing.title") }} <span class="text-primary">{{ t("pricing.titleGradient") }}</span>
        </h2>
        <p class="text-foreground/60 max-w-xl mx-auto text-base font-medium">{{ t("pricing.description") }}</p>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div
          v-for="(step, index) in steps"
          :key="index"
          class="group relative p-6 bg-white border border-black/[0.04] rounded-[2rem] hover:border-primary/20 transition-all duration-500 hover:shadow-hover animate-scale-in"
          :style="{ animationDelay: step.delay }"
        >
          <div class="w-12 h-12 bg-primary/5 rounded-[1.2rem] flex items-center justify-center mb-5 group-hover:bg-primary group-hover:text-primary-foreground transition-all duration-500">
            <component :is="step.icon" class="w-6 h-6 transition-transform group-hover:scale-110" />
          </div>
          <h3 class="font-display text-base font-bold mb-2 leading-tight group-hover:text-primary transition-colors">{{ step.title }}</h3>
          <div v-if="index < steps.length - 1" class="hidden lg:block absolute top-1/2 -right-4 w-8 h-[2px] bg-gradient-to-r from-primary/30 to-transparent z-0" />
        </div>
      </div>

      <!-- Philosophy block -->
      <div class="mt-10 sm:mt-16 p-8 sm:p-10 rounded-[2.5rem] bg-secondary/30 relative overflow-hidden group animate-fade-in">
        <div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full blur-3xl -mr-32 -mt-32 transition-transform group-hover:scale-110 duration-700" />
        <div class="grid lg:grid-cols-2 gap-10 items-center relative z-10">
          <div class="space-y-4">
            <h3 class="font-display text-2xl font-extrabold tracking-tight">
              {{ t("whyTrust.title") }} <span class="bg-primary/10 text-primary px-2 py-0.5 rounded-lg">{{ t("whyTrust.titleItalic") }}</span>?
            </h3>
            <div class="space-y-3 text-foreground/50 text-base font-medium leading-relaxed">
              <p>{{ t("whyTrust.description1") }}</p>
              <p>{{ t("whyTrust.description2") }}</p>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div
              v-for="item in trustItems"
              :key="item.label"
              class="p-4 rounded-3xl bg-white border border-black/[0.03] flex flex-col items-center text-center group/item hover:shadow-sm transition-all shadow-[0_4px_10px_rgba(0,0,0,0.03)]"
            >
              <div class="text-xl font-bold text-primary mb-0.5 group-hover/item:scale-110 transition-transform">{{ item.value }}</div>
              <div class="text-[9px] uppercase tracking-[0.2em] font-extrabold text-foreground/30">{{ item.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { Shield, Send, Sparkles, Package, CreditCard, CheckCircle2 } from "lucide-vue-next";

const { t } = useI18n();
const steps = computed(() => [
  { icon: Send,       title: t("pricing.trustSteps.step1"), delay: "0ms" },
  { icon: Sparkles,   title: t("pricing.trustSteps.step2"), delay: "100ms" },
  { icon: Package,    title: t("pricing.trustSteps.step3"), delay: "200ms" },
  { icon: CreditCard, title: t("pricing.trustSteps.step4"), delay: "300ms" },
]);
const trustItems = computed(() => [
  { label: t("whyTrust.items.noPrepayment"), value: "100%" },
  { label: t("whyTrust.items.shipping"),     value: "Fast" },
  { label: t("whyTrust.items.yourPrice"),    value: "Fair" },
  { label: t("whyTrust.items.noCommissions"),value: "Open" },
]);
</script>