inital commit

src/AppComponent.vue

@@ -0,0 +1,88 @@
+<template>
+  <div id="app">
+    <HeaderComponent />
+    <main class="content-section">
+      <div class="left-column">
+        <router-view />
+      </div>
+      <div class="right-column">
+        <router-view name="rightColumn" />
+      </div>
+    </main>
+    <FooterComponent />
+  </div>
+</template>
+
+<script>
+import HeaderComponent from './common/components/HeaderComponent.vue';
+import FooterComponent from './common/components/FooterComponent.vue';
+
+export default {
+  name: 'AppComponent',
+  components: {
+    HeaderComponent,
+    FooterComponent,
+  }
+};
+</script>
+
+<style>
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #ffffff;
+  font-family: Arial, sans-serif;
+  width: 100%;
+  overflow: hidden;
+}
+
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.content-section {
+  flex: 1;
+  display: flex;
+  color: #000;
+  overflow: hidden;
+}
+
+.left-column, .right-column {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.left-column {
+  margin: 0.5em 0 0.5em 0.5em;
+  background-color: #ffffff;
+}
+
+.right-column {
+  background-color: #d9e2f3;
+}
+
+.right-column h2 {
+  text-align: center;
+  color: #000;
+}
+
+.right-column img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+  height: auto;
+}
+
+@media (max-width: 768px) {
+  .content-section {
+    flex-direction: column;
+  }
+
+  .left-column, .right-column {
+    padding: 10px;
+  }
+}
+</style>