Fixed indents and other formatting issues, modified homepage

apps/api/src/main.ts

@@ -28,7 +28,7 @@ async function bootstrap() {
   await app.listen(port);
 
   Logger.log(
-    `🚀 Application is running on: http://localhost:${port}/ (API prefix: /${globalPrefix})`,
+    `🚀 Application is running on: http://localhost:${port}/ (API prefix: /${globalPrefix})`
   );
 }
 

apps/web/src/app/App.spec.ts

@@ -1,11 +0,0 @@
-import router from '../router';
-import { mount } from '@vue/test-utils';
-import App from './App.vue';
-
-describe('App', () => {
-  it('renders properly', async () => {
-    const wrapper = mount(App, { global: { plugins: [router] } });
-    await router.isReady();
-    expect(wrapper.text()).toContain('Welcome web 👋');
-  });
-});

apps/web/src/app/App.vue

@@ -1,44 +1,93 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-</script>
+<script setup lang="ts" />
 
 <template>
-  <header>
-    <nav>
-      <RouterLink to="/">Home</RouterLink>
-      <RouterLink to="/about">About</RouterLink>
-    </nav>
-  </header>
-  <RouterView />
+  <main class="home">
+    <section class="hero">
+      <h1>Welcome to Agentic Trainers</h1>
+      <p>
+        Automate onboarding and support new team members with AI agents. Our
+        platform creates domain-specific training workflows tailored to each
+        role.
+      </p>
+      <router-link to="/about" class="cta-button"> Learn More </router-link>
+    </section>
+
+    <section class="features">
+      <h2>Key Features</h2>
+      <ul>
+        <li>Reusable AI-powered workflows for role induction.</li>
+        <li>Adaptive guidance tailored to each team member.</li>
+        <li>Track progress and generate actionable insights.</li>
+        <li>Extensible to any domain or industry.</li>
+      </ul>
+    </section>
+
+    <section class="get-started">
+      <h2>Get Started</h2>
+      <p>
+        Begin your AI-driven onboarding journey today. Explore how our agentic
+        approach can help your team succeed faster.
+      </p>
+      <router-link to="/about" class="cta-button"> Explore Now </router-link>
+    </section>
+  </main>
 </template>
 
-<style scoped lang="css">
-header {
-  line-height: 1.5;
-  max-width: 100vw;
+<style scoped>
+.home {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 1rem;
 }
 
-nav > a {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.hero {
+  text-align: center;
+  margin-bottom: 3rem;
 }
 
-@media (min-width: 768px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 768px;
-  }
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
 
-  nav {
-    text-align: left;
-    font-size: 1rem;
+.hero p {
+  font-size: 1.25rem;
+  margin-bottom: 2rem;
+}
 
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
+.cta-button {
+  background-color: #4f46e5;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.cta-button:hover {
+  background-color: #4338ca;
+}
+
+.features {
+  margin-bottom: 3rem;
+}
+
+.features h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.features ul {
+  list-style-type: disc;
+  padding-left: 1.5rem;
+}
+
+.get-started h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.get-started p {
+  margin-bottom: 1.5rem;
 }
 </style>