primevue-mirror/apps/showcase/components/template/TemplateFeatures.vue

<template>
    <div>
        <div v-if="displayType === 'vertical'" class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
            <div class="mx-auto max-w-3xl flex sm:flex-row flex-col items-start gap-6">
                <div
                    v-for="(_, i) of Array(2).fill(null)"
                    :key="i"
                    class="flex flex-col gap-6 flex-1"
                    :class="{
                        'sm:pt-32': i === 1
                    }"
                >
                    <template v-for="(data, j) of i === 0 ? featuresData.slice(0, Math.ceil(featuresData.length / 2)) : featuresData.slice(featuresData.length / 2)" :key="j">
                        <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="w-full p-4 md:p-5 rounded-2xl border border-surface animate-duration-500">
                            <div class="w-full bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden flex">
                                <img class="w-full h-auto rounded-lg" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
                            </div>
                            <h2 class="mt-5 mb-0 text-lg text-surface-900 dark:text-surface-0 font-semibold">{{ data.title }}</h2>
                            <p class="mt-2 mb-0 text-muted-color text-sm">{{ data.description }}</p>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div v-else class="px-6 py-6 sm:px-10 sm:py-10 lg:py-20 rounded-3xl bg-surface-0 dark:bg-surface-900">
            <div class="flex flex-wrap justify-center gap-6 mx-auto w-full max-w-5xl">
                <template v-for="(data, index) in featuresData" :key="index">
                    <div v-animateonscroll.once="{ enterClass: 'animate-fadein' }" class="p-5 rounded-2xl border border-surface flex-1 min-w-80 max-w-96 animate-duration-500">
                        <div class="flex w-full mb-5 bg-surface-100 dark:bg-surface-800 overflow-hidden rounded-lg">
                            <img class="w-full" :src="$appState.darkTheme ? data.darkSrc || data.src : data.src" :alt="data.title" />
                        </div>
                        <div>
                            <h5 class="text-surface-900 dark:text-surface-0 font-semibold mb-2 text-lg">{{ data.title }}</h5>
                            <p class="m-0 text-muted-color text-sm">{{ data.description }}</p>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        featuresData: {
            type: null,
            default: null
        },
        displayType: {
            type: null,
            default: null
        }
    }
};
</script>