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="work" 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="mt-16 grid gap-6 md:grid-cols-2">
|
|
<article
|
|
v-for="p in data.items"
|
|
:key="p.n"
|
|
class="group relative overflow-hidden border border-white/[0.07] bg-coal p-6 md:p-8"
|
|
>
|
|
<div
|
|
class="mb-16 aspect-[16/10] bg-gradient-to-br from-smoke to-ink bg-cover bg-center"
|
|
:style="p.imageUrl ? { backgroundImage: `url(${p.imageUrl})` } : {}"
|
|
/>
|
|
<div class="flex items-end justify-between gap-4">
|
|
<div>
|
|
<p class="text-xs text-ash">{{ p.n }} / {{ p.year }}</p>
|
|
<h3 class="mt-2 font-display text-2xl font-extrabold group-hover:text-volt transition-colors md:text-3xl">
|
|
{{ p.title }}
|
|
</h3>
|
|
<p class="mt-2 text-sm text-ash">{{ p.cat }}</p>
|
|
</div>
|
|
<span class="text-volt">↗</span>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
data: {
|
|
tag: string;
|
|
items: Array<{ n: string; title: string; cat: string; year: string; imageUrl?: string }>;
|
|
};
|
|
}>();
|
|
</script>
|