feat(seo): optimize images for lcp and enrich schema.org metadata

src/components/HeroSection.vue

@@ -49,13 +49,13 @@
         </div>
 
         <!-- Image (Desktop Only) -->
-        <div v-if="isDesktop" class="relative animate-float block">
+        <div class="hidden lg:block relative animate-float">
           <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" 
+              src="/src/assets/hero-premium.webp" 
               alt="High Precision 3D Printing" 
               class="w-full h-auto rounded-[2rem] aspect-[4/3] object-cover"
-              loading="lazy" 
+              fetchpriority="high"
             />
           </div>
           <div class="absolute -top-6 -right-6 w-32 h-32 border border-primary/20 rounded-[2rem] animate-pulse" />
@@ -67,25 +67,9 @@
 </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>

src/components/ServicesSection.vue

@@ -39,7 +39,7 @@
           <div class="w-8 h-8 bg-primary/5 rounded-lg flex items-center justify-center">
             <Sparkles class="w-4 h-4 text-primary" />
           </div>
-          <h3 class="font-display text-xl font-extrabold tracking-tight">{{ t("pricing.materials") }}</h3>
+          <h2 class="font-display text-2xl font-extrabold tracking-tight">{{ t("pricing.materials") }}</h2>
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
           <div

src/pages/Guidelines.vue

@@ -46,6 +46,7 @@
                 v-if="nuance.image" 
                 :src="nuance.image" 
                 :alt="t(`nuances.items.${key}.title`)"
+                loading="lazy"
                 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">
@@ -217,35 +218,35 @@ const { t } = useI18n();
 
 const nuances = {
   layerStructure: {
-    image: "/fdm_layer_lines_photo_1776031229473.png",
+    image: "/fdm_layer_lines_photo_1776031229473.webp",
     icon: LayersIcon
   },
   supportMarks: {
-    image: "/fdm_supports_photo_1776031246690.png",
+    image: "/fdm_supports_photo_1776031246690.webp",
     icon: ScalingIcon
   },
   zSeam: {
-    image: "/fdm_zseam_photo_1776031258273.png",
+    image: "/fdm_zseam_photo_1776031258273.webp",
     icon: SplineIcon
   },
   surfaceImperfections: {
-    image: "/fdm_surface_photo_1776031404133.png",
+    image: "/fdm_surface_photo_1776031404133.webp",
     icon: GridIcon
   },
   overhangs: {
-    image: "/fdm_overhangs_photo_v2_1776032258991.png",
+    image: "/fdm_overhangs_photo_v2_1776032258991.webp",
     icon: TriangleIcon
   },
   dimensionalTolerances: {
-    image: "/fdm_tolerances_photo_1776031451173.png",
+    image: "/fdm_tolerances_photo_1776031451173.webp",
     icon: RulerIcon
   },
   colorVariations: {
-    image: "/fdm_color_photo_1776031463894.png",
+    image: "/fdm_color_photo_1776031463894.webp",
     icon: PaletteIcon
   },
   stringing: {
-    image: "/fdm_stringing_photo_1776031432344.png",
+    image: "/fdm_stringing_photo_1776031432344.webp",
     icon: ZapIcon
   }
 };

src/pages/Index.vue

@@ -35,7 +35,7 @@ useHead({
   script: [
     {
       type: 'application/ld+json',
-      children: JSON.stringify({
+      children: computed(() => JSON.stringify({
         "@context": "https://schema.org",
         "@type": "LocalBusiness",
         "name": "Radionica 3D",
@@ -46,11 +46,11 @@ useHead({
           "addressCountry": "ME"
         },
         "url": "https://radionica3d.me",
-        "telephone": "+382...",
+        "telephone": "+382 (63) 488 471", 
         "description": t('seo.home.description'),
         "priceRange": "$$",
         "openingHours": "Mo-Fr 09:00-18:00"
-      })
+      }))
     }
   ]
 });

temp.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html><html lang="en"><head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/png" href="/favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <link rel="stylesheet" href="/fonts/fonts.css">
+    
+    <title>Radionica 3D | Professional 3D Printing in Montenegro</title>
+    <link rel="canonical" href="https://radionica3d.me/">
+    <meta name="description" content="Professional 3D printing and rapid prototyping services in Montenegro. Instant quotes, industrial materials, and high-precision results.">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://radionica3d.me/">
+    <meta property="og:title" content="Radionica 3D | Professional 3D Printing in Montenegro">
+    <meta property="og:description" content="Instant 3D printing quotes and high-quality prototyping in Herceg Novi, Montenegro.">
+    <meta property="og:image" content="https://radionica3d.me/og-image.jpg">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://radionica3d.me/">
+    <meta property="twitter:title" content="Radionica 3D | Professional 3D Printing in Montenegro">
+    <meta property="twitter:description" content="Instant 3D printing quotes and high-quality prototyping in Montenegro.">
+    <meta property="twitter:image" content="https://radionica3d.me/og-image.jpg">
+    <script type="module" crossorigin="" src="/assets/index-C943cYmg.js"></script>
+    <link rel="modulepreload" crossorigin="" href="/assets/ui-vendor-DdNkK3Gi.js">
+    <link rel="stylesheet" crossorigin="" href="/assets/index-g1QCt653.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  
+
+</body></html>