update video styles

components.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ACarousel: typeof import('ant-design-vue/es')['Carousel']
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
+    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
+    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
+    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
+    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
+    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
+  }
+}

package.json

@@ -16,8 +16,10 @@
   "dependencies": {
     "monaco-editor": "^0.47.0",
     "monaco-editor-vue3": "^0.1.10",
+    "tw-elements": "^2.0.0",
     "vue": "^3.4.21",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -38,6 +40,7 @@
     "sass": "^1.72.0",
     "tailwindcss": "^3.4.1",
     "typescript": "~5.4.0",
+    "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.5",
     "vite-plugin-vue-devtools": "^7.0.16",
     "vue-tsc": "^2.0.6"

src/assets/main.css

@@ -2,8 +2,21 @@
 @import './icon.css';
 
 @tailwind base;
+@layer base {
+  html {
+    @apply text-surface;
+    @apply bg-white;
+  }
+  html.dark {
+    @apply text-neutral-50;
+    @apply bg-body-dark;
+  }
+}
 @tailwind components;
 @tailwind utilities;
+p {
+  @apply leading-[1.6];
+}
 
 #app {
   margin: 0 auto;

src/components/AnimateHumanVideos.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { initTWE, Carousel } from 'tw-elements';
+onMounted(() => {
+  initTWE({ Carousel }, { allowReinits: true });
+});
+
+const animateHumanCarousel = ref<HTMLElement>();
+const videos = ref<HTMLVideoElement[]>([]);
+watch(animateHumanCarousel, (newV) => {
+  if (newV) {
+    newV.addEventListener('slide.twe.carousel', (v: any) => {
+      const from = v.from;
+      const to = v.to;
+      videos.value[from]?.pause();
+      videos.value[to]?.play();
+    })
+  }
+}, { once: true });
+</script>
+
+<template>
+  <div ref="animateHumanCarousel" id="animateHumanCarousel" class="relative" data-twe-carousel-init
+    data-twe-ride="carousel">
+
+    <!--Carousel items-->
+    <div class="relative w-full overflow-hidden after:clear-both after:block after:content-['']">
+      <!--First item-->
+      <div
+        class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-twe-carousel-active data-twe-carousel-item style="backface-visibility: hidden">
+        <video :ref="(el: any) => videos[0] = el" v-lazy src="@/assets/video/human-animation/human-animation-1.mp4"
+          muted loop autoplay></video>
+
+      </div>
+      <!--Second item-->
+      <div
+        class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-twe-carousel-item style="backface-visibility: hidden">
+
+        <video :ref="(el: any) => videos[1] = el" v-lazy src="@/assets/video/human-animation/human-animation-2.mp4"
+          muted loop></video>
+      </div>
+      <!--Third item-->
+      <div
+        class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-twe-carousel-item style="backface-visibility: hidden">
+
+        <video :ref="(el: any) => videos[2] = el" v-lazy src="@/assets/video/human-animation/human-animation-3.mp4"
+          muted loop></video>
+      </div>
+
+      <!--Forth item-->
+      <div
+        class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-twe-carousel-item style="backface-visibility: hidden">
+        <video :ref="(el: any) => videos[3] = el" v-lazy src="@/assets/video/human-animation/human-animation-4.mp4"
+          muted loop></video>
+      </div>
+
+      <div
+        class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-twe-carousel-item style="backface-visibility: hidden">
+        <video :ref="(el: any) => videos[4] = el" v-lazy src="@/assets/video/human-animation/human-animation-5.mp4"
+          muted loop></video>
+      </div>
+      <div
+        class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
+        data-twe-carousel-item style="backface-visibility: hidden">
+        <video :ref="(el: any) => videos[5] = el" v-lazy src="@/assets/video/human-animation/human-animation-6.mp4"
+          muted loop></video>
+      </div>
+    </div>
+
+    <!--Carousel indicators-->
+    <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+      data-twe-carousel-indicators>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="0" data-twe-carousel-active
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-current="true" aria-label="Slide 1"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="1"
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide 2"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="2"
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide 3"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="3"
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide 4"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="4"
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide 5"></button>
+      <button type="button" data-twe-target="#animateHumanCarousel" data-twe-slide-to="5"
+        class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
+        aria-label="Slide 6"></button>
+    </div>
+
+    <!--Carousel controls - prev item-->
+    <button
+      class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+      type="button" data-twe-target="#animateHumanCarousel" data-twe-slide="prev">
+      <span class="inline-block h-8 w-8">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+          class="h-6 w-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+        </svg>
+      </span>
+      <span
+        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
+    </button>
+    <!--Carousel controls - next item-->
+    <button
+      class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+      type="button" data-twe-target="#animateHumanCarousel" data-twe-slide="next">
+      <span class="inline-block h-8 w-8">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+          class="h-6 w-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+        </svg>
+      </span>
+      <span
+        class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
+    </button>
+  </div>
+</template>