@extends('new_app.header')
@section('content')
  




<section class="coming-soon container-fluid p-5 d-flex flex-column align-items-center justify-content-center">
    <h2 class="text-white text-shadow">🚀 Coming Soon 🚀</h2>
    <p class="text-muted fs-5">We are working on something amazing! Stay tuned.</p>
    
    <!-- Countdown Timer -->
    <div class="countdown-timer">
        <span id="days">00</span>D :
        <span id="hours">00</span>H :
        <span id="minutes">00</span>M :
        <span id="seconds">00</span>S
    </div>
    
    <!-- Animated Pulse Effect -->
    <div class="pulse-animation mt-4">
        <span>Stay Excited!</span>
    </div>
</section>

<style>
    .coming-soon {
        text-align: center;
        background: linear-gradient(135deg, #008eff, #9abdd9);
        color: white;
        min-height: 60vh;
        border-radius: 12px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .countdown-timer {
        font-size: 2rem;
        font-weight: bold;
        margin-top: 20px;
    }

    .pulse-animation {
        font-size: 1.5rem;
        font-weight: bold;
        color: white;
        background: rgba(255, 255, 255, 0.2);
        padding: 10px 20px;
        border-radius: 8px;
        display: inline-block;
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.1); opacity: 1; }
        100% { transform: scale(1); opacity: 0.8; }
    }
</style>

<script>
    function countdownTimer(targetDate) {
        function updateTimer() {
            const now = new Date().getTime();
            const timeLeft = targetDate - now;

            if (timeLeft <= 0) {
                document.querySelector(".countdown-timer").innerHTML = "We Are Live!";
                return;
            }

            const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
            const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

            document.getElementById("days").textContent = days;
            document.getElementById("hours").textContent = hours;
            document.getElementById("minutes").textContent = minutes;
            document.getElementById("seconds").textContent = seconds;
        }

        updateTimer();
        setInterval(updateTimer, 1000);
    }

    // Set target launch date (Change as needed)
    const launchDate = new Date("2025-04-01T00:00:00").getTime();
    countdownTimer(launchDate);
</script>

@endsection