feat: complete UI/UX improvements, vuesax icons, media server, and section management

apps/web/app/components/layout/Header.vue

@@ -1,20 +1,30 @@
 <script setup lang="ts">
 import { AnimatePresence, motion } from "motion-v";
-import { Menu, Phone, X } from "lucide-vue-next";
+import VuesaxIcon from "~/components/ui/VuesaxIcon.vue";
 import Logo from "~/components/ui/Logo.vue";
 
-const LINKS = [
-  { href: "/#home", label: "خانه" },
-  { href: "/#products", label: "محصولات" },
-  { href: "/#about", label: "درباره ما" },
-  { href: "/#services", label: "خدمات" },
-  { href: "/#standards", label: "استانداردها" },
-  { href: "/#industries", label: "صنایع" },
-  { href: "/#contact", label: "تماس" },
-];
+const ALL_LINKS = [
+  { href: "/#home", label: "خانه", section: "hero" },
+  { href: "/#products", label: "محصولات", section: "productsIntro" },
+  { href: "/#about", label: "درباره ما", section: "about" },
+  { href: "/#services", label: "خدمات", section: "services" },
+  { href: "/#standards", label: "استانداردها", section: "standards" },
+  { href: "/#industries", label: "صنایع", section: "industries" },
+  { href: "/#contact", label: "تماس", section: "contact" },
+] as const;
 
 const ui = useUiStore();
-const settings = computed(() => useSiteStore().settings);
+const site = useSiteStore();
+const settings = computed(() => site.settings);
+const sections = computed(() => site.sections);
+
+const LINKS = computed(() =>
+  ALL_LINKS.filter(
+    (l) =>
+      (sections.value as Record<string, { enabled?: boolean }>)?.[l.section]?.enabled !== false,
+  ),
+);
+
 const scrolled = useScrolledPast(40);
 const { time, shift } = useTehranClock();
 
@@ -69,7 +79,7 @@ onBeforeUnmount(() => {
           href="/#contact"
           class="hidden items-center gap-2 rounded-full bg-accent px-5 py-2.5 text-sm font-bold text-bg transition-all duration-300 hover:bg-accent-soft hover:shadow-[0_0_30px_rgba(255,90,0,0.4)] md:flex"
         >
-          <Phone class="size-4" />
+          <VuesaxIcon name="call" class="size-4" />
           درخواست مشاوره
         </a>
 
@@ -78,7 +88,7 @@ onBeforeUnmount(() => {
           class="flex size-11 items-center justify-center rounded-lg border border-line text-ink transition-colors hover:border-accent hover:text-accent lg:hidden"
           @click="ui.openMenu"
         >
-          <Menu class="size-5" />
+          <VuesaxIcon name="menu" class="size-5" />
         </button>
       </div>
     </div>
@@ -100,7 +110,7 @@ onBeforeUnmount(() => {
           class="flex size-11 items-center justify-center rounded-lg border border-line transition-colors hover:border-accent hover:text-accent"
           @click="ui.closeMenu"
         >
-          <X class="size-5" />
+          <VuesaxIcon name="close-circle" class="size-5" />
         </button>
       </div>
 
@@ -126,7 +136,7 @@ onBeforeUnmount(() => {
 
       <div class="flex items-center justify-between border-t border-line p-8 text-sm">
         <div class="flex items-center gap-3 text-muted">
-          <Phone class="size-4 text-accent" />
+          <VuesaxIcon name="call" class="size-4 text-accent" />
           <a :href="`tel:${settings.phone}`" class="font-mono" dir="ltr">{{ settings.phoneDisplay }}</a>
         </div>
         <div class="text-xs text-muted">تهران — شیفت {{ shift }}، {{ time }}</div>