From b8f69acc1019726aed7f33c078810c7738061eab Mon Sep 17 00:00:00 2001
From: 0MJN0 <nelskoops@gmail.com>
Date: Fri, 7 Feb 2025 22:38:57 +0100
Subject: [PATCH] responsiveness update + login page

---
 docs/.vuepress/components/About.vue           |  98 ++++---
 docs/.vuepress/components/Footer.vue          |  12 +-
 docs/.vuepress/components/Projects.vue        | 254 +++++++++---------
 docs/.vuepress/components/Service.vue         |  67 +++--
 docs/.vuepress/components/Title.vue           | 176 +++++++-----
 docs/.vuepress/components/login.vue           | 144 ++++++++++
 docs/.vuepress/config.js                      |  13 +-
 docs/.vuepress/data/Projects.json             |   8 +-
 docs/.vuepress/layouts/layout.vue             |   1 +
 .../{public => layouts}/styles/index.scss     |  61 +++--
 docs/.vuepress/public/styles/index.css        | 150 +++++++++++
 docs/context.md                               |   6 +-
 docs/index.md                                 |   2 -
 docs/login.md                                 |  12 +
 14 files changed, 701 insertions(+), 303 deletions(-)
 create mode 100644 docs/.vuepress/components/login.vue
 rename docs/.vuepress/{public => layouts}/styles/index.scss (79%)
 create mode 100644 docs/.vuepress/public/styles/index.css
 create mode 100644 docs/login.md

diff --git a/docs/.vuepress/components/About.vue b/docs/.vuepress/components/About.vue
index 0c6d307..6a04f1d 100644
--- a/docs/.vuepress/components/About.vue
+++ b/docs/.vuepress/components/About.vue
@@ -1,57 +1,73 @@
 <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>
+  <section id="about" class="grid-container">
+    <div class="TextContainer grid-item">
+      <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 grid-item">
+      <img src="/img/DemoFoto.png" alt="Demo Image" 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%;
+.grid-container {
+  display: grid;
+  grid-template-columns: 40% 60%;
+  gap: 20px;
+  align-items: start;
+  margin: 10% 0;
+  overflow: hidden;
+}
+
+.grid-item {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  /* gap: 80px; */
-  width: 40%;
 }
 
+/* Text Container Styling */
+.TextContainer {
+  padding: 10%;
+}
+
+.TextContainer h1 {
+  /* font-size: 2.5rem; */
+  margin-bottom: 20px;
+}
 
-.imgContainer {
-  height: 80%;
-  width: 60%;
-  position: absolute;
-  right: 0;
+.TextContainer p {
+  /* font-size: 1.2rem; */
+  line-height: 1.6;
 }
-.imgContainer #DemoImg {
-  height: 100%;
-  width: 100%;
+
+/* Image Container Styling */
+.ImgContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ImgContainer #DemoImg {
+  width: 80%;
+  height: auto;
   mask-image: url(/img/union.svg);
   mask-size: contain;
   mask-repeat: no-repeat;
-  mask-position: right;
+  mask-position: center;
+  -webkit-mask-image: url(/img/union.svg);
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
 }
-
-
-
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vuepress/components/Footer.vue b/docs/.vuepress/components/Footer.vue
index c845d42..6d94746 100644
--- a/docs/.vuepress/components/Footer.vue
+++ b/docs/.vuepress/components/Footer.vue
@@ -4,13 +4,12 @@
             <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>
         <div class="Info">
             <div class="ImgContainer">
@@ -71,6 +70,7 @@ export default {
 #Footer {
     height: 60vw;
     margin-bottom: 0;
+    margin-top: 50px
 
 }
 
@@ -86,9 +86,7 @@ export default {
 }
 
 .Contact .TextContainer {
-    position: absolute;
-    left: 10%;
-    bottom: 40%;
+   padding-left: 50px;
     width: 30%;
 }
 
