coming-soon-overlay.blade.php

@props([
    'title' => 'Coming Soon',
    'description' => "We're working hard to bring you this feature. Stay tuned for updates!",
    'estimatedDate' => null,
    'showNotifyButton' => true,
    'className' => '',
    'progress' => 75
])

<div
    class="bg-background/80 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm {{ $className }}"
    x-data="comingSoonOverlay()"
>
    <div class="mx-4 w-full max-w-md border-2 rounded-lg border-border bg-card text-card-foreground shadow-2xl">
        <div class="space-y-6 p-8 text-center">
            <div class="relative">
                <div class="bg-primary/10 mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock-icon lucide-clock text-primary h-10 w-10 animate-pulse"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    {{-- <x-lucide-clock class="text-primary h-10 w-10" x-bind:class="{ 'animate-pulse': animateIcons }" /> --}}
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles-icon lucide-sparkles absolute -top-2 -right-2 h-6 w-6 text-yellow-500 animate-bounce"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
                {{-- <x-lucide-sparkles class="absolute -top-2 -right-2 h-6 w-6 text-yellow-500" x-bind:class="{ 'animate-bounce': animateIcons }" /> --}}
            </div>

            <div class="space-y-2">
                <h2 class="text-foreground text-3xl font-bold">{{ $title }}</h2>
                <div class="text-muted-foreground flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-icon lucide-lock h-4 w-4"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                    {{-- <x-lucide-lock class="h-4 w-4" /> --}}
                    <span class="text-sm font-medium">Feature Locked</span>
                </div>
            </div>

            <p class="text-muted-foreground leading-relaxed">{{ $description }}</p>

            @if($estimatedDate)
                <div class="bg-muted/50 rounded-lg p-3">
                    <p class="text-muted-foreground text-sm">Expected Release</p>
                    <p class="text-foreground font-semibold">{{ $estimatedDate }}</p>
                </div>
            @endif

            @if($showNotifyButton)
                <button
                    type="button"
                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-11 px-8 w-full"
                    @click="handleNotifyClick()"
                >
                    Notify Me When Ready
                </button>
            @endif

            <div class="space-y-2">
                <div class="text-muted-foreground flex justify-between text-xs">
                    <span>Development Progress</span>
                    <span x-text="progress + '%'"></span>
                </div>
                <div class="bg-muted h-2 w-full rounded-full">
                    <div
                        class="bg-primary h-2 rounded-full transition-all duration-1000 ease-out"
                        x-bind:style="`width: ${progress}%`"
                    ></div>
                </div>
            </div>
        </div>
    </div>
</div>



<script>
function comingSoonOverlay() {
    return {
        progress: {{ $progress }},
        animateIcons: true,

        init() {
            // Initialize any setup logic here
        },

        handleNotifyClick() {
            // Handle notify button click
            console.log('Notify button clicked');

            // Dispatch custom event
            this.$dispatch('notify-clicked', {
                message: 'User requested notification'
            });

            alert('el pepe');
        }
    }
}
</script>

<style>
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}
</style>

usage.text

Usage:

<x-coming-soon-overlay 
    title="Dashboard Premium"
    description="Estamos añadiendo funciones premium a tu dashboard"
    estimated-date="Diciembre 2024"
    :progress="90"
/>