<script setup>
import { Head } from "@inertiajs/inertia-vue3";
import JetAuthenticationCardLogo from "@/Jetstream/AuthenticationCardLogo.vue";
import Layout from "@/Layouts/LandingLayout.vue";

defineProps({
    terms: Array,
});
</script>

<template>
    <Layout title="Terms of Service">
        <div class="py-40 font-sans antialiased text-gray-900">
            <div class="pt-4 bg-gray-100">
                <div
                    class="flex flex-col items-center min-h-screen pt-6 sm:pt-0"
                >
                    <div>
                        <JetAuthenticationCardLogo />
                    </div>

                    <div
                        class="container w-full p-6 mt-6 overflow-hidden prose"
                    >
                        <h1>Terms Of Service</h1>
                        <div v-for="item in terms" :key="item.id">
                            <h2>{{ item.title }}</h2>
                            <p>{{ item.text }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Layout>
</template>
