redesign of the landing page, see #20

src/main/resources/static/css/style_static.css

@@ -147,4 +147,14 @@ h4 {
 
 h5 {
 	font-size: 14px;
-}
+}
+
+ .preview-content {
+  min-height: 200px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.accordion-collapse:not(.show) {
+  height: 200px !important;
+}

src/main/resources/templates/allgemeines.html

@@ -9,28 +9,50 @@
 		<div class="container">
 			<div class="row">
 				<div class="col">
-					<div class="blocktext">
-					  <h1 class="titlefont">Statt Langeweile zu Hause – Action auf einer Freizeit!</h1>
-					  <p>
-					    Ferien sind cool! Das steht auf jeden Fall fest. Doch wenn die Freunde alle im Urlaub sind und du alleine zu Hause bleibst,
-					    kommt schnell Langeweile auf. <strong>Warum also nicht einfach die Ferien mit vielen anderen Gleichaltrigen
-					      verbringen und jede Menge Spaß erleben?</strong> Genau dafür stehen <strong>Onkel Werner Freizeiten!</strong>
-					  </p>
-					  <h2 class="headlinefont">Das sind Onkel Werner Freizeiten</h2>
-					  <p>
-					    <strong>Onkel Werner Freizeiten sind immer ein Erlebnis der besonderen Art.</strong> Je nach Freizeit verbringst du entweder
-					    ein verlängertes Wochenende, eine Woche oder sogar zwei Wochen zusammen mit einer Hand voll Mitarbeitern und jeder Menge
-					    Kindern oder Teenies.
-					  </p>
-					  <p>Im Freizeitheim angekommen, wirst du erst einmal ordentlich begrüßt und beziehst zusammen mit deinen (neuen) Freunden
-					    dein Zimmer. Und dann kann die Freizeit auch schon starten. Hier erlebst du jede Menge Spaß, knüpfst neue Freundschaften,
-					    bekommst ein tolles Programm geboten, hörst spannende Geschichten aus der Bibel und noch viel mehr.</p>
-					  <p>
-					    <strong>Preise, Termine und weitere Infos findest du in unserem Buchungsportal.</strong>
-					  </p>
-					  <p>
-					    <a th:href="@{/camplist}">Jetzt Freizeiten entdecken</a>
-					  </p>
+					<h2 class="headlinefont center">Willkommen bei den</h2>
+					<h1 class="titlefont center">MITTELPUNKT-FREIZEITEN</h1>
+			  </div>
+			</div>
+			  <div class="accordion-item">
+			  	<div class="accordion-header d-flex justify-content-between align-items-start">
+			  	  <h1 class="accordion-button collapsed titlefont" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText">
+              Was sind für Freizeiten sind das?
+            </h1>
+            <a class="btn btn-lg btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText">
+              <i class="fas fa-angle-down"></i>
+            </a>
+			  	</div>
+			  	<div id="collapseText" class="accordion-collapse collapse">
+					  <div class="accordion-body preview-content">
+					  	<div class="blocktext">
+							  <h2 class="headlinefont">Keine Langeweile - Ferienaction!</h2>
+							  <p>
+							    Statt Langeweile zu Hause erwarten dich spannende Tage mit neuen Freunden, Spaß und aufregenden Erlebnissen. Nutze deine Ferien, um nicht nur Abenteuer zu erleben,
+							    sondern auch wertvolle Zeit mit anderen zu verbringen.
+							  </p>
+							  <h2 class="headlinefont">So starten wir...</h2>
+							  <p>
+							    Im Freizeitheim angekommen, wirst du erst einmal ordentlich von motivierten Mitarbeitern und jeder Menge Kindern oder Teenies in deinem ALter begrüßt. Danach beziehst
+							    du zusammen mit deinen (neuen) Freunden dein Zimmer. Und dann kann die Freizeit auch schon starten.
+							  </p>
+							  <h2 class="headlinefont">Das machen wir...</h2>
+							  <p>
+							    Hier erlebst du jede Menge Spaß bei gemeinsamen Spielen und Aktivitäten, knüpfst neue Freundschaften, bekommst ein tolles Tagesprogramm geboten, hörst spannende
+							    Geschichten aus der Bibel und noch einiges mehr. Schau dir mal unten die einzelnen Freizeiten an, zu jeder gibt es eine kleine Beschreibung, was dich erwartet.
+							    Du kannst auch bei den Berichten lesen, wie vergangene Freizeiten waren.
+							  </p>
+							  <p>
+							    <a th:href="@{/camplist}">Jetzt Freizeiten entdecken</a>
+							  </p>
+						  </div>
+						</div>
+				  </div>
+        </div>
+
+				<hr />
+        <h1>TODO: umziehen nach Anmeldung</h1>
+        <div class="row">
+					<div class="col">
 					  <h2 class="headlinefont">Kinderfreizeiten in Olfen</h2>
 					  <p>Jede Menge Kinder in deinem Alter, viele coole Spiele, Sommerrodeln und spannende biblische Geschichten…</p>
 					  <p>…das und noch viel mehr erwartet dich auf den Kinderfreizeiten in Olfen in den Oster- und Herbstferien. Olfen ist ein
@@ -143,7 +165,6 @@
 					</div>
 				</div>
 			</div>
-		</div>
 	</th:block>
 </body>
 </html>

src/main/resources/templates/template.html

@@ -21,7 +21,7 @@
 </head>
 <body>
 	<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light headerlayout navbar-background">
-		<span class="navbar-brand"><a th:href="@{/}"><span class="logo"></span></a></span>
+		<span class="navbar-brand"><a th:href="@{/allgemeines}"><span class="logo"></span></a></span>
 		<button class="navbar-toggler" style="margin-right: 40px" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
 			aria-expanded="false">
 			<span class="navbar-toggler-icon"></span>
@@ -29,15 +29,7 @@
 		<div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-right: 20px">
 			<ul class="navbar-nav mb-2 mb-lg-0">
 				<li class="nav-item"><a th:href="@{/ical}" class="btn btn-secondary btn-icon-silent" target="_blank" title="Freizeitdaten als ical herunterladen"><i class="far fa-calendar-alt"></i></a></li>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/allgemeines}">Allgemeines</a></li>
