JezK

Edit File: login.blade.php

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login — NusaDaya CMS</title>
    <link rel="icon" href="https://res.cloudinary.com/dmdl9p7do/image/upload/v1776403982/Logo_Nusadaya_Academy_-_Navbar_ppmaep.png" type="image/png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css'])
    <style>
        body { font-family: 'Inter', sans-serif; }

/* Animated floating orbs */
        @keyframes float1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.1); } }
        @keyframes float2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 30px) scale(0.95); } }
        @keyframes float3 { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(40px, -20px); } 66% { transform: translate(-30px, 20px); } }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

.orb-1 { animation: float1 8s ease-in-out infinite; }
        .orb-2 { animation: float2 10s ease-in-out infinite; }
        .orb-3 { animation: float3 12s ease-in-out infinite; }
        .fade-in-up { animation: fadeInUp 0.8s ease-out both; }
        .slide-in-right { animation: slideInRight 0.6s ease-out both; }
        .delay-100 { animation-delay: 100ms; }
        .delay-200 { animation-delay: 200ms; }
        .delay-300 { animation-delay: 300ms; }
        .delay-400 { animation-delay: 400ms; }

.grid-pattern {
            background-image: linear-gradient(rgba(201,162,39,0.03) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(201,162,39,0.03) 1px, transparent 1px);
            background-size: 60px 60px;
        }

.glass-card {
            background: rgba(255,255,255,0.06);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.08);
        }

.btn-gold {
            background: linear-gradient(135deg, #c9a227 0%, #e0bd4e 50%, #c9a227 100%);
            background-size: 200% auto;
            transition: all 0.4s ease;
        }
        .btn-gold:hover {
            background-position: right center;
            box-shadow: 0 8px 32px rgba(201,162,39,0.35);
            transform: translateY(-1px);
        }

.input-elegant {
            background: rgba(249,250,251,0.8);
            border: 1.5px solid #e5e7eb;
            transition: all 0.3s ease;
        }
        .input-elegant:focus {
            background: white;
            border-color: #c9a227;
            box-shadow: 0 0 0 4px rgba(201,162,39,0.1);
        }

.stat-pill {
            background: rgba(255,255,255,0.07);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.1);
        }
    </style>
</head>
<body class="antialiased bg-[#060e1a] min-h-screen flex flex-col">
    <div class="flex-1 flex flex-col lg:flex-row w-full min-h-screen">
        {{-- Left: Premium Branding Panel --}}
        <div class="hidden lg:flex lg:w-1/2 xl:w-[55%] flex-col relative overflow-hidden">
            {{-- Background layers --}}
            <div class="absolute inset-0 bg-gradient-to-br from-[#0a1628] via-[#0d1f3c] to-[#091320]"></div>
            <div class="absolute inset-0 grid-pattern"></div>

{{-- Animated floating orbs --}}
            <div class="absolute top-[10%] right-[15%] w-[420px] h-[420px] bg-gradient-to-br from-gold/8 to-gold/3 rounded-full blur-[100px] orb-1"></div>
            <div class="absolute bottom-[15%] left-[5%] w-[350px] h-[350px] bg-gradient-to-tr from-blue-500/5 to-gold/5 rounded-full blur-[80px] orb-2"></div>
            <div class="absolute top-[50%] left-[40%] w-[200px] h-[200px] bg-gold/4 rounded-full blur-[60px] orb-3"></div>

{{-- Subtle line accents --}}
            <div class="absolute top-0 left-[30%] w-px h-full bg-gradient-to-b from-transparent via-white/5 to-transparent"></div>
            <div class="absolute top-0 right-[25%] w-px h-full bg-gradient-to-b from-transparent via-gold/5 to-transparent"></div>

{{-- Content --}}
            <div class="relative z-10 flex flex-col justify-between h-full p-8 lg:p-12 xl:p-14 overflow-y-auto">
                {{-- Header: Logo --}}
                <div class="fade-in-up">
                    <div class="flex items-center gap-3">
                        <img src="https://res.cloudinary.com/dmdl9p7do/image/upload/v1776403982/Logo_Nusadaya_Academy_-_Footer_gnmwvr.png"
                             alt="NusaDaya Academy" class="h-10 w-auto">
                    </div>
                </div>

{{-- Center: Hero Text --}}
                <div class="max-w-lg">
                    <div class="fade-in-up delay-100">
                        <span class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase stat-pill text-gold mb-8">
                            <span class="w-1.5 h-1.5 bg-gold rounded-full animate-pulse"></span>
                            NUSADAYA CMS
                        </span>
                    </div>

<h2 class="text-5xl font-extrabold text-white leading-[1.15] mb-6 fade-in-up delay-200">
                        Smart<br>
                        Content<br>
                        <span class="bg-gradient-to-r from-gold via-yellow-300 to-gold bg-clip-text text-transparent">Management</span>
                    </h2>

<p class="text-white/40 text-lg leading-relaxed mb-10 fade-in-up delay-300">
                        Platform manajemen konten yang dirancang untuk mengelola artikel, media, dan struktur website secara profesional dengan performa tinggi dan pengalaman pengguna yang intuitif.
                    </p>

