gominima · megatank58 · Jan 28, 2022 · Jan 27, 2022 · Jan 27, 2022 · Jan 27, 2022
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,87 @@
+###
+# Place your Prettier ignore content here
+
+###
+# .gitignore content is duplicated here due to https://github.com/prettier/prettier/issues/8506
+
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
-	"workbench.colorCustomizations": {
-		"activityBar.background": "#220E90",
-		"titleBar.activeBackground": "#3014CA",
-		"titleBar.activeForeground": "#FCFBFF"
-	}
-}
+  "workbench.colorCustomizations": {
+    "activityBar.background": "#220E90",
+    "titleBar.activeBackground": "#3014CA",
+    "titleBar.activeForeground": "#FCFBFF"
+  }
+}
diff --git a/index.html b/index.html
@@ -4,7 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
     <title>Minima</title>
   </head>
   <body>

diff --git a/package.json b/package.json
@@ -10,11 +10,11 @@
     "@tailwindcss/postcss7-compat": "^2.2.17",
     "@types/nprogress": "^0.2.0",
     "@types/vue-router": "^2.0.0",
-    "autoprefixer": "^9",
+    "autoprefixer": "^10.4.2",
     "daisyui": "^1.24.2",
     "nprogress": "^0.2.0",
-    "postcss": "^7",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.17",
     "vue": "^3.2.27",
     "vue-router": "^4.0.12"
   },

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
-}
+    autoprefixer: {},
+  },
+};
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -1,3 +1,3 @@
 <template>
-  <router-view/>
-</template>
+  <router-view />
+</template>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/minimaLogo.png b/src/assets/minimaLogo.png
diff --git a/src/components/Hero.vue b/src/components/Hero.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
-import { defineComponent } from "@vue/runtime-core";
+import { defineComponent } from '@vue/runtime-core';
 export default defineComponent({
-  name: "Hero",
+  name: 'Hero',
   setup() {},
 });
 </script>