-				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/camplist}">Freizeiten</a></li>
-				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle btn-icon-silent menufont" href="#" id="navbarDropdownClub" role="button" data-bs-toggle="dropdown" aria-expannded="false">Verein</a>
-				  <ul class="dropdown-menu visibledropdown" aria-labelledby="navbarDropdownClub">
-    				<li><a class="dropdown-item menufont" th:href="@{/nachruf}">Onkel Werner</a></li>
-  				  <li><a class="dropdown-item menufont" th:href="@{/verein}">Vereinsbeschreibung</a></li>
-  				  <li><a class="dropdown-item menufont" th:href="@{/vereinsmitglieder}">Vereinsmitglieder</a></li>
-				  </ul>
-				</li>
+				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/camplist}">Anmeldung</a></li>
 				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle btn-icon-silent menufont" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Berichte</a>
 					<ul class="dropdown-menu visibledropdown" aria-labelledby="navbarDropdown">
 						<li><a class="dropdown-item menufont" th:href="@{/reports/olfenostern2023}">Osterfreizeit 2023 in Olfen</a></li>
@@ -68,7 +60,15 @@
 						<li><a class="dropdown-item menufont" th:href="@{/reports/schweiz2014}">Schweiz 2014</a></li>
 						<li><hr class="dropdown-divider"></li>
 						<li><a class="dropdown-item menufont" th:href="@{/reports/history}">Über 30 Jahre Onkel Werner Freizeiten – Ein Rückblick ...</a></li>
-					</ul></li>
+					</ul>
+				</li>
+				<li class="nav-item dropdown"><a class="nav-link dropdown-toggle btn-icon-silent menufont" href="#" id="navbarDropdownClub" role="button" data-bs-toggle="dropdown" aria-expannded="false">Verein</a>
+				  <ul class="dropdown-menu visibledropdown" aria-labelledby="navbarDropdownClub">
+    				<li><a class="dropdown-item menufont" th:href="@{/nachruf}">Onkel Werner</a></li>
+  				  <li><a class="dropdown-item menufont" th:href="@{/verein}">Vereinsbeschreibung</a></li>
+  				  <li><a class="dropdown-item menufont" th:href="@{/vereinsmitglieder}">Vereinsmitglieder</a></li>
+				  </ul>
+				</li>
 				<li class="nav-item"><a class="btn btn-icon-silent menufont" th:href="@{/kontakt}">Kontakt</a></li>
 			</ul>
 			<ul class="navbar-nav mb-2 mb-lg-0" sec:authorize="hasRole('business')">