MahdiandCursor
7e8e1b1f1b
Scaffold SSR site with CMS/blog/gallery/SEO admin and deploy configs for montech.ir. Co-authored-by: Cursor <cursoragent@cursor.com>
39 lines
1.5 KiB
Vue
39 lines
1.5 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="05" :title="data.tag" right="Leadership" />
|
|
<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.6rem,8vw,7.5rem)] font-extrabold uppercase leading-[0.92] tracking-[-0.02em]">
|
|
{{ data.headline.split(" ").slice(0, -1).join(" ") }}
|
|
<span class="font-serif normal-case italic tracking-normal text-volt">
|
|
{{ data.headline.split(" ").slice(-1)[0] }}
|
|
</span>
|
|
</h2>
|
|
<p class="max-w-xs text-sm leading-relaxed text-ash md:text-right">{{ 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" />
|
|
<figcaption class="mt-4">
|
|
<p class="font-display text-xl font-bold uppercase tracking-[-0.02em] group-hover:text-volt transition-colors">
|
|
{{ m.name }}
|
|
</p>
|
|
<p class="mt-1 font-mono text-[10px] tracking-[0.22em] 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 }>;
|
|
};
|
|
}>();
|
|
</script>
|