mykopkb-fe/src/modules/auth/pages/TermsConditions.vue

<script lang="ts" setup>
import logoUrl from '@/assets/images/logo.svg'
import { Box } from '@/components/ui/box'
import { RouterLink } from 'vue-router'

const appName = import.meta.env.VITE_APP_NAME
const appVersion = import.meta.env.VITE_APP_VERSION

const sections = [
  {
    id: 'pengenalan',
    title: '1. Pengenalan',
    placeholder: `
Terma dan Syarat ini mengawal penggunaan platform, laman web, dan perkhidmatan yang disediakan oleh Koperasi Permodalan Kelantan Berhad (KOPKB). Dengan mengakses atau menggunakan perkhidmatan kami, anda dianggap telah membaca, memahami, dan bersetuju untuk terikat dengan terma ini. Jika anda tidak bersetuju dengan mana-mana bahagian terma ini, sila hentikan penggunaan perkhidmatan kami.
    `,
  },
  {
    id: 'akaun',
    title: '2. Akaun & Kelayakan',
    placeholder: `
Anda mesti berumur sekurang-kurangnya 18 tahun dan merupakan ahli KOPKB. Anda bertanggungjawab memastikan maklumat akaun sentiasa tepat dan terkini. Anda juga bertanggungjawab menjaga kerahsiaan kata laluan serta segala aktiviti yang berlaku di bawah akaun anda.
    `,
  },
  {
    id: 'penggunaan',
    title: '3. Penggunaan Yang Dibenarkan',
    placeholder: `
Anda bersetuju menggunakan perkhidmatan hanya untuk tujuan yang sah dan mematuhi semua undang-undang yang berkuat kuasa. Anda tidak dibenarkan menyalahgunakan sistem, memuat naik kandungan yang menyalahi undang-undang, menyebarkan perisian berbahaya, atau mengganggu operasi platform. Sebarang pelanggaran boleh menyebabkan akaun anda digantung atau ditamatkan.
    `,
  },
  {
    id: 'pembayaran',
    title: '4. Pembayaran & Caj (jika berkenaan)',
    placeholder: `
Sesetengah perkhidmatan mungkin tertakluk kepada bayaran yang dinyatakan semasa proses langganan atau pembelian. Semua bayaran hendaklah dibuat melalui kaedah pembayaran yang diterima oleh platform. Bayaran yang telah dibuat tidak akan dikembalikan kecuali dinyatakan sebaliknya. Harga boleh berubah dari semasa ke semasa dengan notis yang munasabah.
    `,
  },
  {
    id: 'kandungan',
    title: '5. Kandungan & Hak Milik',
    placeholder: `
Semua kandungan, reka bentuk, logo, teks, grafik, dan bahan lain yang terdapat pada platform ini adalah hak milik Koperasi Permodalan Kelantan Berhad (KOPKB) atau pemberi lesennya. Anda diberikan lesen terhad untuk menggunakan kandungan tersebut bagi tujuan penggunaan peribadi dan bukan komersial sahaja. Sebarang penyalinan, pengubahsuaian, atau pengedaran tanpa kebenaran bertulis adalah dilarang.
    `,
  },
  {
    id: 'had-liabiliti',
    title: '6. Had Liabiliti',
    placeholder: `
Perkhidmatan disediakan atas dasar "seadanya" dan "sebagaimana tersedia". Kami tidak menjamin bahawa perkhidmatan akan sentiasa bebas daripada gangguan atau ralat. Setakat yang dibenarkan oleh undang-undang, kami tidak bertanggungjawab terhadap sebarang kerugian langsung, tidak langsung, sampingan, atau berbangkit akibat penggunaan atau ketidakupayaan menggunakan perkhidmatan.
    `,
  },
  {
    id: 'penamatan',
    title: '7. Penamatan',
    placeholder: `
Kami berhak menggantung atau menamatkan akses anda kepada perkhidmatan pada bila-bila masa sekiranya berlaku pelanggaran terma ini atau atas sebab keselamatan. Selepas penamatan, hak anda untuk menggunakan perkhidmatan akan tamat serta-merta dan akses kepada data tertentu mungkin tidak lagi tersedia.
    `,
  },
  {
    id: 'perubahan',
    title: '8. Perubahan Terma',
    placeholder: `
Kami boleh mengemas kini atau meminda Terma dan Syarat ini dari semasa ke semasa. Sebarang perubahan penting akan dimaklumkan melalui laman web, aplikasi, atau e-mel berdaftar anda. Penggunaan berterusan perkhidmatan selepas tarikh kuat kuasa perubahan dianggap sebagai penerimaan terhadap terma yang dikemas kini.
    `,
  },
  {
    id: 'hubungi',
    title: '9. Hubungi Kami',
    placeholder: `
Sekiranya anda mempunyai sebarang pertanyaan berkaitan Terma dan Syarat ini, sila hubungi:

Nama: Koperasi Permodalan Kelantan Berhad (KOPKB)
E-mel: admin@koppkb.com
    `,
  },
] as const;
</script>

