copenhagentruckwash/pleno-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: slides 3-5 partial 6

Browse Source
This commit is contained in:
gold-dev
2026-01-20 15:31:13 +02:00
parent 74f35b3008
commit 4c9199e66d
4 changed files with 265 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/router.js
+2 -2
View File
@@ -282,7 +282,7 @@ export const router = createRouter({
name: 'login',
path: '/login',
component: Login,
meta: { template: 'clear-main', middleware: guestMiddleware }
meta: { template: 'with-header', middleware: guestMiddleware }
},
{
name: 'logout',
@@ -312,7 +312,7 @@ export const router = createRouter({
name: 'adminlogin',
path: '/admin/login',
component: Employee,
meta: { template: 'clear-main', middleware: guestMiddleware }
meta: { template: 'with-header', middleware: guestMiddleware }
},
{
name: 'admin',
src/views/auth/Login.vue
+1 -2
View File
@@ -13,14 +13,13 @@ import logo from "@/assets/img/truckwash-banner.png";
<div class="wrapper">
<div class="sidebar">
<h1>Kundelogin</h1>
<p>Truckwash.io – digitale løsninger til lastbilvask</p>
</div>
<div class="main">
<router-link :to="{ name: 'landing' }" class="logo">
<img :src="logo" alt="Truck Wash">
</router-link>
<LoginForm />
<p>Ved at klikke ”Login” accepterer du truckwash.io terms of service og privacy policy</p>
<p>Ved at klikke ”Log in” accepterer du truckwash.io terms of service og privacy policy</p>
</div>
</div>
</section>
src/views/pages/AboutUsPage.vue
+166 -69
View File
@@ -4,6 +4,8 @@ import textImage3 from "@/assets/img/text-image3.jpg";
import mikkelMerrild from "@/assets/img/mikkel-merrild.jpeg";
import jimmyScaled from "@/assets/img/jimmy-scaled.jpg";
import team from "@/assets/img/team.jpg";
import textImage1 from "@/assets/img/text-image1.jpg";
import textImage2 from "@/assets/img/text-image2.jpg";
</script>
<template>
@@ -27,6 +29,80 @@ import team from "@/assets/img/team.jpg";
</div>
</section>
<section class="text-image-section">
<div class="container">
<div class="content">
<h2 class="section-heading">Vores løsninger</h2>
</div>
<div class="wrapper">
<div class="content">
<h2>Digitale løsning til kunder af vaskehaller</h2>
<p><strong>Kundeportal til disponenter og vognmænd:</strong></p>
<ul>
<li>Tilføj og administrer køretøjer</li>
<li>Book vask med reference nummer</li>
<li>Se data for historiske vaske</li>
<li>Download vaskecertifikater</li>
<li>Download fakturaer</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'register' }" class="btn">Opret</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
<p><strong>App til chauffører</strong></p>
<ul>
<li>Find nærmeste vaskehal</li>
<li>Benyt Selv Vask udenfor bemandet åbningstid</li>
<li>Book vask med reference nummer</li>
<li>Optjen loyalitetspoint</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'register' }" class="btn">Opret</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
</div>
<div class="image"><img :src="textImage1" alt=""></div>
</div>
</div>
</section>
<section class="text-image-section reverse">
<div class="container">
<div class="wrapper">
<div class="content">
<h2>Digitale løsninger til vaskehals operatører</h2>
<p><strong>Styringsmodul til vaskehals operatører:</strong></p>
<ul>
<li>Sæt priser produkter, åbningstider, medarbejdere)</li>
<li>Adminitrerer vaskelog og bookinger</li>
<li>Oprette nye kunder med tilhørende nummerplader</li>
<li>Se dashboards for afdelingens performance</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'book-a-demo' }" class="btn">Book demo</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
<p><strong>Indskrivnings- og kassesystem til vognvaskere</strong></p>
<ul>
<li>Indskriv køretøjer hurtigt med scanning af nummerplade</li>
<li>Tilføj billeder og reference nummer til indskrivning</li>
<li>Håndter bookinger med ét klik (inkl. automatisk generering af vaskecertifikat)</li>
<li>Adminitrerer vaskelog og bookinger</li>
<li>Se dashboards for afdelingens performance</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'book-a-demo' }" class="btn">Book demo</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
</div>
<div class="image">
<img :src="textImage2" alt="">
</div>
</div>
</div>
</section>
<section class="team-section">
<div class="container">
<h2>Team</h2>
@@ -39,28 +115,28 @@ import team from "@/assets/img/team.jpg";
Grundlægger<br>
Forretnings-udvikling
</p>
<ul class="contact">
<li>
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="12.5" viewBox="0 0 320 512">
<path fill="#fff" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/>
</svg>
</span>
(+45) 21 75 46 90
</a>
</li>
<li>
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">
<path fill="#fff" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>
</svg>
</span>
mikkel@truckwash.dk
</a>
</li>
</ul>
<!-- <ul class="contact">-->
<!-- <li>-->
<!-- <a href="#">-->
<!-- <span class="icon">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="20" width="12.5" viewBox="0 0 320 512">-->
<!-- <path fill="#fff" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- (+45) 21 75 46 90-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#">-->
<!-- <span class="icon">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">-->
<!-- <path fill="#fff" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- mikkel@truckwash.dk-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
</div>
</div>
<div class="item">
@@ -70,28 +146,28 @@ import team from "@/assets/img/team.jpg";
<p>
CEO
</p>
<ul class="contact">
<li>
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="12.5" viewBox="0 0 320 512">
<path fill="#fff" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/>
</svg>
</span>
(+45) 42 46 02 82
</a>
</li>
<li>
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">
<path fill="#fff" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>
</svg>
</span>
my@truckwash.dk
</a>
</li>
</ul>
<!-- <ul class="contact">-->
<!-- <li>-->
<!-- <a href="#">-->
<!-- <span class="icon">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="20" width="12.5" viewBox="0 0 320 512">-->
<!-- <path fill="#fff" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- (+45) 42 46 02 82-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#">-->
<!-- <span class="icon">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">-->
<!-- <path fill="#fff" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- my@truckwash.dk-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
</div>
</div>
<div class="item">
@@ -101,28 +177,28 @@ import team from "@/assets/img/team.jpg";
<p>
IT chef
</p>
<ul class="contact">
<li>
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="12.5" viewBox="0 0 320 512">
<path fill="#fff" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/>
</svg>
</span>
(+45) 53 85 53 59
</a>
</li>
<li>
<a href="#">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">
<path fill="#fff" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>
</svg>
</span>
jb@truckwash.dk
</a>
</li>
</ul>
<!-- <ul class="contact">-->
<!-- <li>-->
<!-- <a href="#">-->
<!-- <span class="icon">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="20" width="12.5" viewBox="0 0 320 512">-->
<!-- <path fill="#fff" d="M272 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM160 480c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm112-108c0 6.6-5.4 12-12 12H60c-6.6 0-12-5.4-12-12V60c0-6.6 5.4-12 12-12h200c6.6 0 12 5.4 12 12v312z"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- (+45) 53 85 53 59-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a href="#">-->
<!-- <span class="icon">-->
<!-- <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512">-->
<!-- <path fill="#fff" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/>-->
<!-- </svg>-->
<!-- </span>-->
<!-- jb@truckwash.dk-->
<!-- </a>-->
<!-- </li>-->
<!-- </ul>-->
</div>
</div>
</div>
@@ -157,15 +233,32 @@ import team from "@/assets/img/team.jpg";
margin-bottom: 0;
}
.text-image-section .wrapper .content {
padding-left: 0;
}
.text-image-section.reverse .wrapper .content {
padding-right: 0;
padding-left: 6%;
}
.text-image-section.template-2 .wrapper .content{
background-color: #13324C;
padding-top: 70px;
padding-bottom: 70px;
padding-right: 6%;
padding-left: 6%;
display: flex;
flex-direction: column;
justify-content: center;
}
.text-image-section .container .section-heading {
font-size: 34px;
color: #13324C;
line-height: 1;
margin-bottom: 20px;
}
.text-image-section .wrapper .content h2{
font-size: 26px;
color: #13324C;
@@ -216,15 +309,15 @@ import team from "@/assets/img/team.jpg";
.text-image-section .wrapper .content .btn{
font-size: 14px;
font-weight: 600;
color: #13324C;
background-color: #FFB833;
color: #ffffff;
background-color: #2c3e50;
padding: 12px 24px;
border-radius: 3px;
transition: background-color 0.3s ease;
}
.text-image-section .wrapper .content .btn:hover{
background-color: #FFA833;
background-color: #333333;
}
.text-image-section .wrapper .image{
@@ -259,6 +352,10 @@ import team from "@/assets/img/team.jpg";
padding: 10px;
}
.text-image-section .container .section-heading {
padding: 0 10px;
}
.text-image-section .wrapper .image{
width: 100%;
}
src/views/pages/LandingPage.vue
+96 -84
View File
@@ -1,97 +1,21 @@
<script setup>
import logo from '@/assets/img/truckwash-banner.png'; // header and login form
// text-image
import textImage1 from '@/assets/img/text-image1.jpg';
import textImage2 from '@/assets/img/text-image2.jpg';
import textImage3 from '@/assets/img/text-image3.jpg';
// text-image end
// contact
import contact from '@/assets/img/contact.jpg';
// contact end
// team
import team from '@/assets/img/team.jpg';
import mikkelMerrild from '@/assets/img/mikkel-merrild.jpeg';
import jimmyScaled from '@/assets/img/jimmy-scaled.jpg';
// team end
import LoginForm from "@/components/forms/auth/LoginForm.vue";
</script>
<template>
<section class="hero-section">
<div class="container">
<p class="pre-title">Truckwash.io</p>
<h1>Digitale løsninger til lastbilvask – en bedre oplevelse for vognmænd, chauffører og operatører af vaskehaller</h1>
<p class="pre-title">VELKOMMEN TIL</p>
<h1>Truck Wash kundeportal</h1>
</div>
</section>
<section class="text-image-section">
<div class="container">
<div class="wrapper">
<div class="content">
<h2>Digitale løsning til kunder af vaskehaller</h2>
<p><strong>Kundeportal til disponenter og vognmænd:</strong></p>
<ul>
<li>Tilføj og administrer køretøjer</li>
<li>Book vask med reference nummer</li>
<li>Se data for historiske vaske</li>
<li>Download vaskecertifikater</li>
<li>Download fakturaer</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'register' }" class="btn">Opret</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
<p><strong>App til chauffører</strong></p>
<ul>
<li>Find nærmeste vaskehal</li>
<li>Benyt Selv Vask udenfor bemandet åbningstid</li>
<li>Book vask med reference nummer</li>
<li>Optjen loyalitetspoint</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'register' }" class="btn">Opret</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
</div>
<div class="image"><img :src="textImage1" alt=""></div>
</div>
</div>
</section>
<section class="text-image-section reverse">
<div class="container">
<div class="wrapper">
<div class="content">
<h2>Digitale løsninger til vaskehals operatører</h2>
<p><strong>Styringsmodul til vaskehals operatører:</strong></p>
<ul>
<li>Sæt priser produkter, åbningstider, medarbejdere)</li>
<li>Adminitrerer vaskelog og bookinger</li>
<li>Oprette nye kunder med tilhørende nummerplader</li>
<li>Se dashboards for afdelingens performance</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'book-a-demo' }" class="btn">Book demo</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
<p><strong>Indskrivnings- og kassesystem til vognvaskere</strong></p>
<ul>
<li>Indskriv køretøjer hurtigt med scanning af nummerplade</li>
<li>Tilføj billeder og reference nummer til indskrivning</li>
<li>Håndter bookinger med ét klik (inkl. automatisk generering af vaskecertifikat)</li>
<li>Adminitrerer vaskelog og bookinger</li>
<li>Se dashboards for afdelingens performance</li>
</ul>
<div class="buttons-wrapper">
<router-link :to="{ name: 'book-a-demo' }" class="btn">Book demo</router-link>
<router-link :to="{ name: 'login' }" class="btn">Login</router-link>
</div>
</div>
<div class="image">
<img :src="textImage2" alt="">
</div>
<section class="login-section">
<div class="wrapper">
<div class="main">
<LoginForm />
<p>Ved at klikke ”Log in” accepterer du truckwash.io terms of service og privacy policy</p>
</div>
</div>
</section>
@@ -261,4 +185,92 @@ import jimmyScaled from '@/assets/img/jimmy-scaled.jpg';
}
}
/* end text-image*/
.login-section .wrapper {
min-height: min-content;
}
.login-section .wrapper .main{
width: 100%;
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login-section .wrapper .main .logo{
display: flex;
max-width: 230px;
margin-bottom: 40px;
}
.login-section .wrapper .main .logo img{
width: 100%;
height: auto;
aspect-ratio: 183/32;
object-fit: contain;
}
.login-section .wrapper .main form{
display: flex;
flex-direction: column;
gap: 16px;
max-width: 400px;
margin-bottom: 40px;
width: 100%;
}
.login-section .wrapper .main form .form-field{
display: flex;
flex-direction: column;
gap: 4px;
}
.login-section .wrapper .main form .form-field label{
color: #13324C;
font-size: 16px;
line-height: 1;
display: flex;
gap: 16px;
}
.login-section .wrapper .main form input{
border: 1.5px solid #333;
border-radius: 8px;
margin-top: 4px;
font-size: 16px;
line-height: 1;
}
.login-section .wrapper .main form input:not([type="checkbox"]) {
min-height: 40px;
}
.login-section .wrapper .main p{
max-width: 400px;
text-align: center;
font-size: 16px;
color: #13324C;
}
.login-section .wrapper .main a{
text-decoration: underline;
color: inherit;
}
.login-section .wrapper .main .submit{
width: 100%;
border-radius: 30px;
background-color: #13324C;
border: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
min-height: 43px;
margin: 20px 0;
text-decoration: none;
}
</style>