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

feat(home): hero & button component

Browse Source
This commit is contained in:
Amro Alfien 2024-11-20 20:32:53 +07:00
parent a50f2f6714
commit 67877bad5e
8 changed files with 61 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

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

6
src/App.vue
View File

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

8
src/components/CaButton.vue Normal file
View File

@ -0,0 +1,8 @@
<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 Normal file
View File

@ -0,0 +1,35 @@
<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
View File

@ -1,20 +0,0 @@
<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>

16
src/router/index.js
View File

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

5
src/views/AboutView.vue
View File

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

6
src/views/HomeView.vue
View File

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