Merge pull request #20 from Nauxscript/main

feat: setup layout and home page

Author: Nauxscript

apps/client/app.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <NuxtLayout>
     <NuxtPage />
-  </div>
+  </NuxtLayout>
 </template>
 
 <script setup lang="ts">

apps/client/components/CourseItemCard/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div class="w-[330px] h-[220px] flex flex-col cursor-pointer border border-slate-400 rounded-xl px-6 py-4 hover:shadow-lg hover:shadow-purple-400/50 hover:border-purple-400 transition-all mb-4">
+    <p class="text-2xl leading-loose font-bold">{{ title }}</p>
+    <div class="mb-4"></div>
+    <div>this is the course's description</div>
+  </div>
+</template>

apps/client/components/Footer/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <footer class="h-12 flex justify-center items-center opacity-65">
+    Copyright © 2023-2024, cuixueshe. All rights reserved.
+  </footer>
+</template>

apps/client/components/Navbar/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <nav class="h-20 flex items-center justify-between">
+    <div class="logo flex">
+      <img width="48" height="48" class="rounded-md overflow-hidden mr-2" src="/logo.png" alt="earth-worm-logo">
+      <h1 class="w-14 text-md font-black leading-normal text-wrap text-[#C683D7]">Earth Worm</h1>
+    </div>
+    <div>
+      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+        </svg>
+      </button>
+      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+        </svg>
+      </button>
+    </div>
+  </nav>
+</template>

apps/client/layouts/default.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="flex flex-col min-h-100vh min-h-screen xl:w-[1200px] m-auto xl:px-2 px-24">
+    <Navbar></Navbar>
+    <div class="flex-1">
+      <slot></slot>
+    </div>
+    <Footer></Footer>
+  </div>
+</template>

apps/client/pages/Main/[id].vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col h-full">
-    <Header></Header>
+    <!-- <Header></Header> -->
     <main>
       <Game></Game>
     </main>

apps/client/pages/index.vue

@@ -1,5 +1,31 @@
+<script setup lang="ts">
+// definePageMeta({
+//   layout: 'default'
+// })
+</script>
+
 <template>
-  <div>
-    <h1>Welcome to the homepage</h1>
+  <div class="container w-full">
+    <section class="flex md:flex-row md:justify-between justify-center flex-col py-8">
+      <div class="w-1/2">
+        <div class="flex mb-12">
+          <img width="160" height="160" class="rounded-xl overflow-hidden mr-2" src="/logo.png" alt="earth-worm-logo">
+          <h1 class="w-48 text-6xl font-black leading-snug text-wrap text-[#C683D7]">Earth Worm</h1>
+        </div>
+        <div class="mb-12 leading-loose text-3xl opacity-60 items-center">
+          <p>Why did you not good at English?</p>
+          <p class="align-middle">Because you have not use Earthworm yet 🤪 !<i class="animate-wink inline-flex w-1 h-8 bg-white mx-2 leading-snug"></i></p>
+        </div>
+        <button class="btn w-48"> Go and get it <kbd class="kbd"> ↵ </kbd></button>
+      </div>
+      <div class="w-1/2 flex items-center justify-center group select-none cursor-pointer">
+        <div class="text-[220px] text-center group-hover:-skew-y-12 group-hover:rotate-12 transition-all">📖</div>
+        <div class="text-[80px] -ml-28 text-center color-gray group-hover:-skew-y-12 group-hover:rotate-[20deg] group-hover:-ml-32 group-hover:-mt-12  transition-all">🪱</div>
+      </div>
+    </section>
+    <section class="flex flex-col">
+      <h2>What's is Earthworm ?</h2> 
+      
+    </section>
   </div>
 </template>