parent
aa8e05a6f6
commit
a9bdbf97f8
@ -0,0 +1,5 @@
|
||||
.temp/
|
||||
.cache/
|
||||
node_modules/
|
||||
build/
|
||||
dist
|
||||
@ -0,0 +1,2 @@
|
||||
{
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
# Project-XR-website
|
||||
<!-- # Project-XR-website -->
|
||||
|
||||
<!-- Project-XR website -->
|
||||
|
||||
Project-XR website
|
||||
@ -0,0 +1,8 @@
|
||||
import { defineClientConfig } from "vuepress/client";
|
||||
import Layout from "./layouts/layout.vue";
|
||||
|
||||
export default defineClientConfig({
|
||||
layouts: {
|
||||
Layout,
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<section id="about">
|
||||
<div class="textContainer">
|
||||
<h1>About Project XR</h1>
|
||||
<p>Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. Eum maxime eligendi et perferendis vitae non vitae consequatur.</p>
|
||||
</div>
|
||||
<div class="imgContainer">
|
||||
|
||||
<img src="/img/DemoFoto.png" alt="" id="DemoImg" >
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'about',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
#about {
|
||||
display: flex;
|
||||
margin-top: 10%;
|
||||
margin-bottom: 20%;
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
padding: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* gap: 80px; */
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
.imgContainer {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.imgContainer #DemoImg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
mask-image: url(/img/union.svg);
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<section id="Footer">
|
||||
<div class="Contact">
|
||||
<div class="TextContainer">
|
||||
<h2 id="h2">Questions or remarks? Or do you want to work together? Let us know! </h2>
|
||||
<p id="p">Lorem ipsum dolor sit amet. Cum dolorem blanditiis sit enim officia et voluptates aliquam. Eum maxime eligendi et perferendis vitae non vitae consequatur.</p>
|
||||
</div>
|
||||
<div>
|
||||
<form action="" class="Form">
|
||||
<input type="email" name="email" id="Email" placeholder="Email address" required>
|
||||
<button type="submit" class="submit">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Info">
|
||||
<div class="ImgContainer">
|
||||
<a href="/">
|
||||
<img src="/icon/logo.svg" alt="Logo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="PracticalInformation">
|
||||
<h3>Practical information</h3>
|
||||
<ul>
|
||||
<li><img src="/img/Home-Adress - Wit.svg">
|
||||
<a href="https://maps.app.goo.gl/fVGWXgu6jy2Mra3R7">Pakhuisstraat 3A, 1621GL Hoorn</a>
|
||||
</li>
|
||||
<li><img src="/img/Phone - Wit.svg">
|
||||
<a href="tel:+31229729024">+31 (0) 229 729 024</a>
|
||||
</li>
|
||||
<li><img src="/img/Mail - wit.svg">
|
||||
<a href="mailto:info@pack.house">info@pack.house</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="links">
|
||||
<h3>Follow our Socials!</h3>
|
||||
<div class="ImgContainer">
|
||||
<a href="https://www.example.com"><img src="/img/1161953_instagram_icon.svg" alt="insta"></a>
|
||||
<a href="https://www.example.com"><img src="/img/211904_social_github_icon (1).svg" alt="insta"></a>
|
||||
<a href="https://www.example.com"><img src="/img/circle_user_icon.svg" alt="insta"></a>
|
||||
<a href="https://www.example.com"><img src="/img/Home-Adress - Wit.svg" alt="insta"></a>
|
||||
<a href="https://www.example.com"><img src="/img/Mail - wit.svg" alt="insta"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Footer",
|
||||
mounted() {
|
||||
const form = document.querySelector('.Form');
|
||||
const emailInput = document.getElementById('Email');
|
||||
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const email = emailInput.value;
|
||||
console.log("Email submitted:", email);
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
#Footer {
|
||||
height: 60vw;
|
||||
margin-bottom: 0;
|
||||
|
||||
}
|
||||
|
||||
.Contact {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
/* padding-left: 10%; */
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
background-color: #bdb0bc;
|
||||
}
|
||||
|
||||
.Contact .TextContainer {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
bottom: 40%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.Contact .TextContainer h2 {
|
||||
letter-spacing: 5px;
|
||||
line-height: 3vw;
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
#p {
|
||||
font-size: 1vw;
|
||||
line-height: 1.5vw;
|
||||
}
|
||||
|
||||
.Form {
|
||||
display: flex;
|
||||
/* justify-content: space-between; */
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
bottom: 20%;
|
||||
width: 40%;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#Email {
|
||||
background-color: transparent;
|
||||
border-color: #171924;
|
||||
border-radius: 5px;
|
||||
color: var(--vp-c-text);
|
||||
height: 3vw;
|
||||
width: 20vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#Email::placeholder {
|
||||
color: var(--vp-c-text);
|
||||
padding-left: 10%;
|
||||
}
|
||||
|
||||
.submit {
|
||||
font-weight: 400;
|
||||
font-size: 1.5vw;
|
||||
height: 3.5vw;
|
||||
width: 6vw;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.Info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/* align-items: center; */
|
||||
padding:5% 5% 0% 5%;
|
||||
|
||||
/* width: 100%; */
|
||||
height: 35%;
|
||||
background-color: #171924;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.Info h3 {
|
||||
color: white;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.Info ul {
|
||||
padding: 0 !important;
|
||||
width: 15vw;
|
||||
}
|
||||
|
||||
|
||||
.Info li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.Info li img {
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
|
||||
.Info li a {
|
||||
color: azure;
|
||||
}
|
||||
|
||||
.Info .ImgContainer {
|
||||
width: 10vw;
|
||||
}
|
||||
.Info .ImgContainer img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.links {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.links .ImgContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.links .ImgContainer img {
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.links .ImgContainer a {
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.PracticalInformation a {
|
||||
font-size: 1vw;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<section id="Plans">
|
||||
<div id="StepsContainer">
|
||||
<div class="TextContainer">
|
||||
<h2>How does it work</h2>
|
||||
</div>
|
||||
<div class="Steps">
|
||||
<div class="Step">
|
||||
<h3>Step 1</h3>
|
||||
<span id="Line"></span>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
|
||||
</div>
|
||||
<div class="Step">
|
||||
<h3>Step 2</h3>
|
||||
<span id="Line"></span>
|
||||
<p>Fugiat ex sunt quis minim pariatur tempor officia ad occaecat duis ea nisi ea et.</p>
|
||||
|
||||
</div>
|
||||
<div class="Step">
|
||||
<h3>Step 3</h3>
|
||||
<span id="Line"></span>
|
||||
<p>Sunt quis reprehenderit sit eiusmod cillum voluptate dolore enim adipisicing nostrud labore.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="goToOtherPage(3)" class="button">read more</button>
|
||||
</div>
|
||||
<div class="PlansContainer">
|
||||
<div class="TextContainer">
|
||||
<h2>Plans & Prizing</h2>
|
||||
</div>
|
||||
<div class="Plans">
|
||||
<div class="Plan" tabindex="0">
|
||||
<div class="TextContainer2">
|
||||
<h3 id="h3">Monthly sponsorship</h3>
|
||||
<span id="Line"></span>
|
||||
|
||||
</div>
|
||||
<button @click="goToOtherPage(3)" class="Choose">Choose this plan</button>
|
||||
</div>
|
||||
<div class="Plan" tabindex="0">
|
||||
<div class="TextContainer2">
|
||||
<h3 id="h3">Weekly sponsorship</h3>
|
||||
<span id="Line"></span>
|
||||
|
||||
</div>
|
||||
<button @click="goToOtherPage(2)" class="Choose">Choose this plan</button>
|
||||
</div>
|
||||
<div class="Plan" tabindex="0">
|
||||
<div class="TextContainer2">
|
||||
<h3 id="h3">Dayly sponsorship</h3>
|
||||
<span id="Line"></span>
|
||||
|
||||
|
||||
</div>
|
||||
<button @click="goToOtherPage(2)" class="Choose">Choose this plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
// import { useRouter } from 'vue-router';
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
|
||||
methods: {
|
||||
goToOtherPage(To) {
|
||||
this.$router.push({
|
||||
path: '/context', // Use the correct route without `.md`
|
||||
query: { someData: To } // Pass data via query parameters
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#Plans {
|
||||
position: relative;
|
||||
height: 90vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 50px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#StepsContainer {
|
||||
height: 40vw;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: -10%;
|
||||
width: 80%;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.9);
|
||||
background-color: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Steps {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 10%;
|
||||
width: 100%;
|
||||
/* transition: all 1s ease; */
|
||||
/* margin-bottom: 10%; */
|
||||
}
|
||||
|
||||
.Step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 25%;
|
||||
}
|
||||
.Step p {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#Line {
|
||||
display: block;
|
||||
background-color: black;
|
||||
width: 40%;
|
||||
height: 3px;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.button {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#StepsContainer .TextContainer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
/* padding-left: 10%; */
|
||||
/* width: 100%; */
|
||||
}
|
||||
#StepsContainer .TextContainer h2 {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
.PlansContainer .TextContainer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 15%;
|
||||
top: 45%;
|
||||
/* padding-left: 10%; */
|
||||
/* width: 100%; */
|
||||
/* margin-bottom: 10%; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.Plan .TextContainer2 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 10% 5%;
|
||||
}
|
||||
|
||||
.Plan .TextContainer2 #h3 {
|
||||
font-size: 1.5vw;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
/* border-bottom: solid black; */
|
||||
|
||||
}
|
||||
|
||||
.PlansContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding-top: 10%;
|
||||
background-color: #8e97a3;
|
||||
}
|
||||
|
||||
.Plans {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 20px;
|
||||
position: absolute;
|
||||
bottom: 150px;
|
||||
|
||||
}
|
||||
|
||||
.Plan {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20vw;
|
||||
background-color: #758795;
|
||||
height: 30vw;
|
||||
/* scale: 0.9; */
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
}
|
||||
|
||||
.Plan:hover {
|
||||
background-color: #ecebec;
|
||||
/* scale: 1.1; */
|
||||
}
|
||||
|
||||
.Plan:focus {
|
||||
background-color: #ecebec;
|
||||
scale: 1.1;
|
||||
}
|
||||
|
||||
.Choose {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: solid black;
|
||||
width: 15vw;
|
||||
|
||||
}
|
||||
|
||||
.Plan:focus .Choose {
|
||||
|
||||
border-radius: 5px;
|
||||
border: solid black;
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,255 @@
|
||||
<script setup>
|
||||
const config1 = {
|
||||
dir: 'ttb', // This makes the carousel vertical
|
||||
// wrapAround: true,
|
||||
itemsToShow: 3,
|
||||
snapAlign: 'center',
|
||||
height: '700px',
|
||||
|
||||
wrapAround: true,
|
||||
gap: 50,
|
||||
// mouseDrag: false,
|
||||
breakpoints: {
|
||||
// 300px and up
|
||||
300: {
|
||||
itemsToShow: 1,
|
||||
snapAlign: 'center',
|
||||
height: '100px',
|
||||
gap: 20,
|
||||
|
||||
|
||||
},
|
||||
// 400px and up
|
||||
400: {
|
||||
itemsToShow: 2,
|
||||
snapAlign: 'start',
|
||||
height: '200px',
|
||||
gap: 20,
|
||||
|
||||
|
||||
},
|
||||
// 500px and up
|
||||
500: {
|
||||
itemsToShow: 3,
|
||||
snapAlign: 'start',
|
||||
height: '300px',
|
||||
gap: 20,
|
||||
},
|
||||
600: {
|
||||
height: '500px',
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section id="Projects">
|
||||
<div class="TextContainer">
|
||||
<h1>Projects</h1>
|
||||
<p>Nisi anim occaecat aliqua sunt sint elit commodo sit consequat ullamco mollit commodo.</p>
|
||||
</div>
|
||||
<div class="Container">
|
||||
<div class="CarouselContainer">
|
||||
<!-- Vue Slick Carousel Integration -->
|
||||
<Carousel v-bind="config1" class="Carousel" ref="mainCarousel" @beforeChange="updateTitleCarousel">
|
||||
<Slide v-for="slide in img" :key="slide" class="slide">
|
||||
<!-- <div class="carousel__item">{{ slide }}</div> -->
|
||||
<img :src="slide" alt="l" class="carousel__item" style="width: 100%;">
|
||||
<!-- <img src="../public/img/Home-Adress - Wit.svg" alt="l" class="carousel__item"> -->
|
||||
|
||||
</Slide>
|
||||
<template #addons>
|
||||
<Navigation />
|
||||
<!-- <Pagination /> -->
|
||||
</template>
|
||||
</Carousel>
|
||||
</div>
|
||||
<div class="TitleContainer" >
|
||||
<div class="ProjectContainer">
|
||||
<div v-for="test in 4" :key="test" class="title" @click="test2(test)" tabindex="0">
|
||||
<img :src="test.image" alt="l" class="carousel__item" style="width: 100%;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="TitleText">
|
||||
<div v-for="title in Projects" :key="title" class="Text" @click="test2(title)" tabindex="0">
|
||||
<h3>{{title.name}}</h3>
|
||||
<span id="Line"></span>
|
||||
<h3>In cillum veniam dolore in irure amet voluptate.</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <button @click="Detail()"></button> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
import { Carousel, Slide, Navigation, Pagination } from 'vue3-carousel';
|
||||
import { ref } from 'vue';
|
||||
import Data from '../data/Projects.json';
|
||||
import 'vue3-carousel/dist/carousel.css';
|
||||
|
||||
// Detail(0)
|
||||
export default {
|
||||
components: { Carousel, Slide, Navigation, Pagination },
|
||||
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
// Your slick config
|
||||
},
|
||||
currentSlide: 0,
|
||||
Projects: Data,
|
||||
img: null,
|
||||
Detail: null
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
test2(p) {
|
||||
const id = p - 1;
|
||||
console.log(id);
|
||||
|
||||
|
||||
this.img = this.Projects[id]?.image;
|
||||
},
|
||||
|
||||
Detail(T) {
|
||||
const id = T - 1;
|
||||
this.Detail = this.Projects[id]?.text;
|
||||
console.log(Detail);
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
#Projects {
|
||||
margin-bottom: 0vw;
|
||||
|
||||
}
|
||||
|
||||
.carousel .carousel__pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.carousel__pagination-button {
|
||||
background-color: aqua;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
#Projects>.TextContainer {
|
||||
width: 40%;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
#Line {
|
||||
display: block;
|
||||
background-color: black;
|
||||
width: 40%;
|
||||
height: 3px;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-radius: 5px;
|
||||
background-color: var(--light-pink);
|
||||
height: 10vw;
|
||||
width: 15vw;
|
||||
transition: all 0.2s ease-in;
|
||||
|
||||
}
|
||||
|
||||
.Text {
|
||||
border-radius: 5px;
|
||||
height: 10vw;
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.Text #h3 {
|
||||
font-size: 1.5vw;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.Container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 60vw;
|
||||
}
|
||||
|
||||
.TitleContainer {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
gap: 1vw;
|
||||
}
|
||||
|
||||
.title:focus {
|
||||
border-bottom: solid 5px;
|
||||
/* border: ; */
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.ProjectContainer {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* justify-content: space-between; */
|
||||
gap: 5%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.TitleText {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 5%;
|
||||
|
||||
}
|
||||
|
||||
.CarouselContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.Carousel {
|
||||
/* scroll-behavior: smooth; */
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.slide {
|
||||
background-color: var(--cool-gray);
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<section id="Service">
|
||||
<div class="textContainer">
|
||||
<h1>Our Service</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, quod voluptatibus sed rem quibusdam, iste
|
||||
at vitae ducimus quidem nam beatae doloremque libero qui corporis corrupti earum suscipit a dolores?</p>
|
||||
</div>
|
||||
<div class="Options">
|
||||
<div class="Option">
|
||||
<h2>Create</h2>
|
||||
<span id="Line"></span>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
|
||||
</div>
|
||||
<div class="Option">
|
||||
<h2>Share</h2>
|
||||
<span id="Line"></span>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
|
||||
</div>
|
||||
<div class="Option">
|
||||
<h2>Experience</h2>
|
||||
<span id="Line"></span>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#Service {
|
||||
/* height: 80vh; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 100px;
|
||||
margin-bottom: 15vw;
|
||||
}
|
||||
.textContainer {
|
||||
width: 40%;
|
||||
padding: 5%;
|
||||
|
||||
/* gap: 10px; */
|
||||
}
|
||||
|
||||
.Options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10%;
|
||||
}
|
||||
.Option h2 {
|
||||
font-size: 2vw;
|
||||
|
||||
}
|
||||
.Option {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.5vw;
|
||||
border-radius: 5px;
|
||||
padding: 20px 20px;
|
||||
height: 30vw;
|
||||
}
|
||||
|
||||
.Option:nth-of-type(2) {
|
||||
background-color: #bdb0bc;
|
||||
}
|
||||
|
||||
#Line {
|
||||
background-color: black;
|
||||
width: 25%;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Est do cillum labore magna non non mollit excepteur adipisicing elit.</h1>
|
||||
<h2>someting more to read i guess</h2>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
height: 30vw;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<section id="Title">
|
||||
<div class="textContainer">
|
||||
|
||||
<h1>Hét platform voor VR belevingen</h1>
|
||||
<h3>Create, Share & Experience</h3>
|
||||
|
||||
<button @click="goToOtherPage(1)" class="my-button">Start with VR</button>
|
||||
<!-- <iframe src="http://localhost:80"></iframe> -->
|
||||
|
||||
|
||||
</div>
|
||||
<div class="imgContainer" >
|
||||
<img src="/img/VR-man.png" alt="VR Man" id="VR-man" />
|
||||
<div class="DesingElemnts">
|
||||
<img src="/img/VR-element-1.svg" alt="" class="vrDesingelement" />
|
||||
<img src="/img/VR-element-2.svg" alt="" class="vrDesingelement" />
|
||||
<img src="/img/VR-element-3.svg" alt="" class="vrDesingelement" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'Title',
|
||||
|
||||
methods: {
|
||||
goToOtherPage() {
|
||||
this.$router.push({
|
||||
path: '/context',
|
||||
query: { someData: '1' }
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
.cls-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: rgb(255, 0, 0);
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
height: 5%;
|
||||
margin: 1%;
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#Title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.imgContainer {
|
||||
z-index: 0;
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 50vw;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#VR-man {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.DesingElemnts {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
gap: 10%;
|
||||
}
|
||||
|
||||
.DesingElemnts img:nth-of-type(1) {
|
||||
position: relative;
|
||||
bottom: -100px;
|
||||
}
|
||||
|
||||
.DesingElemnts img:nth-of-type(3) {
|
||||
position: relative;
|
||||
bottom: -60px;
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
padding: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 30px;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
/* .textContainer h3 {
|
||||
font-size: 20px;
|
||||
} */
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<section>
|
||||
<p id="h3">Hey, I'm a component!</p>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
// console.log("test");
|
||||
export default {
|
||||
name: 'wha',
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
height: 30vw;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<section>
|
||||
<h1>Hello world!</h1>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
height: 30vw;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
import { viteBundler } from "@vuepress/bundler-vite";
|
||||
import { defaultTheme } from "@vuepress/theme-default";
|
||||
import { defineUserConfig } from "vuepress";
|
||||
import { mediumZoomPlugin } from "@vuepress/plugin-medium-zoom";
|
||||
|
||||
export default defineUserConfig({
|
||||
bundler: viteBundler({
|
||||
viteOptions: {
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
// Uncomment if using SCSS variables
|
||||
// additionalData: '@import "layouts/styles/index.scss";',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
// Site meta and styles
|
||||
head: [
|
||||
["link", { rel: "stylesheet", href: "/styles/index.scss" }],
|
||||
["link", { rel: "icon", href: "/icon/logo.svg" }],
|
||||
["link", { rel: "icon", href: "/icon/logo.svg" }],
|
||||
],
|
||||
|
||||
// Default theme config
|
||||
theme: defaultTheme({
|
||||
locales: {
|
||||
'/': {
|
||||
notFound: [
|
||||
`There's nothing here.`,
|
||||
`How did we get here?`,
|
||||
`That's a Four-Oh-Four.`,
|
||||
'The Snowboys took the page.',
|
||||
`Looks like we've got some broken links.`,
|
||||
'Oops! This page does not exist.',
|
||||
'Packhouse packed up this page.',
|
||||
'Oh no looks like an intern messed up the routing.',
|
||||
'Are you lost?',
|
||||
],
|
||||
|
||||
},
|
||||
},
|
||||
navbar: [
|
||||
{ text: "About Project XR", link: "#about", class: "button" },
|
||||
{ text: "Our Service", link: "#Service" },
|
||||
{ text: "Projects", link: "#Projects" },
|
||||
// { text: "Plans & Pricing", link: "#StepsContainer" },
|
||||
{ text: "Log In", link: "/config/README.md" },
|
||||
],
|
||||
sidebar: false,
|
||||
logo: "/icon/logo.svg",
|
||||
// isdarkMode: false,
|
||||
colorMode: {
|
||||
defaultMode: 'light', // Start in light mode
|
||||
disableSwitch: true, // Hide the dark mode toggle
|
||||
respectPrefersColorScheme: false, // Don't care about system settings
|
||||
},
|
||||
|
||||
}),
|
||||
|
||||
// Plugins
|
||||
plugins: [
|
||||
mediumZoomPlugin({
|
||||
selector: '.zoom',
|
||||
}),
|
||||
],
|
||||
|
||||
lang: "en-US",
|
||||
});
|
||||
@ -0,0 +1,59 @@
|
||||
[
|
||||
{
|
||||
"image": [
|
||||
"img/DemoFoto.png",
|
||||
"img/Mail - wit.svg",
|
||||
"img/circle_user_icon.svg"
|
||||
],
|
||||
"name": "Porject 1",
|
||||
"text": [
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
|
||||
],
|
||||
"alt": [
|
||||
"project alt "
|
||||
]
|
||||
},
|
||||
{
|
||||
"image": [
|
||||
"img/Home-Adress - Wit.svg",
|
||||
"img/Home-Adress - Wit.svg",
|
||||
"img/Samsung Wallpaper_01.jpg",
|
||||
"img/Samsung Wallpaper_01.jpg"
|
||||
],
|
||||
"name": "Porject 2",
|
||||
|
||||
"text": [
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
|
||||
],
|
||||
"alt": [
|
||||
"project alt "
|
||||
]
|
||||
},
|
||||
{
|
||||
"image": [
|
||||
"img/Mail - wit.svg"
|
||||
],
|
||||
"name": "Porject 3",
|
||||
"text": [
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
|
||||
|
||||
],
|
||||
"alt": [
|
||||
"project alt "
|
||||
]
|
||||
},
|
||||
{
|
||||
"image": [
|
||||
"img/Mail - wit.svg",
|
||||
"img/Mail - wit.svg"
|
||||
],
|
||||
"name": "Porject 3",
|
||||
"text": [
|
||||
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat magnam adipisci cum quis, facere quia tempore, eos, exercitationem reiciendis iure harum praesentium eius molestiae blanditiis mollitia laborum ab repellat nisi?"
|
||||
|
||||
],
|
||||
"alt": [
|
||||
"project alt "
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
|
||||
<Layout>
|
||||
<template #default>
|
||||
<Content /> <!-- Keep this in the default slot -->
|
||||
</template>
|
||||
</Layout>
|
||||
<Footer /> <!-- Footer goes outside the default layout -->
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from "../components/Footer.vue";
|
||||
// Import the default theme layout
|
||||
import Layout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Footer,
|
||||
Layout, // Use the default layout
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 5.6 MiB |
|
After Width: | Height: | Size: 277 B |
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 278 B |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 700 B |
|
After Width: | Height: | Size: 82 B |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
@ -0,0 +1,127 @@
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff2'),
|
||||
url('./fonts/OpenSans-VariableFont_wdth,wght.ttf') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--vp-c-text: #171923;
|
||||
--vp-c-accent: #171923 ;
|
||||
--back-to-top-c-icon: #171923;
|
||||
--navbar-height: 5rem;
|
||||
--vp-c-accent-bg: #171923;
|
||||
--vp-c-accent-hover: #171923;
|
||||
--light-pink: #bdb0bc;
|
||||
--px-bg-color: #ecebec;
|
||||
--cool-gray: #8e98a4;
|
||||
// --vp-c-bg: #ecebec;
|
||||
}
|
||||
|
||||
.vp-page .theme-default-content {
|
||||
max-width: 100%
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
}
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background-color: var(--px-bg-color);
|
||||
// overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
section {
|
||||
margin-bottom: 30%;
|
||||
|
||||
}
|
||||
|
||||
.vp-navbar {
|
||||
background-color: #ecebec;
|
||||
}
|
||||
|
||||
.vp-page-meta {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.vp-page {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.vp-page .theme-default-content {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
// margin-top: 0 !important;
|
||||
}
|
||||
|
||||
button.vp-toggle-color-mode-button {
|
||||
display: none ;
|
||||
}
|
||||
|
||||
.theme-default-content h1, .theme-default-content h2, .theme-default-content h3 {
|
||||
margin-top: 0 !important;
|
||||
|
||||
}
|
||||
|
||||
h1, h2, h3, p {
|
||||
// margin-top: 0 !important;
|
||||
margin-bottom: 0px !important;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
color: var(--vp-c-text);
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3vw;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
}
|
||||
button {
|
||||
color: black;
|
||||
width: 20vw;
|
||||
height: 5vw;
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
background-color: #ecebec;
|
||||
|
||||
border-radius: 5px;
|
||||
transition: scale 0.2s ease;
|
||||
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #d0d0d0;
|
||||
scale: 0.95;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
// h1, h2, h3, p {
|
||||
// font-size: 1vw;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: Project XR
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import VR from '../../components/VR.vue'
|
||||
import Plan from '../../components/buyPlan.vue'
|
||||
import Steps from '../../components/Steps.vue'
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const Data = route.query.someData;
|
||||
|
||||
let page = null;
|
||||
if (Data === "1") {
|
||||
page = VR;
|
||||
} else if (Data === "2") {
|
||||
page = Plan;
|
||||
} else if (Data === "3") {
|
||||
page = Steps;
|
||||
}
|
||||
|
||||
|
||||
if (!page) {
|
||||
router.push({ name: '404' });
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<component :is="page" />
|
||||
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: project-XR
|
||||
lang: en-US
|
||||
darkMode: disable
|
||||
# smoothScroll: true
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import Title from '../../components/Title.vue';
|
||||
import About from '../../components/About.vue';
|
||||
import Service from '../../components/Service.vue';
|
||||
import Projects from '../../components/Projects.vue'
|
||||
import Plans from '../../components/Plans.vue'
|
||||
import Footer from '../../components/Footer.vue'
|
||||
</script>
|
||||
|
||||
<Title />
|
||||
|
||||
|
||||
<About />
|
||||
<Service />
|
||||
<Projects />
|
||||
<!-- <Plans /> -->
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "project-xr-website",
|
||||
"version": "1.0.0",
|
||||
"description": "Project-XR website",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"dev": "vuepress dev docs",
|
||||
"docs:build": "vuepress build docs",
|
||||
"wow": "echo wow"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@vuepress/bundler-vite": "^2.0.0-rc.18",
|
||||
"@vuepress/theme-default": "^2.0.0-rc.61",
|
||||
"sass-embedded": "^1.81.0",
|
||||
"vuepress": "^2.0.0-rc.18"
|
||||
},
|
||||
"dependencies": {
|
||||
"gsap": "^3.12.5",
|
||||
"stylus": "^0.64.0",
|
||||
"vue3-carousel": "^0.10.0",
|
||||
"vuepress-plugin-smooth-scroll": "^0.0.10"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue