<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IMMIA FINANCE LIMITED | Customer Service Portal</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --primary: #1e40af;
            --primary-dark: #1e3a8a;
            --secondary: #0f172a;
            --accent: #06b6d4;
            --light: #f8fafc;
        }
        
        body {
            font-family: 'Inter', sans-serif;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #1e40af 0%, #0f172a 100%);
        }
        
        .hero-gradient {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        /* Fixed Navigation Styles */
        .nav-transparent {
            background: transparent;
        }
        
        .nav-scroll {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .nav-scroll .nav-logo-text {
            color: #1e40af;
        }
        
        .nav-scroll .nav-logo-subtext {
            color: #64748b;
        }
        
        .nav-scroll .nav-link {
            color: #475569;
        }
        
        .nav-scroll .nav-link:hover {
            color: #1e40af;
        }
        
        .nav-scroll .nav-login {
            background: #1e40af;
            color: white;
        }
        
        .nav-scroll .nav-login:hover {
            background: #1e3a8a;
        }
        
        .nav-scroll .nav-register {
            background: transparent;
            color: #1e40af;
            border: 2px solid #1e40af;
        }
        
        .nav-scroll .nav-register:hover {
            background: #1e40af;
            color: white;
        }
        
        .nav-transparent .nav-link {
            color: white;
        }
        
        .nav-transparent .nav-link:hover {
            color: #bfdbfe;
        }
        
        .nav-transparent .nav-login {
            background: white;
            color: #1e40af;
        }
        
        .nav-transparent .nav-login:hover {
            background: #f1f5f9;
        }
        
        .nav-transparent .nav-register {
            background: transparent;
            color: white;
            border: 2px solid white;
        }
        
        .nav-transparent .nav-register:hover {
            background: white;
            color: #1e40af;
        }
    </style>
</head>

<body class="bg-gray-50">
    <!-- Navigation -->
    <nav id="navbar" class="fixed w-full z-50 transition-all duration-300 nav-transparent">
        <div class="container mx-auto px-6 py-4">
            <div class="flex justify-between items-center">
                <!-- Logo -->
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-hand-holding-usd text-white text-lg"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold nav-logo-text text-white">IMMIA FINANCE</h1>
                        <p class="nav-logo-subtext text-blue-200 text-xs">Customer Portal</p>
                    </div>
                </div>
                
                <!-- Desktop Menu -->
                <div class="hidden lg:flex items-center space-x-6">
                    <a href="#home" class="nav-link font-medium transition-colors">Home</a>
                    <a href="#features" class="nav-link font-medium transition-colors">Features</a>
                    <a href="#services" class="nav-link font-medium transition-colors">Services</a>
                    <a href="#contact" class="nav-link font-medium transition-colors">Contact</a>
                    <a href="<?php echo e(route('customer.register')); ?>" class="nav-register px-5 py-2 rounded-lg font-medium transition-colors">Register</a>
                    <a href="<?php echo e(route('customer.login')); ?>" class="nav-login px-5 py-2 rounded-lg font-medium transition-colors client-login-btn">Client Login</a>
                </div>
                
                <!-- Mobile Menu Button -->
                <button id="mobile-menu-button" class="lg:hidden text-white text-xl">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- Mobile Menu -->
        <div id="mobile-menu" class="lg:hidden bg-white absolute top-full left-0 w-full shadow-xl hidden">
            <div class="container mx-auto px-6 py-4">
                <div class="flex flex-col space-y-4">
                    <a href="#home" class="text-gray-800 hover:text-blue-600 font-medium py-2">Home</a>
                    <a href="#features" class="text-gray-800 hover:text-blue-600 font-medium py-2">Features</a>
                    <a href="#services" class="text-gray-800 hover:text-blue-600 font-medium py-2">Services</a>
                    <a href="#contact" class="text-gray-800 hover:text-blue-600 font-medium py-2">Contact</a>
                    <a href="<?php echo e(route('customer.register')); ?>" class="border-2 border-blue-600 text-blue-600 px-6 py-3 rounded-lg font-medium text-center hover:bg-blue-600 hover:text-white transition-colors">Register</a>
                    <a href="<?php echo e(route('customer.login')); ?>" class="bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-center hover:bg-blue-700 client-login-btn">Client Login</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="min-h-screen gradient-bg flex items-center pt-20">
        <div class="container mx-auto px-6 py-20">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <!-- Hero Content -->
                <div class="text-white">
                    <div class="inline-flex items-center space-x-2 bg-white/10 rounded-full px-4 py-2 mb-6">
                        <span class="w-2 h-2 bg-blue-400 rounded-full"></span>
                        <span class="text-sm">Customer Service Portal</span>
                    </div>
                    
                    <h1 class="text-4xl lg:text-6xl font-bold mb-6 leading-tight">
                        Welcome to Your <span class="text-blue-300">Financial Dashboard</span>
                    </h1>
                    
                    <p class="text-xl text-blue-100 mb-8 leading-relaxed">
                        Access your account, manage loans, make payments, and get support through our secure customer service portal.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
                        <a href="<?php echo e(route('customer.login')); ?>" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold text-center transition-colors">
                            Access Your Account
                        </a>
                        <a href="<?php echo e(route('customer.register')); ?>" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-8 py-4 rounded-lg font-semibold text-center transition-colors">
                            Create Account
                        </a>
                    </div>
                    
                    <!-- Stats -->
                    <div class="grid grid-cols-3 gap-6 mt-12 pt-8 border-t border-blue-400/30">
                        <div>
                            <div class="text-2xl font-bold text-blue-300">500+</div>
                            <div class="text-blue-200 text-sm">Active Clients</div>
                        </div>
                        <div>
                            <div class="text-2xl font-bold text-blue-300">ZMW 50M+</div>
                            <div class="text-blue-200 text-sm">Loans Managed</div>
                        </div>
                        <div>
                            <div class="text-2xl font-bold text-blue-300">24/7</div>
                            <div class="text-blue-200 text-sm">Portal Access</div>
                        </div>
                    </div>
                </div>
                
                <!-- Hero Visual -->
                <div class="relative">
                    <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
                        <div class="grid grid-cols-2 gap-6">
                            <div class="bg-white rounded-xl p-6 text-center card-hover">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-chart-line text-blue-600 text-xl"></i>
                                </div>
                                <h3 class="font-semibold text-gray-900 mb-2">Loan Status</h3>
                                <p class="text-gray-600 text-sm">Track your applications</p>
                            </div>
                            <div class="bg-white rounded-xl p-6 text-center card-hover">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-file-invoice-dollar text-green-600 text-xl"></i>
                                </div>
                                <h3 class="font-semibold text-gray-900 mb-2">Statements</h3>
                                <p class="text-gray-600 text-sm">View payment history</p>
                            </div>
                            <div class="bg-white rounded-xl p-6 text-center card-hover">
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-credit-card text-purple-600 text-xl"></i>
                                </div>
                                <h3 class="font-semibold text-gray-900 mb-2">Make Payments</h3>
                                <p class="text-gray-600 text-sm">Secure online payments</p>
                            </div>
                            <div class="bg-white rounded-xl p-6 text-center card-hover">
                                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mx-auto mb-4">
                                    <i class="fas fa-headset text-orange-600 text-xl"></i>
                                </div>
                                <h3 class="font-semibold text-gray-900 mb-2">Support</h3>
                                <p class="text-gray-600 text-sm">Get help anytime</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Trust Bar -->
    <section class="bg-white py-8 border-b">
        <div class="container mx-auto px-6">
            <div class="flex flex-wrap justify-center items-center gap-8 lg:gap-16 opacity-60">
                <div class="text-center">
                    <i class="fas fa-shield-alt text-blue-600 text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Bank-Level Security</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-bolt text-green-600 text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Instant Updates</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-mobile-alt text-purple-600 text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Mobile Friendly</p>
                </div>
                <div class="text-center">
                    <i class="fas fa-headset text-orange-600 text-2xl mb-2"></i>
                    <p class="text-sm font-medium">24/7 Support</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 mb-4">Portal Features</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Everything you need to manage your finances in one secure, easy-to-use platform.
                </p>
            </div>
            
            <div class="grid lg:grid-cols-3 gap-8">
                <!-- Application Tracking -->
                <div class="bg-gradient-to-br from-blue-50 to-white p-8 rounded-2xl border border-blue-100 card-hover">
                    <div class="w-14 h-14 bg-blue-600 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-tasks text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Application Tracking</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Track your loan applications in real-time from submission to approval. Get instant notifications on status changes.
                    </p>
                </div>
                
                <!-- Payment Management -->
                <div class="bg-gradient-to-br from-green-50 to-white p-8 rounded-2xl border border-green-100 card-hover">
                    <div class="w-14 h-14 bg-green-600 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-credit-card text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Payment Management</h3>
                    <p class="text-gray-600 leading-relaxed">
                        View payment schedules, make payments online, and access your payment history all in one place.
                    </p>
                </div>
                
                <!-- Document Center -->
                <div class="bg-gradient-to-br from-purple-50 to-white p-8 rounded-2xl border border-purple-100 card-hover">
                    <div class="w-14 h-14 bg-purple-600 rounded-xl flex items-center justify-center mb-6">
                        <i class="fas fa-file-contract text-white text-2xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-4">Document Center</h3>
                    <p class="text-gray-600 leading-relaxed">
                        Securely upload required documents and access your loan agreements and statements anytime.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 mb-4">Our Services</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Comprehensive financial solutions designed for businesses, government employees, and individuals across Zambia.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- MSME Business Loans -->
                <div class="bg-white rounded-2xl overflow-hidden border card-hover">
                    <div class="h-2 bg-blue-600"></div>
                    <div class="p-8">
                        <div class="w-14 h-14 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
                            <i class="fas fa-building text-blue-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">MSME Business Loans</h3>
                        <p class="text-gray-600 mb-6">
                            Fuel your business growth with tailored financing solutions for Micro, Small, and Medium Enterprises.
                        </p>
                        <a href="<?php echo e(route('customer.register')); ?>" class="block w-full bg-blue-600 hover:bg-blue-700 text-white text-center py-3 rounded-lg font-semibold transition-colors">
                            Apply Now
                        </a>
                    </div>
                </div>
                
                <!-- GRZ Salary Advances -->
                <div class="bg-white rounded-2xl overflow-hidden border card-hover">
                    <div class="h-2 bg-purple-600"></div>
                    <div class="p-8">
                        <div class="w-14 h-14 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
                            <i class="fas fa-user-tie text-purple-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">GRZ Salary Advances</h3>
                        <p class="text-gray-600 mb-6">
                            Exclusive financial solutions for Government of the Republic of Zambia employees.
                        </p>
                        <a href="<?php echo e(route('customer.register')); ?>" class="block w-full bg-purple-600 hover:bg-purple-700 text-white text-center py-3 rounded-lg font-semibold transition-colors">
                            Apply Now
                        </a>
                    </div>
                </div>

                <!-- Personal Loans -->
                <div class="bg-white rounded-2xl overflow-hidden border card-hover">
                    <div class="h-2 bg-orange-600"></div>
                    <div class="p-8">
                        <div class="w-14 h-14 bg-orange-100 rounded-xl flex items-center justify-center mb-6">
                            <i class="fas fa-user text-orange-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Personal Loans</h3>
                        <p class="text-gray-600 mb-6">
                            Meet your personal financial needs with our flexible and affordable personal loan options.
                        </p>
                        <a href="<?php echo e(route('customer.register')); ?>" class="block w-full bg-orange-600 hover:bg-orange-700 text-white text-center py-3 rounded-lg font-semibold transition-colors">
                            Apply Now
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 gradient-bg">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-4xl font-bold text-white mb-6">Ready to Manage Your Finances?</h2>
            <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
                Join hundreds of satisfied clients who manage their loans through our secure customer portal.
            </p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                <a href="<?php echo e(route('customer.register')); ?>" class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
                    Create Account
                </a>
                <a href="<?php echo e(route('customer.login')); ?>" class="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition-colors client-login-btn">
                    <i class="fas fa-sign-in-alt mr-2"></i>Client Login
                </a>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold text-gray-900 mb-4">Get In Touch</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Have questions about our portal or services? Our customer service team is here to help.
                </p>
            </div>
            
            <div class="grid lg:grid-cols-2 gap-12">
                <!-- Contact Information -->
                <div>
                    <div class="bg-gray-50 rounded-2xl p-8">
                        <h3 class="text-2xl font-bold text-gray-900 mb-6">Contact Information</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-map-marker-alt text-blue-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900 mb-1">Our Address</h4>
                                    <p class="text-gray-600">Plot No.2963-3A, Benangombe Road<br>Woodlands, Lusaka, Zambia</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-phone text-green-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900 mb-1">Call Us</h4>
                                    <p class="text-gray-600">
                                        +260 760 757085<br>
                                        +260 0771 326326<br>
                                        +260 0977 323320
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-envelope text-purple-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900 mb-1">Email Us</h4>
                                    <p class="text-gray-600">info@immiafinance.com</p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                    <i class="fas fa-clock text-orange-600"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-gray-900 mb-1">Working Hours</h4>
                                    <p class="text-gray-600">Monday - Friday: 8:00 AM - 5:00 PM</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Contact Form -->
                <div class="bg-gray-50 rounded-2xl p-8">
                    <h3 class="text-2xl font-bold text-gray-900 mb-6">Send us a Message</h3>
                    <form class="space-y-6">
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">First Name</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Last Name</label>
                                <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Email Address</label>
                            <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Phone Number</label>
                            <input type="tel" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Subject</label>
                            <select class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                <option>Portal Support</option>
                                <option>Loan Application</option>
                                <option>Payment Issue</option>
                                <option>Account Access</option>
                                <option>General Inquiry</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Message</label>
                            <textarea rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
                        </div>
                        
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg font-semibold transition-colors">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <!-- Company Info -->
                <div>
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-hand-holding-usd text-white text-lg"></i>
                        </div>
                        <div>
                            <h1 class="text-xl font-bold">IMMIA FINANCE</h1>
                            <p class="text-blue-300 text-xs">Customer Portal</p>
                        </div>
                    </div>
                    <p class="text-gray-400 mb-6">
                        Secure customer service portal for managing your finances with Immia Finance Limited.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-400 transition-colors">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-700 transition-colors">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Portal Links -->
                <div>
                    <h3 class="text-lg font-semibold mb-6">Portal Features</h3>
                    <ul class="space-y-3">
                        <li><a href="<?php echo e(route('customer.login')); ?>" class="text-gray-400 hover:text-white transition-colors">Account Dashboard</a></li>
                        <li><a href="<?php echo e(route('customer.login')); ?>" class="text-gray-400 hover:text-white transition-colors">Loan Applications</a></li>
                        <li><a href="<?php echo e(route('customer.login')); ?>" class="text-gray-400 hover:text-white transition-colors">Payment History</a></li>
                        <li><a href="<?php echo e(route('customer.login')); ?>" class="text-gray-400 hover:text-white transition-colors">Document Center</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">Support</a></li>
                    </ul>
                </div>
                
                <!-- Quick Links -->
                <div>
                    <h3 class="text-lg font-semibold mb-6">Quick Links</h3>
                    <ul class="space-y-3">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">Home</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
                        <li><a href="#services" class="text-gray-400 hover:text-white transition-colors">Services</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
                        <li><a href="<?php echo e(route('customer.register')); ?>" class="text-gray-400 hover:text-white transition-colors">Register</a></li>
                    </ul>
                </div>
                
                <!-- Contact Info -->
                <div>
                    <h3 class="text-lg font-semibold mb-6">Contact Info</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-3"></i>
                            <span class="text-gray-400">Plot No.2963-3A, Benangombe Road, Woodlands, Lusaka</span>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-phone text-blue-400 mt-1 mr-3"></i>
                            <span class="text-gray-400">+260 760 757085</span>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-envelope text-blue-400 mt-1 mr-3"></i>
                            <span class="text-gray-400">info@immiafinance.com</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
                <div class="text-gray-400 mb-4 md:mb-0">
                    &copy; 2024 Immia Finance Limited. All rights reserved.
                </div>
                <div class="text-gray-400">
                    Customer Service Portal v1.0
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
        });

        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) {
                navbar.classList.remove('nav-transparent');
                navbar.classList.add('nav-scroll');
                // Update mobile menu button color
                document.getElementById('mobile-menu-button').classList.remove('text-white');
                document.getElementById('mobile-menu-button').classList.add('text-gray-700');
            } else {
                navbar.classList.remove('nav-scroll');
                navbar.classList.add('nav-transparent');
                // Update mobile menu button color
                document.getElementById('mobile-menu-button').classList.remove('text-gray-700');
                document.getElementById('mobile-menu-button').classList.add('text-white');
            }
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    // Close mobile menu if open
                    document.getElementById('mobile-menu').classList.add('hidden');
                    
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Close mobile menu when clicking outside
        document.addEventListener('click', function(event) {
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileMenuButton = document.getElementById('mobile-menu-button');
            
            if (!mobileMenu.contains(event.target) && !mobileMenuButton.contains(event.target)) {
                mobileMenu.classList.add('hidden');
            }
        });
    </script>
</body>
</html><?php /**PATH /home/topacvbu/public_html/zedbankos.cloud/customer-portal/resources/views/welcome.blade.php ENDPATH**/ ?>