{{-- Feature pills --}}
                    <div class="flex flex-wrap gap-3 fade-in-up delay-400">
                        <div class="stat-pill px-4 py-2.5 rounded-xl flex items-center gap-2.5">
                            <div class="w-8 h-8 rounded-lg bg-emerald-500/15 flex items-center justify-center">
                                <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <span class="text-white/60 text-sm font-medium">Content Management</span>
                        </div>
                        <div class="stat-pill px-4 py-2.5 rounded-xl flex items-center gap-2.5">
                            <div class="w-8 h-8 rounded-lg bg-blue-500/15 flex items-center justify-center">
                                <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            </div>
                            <span class="text-white/60 text-sm font-medium">SEO Management</span>
                        </div>
                        <div class="stat-pill px-4 py-2.5 rounded-xl flex items-center gap-2.5">
                            <div class="w-8 h-8 rounded-lg bg-gold/15 flex items-center justify-center">
                                <svg class="w-4 h-4 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                            </div>
                            <span class="text-white/60 text-sm font-medium">Digital Asset Manager</span>
                        </div>
                    </div>
                </div>

{{-- Footer --}}
                <div class="fade-in-up delay-400">
                    <div class="flex items-center justify-between">
                        <p class="text-white/20 text-xs">&copy; {{ date('Y') }} DewaLabs Kreasi Indonesia. All rights reserved.</p>
                        <div class="flex items-center gap-2 text-white/20 text-xs">
                            <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span>
                            System Online
                        </div>
                    </div>
                </div>
            </div>
        </div>

{{-- Right: Login Form --}}
        <div class="flex-1 flex items-center justify-center p-6 sm:p-10 lg:p-12 bg-white relative overflow-hidden">
            {{-- Subtle background pattern --}}
            <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-bl from-gold/3 to-transparent rounded-full blur-3xl"></div>
            <div class="absolute bottom-0 left-0 w-64 h-64 bg-gradient-to-tr from-navy/3 to-transparent rounded-full blur-2xl"></div>

<div class="w-full max-w-[380px] relative z-10">
                {{-- Mobile Logo --}}
                <div class="flex items-center justify-center mb-10 lg:hidden">
                    <img src="https://res.cloudinary.com/dmdl9p7do/image/upload/v1776403982/Logo_Nusadaya_Academy_-_Navbar_ppmaep.png"
                         alt="NusaDaya Academy" class="h-16 w-auto">
                </div>

{{-- Welcome Text --}}
                <div class="slide-in-right mb-8">
                    <div class="hidden lg:flex w-12 h-12 rounded-2xl bg-gradient-to-br from-navy to-[#0d1f3c] items-center justify-center mb-5 shadow-lg shadow-navy/20">
                        <svg class="w-6 h-6 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                    </div>
                    <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Selamat Datang</h1>
                    <p class="text-gray-400 text-sm mt-1.5">Masuk ke panel admin untuk mengelola konten.</p>
                </div>

{{-- Error Alert --}}
                @if($errors->any())
                    <div class="mb-6 p-4 bg-red-50/80 border border-red-100 rounded-2xl slide-in-right">
                        <div class="flex items-center gap-3 text-red-700 text-sm">
                            <div class="w-8 h-8 rounded-xl bg-red-100 flex items-center justify-center shrink-0">
                                <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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <span>{{ $errors->first() }}</span>
                        </div>
                    </div>
                @endif

{{-- Success Alert --}}
                @if(session('success'))
                    <div class="mb-6 p-4 bg-emerald-50/80 border border-emerald-100 rounded-2xl slide-in-right">
                        <div class="flex items-center gap-3 text-emerald-700 text-sm">
                            <div class="w-8 h-8 rounded-xl bg-emerald-100 flex items-center justify-center shrink-0">
                                <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                            <span>{{ session('success') }}</span>
                        </div>
                    </div>
                @endif

{{-- Login Form --}}
                <form method="POST" action="{{ route('login') }}" class="space-y-5 slide-in-right delay-100">
                    @csrf

{{-- Email --}}
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Email Address</label>
                        <div class="relative">
                            <div class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                            </div>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" required autofocus
                                class="input-elegant w-full pl-12 pr-4 py-3.5 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none text-sm"
                                placeholder="admin@nusadayaacademy.com">
                        </div>
                    </div>

{{-- Password --}}
                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">Password</label>
                        <div class="relative">
                            <div class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                            </div>
                            <input type="password" id="password" name="password" required
                                class="input-elegant w-full pl-12 pr-12 py-3.5 rounded-xl text-gray-900 placeholder-gray-400 focus:outline-none text-sm"
                                placeholder="••••••••">
                            <button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors">
                                <svg id="eyeIcon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            </button>
                        </div>
                    </div>

{{-- Remember Me --}}
                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2.5 cursor-pointer group">
                            <div class="relative">
                                <input type="checkbox" name="remember" class="peer sr-only">
                                <div class="w-5 h-5 rounded-md border-2 border-gray-200 peer-checked:bg-navy peer-checked:border-navy transition-all flex items-center justify-center">
                                    <svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                </div>
                            </div>
                            <span class="text-sm text-gray-500 group-hover:text-gray-700 transition-colors">Ingat saya</span>
                        </label>
                    </div>

{{-- Submit Button --}}
                    <button type="submit" class="btn-gold w-full text-navy font-bold py-3.5 px-4 rounded-xl text-sm tracking-wide">
                        Masuk ke Dashboard
                    </button>
                </form>

{{-- Footer --}}
                <div class="mt-10 text-center slide-in-right delay-300">
                    <p class="text-xs text-gray-400 font-medium">CMS Nusadaya Academy v.1.0 &copy; 2026 DewaLabs Kreasi Indonesia. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </div>