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