38 lines
1.2 KiB
Vue
38 lines
1.2 KiB
Vue
<template>
|
|
<section id="manifesto" 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-14 flex flex-col gap-10 md:max-w-2xl animate-fade-up">
|
|
<p class="text-lg leading-relaxed text-ash md:text-xl md:leading-relaxed">
|
|
{{ intro?.body || data.body }}
|
|
</p>
|
|
<a
|
|
v-if="intro?.cta"
|
|
href="#work"
|
|
class="group inline-flex w-fit items-center gap-4 font-mono text-xs tracking-[0.16em] text-bone transition-colors hover:text-volt md:text-[13px] md:tracking-[0.22em]"
|
|
>
|
|
{{ intro.cta }}
|
|
<span class="flex h-10 w-10 items-center justify-center rounded-full border border-white/20 transition-all group-hover:border-volt group-hover:bg-volt group-hover:text-ink">
|
|
↓
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
data: {
|
|
tag: string;
|
|
words?: Array<{ text: string; outline?: boolean; volt?: boolean }>;
|
|
body: string;
|
|
};
|
|
intro?: {
|
|
body?: string;
|
|
cta?: string;
|
|
} | null;
|
|
}>();
|
|
</script>
|