<template>
  <div class="text-lg pb-6 font-semibold text-gray-900 border-b border-gray-200">Instruction</div>
  <div class="flex flex-col gap-3 py-6 text-gray-600">
    <div class="font-semibold text-gray-900">Modules</div>
    <p>Modules are fixed and for internal reference only, and admin users cannot make the following changes:</p>
    <ul class="list-inside list-disc pl-3">
      <li>Edit the title of any module (e.g., "Hero header").</li>
      <li>Change the order of the modules.</li>
      <li>Add new module.</li>
    </ul>
    <p>For any changes at the module level, please contact the development team.</p>
  </div>
  <div class="flex flex-col gap-3 py-6 text-gray-600">
    <div class="font-semibold text-gray-900">Edit sub-modules or edit nested items</div>
    <p>Click any sub-module to edit its settings and any nested items within it.</p>
  </div>
</template>
