Merge pull request #21 from Nauxscript/feature/homepage

feat: new homepage

apps/client/components/Navbar/index.vue

@@ -1,16 +1,31 @@
+<script setup lang="ts">
+
+const toggleDarkMode = () => {
+  if (document.documentElement.classList.contains('dark')) {
+    document.documentElement.setAttribute("data-theme", "light"); 
+  } else {
+    document.documentElement.setAttribute("data-theme", "dark");
+  }
+  document.documentElement.classList.toggle('dark')
+}
+
+</script>
+
 <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>
+    <NuxtLink to="/">
+      <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-fuchsia-400">Earth Worm</h1>
+      </div>
+    </NuxtLink>
     <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">
+      <button class="btn btn-sm btn-ghost rounded-md mx-1 w-8 h-8 p-0" @click="toggleDarkMode">
         <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>

apps/client/layouts/default.vue

@@ -3,11 +3,13 @@
 </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 class="w-full h-full bg-white dark:bg-slate-900 transition-colors dark:text-slate-300 text-slate-600">
+    <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>
-    <Footer></Footer>
   </div>
 </template>

apps/client/pages/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-// definePageMeta({
-//   layout: 'default'
-// })
+
 </script>
 
 <template>
@@ -10,22 +8,68 @@
       <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>
+          <h1 class="w-48 text-6xl font-black leading-snug text-wrap text-fuchsia-400">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 class="mb-12 leading-loose text-3xl opacity-80 items-center">
+          <div class="">Why aren’t you good at English?</div>
+          <div class="align-middle">It’s because you haven’t used Earthworm yet! 🤪 <i class="animate-wink inline w-1 h-8 dark:bg-white bg-slate-900 mx-2 text-2xl p-[2px]"></i></div>
         </div>
+        <a target="_blank" href="https://github.com/cuixueshe/earthworm">
+          <button class="indicator btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300 mr-4">
+            <span class="indicator-item">🌟</span>
+            Star us on GitHub 
+          </button>
+        </a>
         <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 class="w-1/2 flex items-center justify-center group select-none cursor-pointer rounded-xl relative">
+        <div class="absolute flex h-full w-full card">
+          <div class="bg-dot rounded-[64px]"></div>
+          <div class="absolute left-0 right-0 top-12 text-[220px] text-center group-hover:-skew-y-12 group-hover:rotate-12 transition-all">📖</div>
+          <div class="absolute left-40 right-0 top-32 text-[80px] -ml-28 text-center color-gray group-hover:-skew-y-12 group-hover:rotate-[30deg] group-hover:-ml-32 group-hover:-mt-6  transition-all">🪱</div>
+        </div>
       </div>
     </section>
-    <section class="flex flex-col">
-      <h2>What's is Earthworm ?</h2> 
-
+    <section class="flex flex-col py-8">
+      <h2 class="text-4xl text-center">What is Earthworm?</h2> 
+      <p class="text-center">an open-source, collaborative, user-friendly English learning tool.</p>
+      <div class="flex">
+        <div class="rounded-3xl my-8 mx-2 border dark:border-slate-600 bg-gradient-to-b from-neutral-50/90 to-neutral-100/90 transition duration-300 dark:from-neutral-600/90 dark:to-neutral-450/90 w-1/2 hover:shadow-2xl">
+          <div class="h-[330px] flex p-4"> wip... </div>
+        </div>
+        <div class="rounded-3xl my-8 mx-2 border dark:border-slate-600 bg-gradient-to-b from-neutral-50/90 to-neutral-100/90 transition duration-300 dark:from-neutral-600/90 dark:to-neutral-450/90 w-1/2 hover:shadow-xl">
+          <div class="h-[330px] flex p-4"> wip... </div>
+        </div>
+      </div>       
+      <div class="w-1/2"></div>
+      <div class="w-1/2"></div>
+    </section>
+    <section class="flex flex-col py-8">
+      <h2 class="text-4xl text-center">Why Earthworm?</h2> 
     </section>
   </div>
 </template>
+
+<style>
+.bg-dot {
+  aspect-ratio: 1;
+  position: relative;
+  background: #fff;
+  filter: contrast(50) invert(0);
+  mix-blend-mode: multiply;
+  isolation: isolate;
+  opacity: .4;
+  overflow: hidden;
+}
+
+.bg-dot::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle at center, #a800b2 0.06rem, transparent 0.65rem);
+  background-size: var(--bgSize, 1rem) var(--bgSize, 1rem);
+  background-repeat: round;
+  background-position: 0 0, var(--bgPosition) var(--bgPosition);
+  mask-image: linear-gradient(rgb(0 0 0), rgb(0 0 0 / 0.5));
+}
+</style>

apps/client/tailwind.config.js

@@ -1,8 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 export default {
+  darkMode: 'class',
   content: [],
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        wink: "wink 1s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+      },
+      keyframes: {
+        wink: {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0' },
+        }
+      },
+    },
   },
   plugins: [require("daisyui")],
 };