radionica3d/src/pages/Index.vue

<template>
  <div class="min-h-screen bg-background">
    <Header />
    <main>
      <HeroSection />
      <ServicesSection />
      <PrintingNuancesSection />
      <ModelUploadSection />
      <QuotingSection />
      <ProcessSection />
      <ReviewsSection />
      <CTASection />
    </main>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/Header.vue";
import HeroSection from "@/components/HeroSection.vue";
import ServicesSection from "@/components/ServicesSection.vue";
import { defineAsyncComponent, computed } from "vue";
import { useHead } from "@unhead/vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

useHead({
  title: computed(() => t('seo.home.title')),
  meta: [
    { name: 'description', content: computed(() => t('seo.home.description')) },
    { property: 'og:title', content: computed(() => t('seo.home.title')) },
    { property: 'og:description', content: computed(() => t('seo.home.description')) },
  ],
  script: [
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "LocalBusiness",
        "name": "Radionica 3D",
        "image": "https://radionica3d.me/logo.png",
        "address": {
          "@type": "PostalAddress",
          "addressLocality": "Herceg Novi",
          "addressCountry": "ME"
        },
        "url": "https://radionica3d.me",
        "telephone": "+382...",
        "description": t('seo.home.description'),
        "priceRange": "$$",
        "openingHours": "Mo-Fr 09:00-18:00"
      })
    }
  ]
});

const PrintingNuancesSection = defineAsyncComponent(() => import("@/components/PrintingNuancesSection.vue"));
const ModelUploadSection = defineAsyncComponent(() => import("@/components/ModelUploadSection.vue"));
const QuotingSection = defineAsyncComponent(() => import("@/components/QuotingSection.vue"));
const ProcessSection = defineAsyncComponent(() => import("@/components/ProcessSection.vue"));
const ReviewsSection = defineAsyncComponent(() => import("@/components/ReviewsSection.vue"));
const CTASection = defineAsyncComponent(() => import("@/components/CTASection.vue"));
const Footer = defineAsyncComponent(() => import("@/components/Footer.vue"));
</script>