first commit

resources/css/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/js/Pages/About/About.vue

@@ -0,0 +1,22 @@
+<template>
+  <layout
+    ><div class="space-y-2 text-center">
+      <h1 class="font-bold text-transparent text-9xl bg-gradient-to-r bg-clip-text from-purple-400 via-green-400 to-purple-600">About US</h1>
+      <h2 class="text-3xl font-semibold">{{ Text }} 🖖</h2>
+    </div>
+  </layout>
+</template>
+
+<script>
+import Layout from "../../Shared/Layout.vue";
+
+export default {
+  props: ["Text"],
+  components: {
+      layout: Layout,
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/Pages/welcome.vue

@@ -0,0 +1,22 @@
+<template>
+  <layout
+    ><div class="space-y-2 text-center">
+      <h1 class="font-bold text-transparent text-9xl bg-gradient-to-r bg-clip-text from-purple-400 via-green-400 to-purple-600">Welcome</h1>
+      <h2 class="text-3xl font-semibold">{{ Text }} 🖖</h2>
+    </div>
+  </layout>
+</template>
+
+<script>
+import Layout from "../Shared/Layout.vue";
+
+export default {
+  props: ["Text"],
+  components: {
+    layout: Layout,
+  },
+};
+</script>
+
+<style>
+</style>

resources/js/Shared/Layout.vue

@@ -0,0 +1,20 @@
+<template>
+  <navbar></navbar>
+  <div class="flex items-center justify-center w-full h-screen bg-gray-100">
+    <slot />
+  </div>
+</template>
+
+<script>
+import navbar from './navbar.vue';
+
+export default {
+  components: { navbar },
+  data() {
+    return {
+
+    }
+  },
+  methods: {},
+};
+</script>

resources/js/Shared/navbar.vue

@@ -0,0 +1,58 @@
+<template>
+<nav class="bg-gray-800">
+  <div class="px-2 mx-auto max-w-7xl sm:px-6 lg:px-8">
+    <div class="relative flex items-center justify-between h-16">
+      <div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
+        <!-- Mobile menu button-->
+        <button class="inline-flex items-center justify-center p-2 text-gray-400 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-expanded="false">
+          <span class="sr-only">Open main menu</span>
+
+          <svg class="block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+          
+          <svg class="hidden w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div class="flex items-center justify-center flex-1 sm:items-stretch sm:justify-start">
+        <div class="flex items-center flex-shrink-0">
+          <img class="block w-auto h-8 lg:hidden" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow">
+          <img class="hidden w-auto h-8 lg:block" src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg" alt="Workflow">
+        </div>
+        <div class="hidden sm:block sm:ml-6">
+          <div class="flex space-x-4">
+            <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+            <inertia-link href="/" class="px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-md">Home</inertia-link>
+            <inertia-link href="/about" class="px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white">About</inertia-link>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+
+  <!--
+    Mobile menu, toggle classes based on menu state.
+
+    Menu open: "block", Menu closed: "hidden"
+  -->
+  <div class="hidden sm:hidden">
+    <div class="px-2 pt-2 pb-3 space-y-1">
+      <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+      <a href="/" class="block px-3 py-2 text-base font-medium text-white bg-gray-900 rounded-md">Home</a>
+      <a href="/about" class="block px-3 py-2 text-base font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white">About</a>
+    </div>
+  </div>
+</nav>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

resources/js/app.js

@@ -0,0 +1,11 @@
+import { createApp, h } from 'vue'
+import { App, plugin } from '@inertiajs/inertia-vue3'
+
+const el = document.getElementById('app')
+
+createApp({
+  render: () => h(App, {
+    initialPage: JSON.parse(el.dataset.page),
+    resolveComponent: name => require(`./Pages/${name}`).default,
+  })
+}).use(plugin).mount(el)

resources/views/app.edge

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AdonisJS - A Modern Web Framework For Node.js</title>
+
+  <link rel="stylesheet" href="css/app.css" />
+</head>
+<body>
+  @inertia()
+  <script src="js/app.js"></script>
+</body>
+</html>

resources/views/errors/not-found.edge

@@ -0,0 +1 @@
+<p> It's a 404 </p>

resources/views/errors/server-error.edge

@@ -0,0 +1 @@
+<p> It's a 500 </p>