@@ -108,7 +106,7 @@ export default {
     /* justify-content: space-between; */
     align-items: center;
     gap: 20px;
-    position: absolute;
+    /* position: absolute; */
     left: 10%;
     bottom: 20%;
     width: 40%;
diff --git a/docs/.vuepress/components/Projects.vue b/docs/.vuepress/components/Projects.vue
index 9d6380c..3289148 100644
--- a/docs/.vuepress/components/Projects.vue
+++ b/docs/.vuepress/components/Projects.vue
@@ -1,142 +1,117 @@
 <script setup>
 const config1 = {
     dir: 'ttb',  // This makes the carousel vertical
-    //   wrapAround: true,
-    itemsToShow: 3,
+    itemsToShow: 4,
     snapAlign: 'center',
-    height: '700px',
-   
+    height: '600px',
     wrapAround: true,
+    // touchDrag: false,
     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,
-
+        300: {
+            itemsToShow: 2,
+            snapAlign: 'center',
+            height: '200px',
+            gap: 20,
+        },
+        419: {
+            itemsToShow: 3,
+            snapAlign: 'start',
+            height: '400px',
+            gap: 20,
+        },
+        768: {
+            itemsToShow: 4,
+            snapAlign: 'center',
+            height: '800px',
+            gap: 100,
+        },
+        1440: {
+            itemsToShow: 4,
+            snapAlign: 'center',
+            height: '1000px',
+            gap: 100,
+        },
 
-    },
-    // 500px and up
-    500: {
-      itemsToShow: 3,
-      snapAlign: 'start',
-    height: '300px',
-    gap: 20,
-    },
-    600: {
-    height: '500px',
-     
-    },
+    }
 }
-}
-
 </script>
 
 <template>
-    <section id="Projects">
-        <div class="TextContainer">
+    <section id="projects">
+        <div class="text-container">
             <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">
+        <div class="grid-container">
+            <div class="carousel-container">
+                <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"> -->
-
+                        <img :src="slide" alt="l" class="carousel-item" style="width: 100%;">
                     </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 class="title-container">
+                <div class="project-container">
+                    <div v-for="test in projects" :key="test" class="title" @click="test2(1)" tabindex="0">
+                        <div class="img-container">
+                            <img :src="test.image[0]" alt="l" class="carousel-item">
+                        </div>
+                        <div class="title-text">
+                            <h1>{{ test.name }}</h1>
+                            <!-- <h3>zzzz</h3> -->
+                            <span id="line"></span>
+                            <p>{{ test.text[0] }}</p>
+                            <!-- <h3>lllll</h3> -->
+                        </div>
                     </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 { Carousel, Slide, Navigation } from 'vue3-carousel';
+import Data from '../data/projects.json';
 import 'vue3-carousel/dist/carousel.css';
 
-// Detail(0)
 export default {
-    components: { Carousel, Slide, Navigation, Pagination },
-
+    components: { Carousel, Slide, Navigation },
     data() {
         return {
-            config: {
-                // Your slick config
-            },
+            config: {},
             currentSlide: 0,
-            Projects: Data,
+            projects: Data,
             img: null,
-            Detail: null
+            detail: null
         };
     },
-
     methods: {
         test2(p) {
             const id = p - 1;
             console.log(id);
-
-          
-            this.img = this.Projects[id]?.image;
+            this.img = this.projects[id]?.image;
         },
-
-        Detail(T) {
+        detail(T) {
             const id = T - 1;
-            this.Detail = this.Projects[id]?.text;
-            console.log(Detail);
-            
+            this.detail = this.projects[id]?.text;
+            console.log(this.detail);
         }
     },
-
 };
 </script>
 
-
-
 <style scoped>
-#Projects {
-    margin-bottom: 0vw;
+.projects {
+    margin-bottom: 800px;
+}
 
+#projects {
+    margin-bottom: 0vw;
 }
 
 .carousel .carousel__pagination {
@@ -147,16 +122,16 @@ export default {
 }
 
 .carousel__pagination-button {
-    background-color: aqua;
+    /* background-color: aqua; */
     width: 0;
 }
 
-#Projects>.TextContainer {
+#projects>.text-container {
     width: 40%;
     padding: 10%;
 }
 
-#Line {
+#line {
     display: block;
     background-color: black;
     width: 40%;
