<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Clikzpay - Pay Bills Instantly</title>
    <meta name="description" content="Buy airtime, data bundles, pay electricity bills, subscribe to cable TV, and purchase exam PINs — all from one platform.">
       <link rel="icon" type="image/png" sizes="32x32" href="<?php echo e(asset('images/logo.png')); ?>">

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
</head>
<body class="h-full bg-white font-sans text-gray-900 antialiased">

    
    <nav class="fixed inset-x-0 top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex h-16 items-center justify-between">
            <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-2">
                <img src="<?php echo e(asset('images/logo.png')); ?>" alt="Clikzpay" class="h-9 w-auto">
            </a>
                <div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-600">
                    <a href="<?php echo e(route('home')); ?>" class="hover:text-gray-900 transition">Home</a>
                    <a href="<?php echo e(route('about')); ?>" class="hover:text-gray-900 transition">About</a>
                    <a href="<?php echo e(route('contact')); ?>" class="hover:text-gray-900 transition">Contact</a>
                </div>
                <div class="flex items-center gap-3">
                    <a href="<?php echo e(route('login')); ?>" class="text-sm font-semibold text-gray-700 hover:text-gray-900 transition">Sign in</a>
                    <a href="<?php echo e(route('register')); ?>" class="rounded-lg bg-green-950 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 transition">Get Started</a>
                </div>
            </div>
        </div>
    </nav>

    
    <section class="relative pt-32 pb-20 sm:pt-40 sm:pb-28 overflow-hidden">
        <div class="absolute inset-0 -z-10">
            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-gradient-to-b from-green-100/60 to-transparent rounded-full blur-3xl"></div>
        </div>
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
            <div class="inline-flex items-center gap-2 rounded-full bg-green-50 border border-green-200 px-4 py-1.5 text-sm font-medium text-green-700 mb-8">
                <span class="relative flex h-2 w-2"><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span><span class="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span></span>
                Pay Bills in Seconds.
            </div>
            <h1 class="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-6xl lg:text-7xl">
                Everything Bills,<br>
                <span class="bg-gradient-to-r from-green-950 to-emerald-500 bg-clip-text text-transparent">One Platform</span>
            </h1>
            <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-gray-600">
                Buy airtime, data, electricity, cable TV and exam PINs instantly. Secure payments, instant delivery, available 24/7.
            </p>
            <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="<?php echo e(route('register')); ?>" class="w-full sm:w-auto rounded-xl bg-green-950 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-green-200 hover:bg-green-700 transition">
                    Get Started
                </a>
                <a href="<?php echo e(route('login')); ?>" class="w-full sm:w-auto rounded-xl border border-gray-300 px-8 py-3.5 text-base font-semibold text-gray-700 hover:bg-gray-50 transition">
                    Sign In
                </a>
            </div>
        </div>
    </section>

    
    <section class="py-20 sm:py-28 bg-gray-50 border-y border-gray-100">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Everything You Need</h2>
                <p class="mt-4 text-lg text-gray-600">All your bill payments in one place</p>
            </div>
            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
                <div class="rounded-2xl bg-white p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-950">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" /></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-semibold text-gray-900">Airtime & Data</h3>
                    <p class="mt-2 text-sm leading-relaxed text-gray-600">Buy airtime for all networks and purchase data bundles at the best rates. Instant delivery every time.</p>
                </div>
                <div class="rounded-2xl bg-white p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-950">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-semibold text-gray-900">Electricity Bills</h3>
                    <p class="mt-2 text-sm leading-relaxed text-gray-600">Pay your electricity bills for all distribution companies. Get your token instantly after payment.</p>
                </div>
                <div class="rounded-2xl bg-white p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-950">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z" /></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-semibold text-gray-900">Cable TV</h3>
                    <p class="mt-2 text-sm leading-relaxed text-gray-600">Subscribe to DSTV, GOtv, and Startimes. Renew your subscription in seconds.</p>
                </div>
                <div class="rounded-2xl bg-white p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-950">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342" /></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-semibold text-gray-900">Exam PINs</h3>
                    <p class="mt-2 text-sm leading-relaxed text-gray-600">Purchase WAEC, NECO, JAMB, and NBAIS exam PINs securely. Delivered instantly to your account.</p>
                </div>
                <div class="rounded-2xl bg-white p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-950">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" /></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-semibold text-gray-900">Secure Wallet</h3>
                    <p class="mt-2 text-sm leading-relaxed text-gray-600">Fund your wallet securely via Paystack. Track every transaction with a complete history.</p>
                </div>
                <div class="rounded-2xl bg-white p-8 shadow-sm border border-gray-100 hover:shadow-md transition">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 text-green-950">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    </div>
                    <h3 class="mt-5 text-lg font-semibold text-gray-900">24/7 Availability</h3>
                    <p class="mt-2 text-sm leading-relaxed text-gray-600">Our platform is available around the clock. Pay your bills anytime, anywhere, on any device.</p>
                </div>
            </div>
        </div>
    </section>

    
    <section class="py-20 sm:py-28">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">Ready to Get Started?</h2>
            <p class="mt-4 text-lg text-gray-600">Create your free account in seconds and start paying bills the easy way.</p>
            <div class="mt-8">
                <a href="<?php echo e(route('register')); ?>" class="inline-flex rounded-xl bg-green-950 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-green-200 hover:bg-green-700 transition">
                    Get Started for Free
                </a>
            </div>
        </div>
    </section>

    
    <footer class="bg-gray-900 text-gray-400">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <div class="flex items-center gap-2 mb-4">
                    <img src="<?php echo e(asset('images/logo.png')); ?>" alt="Clikzpay" class="h-9 w-auto">
                </div>
                    <p class="text-sm leading-relaxed">Your trusted platform for instant bill payments. Fast, secure, and reliable.</p>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Quick Links</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="<?php echo e(route('about')); ?>" class="hover:text-white transition">About Us</a></li>
                        <li><a href="<?php echo e(route('contact')); ?>" class="hover:text-white transition">Contact</a></li>
                        <li><a href="<?php echo e(route('login')); ?>" class="hover:text-white transition">Sign In</a></li>
                        <li><a href="<?php echo e(route('register')); ?>" class="hover:text-white transition">Create Account</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Legal</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="<?php echo e(route('terms')); ?>" class="hover:text-white transition">Terms of Service</a></li>
                        <li><a href="<?php echo e(route('privacy')); ?>" class="hover:text-white transition">Privacy Policy</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Services</h4>
                    <ul class="space-y-2 text-sm">
                        <li>Airtime & Data</li>
                        <li>Electricity Bills</li>
                        <li>Cable TV</li>
                        <li>Exam PINs</li>
                    </ul>
                </div>
            </div>
            <div class="mt-12 border-t border-gray-800 pt-8 text-center text-sm">
                <p>&copy; <?php echo e(date('Y')); ?> Clikzpay. All rights reserved.</p>
                                <p>Powered by Sunzyclick Technology</p>

            </div>
        </div>
    </footer>

</body>
</html>
<?php /**PATH /Users/xunna/Documents/software dev/laravel/clikzpay/resources/views/home.blade.php ENDPATH**/ ?>