Merge remote-tracking branch 'origin/release'

keoinn · Oct 5, 2024 · 821303e · 821303e
2 parents b4db233 + fe7427a
commit 821303e
Show file tree

Hide file tree

Showing 14 changed files with 669 additions and 33 deletions.
diff --git a/src/assets/fonts/Gilroy-ExtraBold.otf b/src/assets/fonts/Gilroy-ExtraBold.otf
diff --git a/src/assets/fonts/Gilroy-Light.otf b/src/assets/fonts/Gilroy-Light.otf
diff --git a/src/assets/bg.png → src/assets/images/bg.png b/src/assets/bg.png → src/assets/images/bg.png
diff --git a/src/assets/images/virtual_orrery.jpeg b/src/assets/images/virtual_orrery.jpeg
diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -1,12 +1,24 @@
 <template>
   <div class="navigation-container">
     <div class="navigation-bar">
-      <div class="navigation-text text-wrapper-1">Education</div>
-      <div class="navigation-text text-wrapper-2">Event</div>
-      <div class="navigation-text text-wrapper-3">Lab</div>
-      <div class="navigation-text text-wrapper-4">Challenge</div>
-      <div class="navigation-text text-wrapper-5">Tour</div>
-      <div class="navigation-text text-wrapper-6">About</div>
+      <div class="navigation-text text-wrapper-1">
+        <span @click="$router.push('/orrery')"> Education </span>
+      </div>
+      <div class="navigation-text text-wrapper-2">
+        <span @click="$router.push('/orrery')"> Event </span>
+      </div>
+      <div class="navigation-text text-wrapper-3">
+        <span @click="$router.push('/orrery')"> Lab </span>
+      </div>
+      <div class="navigation-text text-wrapper-4">
+        <span @click="$router.push('/orrery')"> Challenge </span>
+      </div>
+      <div class="navigation-text text-wrapper-5">
+        <span @click="$router.push('/orrery')"> Tour </span>
+      </div>
+      <div class="navigation-text text-wrapper-6">
+        <span @click="$router.push('/orrery')"> About </span>
+      </div>
     </div>
   </div>
 </template>
@@ -52,7 +64,7 @@
     }
   }
 
-  .text-wrapper-1{
+  .text-wrapper-1 {
     left: 0;
   }
   .text-wrapper-2 {

diff --git a/src/components/AppHeaderLogo.vue b/src/components/AppHeaderLogo.vue
@@ -1,9 +1,9 @@
 <script setup>
-import logo_img from '@/assets/gaiaLogo.svg'
+import logo_img from "@/assets/gaiaLogo.svg";
 </script>
 
 <template>
-  <div class="nav-logo">
+  <div class="nav-logo" @click="$router.push('/')">
     <div class="group">
       <div class="text-wrapper">Gaia Room</div>
       <img class="vector" alt="Vector" :src="logo_img" />
@@ -13,40 +13,40 @@ import logo_img from '@/assets/gaiaLogo.svg'
 
 <style scoped lang="scss">
 .nav-logo {
-//   box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.5);
-  height: 50px;
   width: 200px;
+  height: 50px;
   z-index: 200;
+  position: absolute;
+  top: 25px;
+  left: 50px;
 
   .group {
+    width: 200px;
     height: 54px;
     position: relative;
     top: 25px;
     left: 50px;
-    width: 200px;
     z-index: 200;
 
     .text-wrapper {
-    color: #ffffff;
-    font-family: "Gilroy-ExtraBold", Helvetica;
-    font-size: 20px;
-    font-weight: 800;
-    left: 50px;
-    letter-spacing: 2px;
-    line-height: normal;
-    position: absolute;
-    top: 0;
-  }
+      color: #ffffff;
+      font-family: "Gilroy-ExtraBold", Helvetica;
+      font-size: 20px;
+      font-weight: 800;
+      left: 50px;
+      letter-spacing: 2px;
+      line-height: normal;
+      position: absolute;
+      top: 0;
+    }
 
-  .vector {
-    height: 50px;
-    left: 0;
-    position: absolute;
-    top: 4px;
-    width: 50px;
-  }
+    .vector {
+      height: 50px;
+      left: 0;
+      position: absolute;
+      top: 4px;
+      width: 50px;
+    }
   }
-
-
 }
 </style>
diff --git a/src/components/ExplorationHero.vue b/src/components/ExplorationHero.vue
@@ -0,0 +1,83 @@
+<script setup>
+import virtual_orrey from '@/assets/images/virtual_orrery.jpeg'
+
+</script>
+<template>
+  <section class="exploration-hero">
+    <h1 class="exploration-title">Look beyond Earth. <br />Explore with us!</h1>
+  </section>
+  <div class="module-container">
+    <div class="submodule submodule-orrery">
+      <h1 class="orrery-title">Virtual Orrery</h1>
+      <p class="orrery-description">
+        Let's explore <br />the Solar System!
+      </p>
+    </div>
+  </div>
+  <div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.exploration-hero {
+  max-width: 866px;
+  position: relative;
+  top: 12%;
+  left: 12%;
+}
+
+.exploration-title {
+  color: #fff;
+  font: 800 64px/80px Gilroy, sans-serif;
+  letter-spacing: 6.4px;
+  padding: 17px 0;
+}
+
+.module-container {
+  position: relative;
+  top: 12%;
+  left: 12%;
+
+  .submodule {
+    height: 380px;
+    border: 2px solid white;
+    border-radius: 25px;
+  }
+
+  .submodule-orrery {
+    padding: 38px 80px 38px 35px;
+
+    width: 480px;
+    // background-color: aqua;
+    background: v-bind("`no-repeat center/90% url('${virtual_orrey}')`");
+  }
+
+  .orrery-title {
+  position: relative;
+  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
+  font-size: 40px;
+  line-height: 1;
+  letter-spacing: 4px;
+}
+
+.orrery-description {
+  position: relative;
+  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
+  font-size: 24px;
+  line-height: 35px;
+  letter-spacing: 2.4px;
+  margin-top: 185px;
+}
+}
+
+
+/* 
+@media (max-width: 991px) {
+  .exploration-title {
+    font-size: 40px;
+    line-height: 55px;
+    max-width: 100%;
+    padding-right: 20px;
+  }
+} */
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
@@ -1,4 +1,5 @@
 <script setup>
+import font_url from '@/assets/fonts/Gilroy-ExtraBold.otf'
 </script>
 
 <template>
@@ -14,4 +15,9 @@
   </v-app>
 </template>
 
-
+<style>
+@font-face {
+  font-family: 'Gilroy';
+  src: v-bind("`url('${font_url}')`");
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
@@ -1,7 +1,9 @@
 <template>
-  <SmorreryScence />
+  <ExplorationHero />
 </template>
 
 <script setup>
+import ExplorationHero from '@/components/ExplorationHero.vue';
+
   //
 </script>