feat(app): recipe ideas

src/components/Recipes/Recipes.css

@@ -0,0 +1,39 @@
+.recipes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
+  gap: 16px;
+  padding-block: 32px;
+}
+
+a.recipe {
+  position: relative;
+  color: initial;
+  padding: 16px;
+  display: grid;
+  place-items: center;
+}
+
+.recipe-linkout {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--soft);
+  border-radius: 8px;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.recipe-linkout:hover {
+  opacity: 1;
+}
+
+.example {
+  display: grid;
+  grid-template-columns: 64px 64px;
+  gap: 12px;
+  place-items: center;
+}