@@ -35,18 +35,23 @@ export default defineComponent({
     >
       Start using minima with your existing projects!
     </div>
-    <div class="flex space-x-10 pt-8">
-      <button
-        class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition ease-in-out transform hover:-translate-y-1 hover:scale-105 duration-200"
+    <div
+      class="mt-5 sm:space-x-0 md:space-x-8 lg:space-x-8 sm:mt-8 sm:mx-24 sm:flex sm:justify-center lg:justify-start"
+    >
+      <div
+        class="rounded-md shadow w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition ease-in-out transform hover:-translate-y-1 hover:scale-105 duration-200"
       >
         Documentation
-      </button>
-      <button
-        class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10 transition ease-in-out transform hover:-translate-y-1 hover:scale-105 duration-200"
+      </div>
+
+      <div
+        class="mt-4 sm:mt-0 sm:ml-3 w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-blue-100 hover:bg-blue-200 md:py-4 md:text-lg md:px-10 transition ease-in-out transform hover:-translate-y-1 hover:scale-105 duration-200"
       >
-        Explore utility</button
-      >s
+        Explore utility
+      </div>
     </div>
-    <div class="text-sm text-gray-500 pt-8">DEVELOPED BY MINIMA CORE TEAM™</div>
+    <footer class="text-sm text-gray-500 pt-8">
+      DEVELOPED BY MINIMA CORE TEAM™
+    </footer>
   </div>
 </template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -1,14 +1,14 @@
 <script lang="ts">
-import { defineComponent } from "@vue/runtime-core";
-import { Ref, ref } from "vue";
+import { defineComponent } from '@vue/runtime-core';
+import { Ref, ref } from 'vue';
 export default defineComponent({
-  name: "Navbar",
+  name: 'Navbar',
   setup() {
     const Visible: Ref<boolean> = ref<boolean>(false);
     const Toggle = () => {
       Visible.value = !Visible.value;
     };
-    window.addEventListener("resize", () => {
+    window.addEventListener('resize', () => {
       if (window.innerWidth > 768) {
         Visible.value = false;
       }
@@ -25,27 +25,93 @@ export default defineComponent({
   <header class="p-4">
     <div class="container flex justify-between h-16 mx-auto">
       <div class="flex items-center py-3">
-        <a href="#" class="text-blue-500 hover:text-blue-600">
-          <span class="text-2xl font-bold tracking-tight">Minima</span>
+        <a href="#">
+          <img
+            src="../assets/minimaLogo.png"
+            class="relative -left-[35%] sm:-left-[35%] md:-left-[40%] lg:-left-[40%] transform scale-[0.3] sm:scale-[0.3] md:scale-[0.15] lg:scale-[0.15]"
+          />
         </a>
       </div>
+
       <div class="items-center flex-shrink-0 hidden lg:flex">
-        <button
+        <a
+          href="#"
           class="self-center py-3 rounded text-white hover:text-gray-200 hover:underline"
         >
           Documentation
-        </button>
-        <button
+        </a>
+        <a
+          href="#"
           class="self-center px-8 py-3 rounded text-white hover:text-gray-200 hover:underline"
         >
           Guide
-        </button>
-        <button
+        </a>
+        <a
+          href="#"
           class="self-center px-8 py-3 font-semibold rounded bg-blue-600 hover:bg-blue-700 text-white"
         >
           Get started
-        </button>
+        </a>
       </div>
+
+      <!-- Mobile menu -->
+      <!-- FIX: Toggle element on mobile -->
+
+      <!-- <div
+        class="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right sm:visible lg:hidden"
+      >
+        <div
+          class="rounded-lg shadow-md bg-[#0c1f56] ring-1 ring-black ring-opacity-5 overflow-hidden"
+        >
+          <div class="px-5 pt-4 flex items-center justify-between">
+            <div class="-mr-2">
+              <button
+                type="button"
+                class="bg-[#143797] rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+              >
+                <span class="sr-only">Close main menu</span>
+                <svg
+                  class="h-6 w-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>
+          <div class="px-2 pt-2 pb-3 space-y-1">
+            <a
+              href="#"
+              class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-gray-100 hover:bg-[#0f276c]"
+              >Documentation</a
+            >
+
+            <a
+              href="#"
+              class="block px-3 py-2 rounded-md text-base font-medium text-white hover:text-gray-100 hover:bg-[#0f276c]"
+              >Guide</a
+            >
+          </div>
+          <a
+            href="#"
+            class="block w-full px-5 py-3 text-center font-medium text-blue-400 bg-[#112f82] hover:bg-[#0f276c]"
+          >
+            Get started
+          </a>
+        </div>
+      </div> -->
+
+      <!-- Close Menu button on mobile -->
+
       <button class="p-4 lg:hidden">
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/WhatsNew.vue b/src/components/WhatsNew.vue
@@ -1,23 +1,21 @@
 <script lang="ts">
-import { defineComponent } from "@vue/runtime-core";
+import { defineComponent } from '@vue/runtime-core';
 export default defineComponent({
-  name: "WhatsNew",
+  name: 'WhatsNew',
   setup() {},
 });
 </script>
 
 <template>
   <div class="flex justify-center pt-3">
-    <div
-      class="flex bg-gray-700 w-96 pt-2 pb-2 space-x-2 items-center justify-center rounded-full"
-    >
-      <div class="bg-hero font-medium pl-2 pr-2 text-white rounded-full">
-        New
-      </div>
-      <div class="text-white rounded-md">
+    <div class="flex w-64 md:w-96 lg:w-96 bg-gray-700 py-2 px-2 rounded-full">
+      <div class="bg-hero font-medium px-2 text-white rounded-full">New</div>
+      <p class="truncate text-white ml-2">
         Added new route system, check it here
-        <i class="fas fa-chevron-right text-blue-500"></i>
-      </div>
+      </p>
+      <i
+        class="fas fa-chevron-right flex justify-center items-center text-blue-500 ml-2"
+      ></i>
     </div>
   </div>
 </template>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,6 +1,6 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import './assets/tailwind.css'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import './assets/tailwind.css';
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).mount('#app');