@{
    ViewData["Title"] = "Home Page";
    ViewBag.AlwaysShrinkNavBar = false;
}


<header class="masthead">
    <div class="header-content">
        <div class="header-content-inner text-white">
            <h1>Welcome to BTCPay Server</h1>
            <hr />
            <p>BTCPay Server is a free and open source server for merchants wanting to accept Bitcoin for their business.</p>
            <a style="background-color: #fff;color: #222;display:inline-block;text-align: center;white-space: nowrap;vertical-align: middle;user-select: none;line-height: 1.25;font-size: 1rem;text-decoration:none;font-weight: 700;    text-transform: uppercase;border: none;border-radius: 300px;padding: 15px 30px;" href="https://btcpayserver.org" target="_blank">Official website</a>
        </div>
    </div>
</header>

<section id="services">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading">A Payment Server for Bitcoin</h2>
                <hr class="primary">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-6 text-center">
                <div class="service-box">
                    <img src="~/img/lock-logo.png" />
                    <h3 class="text-dark">Secure</h3>
                    <p class="text-muted">The payment server does not need to know your private keys, so your money can't be stolen.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 text-center">
                <div class="service-box">
                    <img src="~/img/qr-logo.png" />
                    <h3 class="text-dark">Easy</h3>
                    <p class="text-muted">A user-friendly Bitcoin checkout page for your customers.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 text-center">
                <div class="service-box">
                    <img src="~/img/money-logo.png" />
                    <h3 class="text-dark">Visibility</h3>
                    <p class="text-muted">Manage, generate reports, and search for your invoices easily.</p>
                </div>
            </div>
        </div>
    </div>
</section>



<div class="call-to-action bg-dark text-white">
    <div class="container text-center">
        <h2>Video tutorials</h2>
        <div class="row">
            <div class="col-md-2 text-center">
            </div>
            <div class="col-md-8 text-center">
                <a href="https://www.youtube.com/channel/UCpG9WL6TJuoNfFVkaDMp9ug" target="_blank">
                    <img src="~/img/youtube.png" class="img-fluid" />
                </a>
            </div>
            <div class="col-md-2 text-center">
            </div>
        </div>
    </div>
</div>
<section>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto text-center">
                <h2 class="section-heading">Donate!</h2>
                <hr class="primary">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 mr-auto text-center"></div>
            <div class="col-lg-4 ml-auto text-center">
                <form method="POST" action="https://donate.btcpayserver.org/api/v1/invoices">
                    <input type="hidden" name="storeId" value="EErYwCthBNfJUpuU1etH1uhg3x1YVH1q1F2zez7u1AAX" />
                    <div style="text-align:center;display:inline;width:209px"><div><button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault(); var price = parseInt(document.querySelector('#btcpay-input-price').value); if ('-' == '-' && (price - 1) < 1) { return; } document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) - 1;">-</button><input type="text" id="btcpay-input-price" name="price" value="10" style="border: none; background-image: none; background-color: transparent; -webkit-box-shadow: none ; -moz-box-shadow: none ; -webkit-appearance: none ; width: 3em; text-align: center; font-size: 25px; margin: auto; border-radius: 5px; line-height: 35px; background: #fff;" oninput="event.preventDefault();isNaN(event.target.value) || event.target.value <= 0 ? document.querySelector('#btcpay-input-price').value = 10 : event.target.value" /><button style="cursor:pointer; font-size:25px; line-height: 25px; background: rgba(0,0,0,.1); height: 30px; width: 45px; border:none; border-radius: 60px; margin: auto;" onclick="event.preventDefault(); var price = parseInt(document.querySelector('#btcpay-input-price').value); if ('+' == '-' && (price - 1) < 1) { return; } document.querySelector('#btcpay-input-price').value = parseInt(document.querySelector('#btcpay-input-price').value) + 1;">+</button></div><select onchange="document.querySelector('input[type = hidden][name = currency]').value = event.target.value" style="-webkit-appearance: none; border: 0; display: block; padding: 0 3em; margin: auto auto 5px auto; font-size: 11px; background: 0 0; cursor: pointer;"><option value="USD">USD</option><option value="GBP">GBP</option><option value="EUR">EUR</option><option value="BTC">BTC</option></select></div>
                    <input type="hidden" name="currency" value="USD" />
                    <input type="image" src="~/img/paybutton/pay.png" name="submit" style="width:209px" alt="Pay with BtcPay, Self-Hosted Bitcoin Payment Processor">
                </form>
            </div>
            <div class="col-lg-4 mr-auto text-center"></div>
        </div>
    </div>
</section>

<div class="container">
    <div class="row">
        <div class="col-lg-8 mx-auto text-center">
            <h2 class="section-heading">Let's Get In Touch!</h2>
            <hr class="primary">
            <p>
                An open source project is nothing without its community<br />
                Come and get in touch with us!
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3 ml-auto text-center">
            <a href="https://chat.btcpayserver.org/" target="_blank">
                <img src="~/img/mattermost.png" height="100" />
            </a>
            <p><a href="https://chat.btcpayserver.org/" target="_blank">On Mattermost</a></p>
        </div>
        <div class="col-lg-3 ml-auto text-center">
            <a href="https://slack.btcpayserver.org/" target="_blank">
                <img src="~/img/slack.png" height="100" />
            </a>
            <p><a href="http://slack.forkbitpay.ninja/" target="_blank">On Slack</a></p>
        </div>
        <div class="col-lg-3 mr-auto text-center">
            <a href="https://twitter.com/BtcpayServer" target="_blank">
                <img src="~/img/twitter.png" height="100" />
            </a>
            <p>
                <a href="https://twitter.com/BtcpayServer" target="_blank">On Twitter</a>
            </p>
        </div>
        <div class="col-lg-3 mr-auto text-center">
            <a href="https://github.com/btcpayserver/btcpayserver" target="_blank">
                <img src="~/img/github.png" height="100" />
            </a>
            <p>
                <a href="https://github.com/btcpayserver/btcpayserver" target="_blank">On Github</a>
            </p>
        </div>
    </div>
</div>