refactor: enhance core Laravel development rules with comprehensive best practices and improve onboarding modal structure for better user experience
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user