54 lines
2.0 KiB
Vue
54 lines
2.0 KiB
Vue
<template>
|
|
<section id="team" class="px-6 py-28 md:px-10 md:py-40">
|
|
<div class="mx-auto max-w-[1500px]">
|
|
<SectionTag index="۰۵" :title="data.tag" right="رهبری" />
|
|
<div class="mb-16 mt-14 flex flex-col justify-between gap-8 md:flex-row md:items-end">
|
|
<h2 class="font-display text-[clamp(2.4rem,7vw,6.5rem)] font-extrabold leading-[1.05] tracking-[-0.02em]">
|
|
<template v-if="headlineParts.rest">
|
|
{{ headlineParts.rest }}
|
|
<span class="font-accent text-volt">{{ headlineParts.last }}</span>
|
|
</template>
|
|
<template v-else>
|
|
{{ data.headline }}
|
|
</template>
|
|
</h2>
|
|
<p class="max-w-xs text-sm leading-relaxed text-ash">{{ data.body }}</p>
|
|
</div>
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
|
<figure v-for="m in data.members" :key="m.name" class="group">
|
|
<div
|
|
class="aspect-[3/4] overflow-hidden bg-gradient-to-br from-smoke to-ink bg-cover bg-center transition-transform duration-700 group-hover:scale-[1.02]"
|
|
:style="m.imageUrl ? { backgroundImage: `url(${m.imageUrl})` } : {}"
|
|
/>
|
|
<figcaption class="mt-4">
|
|
<p class="font-display text-xl font-bold tracking-[-0.02em] transition-colors group-hover:text-volt">
|
|
{{ m.name }}
|
|
</p>
|
|
<p class="mt-1 font-mono text-[10px] tracking-[0.16em] text-ash">{{ m.role }}</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
data: {
|
|
tag: string;
|
|
headline: string;
|
|
body: string;
|
|
members: Array<{ name: string; role: string; imageUrl?: string }>;
|
|
};
|
|
}>();
|
|
|
|
const headlineParts = computed(() => {
|
|
const parts = (props.data.headline || "").trim().split(/\s+/);
|
|
if (parts.length < 2) return { rest: "", last: props.data.headline };
|
|
return {
|
|
rest: parts.slice(0, -1).join(" "),
|
|
last: parts.at(-1) || "",
|
|
};
|
|
});
|
|
</script>
|