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
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">→</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">→</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>
|