
    <section class="relative overflow-hidden bg-gradient-to-br from-gray-900 via-indigo-900 to-gray-800 text-white pt-24 pb-28">
    <!-- Background Glow Effects -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute top-0 left-0 w-96 h-96 bg-purple-500/30 rounded-full filter blur-3xl opacity-30 animate-pulse"></div>
        <div class="absolute bottom-0 right-0 w-[500px] h-[500px] bg-yellow-500/20 rounded-full filter blur-3xl opacity-30 animate-pulse-slow"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-center">

        <!-- Left Section -->
        <div class="animate-fadeInUp space-y-6">
            <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
            Trade Cryptocurrencies <br />
            <span class="text-yellow-400 drop-shadow-lg">Securely & Confidently</span>
            </h1>

            <p class="text-lg sm:text-xl text-gray-300 leading-relaxed max-w-lg">
            Experience the future of trading with <span class="text-yellow-400 font-semibold">P2P Escrow Protection</span>, advanced 
            <span class="text-purple-300 font-semibold">KYC verification</span>, and lightning-fast transactions. 
            Your crypto journey begins here.
            </p>

            <div class="flex flex-col sm:flex-row gap-4 pt-4">
            <?php if (!Security::isAuthenticated()): ?>
                <a href="register.php" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 px-8 py-4 rounded-xl font-bold text-lg shadow-lg transition-transform transform hover:scale-105 flex items-center justify-center">
                <i class="fas fa-user-plus mr-2"></i> Start Trading Now
                </a>
                <a href="knowledge.php" class="border-2 border-white text-white hover:bg-white hover:text-indigo-900 px-8 py-4 rounded-xl font-bold text-lg transition-transform transform hover:scale-105 flex items-center justify-center">
                <i class="fas fa-book mr-2"></i> Learn More
                </a>
            <?php else: ?>
                <a href="trading.php" class="bg-yellow-400 hover:bg-yellow-500 text-gray-900 px-8 py-4 rounded-xl font-bold text-lg shadow-lg transition-transform transform hover:scale-105 flex items-center justify-center">
                <i class="fas fa-exchange-alt mr-2"></i> Start Trading
                </a>
                <a href="dashboard.php" class="border-2 border-white text-white hover:bg-white hover:text-indigo-900 px-8 py-4 rounded-xl font-bold text-lg transition-transform transform hover:scale-105 flex items-center justify-center">
                <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
                </a>
            <?php endif; ?>
            </div>
        </div>

        <!-- Right Section -->
        <div class="animate-fadeInUp">
            <div class="bg-white/10 backdrop-blur-xl border border-white/10 rounded-2xl p-8 shadow-2xl hover:shadow-yellow-400/20 transition-all duration-500">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-2xl font-semibold">
                <i class="fas fa-chart-line mr-2 text-yellow-400"></i> Live Market Prices
                </h3>
                <div class="flex items-center animate-pulse-slow">
                <span class="bg-green-500 w-3 h-3 rounded-full mr-2"></span>
                <span class="text-sm text-gray-300">Live</span>
                </div>
            </div>

            <!-- Crypto List -->
            <div class="space-y-4">
                <?php foreach ($cryptocurrencies as $crypto): ?>
                <div class="flex items-center justify-between p-4 bg-white/10 hover:bg-white/20 transition-all duration-200 rounded-xl group">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center text-white font-bold text-lg mr-4 shadow-md">
                    <?php echo substr($crypto['symbol'], 0, 1); ?>
                    </div>
                    <div>
                    <div class="font-semibold text-lg group-hover:text-yellow-400 transition"><?php echo $crypto['symbol']; ?></div>
                    <div class="text-sm text-gray-400"><?php echo $crypto['name']; ?></div>
                    </div>
                </div>

                <div class="text-right">
                    <div class="text-2xl font-bold text-yellow-400" id="price-<?php echo $crypto['symbol']; ?>">
                    $<?php echo number_format($crypto['current_price'], 8); ?>
                    </div>
                    <div class="text-sm text-green-400 flex items-center justify-end">
                    <i class="fas fa-arrow-up mr-1"></i> +2.5%
                    </div>
                </div>
                </div>
                <?php endforeach; ?>
            </div>
            </div>
        </div>
        </div>
    </div>
    </section>