Improve the layout of the home page

layouts/index.html

@@ -1,12 +1,41 @@
 {{ define "main" }}
-  <div>
-    {{ .Content }}
-  </div>
-  <div class="cluster s1">
-    {{ range (where .Site.Pages "Section" "reviews") }}
-       {{ range .Pages }}
-          {{- .Render "summary" -}}
-       {{ end }}
-    {{ end }}
+  <div class="core-content">
+    <section class="home-page-header">
+      <header class="stack s1">
+        <h1 class="subtitle">Movie Recommendations</h1>
+        {{- .Content -}}
+      </header>
+      <div class="search-bar">
+        {{ partial "magnifying_glass.html" }}
+        <input list="movies" name="movie-search" id="movie-search" />
+        <datalist id="movies">
+          {{ range (where .Site.Pages "Section" "reviews") }}
+            {{ range .Pages }}
+              <option value="{{.Title}}" data-value="{{.RelPermalink}}">
+                {{- .Params.summary -}}
+              </option>
+            {{ end }}
+          {{ end }}
+        </datalist>
+        <script src="{{.Site.BaseURL}}search.js" async defer></script>
+      </div>
+      <div class="cluster justify:center s3">
+        <a class="button" href="{{.Site.BaseURL}}genres">Genres</a>
+        <a class="button" href="{{.Site.BaseURL}}a-z">A-Z</a>
+        <a class="button" href="{{.Site.BaseURL}}favorites">Favorites</a>
+      </div>
+    </section>
+    <section class="stack s1">
+      <header>
+        <h2>Recent</h2>
+      </header>
+      <div class="cards">
+        {{ range (where .Site.Pages "Section" "reviews") }}
+           {{ range .Pages }}
+              {{- .Render "summary" -}}
+           {{ end }}
+        {{ end }}
+      </div>
+    </section>
   </div>
 {{end}}

layouts/partials/head.html

@@ -5,6 +5,7 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎥</text></svg>">
   <link rel="stylesheet" href="/film/style.css">
   <link rel="stylesheet" href="/film/card.css">
+  <link rel="stylesheet" href="/film/home.css">
   <link rel="stylesheet" href="/film/review.css">
   <link rel="stylesheet" href="/film/quick_look.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">

layouts/partials/magnifying_glass.html

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M20.9999 21L16.6499 16.65" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>