@@ -166,90 +141,123 @@ export default {
 
 .title {
     border-radius: 5px;
-    background-color: var(--light-pink);
-    height: 10vw;
-    width: 15vw;
-    transition: all 0.2s ease-in;
+  
+    display: grid;
+    grid-template-columns: 1fr 1fr;
 
+    /* height: 15%; */
+    /* width: 100%; */
+    transition: all 0.2s ease-in;
+    gap: 5%;
 }
 
-.Text {
+.text {
     border-radius: 5px;
-    height: 10vw;
-    width: 30vw;
+    width: 100%;
+    height: 15%;
 }
 
-.Text #h3 {
-    font-size: 1.5vw;
+.text h3 {
+    font-size: 16px;
     font-weight: 100;
 }
 
-.Container {
+.grid-container {
     width: 100%;
-    display: flex;
-    flex-direction: row;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
     justify-content: center;
     align-items: center;
-    height: 60vw;
+    /* height: 60vw; */
+    gap: 5px;
 }
 
-.TitleContainer {
+.title-container {
     cursor: pointer;
-    display: flex;
+    /* display: grid; */
+    /* grid-template-columns: 1fr 1fr; */
+
     align-items: center;
     justify-content: center;
     flex-direction: row;
     height: 100%;
-    width: 50%;
+    /* max-width: 70%; */
     gap: 1vw;
 }
 
 .title:focus {
     border-bottom: solid 5px;
-    /* border: ; */
     border-color: black;
+    border-radius: 0;
 }
 
-.ProjectContainer {
+.project-container {
     height: 100%;
+    width: 100%;
     display: flex;
     align-items: center;
-    /* justify-content: space-between; */
+    justify-content: start;
     gap: 5%;
     flex-direction: column;
 }
 
-.TitleText {
+
+.title-text {
     height: 100%;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    /* align-items: center; */
+    justify-content: start;
     gap: 5%;
-
 }
 
-.CarouselContainer {
+.carousel-container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
-    height: 100%;
-    width: 50%;
+    justify-content: center;
+  
 }
 
-
-
-.Carousel {
-    /* scroll-behavior: smooth; */
+.carousel {
     width: 50%;
+    min-width: 50%;
     height: 100%;
 }
 
 .slide {
     background-color: var(--cool-gray);
-    width: 100%;
-    height: 300px;
+    /* width: 100%; */
+    /* height: 500px; */
     border-radius: 10px;
     overflow: hidden;
 }
-</style>
\ No newline at end of file
+
+.img-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    background-color: var(--light-pink);
+}
+
+.carousel-item {
+    max-width: 80%;
+    overflow: hidden;
+    /* height: 100%; */
+}
+
+@media (max-width: 425px) { 
+
+    .title { 
+        /* background-color: aqua; */
+        grid-template-rows: 1fr 1fr;
+        grid-template-columns: none;
+    }
+
+    .carousel-item {
+    max-width: 50%;
+}
+}
+</style>
diff --git a/docs/.vuepress/components/Service.vue b/docs/.vuepress/components/Service.vue
index 21f4a57..47661f2 100644
--- a/docs/.vuepress/components/Service.vue
+++ b/docs/.vuepress/components/Service.vue
@@ -1,24 +1,24 @@
 <template>
-    <section id="Service">
-        <div class="textContainer">
+    <section id="service">
+        <div class="text-container">
             <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>
+        <div class="options">
+            <div class="option">
+                <h1>Create</h1>
+                <span id="line"></span>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
             </div>
-            <div class="Option">
-                <h2>Share</h2>
-                <span id="Line"></span>
+            <div class="option">
+                <h1>Share</h1>
+                <span id="line"></span>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
             </div>
-            <div class="Option">
-                <h2>Experience</h2>
-                <span id="Line"></span>
+            <div class="option">
+                <h1>Experience</h1>
+                <span id="line"></span>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
             </div>
         </div>
@@ -30,51 +30,46 @@
 </script>
 
 <style scoped>
-#Service {
-    /* height: 80vh; */
-    display: flex;
-    flex-direction: column;
-    gap: 100px;
-    margin-bottom: 15vw;
+#service {
+    height: 80vh;
+    display: grid;
+    grid-template-rows: 1fr 1.5fr;
+
+
+    margin-bottom: 15%;
 }
-.textContainer {
+
+.text-container {
     width: 40%;
     padding: 5%;
- 
-    /* gap: 10px; */
+
 }
 
-.Options {
-    display: flex;
+.options {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     gap: 10%;
 }
-.Option h2 {
-    font-size: 2vw;
 
-}
-.Option {
+
+.option {
     display: flex;
     flex-direction: column;
-    font-size: 1.5vw;
     border-radius: 5px;
     padding: 20px 20px;
-    height: 30vw;
+    height: 100%;
 }
 
-.Option:nth-of-type(2) { 
+.option:nth-of-type(2) { 
     background-color: #bdb0bc;
 }
 
-#Line {
+#line {
     background-color: black;
     width: 25%;
     height: 3px;
 }
-
-
-
-
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vuepress/components/Title.vue b/docs/.vuepress/components/Title.vue
index 452e320..5acc3b2 100644
--- a/docs/.vuepress/components/Title.vue
+++ b/docs/.vuepress/components/Title.vue
@@ -1,21 +1,17 @@
 <template>
-  <section id="Title">
-    <div class="textContainer">
-
+  <section id="title" class="grid-container">
+    <div class="text-container grid-item">
       <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> -->
-
-
+      <h3></h3>
     </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 class="img-container grid-item">
+      <img src="/img/VR-man.png" alt="VR Man" id="vr-man" />
+      <div class="design-elements">
+        <img src="/img/VR-element-1.svg" alt="" class="vr-design-element" />
+        <img src="/img/VR-element-2.svg" alt="" class="vr-design-element" />
+        <img src="/img/VR-element-3.svg" alt="" class="vr-design-element" />
       </div>
     </div>
   </section>
@@ -25,92 +21,146 @@
 import { ref } from 'vue';
 
 export default {
-  name: 'Title',
-
+  name: 'title',
   methods: {
     goToOtherPage() {
       this.$router.push({
         path: '/context',
-        query: { someData: '1' }
+        query: { someData: '1' },
       });
     },
-
-
-  }
+  },
+  
 };
 </script>
 
-
-
 <style scoped>
+/* Grid System Styles */
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  height: 100vh;
+  align-items: center;
+}
 
-
-.cls-btn {
+.grid-item {
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  align-items: center;
-  color: rgb(255, 0, 0);
-  z-index: 1;
-  cursor: pointer;
-  height: 5%;
-  margin: 1%;
-  font-size: 4vw;
 }
 
+/* Text Container Styling */
+.text-container {
+  padding: 10%;
+  gap: 30px;
+  max-width: 400px;
+}
 
+.text-container h1 {
+  font-size: 40px;
+}
 
+.text-container h3 {
+  font-size: 1.5rem;
+}
 
-#Title {
-  display: flex;
-  flex-direction: row;
-  height: 100vh;
+.my-button {
+
+  /* padding: 10px 20px; */
+  font-size: 16px;
+  cursor: pointer;
 }
 
-.imgContainer {
-  z-index: 0;
-  background-color: transparent;
-  position: absolute;
-  right: 0;
-  height: 50vw;
-  width: 60%;
+/* Image Container Styling */
+.img-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-#VR-man {
-  height: 100%;
-  width: 100%;
+#vr-man {
+  z-index: 1;
+  max-width: 100%;
+  height: auto;
 }
 
-.DesingElemnts {
-  height: 100%;
-  width: 100%;
-  display: flex;
+.design-elements {
   position: absolute;
+  display: flex;
   justify-content: center;
-  z-index: -1;
+  gap: 20%;
   top: 0;
-  gap: 10%;
+  /* width: 100%; */
+  max-width: 30%;
 }
 
-.DesingElemnts img:nth-of-type(1) {
+.design-elements img:nth-of-type(1) {
   position: relative;
   bottom: -100px;
 }
 
-.DesingElemnts img:nth-of-type(3) {
+.design-elements img:nth-of-type(3) {
   position: relative;
   bottom: -60px;
 }
+@media (max-width: 768px) { 
+  .text-container h1 {
+    font-size: 25px;
+  }
+  .text-container h3 {
+    font-size: 15px;
+  }
+  .text-container {
 
-.textContainer {
-  padding: 10%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 30px;
-  width: 30%;
+  max-width: 300px;
+}
+
+.my-button {
+
+  width: 100px;
+  height: 50px;
+font-size: 10px;
+cursor: pointer;
+}
+
+.grid-container {
+  height: 80vh;
+}
+.design-elements img:nth-of-type(1) {
+  position: relative;
+  bottom: -10px;
 }
 
-/* .textContainer h3 {
-  font-size: 20px;
-} */
-</style>
\ No newline at end of file
+.design-elements img:nth-of-type(3) {
+  position: relative;
+  bottom: -30px;
+}
+}
+
+@media (max-width: 320px) { 
+  .text-container h1 {
+    font-size: 15px;
+  }
+  .text-container h3 {
+    font-size: 10px;
+  }
+  .text-container {
+    gap: 10px;
+  max-width: 400px;
+
+  }
+
+.grid-container {
+  height: 50vh;
+}
+
+.my-button {
+font-size: 16px;
+
+}
+
+
+}
+</style>
diff --git a/docs/.vuepress/components/login.vue b/docs/.vuepress/components/login.vue
new file mode 100644
index 0000000..fefe788
--- /dev/null
+++ b/docs/.vuepress/components/login.vue
@@ -0,0 +1,144 @@
+<template>
+    <section>
+        <div class="grid-container">
+            <div class="form-container">
+                <div>
+                    <h1>Please fill in your login details</h1>
+                </div>
+                <form @submit="login" class="login-form">
+                    <input type="email" name="email" id="email" placeholder="Email" required>
+                    <input type="password" name="password" id="password" placeholder="Password" required>
+                    <div class="login-msg"></div>
+                    <a href="#">Forgot password?</a>
+                    <button type="submit">Login</button>
+                </form>
+            </div>
+            <div class="message-container" v-if="msg">
+                <h4 v-if="msg">{{ msg }}</h4>
+
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: 'Login',
+    data() {
+        return {
+            msg: null
+        };
+    },
+    methods: {
+        login(event) {
+            event.preventDefault();
+            console.log("Submitted, bro! 🤙");
+            this.msg = "Unknown e-mail address or wrong password";
+        
+
+
+        }
+    }
+};
+</script>
+
+<style scoped>
+section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 100px;
+    margin-bottom: 0%;
+}
+
+.grid-container {
+    display: flex;
+   flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 50%;
+    max-width: 800px;
+    background-color: var(--cool-gray);
+    border-radius: 10px;
+    padding: 30px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+    gap: 5%;
+}   
+
+.form-container {
+    flex: 1 1 60%;
+    display: grid;
+    gap: 20px;
+}
+
+.message-container {
+    background-color: lightcoral;
+    border: solid 2px red;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+}
+
+h1 {
+    font-size: 20px;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+h4 {
+    /* background-color: lightcoral;
+    border: solid 2px red; */
+    margin-top: 0;
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+input {
+    padding: 12px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+    transition: border-color 0.2s ease;
+}
+
+input:focus {
+    outline: none;
+    border-color: var(--vp-c-accent-hover);
+}
+
+a {
+    /* text-align: right; */
+    font-size: 14px;
+    color: var(--vp-c-text);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+a:hover {
+    color: var(--vp-c-accent-hover);
+}
+
+button {
+    padding: 12px;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--vp-c-text);
+    border: 2px solid var(--vp-c-text);
+    background-color: transparent;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+button:hover {
+    background-color: var(--vp-c-accent-hover);
+    color: #fff;
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 15e3dc5..350f34a 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -10,7 +10,7 @@ export default defineUserConfig({
         preprocessorOptions: {
           scss: {
             // Uncomment if using SCSS variables
-            // additionalData: '@import "layouts/styles/index.scss";',
+            // additionalData: 'import stylesindex.scss',
           },
         },
       },
@@ -19,7 +19,7 @@ export default defineUserConfig({
 
   // Site meta and styles
   head: [
-    ["link", { rel: "stylesheet", href: "/styles/index.scss" }],
+    ["link", { rel: "stylesheet", href: "/styles/index.css" }],
     ["link", { rel: "icon", href: "/icon/logo.svg" }],
     ["link", { rel: "icon", href: "/icon/logo.svg" }],
   ],
@@ -44,10 +44,10 @@ export default defineUserConfig({
     },
     navbar: [
       { text: "About Project XR", link: "#about", class: "button" },
-      { text: "Our Service", link: "#Service" },
-      { text: "Projects", link: "#Projects" },
+      { text: "Our Service", link: "#service" },
+      { text: "Projects", link: "#projects" },
       // { text: "Plans & Pricing", link: "#StepsContainer" },
-      { text: "Log In", link: "/config/README.md" },
+      { text: "Log In", link: "/login.md" },
     ],
     sidebar: false,
     logo: "/icon/logo.svg",
@@ -57,6 +57,9 @@ export default defineUserConfig({
       disableSwitch: true, // Hide the dark mode toggle
       respectPrefersColorScheme: false, // Don't care about system settings
     },
+    lastUpdated: false,
+    contributors: false,
+    editLink: false,
     
   }),
 
diff --git a/docs/.vuepress/data/Projects.json b/docs/.vuepress/data/Projects.json
index 45b1519..381b1da 100644
--- a/docs/.vuepress/data/Projects.json
+++ b/docs/.vuepress/data/Projects.json
@@ -5,7 +5,7 @@
             "img/Mail - wit.svg",
             "img/circle_user_icon.svg"
         ],
-        "name": "Porject 1",
+        "name": "project 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?"
         ],
@@ -20,7 +20,7 @@
             "img/Samsung Wallpaper_01.jpg",
             "img/Samsung Wallpaper_01.jpg"
         ],
-        "name": "Porject 2",
+        "name": "project 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?"
@@ -33,7 +33,7 @@
         "image": [
             "img/Mail - wit.svg"
         ],
-        "name": "Porject 3",
+        "name": "project 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?"
             
@@ -47,7 +47,7 @@
             "img/Mail - wit.svg",
             "img/Mail - wit.svg"
         ],
-        "name": "Porject 3",
+        "name": "project 4",
         "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?"
             
diff --git a/docs/.vuepress/layouts/layout.vue b/docs/.vuepress/layouts/layout.vue
index 1a8681b..21d02b7 100644
--- a/docs/.vuepress/layouts/layout.vue
+++ b/docs/.vuepress/layouts/layout.vue
@@ -13,6 +13,7 @@
 import Footer from "../components/Footer.vue";
 // Import the default theme layout
 import Layout from "@vuepress/theme-default/lib/client/layouts/Layout.vue";
+import "./styles/index.scss"
 
 export default {
     components: {
diff --git a/docs/.vuepress/public/styles/index.scss b/docs/.vuepress/layouts/styles/index.scss
similarity index 79%
rename from docs/.vuepress/public/styles/index.scss
rename to docs/.vuepress/layouts/styles/index.scss
index 7763c27..72a1e6f 100644
--- a/docs/.vuepress/public/styles/index.scss
+++ b/docs/.vuepress/layouts/styles/index.scss
@@ -1,12 +1,5 @@
 
 
-@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;
-}
 
 
 
@@ -20,12 +13,26 @@
   --light-pink: #bdb0bc;
   --px-bg-color: #ecebec;
   --cool-gray: #8e98a4; 
+  --content-width: 1400px;
   // --vp-c-bg: #ecebec;
 }
+// $content-width: 50px;
+@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;
+}
 
 .vp-page .theme-default-content { 
-  max-width: 100%
-  ;
+  max-width: 100%;
+  display: grid;
+  // max-width: 1200px;
+  margin: 0;
+  padding: 0;
+  // border: solid black 5px;
+  // margin-top: 0 !important;
 }
 
 
@@ -39,11 +46,13 @@ html {
 body {
   font-family: 'Open Sans', sans-serif;
   background-color: var(--px-bg-color);
+
   // overflow: hidden;
 }
 
 
 
+
 section {
   margin-bottom: 30%;
 
@@ -58,15 +67,11 @@ section {
 }
 
 .vp-page {
+  display: flex;
+  justify-content: center;
   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 ;
@@ -74,7 +79,7 @@ button.vp-toggle-color-mode-button {
 
 .theme-default-content h1, .theme-default-content h2, .theme-default-content h3 {
   margin-top: 0 !important;
-
+;
 }
 
 h1, h2,  h3, p {
@@ -87,7 +92,7 @@ h1, h2,  h3, p {
 }
 
 h1 {
-  font-size: 3vw;
+  font-size: 35px;
 }
 h3 {
   font-size: 1.5vw;
@@ -98,9 +103,9 @@ a {
 }
 button {
   color: black;
-  width: 20vw;
+  width: 15vw;
   height: 5vw;
-  font-size: 1.5vw;
+  font-size: 20px;
   font-weight: 600;
   background-color: #ecebec;
 
@@ -116,10 +121,28 @@ button:active {
 
 
 @media (max-width: 768px) { 
+  h1 {
+    font-size: 20px;
+  }
+  p {
+    font-size: 10px;
+  }
   // h1, h2,  h3, p {
   //   font-size: 1vw;
   // }
 }
+@media (max-width: 419px) { 
+  .theme-default-content h1 {
+    font-size: 15px;
+
+  }
+  p {
+    font-size: 10px;
+  }
+  .my-button {
+    font-size:10px;
+  }
+}
   
 
 
diff --git a/docs/.vuepress/public/styles/index.css b/docs/.vuepress/public/styles/index.css
new file mode 100644
index 0000000..9d60d6d
--- /dev/null
+++ b/docs/.vuepress/public/styles/index.css
@@ -0,0 +1,150 @@
+
+
+
+
+
+:root {
+  --vp-c-text: #171923;
+  --vp-c-accent: #171923 ;
+  --back-to-top-c-icon: #171923;
+  --navbar-height: 5rem;
+  --navbar-padding-l: 5rem;
+  --vp-c-accent-bg: #171923;
+  --vp-c-accent-hover: #0f1117;
+  --light-pink: #bdb0bc;
+  --px-bg-color: #ecebec;
+  --cool-gray: #8e98a4; 
+  --content-width: 1200px;
+  /* // --vp-c-bg: #ecebec; */
+  --content-width: 50px;
+}
+@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;
+}
+
+.vp-page .theme-default-content { 
+  width: 100%;
+  display: grid;
+  /* // max-width: 1200px; */
+  margin: 0;
+  padding: 0;
+  /* // border: solid black 5px; */
+  /* // margin-top: 0 !important; */
+}
+
+
+::-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 {
+  display: flex;
+  justify-content: center;
+  padding-bottom: 0;
+}
+
+
+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, h4, p {
+  /* // margin-top: 0 !important; */
+  margin-bottom: 0px !important;
+  padding: 0 !important;
+  border: 0;
+  color: var(--vp-c-text);
+  
+}
+
+h1 {
+  font-size: 20px;
+}
+h2 {
+  font-size: 14px
+  ;
+}
+
+a {
+  font-weight: 600;
+}
+button {
+  color: black;
+  width: 15vw;
+  height: 5vw;
+  font-size: 20px;
+  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 {
+    font-size: 20px;
+  }
+  p {
+    font-size: 10px;
+  }
+  /* // h1, h2,  h3, p {
+  //   font-size: 1vw;
+  // } */
+}
+@media (max-width: 425) { 
+  .theme-default-content h1 {
+    font-size: 15px;
+
+  }
+  p {
+    font-size: 10px;
+  }
+  .my-button {
+    font-size:10px;
+  }
+}
+  
+
+
+
+
diff --git a/docs/context.md b/docs/context.md
index c7dc80b..f8f21ee 100644
--- a/docs/context.md
+++ b/docs/context.md
@@ -22,9 +22,9 @@ title: Project XR
     }
 
     
-    if (!page) {
-        router.push({ name: '404' });
-    }
+    // if (!page) {
+    //     router.push({ name: '404' });
+    // }
 </script>         
 
 
diff --git a/docs/index.md b/docs/index.md
index 11b86f9..fe947dd 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -15,8 +15,6 @@ import Footer from '../../components/Footer.vue'
 </script>
 
 <Title />
-
-
 <About />
 <Service />
 <Projects />
diff --git a/docs/login.md b/docs/login.md
new file mode 100644
index 0000000..a90a679
--- /dev/null
+++ b/docs/login.md
@@ -0,0 +1,12 @@
+---
+title: project-XR
+lang: en-US
+darkMode: disable
+# smoothScroll: true
+---
+
+<script setup>
+import login from '../../components/login.vue'
+</script>
+
+<login />