You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

241 lines
11 KiB
HTML

<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<div class="bg-white">
<header class="absolute inset-x-0 top-0 z-50">
<nav
aria-label="Global"
class="flex items-center justify-between p-6 lg:px-8"
>
<div class="flex lg:flex-1">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
class="h-8 w-auto"
/>
</a>
</div>
<div class="flex lg:hidden">
<button
type="button"
command="show-modal"
commandfor="mobile-menu"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Open main menu</span>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
data-slot="icon"
aria-hidden="true"
class="size-6"
>
<path
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Product</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Features</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Marketplace</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Company</a
>
</div>
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Log in <span aria-hidden="true">&rarr;</span></a
>
</div>
</nav>
<el-dialog>
<dialog id="mobile-menu" class="backdrop:bg-transparent lg:hidden">
<div tabindex="0" class="fixed inset-0 focus:outline-none">
<el-dialog-panel
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
>
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt=""
class="h-8 w-auto"
/>
</a>
<button
type="button"
command="close"
commandfor="mobile-menu"
class="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<span class="sr-only">Close menu</span>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.5"
data-slot="icon"
aria-hidden="true"
class="size-6"
>
<path
d="M6 18 18 6M6 6l12 12"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="mt-6 flow-root">
<div class="-my-6 divide-y divide-gray-500/10">
<div class="space-y-2 py-6">
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Product</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Features</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Marketplace</a
>
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Company</a
>
</div>
<div class="py-6">
<a
href="#"
class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
>Log in</a
>
</div>
</div>
</div>
</el-dialog-panel>
</div>
</dialog>
</el-dialog>
</header>
<div class="relative isolate px-6 pt-14 lg:px-8">
<div
aria-hidden="true"
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
>
<div
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
class="relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-288.75"
></div>
</div>
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
<div
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
>
Announcing our next round of funding.
<a href="#" class="font-semibold text-indigo-600"
><span
aria-hidden="true"
class="absolute inset-0"
></span
>Read more <span aria-hidden="true">&rarr;</span></a
>
</div>
</div>
<div class="text-center">
<h1
class="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl"
>
Data to enrich your online business
</h1>
<p
class="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8"
>
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui lorem cupidatat commodo. Elit sunt amet fugiat veniam
occaecat.
</p>
<div class="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>Get started</a
>
<a href="#" class="text-sm/6 font-semibold text-gray-900"
>Learn more <span aria-hidden="true"></span></a
>
</div>
</div>
</div>
<div
aria-hidden="true"
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
>
<div
style="
clip-path: polygon(
74.1% 44.1%,
100% 61.6%,
97.5% 26.9%,
85.5% 0.1%,
80.7% 2%,
72.5% 32.5%,
60.2% 62.4%,
52.4% 68.1%,
47.5% 58.3%,
45.2% 34.5%,
27.5% 76.7%,
0.1% 64.9%,
17.9% 100%,
27.6% 76.8%,
76.1% 97.7%,
74.1% 44.1%
);
"
class="relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-288.75"
></div>
</div>
</div>
</div>