radionica3d/src/components/HeroSection.vue

<template>
  <section class="relative min-h-[70vh] sm:min-h-[85vh] flex items-center justify-center overflow-hidden bg-white">
    <div class="absolute inset-0 grid-pattern opacity-50" />
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-glow rounded-full blur-3xl" />

    <div class="container mx-auto px-4 pt-20 sm:pt-24 lg:pt-0 lg:mt-8">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <!-- Text -->
        <div class="text-center lg:text-left animate-slide-up">
          <div class="inline-flex items-center justify-center px-4 py-1.5 mb-6 rounded-full bg-primary/10 border border-primary/20">
            <span class="text-xs text-primary font-bold tracking-widest">{{ t("hero.badge") }}</span>
          </div>

          <h1 class="font-display text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-[1.1] mb-4 sm:mb-6 tracking-tight">
            {{ t("hero.title") }}
            <span class="block text-primary">{{ t("hero.titleGradient") }}</span>
          </h1>

          <p class="text-base sm:text-lg text-foreground/70 max-w-xl mx-auto lg:mx-0 mb-6 sm:mb-8 leading-relaxed font-medium">
            {{ t("hero.description") }}
          </p>

          <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
            <Button variant="hero" size="xl" class="group" as="a" href="#upload">
              <Upload class="w-5 h-5" />
              {{ t("hero.uploadButton") }}
              <ArrowRight class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Button>
            <Button variant="heroOutline" size="xl" as="a" href="#process">
              {{ t("hero.pricingButton") }}
            </Button>
          </div>

          <!-- Stats -->
          <div class="grid grid-cols-3 gap-6 mt-8 sm:mt-10 pt-6 border-t border-black/[0.05]">
            <div class="space-y-1">
              <div class="font-display text-xl sm:text-2xl font-bold text-primary">{{ t("hero.stats.precisionValue") }}</div>
              <div class="text-[10px] uppercase tracking-widest font-bold text-foreground/40">{{ t("hero.stats.precision") }}</div>
            </div>
            <div class="space-y-1">
              <div class="font-display text-xl sm:text-2xl font-bold text-primary">{{ t("hero.stats.materialsValue") }}</div>
              <div class="text-[10px] uppercase tracking-widest font-bold text-foreground/40">{{ t("hero.stats.materials") }}</div>
            </div>
            <div class="space-y-1">
              <div class="font-display text-xl sm:text-2xl font-bold text-primary">{{ t("hero.stats.shippingValue") }}</div>
              <div class="text-[10px] uppercase tracking-widest font-bold text-foreground/40">{{ t("hero.stats.shipping") }}</div>
            </div>
          </div>
        </div>

        <!-- Image (Desktop Only) -->
        <div v-if="isDesktop" class="relative animate-float block">
          <div class="relative z-10 p-1.5 bg-white/50 backdrop-blur-sm rounded-[2.5rem] shadow-[0_32px_64px_rgba(0,0,0,0.08)] border border-black/[0.03]">
            <img 
              src="/src/assets/hero-premium.png" 
              alt="High Precision 3D Printing" 
              class="w-full h-auto rounded-[2rem] aspect-[4/3] object-cover"
              loading="lazy" 
            />
          </div>
          <div class="absolute -top-6 -right-6 w-32 h-32 border border-primary/20 rounded-[2rem] animate-pulse" />
          <div class="absolute -bottom-10 -left-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { ArrowRight, Upload } from "lucide-vue-next";
import Button from "./ui/button.vue";

const { t } = useI18n();

const isDesktop = ref(false);

const checkIsDesktop = () => {
  isDesktop.value = window.innerWidth >= 1024;
};

onMounted(() => {
  checkIsDesktop();
  window.addEventListener('resize', checkIsDesktop);
});

onUnmounted(() => {
  window.removeEventListener('resize', checkIsDesktop);
});
</script>