v.0.0.1 merged from non ts version

src/App.vue

@@ -1,11 +1,40 @@
-<script setup lang="ts"></script>
+<script setup>
+import FirstVueComponent from "./components/FirstVueComponent.vue";
+import SecondVueComponent from "./components/SecondVueComponent.vue";
+import FetchFromApi from "./components/FetchFromApi.vue";
+
+import pkg from "../package.json"; // Works out-of-the-box in Vite
+
+document.title = `${pkg.name} ${pkg.version}©2026`;
+</script>
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <div class="container">
+    <FirstVueComponent class="component-box-fade" />
+    <SecondVueComponent class="component-box-fade" />
+    <FetchFromApi class="component-box-fade" />
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.container {
+  display: flex;
+  gap: 5px; /* optional spacing between columns */
+  justify-content: space-between;
+}
+
+.component-box-simple {
+  background-color: rgba(173, 202, 193, 0.6);
+  width: 30%;
+}
+
+.component-box-fade {
+  /* Fades from your color on the left to fully transparent on the right */
+  background: linear-gradient(
+    to bottom right,
+    rgba(180, 231, 207, 0.5),
+    rgba(28, 72, 167, 0.6)
+  );
+  width: 30%;
+}
+</style>