Spaces:
Sleeping
Sleeping
File size: 6,056 Bytes
1e8ff3b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
import { Popover, Transition } from "@headlessui/react";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { Fragment } from "react";
const solutions = [
{
name: "Insights",
description: "Measure actions your users take",
href: "##",
icon: IconOne,
},
{
name: "Automations",
description: "Create your own targeted content",
href: "##",
icon: IconTwo,
},
{
name: "Reports",
description: "Keep track of your growth",
href: "##",
icon: IconThree,
},
];
export default function PresetPrompts() {
return (
<div className="top-16 w-full max-w-sm px-4">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`
${open ? "text-white" : "text-white/90"}
group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75`}
>
<span>Solutions</span>
<ChevronDownIcon
className={`${open ? "text-orange-300" : "text-orange-300/70"}
ml-2 h-5 w-5 transition duration-150 ease-in-out group-hover:text-orange-300/80`}
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-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black/5">
<div className="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500/50"
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
<item.icon aria-hidden="true" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-900">
{item.name}
</p>
<p className="text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
<div className="bg-gray-50 p-4">
<a
href="##"
className="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500/50"
>
<span className="flex items-center">
<span className="text-sm font-medium text-gray-900">
Documentation
</span>
</span>
<span className="block text-sm text-gray-500">
Start integrating products and tools
</span>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
);
}
function IconOne() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="48" height="48" rx="8" fill="#FFEDD5" />
<path
d="M24 11L35.2583 17.5V30.5L24 37L12.7417 30.5V17.5L24 11Z"
stroke="#FB923C"
strokeWidth="2"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16.7417 19.8094V28.1906L24 32.3812L31.2584 28.1906V19.8094L24 15.6188L16.7417 19.8094Z"
stroke="#FDBA74"
strokeWidth="2"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20.7417 22.1196V25.882L24 27.7632L27.2584 25.882V22.1196L24 20.2384L20.7417 22.1196Z"
stroke="#FDBA74"
strokeWidth="2"
/>
</svg>
);
}
function IconTwo() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="48" height="48" rx="8" fill="#FFEDD5" />
<path
d="M28.0413 20L23.9998 13L19.9585 20M32.0828 27.0001L36.1242 34H28.0415M19.9585 34H11.8755L15.9171 27"
stroke="#FB923C"
strokeWidth="2"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M18.804 30H29.1963L24.0001 21L18.804 30Z"
stroke="#FDBA74"
strokeWidth="2"
/>
</svg>
);
}
function IconThree() {
return (
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="48" height="48" rx="8" fill="#FFEDD5" />
<rect x="13" y="32" width="2" height="4" fill="#FDBA74" />
<rect x="17" y="28" width="2" height="8" fill="#FDBA74" />
<rect x="21" y="24" width="2" height="12" fill="#FDBA74" />
<rect x="25" y="20" width="2" height="16" fill="#FDBA74" />
<rect x="29" y="16" width="2" height="20" fill="#FB923C" />
<rect x="33" y="12" width="2" height="24" fill="#FB923C" />
</svg>
);
}
|