@extends('layouts.app')




<div class="container py-5">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h1 class="display-4 mb-4">
                <i class="fas fa-bank" style="color: #1e4d8b;"></i> Welcome to Bank Management System
            </h1>
            <p class="lead mb-4">
                Secure, Fast, and Reliable Banking Services for Everyone
            </p>
            <p class="text-muted mb-4">
                Manage your accounts, transfer money, track transactions, and more - all from one convenient platform.
            </p>
            <div class="d-grid gap-2 d-sm-flex mb-5">
                                    <a href="/login" class="btn btn-primary btn-lg">
                        <i class="fas fa-sign-in-alt"></i> Login
                    </a>
                    <a href="/register" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-user-plus"></i> Create Account
                    </a>
                            </div>
        </div>
        <div class="col-md-6">
            <div class="bg-light p-5 rounded-lg" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <h3 class="mb-4"><i class="fas fa-lock"></i> Security First</h3>
                <ul class="list-unstyled">
                    <li class="mb-3"><i class="fas fa-check-circle"></i> AES-256 Encryption</li>
                    <li class="mb-3"><i class="fas fa-check-circle"></i> Secure Authentication</li>
                    <li class="mb-3"><i class="fas fa-check-circle"></i> Transaction Verification</li>
                    <li class="mb-3"><i class="fas fa-check-circle"></i> 24/7 Monitoring</li>
                    <li><i class="fas fa-check-circle"></i> Fraud Protection</li>
                </ul>
            </div>
        </div>
    </div>

    <hr class="my-5">

    <h2 class="mb-4 text-center">Our Services</h2>

    <div class="row g-4">
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-exchange-alt fa-3x mb-3" style="color: #1e4d8b;"></i>
                    <h5 class="card-title">Money Transfer</h5>
                    <p class="card-text text-muted">Send money instantly to any account</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-history fa-3x mb-3" style="color: #1e4d8b;"></i>
                    <h5 class="card-title">Transaction History</h5>
                    <p class="card-text text-muted">Track all your transactions easily</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-credit-card fa-3x mb-3" style="color: #1e4d8b;"></i>
                    <h5 class="card-title">Account Management</h5>
                    <p class="card-text text-muted">Manage multiple accounts easily</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-body text-center">
                    <i class="fas fa-bell fa-3x mb-3" style="color: #1e4d8b;"></i>
                    <h5 class="card-title">Notifications</h5>
                    <p class="card-text text-muted">Get real-time alerts for transactions</p>
                </div>
            </div>
        </div>
    </div>
</div>