Adds the whole disclaimer feature

resources/js/Pages/Landing.vue

@@ -1,17 +1,28 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { Head, router, usePage } from '@inertiajs/vue3'
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/20/solid'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import AppButton from '@/Components/AppButton.vue'
 
 defineOptions({ layout: AppLayout })
 
+const props = defineProps({
+  hasDisclaimer: Boolean,
+})
+
 const page = usePage()
 
+const disclaimerAgreed = ref(false)
+
 const isAuthenticated = computed(() => {
   return page.props.auth?.user != null
 })
 
+const canContinue = computed(() => {
+  return !props.hasDisclaimer || disclaimerAgreed.value
+})
+
 const userInfo = computed(() => {
   const user = page.props.auth?.user
   if (!user) return null
@@ -51,7 +62,69 @@ const handleContinue = () => {
                 You will first complete a short pre-screening questionnaire, followed by a detailed category-specific checklist
                 to determine whether to pursue (Go), decline (No Go), or escalate (Consult Leadership) an opportunity.
             </p>
-            <AppButton v-if="isAuthenticated" size="lg" @click="handleContinue" data-cy="start-screening">
+
+            <!-- Disclaimer checkbox — only shown when authenticated and a disclaimer exists -->
+            <div v-if="isAuthenticated && hasDisclaimer" class="flex items-start justify-center gap-3 mb-6">
+                <label class="flex items-start gap-3 cursor-pointer select-none group">
+                    <!-- Hidden native checkbox -->
+                    <input
+                        v-model="disclaimerAgreed"
+                        type="checkbox"
+                        class="sr-only peer"
+                    />
+                    <!-- Custom checkbox -->
+                    <span
+                        class="
+                            mt-0.5 flex-shrink-0
+                            w-5 h-5 rounded
+                            border-2 border-gray-500
+                            bg-transparent
+                            flex items-center justify-center
+                            transition-all duration-200
+                            peer-checked:bg-primary peer-checked:border-primary
+                            group-hover:border-gray-300
+                        "
+                        aria-hidden="true"
+                    >
+                        <!-- Checkmark — visible when checked via peer -->
+                        <svg
+                            class="w-3 h-3 text-gray-900 opacity-0 transition-opacity duration-200 peer-checked:opacity-100"
+                            :class="{ 'opacity-100': disclaimerAgreed }"
+                            viewBox="0 0 12 12"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M2 6l3 3 5-5"
+                                stroke="currentColor"
+                                stroke-width="1.8"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    <!-- Label text -->
+                    <span class="text-sm text-gray-400 text-left leading-relaxed">
+                        I have read and agree to the
+                        <a
+                            href="/disclaimer"
+                            target="_blank"
+                            class="text-primary underline underline-offset-2 inline-flex items-center gap-0.5 hover:text-primary-dark transition-colors duration-150"
+                        >
+                            disclaimer
+                            <ArrowTopRightOnSquareIcon class="w-3.5 h-3.5 flex-shrink-0" />
+                        </a>
+                    </span>
+                </label>
+            </div>
+
+            <AppButton
+                v-if="isAuthenticated"
+                size="lg"
+                :disabled="!canContinue"
+                @click="handleContinue"
+                data-cy="start-screening"
+            >
                 Continue
             </AppButton>
             <AppButton v-else size="lg" href="/login" external>