feat(home): hero & button component
This commit is contained in:
parent
a50f2f6714
commit
67877bad5e
10
index.html
10
index.html
@ -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>
|
<body class="bg-background">
|
||||||
<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,13 +1,7 @@
|
|||||||
<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>
|
||||||
|
|||||||
8
src/components/CaButton.vue
Normal file
8
src/components/CaButton.vue
Normal 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
35
src/components/MainHero.vue
Normal 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>
|
||||||
@ -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>
|
|
||||||
@ -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'),
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +1,9 @@
|
|||||||
<script setup></script>
|
<script setup>
|
||||||
|
import MainHero from '@/components/MainHero.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1>This is your homepage</h1>
|
<MainHero />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user