100 lines
3.6 KiB
Svelte
100 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { Popover, PopoverButton, PopoverPanel, Transition } from "$lib";
|
|
import { ChevronDownIcon } from "@rgossiaux/svelte-heroicons/solid";
|
|
import PopoverIconOne from "../PopoverIconOne.svelte";
|
|
import PopoverIconTwo from "../PopoverIconTwo.svelte";
|
|
import PopoverIconThree from "../PopoverIconThree.svelte";
|
|
|
|
const solutions = [
|
|
{
|
|
name: "Insights",
|
|
description: "Measure actions your users take",
|
|
href: "##",
|
|
icon: PopoverIconOne,
|
|
},
|
|
{
|
|
name: "Automations",
|
|
description: "Create your own targeted content",
|
|
href: "##",
|
|
icon: PopoverIconTwo,
|
|
},
|
|
{
|
|
name: "Reports",
|
|
description: "Keep track of your growth",
|
|
href: "##",
|
|
icon: PopoverIconThree,
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<div class="w-full max-w-sm px-4 fixed top-16">
|
|
<Popover class="relative" let:open>
|
|
<PopoverButton
|
|
class={`
|
|
${open ? "" : "text-opacity-90"}
|
|
text-white group bg-orange-700 px-3 py-2 rounded-md inline-flex items-center text-base font-medium hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
|
|
>
|
|
<span>Solutions</span>
|
|
<ChevronDownIcon
|
|
class={`${open ? "" : "text-opacity-70"}
|
|
ml-2 h-5 w-5 text-orange-300 group-hover:text-opacity-80 transition ease-in-out duration-150`}
|
|
aria-hidden="true"
|
|
/>
|
|
</PopoverButton>
|
|
<Transition
|
|
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"
|
|
>
|
|
<PopoverPanel
|
|
class="absolute z-10 w-screen max-w-sm px-4 mt-3 transform -translate-x-1/2 left-1/2 sm:px-0 lg:max-w-3xl"
|
|
>
|
|
<div
|
|
class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
|
|
>
|
|
<div class="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
|
|
{#each solutions as item (item.name)}
|
|
<a
|
|
href={item.href}
|
|
class="flex items-center p-2 -m-3 transition duration-150 ease-in-out rounded-lg hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
|
|
>
|
|
<div
|
|
class="flex items-center justify-center flex-shrink-0 w-10 h-10 text-white sm:h-12 sm:w-12"
|
|
>
|
|
<svelte:component this={item.icon} aria-hidden="true" />
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-sm font-medium text-gray-900">
|
|
{item.name}
|
|
</p>
|
|
<p class="text-sm text-gray-500">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
<div class="p-4 bg-gray-50">
|
|
<a
|
|
href="##"
|
|
class="flow-root px-2 py-2 transition duration-150 ease-in-out rounded-md hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
|
|
>
|
|
<span class="flex items-center">
|
|
<span class="text-sm font-medium text-gray-900">
|
|
Documentation
|
|
</span>
|
|
</span>
|
|
<span class="block text-sm text-gray-500">
|
|
Start integrating products and tools
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</PopoverPanel>
|
|
</Transition>
|
|
</Popover>
|
|
</div>
|