diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/HeroSections.tsx')
| -rw-r--r-- | packages/exchange-backoffice-ui/src/HeroSections.tsx | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/packages/exchange-backoffice-ui/src/HeroSections.tsx b/packages/exchange-backoffice-ui/src/HeroSections.tsx new file mode 100644 index 000000000..d7890b2b9 --- /dev/null +++ b/packages/exchange-backoffice-ui/src/HeroSections.tsx @@ -0,0 +1,173 @@ +import { Dialog } from "@headlessui/react"; +import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline"; +import { h } from "preact"; +import { useState } from "preact/hooks"; + +const navigation = [ + { name: "Product", href: "#" }, + { name: "Features", href: "#" }, + { name: "Marketplace", href: "#" }, + { name: "Company", href: "#" }, +]; + +export function HeroSections() { + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + return ( + <div class="bg-white"> + <header class="absolute inset-x-0 top-0 z-50"> + <nav + class="flex items-center justify-between p-6 lg:px-8" + aria-label="Global" + > + <div class="flex lg:flex-1"> + <a href="#" class="-m-1.5 p-1.5"> + <span class="sr-only">Your Company</span> + <img + class="h-8 w-auto" + src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" + alt="" + /> + </a> + </div> + <div class="flex lg:hidden"> + <button + type="button" + class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700" + onClick={() => setMobileMenuOpen(true)} + > + <span class="sr-only">Open main menu</span> + <Bars3Icon class="h-6 w-6" aria-hidden="true" /> + </button> + </div> + <div class="hidden lg:flex lg:gap-x-12"> + {navigation.map((item) => ( + <a + key={item.name} + href={item.href} + class="text-sm font-semibold leading-6 text-gray-900" + > + {item.name} + </a> + ))} + </div> + <div class="hidden lg:flex lg:flex-1 lg:justify-end"> + <a href="#" class="text-sm font-semibold leading-6 text-gray-900"> + Log in <span aria-hidden="true">→</span> + </a> + </div> + </nav> + <Dialog + as="div" + class="lg:hidden" + open={mobileMenuOpen} + onClose={setMobileMenuOpen} + > + <div class="fixed inset-0 z-50" /> + <Dialog.Panel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-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 + class="h-8 w-auto" + src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" + alt="" + /> + </a> + <button + type="button" + class="-m-2.5 rounded-md p-2.5 text-gray-700" + onClick={() => setMobileMenuOpen(false)} + > + <span class="sr-only">Close menu</span> + <XMarkIcon class="h-6 w-6" aria-hidden="true" /> + </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"> + {navigation.map((item) => ( + <a + key={item.name} + href={item.href} + class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" + > + {item.name} + </a> + ))} + </div> + <div class="py-6"> + <a + href="#" + class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50" + > + Log in + </a> + </div> + </div> + </div> + </Dialog.Panel> + </Dialog> + </header> + + <div class="relative isolate px-6 pt-14 lg:px-8"> + <div + class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" + aria-hidden="true" + > + <div + class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" + style={{ + clipPath: + "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%)", + }} + /> + </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 leading-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 class="absolute inset-0" aria-hidden="true" /> + Read more <span aria-hidden="true">→</span> + </a> + </div> + </div> + <div class="text-center"> + <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl"> + Data to enrich your online business + </h1> + <p class="mt-6 text-lg leading-8 text-gray-600"> + 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 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-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + > + Get started + </a> + <a href="#" class="text-sm font-semibold leading-6 text-gray-900"> + Learn more <span aria-hidden="true">→</span> + </a> + </div> + </div> + </div> + <div + class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]" + aria-hidden="true" + > + <div + class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]" + style={{ + clipPath: + "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%)", + }} + /> + </div> + </div> + </div> + ); +} |