<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

    <title>Bonusprogramm</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
</head>

<body>
<nav th:replace="fragments/header :: header">Header</nav>

<div class="sidebar-layout content-width">
    <nav></nav>
    <div>
        <h1>Bonusprogramm</h1>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/customer :: sidebar"></nav>
    <div class="content-width">
        <div class="grid xl">
            <div class="card">
                <h2> Ihr Bonuspunktestand beträgt: </h2>
                <h1 class="huge"> 15 </h1>
            </div>
            <div class="s">
                <h2> Bonuspunkte sichern </h2>
                <p>
                    Sie sichern sich automatisch bei jedem Einkaufen pro Angefangenen
                    10&nbsp;EUR einen Bonuspunkt.
                </p>
                <p>
                    Eine Übersicht ihrer Bonuspunkt finden sie hier auf dieser
                    Bonus.
                </p>
                <p>
                    Um die Bonuspunkte einzulösen hacken sie einfach
                    "Bonuspunkte" verwenden beim Abschließen der Bestellung
                    an. Für jeden Bonuspunkt wird ihnen 0,50&nbsp;EUR gutgeschrieben.
                </p>
            </div>
            <div class="s">
                <img th:src="@{/img/undraw_gift.svg}"/>
            </div>
            <div class="spacer"></div>
            <div class="spacer"></div>
            <div class="spacer"></div>
        </div>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
