54 lines
2.4 KiB
Vue
54 lines
2.4 KiB
Vue
<template>
|
||
<div class="bg-gray">
|
||
<main class="isolate">
|
||
<!-- Hero section -->
|
||
<div
|
||
class="relative isolate -z-10 overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-14">
|
||
<!-- <div
|
||
class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:-mr-80 lg:-mr-96"
|
||
aria-hidden="true" /> -->
|
||
<div
|
||
class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-gray-900 shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:-mr-80 lg:-mr-96"
|
||
aria-hidden="true" />
|
||
<div class="mx-auto max-w-7xl px-6 py-32 sm:py-40 lg:px-8">
|
||
<div
|
||
class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-6 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8">
|
||
<h1
|
||
class="max-w-2xl text-4xl font-bold tracking-tight text-gray-100 sm:text-6xl lg:col-span-2 xl:col-auto">
|
||
We’re a passionate group of people working from around the world
|
||
to build the future of ecommerce.
|
||
</h1>
|
||
<div class="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
|
||
<p class="text-lg leading-8 text-gray-400">
|
||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
|
||
lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
|
||
fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt
|
||
sunt. Qui irure qui lorem cupidatat commodo.
|
||
</p>
|
||
</div>
|
||
|
||
<video
|
||
class="mt-10 aspect-[6/5] w-full max-w-lg rounded-2xl object-cover sm:mt-16 lg:mt-0 lg:max-w-none xl:row-span-2 xl:row-end-2 xl:mt-36"
|
||
controls>
|
||
<source
|
||
src="https://docs.material-tailwind.com/demo.mp4"
|
||
type="video/mp4" />
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-grey-100 sm:h-32" />
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineComponent, h, ref } from 'vue';
|
||
import { Dialog, DialogPanel } from '@headlessui/vue';
|
||
import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline';
|
||
|
||
const mobileMenuOpen = ref(false);
|
||
</script>
|