radionica3d/src/pages/Guidelines.vue

<template>
  <div class="min-h-screen bg-white">
    <!-- Hero Section -->
    <header class="pt-32 pb-16 bg-gradient-to-b from-gray-50 to-white">
      <div class="container mx-auto px-4 text-center">
        <h1 class="text-4xl md:text-6xl font-display font-bold text-foreground mb-6">
          {{ t("nuances.title") }}
        </h1>
        <p class="text-xl text-foreground/60 max-w-2xl mx-auto">
          {{ t("nuances.subtitle") }}
        </p>
      </div>
    </header>

    <main class="container mx-auto px-4 pb-24">
      <!-- Intro Memo -->
      <section class="max-w-4xl mx-auto mb-20">
        <div class="bg-primary/5 rounded-3xl p-8 md:p-12 border border-primary/10">
          <div class="flex items-start gap-6">
            <div class="hidden md:flex w-12 h-12 bg-primary/10 text-primary rounded-full items-center justify-center flex-shrink-0">
              <InfoIcon class="w-6 h-6" />
            </div>
            <div>
              <h2 class="text-2xl font-display font-bold text-foreground mb-4">
                {{ t("nuances.disclaimer.title") }}
              </h2>
              <p class="text-lg text-foreground/70 leading-relaxed">
                {{ t("nuances.description") }}
                {{ t("nuances.disclaimer.text") }}
              </p>
            </div>
          </div>
        </div>
      </section>

      <!-- Nuances Visual Grid -->
      <section class="max-w-6xl mx-auto mb-32">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div 
            v-for="(nuance, key) in nuances" 
            :key="key"
            class="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-primary/20 hover:shadow-xl transition-all duration-300"
          >
            <div class="aspect-video bg-gray-50 overflow-hidden relative">
              <img 
                v-if="nuance.image" 
                :src="nuance.image" 
                :alt="t(`nuances.items.${key}.title`)"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
              />
              <div v-else class="w-full h-full flex items-center justify-center bg-primary/5 text-primary/40">
                <component :is="nuance.icon" class="w-12 h-12" />
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-display font-bold text-foreground mb-2">
                {{ t(`nuances.items.${key}.title`) }}
              </h3>
              <p class="text-foreground/70 mb-4 text-sm leading-relaxed">
                {{ t(`nuances.items.${key}.description`) }}
              </p>
              <div class="pt-4 border-t border-gray-50">
                <p class="text-sm text-foreground/50">
                  {{ t(`nuances.items.${key}.details`) }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-6 text-center">
          <p class="text-sm text-foreground/50 italic flex items-center justify-center gap-2">
            <InfoIcon class="w-4 h-4" />
            {{ t("nuances.aiDisclaimer") }}
          </p>
        </div>
      </section>

      <!-- Materials Specs -->
      <section class="max-w-5xl mx-auto mb-32">
        <h2 class="text-3xl font-display font-bold text-foreground text-center mb-12">
          {{ t("guidelines.materialSelection.title") }}
        </h2>
        <div class="grid md:grid-cols-2 gap-6">
          <div 
            v-for="material in materials" 
            :key="material.key"
            class="p-6 rounded-2xl bg-gray-50 border border-transparent hover:bg-white hover:border-gray-100 hover:shadow-sm transition-all"
          >
            <div class="flex items-center gap-4 mb-4">
              <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center border border-gray-100 font-bold text-primary">
                {{ material.short }}
              </div>
              <h3 class="text-xl font-display font-bold text-foreground">
                {{ t(`guidelines.materialSelection.${material.key}.name`) }}
              </h3>
            </div>
            <div class="space-y-3">
              <div class="flex justify-between text-sm">
                <span class="text-foreground/50">{{ t("guidelines.materialSelection.table.bestFor") }}</span>
                <span class="font-medium text-foreground">{{ t(`guidelines.materialSelection.${material.key}.bestFor`) }}</span>
              </div>
              <div class="flex justify-between text-sm">
                <span class="text-foreground/50">{{ t("guidelines.materialSelection.table.considerations") }}</span>
                <span class="font-medium text-foreground">{{ t(`guidelines.materialSelection.${material.key}.considerations`) }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Requirements & Process -->
      <div class="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
        <!-- Process -->
        <section>
          <h2 class="text-2xl font-display font-bold text-foreground mb-8">
            {{ t("guidelines.orderingProcess.title") }}
          </h2>
          <div class="space-y-8">
            <div 
              v-for="n in 4" 
              :key="n"
              class="flex gap-6 items-start"
            >
              <div class="w-10 h-10 bg-primary/10 text-primary rounded-xl flex items-center justify-center font-bold flex-shrink-0">
                {{ n }}
              </div>
              <div>
                <h3 class="font-display font-bold text-foreground mb-1">
                  {{ t(`guidelines.orderingProcess.step${n}.title`) }}
                </h3>
                <p class="text-foreground/60 text-sm">
                  {{ t(`guidelines.orderingProcess.step${n}.description`) }}
                </p>
              </div>
            </div>
          </div>
        </section>

        <!-- Technical Requirements -->
        <section>
          <h2 class="text-2xl font-display font-bold text-foreground mb-8">
            {{ t("guidelines.filePreparation.requirements.title") }}
          </h2>
          <div class="bg-gray-50 rounded-3xl p-8">
            <ul class="space-y-4">
              <li 
                v-for="req in ['watertight', 'normals', 'scale', 'wallThickness']" 
                :key="req"
                class="flex items-center gap-4 text-foreground/70"
              >
                <CheckCircleIcon class="w-5 h-5 text-primary" />
                <span>{{ t(`guidelines.filePreparation.requirements.${req}`) }}</span>
              </li>
            </ul>
            <div class="mt-8 pt-8 border-t border-gray-200">
              <p class="text-sm font-bold text-foreground mb-4 uppercase tracking-wider">
                {{ t("guidelines.filePreparation.formats.title") }}
              </p>
              <div class="flex flex-wrap gap-2">
                <span 
                  v-for="fmt in ['stl', 'obj', 'step', '3mf']" 
                  :key="fmt"
                  class="px-3 py-1 bg-white border border-gray-200 text-foreground/60 rounded-full text-sm font-medium"
                >
                  .{{ fmt }}
                </span>
              </div>
            </div>
          </div>
        </section>
      </div>

      <!-- Footer CTA -->
      <section class="mt-32 bg-foreground text-white rounded-3xl p-12 text-center relative overflow-hidden">
        <div class="relative z-10">
          <h2 class="text-3xl font-display font-bold mb-6">
            {{ t("guidelines.help.title") }}
          </h2>
          <p class="text-white/60 mb-8 max-w-xl mx-auto">
            {{ t("guidelines.help.description") }}
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <router-link 
              to="/contact"
              class="px-8 py-4 bg-white text-foreground font-bold rounded-xl hover:bg-white/90 transition-all flex items-center justify-center gap-2"
            >
              <MessageSquareIcon class="w-5 h-5" />
              {{ t("guidelines.help.contact") }}
            </router-link>
          </div>
        </div>
        <!-- Decorative elements -->
        <div class="absolute -top-12 -right-12 w-64 h-64 bg-primary/20 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-12 -left-12 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { 
  InfoIcon, 
  CheckCircleIcon, 
  MessageSquareIcon,
  GridIcon,
  LayersIcon,
  ScalingIcon,
  PaletteIcon,
  SplineIcon,
  RulerIcon,
  TriangleIcon,
  ZapIcon
} from "lucide-vue-next";

const { t } = useI18n();

const nuances = {
  layerStructure: {
    image: "/fdm_layer_lines_photo_1776031229473.png",
    icon: LayersIcon
  },
  supportMarks: {
    image: "/fdm_supports_photo_1776031246690.png",
    icon: ScalingIcon
  },
  zSeam: {
    image: "/fdm_zseam_photo_1776031258273.png",
    icon: SplineIcon
  },
  surfaceImperfections: {
    image: "/fdm_surface_photo_1776031404133.png",
    icon: GridIcon
  },
  overhangs: {
    image: "/fdm_overhangs_photo_v2_1776032258991.png",
    icon: TriangleIcon
  },
  dimensionalTolerances: {
    image: "/fdm_tolerances_photo_1776031451173.png",
    icon: RulerIcon
  },
  colorVariations: {
    image: "/fdm_color_photo_1776031463894.png",
    icon: PaletteIcon
  },
  stringing: {
    image: "/fdm_stringing_photo_1776031432344.png",
    icon: ZapIcon
  }
};

const materials = [
  { key: "pla", short: "PLA" },
  { key: "abs", short: "ABS" },
  { key: "petg", short: "PETG" },
  { key: "resin", short: "RESIN" }
];
</script>

<style scoped>
.font-display {
  font-family: 'Outfit', sans-serif;
}
</style>