Landings
Background Image Hero With Alternating Features
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
AnnotationIcon,
ChatAlt2Icon,
ChatAltIcon,
DocumentReportIcon,
HeartIcon,
InboxIcon,
MenuIcon,
PencilAltIcon,
QuestionMarkCircleIcon,
ReplyIcon,
SparklesIcon,
TrashIcon,
UsersIcon,
XIcon,
} from "@heroicons/react/outline";
import { ChevronDownIcon } from "@heroicons/react/solid";
const solutions = [
{
name: "Inbox",
description:
"Get a better understanding of where your traffic is coming from.",
href: "#",
icon: InboxIcon,
},
{
name: "Messaging",
description: "Speak directly to your customers in a more meaningful way.",
href: "#",
icon: AnnotationIcon,
},
{
name: "Live Chat",
description: "Your customers' data will be safe and secure.",
href: "#",
icon: ChatAlt2Icon,
},
{
name: "Knowledge Base",
description: "Connect with third-party tools that you're already using.",
href: "#",
icon: QuestionMarkCircleIcon,
},
];
const features = [
{
name: "Unlimited Inboxes",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: InboxIcon,
},
{
name: "Manage Team Members",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: UsersIcon,
},
{
name: "Spam Report",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: TrashIcon,
},
{
name: "Compose in Markdown",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: PencilAltIcon,
},
{
name: "Team Reporting",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: DocumentReportIcon,
},
{
name: "Saved Replies",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: ReplyIcon,
},
{
name: "Email Commenting",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: ChatAltIcon,
},
{
name: "Connect with Customers",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi lobortis.",
icon: HeartIcon,
},
];
const metrics = [
{
id: 1,
stat: "8K+",
emphasis: "Companies",
rest: "use laoreet amet lacus nibh integer quis.",
},
{
id: 2,
stat: "25K+",
emphasis: "Countries around the globe",
rest: "lacus nibh integer quis.",
},
{
id: 3,
stat: "98%",
emphasis: "Customer satisfaction",
rest: "laoreet amet lacus nibh integer quis.",
},
{
id: 4,
stat: "12M+",
emphasis: "Issues resolved",
rest: "lacus nibh integer quis.",
},
];
const footerNavigation = {
solutions: [
{ name: "Marketing", href: "#" },
{ name: "Analytics", href: "#" },
{ name: "Commerce", href: "#" },
{ name: "Insights", href: "#" },
],
support: [
{ name: "Pricing", href: "#" },
{ name: "Documentation", href: "#" },
{ name: "Guides", href: "#" },
{ name: "API Status", href: "#" },
],
company: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Partners", href: "#" },
],
legal: [
{ name: "Claim", href: "#" },
{ name: "Privacy", href: "#" },
{ name: "Terms", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
export default function Example() {
return (
<div className="bg-white">
<header>
<Popover className="relative bg-white">
{({ open }) => (
<>
<div className="flex justify-between items-center max-w-7xl mx-auto px-4 py-6 sm:px-6 md:justify-start md:space-x-10 lg:px-8">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="https://tailwindui.com/img/logos/Loesen-mark-purple-600-to-blue-600.svg"
alt=""
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-10">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? "text-gray-900" : "text-gray-500",
"group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? "text-gray-600" : "text-gray-400",
"ml-2 h-5 w-5 group-hover:text-gray-500"
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
show={open}
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
static
className="absolute z-10 -ml-4 mt-3 transform w-screen max-w-md lg:max-w-2xl lg:ml-0 lg:left-1/2 lg:-translate-x-1/2"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gradient-to-r from-purple-600 to-blue-600 text-white sm:h-12 sm:w-12">
<item.icon
className="h-6 w-6"
aria-hidden="true"
/>
</div>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">
{item.name}
</p>
<p className="mt-1 text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<a
href="#"
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
Pricing
</a>
<a
href="#"
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
Partners
</a>
<a
href="#"
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
Company
</a>
</Popover.Group>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<a
href="#"
className="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900"
>
Sign in
</a>
<a
href="#"
className="ml-8 whitespace-nowrap inline-flex items-center justify-center bg-gradient-to-r from-purple-600 to-blue-600 bg-origin-border px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white hover:from-purple-700 hover:to-blue-700"
>
Sign up
</a>
</div>
</div>
<Transition
show={open}
as={Fragment}
enter="duration-200 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
static
className="absolute z-30 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
>
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid grid-cols-1 gap-7">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50"
>
<div className="flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-md bg-gradient-to-r from-purple-600 to-blue-600 text-white">
<item.icon
className="h-6 w-6"
aria-hidden="true"
/>
</div>
<div className="ml-4 text-base font-medium text-gray-900">
{item.name}
</div>
</a>
))}
</nav>
</div>
</div>
<div className="py-6 px-5">
<div className="grid grid-cols-2 gap-4">
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Pricing
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Partners
</a>
<a
href="#"
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
Company
</a>
</div>
<div className="mt-6">
<a
href="#"
className="w-full flex items-center justify-center bg-gradient-to-r from-purple-600 to-blue-600 bg-origin-border px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white hover:from-purple-700 hover:to-blue-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?
<a href="#" className="text-gray-900">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</header>
<main>
{/* Hero section */}
<div className="relative">
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
<div className="absolute inset-0">
<img
className="h-full w-full object-cover"
src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
alt="People working on laptops"
/>
<div className="absolute inset-0 bg-gradient-to-r from-purple-800 to-blue-700 mix-blend-multiply" />
</div>
<div className="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
<h1 className="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
<span className="block text-white">Take control of your</span>
<span className="block text-blue-200">
customer support
</span>
</h1>
<p className="mt-6 max-w-lg mx-auto text-center text-xl text-blue-200 sm:max-w-3xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui lorem cupidatat commodo. Elit sunt amet fugiat veniam
occaecat fugiat aliqua.
</p>
<div className="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center">
<div className="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5">
<a
href="#"
className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-700 bg-white hover:bg-blue-50 sm:px-8"
>
Get started
</a>
<a
href="#"
className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
>
Live demo
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Logo Cloud */}
<div className="bg-gray-100">
<div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
<p className="text-center text-sm font-semibold uppercase text-gray-500 tracking-wide">
Trusted by over 5 very average small businesses
</p>
<div className="mt-6 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/tuple-logo-gray-400.svg"
alt="Tuple"
/>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/mirage-logo-gray-400.svg"
alt="Mirage"
/>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/statickit-logo-gray-400.svg"
alt="StaticKit"
/>
</div>
<div className="col-span-1 flex justify-center md:col-span-2 md:col-start-2 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/transistor-logo-gray-400.svg"
alt="Transistor"
/>
</div>
<div className="col-span-2 flex justify-center md:col-span-2 md:col-start-4 lg:col-span-1">
<img
className="h-12"
src="https://tailwindui.com/img/logos/workcation-logo-gray-400.svg"
alt="Workcation"
/>
</div>
</div>
</div>
</div>
{/* Alternating Feature Sections */}
<div className="relative pt-16 pb-32 overflow-hidden">
<div
aria-hidden="true"
className="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"
/>
<div className="relative">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-16 lg:max-w-none lg:mx-0 lg:px-0">
<div>
<div>
<span className="h-12 w-12 rounded-md flex items-center justify-center bg-gradient-to-r from-purple-600 to-blue-600">
<InboxIcon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
Stay on top of customer support
</h2>
<p className="mt-4 text-lg text-gray-500">
Semper curabitur ullamcorper posuere nunc sed. Ornare
iaculis bibendum malesuada faucibus lacinia porttitor.
Pulvinar laoreet sagittis viverra duis. In venenatis sem
arcu pretium pharetra at. Lectus viverra dui tellus ornare
pharetra.
</p>
<div className="mt-6">
<a
href="#"
className="inline-flex bg-gradient-to-r from-purple-600 to-blue-600 bg-origin-border px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:from-purple-700 hover:to-blue-700"
>
Get started
</a>
</div>
</div>
</div>
<div className="mt-8 border-t border-gray-200 pt-6">
<blockquote>
<div>
<p className="text-base text-gray-500">
“Cras velit quis eros eget rhoncus lacus ultrices
sed diam. Sit orci risus aenean curabitur donec aliquet.
Mi venenatis in euismod ut.”
</p>
</div>
<footer className="mt-3">
<div className="flex items-center space-x-3">
<div className="flex-shrink-0">
<img
className="h-6 w-6 rounded-full"
src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80"
alt=""
/>
</div>
<div className="text-base font-medium text-gray-700">
Marcia Hill, Digital Marketing Manager
</div>
</div>
</footer>
</blockquote>
</div>
</div>
<div className="mt-12 sm:mt-16 lg:mt-0">
<div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<img
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/inbox-app-screenshot-1.jpg"
alt="Inbox user interface"
/>
</div>
</div>
</div>
</div>
<div className="mt-24">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24">
<div className="px-4 max-w-xl mx-auto sm:px-6 lg:py-32 lg:max-w-none lg:mx-0 lg:px-0 lg:col-start-2">
<div>
<div>
<span className="h-12 w-12 rounded-md flex items-center justify-center bg-gradient-to-r from-purple-600 to-blue-600">
<SparklesIcon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</span>
</div>
<div className="mt-6">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900">
Better understand your customers
</h2>
<p className="mt-4 text-lg text-gray-500">
Semper curabitur ullamcorper posuere nunc sed. Ornare
iaculis bibendum malesuada faucibus lacinia porttitor.
Pulvinar laoreet sagittis viverra duis. In venenatis sem
arcu pretium pharetra at. Lectus viverra dui tellus ornare
pharetra.
</p>
<div className="mt-6">
<a
href="#"
className="inline-flex bg-gradient-to-r from-purple-600 to-blue-600 bg-origin-border px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:from-purple-700 hover:to-blue-700"
>
Get started
</a>
</div>
</div>
</div>
</div>
<div className="mt-12 sm:mt-16 lg:mt-0 lg:col-start-1">
<div className="pr-4 -ml-48 sm:pr-6 md:-ml-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
<img
className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:right-0 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/inbox-app-screenshot-2.jpg"
alt="Customer profile user interface"
/>
</div>
</div>
</div>
</div>
</div>
{/* Gradient Feature Section */}
<div className="bg-gradient-to-r from-purple-800 to-blue-700">
<div className="max-w-4xl mx-auto px-4 py-16 sm:px-6 sm:pt-20 sm:pb-24 lg:max-w-7xl lg:pt-24 lg:px-8">
<h2 className="text-3xl font-extrabold text-white tracking-tight">
Inbox support built for efficiency
</h2>
<p className="mt-4 max-w-3xl text-lg text-purple-200">
Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et
magna sit morbi lobortis. Blandit aliquam sit nisl euismod mattis
in.
</p>
<div className="mt-12 grid grid-cols-1 gap-x-6 gap-y-12 sm:grid-cols-2 lg:mt-16 lg:grid-cols-4 lg:gap-x-8 lg:gap-y-16">
{features.map((feature) => (
<div key={feature.name}>
<div>
<span className="flex items-center justify-center h-12 w-12 rounded-md bg-white bg-opacity-10">
<feature.icon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</span>
</div>
<div className="mt-6">
<h3 className="text-lg font-medium text-white">
{feature.name}
</h3>
<p className="mt-2 text-base text-purple-200">
{feature.description}
</p>
</div>
</div>
))}
</div>
</div>
</div>
{/* Stats section */}
<div className="relative bg-gray-900">
<div className="h-80 absolute inset-x-0 bottom-0 xl:top-0 xl:h-full">
<div className="h-full w-full xl:grid xl:grid-cols-2">
<div className="h-full xl:relative xl:col-start-2">
<img
className="h-full w-full object-cover opacity-25 xl:absolute xl:inset-0"
src="https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2830&q=80&sat=-100"
alt="People working on laptops"
/>
<div
aria-hidden="true"
className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-gray-900 xl:inset-y-0 xl:left-0 xl:h-full xl:w-32 xl:bg-gradient-to-r"
/>
</div>
</div>
</div>
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:max-w-7xl lg:px-8 xl:grid xl:grid-cols-2 xl:grid-flow-col-dense xl:gap-x-8">
<div className="relative pt-12 pb-64 sm:pt-24 sm:pb-64 xl:col-start-1 xl:pb-24">
<h2 className="text-sm font-semibold tracking-wide uppercase">
<span className="bg-gradient-to-r from-purple-300 to-blue-300 bg-clip-text text-transparent">
Valuable Metrics
</span>
</h2>
<p className="mt-3 text-3xl font-extrabold text-white">
Get actionable data that will help grow your business
</p>
<p className="mt-5 text-lg text-gray-300">
Rhoncus sagittis risus arcu erat lectus bibendum. Ut in
adipiscing quis in viverra tristique sem. Ornare feugiat viverra
eleifend fusce orci in quis amet. Sit in et vitae tortor, massa.
Dapibus laoreet amet lacus nibh integer quis. Eu vulputate diam
sit tellus quis at.
</p>
<div className="mt-12 grid grid-cols-1 gap-y-12 gap-x-6 sm:grid-cols-2">
{metrics.map((item) => (
<p key={item.id}>
<span className="block text-2xl font-bold text-white">
{item.stat}
</span>
<span className="mt-1 block text-base text-gray-300">
<span className="font-medium text-white">
{item.emphasis}
</span>{" "}
{item.rest}
</span>
</p>
))}
</div>
</div>
</div>
</div>
{/* CTA Section */}
<div className="bg-white">
<div className="max-w-4xl mx-auto py-16 px-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
<span className="block">Ready to get started?</span>
<span className="block bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
Get in touch or create an account.
</span>
</h2>
<div className="mt-6 space-y-4 sm:space-y-0 sm:flex sm:space-x-5">
<a
href="#"
className="flex items-center justify-center bg-gradient-to-r from-purple-600 to-blue-600 bg-origin-border px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:from-purple-700 hover:to-blue-700"
>
Learn more
</a>
<a
href="#"
className="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-blue-800 bg-blue-50 hover:bg-blue-100"
>
Get started
</a>
</div>
</div>
</div>
</main>
<footer className="bg-gray-50" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-7xl mx-auto pt-16 pb-8 px-4 sm:px-6 lg:pt-24 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="grid grid-cols-2 gap-8 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Support
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="mt-12 xl:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Subscribe to our newsletter
</h3>
<p className="mt-4 text-base text-gray-500">
The latest news, articles, and resources, sent to your inbox
weekly.
</p>
<form className="mt-4 sm:flex sm:max-w-md">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
type="email"
name="email-address"
id="email-address"
autoComplete="email"
required
className="appearance-none min-w-0 w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:placeholder-gray-400"
placeholder="Enter your email"
/>
<div className="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
type="submit"
className="w-full flex items-center justify-center bg-gradient-to-r from-purple-600 to-blue-600 bg-origin-border px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white hover:from-purple-700 hover:to-blue-700"
>
Subscribe
</button>
</div>
</form>
</div>
</div>
<div className="mt-12 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between lg:mt-16">
<div className="flex space-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
Illustrated Hero With Screenshot Section
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
// ...
theme: {
extend: {
colors: {
teal: colors.teal,
cyan: colors.cyan,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
CloudUploadIcon,
CogIcon,
LockClosedIcon,
MenuIcon,
RefreshIcon,
ServerIcon,
ShieldCheckIcon,
XIcon,
} from "@heroicons/react/outline";
import { ChevronRightIcon, ExternalLinkIcon } from "@heroicons/react/solid";
const navigation = [
{ name: "Product", href: "#" },
{ name: "Features", href: "#" },
{ name: "Marketplace", href: "#" },
{ name: "Company", href: "#" },
];
const features = [
{
name: "Push to Deploy",
description:
"Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus. Et magna sit morbi vitae lobortis.",
icon: CloudUploadIcon,
},
{
name: "SSL Certificates",
description:
"Qui aut temporibus nesciunt vitae dicta repellat sit dolores pariatur. Temporibus qui illum aut.",
icon: LockClosedIcon,
},
{
name: "Simple Queues",
description:
"Rerum quas incidunt deleniti quaerat suscipit mollitia. Amet repellendus ut odit dolores qui.",
icon: RefreshIcon,
},
{
name: "Advanced Security",
description:
"Ullam laboriosam est voluptatem maxime ut mollitia commodi. Et dignissimos suscipit perspiciatis.",
icon: ShieldCheckIcon,
},
{
name: "Powerful API",
description:
"Ab a facere voluptatem in quia corrupti veritatis aliquam. Veritatis labore quaerat ipsum quaerat id.",
icon: CogIcon,
},
{
name: "Database Backups",
description:
"Quia qui et est officia cupiditate qui consectetur. Ratione similique et impedit ea ipsum et.",
icon: ServerIcon,
},
];
const blogPosts = [
{
id: 1,
title: "Boost your conversion rate",
href: "#",
date: "Mar 16, 2020",
datetime: "2020-03-16",
category: { name: "Article", href: "#" },
imageUrl:
"https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
preview:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.",
author: {
name: "Roel Aufderehar",
imageUrl:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
href: "#",
},
readingLength: "6 min",
},
{
id: 2,
title: "How to use search engine optimization to drive sales",
href: "#",
date: "Mar 10, 2020",
datetime: "2020-03-10",
category: { name: "Video", href: "#" },
imageUrl:
"https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
preview:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.",
author: {
name: "Brenna Goyette",
imageUrl:
"https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
href: "#",
},
readingLength: "4 min",
},
{
id: 3,
title: "Improve your customer experience",
href: "#",
date: "Feb 12, 2020",
datetime: "2020-02-12",
category: { name: "Case Study", href: "#" },
imageUrl:
"https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80",
preview:
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.",
author: {
name: "Daniela Metz",
imageUrl:
"https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
href: "#",
},
readingLength: "11 min",
},
];
const footerNavigation = {
solutions: [
{ name: "Marketing", href: "#" },
{ name: "Analytics", href: "#" },
{ name: "Commerce", href: "#" },
{ name: "Insights", href: "#" },
],
support: [
{ name: "Pricing", href: "#" },
{ name: "Documentation", href: "#" },
{ name: "Guides", href: "#" },
{ name: "API Status", href: "#" },
],
company: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Partners", href: "#" },
],
legal: [
{ name: "Claim", href: "#" },
{ name: "Privacy", href: "#" },
{ name: "Terms", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
export default function Example() {
return (
<div className="bg-white">
<div className="relative overflow-hidden">
<Popover as="header" className="relative">
{({ open }) => (
<>
<div className="bg-gray-900 pt-6">
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between px-4 sm:px-6"
aria-label="Global"
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full md:w-auto">
<a href="#">
<span className="sr-only">Loesen</span>
<img
className="h-8 w-auto sm:h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</a>
<div className="-mr-2 flex items-center md:hidden">
<Popover.Button className="bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-white">
<span className="sr-only">Open main menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="hidden space-x-8 md:flex md:ml-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-white hover:text-gray-300"
>
{item.name}
</a>
))}
</div>
</div>
<div className="hidden md:flex md:items-center md:space-x-6">
<a
href="#"
className="text-base font-medium text-white hover:text-gray-300"
>
Log in
</a>
<a
href="#"
className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700"
>
Start free trial
</a>
</div>
</nav>
</div>
<Transition
show={open}
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
static
className="absolute top-0 inset-x-0 p-2 transition transform origin-top md:hidden"
>
<div className="rounded-lg shadow-md bg-white ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="px-5 pt-4 flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-cyan-600">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="pt-5 pb-6">
<div className="px-2 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:bg-gray-50"
>
{item.name}
</a>
))}
</div>
<div className="mt-6 px-5">
<a
href="#"
className="block text-center w-full py-3 px-4 rounded-md shadow bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-medium hover:from-teal-600 hover:to-cyan-700"
>
Start free trial
</a>
</div>
<div className="mt-6 px-5">
<p className="text-center text-base font-medium text-gray-500">
Existing customer?{" "}
<a href="#" className="text-gray-900 hover:underline">
Login
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main>
<div className="pt-10 bg-gray-900 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
<div className="mx-auto max-w-7xl lg:px-8">
<div className="lg:grid lg:grid-cols-2 lg:gap-8">
<div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 sm:text-center lg:px-0 lg:text-left lg:flex lg:items-center">
<div className="lg:py-24">
<a
href="#"
className="inline-flex items-center text-white bg-black rounded-full p-1 pr-2 sm:text-base lg:text-sm xl:text-base hover:text-gray-200"
>
<span className="px-3 py-0.5 text-white text-xs font-semibold leading-5 uppercase tracking-wide bg-gradient-to-r from-teal-500 to-cyan-600 rounded-full">
We're hiring
</span>
<span className="ml-4 text-sm">
Visit our careers page
</span>
<ChevronRightIcon
className="ml-2 w-5 h-5 text-gray-500"
aria-hidden="true"
/>
</a>
<h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
<span className="block">A better way to</span>
<span className="pb-3 block bg-clip-text text-transparent bg-gradient-to-r from-teal-200 to-cyan-400 sm:pb-5">
ship web apps
</span>
</h1>
<p className="text-base text-gray-300 sm:text-xl lg:text-lg xl:text-xl">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui
irure qui Lorem cupidatat commodo. Elit sunt amet fugiat
veniam occaecat fugiat.
</p>
<div className="mt-10 sm:mt-12">
<form
action="#"
className="sm:max-w-xl sm:mx-auto lg:mx-0"
>
<div className="sm:flex">
<div className="min-w-0 flex-1">
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
type="email"
placeholder="Enter your email"
className="block w-full px-4 py-3 rounded-md border-0 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-400 focus:ring-offset-gray-900"
/>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<button
type="submit"
className="block w-full py-3 px-4 rounded-md shadow bg-gradient-to-r from-teal-500 to-cyan-600 text-white font-medium hover:from-teal-600 hover:to-cyan-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-400 focus:ring-offset-gray-900"
>
Start free trial
</button>
</div>
</div>
<p className="mt-3 text-sm text-gray-300 sm:mt-4">
Start your free 14-day trial, no credit card
necessary. By providing your email, you agree to our{" "}
<a href="#" className="font-medium text-white">
terms or service
</a>
.
</p>
</form>
</div>
</div>
</div>
<div className="mt-12 -mb-16 sm:-mb-48 lg:m-0 lg:relative">
<div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:max-w-none lg:px-0">
{/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
<img
className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/cloud-illustration-teal-cyan.svg"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
{/* Feature section with screenshot */}
<div className="relative bg-gray-50 pt-16 sm:pt-24 lg:pt-32">
<div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
<div>
<h2 className="text-base font-semibold tracking-wider text-cyan-600 uppercase">
Serverless
</h2>
<p className="mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
No server? No problem.
</p>
<p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
Phasellus lorem quam molestie id quisque diam aenean nulla in.
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
condimentum id viverra nulla.
</p>
</div>
<div className="mt-12 -mb-10 sm:-mb-24 lg:-mb-80">
<img
className="rounded-lg shadow-xl ring-1 ring-black ring-opacity-5"
src="https://tailwindui.com/img/component-images/green-project-app-screenshot.jpg"
alt=""
/>
</div>
</div>
</div>
{/* Feature section with grid */}
<div className="relative bg-white py-16 sm:py-24 lg:py-32">
<div className="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
<h2 className="text-base font-semibold tracking-wider text-cyan-600 uppercase">
Deploy faster
</h2>
<p className="mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
Everything you need to deploy your app
</p>
<p className="mt-5 max-w-prose mx-auto text-xl text-gray-500">
Phasellus lorem quam molestie id quisque diam aenean nulla in.
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
condimentum id viverra nulla.
</p>
<div className="mt-12">
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{features.map((feature) => (
<div key={feature.name} className="pt-6">
<div className="flow-root bg-gray-50 rounded-lg px-6 pb-8">
<div className="-mt-6">
<div>
<span className="inline-flex items-center justify-center p-3 bg-gradient-to-r from-teal-500 to-cyan-600 rounded-md shadow-lg">
<feature.icon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</span>
</div>
<h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">
{feature.name}
</h3>
<p className="mt-5 text-base text-gray-500">
{feature.description}
</p>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
{/* Testimonial section */}
<div className="pb-16 bg-gradient-to-r from-teal-500 to-cyan-600 lg:pb-0 lg:z-10 lg:relative">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-3 lg:gap-8">
<div className="relative lg:-my-8">
<div
aria-hidden="true"
className="absolute inset-x-0 top-0 h-1/2 bg-white lg:hidden"
/>
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:p-0 lg:h-full">
<div className="aspect-w-10 aspect-h-6 rounded-xl shadow-xl overflow-hidden sm:aspect-w-16 sm:aspect-h-7 lg:aspect-none lg:h-full">
<img
className="object-cover lg:h-full lg:w-full"
src="https://images.unsplash.com/photo-1520333789090-1afc82db536a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2102&q=80"
alt=""
/>
</div>
</div>
</div>
<div className="mt-12 lg:m-0 lg:col-span-2 lg:pl-8">
<div className="mx-auto max-w-md px-4 sm:max-w-2xl sm:px-6 lg:px-0 lg:py-20 lg:max-w-none">
<blockquote>
<div>
<svg
className="h-12 w-12 text-white opacity-25"
fill="currentColor"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<p className="mt-6 text-2xl font-medium text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed urna nulla vitae laoreet augue. Amet feugiat est
integer dolor auctor adipiscing nunc urna, sit.
</p>
</div>
<footer className="mt-6">
<p className="text-base font-medium text-white">
Judith Black
</p>
<p className="text-base font-medium text-cyan-100">
CEO at PureInsights
</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
{/* Blog section */}
<div className="relative bg-gray-50 py-16 sm:py-24 lg:py-32">
<div className="relative">
<div className="text-center mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
<h2 className="text-base font-semibold tracking-wider text-cyan-600 uppercase">
Learn
</h2>
<p className="mt-2 text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
Helpful Resources
</p>
<p className="mt-5 mx-auto max-w-prose text-xl text-gray-500">
Phasellus lorem quam molestie id quisque diam aenean nulla in.
Accumsan in quis quis nunc, ullamcorper malesuada. Eleifend
condimentum id viverra nulla.
</p>
</div>
<div className="mt-12 mx-auto max-w-md px-4 grid gap-8 sm:max-w-lg sm:px-6 lg:px-8 lg:grid-cols-3 lg:max-w-7xl">
{blogPosts.map((post) => (
<div
key={post.id}
className="flex flex-col rounded-lg shadow-lg overflow-hidden"
>
<div className="flex-shrink-0">
<img
className="h-48 w-full object-cover"
src={post.imageUrl}
alt=""
/>
</div>
<div className="flex-1 bg-white p-6 flex flex-col justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-cyan-600">
<a
href={post.category.href}
className="hover:underline"
>
{post.category.name}
</a>
</p>
<a href={post.href} className="block mt-2">
<p className="text-xl font-semibold text-gray-900">
{post.title}
</p>
<p className="mt-3 text-base text-gray-500">
{post.preview}
</p>
</a>
</div>
<div className="mt-6 flex items-center">
<div className="flex-shrink-0">
<a href={post.author.href}>
<img
className="h-10 w-10 rounded-full"
src={post.author.imageUrl}
alt={post.author.name}
/>
</a>
</div>
<div className="ml-3">
<p className="text-sm font-medium text-gray-900">
<a
href={post.author.href}
className="hover:underline"
>
{post.author.name}
</a>
</p>
<div className="flex space-x-1 text-sm text-gray-500">
<time dateTime={post.datetime}>{post.date}</time>
<span aria-hidden="true">·</span>
<span>{post.readingLength} read</span>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
{/* CTA Section */}
<div className="relative bg-gray-900">
<div className="relative h-56 bg-blue-600 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
<img
className="w-full h-full object-cover"
src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&sat=-100"
alt=""
/>
<div
aria-hidden="true"
className="absolute inset-0 bg-gradient-to-r from-teal-500 to-cyan-600 mix-blend-multiply"
/>
</div>
<div className="relative mx-auto max-w-md px-4 py-12 sm:max-w-7xl sm:px-6 sm:py-20 md:py-28 lg:px-8 lg:py-32">
<div className="md:ml-auto md:w-1/2 md:pl-10">
<h2 className="text-base font-semibold uppercase tracking-wider text-gray-300">
Award winning support
</h2>
<p className="mt-2 text-white text-3xl font-extrabold tracking-tight sm:text-4xl">
We’re here to help
</p>
<p className="mt-3 text-lg text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et,
egestas tempus tellus etiam sed. Quam a scelerisque amet
ullamcorper eu enim et fermentum, augue. Aliquet amet volutpat
quisque ut interdum tincidunt duis.
</p>
<div className="mt-8">
<div className="inline-flex rounded-md shadow">
<a
href="#"
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-900 bg-white hover:bg-gray-50"
>
Visit the help center
<ExternalLinkIcon
className="-mr-1 ml-3 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer className="bg-gray-50" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-md mx-auto pt-12 px-4 sm:max-w-7xl sm:px-6 lg:pt-16 lg:px-8">
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
<div className="space-y-8 xl:col-span-1">
<img
className="h-10"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
<p className="text-gray-500 text-base">
Making the world a better place through constructing elegant
hierarchies.
</p>
<div className="flex space-x-6">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-400 hover:text-gray-500"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
</div>
<div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Support
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Company
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h3>
<ul className="mt-4 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-base text-gray-500 hover:text-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-gray-200 py-8">
<p className="text-base text-gray-400 xl:text-center">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
</div>
);
}
Simple With Offset Screenshot Hero
/*
This example requires Tailwind CSS v2.0+
This example requires some changes to your config:
// tailwind.config.js
const colors = require('tailwindcss/colors')
module.exports = {
// ...
theme: {
extend: {
colors: {
rose: colors.rose,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { ChevronRightIcon, StarIcon } from "@heroicons/react/solid";
const stats = [
{ label: "Founded", value: "2021" },
{ label: "Employees", value: "5" },
{ label: "Beta Users", value: "521" },
{ label: "Raised", value: "$25M" },
];
const logos = [
{
name: "Transistor",
url: "https://tailwindui.com/img/logos/transistor-logo-gray-400.svg",
},
{
name: "Mirage",
url: "https://tailwindui.com/img/logos/mirage-logo-gray-400.svg",
},
{
name: "Tuple",
url: "https://tailwindui.com/img/logos/tuple-logo-gray-400.svg",
},
{
name: "Laravel",
url: "https://tailwindui.com/img/logos/laravel-logo-gray-400.svg",
},
{
name: "StaticKit",
url: "https://tailwindui.com/img/logos/statickit-logo-gray-400.svg",
},
{
name: "Workcation",
url: "https://tailwindui.com/img/logos/workcation-logo-gray-400.svg",
},
];
const footerNavigation = {
main: [
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
{ name: "Jobs", href: "#" },
{ name: "Press", href: "#" },
{ name: "Accessibility", href: "#" },
{ name: "Partners", href: "#" },
],
social: [
{
name: "Facebook",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Instagram",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Twitter",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
),
},
{
name: "GitHub",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
),
},
{
name: "Dribbble",
href: "#",
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clipRule="evenodd"
/>
</svg>
),
},
],
};
export default function Example() {
return (
<div className="bg-white">
<main>
{/* Hero section */}
<div className="pt-8 overflow-hidden sm:pt-12 lg:relative lg:py-48">
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24">
<div>
<div>
<img
className="h-11 w-auto"
src="/images/loesen-logo.svg"
alt="Loesen SA"
/>
</div>
<div className="mt-20">
<div>
<a href="#" className="inline-flex space-x-4">
<span className="rounded bg-rose-50 px-2.5 py-1 text-xs font-semibold text-rose-500 tracking-wide uppercase">
What's new
</span>
<span className="inline-flex items-center text-sm font-medium text-rose-500 space-x-1">
<span>Just shipped version 0.1.0</span>
<ChevronRightIcon
className="h-5 w-5"
aria-hidden="true"
/>
</span>
</a>
</div>
<div className="mt-6 sm:max-w-xl">
<h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
Issue management for growing teams
</h1>
<p className="mt-6 text-xl text-gray-500">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui lorem cupidatat commodo.
</p>
</div>
<form
action="#"
className="mt-12 sm:max-w-lg sm:w-full sm:flex"
>
<div className="min-w-0 flex-1">
<label htmlFor="hero-email" className="sr-only">
Email address
</label>
<input
id="hero-email"
type="email"
className="block w-full border border-gray-300 rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:border-rose-500 focus:ring-rose-500"
placeholder="Enter your email"
/>
</div>
<div className="mt-4 sm:mt-0 sm:ml-3">
<button
type="submit"
className="block w-full rounded-md border border-transparent px-5 py-3 bg-rose-500 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10"
>
Notify me
</button>
</div>
</form>
<div className="mt-6">
<div className="inline-flex items-center divide-x divide-gray-300">
<div className="flex-shrink-0 flex pr-5">
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
<StarIcon
className="h-5 w-5 text-yellow-400"
aria-hidden="true"
/>
</div>
<div className="min-w-0 flex-1 pl-5 py-1 text-sm text-gray-500 sm:py-3">
<span className="font-medium text-gray-900">
Rated 5 stars
</span>{" "}
by over{" "}
<span className="font-medium text-rose-500">
500 beta users
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="sm:mx-auto sm:max-w-3xl sm:px-6">
<div className="py-12 sm:relative sm:mt-12 sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<div className="hidden sm:block">
<div className="absolute inset-y-0 left-1/2 w-screen bg-gray-50 rounded-l-3xl lg:left-80 lg:right-0 lg:w-full" />
<svg
className="absolute top-8 right-1/2 -mr-3 lg:m-0 lg:left-0"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392"
>
<defs>
<pattern
id="837c3e70-6c3a-44e6-8854-cc48c737b659"
x={0}
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
width={404}
height={392}
fill="url(#837c3e70-6c3a-44e6-8854-cc48c737b659)"
/>
</svg>
</div>
<div className="relative pl-4 -mr-40 sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full lg:pl-12">
<img
className="w-full rounded-md shadow-xl ring-1 ring-black ring-opacity-5 lg:h-full lg:w-auto lg:max-w-none"
src="https://tailwindui.com/img/component-images/task-app-rose.jpg"
alt=""
/>
</div>
</div>
</div>
</div>
{/* Testimonial/stats section */}
<div className="relative mt-20">
<div className="lg:mx-auto lg:max-w-7xl lg:px-8 lg:grid lg:grid-cols-2 lg:gap-24 lg:items-start">
<div className="relative sm:py-16 lg:py-0">
<div
aria-hidden="true"
className="hidden sm:block lg:absolute lg:inset-y-0 lg:right-0 lg:w-screen"
>
<div className="absolute inset-y-0 right-1/2 w-full bg-gray-50 rounded-r-3xl lg:right-72" />
<svg
className="absolute top-8 left-1/2 -ml-3 lg:-right-8 lg:left-auto lg:top-12"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392"
>
<defs>
<pattern
id="02f20b47-fd69-4224-a62a-4c9de5c763f7"
x={0}
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
width={404}
height={392}
fill="url(#02f20b47-fd69-4224-a62a-4c9de5c763f7)"
/>
</svg>
</div>
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0 lg:max-w-none lg:py-20">
{/* Testimonial card*/}
<div className="relative pt-64 pb-10 rounded-2xl shadow-xl overflow-hidden">
<img
className="absolute inset-0 h-full w-full object-cover"
src="https://images.unsplash.com/photo-1521510895919-46920266ddb3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&fp-x=0.5&fp-y=0.6&fp-z=3&width=1440&height=1440&sat=-100"
alt=""
/>
<div className="absolute inset-0 bg-rose-500 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-t from-rose-600 via-rose-600 opacity-90" />
<div className="relative px-8">
<div>
<img
className="h-12"
src="https://tailwindui.com/img/logos/workcation.svg?color=white"
alt="Workcation"
/>
</div>
<blockquote className="mt-8">
<div className="relative text-lg font-medium text-white md:flex-grow">
<svg
className="absolute top-0 left-0 transform -translate-x-3 -translate-y-2 h-8 w-8 text-rose-400"
fill="currentColor"
viewBox="0 0 32 32"
aria-hidden="true"
>
<path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
</svg>
<p className="relative">
Tincidunt integer commodo, cursus etiam aliquam neque,
et. Consectetur pretium in volutpat, diam. Montes,
magna cursus nulla feugiat dignissim id lobortis amet.
</p>
</div>
<footer className="mt-4">
<p className="text-base font-semibold text-rose-200">
Sarah Williams, CEO at Workcation
</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<div className="relative mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-0">
{/* Content area */}
<div className="pt-12 sm:pt-16 lg:pt-20">
<h2 className="text-3xl text-gray-900 font-extrabold tracking-tight sm:text-4xl">
On a mission to empower teams
</h2>
<div className="mt-6 text-gray-500 space-y-6">
<p className="text-lg">
Sagittis scelerisque nulla cursus in enim consectetur quam.
Dictum urna sed consectetur neque tristique pellentesque.
Blandit amet, sed aenean erat arcu morbi. Cursus faucibus
nunc nisl netus morbi vel porttitor vitae ut. Amet vitae
fames senectus vitae.
</p>
<p className="text-base leading-7">
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae.
Eros eu viverra donec ut volutpat donec laoreet quam urna.
Sollicitudin tristique eros erat odio sed vitae, consequat
turpis elementum. Lorem nibh vel, eget pretium arcu vitae.
Eros eu viverra donec ut volutpat donec laoreet quam urna.
</p>
<p className="text-base leading-7">
Rhoncus nisl, libero egestas diam fermentum dui. At quis
tincidunt vel ultricies. Vulputate aliquet velit faucibus
semper. Pellentesque in venenatis vestibulum consectetur
nibh id. In id ut tempus egestas. Enim sit aliquam nec, a.
Morbi enim fermentum lacus in. Viverra.
</p>
</div>
</div>
{/* Stats section */}
<div className="mt-10">
<dl className="grid grid-cols-2 gap-x-4 gap-y-8">
{stats.map((stat) => (
<div
key={stat.label}
className="border-t-2 border-gray-100 pt-6"
>
<dt className="text-base font-medium text-gray-500">
{stat.label}
</dt>
<dd className="text-3xl font-extrabold tracking-tight text-gray-900">
{stat.value}
</dd>
</div>
))}
</dl>
<div className="mt-10">
<a href="#" className="text-base font-medium text-rose-500">
Learn more about how we're changing the world →
</a>
</div>
</div>
</div>
</div>
</div>
{/* Logo cloud section */}
<div className="mt-32">
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
<div className="lg:grid lg:grid-cols-2 lg:gap-24 lg:items-center">
<div>
<h2 className="text-3xl font-extrabold text-gray-900 tracking-tight sm:text-4xl">
Backed by world-renowned investors
</h2>
<p className="mt-6 max-w-3xl text-lg leading-7 text-gray-500">
Sagittis scelerisque nulla cursus in enim consectetur quam.
Dictum urna sed consectetur neque tristique pellentesque.
Blandit amet, sed aenean erat arcu morbi. Cursus faucibus nunc
nisl netus morbi vel porttitor vitae ut. Amet vitae fames
senectus vitae.
</p>
<div className="mt-6">
<a href="#" className="text-base font-medium text-rose-500">
Meet our investors and advisors →
</a>
</div>
</div>
<div className="mt-12 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-0 lg:grid-cols-2">
{logos.map((logo) => (
<div
key={logo.name}
className="col-span-1 flex justify-center py-8 px-8 bg-gray-50"
>
<img className="max-h-12" src={logo.url} alt={logo.name} />
</div>
))}
</div>
</div>
</div>
</div>
{/* CTA section */}
<div className="relative mt-24 sm:mt-32 sm:py-16">
<div aria-hidden="true" className="hidden sm:block">
<div className="absolute inset-y-0 left-0 w-1/2 bg-gray-50 rounded-r-3xl" />
<svg
className="absolute top-8 left-1/2 -ml-3"
width={404}
height={392}
fill="none"
viewBox="0 0 404 392"
>
<defs>
<pattern
id="8228f071-bcee-4ec8-905a-2a059a2cc4fb"
x={0}
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
width={404}
height={392}
fill="url(#8228f071-bcee-4ec8-905a-2a059a2cc4fb)"
/>
</svg>
</div>
<div className="mx-auto max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<div className="relative rounded-2xl px-6 py-10 bg-rose-500 overflow-hidden shadow-xl sm:px-12 sm:py-20">
<div
aria-hidden="true"
className="absolute inset-0 -mt-72 sm:-mt-32 md:mt-0"
>
<svg
className="absolute inset-0 h-full w-full"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 1463 360"
>
<path
className="text-rose-400 text-opacity-40"
fill="currentColor"
d="M-82.673 72l1761.849 472.086-134.327 501.315-1761.85-472.086z"
/>
<path
className="text-rose-600 text-opacity-40"
fill="currentColor"
d="M-217.088 544.086L1544.761 72l134.327 501.316-1761.849 472.086z"
/>
</svg>
</div>
<div className="relative">
<div className="sm:text-center">
<h2 className="text-3xl font-extrabold text-white tracking-tight sm:text-4xl">
Get notified when we’re launching.
</h2>
<p className="mt-6 mx-auto max-w-2xl text-lg text-rose-100">
Sagittis scelerisque nulla cursus in enim consectetur quam.
Dictum urna sed consectetur neque tristique pellentesque.
</p>
</div>
<form
action="#"
className="mt-12 sm:mx-auto sm:max-w-lg sm:flex"
>
<div className="min-w-0 flex-1">
<label htmlFor="cta-email" className="sr-only">
Email address
</label>
<input
id="cta-email"
type="email"
className="block w-full border border-transparent rounded-md px-5 py-3 text-base text-gray-900 placeholder-gray-500 shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500"
placeholder="Enter your email"
/>
</div>
<div className="mt-4 sm:mt-0 sm:ml-3">
<button
type="submit"
className="block w-full rounded-md border border-transparent px-5 py-3 bg-gray-900 text-base font-medium text-white shadow hover:bg-black focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-rose-500 sm:px-10"
>
Notify me
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
{/* Footer section */}
<footer className="mt-24 bg-gray-900 sm:mt-12">
<div className="mx-auto max-w-md py-12 px-4 overflow-hidden sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<nav
className="-mx-5 -my-2 flex flex-wrap justify-center"
aria-label="Footer"
>
{footerNavigation.main.map((item) => (
<div key={item.name} className="px-5 py-2">
<a
href={item.href}
className="text-base text-gray-400 hover:text-gray-300"
>
{item.name}
</a>
</div>
))}
</nav>
<div className="mt-8 flex justify-center space-x-6">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-400 hover:text-gray-300"
>
<span className="sr-only">{item.name}</span>
<item.icon className="h-6 w-6" aria-hidden="true" />
</a>
))}
</div>
<p className="mt-8 text-center text-base text-gray-400">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</footer>
</div>
);
}