import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { dummyLink } from "../../utils";
import DummyLink from "../../components/DummyLink";
import { t, Trans } from "@lingui/macro";
import LocaleLink from "../../components/LocaleLink";
import { useAppSelector } from "../../state/hooks";
import { useTitle } from "../../hooks";
const navigation = [
{ name: t`Product`, href: dummyLink() },
{ name: t`Features`, href: dummyLink() },
{ name: t`Company`, href: dummyLink() },
{ name: t`Pricing`, href: dummyLink() },
];
export default function SplashPage() {
const { user } = useAppSelector((state) => state.user);
useTitle([]);
return (
<div className="relative overflow-hidden bg-white">
<div
className="hidden lg:absolute lg:inset-0 lg:block"
aria-hidden="true"
>
<svg
className="absolute top-0 left-1/2 translate-x-64 -translate-y-8 transform"
width={640}
height={784}
fill="none"
viewBox="0 0 640 784"
>
<defs>
<pattern
id="9ebea6f4-a1f5-4d96-8c4e-4c2abf658047"
x={118}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
y={72}
width={640}
height={640}
className="text-gray-50"
fill="currentColor"
/>
<rect
x={118}
width={404}
height={784}
fill="url(#9ebea6f4-a1f5-4d96-8c4e-4c2abf658047)"
/>
</svg>
</div>
<div className="relative pt-6 pb-16 sm:pb-24 lg:pb-32">
<Popover>
<nav
className="relative mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6"
aria-label="Global"
>
<div className="flex flex-1 items-center">
<div className="flex w-full items-center justify-between md:w-auto">
<span className="sr-only">Samling.io</span>
<img className="h-8 w-auto sm:h-10" src="/logo.webp" alt="" />
<div className="-mr-2 flex items-center md:hidden">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open main menu</span>
<Bars3Icon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="hidden md:ml-10 md:block md:space-x-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="font-medium text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
))}
</div>
</div>
<div className="hidden text-right md:block">
<span className="inline-flex rounded-md shadow-md ring-1 ring-black ring-opacity-5">
{!!user ? (
<LocaleLink
to="/app"
className="inline-flex items-center rounded-md border border-transparent bg-white px-4 py-2 text-base font-medium text-indigo-500 hover:bg-gray-50"
>
<Trans>Go to app</Trans>
</LocaleLink>
) : (
<LocaleLink
to="/auth/login"
className="inline-flex items-center rounded-md border border-transparent bg-white px-4 py-2 text-base font-medium text-indigo-500 hover:bg-gray-50"
>
<Trans>Log in</Trans>
</LocaleLink>
)}
</span>
</div>
</nav>
<Transition
as={Fragment}
enter="duration-150 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel
focus
className="absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition md:hidden"
>
<div className="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
<div className="flex items-center justify-between px-5 pt-4">
<div>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/mark.svg?color=green&shade=600"
alt=""
/>
</div>
<div className="-mr-2">
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Close main menu</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="space-y-1 px-2 pt-2 pb-3">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
>
{item.name}
</a>
))}
</div>
<LocaleLink
to="/auth/login"
className="block w-full bg-gray-50 px-5 py-3 text-center font-medium text-indigo-600 hover:bg-gray-100"
>
<Trans>Log in</Trans>
</LocaleLink>
</div>
</Popover.Panel>
</Transition>
</Popover>
<main className="mx-auto mt-16 max-w-7xl px-4 sm:mt-24 sm:px-6 lg:mt-32">
<div className="lg:grid lg:grid-cols-12 lg:gap-8">
<div className="sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:text-left">
<h1>
<span className="mt-1 block text-4xl font-bold tracking-tight sm:text-5xl xl:text-6xl">
<Trans>
<span className="block text-gray-900">
Get full insight into
</span>
<span className="block text-indigo-600">
your product data.
</span>
</Trans>
</span>
</h1>
<p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
<Trans>
Tired of collecting data from multiple different ERP systems
and combining them in your Excel sheets? This
Software-as-a-Service wants to help you.
</Trans>
</p>
<div className="mt-8 sm:mx-auto sm:max-w-lg sm:text-center lg:mx-0 lg:text-left">
<p className="text-base font-medium text-gray-900">
<Trans>
Provide your e-mail below to hear from our team.
</Trans>
</p>
<form action="#" method="POST" className="mt-3 sm:flex">
<label htmlFor="email" className="sr-only">
Email
</label>
<input
type="email"
name="email"
id="email"
className="block w-full rounded-md border-gray-300 py-3 text-base placeholder-gray-500 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:flex-1"
placeholder={t`Enter your email`}
/>
<button
type="submit"
className="mt-3 w-full rounded-md border border-transparent bg-gray-800 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:inline-flex sm:w-auto sm:flex-shrink-0 sm:items-center"
>
<Trans>Contact me</Trans>
</button>
</form>
<p className="mt-3 text-sm text-gray-500">
<Trans>
<span>
We care about the protection of your data. Read our{" "}
</span>
<DummyLink className="font-medium text-gray-900 underline">
Privacy Policy
</DummyLink>
.
</Trans>
</p>
</div>
</div>
<div className="relative mt-12 sm:mx-auto sm:max-w-lg lg:col-span-6 lg:mx-0 lg:mt-0 lg:flex lg:max-w-none lg:items-center">
<svg
className="absolute top-0 left-1/2 origin-top -translate-x-1/2 -translate-y-8 scale-75 transform sm:scale-100 lg:hidden"
width={640}
height={784}
fill="none"
viewBox="0 0 640 784"
aria-hidden="true"
>
<defs>
<pattern
id="4f4f415c-a0e9-44c2-9601-6ded5a34a13e"
x={118}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
y={72}
width={640}
height={640}
className="text-gray-50"
fill="currentColor"
/>
<rect
x={118}
width={404}
height={784}
fill="url(#4f4f415c-a0e9-44c2-9601-6ded5a34a13e)"
/>
</svg>
<div className="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-lg">
<button
type="button"
className="relative block w-full overflow-hidden rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<img className="w-full" src="/app-screenshot.webp" alt="" />
</button>
</div>
</div>
</div>
</main>
</div>
</div>
);
}