edit

edit

fe-sarpras/src/components/Dashboard/Dashboard.vue

@@ -3,7 +3,7 @@
         <!-- Navbar -->
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
             <div class="container">
-                <h1 class="navbar-brand">Dashboard Peminjaman</h1>
+                <h1 class="navbar-brand">APLAB</h1>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
@@ -23,7 +23,7 @@
         <!-- Hero Section -->
         <div class="hero bg-primary text-center py-5">
             <div class="container">
-                <h2 class="display-4">Selamat Datang di Dashboard Peminjaman</h2>
+                <h2 class="display-4">APLAB</h2>
                 <p class="lead">Akses semua informasi peminjaman dengan mudah dan cepat.</p>
             </div>
         </div>
@@ -32,8 +32,8 @@
         <div class="container mt-5">
             <div class="card shadow-sm">
                 <div class="card-body">
-                    <h3 class="card-title text-center">Dashboard Peminjaman</h3>
-                    <p class="card-text text-center">Selamat datang di Dashboard Peminjaman.</p>
+                    <h3 class="card-title text-center">APLAB</h3>
+                    <p class="card-text text-center">Selamat datang di APLAB.</p>
                     <p class="card-text text-center">Silakan login menggunakan menu di atas.</p>
                 </div>
             </div>

fe-sarpras/src/views/Landing.vue

 <template>
-    <div class="container">
-      <div class="content">
-        <h1>APLAB</h1>
-        <p>Aplikasi Peminjaman Alat, Alat BHP, dan Ruang D3 Teknik Informatika</p>
-        <button @click="goToHome">Mulai</button>
-      </div>
-      <div class="illustration">
-        <!-- Gambar ilustrasi di sini -->
+  <div class="landing-container">
+    <div class="landing-content">
+      <div class="logo">
+        <img :src="require('@/assets/img/Screenshot_2024-06-03_152649-removebg-preview.png')" alt="logo">
       </div>
+        <h1 class="landing-title">APLAB</h1>
+      <p class="landing-paragraph">Aplikasi Peminjaman Alat, Alat BHP, dan Ruang D3 Teknik Informatika</p>
+      <button class="landing-button" @click="goToHome">Mulai </button>
+    </div>
+    <div class="illustration">
+      <img :src="require('@/assets/img/Screenshot_2024-06-03_143950-removebg-preview.png')" alt="Ilustrasi">
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'App',
-    methods: {
-      goToHome() {
-        // Navigasi ke rute login menggunakan router.push
-        this.$router.push('/home');
-      }
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  methods: {
+    goToHome() {
+      // Navigasi ke rute login menggunakan router.push
+      this.$router.push('/home');
     }
   }
-  </script>
-  
-  <style scoped>
-  .container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px;
-    background-color: #195E8B;
-    color: #FFFFFF;
-    height: 100vh;
-  }
-  
-  .content {
-    max-width: 50%;
-  }
-  /* 
-  .illustration {
-    max-width: 40%; */
-    /* Tambahkan gambar ilustrasi dengan CSS background-image */
-    /* background-image: url('./illustration.jpg'); Adjust the path to your image */
-    /* background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  } */
-  </style>
-  
\ No newline at end of file
+}
+</script>
+
+<style scoped>
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.logo {
+  max-width: 40%;
+  margin-right: 150px;
+}
+
+.logo img {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  margin-right:100px;
+  margin-bottom:100px;
+  margin-left:-20px;
+  margin-top:-60px;
+}
+
+.landing-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: #195E8B;
+  color: #FFFFFF;
+  height: 100vh;
+  box-sizing: border-box;
+}
+
+.landing-content {
+  max-width: 50%;
+  margin-left: 90px;
+}
+
+.landing-title {
+  font-weight: bold;
+  font-size: 36px; 
+  margin-top:-30px;
+  margin-bottom:30px;
+}
+
+.landing-paragraph {
+  font-weight: bold;
+  margin-top:10px;
+  margin-bottom:10px;
+  font-size: 24px;
+}
+
+.landing-button {
+  padding: 10px; 
+  background-color: #f6ec04; 
+  color: #195E8B; 
+  border: none; 
+  cursor: pointer; 
+  margin-top:10px;
+  margin-bottom:10px;
+  font-size: 24px;
+  width: 90px; 
+  height: 55px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius:5px;
+}
+
+.landing-button:hover {
+  background-color: #999999; 
+}
+
+.illustration {
+  max-width: 40%;
+  margin-right: 150px;
+}
+
+.illustration img {
+  width: 120%;
+  height: 120%;
+  display: flex;
+  margin-right:100px;
+}
+</style>