diff --git a/prototype/src/main/resources/static/css/ecom.css b/prototype/src/main/resources/static/css/ecom.css
index 9fc6e57..d235d53 100644
--- a/prototype/src/main/resources/static/css/ecom.css
+++ b/prototype/src/main/resources/static/css/ecom.css
@@ -188,6 +188,10 @@ a:visited {
color: inherit;
}
+a.section {
+ text-decoration: none;
+}
+
p {
padding-top: var(--u0);
padding-bottom: var(--u0);
diff --git a/prototype/src/main/resources/templates/shop/index.html b/prototype/src/main/resources/templates/shop/index.html
index e69de29..d901e14 100644
--- a/prototype/src/main/resources/templates/shop/index.html
+++ b/prototype/src/main/resources/templates/shop/index.html
@@ -0,0 +1,98 @@
+<!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>Datenschutzerklärung</title>
+ <link rel="stylesheet" th:href="@{/css/ecom.css}" />
+</head>
+
+<body>
+ <nav th:replace="/fragments/header :: header">Header</nav>
+ <main>
+ <div class='hero'>
+ <div class='content-width'>
+ <h1>Angebote</h1>
+ <div class='grid m base shadow'>
+ <section> <a th:href="@{/shop/articles/1234}" class="section">
+
+ <img th:src="@{/img/product-1.jpg}" />
+ <h2>Lorem Ipsum</h2>
+ <p class='price'> 25.14 €</p>
+ <p>
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+ </p>
+ </a>
+ </section>
+ <section> <a th:href="@{/shop/articles/1234}" class="section">
+
+ <img th:src="@{/img/product-2.jpg}" />
+ <h2>Lorem Ipsum</h2>
+ <p class='price'> 10.14 €</p>
+ <p>
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+ </p>
+ </a>
+ </section>
+ <section> <a th:href="@{/shop/articles/1234}" class="section">
+
+ <img th:src="@{/img/product-3.jpg}" />
+ <h2>Lorem Ipsum</h2>
+ <p class='price'> 25.14 €</p>
+ <p>
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+ </p>
+ </a>
+ </section>
+ <section> <a th:href="@{/shop/articles/1234}" class="section">
+
+ <img th:src="@{/img/product-4.jpg}" />
+ <h2>Lorem Ipsum</h2>
+ <p class='price'> 10.14 €</p>
+ <p>
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+ </p>
+ </a>
+ </section>
+ <section>
+ <a th:href="@{/shop/articles/1234}" class="section">
+ <img th:src="@{/img/product-5.jpg}" />
+ <h2>Lorem Ipsum</h2>
+ <p class='price'> 44.14 €</p>
+ <p>
+ Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
+ </p>
+ </a>
+ </section>
+ <section class="spacer"></section>
+ <section class="spacer"></section>
+ <section class="spacer"></section>
+ <section class="spacer"></section>
+ </div>
+ </div>
+ <div class="vertical-spacer s"></div>
+ </div>
+ <div class=''>
+ <div class='content-width'>
+ <h1>Personalisierte Empfehlungen</h1>
+ <div class="grid l">
+ <img th:src="@{/img/undraw_successful_purchase_secondary.svg}" />
+ <div>
+ <h2>Werde jetzt Kunde</h2>
+ <p> Jetzt Kunde werden und viele Vorteile sichern,
+ wie z.B. personalisierte Empfehlungen. </p>
+ <p>
+ <a class="button" th:href="@{/register}">Registieren</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="vertical-spacer s"></div>
+ </div>
+ </main>
+ <footer th:replace="/fragments/footer :: footer"></footer>
+</body>
+
+</html>