feat(home): hero & button component

configure font and tailwind colors
2024-11-20 20:35:01 +07:00 · 2024-11-20 20:30:05 +07:00
13 changed files with 86 additions and 48 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
+    "@fontsource-variable/outfit": "^5.1.0",
    "@iconify-json/mynaui": "^1.2.7",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vue/compiler-sfc": "^3.5.13",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -18,6 +18,9 @@ importers:
      '@eslint/js':
        specifier: ^9.14.0
        version: 9.15.0
+      '@fontsource-variable/outfit':
+        specifier: ^5.1.0
+        version: 5.1.0
      '@iconify-json/mynaui':
        specifier: ^1.2.7
        version: 1.2.7
@ -382,6 +385,9 @@ packages:
    resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
    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':
    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
    engines: {node: '>=18.18.0'}
@ -2007,6 +2013,8 @@ snapshots:
    dependencies:
      levn: 0.4.1

+  '@fontsource-variable/outfit@5.1.0': {}
+
  '@humanfs/core@0.19.1': {}

  '@humanfs/node@0.16.6':
--- a/src/App.vue
+++ b/src/App.vue
@ -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>
+  <RouterView />
 </template>
--- a/src/assets/index.css
+++ b/src/assets/index.css
@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+body {
+  font-family: 'Outfit Variable', sans-serif;
+}
--- a/src/components/CaButton.vue
+++ b/src/components/CaButton.vue
@ -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>
--- a/src/components/MainHero.vue
+++ b/src/components/MainHero.vue
@ -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>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@ -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>
--- a/src/main.js
+++ b/src/main.js
@ -1,4 +1,5 @@
 import './assets/index.css'
+import '@fontsource-variable/outfit'

 import { createApp } from 'vue'
 import App from './App.vue'
--- a/src/router/index.js
+++ b/src/router/index.js
@ -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'),
+    // },
  ],
 })

--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>This is an about page</h1>
-  </div>
-</template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -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>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -2,7 +2,17 @@
 export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  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: [],
 }
Author	SHA1	Message	Date
Amro Alfien	67877bad5e	feat(home): hero & button component	2024-11-20 20:35:01 +07:00
Amro Alfien	a50f2f6714	configure font and tailwind colors	2024-11-20 20:30:05 +07:00