diff --git a/index.html b/index.html
index a888544898a5059056e4c148c28b2eabf4b2d67a..39387a42927fef2354002b09708ac4f557e65175 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <link rel="icon" href="/favicon.ico">
+ <link rel="icon" href="/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Vite App</title>
+ <title>SpareSti</title>
</head>
<body>
<div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
index 8c31a945b35eb0f9a64270d9336b73d486ae2a2f..f146b6a25a5f29567e228df398a6577dbf09518f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"animejs": "^3.2.2",
"pinia": "^2.1.7",
"vue": "^3.4.21",
- "vue-router": "^4.3.0"
+ "vue-router": "^4.3.1"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
@@ -7204,9 +7204,9 @@
}
},
"node_modules/vue-router": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz",
- "integrity": "sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==",
+ "version": "4.3.1",
+ "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.1.tgz",
+ "integrity": "sha512-D0h3oyP6vp28BOvxv2hVpiqFTjTJizCf1BuMmCibc8UW0Ll/N80SWqDd/hqPMaZfzW1j+s2s+aTRyBIP9ElzOw==",
"dependencies": {
"@vue/devtools-api": "^6.5.1"
},
diff --git a/package.json b/package.json
index ed7d300c4042646a57063ab61f29e11c17589320..f15dbce510ec6273b76b8a54400060546b459926 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"animejs": "^3.2.2",
"pinia": "^2.1.7",
"vue": "^3.4.21",
- "vue-router": "^4.3.0"
+ "vue-router": "^4.3.1"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fac8de3bf283197bf71ebb8d839b12a5b34263ac
Binary files /dev/null and b/public/favicon.png differ
diff --git a/src/App.vue b/src/App.vue
index 87236c353a7556c8295152ad9d2c2353faf8fa78..ab3374760ed993907dbc31358562342c622668b8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,15 @@
<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { computed } from 'vue'
+import { RouterLink, RouterView, useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const showRouterView = computed(() => route.path !== '/')
</script>
<template>
- <nav>
- <RouterLink to="/">Hjem</RouterLink>
+ <nav v-if="showRouterView">
+ <RouterLink to="/hjem">Hjem</RouterLink>
<RouterLink to="/sparemaal">Sparemål</RouterLink>
<RouterLink to="/spareutfordringer">Spareutfordringer</RouterLink>
<RouterLink to="/profil">Profil</RouterLink>
@@ -12,11 +17,13 @@ import { RouterLink, RouterView } from 'vue-router'
</nav>
<main>
- <RouterView />
+ <div>
+ <RouterView />
+ </div>
</main>
</template>
-<style scoped>
+<style>
nav {
display: flex;
justify-content: center;
diff --git a/src/assets/SPARESTI.png b/src/assets/SPARESTI.png
new file mode 100644
index 0000000000000000000000000000000000000000..954b5c3ab77b2d90c29662f925f4e7ad9fa960ed
Binary files /dev/null and b/src/assets/SPARESTI.png differ
diff --git a/src/assets/base.css b/src/assets/base.css
index 98e587f4c0cecd5672a35b3eaa39be462b7d78b1..632645e26bedfaf24c25fd190491fb30a7808a97 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -9,7 +9,7 @@
--bright: #f7da7c;
--accent1: #f4bab9;
- --accent2: #b2c79f;
+ --accent2: #95e35d;
--accent3: #ef9691;
}
@@ -48,7 +48,6 @@ body {
background-color 0.5s;
line-height: 1.6;
font-family: 'Karla', sans-serif;
- font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/main.css b/src/assets/main.css
index 3a9481b3464ba045ffece7b2e1d984e2f42b624c..cef42f658f03ce709415cb70bc5a0a4a42eb8d82 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -5,10 +5,8 @@
@tailwind utilities;
#app {
- max-width: 1280px;
margin: 0 auto auto auto;
width: 100%;
- padding: 2rem;
font-weight: normal;
display: flex;
diff --git a/src/assets/sparesti2.png b/src/assets/sparesti2.png
new file mode 100644
index 0000000000000000000000000000000000000000..90765d5805679e487b8bbdce11d620e7a7a137fb
Binary files /dev/null and b/src/assets/sparesti2.png differ
diff --git a/src/assets/start_page/Spare.png b/src/assets/start_page/Spare.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe48be94be6ede6652ce0a94d50f581710d7ef07
Binary files /dev/null and b/src/assets/start_page/Spare.png differ
diff --git a/src/assets/start_page/fly.png b/src/assets/start_page/fly.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a0e912c5f15b835f5a84e0d23a024889271d0f8
Binary files /dev/null and b/src/assets/start_page/fly.png differ
diff --git a/src/assets/start_page/skyer.png b/src/assets/start_page/skyer.png
new file mode 100644
index 0000000000000000000000000000000000000000..3519c8e0487cdc271167ee1ce3fb3860641e6e23
Binary files /dev/null and b/src/assets/start_page/skyer.png differ
diff --git a/src/assets/start_page/sti.png b/src/assets/start_page/sti.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9e5dc7e9fb2fc9eddffb78da135fab557846433
Binary files /dev/null and b/src/assets/start_page/sti.png differ
diff --git a/src/assets/start_page/strand.png b/src/assets/start_page/strand.png
new file mode 100644
index 0000000000000000000000000000000000000000..597dc0f8398b5d408cae890bb4a8b45f522879f2
Binary files /dev/null and b/src/assets/start_page/strand.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index e908e710f0f4e2cede4d3abf757287e5f1734aa2..60ec4bf746d83dab2e490dc232f26a061ad0b63c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,58 +6,63 @@ const router = createRouter({
routes: [
{
path: '/',
+ name: 'start',
+ component: () => import('@/views/StartView.vue')
+ },
+ {
+ path: '/hjem',
name: 'home',
component: HomeView
},
{
path: '/login',
name: 'login',
- component: () => import('../views/RegisterLoginView.vue')
+ component: () => import('@/views/RegisterLoginView.vue')
},
{
path: '/profil',
name: 'profile',
- component: () => import('../views/ProfileView.vue')
+ component: () => import('@/views/ProfileView.vue')
},
{
path: '/sparemaal',
name: 'goals',
- component: () => import('../views/GoalView.vue')
+ component: () => import('@/views/GoalView.vue')
},
{
path: '/spareutfordringer',
name: 'challenges',
- component: () => import('../views/ChallengeView.vue')
+ component: () => import('@/views/ChallengeView.vue')
},
{
path: '/:pathMatch(.*)*',
name: 'not-found',
- component: () => import('../views/NotFoundView.vue')
+ component: () => import('@/views/NotFoundView.vue')
},
{
path: '/konfigurasjonSteg1',
name: 'configurations1',
- component: () => import('../views/ConfigHabitChangeView.vue')
+ component: () => import('@/views/ConfigHabitChangeView.vue')
},
{
path: '/konfigurasjonSteg2',
name: 'configurations2',
- component: () => import('../views/ConfigFamiliarWithSavingsView.vue')
+ component: () => import('@/views/ConfigFamiliarWithSavingsView.vue')
},
{
path: '/konfigurasjonSteg3',
name: 'configurations3',
- component: () => import('../views/ConfigSpendingItemsView.vue')
+ component: () => import('@/views/ConfigSpendingItemsView.vue')
},
{
path: '/konfigurasjonSteg4',
name: 'configurations4',
- component: () => import('../views/ConfigSpendingItemsAmountView.vue')
+ component: () => import('@/views/ConfigSpendingItemsAmountView.vue')
},
{
path: '/forsteSparemaal',
name: 'firstSavingGoal',
- component: () => import('../views/FirstSavingGoalView.vue')
+ component: () => import('@/views/FirstSavingGoalView.vue')
}
]
})
diff --git a/src/views/StartView.vue b/src/views/StartView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a57dfcaa9d2c5605849f32435304738235a5dbb5
--- /dev/null
+++ b/src/views/StartView.vue
@@ -0,0 +1,79 @@
+<template>
+ <div class="background-container">
+ <div class="overflow-hidden md:relative absolute max-md:-left-2/3 right-0 left-0">
+ <img
+ src="@/assets/start_page/sti.png"
+ alt="Background"
+ class="min-w-[1420px] h-auto overflow-hidden"
+ />
+ </div>
+ <div class="flex flex-col items-center pt-40 absolute top-0 left-0 right-0 z-10">
+ <img src="@/assets/start_page/Spare.png" alt="Spare" class="md:w-1/6 w-1/3 h-auto" />
+ <img
+ src="@/assets/sparesti2.png"
+ alt="Sparesti"
+ class="md:w-5/12 w-10/12 h-auto md:mt-4 mt-20"
+ />
+ <p class="mt-2 lg:text-2xl text-lg font-bold">GJØR SPARING TIL EN LEK!</p>
+ </div>
+
+ <div
+ class="flex flex-col items-end mr-3 justify-center space-y-4 z-20 absolute inset-0 -top-3/4 md:left-3/4 left-1/4 md:w-1/6 md:right-1/3 md:mt-44"
+ >
+ <button
+ class="md:py-3 md:px-0 md:w-3/4 py-2 px-12 w-1/2 border border-[#95E35D] shadow-lg rounded-lg transition-all duration-500 bg-[#95E35D] hover:bg-white text-sm md:text-base"
+ @click="goToLogin"
+ >
+ Start her
+ </button>
+ <button
+ class="md:py-3 md:px-0 md:w-3/4 py-2 px-12 w-1/2 border border-[#95E35D] shadow-lg rounded-lg transition-all duration-500 bg-white hover:bg-[#95E35D] text-sm md:text-base"
+ @click="goToLogin"
+ >
+ Logg inn
+ </button>
+ </div>
+
+ <div class="invisible md:visible absolute -bottom-80 right-0 mr-4 pr-10 w-1/4">
+ <h2>Kom igang med målene dine! 🚀</h2>
+ <p>Sett deg et sparemål og utfordre deg selv til å spare mer. 🎯</p>
+ </div>
+
+ <div class="invisible md:visible absolute -bottom-[1450px] right-0 mr-4 pr-10 w-1/4">
+ <h2>Gi slipp pÃ¥ dÃ¥rlige vaner! ðŸ»</h2>
+ <p>Sett deg et spareutfordringer, bra for lommeboka og helsa! 🦾</p>
+ </div>
+
+ <div
+ class="absolute md:-bottom-[600px] -bottom-[500px] md:left-10 left-10 md:ml-2 md:pl-10 md:w-1/3 w-5/6"
+ >
+ <h2>Spar til din neste ferie! ðŸ–ï¸â˜€ï¸ï¸</h2>
+ <p>Ferie er viktig for å lade batteriene 🔋. Spar til din neste ferie og nyt livet!</p>
+ <div
+ class="absolute top-50 left-10 right-10 h-24 overflow-hidden bg-[url('@/assets/start_page/skyer.png')] bg-repeat-x bg-center animate-clouds"
+ ></div>
+ <div
+ class="absolute top-80 left-10 right-10 h-24 overflow-hidden bg-[url('@/assets/start_page/strand.png')] bg-repeat-x bg-center animate-beach"
+ ></div>
+ <div
+ class="absolute -bottom-52 left-10 right-10 h-24 bg-[url('@/assets/start_page/fly.png')] bg-contain bg-no-repeat bg-center z-10"
+ ></div>
+ <div
+ class="flame1 absolute -bottom-36 md:left-60 left-44 h-2 w-8 rounded-lg bg-blue-100 animate-flame z-9"
+ ></div>
+ <div
+ class="flame2 absolute -bottom-48 md:left-[258px] left-48 h-2 w-10 rounded-lg bg-blue-100 animate-flame z-9"
+ ></div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const goToLogin = () => {
+ router.push('/login')
+}
+</script>
diff --git a/tailwind.config.js b/tailwind.config.js
index ff48818cbe8639b10e036feefb2a11415a2d50ed..abe363ca68d682e6127eb145197317c59e9df11d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,28 @@ export default {
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
- extend: {},
+ extend: {
+ animation: {
+ clouds: 'clouds 20s linear infinite',
+ beach: 'beach 5s linear infinite',
+ flame: 'flame 0.3s linear infinite',
+ },
+ keyframes: {
+ clouds: {
+ '0%': { backgroundPosition: '0%' },
+ '100%': { backgroundPosition: '-100%' },
+ },
+ beach: {
+ '0%': { backgroundPosition: '0%' },
+ '100%': { backgroundPosition: '-100%' },
+ },
+
+ flame: {
+ '0%, 100%': { transform: 'translateX(0%)' },
+ '50%': { transform: 'translateX(50%)' },
+ },
+ }
+ },
},
plugins: [],
}
\ No newline at end of file