diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/HeroSections.tsx')
| -rw-r--r-- | packages/exchange-backoffice-ui/src/HeroSections.tsx | 174 |
1 files changed, 0 insertions, 174 deletions
diff --git a/packages/exchange-backoffice-ui/src/HeroSections.tsx b/packages/exchange-backoffice-ui/src/HeroSections.tsx deleted file mode 100644 index bdfaa49d4..000000000 --- a/packages/exchange-backoffice-ui/src/HeroSections.tsx +++ /dev/null @@ -1,174 +0,0 @@ -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" - /* @ts-ignore */ - 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> - ); -} |