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>