ridzimeko/vue-tailwind-myna
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: ridzimeko:67877bad5e9a54fc57e06f085284d9f54ec48b1b
Branches Tags
ridzimeko:master
..
compare: ridzimeko:7a800d0b83d92878059a3f7109f3b555baf26882
Branches Tags
ridzimeko:master

No commits in common. "67877bad5e9a54fc57e06f085284d9f54ec48b1b" and "7a800d0b83d92878059a3f7109f3b555baf26882" have entirely different histories.
67877bad5e ... 7a800d0b83

13 changed files with 48 additions and 86 deletions
Show Stats Expand all files Collapse all files

10
index.html
View File

@ -1,12 +1,12 @@
<!doctype html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body class="bg-background"> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>

1
package.json
View File

@ -16,7 +16,6 @@
}, },
"devDependencies": { "devDependencies": {
"@eslint/js": "^9.14.0", "@eslint/js": "^9.14.0",
"@fontsource-variable/outfit": "^5.1.0",
"@iconify-json/mynaui": "^1.2.7", "@iconify-json/mynaui": "^1.2.7",
"@vitejs/plugin-vue": "^5.1.4", "@vitejs/plugin-vue": "^5.1.4",
"@vue/compiler-sfc": "^3.5.13", "@vue/compiler-sfc": "^3.5.13",

8
pnpm-lock.yaml
View File

@ -18,9 +18,6 @@ importers:
'@eslint/js': '@eslint/js':
specifier: ^9.14.0 specifier: ^9.14.0
version: 9.15.0 version: 9.15.0
'@fontsource-variable/outfit':
specifier: ^5.1.0
version: 5.1.0
'@iconify-json/mynaui': '@iconify-json/mynaui':
specifier: ^1.2.7 specifier: ^1.2.7
version: 1.2.7 version: 1.2.7
@ -385,9 +382,6 @@ packages:
resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==} resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@fontsource-variable/outfit@5.1.0':
resolution: {integrity: sha512-WUZiMehPerX/sUWC65Ku9hQ741cJtkCiy5T9XSZd1XbyYudNd/qoZSbUyEbiC00+4rGheNcKzaFdMGp5uonQog==}
'@humanfs/core@0.19.1': '@humanfs/core@0.19.1':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'} engines: {node: '>=18.18.0'}
@ -2013,8 +2007,6 @@ snapshots:
dependencies: dependencies:
levn: 0.4.1 levn: 0.4.1
'@fontsource-variable/outfit@5.1.0': {}
'@humanfs/core@0.19.1': {} '@humanfs/core@0.19.1': {}
'@humanfs/node@0.16.6': '@humanfs/node@0.16.6':

6
src/App.vue
View File

@ -1,7 +1,13 @@
<script setup> <script setup>
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router'
import TheWelcome from './components/TheWelcome.vue'
</script> </script>
<template> <template>
<div class="bg-neutral-900 h-screen w-screen text-white content-center text-center">
<div class="grid grid-cols-2">
<TheWelcome />
<RouterView /> <RouterView />
</div>
</div>
</template> </template>

4
src/assets/index.css
View File

@ -1,7 +1,3 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
body {
font-family: 'Outfit Variable', sans-serif;
}

8
src/components/CaButton.vue
View File

@ -1,8 +0,0 @@
<template>
<button
type="button"
class="shadow-button bg-primary rounded-full w-max px-6 py-3.5 text-white flex gap-4 items-center"
>
<slot />
</button>
</template>

35
src/components/MainHero.vue
View File

@ -1,35 +0,0 @@
<script setup>
import CaButton from './CaButton.vue'
import MynauiArrowRightCircleSolid from '~icons/mynaui/arrow-right-circle-solid'
</script>
<template>
<div class="relative w-full h-[712px] overflow-clip">
<div class="grid grid-cols-2 gap-8 p-12 items-center h-full">
<section>
<h1 class="text-[3.5rem] leading-[4.6rem] font-bold text-customGray">
Singapore’s best
<span class="text-primary inline-block">AI Home Tutor</span> website for quality education
</h1>
<p class="mt-4 max-w-[460px] text-base">
We are committed to offering personalized AI-driven online classes tailored to the unique
learning needs of each student
</p>
<CaButton class="mt-8">
<span>GET STARTED</span>
<MynauiArrowRightCircleSolid class="size-7" />
</CaButton>
</section>
<section class="">
<img
src="https://object.slayerwitch.my.id/image/04c9a0f7-0cdb-4b45-8850-b93d9ffdc09d.png"
class="w-full"
/>
<div class="bg-secondary rounded-full size-[117px] absolute -z-10 top-28 right-[47%]"></div>
<div
class="bg-secondary rounded-full size-[866px] absolute -z-10 -bottom-56 -right-52"
></div>
</section>
</div>
</div>
</template>

20
src/components/TheWelcome.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import { RouterLink } from 'vue-router'
import MynauiMyna from '~icons/mynaui/myna'
</script>
<template>
<header>
<div>
<div class="flex gap-4 items-center justify-center">
<h1 class="text-4xl">Vue + Tailwind + MynaUI</h1>
<mynaui-myna class="size-12" />
</div>
<nav class="flex gap-4 text-2xl justify-center my-4">
<RouterLink class="hover:underline text-green-400" to="/">Home</RouterLink>
<RouterLink class="hover:underline text-green-400" to="/about">About</RouterLink>
</nav>
</div>
</header>
</template>

1
src/main.js
View File

@ -1,5 +1,4 @@
import './assets/index.css' import './assets/index.css'
import '@fontsource-variable/outfit'
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'

16
src/router/index.js
View File

@ -9,14 +9,14 @@ const router = createRouter({
name: 'home', name: 'home',
component: HomeView, component: HomeView,
}, },
// { {
// path: '/about', path: '/about',
// name: 'about', name: 'about',
// // route level code-splitting // route level code-splitting
// // this generates a separate chunk (About.[hash].js) for this route // this generates a separate chunk (About.[hash].js) for this route
// // which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
// component: () => import('../views/AboutView.vue'), component: () => import('../views/AboutView.vue'),
// }, },
], ],
}) })

5
src/views/AboutView.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
<h1>This is an about page</h1>
</div>
</template>

6
src/views/HomeView.vue
View File

@ -1,9 +1,7 @@
<script setup> <script setup></script>
import MainHero from '@/components/MainHero.vue'
</script>
<template> <template>
<div> <div>
<MainHero /> <h1>This is your homepage</h1>
</div> </div>
</template> </template>

12
tailwind.config.js
View File

@ -2,17 +2,7 @@
export default { export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
extend: { extend: {},
colors: {
primary: '#9D59A8',
secondary: '#B59BBA',
background: '#FFFCF8',
customGray: '#404040',
},
boxShadow: {
button: '0 12px 24px 0 rgba(0, 0, 0, 0.25)',
},
},
}, },
plugins: [], plugins: [],
} }