MahdiandCursor
c33a757af4
Show logo in the navbar, add image upload fields for logo/team/work/blog/gallery, and drive site chrome from settings everywhere. Co-authored-by: Cursor <cursoragent@cursor.com>
39 lines
1.3 KiB
Vue
39 lines
1.3 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.2rem,6vw,5rem)] font-extrabold leading-[1.15] tracking-[-0.02em]">
|
|
{{ data.headline }}
|
|
</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] bg-gradient-to-br from-smoke to-ink bg-cover bg-center"
|
|
:style="m.imageUrl ? { backgroundImage: `url(${m.imageUrl})` } : {}"
|
|
/>
|
|
<figcaption class="mt-4">
|
|
<p class="font-display text-xl font-bold group-hover:text-volt transition-colors">
|
|
{{ m.name }}
|
|
</p>
|
|
<p class="mt-1 text-xs text-ash">{{ m.role }}</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
data: {
|
|
tag: string;
|
|
headline: string;
|
|
body: string;
|
|
members: Array<{ name: string; role: string; imageUrl?: string }>;
|
|
};
|
|
}>();
|
|
</script>
|