256 lines
15 KiB
TypeScript
256 lines
15 KiB
TypeScript
|
'use client'
|
|||
|
|
import { Fragment, useState } from 'react'
|
|||
|
|
import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'
|
|||
|
|
import {
|
|||
|
|
ArrowPathIcon,
|
|||
|
|
Bars3Icon,
|
|||
|
|
ChartPieIcon,
|
|||
|
|
CursorArrowRaysIcon,
|
|||
|
|
FingerPrintIcon,
|
|||
|
|
SquaresPlusIcon,
|
|||
|
|
XMarkIcon,
|
|||
|
|
} from '@heroicons/react/24/outline'
|
|||
|
|
import { ChevronDownIcon, PhoneIcon, PlayCircleIcon } from '@heroicons/react/20/solid'
|
|||
|
|
import classNames from 'classnames';
|
|||
|
|
|
|||
|
|
const products = [
|
|||
|
|
{ name: 'Analytics', description: 'Get a better understanding of your traffic', href: '#', icon: ChartPieIcon },
|
|||
|
|
{ name: 'Engagement', description: 'Speak directly to your customers', href: '#', icon: CursorArrowRaysIcon },
|
|||
|
|
{ name: 'Security', description: 'Your customers’ data will be safe and secure', href: '#', icon: FingerPrintIcon },
|
|||
|
|
{ name: 'Integrations', description: 'Connect with third-party tools', href: '#', icon: SquaresPlusIcon },
|
|||
|
|
{ name: 'Automations', description: 'Build strategic funnels that will convert', href: '#', icon: ArrowPathIcon },
|
|||
|
|
]
|
|||
|
|
const callsToAction = [
|
|||
|
|
{ name: 'Watch demo', href: '#', icon: PlayCircleIcon },
|
|||
|
|
{ name: 'Contact sales', href: '#', icon: PhoneIcon },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default function Example() {
|
|||
|
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<header className="bg-white relative">
|
|||
|
|
<nav className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
|
|||
|
|
<div className="flex lg:flex-1">
|
|||
|
|
<a href="#" className="-m-1.5 p-1.5">
|
|||
|
|
<span className="sr-only">Your Company</span>
|
|||
|
|
<img className="h-8 w-auto"
|
|||
|
|
src="https://ds.cache.wpscdn.com/academy/img/logo.3ba1569.svg" alt=""/>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex lg:hidden">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
|
|||
|
|
onClick={() => setMobileMenuOpen(true)}
|
|||
|
|
>
|
|||
|
|
<span className="sr-only">Open main menu</span>
|
|||
|
|
<Bars3Icon className="h-6 w-6" aria-hidden="true"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<Popover.Group className="hidden lg:flex lg:gap-x-12">
|
|||
|
|
<a href="#" className="text-sm font-semibold leading-6 text-gray-900">Home</a>
|
|||
|
|
|
|||
|
|
<Popover className="">
|
|||
|
|
<Popover.Button
|
|||
|
|
className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
|
|||
|
|
Video Tutorial
|
|||
|
|
<ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
|||
|
|
</Popover.Button>
|
|||
|
|
|
|||
|
|
<Transition
|
|||
|
|
as={Fragment}
|
|||
|
|
enter="transition ease-out duration-200"
|
|||
|
|
enterFrom="opacity-0 translate-y-1"
|
|||
|
|
enterTo="opacity-100 translate-y-0"
|
|||
|
|
leave="transition ease-in duration-150"
|
|||
|
|
leaveFrom="opacity-100 translate-y-0"
|
|||
|
|
leaveTo="opacity-0 translate-y-1"
|
|||
|
|
>
|
|||
|
|
<Popover.Panel
|
|||
|
|
className="absolute left-0.5 right-0.5 mt-1 top-full z-10 w-screen overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
|
|||
|
|
<div className="p-4">
|
|||
|
|
{products.map((item) => (
|
|||
|
|
<div
|
|||
|
|
key={item.name}
|
|||
|
|
className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
|
|||
|
|
<item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
|
|||
|
|
aria-hidden="true"/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-auto">
|
|||
|
|
<a href={item.href} className="block font-semibold text-gray-900">
|
|||
|
|
{item.name}
|
|||
|
|
<span className="absolute inset-0"/>
|
|||
|
|
</a>
|
|||
|
|
<p className="mt-1 text-gray-600">{item.description}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
|
|||
|
|
{callsToAction.map((item) => (
|
|||
|
|
<a
|
|||
|
|
key={item.name}
|
|||
|
|
href={item.href}
|
|||
|
|
className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
|
|||
|
|
>
|
|||
|
|
<item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
|||
|
|
{item.name}
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</Popover.Panel>
|
|||
|
|
</Transition>
|
|||
|
|
</Popover>
|
|||
|
|
|
|||
|
|
<Popover className="">
|
|||
|
|
<Popover.Button
|
|||
|
|
className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
|
|||
|
|
Graphic Tutorial
|
|||
|
|
<ChevronDownIcon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
|||
|
|
</Popover.Button>
|
|||
|
|
|
|||
|
|
<Transition
|
|||
|
|
as={Fragment}
|
|||
|
|
enter="transition ease-out duration-200"
|
|||
|
|
enterFrom="opacity-0 translate-y-1"
|
|||
|
|
enterTo="opacity-100 translate-y-0"
|
|||
|
|
leave="transition ease-in duration-150"
|
|||
|
|
leaveFrom="opacity-100 translate-y-0"
|
|||
|
|
leaveTo="opacity-0 translate-y-1"
|
|||
|
|
>
|
|||
|
|
<Popover.Panel
|
|||
|
|
className="absolute left-0.5 right-0.5 mt-1 top-full z-10 w-screen overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5">
|
|||
|
|
<div className="p-4">
|
|||
|
|
{products.map((item) => (
|
|||
|
|
<div
|
|||
|
|
key={item.name}
|
|||
|
|
className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
|
|||
|
|
<item.icon className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
|
|||
|
|
aria-hidden="true"/>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex-auto">
|
|||
|
|
<a href={item.href} className="block font-semibold text-gray-900">
|
|||
|
|
{item.name}
|
|||
|
|
<span className="absolute inset-0"/>
|
|||
|
|
</a>
|
|||
|
|
<p className="mt-1 text-gray-600">{item.description}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
|
|||
|
|
{callsToAction.map((item) => (
|
|||
|
|
<a
|
|||
|
|
key={item.name}
|
|||
|
|
href={item.href}
|
|||
|
|
className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
|
|||
|
|
>
|
|||
|
|
<item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true"/>
|
|||
|
|
{item.name}
|
|||
|
|
</a>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</Popover.Panel>
|
|||
|
|
</Transition>
|
|||
|
|
</Popover>
|
|||
|
|
</Popover.Group>
|
|||
|
|
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
|
|||
|
|
<a href="#" className="hidden xl:flex text-sm font-semibold leading-6 text-gray-900">
|
|||
|
|
Login/Sign up
|
|||
|
|
{/*Log in <span aria-hidden="true">→</span>*/}
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
|
|||
|
|
<div className="fixed inset-0 z-10"/>
|
|||
|
|
<Dialog.Panel
|
|||
|
|
className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<a href="#" className="-m-1.5 p-1.5">
|
|||
|
|
<span className="sr-only">Your Company</span>
|
|||
|
|
<img
|
|||
|
|
className="h-8 w-auto"
|
|||
|
|
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
|
|||
|
|
alt=""
|
|||
|
|
/>
|
|||
|
|
</a>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="-m-2.5 rounded-md p-2.5 text-gray-700"
|
|||
|
|
onClick={() => setMobileMenuOpen(false)}
|
|||
|
|
>
|
|||
|
|
<span className="sr-only">Close menu</span>
|
|||
|
|
<XMarkIcon className="h-6 w-6" aria-hidden="true"/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="mt-6 flow-root">
|
|||
|
|
<div className="-my-6 divide-y divide-gray-500/10">
|
|||
|
|
<div className="space-y-2 py-6">
|
|||
|
|
<Disclosure as="div" className="-mx-3">
|
|||
|
|
{({ open }) => (
|
|||
|
|
<>
|
|||
|
|
<Disclosure.Button
|
|||
|
|
className="flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
|
|||
|
|
Product
|
|||
|
|
<ChevronDownIcon
|
|||
|
|
className={classNames(open ? 'rotate-180' : '', 'h-5 w-5 flex-none')}
|
|||
|
|
aria-hidden="true"
|
|||
|
|
/>
|
|||
|
|
</Disclosure.Button>
|
|||
|
|
<Disclosure.Panel className="mt-2 space-y-2">
|
|||
|
|
{[...products, ...callsToAction].map((item) => (
|
|||
|
|
<Disclosure.Button
|
|||
|
|
key={item.name}
|
|||
|
|
as="a"
|
|||
|
|
href={item.href}
|
|||
|
|
className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
{item.name}
|
|||
|
|
</Disclosure.Button>
|
|||
|
|
))}
|
|||
|
|
</Disclosure.Panel>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Disclosure>
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
Features
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
Marketplace
|
|||
|
|
</a>
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
|||
|
|
>
|
|||
|
|
Company
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div className="py-6">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="-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>
|
|||
|
|
)
|
|||
|
|
}
|