95 lines
3.8 KiB
JavaScript
95 lines
3.8 KiB
JavaScript
import { Fragment } from 'react'
|
|
import { Popover, Transition } from '@headlessui/react'
|
|
import { ChevronDownIcon, PhoneIcon, PlayCircleIcon, RectangleGroupIcon } from '@heroicons/react/20/solid'
|
|
import { ChartPieIcon, CursorArrowRaysIcon, FingerPrintIcon, SquaresPlusIcon } from '@heroicons/react/24/outline'
|
|
|
|
const solutions = [
|
|
{
|
|
name: 'Analytics',
|
|
description: 'Get a better understanding of where your traffic is coming from',
|
|
href: '#',
|
|
icon: ChartPieIcon,
|
|
},
|
|
{
|
|
name: 'Engagement',
|
|
description: 'Speak directly to your customers with our engagement tool',
|
|
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 that you're already using",
|
|
href: '#',
|
|
icon: SquaresPlusIcon,
|
|
},
|
|
]
|
|
const callsToAction = [
|
|
{ name: 'Watch demo', href: '#', icon: PlayCircleIcon },
|
|
{ name: 'Contact sales', href: '#', icon: PhoneIcon },
|
|
{ name: 'View all products', href: '#', icon: RectangleGroupIcon },
|
|
]
|
|
|
|
export default function Example() {
|
|
return (
|
|
<Popover className="relative isolate z-50 shadow">
|
|
<div className="bg-white py-5">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<Popover.Button className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
|
|
Solutions
|
|
<ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
|
|
</Popover.Button>
|
|
</div>
|
|
</div>
|
|
|
|
<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 inset-x-0 top-0 -z-10 bg-white pt-16 shadow-lg ring-1 ring-gray-900/5">
|
|
<div className="mx-auto grid max-w-7xl grid-cols-1 gap-2 px-6 py-6 sm:grid-cols-2 sm:gap-x-6 sm:gap-y-0 sm:py-10 lg:grid-cols-4 lg:gap-4 lg:px-8 xl:gap-8">
|
|
{solutions.map((item) => (
|
|
<div
|
|
key={item.name}
|
|
className="group relative -mx-3 flex gap-6 rounded-lg p-3 text-sm leading-6 hover:bg-gray-50 sm:flex-col sm:p-6"
|
|
>
|
|
<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>
|
|
<a href={item.href} className="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="bg-gray-50">
|
|
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-1 divide-y divide-gray-900/5 sm:grid-cols-3 sm:divide-x sm:divide-y-0 sm:border-x sm:border-gray-900/5">
|
|
{callsToAction.map((item) => (
|
|
<a
|
|
key={item.name}
|
|
href={item.href}
|
|
className="flex items-center gap-x-2.5 p-3 px-6 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100 sm:justify-center sm:px-0"
|
|
>
|
|
<item.icon className="h-5 w-5 flex-none text-gray-400" aria-hidden="true" />
|
|
{item.name}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Popover.Panel>
|
|
</Transition>
|
|
</Popover>
|
|
)
|
|
}
|