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

<template>
  <section id="features" class="py-24 bg-slate-50/70 dark:bg-[#070d19]/90 relative overflow-hidden customization-section">
    <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 items-center">
        <div class="lg:col-span-7 relative flex justify-center items-center py-6 min-h-[380px]" aria-hidden="true">
          <div class="w-4/5 sm:w-2/3 bg-white/90 dark:bg-slate-900/80 rounded-2xl border border-slate-200/90 dark:border-slate-800 p-5 shadow-xl -rotate-6 transform transition-transform duration-700 hover:-rotate-3">
            <div class="flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 pb-2.5 mb-3">
              <span class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700" />
              <span class="w-2.5 h-2.5 rounded-full bg-slate-300 dark:bg-slate-700" />
              <div class="text-[11px] text-slate-400 dark:text-slate-500 font-bold">{{ features.baseCardLabel }}</div>
            </div>
            <div class="space-y-3 opacity-60">
              <div class="h-3.5 w-1/3 bg-slate-200 dark:bg-slate-700 rounded" />
              <div class="h-16 w-full bg-slate-100 dark:bg-slate-800 rounded-lg" />
              <div class="grid grid-cols-3 gap-2">
                <div class="h-9 bg-slate-100 dark:bg-slate-800 rounded" />
                <div class="h-9 bg-slate-100 dark:bg-slate-800 rounded" />
                <div class="h-9 bg-slate-100 dark:bg-slate-800 rounded" />
              </div>
            </div>
          </div>

          <div class="absolute top-0 right-1/4 z-30 transform -translate-y-6">
            <svg class="w-28 h-20 text-brand-500" viewBox="0 0 100 60" fill="none">
              <path d="M10,50 Q50,-10 90,30" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="6 6" />
              <polygon points="90,30 82,18 96,22" fill="currentColor" />
            </svg>
          </div>

          <div class="absolute -bottom-4 -right-2 sm:right-6 w-5/6 sm:w-3/4 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md rounded-2xl border border-brand-200 dark:border-brand-500/40 p-6 shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-700">
            <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 pb-3 mb-4">
              <div class="flex items-center gap-2.5">
                <div class="w-7 h-7 rounded-lg bg-brand-600 text-white flex items-center justify-center font-bold text-xs shadow-sm">M</div>
                <div class="text-xs font-bold text-slate-800 dark:text-slate-100">{{ features.customCardTitle }}</div>
              </div>
              <span class="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/60 px-2.5 py-1 rounded-full border border-emerald-100 dark:border-emerald-800/40">{{ features.customCardBadge }}</span>
            </div>

            <div class="grid grid-cols-3 gap-3 text-right">
              <div class="col-span-2 space-y-2">
                <div class="text-xs text-slate-400 dark:text-slate-400 font-medium">{{ features.salesLabel }}</div>
                <div class="text-xl font-black text-slate-900 dark:text-white">{{ features.salesValue }} <span class="text-xs font-normal text-slate-500 dark:text-slate-400">تومان</span></div>
                <div class="h-11 bg-gradient-to-l from-brand-50 to-transparent dark:from-brand-950/50 dark:to-transparent border border-brand-100 dark:border-brand-900/60 rounded-xl flex items-center px-3">
                  <span class="text-[10px] text-brand-700 dark:text-brand-300 font-bold">{{ features.linkNote }}</span>
                </div>
              </div>
              <div class="space-y-1 bg-slate-50 dark:bg-slate-800/70 p-2.5 rounded-xl text-center flex flex-col justify-center border border-slate-100 dark:border-slate-800">
                <div class="text-[10px] text-slate-500 dark:text-slate-400">{{ features.aiLabel }}</div>
                <div class="text-brand-600 dark:text-brand-400 font-extrabold text-sm">{{ features.aiStatus }}</div>
                <div class="text-[9px] text-slate-400 dark:text-slate-500">{{ features.aiNote }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="lg:col-span-5 text-right space-y-5 fade-item">
          <span class="text-xs font-bold text-slate-400 dark:text-slate-500">{{ features.eyebrow }}</span>

          <h2 class="text-3xl sm:text-4xl font-black text-slate-900 dark:text-white leading-snug">
            {{ features.titleLine1 }}
            <br>
            <span>{{ features.titleLine2 }}</span>
          </h2>

          <p class="text-base text-slate-600 dark:text-slate-300 leading-relaxed font-normal">
            {{ features.body }}
          </p>

          <div class="pt-2">
            <a
              :href="resolveHref(features.ctaHref)"
              class="inline-flex items-center gap-2.5 px-6 py-3 rounded-full border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 font-bold text-sm hover:border-brand-600 dark:hover:border-brand-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50/50 dark:hover:bg-slate-800/50 transition-all duration-300"
            >
              <svg class="w-4 h-4 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              <span>{{ features.ctaLabel }}</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const { section } = useSiteContent();
const features = section("features");
const resolveHref = useSectionHref();
</script>