Add home hero with intro and buttons from the body, next-event card and page tiles

Elternbeirat.Web/Features/Home/Home.razor

@@ -1,12 +1,78 @@
 @page "/"
+@using Elternbeirat.Web.Features.Events
 
 <PageTitle>Elternbeirat der IGMH</PageTitle>
 
-<h1>Elternbeirat der IGMH</h1>
+@* The hero spans the full window width (see Home.razor.css). Its text is the "home"
+   page's body, taken apart by HomeIntro; the card beside it shows the next event. *@
+<section class="hero">
+    <div class="hero-inner">
+        <div class="hero-text">
+            <h1>@_intro.Title</h1>
 
-<p class="intro">
-    Willkommen beim Elternbeirat der IGMH. Hier finden Sie aktuelle Informationen,
-    Antworten auf häufige Fragen und Unterlagen rund um die Elternarbeit.
-</p>
+            @if (_intro.IntroHtml.Length > 0)
+            {
+                <div class="hero-intro">@((MarkupString)_intro.IntroHtml)</div>
+            }
 
-<PageEmbeds Embed="_embed" />
+            @if (_intro.Links.Count > 0)
+            {
+                <p class="hero-actions">
+                    @for (var i = 0; i < _intro.Links.Count; i++)
+                    {
+                        var link = _intro.Links[i];
+                        <a class="btn @(i == 0 ? "btn-primary" : "btn-secondary")" href="@link.Href">@link.Text</a>
+                    }
+                </p>
+            }
+        </div>
+
+        @if (_nextEvent is not null)
+        {
+            @* The calendar sheet repeats the date as decoration, so it is hidden from
+               screen readers; <EventDate> carries the full date for everyone. *@
+            <a class="next-event" href="/events">
+                <span class="next-event-label">Nächster Termin</span>
+                <span class="next-event-row">
+                    <span class="calendar-sheet" aria-hidden="true">
+                        <span class="calendar-month">@NextEventMonth</span>
+                        <span class="calendar-day">@NextEventDay</span>
+                    </span>
+                    <span class="next-event-details">
+                        <span class="next-event-title">@_nextEvent.Title</span>
+                        <EventDate Value="_nextEvent" />
+                        @if (!string.IsNullOrWhiteSpace(_nextEvent.Location))
+                        {
+                            <span class="next-event-location"><Icon Name="map-pin" Size="16" /> @_nextEvent.Location</span>
+                        }
+                    </span>
+                </span>
+            </a>
+        }
+    </div>
+</section>
+
+@if (_tiles.Count > 0)
+{
+    <nav class="home-tiles" aria-label="Bereiche der Website">
+        <ul>
+            @foreach (var tile in _tiles)
+            {
+                <li>
+                    <a class="tile-link" href="@tile.Href">
+                        <span class="tile-icon"><Icon Name="@tile.Icon" Size="24" /></span>
+                        <span class="tile-title">@tile.Title</span>
+                        @if (tile.Description.Length > 0)
+                        {
+                            <span class="tile-text">@tile.Description</span>
+                        }
+                    </a>
+                </li>
+            }
+        </ul>
+    </nav>
+}
+
+<div class="home-embeds">
+    <PageEmbeds Embed="_embed" />
+</div>