<template>
  <div :class="[
    'relative min-h-screen bg-primary bg-noise xl:bg-background xl:bg-none',
    'before:hidden before:xl:block before:content-[\'\'] before:w-[57%] before:mt-[-28%] before:mb-[-16%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:rotate-6 before:bg-primary/95 before:bg-noise before:rounded-[35%]',
    'after:hidden after:xl:block after:content-[\'\'] after:w-[57%] before:mt-[-28%] after:mb-[-16%] after:ml-[-12%] after:absolute after:inset-y-0 after:left-0 after:transform after:rotate-6 after:border after:bg-accent after:bg-cover after:blur-xl after:rounded-[35%] after:border-primary',
  ]">
    <div :class="[
      'p-3 sm:px-8 relative h-full',
      'before:hidden before:xl:block before:w-[57%] before:mt-[-20%] before:mb-[-13%] before:ml-[-12%] before:absolute before:inset-y-0 before:left-0 before:transform before:-rotate-6 before:bg-primary/40 before:bg-noise before:border before:border-primary/50 before:opacity-60 before:rounded-[20%]',
    ]">
      <div class="container relative z-10 mx-auto sm:px-20 py-10">
        <div class="mb-8 flex items-center justify-between gap-4">
          <RouterLink class="flex items-center gap-3" to="/login">
            <img class="w-6" :src="logoUrl" :alt="`${appName} logo`" />
            <span class="text-base font-medium text-white">
              {{ appName }} {{ appVersion }}
            </span>
          </RouterLink>
        </div>

        <Box raised="double" class="px-6 py-8 sm:px-10">
          <div class="flex flex-col gap-2">
            <h1 class="text-2xl font-semibold tracking-tight sm:text-3xl">
              Terma dan Syarat
            </h1>
            <p class="text-sm opacity-80">
              Dikemas kini terakhir: <span class="font-medium">2 Jun 2026</span>
            </p>
          </div>

          <div class="mt-8 grid gap-8 lg:grid-cols-[260px_1fr]">
            <aside class="lg:sticky lg:top-6 lg:self-start">
              <div class="text-xs font-semibold uppercase tracking-wide opacity-70">
                Isi Kandungan
              </div>
              <ul class="mt-3 flex flex-col gap-2">
                <li v-for="s in sections" :key="s.id">
                  <a class="text-sm opacity-90 hover:opacity-100 hover:underline" :href="`#${s.id}`">
                    {{ s.title }}
                  </a>
                </li>
              </ul>
            </aside>

            <main class="flex flex-col gap-8">
              <section v-for="s in sections" :key="s.id" :id="s.id" class="scroll-mt-6">
                <h2 class="text-lg font-semibold sm:text-xl">
                  {{ s.title }}
                </h2>
                <p class="mt-2 whitespace-pre-line leading-relaxed opacity-80">
                  {{ s.placeholder }}
                </p>
              </section>
            </main>
          </div>
        </Box>
      </div>
    </div>
  </div>
</template>