Initial Marketing
commit
d9964868ce
@ -0,0 +1,240 @@
|
||||
<!-- 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>
|
||||
@ -0,0 +1,250 @@
|
||||
<!-- 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-gray-900">
|
||||
<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=500"
|
||||
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-400"
|
||||
>
|
||||
<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-white"
|
||||
>Product</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Features</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Marketplace</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Company</a
|
||||
>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>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-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/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=500"
|
||||
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-400"
|
||||
>
|
||||
<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/25">
|
||||
<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-white hover:bg-white/5"
|
||||
>Product</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
||||
>Features</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
||||
>Marketplace</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
||||
>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-white hover:bg-white/5"
|
||||
>Log in</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
</header>
|
||||
|
||||
<div class="relative isolate overflow-hidden pt-14">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply"
|
||||
alt=""
|
||||
class="absolute inset-0 -z-10 size-full object-cover"
|
||||
/>
|
||||
|
||||
<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-20 sm:left-[calc(50%-30rem)] sm:w-288.75"
|
||||
></div>
|
||||
</div>
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<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-400 ring-1 ring-white/10 hover:ring-white/20"
|
||||
>
|
||||
Announcing our next round of funding.
|
||||
<a href="#" class="font-semibold text-indigo-400"
|
||||
><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-white sm:text-7xl"
|
||||
>
|
||||
Data to enrich your online business
|
||||
</h1>
|
||||
<p
|
||||
class="mt-8 text-lg font-medium text-pretty text-gray-400 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-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
||||
>Get started</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Learn more <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
</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-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,101 @@
|
||||
<div class="relative isolate overflow-hidden bg-white">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
|
||||
width="200"
|
||||
height="200"
|
||||
x="50%"
|
||||
y="-1"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M.5 200V.5H200" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
|
||||
stroke-width="0"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:px-8 lg:py-40"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:shrink-0 lg:pt-8">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-11"
|
||||
/>
|
||||
|
||||
<div class="mt-24 sm:mt-32 lg:mt-16">
|
||||
<a href="#" class="inline-flex space-x-6">
|
||||
<span
|
||||
class="rounded-full bg-indigo-50 px-3 py-1 text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-600/20 ring-inset"
|
||||
>What's new</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-600"
|
||||
>
|
||||
<span>Just shipped v1.0</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<h1
|
||||
class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
|
||||
>
|
||||
Deploy to the cloud with confidence
|
||||
</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 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
|
||||
class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32"
|
||||
>
|
||||
<div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
|
||||
<div
|
||||
class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 ring-inset lg:-m-4 lg:rounded-2xl lg:p-4"
|
||||
>
|
||||
<img
|
||||
width="2432"
|
||||
height="1442"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png"
|
||||
alt="App screenshot"
|
||||
class="w-304 rounded-md bg-gray-50 shadow-xl ring-1 ring-gray-900/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,130 @@
|
||||
<div class="bg-white">
|
||||
<div
|
||||
class="relative isolate overflow-hidden bg-linear-to-b from-indigo-100/20"
|
||||
>
|
||||
<div
|
||||
class="mx-auto max-w-7xl pt-10 pb-24 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40"
|
||||
>
|
||||
<div class="px-6 lg:px-0 lg:pt-4">
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="max-w-lg">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-11"
|
||||
/>
|
||||
|
||||
<div class="mt-24 sm:mt-32 lg:mt-16">
|
||||
<a href="#" class="inline-flex space-x-6">
|
||||
<span
|
||||
class="rounded-full bg-indigo-50 px-3 py-1 text-sm/6 font-semibold text-indigo-600 ring-1 ring-indigo-600/20 ring-inset"
|
||||
>What's new</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-600"
|
||||
>
|
||||
<span>Just shipped v1.0</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-gray-400"
|
||||
>
|
||||
<path
|
||||
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<h1
|
||||
class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
|
||||
>
|
||||
Supercharge your web app
|
||||
</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.
|
||||
</p>
|
||||
<div class="mt-10 flex items-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"
|
||||
>Documentation</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm/6 font-semibold text-gray-900"
|
||||
>View on GitHub
|
||||
<span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 md:-mr-20 lg:-mr-36"
|
||||
></div>
|
||||
<div class="shadow-lg md:rounded-3xl">
|
||||
<div
|
||||
class="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_var(--radius-3xl))]"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 inset-ring inset-ring-white md:ml-20 lg:ml-36"
|
||||
></div>
|
||||
<div
|
||||
class="relative px-6 pt-8 sm:pt-16 md:pr-0 md:pl-16"
|
||||
>
|
||||
<div
|
||||
class="mx-auto max-w-2xl md:mx-0 md:max-w-none"
|
||||
>
|
||||
<div
|
||||
class="w-screen overflow-hidden rounded-tl-xl bg-gray-900"
|
||||
>
|
||||
<div
|
||||
class="flex bg-gray-800/40 ring-1 ring-white/5"
|
||||
>
|
||||
<div
|
||||
class="-mb-px flex text-sm/6 font-medium text-gray-400"
|
||||
>
|
||||
<div
|
||||
class="border-r border-b border-r-white/10 border-b-white/20 bg-white/5 px-4 py-2 text-white"
|
||||
>
|
||||
NotificationSetting.jsx
|
||||
</div>
|
||||
<div
|
||||
class="border-r border-gray-600/10 px-4 py-2"
|
||||
>
|
||||
App.jsx
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 pt-6 pb-14">
|
||||
<!-- Your code example -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="pointer-events-none absolute inset-0 ring-1 ring-black/10 ring-inset md:rounded-3xl"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-linear-to-t from-white sm:h-32"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,63 @@
|
||||
<div class="relative bg-white">
|
||||
<div class="mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8">
|
||||
<div
|
||||
class="px-6 pt-10 pb-24 sm:pb-32 lg:col-span-7 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-6"
|
||||
>
|
||||
<div class="mx-auto max-w-lg lg:mx-0">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt="Your Company"
|
||||
class="h-11"
|
||||
/>
|
||||
|
||||
<div class="hidden sm:mt-32 sm:flex lg:mt-16">
|
||||
<div
|
||||
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
|
||||
>
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt.
|
||||
<a
|
||||
href="#"
|
||||
class="font-semibold whitespace-nowrap text-indigo-600"
|
||||
><span
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0"
|
||||
></span
|
||||
>Read more <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
class="mt-24 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:mt-10 sm:text-7xl"
|
||||
>
|
||||
Data to enrich your 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 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
|
||||
class="relative lg:col-span-5 lg:-mr-8 xl:absolute xl:inset-0 xl:left-1/2 xl:mr-0"
|
||||
>
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2102&q=80"
|
||||
alt=""
|
||||
class="aspect-3/2 w-full bg-gray-50 object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,130 @@
|
||||
<div class="relative isolate overflow-hidden bg-gray-900">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0 -z-10 size-full mask-[radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-white/10"
|
||||
>
|
||||
<defs>
|
||||
<pattern
|
||||
id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
|
||||
width="200"
|
||||
height="200"
|
||||
x="50%"
|
||||
y="-1"
|
||||
patternUnits="userSpaceOnUse"
|
||||
>
|
||||
<path d="M.5 200V.5H200" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
|
||||
<path
|
||||
d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
|
||||
stroke-width="0"
|
||||
/>
|
||||
</svg>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
|
||||
stroke-width="0"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="absolute top-10 left-[calc(50%-4rem)] -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:top-[calc(50%-30rem)] lg:left-48 xl:left-[calc(50%-24rem)]"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
clip-path: polygon(
|
||||
73.6% 51.7%,
|
||||
91.7% 11.8%,
|
||||
100% 46.4%,
|
||||
97.4% 82.2%,
|
||||
92.5% 84.9%,
|
||||
75.7% 64%,
|
||||
55.3% 47.5%,
|
||||
46.5% 49.4%,
|
||||
45% 62.9%,
|
||||
50.3% 87.2%,
|
||||
21.3% 64.1%,
|
||||
0.1% 100%,
|
||||
5.4% 51.1%,
|
||||
21.4% 63.9%,
|
||||
58.9% 0.2%,
|
||||
73.6% 51.7%
|
||||
);
|
||||
"
|
||||
class="aspect-1108/632 w-277 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-20"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-32 lg:flex lg:px-8 lg:py-40"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
|
||||
<img
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
|
||||
alt="Your Company"
|
||||
class="h-11"
|
||||
/>
|
||||
<div class="mt-24 sm:mt-32 lg:mt-16">
|
||||
<a href="#" class="inline-flex space-x-6">
|
||||
<span
|
||||
class="rounded-full bg-indigo-500/10 px-3 py-1 text-sm/6 font-semibold text-indigo-400 ring-1 ring-indigo-500/25 ring-inset"
|
||||
>What's new</span
|
||||
>
|
||||
<span
|
||||
class="inline-flex items-center space-x-2 text-sm/6 font-medium text-gray-300"
|
||||
>
|
||||
<span>Just shipped v1.0</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
data-slot="icon"
|
||||
aria-hidden="true"
|
||||
class="size-5 text-gray-500"
|
||||
>
|
||||
<path
|
||||
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<h1
|
||||
class="mt-10 text-5xl font-semibold tracking-tight text-pretty text-white sm:text-7xl"
|
||||
>
|
||||
Deploy to the cloud with confidence
|
||||
</h1>
|
||||
<p
|
||||
class="mt-8 text-lg font-medium text-pretty text-gray-400 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 gap-x-6">
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
||||
>Get started</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Learn more <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32"
|
||||
>
|
||||
<div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
|
||||
<img
|
||||
width="2432"
|
||||
height="1442"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
|
||||
alt="App screenshot"
|
||||
class="w-304 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,225 @@
|
||||
<!-- 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">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="px-6 pt-6 lg:max-w-2xl lg:pr-0 lg:pl-8">
|
||||
<nav
|
||||
aria-label="Global"
|
||||
class="flex items-center justify-between lg:justify-start"
|
||||
>
|
||||
<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="Your Company"
|
||||
class="h-8 w-auto"
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
command="show-modal"
|
||||
commandfor="mobile-menu"
|
||||
class="-m-2.5 rounded-md p-2.5 text-gray-700 lg:hidden"
|
||||
>
|
||||
<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 class="hidden lg:ml-12 lg:flex lg:gap-x-14">
|
||||
<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
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-sm/6 font-semibold text-gray-900"
|
||||
>Log in</a
|
||||
>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50"
|
||||
>Log in</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">
|
||||
<div class="mx-auto max-w-7xl">
|
||||
<div class="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
preserveAspectRatio="none"
|
||||
aria-hidden="true"
|
||||
class="absolute inset-y-0 right-8 hidden h-full w-80 translate-x-1/2 transform fill-white lg:block"
|
||||
>
|
||||
<polygon points="0,0 90,0 50,100 0,100" />
|
||||
</svg>
|
||||
|
||||
<div
|
||||
class="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0"
|
||||
>
|
||||
<div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
|
||||
<div class="hidden sm:mb-10 sm:flex">
|
||||
<div
|
||||
class="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20"
|
||||
>
|
||||
Anim aute id magna aliqua ad ad non deserunt
|
||||
sunt.
|
||||
<a
|
||||
href="#"
|
||||
class="font-semibold whitespace-nowrap text-indigo-600"
|
||||
><span
|
||||
aria-hidden="true"
|
||||
class="absolute inset-0"
|
||||
></span
|
||||
>Read more
|
||||
<span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<h1
|
||||
class="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl"
|
||||
>
|
||||
Data to enrich your 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 fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-10 flex items-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>
|
||||
</div>
|
||||
<div class="bg-gray-50 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
|
||||
alt=""
|
||||
class="aspect-3/2 object-cover lg:aspect-auto lg:size-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,238 @@
|
||||
<!-- 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-gray-900">
|
||||
<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=500"
|
||||
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-400"
|
||||
>
|
||||
<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-white"
|
||||
>Product</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Features</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Marketplace</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Company</a
|
||||
>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>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-gray-900 p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-100/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=500"
|
||||
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-400"
|
||||
>
|
||||
<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/25">
|
||||
<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-white hover:bg-white/5"
|
||||
>Product</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
||||
>Features</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
||||
>Marketplace</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-white hover:bg-white/5"
|
||||
>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-white hover:bg-white/5"
|
||||
>Log in</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog-panel>
|
||||
</div>
|
||||
</dialog>
|
||||
</el-dialog>
|
||||
</header>
|
||||
|
||||
<div class="relative isolate pt-14">
|
||||
<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-20 sm:left-[calc(50%-30rem)] sm:w-288.75"
|
||||
></div>
|
||||
</div>
|
||||
<div class="py-24 sm:py-32 lg:pb-40">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<h1
|
||||
class="text-5xl font-semibold tracking-tight text-balance text-white sm:text-7xl"
|
||||
>
|
||||
Data to enrich your online business
|
||||
</h1>
|
||||
<p
|
||||
class="mt-8 text-lg font-medium text-pretty text-gray-400 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-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
|
||||
>Get started</a
|
||||
>
|
||||
<a href="#" class="text-sm/6 font-semibold text-white"
|
||||
>Learn more <span aria-hidden="true">→</span></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img
|
||||
width="2432"
|
||||
height="1442"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/dark-project-app-screenshot.png"
|
||||
alt="App screenshot"
|
||||
class="mt-16 rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 sm:mt-24"
|
||||
/>
|
||||
</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-20 sm:left-[calc(50%+36rem)] sm:w-288.75"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,243 @@
|
||||
<!-- 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 pt-14">
|
||||
<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="py-24 sm:py-32 lg:pb-40">
|
||||
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-2xl 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 class="mt-16 flow-root sm:mt-24">
|
||||
<div
|
||||
class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 ring-inset lg:-m-4 lg:rounded-2xl lg:p-4"
|
||||
>
|
||||
<img
|
||||
width="2432"
|
||||
height="1442"
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/project-app-screenshot.png"
|
||||
alt="App screenshot"
|
||||
class="w-304 rounded-md bg-gray-50 shadow-xl ring-1 ring-gray-900/10"
|
||||
/>
|
||||
</div>
|
||||
</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>
|
||||
Loading…
Reference in New Issue