Montech_Landing/apps/landing/components/home/HeroSection.vue

<template>
  <section ref="sectionEl" class="relative pt-8 pb-16 lg:pt-14 lg:pb-24 overflow-hidden hero-parallax-section">
    <div class="absolute top-1/4 right-0 w-[550px] h-[550px] bg-brand-100/50 dark:bg-brand-600/15 rounded-full blur-[140px] pointer-events-none -z-10" />
    <div class="absolute bottom-10 left-10 w-[500px] h-[500px] bg-sky-100/50 dark:bg-sky-600/10 rounded-full blur-[140px] pointer-events-none -z-10" />

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
        <div class="lg:col-span-5 space-y-6 text-right">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-100/80 dark:bg-slate-800/80 border border-slate-200/70 dark:border-slate-700/70 text-xs font-semibold text-slate-500 dark:text-slate-300">
            <span class="w-2 h-2 rounded-full bg-brand-500 animate-pulse" />
            <span>{{ hero.eyebrow }}</span>
          </div>

          <h1 class="text-4xl sm:text-5xl lg:text-[54px] font-black text-slate-900 dark:text-white leading-[1.28] tracking-tight">
            {{ hero.titleLine1 }}
            <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-600 via-brand-500 to-sky-400">
              {{ hero.titleHighlight }}
            </span>
          </h1>

          <p class="text-base sm:text-lg text-slate-600 dark:text-slate-300 font-normal leading-relaxed max-w-xl">
            {{ hero.subtitle }}
          </p>

          <div class="pt-2 max-w-xl">
            <form class="relative group" role="search" @submit.prevent="search">
              <div class="relative flex items-center bg-white dark:bg-slate-900/95 rounded-full p-2 pl-2 shadow-soft-card hover:shadow-hover-card border border-slate-200/90 dark:border-slate-700/80 focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-100/70 dark:focus-within:ring-brand-900/40 transition-all duration-300">
                <button
                  type="submit"
                  aria-label="جستجوی هوشمند"
                  class="flex-shrink-0 w-12 h-12 rounded-full bg-brand-600 text-white flex items-center justify-center hover:bg-brand-700 active:scale-95 transition-all shadow-md shadow-brand-600/30"
                >
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                  </svg>
                </button>

                <input
                  v-model="ai.query.value"
                  type="text"
                  aria-label="نیاز کسب‌وکار خود را بنویسید"
                  :placeholder="hero.searchPlaceholder"
                  class="w-full bg-transparent text-sm sm:text-base text-slate-800 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none pr-3 pl-3 font-normal text-right"
                >

                <div class="pr-3 pl-2 text-brand-500 flex items-center justify-center" aria-hidden="true">
                  <svg class="w-5 h-5 text-brand-500" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2L14.2 8.3L20.5 10.5L14.2 12.7L12 19L9.8 12.7L3.5 10.5L9.8 8.3L12 2Z" />
                  </svg>
                </div>
              </div>

              <div class="mt-3.5 flex flex-wrap items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                <span class="font-medium text-slate-400 dark:text-slate-500">{{ hero.suggestionsLabel }}</span>
                <button
                  v-for="item in hero.suggestions"
                  :key="item.label"
                  type="button"
                  class="px-3 py-1 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-brand-50 dark:hover:bg-brand-950 hover:text-brand-600 dark:hover:text-brand-300 border border-transparent hover:border-brand-200 dark:hover:border-brand-800 transition-all"
                  @click="suggest(item.query)"
                >
                  {{ item.label }}
                </button>
              </div>
            </form>
          </div>
        </div>

        <div
          class="lg:col-span-7 relative perspective-stage flex justify-center items-center py-6 min-h-[520px] sm:min-h-[580px]"
          @mousemove="parallax.onMouseMove"
          @mouseleave="parallax.onMouseLeave"
        >
          <div class="studio-botanical-leaf hidden sm:block" aria-hidden="true">
            <svg viewBox="0 0 280 280" fill="none" class="w-full h-full text-emerald-950/25 dark:text-emerald-500/15">
              <path d="M50,220 C35,120 100,40 220,25 C250,90 200,190 95,235 C75,240 60,235 50,220 Z" fill="currentColor" />
              <path d="M75,195 C110,160 145,120 195,75" stroke="#047857" stroke-width="5" stroke-linecap="round" />
              <path d="M105,170 C130,175 160,190 180,210" stroke="#047857" stroke-width="4" stroke-linecap="round" />
              <path d="M130,135 C160,135 185,150 205,165" stroke="#047857" stroke-width="4" stroke-linecap="round" />
              <path d="M155,100 C185,95 215,105 235,120" stroke="#047857" stroke-width="3" stroke-linecap="round" />
            </svg>
          </div>

          <div class="device-ground-shadow" />

          <HeroLaptopMockup :mockup="hero.mockup" :transform-style="parallax.laptop.value" />
          <HeroPhoneMockup :base-count="hero.mockup.goldBarCount" :transform-style="parallax.mobile.value" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const { section } = useSiteContent();
const hero = section("hero");
const ai = useAiModal();
const parallax = useHeroParallax();
const sectionEl = ref<HTMLElement | null>(null);

function search() {
  if (!ai.query.value.trim()) ai.query.value = hero.value.searchDefaultQuery;
  ai.open();
}

function suggest(query: string) {
  ai.query.value = query;
  search();
}

useHeroScrollParallax(sectionEl);
</script>