imen_pishghaman/apps/web/app/components/sections/Hero.vue

<script setup lang="ts">
import { ArrowLeft, ChevronDown, HardHat } from "lucide-vue-next";
import DynamicIcon from "~/components/ui/DynamicIcon.vue";

const hero = computed(() => useSiteStore().sections.hero);
</script>

<template>
  <section id="home" class="relative flex min-h-screen flex-col overflow-hidden">
    <!-- ---- background ---- -->
    <div class="absolute inset-0">
      <img
        :src="hero.image.url"
        :alt="hero.image.alt"
        width="1792"
        height="1008"
        fetchpriority="high"
        decoding="async"
        class="absolute inset-0 size-full object-cover"
      />
      <div class="absolute inset-0 bg-gradient-to-l from-bg via-bg/80 to-bg/25" />
      <div class="absolute inset-0 bg-gradient-to-t from-bg via-transparent to-bg/60" />
      <div class="absolute inset-0 bg-grid opacity-50" />
    </div>

    <!-- ---- side tape ---- -->
    <div class="tape-v absolute bottom-0 end-0 z-10 h-44 w-1.5 opacity-70" />

    <!-- ---- content ---- -->
    <div
      class="relative z-10 mx-auto flex w-full max-w-[1480px] flex-1 items-center px-5 pb-24 pt-36 md:px-8"
    >
      <div class="grid w-full items-center gap-12 lg:grid-cols-12">
        <div class="lg:col-span-7">
          <div
            class="animate-fade-up-1 inline-flex items-center gap-2.5 rounded-full border border-accent/30 bg-accent/10 px-4 py-2 backdrop-blur"
          >
            <span class="size-1.5 animate-pulse rounded-full bg-accent" />
            <span class="text-xs font-medium text-accent">
              {{ hero.badge }}
            </span>
          </div>

          <h1
            class="animate-fade-up-2 mt-7 text-5xl font-black leading-[1.15] md:text-7xl md:leading-[1.1]"
          >
            {{ hero.title }}
            <br />
            <span
              class="mt-3 inline-block -rotate-1 rounded-lg bg-hazard px-4 py-1.5 text-bg shadow-[0_10px_50px_rgba(255,184,0,0.25)]"
            >
              {{ hero.titleHighlight }}
            </span>
          </h1>

          <p
            class="animate-fade-up-3 mt-7 max-w-xl text-base leading-9 text-ink/70 md:text-lg md:leading-10"
          >
            {{ hero.intro }}
          </p>

          <div class="animate-fade-up-4 mt-9 flex flex-wrap items-center gap-4">
            <a
              :href="hero.primaryCta.href"
              class="group inline-flex items-center gap-2.5 rounded-full bg-accent px-7 py-4 font-bold text-bg transition-all duration-300 hover:bg-accent-soft hover:shadow-[0_8px_45px_rgba(255,90,0,0.5)]"
            >
              {{ hero.primaryCta.label }}
              <ArrowLeft
                class="size-5 transition-transform duration-300 group-hover:-translate-x-1.5"
              />
            </a>
            <a
              :href="hero.secondaryCta.href"
              class="inline-flex items-center gap-2.5 rounded-full border border-ink/25 px-7 py-4 font-bold text-ink backdrop-blur transition-colors duration-300 hover:border-accent hover:text-accent"
            >
              {{ hero.secondaryCta.label }}
            </a>
          </div>

          <div class="animate-fade-up-5 mt-10 flex flex-wrap gap-3">
            <span
              v-for="c in hero.chips"
              :key="c.label"
              class="inline-flex items-center gap-2 rounded-full border border-ink/15 bg-bg/50 px-4 py-2 font-mono text-[11px] tracking-wider text-ink/70 backdrop-blur transition-colors hover:border-accent/50 hover:text-ink"
            >
              <DynamicIcon :name="c.icon" class="size-4 text-accent" />
              {{ c.label }}
            </span>
          </div>
        </div>

        <!-- ---- rotating badge + status card ---- -->
        <div class="hidden flex-col items-center gap-10 lg:col-span-5 lg:flex">
          <div class="animate-fade-up-6 relative">
            <div class="relative size-44">
              <div class="animate-spin-slow absolute inset-0">
                <svg viewBox="0 0 120 120" class="size-full">
                  <defs>
                    <path
                      id="badge-circle"
                      d="M60,60 m-47,0 a47,47 0 1,1 94,0 a47,47 0 1,1 -94,0"
                    />
                  </defs>
                  <text font-size="9" letter-spacing="2.6" class="fill-ink/60 font-mono">
                    <textPath href="#badge-circle">
                      IMEN PISHGAMAN SAFETY • ISO 9001 • CE CERTIFIED • EST 2007 •
                    </textPath>
                  </text>
                </svg>
              </div>
              <div class="absolute inset-0 flex items-center justify-center">
                <span
                  class="flex size-20 items-center justify-center rounded-full border border-accent/30 bg-accent/10"
                >
                  <HardHat class="size-9 text-accent" />
                </span>
              </div>
            </div>
          </div>

          <div
            class="animate-fade-up-7 w-full max-w-sm border border-line bg-bg/70 p-5 backdrop-blur-md"
          >
            <div class="flex items-center justify-between font-mono text-[11px]">
              <span class="text-muted">SITE STATUS</span>
              <span class="flex items-center gap-2 text-emerald-400">
                <span class="size-1.5 animate-pulse rounded-full bg-emerald-400" />
                SECURE
              </span>
            </div>
            <div class="mt-3.5 flex items-center justify-between font-mono text-[11px]">
              <span class="text-muted">PPE COMPLIANCE</span>
              <span class="font-semibold text-accent">۱۰۰٪</span>
            </div>
            <div
              v-if="hero.lastInspection"
              class="mt-3.5 flex items-center justify-between font-mono text-[11px]"
            >
              <span class="text-muted">آخرین بازرسی</span>
              <span>{{ hero.lastInspection }}</span>
            </div>
            <div class="my-4 h-px bg-line" />
            <div class="font-mono text-[11px] leading-6 text-muted">
              سیستم پایش حرفه‌ای ایمن پیشگامان<span class="animate-blink text-accent">▍</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ---- scroll hint ---- -->
    <div class="animate-fade-up-9 absolute bottom-28 left-1/2 z-10 hidden md:block">
      <div class="-translate-x-1/2 flex flex-col items-center gap-2">
        <span class="font-mono text-[10px] tracking-[0.35em] text-muted">SCROLL</span>
        <ChevronDown class="size-4 animate-bounce text-accent" />
      </div>
    </div>

    <!-- ---- bottom bar ---- -->
    <div class="animate-fade-up-8 relative z-10 border-t border-ink/10 backdrop-blur-sm">
      <div class="mx-auto grid max-w-[1480px] grid-cols-1 gap-px bg-ink/10 sm:grid-cols-3">
        <div
          v-for="s in hero.miniStats"
          :key="s.label"
          class="flex items-baseline gap-4 bg-bg/60 px-6 py-5 backdrop-blur-md md:px-8"
        >
          <span class="text-2xl font-black text-ink md:text-3xl">{{ s.value }}</span>
          <span class="text-xs leading-5 text-muted md:text-sm">{{ s.label }}</span>
        </div>
      </div>
    </div>
  </section>
</template>