vista maquetada de informacion personal form

src/view/Home.vue

@@ -1,15 +1,22 @@
 <template>
+<div>
+<Header></Header>
 <div class="container my-5">
-  <h1>Hola</h1>
+  <h1 class="text-center">Home</h1>
+</div>
+<Footer></Footer>
 </div>
 </template>
 
 <script>
-export default {
+import Header from '../components/Header'
+import Footer from '../components/Footer'
 
+
+export default {
+components: {
+        Header,
+        Footer
+    }
 }
 </script>
-
-<style>
-
-</style>

src/view/PersonalData.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+<Header></Header>
+  
+<div class="my-5">  
+  
+<div class="row">
+
+<section class="col-10 col-sm-7 col-md-7 col-lg-7 col-xl-7 offset-1">
+  <ShoppingNav></ShoppingNav>
+
+  <form class="mt-4">
+  <div class="form-group">
+    <label for="exampleInputEmail1">Email address</label>
+    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
+    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+  </div>
+  <div class="form-group">
+    <label for="exampleInputPassword1">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+  </div>
+  <div class="form-check">
+    <input type="checkbox" class="form-check-input" id="exampleCheck1">
+    <label class="form-check-label" for="exampleCheck1">Check me out</label>
+  </div>
+  <button type="submit" class="btn btn-primary">Submit</button>
+</form>
+
+</section>
+
+<aside class="col-10 col-sm-2 col-md-2 col-lg-2 col-xl-2 offset-1 bg-primary">
+  <h3 class="text-center">status</h3>
+</aside>
+
+</div>
+
+</div>
+
+<Footer></Footer>
+  </div>
+</template>
+
+<script>
+import Header from '../components/Header'
+import Footer from '../components/Footer'
+import ShoppingNav from '../components/ShoppingNav'
+
+
+export default {
+components: {
+        Header,
+        Footer,
+        ShoppingNav
+    }
+}
+</script>
+
+<style scoped>
+
+</style>