radionica3d/src/components/ProcessSection.vue

<template>
  <section id="process" class="py-12 sm:py-24 relative overflow-hidden bg-card/30 scroll-mt-24">
    <div class="container mx-auto px-4">
      <div class="text-center mb-10 sm:mb-16 animate-slide-up">
        <span class="text-primary font-display text-sm tracking-widest uppercase">{{ t("nav.howItWorks") }}</span>
        <h2 class="font-display text-3xl sm:text-4xl lg:text-5xl font-bold mt-4 mb-6">
          {{ t("hero.title") }} <span class="text-gradient">{{ t("hero.titleGradient") }}</span>
        </h2>
        <p class="text-muted-foreground max-w-2xl mx-auto">{{ t("hero.description") }}</p>
      </div>

      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div v-for="(step, index) in steps" :key="step.step" class="relative group">
          <!-- Connector -->
          <div v-if="index < steps.length - 1" class="hidden lg:block absolute top-10 left-[60%] w-full h-0.5 bg-gradient-to-r from-primary/30 to-transparent z-0" />

          <div class="relative z-10 text-center flex flex-col items-center">
            <div class="relative inline-block mb-4 sm:mb-6">
              <div class="w-20 h-20 bg-secondary rounded-2xl flex items-center justify-center border border-border/50 group-hover:border-primary/50 transition-all duration-500 group-hover:bg-primary/5 group-hover:rotate-6">
                <component :is="step.icon" class="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
              </div>
              <span class="absolute -top-2 -right-2 w-8 h-8 bg-primary text-primary-foreground font-display font-bold text-sm rounded-lg flex items-center justify-center shadow-glow">
                {{ step.step }}
              </span>
            </div>
            <h3 class="font-display text-lg font-semibold max-w-[200px] leading-snug">{{ step.title }}</h3>
            <div v-if="index < steps.length - 1" class="lg:hidden mt-4 text-primary/30 rotate-90">
              <ArrowRight class="w-6 h-6" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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

const { t } = useI18n();
const steps = computed(() => [
  { icon: Send,       step: "01", title: t("pricing.trustSteps.step1") },
  { icon: Sparkles,   step: "02", title: t("pricing.trustSteps.step2") },
  { icon: Package,    step: "03", title: t("pricing.trustSteps.step3") },
  { icon: CreditCard, step: "04", title: t("pricing.trustSteps.step4") },
]);
</script>