diff --git a/src/App.vue b/src/App.vue
index 2979bac6d67dcc52c489a3e4b88483b8cf02adca..a13603672ac0fdc16754f0e54faa222a1eec8028 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
<script lang="ts" setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, inject, onMounted, ref } from "vue";
import { Expand } from "@element-plus/icons-vue";
import { useToggle } from "@vueuse/core";
import { RouterView } from "vue-router";
@@ -28,11 +28,16 @@ const isFullScreen = computed(() => {
if (router.currentRoute.value.meta?.fullScreen === undefined) return true;
return router.currentRoute.value.meta?.fullScreen;
});
+
+const emitter = inject("emitter");
+function onScroll(event: Event) {
+ emitter.emit("scroll", event);
+}
</script>
<template>
<el-container style="height: 100vh; display: flex">
- <el-header>
+ <el-header style="padding: 0">
<TopNavBar />
</el-header>
<div v-if="collapsed" style="flex-shrink: 0; height: fit-content">
@@ -54,7 +59,7 @@ const isFullScreen = computed(() => {
<el-drawer v-else-if="collapsed" v-model="drawer" direction="ltr" size="306px">
<SideNavBar @select="drawerToggle()" />
</el-drawer>
- <el-scrollbar style="width: 100%">
+ <el-scrollbar style="width: 100%" @scroll="onScroll($event)">
<el-main>
<RouterView id="main-view" />
</el-main>
@@ -64,10 +69,6 @@ const isFullScreen = computed(() => {
</template>
<style scoped>
-.sidenav {
- height: 100%;
-}
-
/* Prevent scrolling on anything but router view */
* {
overflow: hidden;
diff --git a/src/assets/blob-background.svg b/src/assets/blob-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0354b354b9ca52fe61aac35eee1a5e7534850b28
--- /dev/null
+++ b/src/assets/blob-background.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g><g transform="translate(301 527)"><path d="M94.3 -27.5C107.4 9.5 92.9 58.7 59.7 82.9C26.6 107.2 -25.1 106.5 -57.7 82.2C-90.3 57.8 -103.8 9.9 -91 -26.9C-78.2 -63.6 -39.1 -89.1 0.8 -89.4C40.6 -89.6 81.3 -64.6 94.3 -27.5Z" stroke="#186332" fill="none" stroke-width="20"></path></g><g transform="translate(639 197)"><path d="M68.2 -21.7C76.2 2.5 62.1 34.3 38.3 51.4C14.4 68.4 -19.3 70.7 -41.2 55.2C-63 39.7 -73 6.3 -64.2 -19C-55.3 -44.3 -27.7 -61.5 1.2 -61.9C30.1 -62.3 60.2 -45.8 68.2 -21.7Z" stroke="#186332" fill="none" stroke-width="20"></path></g><g transform="translate(754 476)"><path d="M68.9 -20.9C77.4 3.8 64.2 36.9 41 53C17.8 69 -15.4 68 -37.7 51.8C-60.1 35.6 -71.6 4.3 -63.5 -19.8C-55.4 -43.9 -27.7 -60.9 1.3 -61.3C30.2 -61.7 60.4 -45.6 68.9 -20.9Z" stroke="#186332" fill="none" stroke-width="20"></path></g></g></svg>
\ No newline at end of file
diff --git a/src/assets/landing-page.svg b/src/assets/landing-page.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5c03c898cee60b0dfcca263accb8da36134e7e65
--- /dev/null
+++ b/src/assets/landing-page.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="900" height="600" fill="#ffffff"></rect><path d="M0 232L18.8 237.8C37.7 243.7 75.3 255.3 112.8 245.2C150.3 235 187.7 203 225.2 189.3C262.7 175.7 300.3 180.3 337.8 193.7C375.3 207 412.7 229 450.2 226.7C487.7 224.3 525.3 197.7 562.8 186C600.3 174.3 637.7 177.7 675.2 179.2C712.7 180.7 750.3 180.3 787.8 183.2C825.3 186 862.7 192 881.3 195L900 198L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#3fab65"></path><path d="M0 202L18.8 202.5C37.7 203 75.3 204 112.8 191.7C150.3 179.3 187.7 153.7 225.2 154.7C262.7 155.7 300.3 183.3 337.8 184.5C375.3 185.7 412.7 160.3 450.2 148.5C487.7 136.7 525.3 138.3 562.8 155.2C600.3 172 637.7 204 675.2 209.7C712.7 215.3 750.3 194.7 787.8 190.7C825.3 186.7 862.7 199.3 881.3 205.7L900 212L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#399e5c"></path><path d="M0 176L18.8 170.7C37.7 165.3 75.3 154.7 112.8 144C150.3 133.3 187.7 122.7 225.2 123.5C262.7 124.3 300.3 136.7 337.8 143C375.3 149.3 412.7 149.7 450.2 145.3C487.7 141 525.3 132 562.8 136.7C600.3 141.3 637.7 159.7 675.2 167C712.7 174.3 750.3 170.7 787.8 163.3C825.3 156 862.7 145 881.3 139.5L900 134L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#329253"></path><path d="M0 130L18.8 129.3C37.7 128.7 75.3 127.3 112.8 126.7C150.3 126 187.7 126 225.2 125.3C262.7 124.7 300.3 123.3 337.8 115.8C375.3 108.3 412.7 94.7 450.2 93.7C487.7 92.7 525.3 104.3 562.8 107.5C600.3 110.7 637.7 105.3 675.2 110.5C712.7 115.7 750.3 131.3 787.8 141C825.3 150.7 862.7 154.3 881.3 156.2L900 158L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#2c864b"></path><path d="M0 104L18.8 103.2C37.7 102.3 75.3 100.7 112.8 94.2C150.3 87.7 187.7 76.3 225.2 77.5C262.7 78.7 300.3 92.3 337.8 96.3C375.3 100.3 412.7 94.7 450.2 87.7C487.7 80.7 525.3 72.3 562.8 76.7C600.3 81 637.7 98 675.2 109.2C712.7 120.3 750.3 125.7 787.8 120.8C825.3 116 862.7 101 881.3 93.5L900 86L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#257a42"></path><path d="M0 74L18.8 75.7C37.7 77.3 75.3 80.7 112.8 75.2C150.3 69.7 187.7 55.3 225.2 55.8C262.7 56.3 300.3 71.7 337.8 71C375.3 70.3 412.7 53.7 450.2 49.8C487.7 46 525.3 55 562.8 62.7C600.3 70.3 637.7 76.7 675.2 81.2C712.7 85.7 750.3 88.3 787.8 79.8C825.3 71.3 862.7 51.7 881.3 41.8L900 32L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#1f6e3a"></path><path d="M0 26L18.8 24.2C37.7 22.3 75.3 18.7 112.8 20.5C150.3 22.3 187.7 29.7 225.2 34.2C262.7 38.7 300.3 40.3 337.8 41.8C375.3 43.3 412.7 44.7 450.2 41.2C487.7 37.7 525.3 29.3 562.8 25.3C600.3 21.3 637.7 21.7 675.2 21.7C712.7 21.7 750.3 21.3 787.8 20.8C825.3 20.3 862.7 19.7 881.3 19.3L900 19L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#186332"></path></svg>
\ No newline at end of file
diff --git a/src/assets/layered-waves-haikei.svg b/src/assets/layered-waves-haikei.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5643dd82bdb297926682025cc867a1aaad68d2a7
--- /dev/null
+++ b/src/assets/layered-waves-haikei.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 334L18.8 347.2C37.7 360.3 75.3 386.7 112.8 385.3C150.3 384 187.7 355 225.2 338.3C262.7 321.7 300.3 317.3 337.8 301.3C375.3 285.3 412.7 257.7 450.2 256C487.7 254.3 525.3 278.7 562.8 284C600.3 289.3 637.7 275.7 675.2 266.5C712.7 257.3 750.3 252.7 787.8 263.3C825.3 274 862.7 300 881.3 313L900 326L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#3ec26c"></path><path d="M0 186L18.8 201C37.7 216 75.3 246 112.8 260.7C150.3 275.3 187.7 274.7 225.2 260.2C262.7 245.7 300.3 217.3 337.8 203.5C375.3 189.7 412.7 190.3 450.2 194.3C487.7 198.3 525.3 205.7 562.8 212.3C600.3 219 637.7 225 675.2 221.2C712.7 217.3 750.3 203.7 787.8 213.8C825.3 224 862.7 258 881.3 275L900 292L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#36ae60"></path><path d="M0 149L18.8 170.5C37.7 192 75.3 235 112.8 253.5C150.3 272 187.7 266 225.2 258.3C262.7 250.7 300.3 241.3 337.8 231.7C375.3 222 412.7 212 450.2 212.3C487.7 212.7 525.3 223.3 562.8 224.3C600.3 225.3 637.7 216.7 675.2 213.7C712.7 210.7 750.3 213.3 787.8 224.7C825.3 236 862.7 256 881.3 266L900 276L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#2f9b54"></path><path d="M0 240L18.8 222.3C37.7 204.7 75.3 169.3 112.8 151.5C150.3 133.7 187.7 133.3 225.2 150.3C262.7 167.3 300.3 201.7 337.8 215C375.3 228.3 412.7 220.7 450.2 207.2C487.7 193.7 525.3 174.3 562.8 175.3C600.3 176.3 637.7 197.7 675.2 208.5C712.7 219.3 750.3 219.7 787.8 201.8C825.3 184 862.7 148 881.3 130L900 112L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#278848"></path><path d="M0 150L18.8 149.5C37.7 149 75.3 148 112.8 150.8C150.3 153.7 187.7 160.3 225.2 165.2C262.7 170 300.3 173 337.8 161.5C375.3 150 412.7 124 450.2 118.7C487.7 113.3 525.3 128.7 562.8 139C600.3 149.3 637.7 154.7 675.2 147C712.7 139.3 750.3 118.7 787.8 120.3C825.3 122 862.7 146 881.3 158L900 170L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#1f753d"></path><path d="M0 84L18.8 88.7C37.7 93.3 75.3 102.7 112.8 105.7C150.3 108.7 187.7 105.3 225.2 92.5C262.7 79.7 300.3 57.3 337.8 45.7C375.3 34 412.7 33 450.2 42.3C487.7 51.7 525.3 71.3 562.8 78.5C600.3 85.7 637.7 80.3 675.2 69.5C712.7 58.7 750.3 42.3 787.8 47.3C825.3 52.3 862.7 78.7 881.3 91.8L900 105L900 0L881.3 0C862.7 0 825.3 0 787.8 0C750.3 0 712.7 0 675.2 0C637.7 0 600.3 0 562.8 0C525.3 0 487.7 0 450.2 0C412.7 0 375.3 0 337.8 0C300.3 0 262.7 0 225.2 0C187.7 0 150.3 0 112.8 0C75.3 0 37.7 0 18.8 0L0 0Z" fill="#186332"></path></svg>
\ No newline at end of file
diff --git a/src/assets/logo-no-background.svg b/src/assets/logo-no-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d2734d6e43b0e621a60531dbbfb1bc776bd6acb9
--- /dev/null
+++ b/src/assets/logo-no-background.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1000" height="297" viewBox="0 0 1000 297"><g transform="matrix(1,0,0,1,-0.6060594461890219,-0.32583080341345294)"><svg viewBox="0 0 396 118" data-background-color="#ffffff" preserveAspectRatio="xMidYMid meet" height="297" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="tight-bounds" transform="matrix(1,0,0,1,0.23999954069086016,0.12945466263565208)"><svg viewBox="0 0 395.52 117.74100858165416" height="117.74100858165416" width="395.52"><g><svg viewBox="0 0 614.1723055697917 182.83087252403712" height="117.74100858165416" width="395.52"><g transform="matrix(1,0,0,1,218.6523055697917,53.48121905468429)"><svg viewBox="0 0 395.52 75.86843441466854" height="75.86843441466854" width="395.52"><g id="textblocktransform"><svg viewBox="0 0 395.52 75.86843441466854" height="75.86843441466854" width="395.52" id="textblock"><g><svg viewBox="0 0 395.52 75.86843441466854" height="75.86843441466854" width="395.52"><g transform="matrix(1,0,0,1,0,0)"><svg width="395.52" viewBox="3.8299999237060547 -36.040000915527344 190.38999938964844 36.53000259399414" height="75.86843441466854" data-palette-color="#096a2e"><path d="M20.31-19.53L20.31-15.7 8.3-15.7 8.3 0 3.83 0 3.83-35.55 22.34-35.55 22.34-31.69 8.3-31.69 8.3-19.53 20.31-19.53ZM44.92 0L38.6-14.38 32.35-14.38 32.35 0 27.85 0 27.85-35.55 37.81-35.55Q43.04-35.55 45.73-32.82 48.41-30.1 48.41-24.85L48.41-24.85Q48.41-21.56 46.96-19.1 45.51-16.65 42.84-15.41L42.84-15.41 49.73-0.29 49.73 0 44.92 0ZM32.35-31.69L32.35-18.21 37.77-18.21Q40.57-18.21 42.25-20.02 43.92-21.83 43.92-24.85L43.92-24.85Q43.92-31.69 37.72-31.69L37.72-31.69 32.35-31.69ZM71.43-20.26L71.43-16.43 58.86-16.43 58.86-3.83 73.51-3.83 73.51 0 54.39 0 54.39-35.55 73.26-35.55 73.26-31.69 58.86-31.69 58.86-20.26 71.43-20.26ZM94.74-8.98L94.74-8.98Q94.74-11.65 93.3-13.06 91.86-14.48 88.1-15.82 84.34-17.16 82.35-18.64 80.36-20.12 79.37-22.01 78.39-23.9 78.39-26.34L78.39-26.34Q78.39-30.57 81.21-33.3 84.03-36.04 88.59-36.04L88.59-36.04Q91.72-36.04 94.16-34.63 96.6-33.23 97.92-30.74 99.24-28.25 99.24-25.27L99.24-25.27 94.74-25.27Q94.74-28.56 93.16-30.37 91.57-32.18 88.59-32.18L88.59-32.18Q85.88-32.18 84.39-30.66 82.9-29.15 82.9-26.42L82.9-26.42Q82.9-24.17 84.51-22.66 86.13-21.14 89.49-19.95L89.49-19.95Q94.74-18.21 97-15.67 99.26-13.13 99.26-9.03L99.26-9.03Q99.26-4.71 96.45-2.11 93.64 0.49 88.81 0.49L88.81 0.49Q85.71 0.49 83.09-0.87 80.46-2.22 78.96-4.68 77.46-7.13 77.46-10.3L77.46-10.3 81.95-10.3Q81.95-7.01 83.79-5.18 85.64-3.34 88.81-3.34L88.81-3.34Q91.76-3.34 93.25-4.86 94.74-6.37 94.74-8.98ZM128.38-35.55L128.38 0 123.89 0 123.89-16.43 109.58-16.43 109.58 0 105.12 0 105.12-35.55 109.58-35.55 109.58-20.26 123.89-20.26 123.89-35.55 128.38-35.55ZM140.78-35.55L140.78 0 136.32 0 136.32-35.55 140.78-35.55ZM165.1-19.53L165.1-15.7 153.09-15.7 153.09 0 148.62 0 148.62-35.55 167.12-35.55 167.12-31.69 153.09-31.69 153.09-19.53 165.1-19.53ZM174.62-35.55L181.89-17.7 189.17-35.55 194.22-35.55 184.11-13.26 184.11 0 179.65 0 179.65-13.26 169.54-35.55 174.62-35.55Z" opacity="1" transform="matrix(1,0,0,1,0,0)" fill="#096a2e" class="undefined-text-0" data-fill-palette-color="primary" id="text-0"></path></svg></g></svg></g></svg></g></svg></g><g><svg viewBox="0 0 182.83087252403712 182.83087252403712" height="182.83087252403712" width="182.83087252403712"><g><svg></svg></g><g id="icon-0"><svg viewBox="0 0 182.83087252403712 182.83087252403712" height="182.83087252403712" width="182.83087252403712"><g><path d="M0 91.415c0-50.487 40.928-91.415 91.415-91.415 50.487 0 91.415 40.928 91.416 91.415 0 50.487-40.928 91.415-91.416 91.416-50.487 0-91.415-40.928-91.415-91.416zM91.415 175.989c46.709 0 84.574-37.865 84.574-84.574 0-46.709-37.865-84.574-84.574-84.573-46.709 0-84.574 37.865-84.573 84.573 0 46.709 37.865 84.574 84.573 84.574z" data-fill-palette-color="accent" fill="#096a2e" stroke="transparent"></path></g><g transform="matrix(1,0,0,1,56.29990697186383,40.254864425279465)"><svg viewBox="0 0 70.23105858030947 102.32114367347819" height="102.32114367347819" width="70.23105858030947"><g><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="15.680999755859375 0 68.63746643066406 99.99940490722656" enable-background="new 0 0 100 100" xml:space="preserve" height="102.32114367347819" width="70.23105858030947" class="icon-s-0" data-fill-palette-color="accent" id="s-0"><path fill="#096a2e" d="M83.973 95.67L71.756 73.631c11.331-8.42 15.443-23.96 9.041-37.115C73.559 21.645 45.798 5.001 15.681 0c8.931 24.943 4.033 47.853 11.27 62.723 7.236 14.868 25.156 21.057 40.025 13.819 0.141-0.067 0.272-0.144 0.412-0.213l11.389 22.11c0.764 1.436 2.549 1.979 3.982 1.213C84.193 98.889 84.736 97.104 83.973 95.67z" data-fill-palette-color="accent"></path></svg></g></svg></g></svg></g></svg></g></svg></g><defs></defs></svg><rect width="395.52" height="117.74100858165416" fill="none" stroke="none" visibility="hidden"></rect></g></svg></g></svg>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index 10b6e29420a8fd187b9c841f8846b813ac8d4500..c38307a4a9546166a32df87a9b3fa5dd02b1ddf2 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -3,10 +3,11 @@
body {
margin: 0;
padding: 0;
+ --el-color-primary: lightseagreen;
}
main {
- padding: 2rem 3rem !important;
+ padding: 2rem 3rem;
}
#app {
@@ -24,6 +25,6 @@ main {
@media only screen and (max-width: 768px) {
main {
- padding: 1rem !important;
+ padding: 1rem;
}
}
diff --git a/src/assets/recipe.png b/src/assets/recipe.png
new file mode 100644
index 0000000000000000000000000000000000000000..39890b25a1130a72d257a57bad23b6305414cbb7
Binary files /dev/null and b/src/assets/recipe.png differ
diff --git a/src/assets/snap.png b/src/assets/snap.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff9fb41e13ee94df53579ad46fc3b54b99728445
Binary files /dev/null and b/src/assets/snap.png differ
diff --git a/src/assets/steps-background.svg b/src/assets/steps-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8853889e761c58deb99076c1bc6dab6f53b9e540
--- /dev/null
+++ b/src/assets/steps-background.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M214 0L173 0L173 86L210 86L210 171L171 171L171 257L142 257L142 343L215 343L215 429L141 429L141 514L151 514L151 600L0 600L0 514L0 514L0 429L0 429L0 343L0 343L0 257L0 257L0 171L0 171L0 86L0 86L0 0L0 0Z" fill="#42b85f"></path><path d="M136 0L96 0L96 86L162 86L162 171L134 171L134 257L103 257L103 343L129 343L129 429L155 429L155 514L125 514L125 600L0 600L0 514L0 514L0 429L0 429L0 343L0 343L0 257L0 257L0 171L0 171L0 86L0 86L0 0L0 0Z" fill="#399850"></path><path d="M41 0L63 0L63 86L88 86L88 171L92 171L92 257L60 257L60 343L67 343L67 429L88 429L88 514L68 514L68 600L0 600L0 514L0 514L0 429L0 429L0 343L0 343L0 257L0 257L0 171L0 171L0 86L0 86L0 0L0 0Z" fill="#307a42"></path></svg>
\ No newline at end of file
diff --git a/src/assets/time-is-running.png b/src/assets/time-is-running.png
new file mode 100644
index 0000000000000000000000000000000000000000..21680629b931f401f0332d4ffd9f7fdb2c66f2c0
Binary files /dev/null and b/src/assets/time-is-running.png differ
diff --git a/src/assets/wave-background.svg b/src/assets/wave-background.svg
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 8dad9cf9ca11593646a2a49fb6311b4d44ee55ae..30bec259a4f24246e13568b293568d92c675d8d3 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -1,14 +1,16 @@
<template>
<nav>
<el-menu
- style="min-height: 60px"
+ style="min-height: 65px"
+ class="menu solid-menu"
:default-active="activeIndex"
:ellipsis="false"
mode="horizontal"
router
+ id="topNav"
>
<el-menu-item :index="'/inventory'" id="logo-menu-item">
- <img src="@/assets/logo-color.png" alt="logo" id="logo-img" />
+ <img src="@/assets/logo-no-background.svg" alt="logo" id="logo-img" />
</el-menu-item>
<div class="flex-grow" />
<el-menu-item v-if="sessionStore.isAuthenticated" index="/profile">
@@ -27,9 +29,10 @@
</nav>
</template>
<script lang="ts" setup>
-import { ref } from "vue";
+import { inject, onMounted, ref } from "vue";
import { TurnOff, User } from "@element-plus/icons-vue";
import { useSessionStore } from "@/stores/session";
+import router from "@/router";
const activeIndex = ref("1");
@@ -45,6 +48,21 @@ function logOut() {
flex-grow: 1;
}
+.menu {
+ transition: all 0.3s ease;
+ background-color: #186332;
+ margin: 0;
+}
+
+.solid-menu {
+ background-color: #fff;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.invert {
+ filter: invert(1) contrast(50%) saturate(0%) brightness(100%);
+}
+
.menu-item-button {
margin: auto 1rem;
align-content: center;
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 384cb4165da340fe4fc7b0c31e13ce3fe89ef525..77a2acaa4260f695df11fbeb088c62d6e9390777 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,21 +1,217 @@
<template>
- <div class="home-view">
- <h1>Freshify</h1>
- <h3>Handle med formål - reduser matsvinnet ditt</h3>
- <el-button type="primary" size="large" @click="router.push('/login')" round>Logg inn</el-button>
- <el-link type="primary" @click="router.push({ name: 'register' })">eller registrer deg</el-link>
+ <div class="container">
+ <el-row class="section wrapper">
+ <el-col :span="24" :sm="12">
+ <h1 class="contrast-text fade-in-text">Freshify</h1>
+ <h3 class="contrast-text fade-in-text">
+ Handle smartere, ikke hardere - vi håndterer datoen for deg
+ </h3>
+ <el-button
+ class="contrast-text animate-buttons contrast-bg"
+ type="primary"
+ size="large"
+ @click="router.push('/login')"
+ round
+ >Logg inn
+ </el-button>
+ <el-link
+ class="animate-buttons contrast-text"
+ type="primary"
+ @click="router.push({ name: 'register' })"
+ style="margin-left: 1rem"
+ >eller registrer deg
+ </el-link>
+ </el-col>
+ <el-col :span="24" :sm="12" class="col flex">
+ <div class="spacer"></div>
+ <img
+ src="src/assets/logo-no-background.svg"
+ style="width: 100%; padding-bottom: 4rem; max-width: 600px"
+ class="fade-in-text"
+ />
+ </el-col>
+ </el-row>
+ <el-row class="section wrapper-2">
+ <el-col :span="24" :sm="12" class="flex">
+ <h1>Freshify er lett å bruke</h1>
+ <h3>- akkurat som en handleliste</h3>
+ <div class="spacer"></div>
+ <h3>
+ Varene du har handlet havner i oversikt - og vi holder styr over de som du har hatt lengst
+ </h3>
+ </el-col>
+ <el-col :span="24" :sm="12"></el-col>
+ </el-row>
+ <el-row class="section wrapper-3">
+ <el-col :span="24" :sm="12" class="flex center">
+ <img src="src/assets/snap.png" class="img" />
+ </el-col>
+ <el-col :span="24" :sm="12" style="background-color: transparent">
+ <h1>Bruk varene med to trykk</h1>
+ <h3>Du bruker hele varer og svinner resten enkelt i oversikten</h3>
+ <div class="spacer"></div>
+ </el-col>
+ </el-row>
+ <el-row class="section wrapper-4">
+ <el-col :span="24" :sm="12">
+ <h1>Sulten?</h1>
+ <h3>Vi har gode oppskrifter som prioriterer varene du har hatt lengst.</h3>
+ <h4 style="margin-top: 1rem">Slik hjelper vi deg med å redusere matsvinnet ditt</h4>
+ <div class="spacer"></div>
+ </el-col>
+ <el-col :span="24" :sm="12" style="background-color: transparent" class="flex center">
+ <img src="src/assets/recipe.png" class="img" />
+ </el-col>
+ </el-row>
</div>
</template>
<script lang="ts" setup>
import router from "@/router";
+import { inject, onMounted, onUnmounted } from "vue";
+
+const emitter = inject("emitter");
+
+onMounted(async () => {
+ emitter.on("scroll", (event: Event) => {
+ if (event.scrollTop < 90) {
+ enableTransparentBar();
+ } else {
+ disableTransparentBar();
+ }
+ });
+ enableTransparentBar();
+
+ return;
+});
+
+onUnmounted(() => {
+ disableTransparentBar();
+ emitter.off("scroll", () => disableTransparentBar());
+});
+
+function enableTransparentBar() {
+ const topNav = document.getElementById("topNav");
+ const img = document.getElementById("logo-img");
+ if (!topNav || !img) return;
+ if (topNav.classList?.contains("solid-menu")) {
+ topNav.classList.remove("solid-menu");
+ }
+ if (!img.classList?.contains("invert")) {
+ img.classList.add("invert");
+ }
+}
+function disableTransparentBar() {
+ const topNav = document.getElementById("topNav");
+ const img = document.getElementById("logo-img");
+ if (!topNav || !img) return;
+ if (!topNav.classList?.contains("solid-menu")) {
+ topNav.classList.add("solid-menu");
+ }
+ if (img.classList?.contains("invert")) {
+ img.classList.remove("invert");
+ }
+}
</script>
-<style>
-.home-view {
+<style scoped>
+.container {
+ height: 100%;
+ width: calc(100% + 2rem);
+ margin: calc(-1.2rem - 1px);
+ padding: 0;
+}
+
+.wrapper {
+ height: 100%;
+ width: 100%;
+ background-image: url("/src/assets/layered-waves-haikei.svg");
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.flex {
display: flex;
flex-direction: column;
- align-items: center;
- justify-content: center;
+}
+
+.wrapper-2 {
+ height: 100%;
+ background-image: url("/src/assets/blob-background.svg");
+ background-color: #cffcda;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.wrapper-3 {
+ height: 100%;
+ background-color: transparent;
+ background-size: cover;
+}
+
+.wrapper-4 {
height: 100%;
- text-align: center;
+ background-color: #cffcda;
+ background-image: url("/src/assets/wave-background.svg");
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.contrast-text {
+ color: white !important;
+}
+
+.contrast-bg {
+ background-color: lightseagreen;
+}
+
+.section {
+ margin: 0;
+ padding: 5rem;
+ height: 100vh;
+}
+
+.fade-in-text {
+ font-family: Arial, serif;
+ animation: fadeIn ease 3s;
+}
+
+.img {
+ width: 100%;
+ max-width: 20rem;
+}
+
+.center {
+ justify-content: center;
+ align-items: center;
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeInDelayed {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+.animate-buttons {
+ animation: fadeInDelayed ease 1s;
+}
+
+@media only screen and (max-width: 1500px) {
+ .section {
+ padding: 1rem;
+ }
}
</style>