51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<template>
|
||
<section id="about" class="bg-[#fff] py-20 md:py-28">
|
||
<div class="max-w-7xl mx-auto px-4 grid items-start gap-12 lg:grid-cols-2">
|
||
<div>
|
||
<img
|
||
src="/images/mucahit-uslu.webp"
|
||
alt="Mücahit Uslu - Müco Mutfak ve Kahve"
|
||
class="w-full md:w-2/5 lg:w-full h-full max-h-[768px] rounded-bl-4xl rounded-tr-4xl object-cover mx-auto"
|
||
/>
|
||
</div>
|
||
|
||
<div class="md:pl-8">
|
||
<p class="mb-4 text-sm font-medium text-highlight">
|
||
{{ t("Who we are") }}
|
||
</p>
|
||
|
||
<h2
|
||
class="text-2xl sm:text-5xl font-bold tracking-tight text-dark md:mb-6"
|
||
>
|
||
{{ t("About") }}
|
||
</h2>
|
||
|
||
<div
|
||
class="markdown mb-6 max-w-xl text-dark/80 [&_p]:mb-4 [&_p:last-child]:mb-0 [&_strong]:font-bold [&_em]:italic"
|
||
v-html="overviewHtml"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { computed } from "vue";
|
||
import { useI18n } from "vue-i18n";
|
||
import MarkdownIt from "markdown-it";
|
||
|
||
const { t } = useI18n();
|
||
|
||
const md = new MarkdownIt({
|
||
html: false, // raw HTML kapalı → XSS protection
|
||
breaks: false,
|
||
linkify: true,
|
||
});
|
||
|
||
const overviewHtml = computed(() => {
|
||
const value = t("Overview Text");
|
||
if (!value) return "";
|
||
return md.render(value);
|
||
});
|
||
</script>
|