<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exam Attendance System - Modern Learning Platform</title>
    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet" />
    <style>
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            transition: all 0.3s ease;
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
    </style>
</head>
<body class="bg-gray-50 dark:bg-gray-900">
    <!-- Navigation -->
    <nav class="bg-white dark:bg-gray-800 shadow-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                            <span class="text-white font-bold text-sm">📚</span>
                        </div>
                        <span class="ml-2 text-xl font-bold text-gray-900 dark:text-white">ExamHub</span>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    <?php if(auth()->guard()->check()): ?>
                        <a href="<?php echo e(route('attendance')); ?>" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 transform hover:scale-105">
                            Go to Dashboard
                        </a>
                        <form method="POST" action="<?php echo e(route('logout')); ?>" class="inline">
                            <?php echo csrf_field(); ?>
                            <button type="submit" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors">
                                Logout
                            </button>
                        </form>
                    <?php else: ?>
                        <a href="<?php echo e(route('login')); ?>" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-4 py-2 rounded-lg font-medium transition-all duration-200 transform hover:scale-105">
                            Sign In
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-gradient text-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div class="space-y-8">
                    <div>
                        <h1 class="text-5xl lg:text-6xl font-bold leading-tight">
                            Modern <span class="text-yellow-300">Exam</span> Attendance System
                        </h1>
                        <p class="text-xl text-blue-100 mt-6 leading-relaxed">
                            Streamline your educational workflow with our comprehensive attendance and grading platform.
                            Perfect for teachers and students alike.
                        </p>
                    </div>

                    <div class="flex flex-col sm:flex-row gap-4">
                        <?php if(auth()->guard()->check()): ?>
                            <a href="<?php echo e(route('attendance')); ?>" class="bg-white text-blue-600 hover:bg-gray-50 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
                                Access Your Dashboard
                            </a>
                        <?php else: ?>
                            <a href="<?php echo e(route('login')); ?>" class="bg-green-300 text-blue-600 hover:bg-gray-50 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
                                Get Started Now
                            </a>
                            <div class="bg-white bg-opacity-10 backdrop-blur-sm border border-white border-opacity-30 px-6 py-4 rounded-xl">
                                <div class="text-sm text-white">
                                    <strong class="text-yellow-300">Demo Accounts:</strong><br>
                                    <span class="text-blue-400">Teacher: teacher@example.com</span><br>
                                    <span class="text-blue-400">Student: student@example.com</span><br>
                                    <span class="text-green-300 font-medium">Password: password</span>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="relative">
                    <div class="animate-float">
                        <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white border-opacity-20">
                            <div class="space-y-4">
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold">✓</span>
                                    </div>
                                    <div>
                                        <h3 class="text-green-500 font-semibold">Attendance Submitted</h3>
                                        <p class="text-blue-300 text-sm">John Doe - Class X - Session 1</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold">📝</span>
                                    </div>
                                    <div>
                                        <h3 class="text-orange-500 font-semibold">Assignment Graded</h3>
                                        <p class="text-blue-300 text-sm">Score: 95/100 - Excellent work!</p>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
                                        <span class="text-white font-bold">📊</span>
                                    </div>
                                    <div>
                                        <h3 class="text-purple-500 font-semibold">Progress Tracked</h3>
                                        <p class="text-blue-300 text-sm">View detailed analytics</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-24 bg-white dark:bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
                    Powerful Features for Modern Education
                </h2>
                <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
                    Everything you need to manage attendance, assignments, and grades in one beautiful platform.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="feature-card bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl shadow-lg">
                    <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" 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"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Easy Attendance</h3>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        Submit attendance with file uploads in just a few clicks. Support for multiple file formats including PDFs, documents, and images.
                    </p>
                </div>

                <!-- Feature 2 -->
                <div class="feature-card bg-gradient-to-br from-green-50 to-emerald-100 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl shadow-lg">
                    <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Smart Grading</h3>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        Teachers can easily grade assignments with scores from 0-100. Real-time updates and organized file storage by class and session.
                    </p>
                </div>

                <!-- Feature 3 -->
                <div class="feature-card bg-gradient-to-br from-purple-50 to-violet-100 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl shadow-lg">
                    <div class="w-16 h-16 bg-purple-500 rounded-2xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Analytics Dashboard</h3>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        Comprehensive analytics and reporting tools. Track attendance patterns, grades, and student progress with detailed insights.
                    </p>
                </div>

                <!-- Feature 4 -->
                <div class="feature-card bg-gradient-to-br from-yellow-50 to-orange-100 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl shadow-lg">
                    <div class="w-16 h-16 bg-yellow-500 rounded-2xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Organized Storage</h3>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        Files are automatically organized by class and session with descriptive naming. Easy access and management of all submissions.
                    </p>
                </div>

                <!-- Feature 5 -->
                <div class="feature-card bg-gradient-to-br from-pink-50 to-rose-100 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl shadow-lg">
                    <div class="w-16 h-16 bg-pink-500 rounded-2xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Mobile Friendly</h3>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        Fully responsive design that works perfectly on all devices. Submit attendance and view grades from anywhere, anytime.
                    </p>
                </div>

                <!-- Feature 6 -->
                <div class="feature-card bg-gradient-to-br from-indigo-50 to-blue-100 dark:from-gray-700 dark:to-gray-600 p-8 rounded-2xl shadow-lg">
                    <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Secure & Private</h3>
                    <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                        Enterprise-grade security with role-based access control. Your data is protected with modern encryption and secure authentication.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-gradient-to-r from-gray-900 to-gray-800 dark:from-gray-800 dark:to-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                <div class="text-white">
                    <div class="text-4xl font-bold mb-2">500+</div>
                    <div class="text-gray-300">Students</div>
                </div>
                <div class="text-white">
                    <div class="text-4xl font-bold mb-2">50+</div>
                    <div class="text-gray-300">Teachers</div>
                </div>
                <div class="text-white">
                    <div class="text-4xl font-bold mb-2">10K+</div>
                    <div class="text-gray-300">Submissions</div>
                </div>
                <div class="text-white">
                    <div class="text-4xl font-bold mb-2">99.9%</div>
                    <div class="text-gray-300">Uptime</div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-24 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-700">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-4xl font-bold text-white mb-6">
                Ready to Transform Your Learning Experience?
            </h2>
            <p class="text-xl text-blue-100 mb-8">
                Join thousands of students and teachers who are already using our platform to streamline their educational workflow.
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <?php if(auth()->guard()->check()): ?>
                    <a href="<?php echo e(route('attendance')); ?>" class="bg-white text-blue-600 hover:bg-gray-50 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
                        Continue to Dashboard
                    </a>
                <?php else: ?>
                    <a href="<?php echo e(route('login')); ?>" class="bg-white text-blue-600 hover:bg-gray-50 px-8 py-4 rounded-xl font-semibold text-lg transition-all duration-200 transform hover:scale-105 shadow-lg">
                        Get Started Free
                    </a>
                    <div class="bg-white bg-opacity-20 backdrop-blur-sm border border-white border-opacity-40 px-6 py-4 rounded-xl">
                        <p class="text-blue-500 text-sm font-medium">
                            No credit card required • Free forever • Setup in minutes
                        </p>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 dark:bg-black py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                        <span class="text-white font-bold text-sm">📚</span>
                    </div>
                    <span class="ml-2 text-xl font-bold text-white">ExamHub</span>
                </div>
                <div class="text-gray-300 text-sm">
                    © 2025 - Now. IGS - Exam Attendance System. Built with ❤️ for education.
                </div>
            </div>
        </div>
    </footer>
</body>
</html>
<?php /**PATH C:\Users\wahyu\Documents\exam-attendance\resources\views/welcome.blade.php ENDPATH**/ ?>