refactor: enhance core Laravel development rules with comprehensive best practices and improve onboarding modal structure for better user experience

This commit is contained in:
2025-12-03 23:31:24 -05:00
parent 07b8299ebd
commit a73dc96b1c
2 changed files with 251 additions and 58 deletions

View File

@@ -42,51 +42,47 @@
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90">
<template x-if="activeSlide">
<div style="display: flex; flex-direction: column;">
<template x-if="activeSlide.image_url">
<div class="w-full" style="height: 14rem; overflow: hidden;">
<img :src="activeSlide.image_url"
:alt="activeSlide.title"
style="width: 100%; height: 100%; object-fit: cover;">
</div>
</template>
<div class="p-6 space-y-3">
<h3 class="text-primary-100 text-xl font-semibold"
x-text="activeSlide.title"></h3>
<p class="text-base/80 text-sm leading-6"
x-text="activeSlide.description"></p>
</div>
<div class="flex justify-center gap-2 px-6 pb-4">
<template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
<div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
</template>
</div>
<div class="flex items-center justify-between px-6 pb-6">
<button @click="previous()"
:disabled="currentSlide === 0"
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
{{ __('Back') }}
</button>
<button @click="next()"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
<span x-text="primaryActionLabel(currentSlide)"></span>
<svg x-show="currentSlide !== slides.length - 1"
class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
</div>
<div x-show="activeSlide" class="flex flex-col">
<div x-show="activeSlide?.image_url" class="w-full h-56 overflow-hidden">
<img :src="activeSlide?.image_url"
:alt="activeSlide?.title"
class="w-full h-full object-cover">
</div>
</template>
<div class="p-6 space-y-3">
<h3 class="text-primary-100 text-xl font-semibold"
x-text="activeSlide?.title"></h3>
<p class="text-base/80 text-sm leading-6"
x-text="activeSlide?.description"></p>
</div>
<div class="flex justify-center gap-2 px-6 pb-4">
<template x-for="(slide, index) in slides" :key="'dot-' + slide.id">
<div class="h-1.5 rounded-full transition-all duration-300"
:class="currentSlide === index ? 'w-6 bg-primary' : 'w-1.5 bg-neutral'"></div>
</template>
</div>
<div class="flex items-center justify-between px-6 pb-6">
<button @click="previous()"
:disabled="currentSlide === 0"
class="text-sm font-medium text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1.5">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
</svg>
{{ __('Back') }}
</button>
<button @click="next()"
class="inline-flex items-center gap-1.5 px-5 py-2 text-sm font-medium text-white bg-primary hover:bg-primary/90 rounded-md">
<span x-text="primaryActionLabel(currentSlide)"></span>
<svg x-show="currentSlide !== slides.length - 1"
class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>