Contact
Side By Side Grid And Newsletter
/*
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: {
'warm-gray': colors.warmGray,
sky: colors.sky,
cyan: colors.cyan,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { MenuIcon, XIcon } from "@heroicons/react/outline";
const navigation = [
{ name: "Changelog", href: "#" },
{ name: "About", href: "#" },
{ name: "Partners", href: "#" },
{ name: "News", href: "#" },
];
const contactDetails = [
{
name: "Collaborate",
email: "support@example.com",
telephone: "+1 (555) 123-4567",
},
{
name: "Press",
email: "support@example.com",
telephone: "+1 (555) 123-4567",
},
{
name: "Join our team",
email: "support@example.com",
telephone: "+1 (555) 123-4567",
},
{
name: "Say hello",
email: "support@example.com",
telephone: "+1 (555) 123-4567",
},
];
const locations = [
{
city: "Los Angeles",
address: ["4556 Brendan Ferry", "Los Angeles, CA 90210"],
},
{ city: "New York", address: ["886 Walter Streets", "New York, NY 12345"] },
{ city: "Toronto", address: ["7363 Cynthia Pass", "Toronto, ON N3Y 4H8"] },
{ city: "Chicago", address: ["726 Mavis Island", "Chicago, IL 60601"] },
];
const faqs = [
{
id: 1,
question: "How do you make holy water?",
answer:
"You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 2,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 3,
question: "What do you call someone with no body and no nose?",
answer:
"Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 4,
question: "Why do you never see elephants hiding in trees?",
answer:
"Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
];
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="min-h-screen bg-white">
<header className="relative pb-24 bg-sky-800 sm:pb-32">
<div className="absolute inset-0">
<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
className="absolute inset-0 bg-gradient-to-l from-sky-800 to-cyan-700 mix-blend-multiply"
aria-hidden="true"
/>
</div>
<Popover as="div" className="relative z-10">
{({ open }) => (
<>
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between pt-6 pb-2 px-4 sm:px-6 lg:px-8"
aria-label="Global"
>
<div className="flex items-center justify-between w-full lg: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 lg:hidden">
<Popover.Button className="bg-sky-800 bg-opacity-0 rounded-md p-2 inline-flex items-center justify-center text-cyan-100 hover:bg-opacity-100 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-10 lg:flex lg:ml-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-white hover:text-cyan-100"
>
{item.name}
</a>
))}
</div>
<div className="hidden lg:flex lg:items-center lg:space-x-6">
<a
href="#"
className="py-2 px-6 bg-white bg-opacity-10 border border-transparent rounded-md text-base font-medium text-white hover:bg-opacity-20"
>
Login
</a>
</div>
</nav>
<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 lg:hidden"
>
<div className="rounded-lg shadow-lg 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-warm-gray-400 hover:bg-warm-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500">
<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-warm-gray-900 hover:bg-warm-gray-50"
>
{item.name}
</a>
))}
</div>
<div className="mt-6 px-5">
<a
href="#"
className="block text-center w-full py-2 px-4 border border-transparent rounded-md shadow bg-green-400 text-white font-medium hover:bg-green-500"
>
Login
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<div className="relative mt-24 max-w-md mx-auto px-4 sm:max-w-3xl sm:mt-32 sm:px-6 lg:max-w-7xl lg:px-8">
<h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">
Get in touch
</h1>
<p className="mt-6 text-xl text-cyan-100 max-w-3xl">
Mattis amet hendrerit dolor, quisque lorem pharetra. Pellentesque
lacus nisi urna, arcu sociis eu. Orci vel lectus nisl eget eget ut
consectetur. Sit justo viverra non adipisicing elit distinctio.
</p>
</div>
</header>
<main>
{/* Side-by-side grid */}
<div className="bg-white">
<div className="max-w-md mx-auto py-24 px-4 sm:max-w-3xl sm:py-32 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="divide-y divide-warm-gray-200">
<section
className="lg:grid lg:grid-cols-3 lg:gap-8"
aria-labelledby="contact-heading"
>
<h2
id="contact-heading"
className="text-2xl font-extrabold text-warm-gray-900 sm:text-3xl"
>
Get in touch
</h2>
<div className="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
{contactDetails.map((item) => (
<div key={item.name}>
<h3 className="text-lg font-medium text-warm-gray-900">
{item.name}
</h3>
<dl className="mt-2 text-base text-warm-gray-500">
<div>
<dt className="sr-only">Email</dt>
<dd>{item.email}</dd>
</div>
<div className="mt-1">
<dt className="sr-only">Phone number</dt>
<dd>{item.telephone}</dd>
</div>
</dl>
</div>
))}
</div>
</section>
<section
className="mt-16 pt-16 lg:grid lg:grid-cols-3 lg:gap-8"
aria-labelledby="location-heading"
>
<h2
id="location-heading"
className="text-2xl font-extrabold text-warm-gray-900 sm:text-3xl"
>
Locations
</h2>
<div className="mt-8 grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-12 lg:mt-0 lg:col-span-2">
{locations.map((location) => (
<div key={location.city}>
<h3 className="text-lg font-medium text-warm-gray-900">
{location.city}
</h3>
<div className="mt-2 text-base text-warm-gray-500 space-y-1">
{location.address.map((line) => (
<p key={line}>{line}</p>
))}
</div>
</div>
))}
</div>
</section>
</div>
</div>
</div>
{/* FAQ */}
<div className="bg-warm-gray-50">
<div className="max-w-md mx-auto py-24 px-4 sm:max-w-3xl sm:py-32 sm:px-6 lg:max-w-7xl lg:px-8">
<div className="lg:grid lg:grid-cols-3 lg:gap-8">
<div>
<h2 className="text-3xl font-extrabold text-warm-gray-900">
Frequently asked questions
</h2>
<p className="mt-4 text-lg text-warm-gray-500">
Can’t find the answer you’re looking for? Reach out to our{" "}
<a
href="#"
className="font-medium text-cyan-700 hover:text-cyan-600"
>
customer support
</a>{" "}
team.
</p>
</div>
<div className="mt-12 lg:mt-0 lg:col-span-2">
<dl className="space-y-12">
{faqs.map((faq) => (
<div key={faq.id}>
<dt className="text-lg font-medium text-warm-gray-900">
{faq.question}
</dt>
<dd className="mt-2 text-base text-warm-gray-500">
{faq.answer}
</dd>
</div>
))}
</dl>
</div>
</div>
</div>
</div>
{/* Newsletter */}
<div className="relative">
<div
className="absolute left-0 right-0 h-1/2 bg-warm-gray-50"
aria-hidden="true"
/>
<div className="relative max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
<div className="py-10 px-6 bg-gradient-to-l from-sky-800 to-cyan-700 rounded-3xl sm:py-16 sm:px-12 lg:py-20 lg:px-20 lg:flex lg:items-center">
<div className="lg:w-0 lg:flex-1">
<h2 className="text-3xl font-extrabold tracking-tight text-white">
Sign up for our newsletter
</h2>
<p className="mt-4 max-w-3xl text-lg text-cyan-100">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure
qui Lorem cupidatat commodo. Elit sunt amet fugiat.
</p>
</div>
<div className="mt-12 sm:w-full sm:max-w-md lg:mt-0 lg:ml-8 lg:flex-1">
<form className="sm:flex">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
id="email-address"
name="email-address"
type="email"
autoComplete="email"
required
className="w-full border-white px-5 py-3 placeholder-warm-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-700 focus:ring-white rounded-md"
placeholder="Enter your email"
/>
<button
type="submit"
className="mt-3 w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-400 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-cyan-700 focus:ring-green-400 sm:mt-0 sm:ml-3 sm:w-auto sm:flex-shrink-0"
>
Notify me
</button>
</form>
<p className="mt-3 text-sm text-cyan-100">
We care about the protection of your data. Read our{" "}
<a href="#" className="text-white font-medium underline">
Privacy Policy.
</a>
</p>
</div>
</div>
</div>
</div>
</main>
<footer className="bg-white" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-md mx-auto py-12 px-4 sm:max-w-3xl sm:py-24 sm:px-6 lg:max-w-7xl 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-warm-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-warm-gray-400 hover:text-warm-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-warm-gray-700 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-warm-gray-500 hover:text-warm-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-warm-gray-700 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-warm-gray-500 hover:text-warm-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-warm-gray-700 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-warm-gray-500 hover:text-warm-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-warm-gray-700 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-warm-gray-500 hover:text-warm-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-warm-gray-200 pt-8">
<p className="text-base text-warm-gray-400 xl:text-center">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
Simple With Brand Contact Panel
/*
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: {
'warm-gray': colors.warmGray,
teal: colors.teal,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { MailIcon, MenuIcon, PhoneIcon, XIcon } from "@heroicons/react/outline";
const navigation = [
{ name: "Changelog", href: "#" },
{ name: "About", href: "#" },
{ name: "Partners", href: "#" },
{ name: "News", href: "#" },
];
const offices = [
{
id: 1,
city: "Los Angeles",
address: ["4556 Brendan Ferry", "Los Angeles, CA 90210"],
},
{
id: 2,
city: "New York",
address: ["886 Walter Streets", "New York, NY 12345"],
},
{
id: 3,
city: "Toronto",
address: ["7363 Cynthia Pass", "Toronto, ON N3Y 4H8"],
},
{ id: 4, city: "London", address: ["114 Cobble Lane", "London N1 2EF"] },
];
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="min-h-screen bg-white">
<Popover as="header" className="relative">
{({ open }) => (
<>
<div className="bg-warm-gray-50">
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between pt-6 px-6 xl:px-8"
aria-label="Global"
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full lg: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 lg:hidden">
<Popover.Button className="bg-warm-gray-50 rounded-md p-2 inline-flex items-center justify-center text-warm-gray-400 hover:bg-warm-gray-100 focus:outline-none focus:ring-2 focus-ring-inset focus:ring-teal-500">
<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-10 lg:flex lg:ml-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-warm-gray-500 hover:text-warm-gray-900"
>
{item.name}
</a>
))}
</div>
</div>
<div className="hidden lg:flex lg:items-center lg:space-x-6">
<a
href="#"
className="py-2 px-6 bg-warm-gray-100 border border-transparent rounded-md text-base font-medium text-warm-gray-900 hover:bg-warm-gray-200"
>
Login
</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 z-30 top-0 inset-x-0 p-2 transition transform origin-top lg:hidden"
>
<div className="rounded-lg shadow-lg 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-warm-gray-400 hover:bg-warm-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500">
<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-warm-gray-900 hover:bg-warm-gray-50"
>
{item.name}
</a>
))}
</div>
<div className="mt-6 px-5">
<a
href="#"
className="block text-center w-full py-2 px-4 border border-transparent rounded-md shadow bg-teal-500 text-white font-medium hover:bg-teal-600"
>
Login
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main className="overflow-hidden">
{/* Header */}
<div className="bg-warm-gray-50">
<div className="py-24 lg:py-32">
<div className="relative z-10 max-w-7xl mx-auto pl-4 pr-8 sm:px-6 lg:px-8">
<h1 className="text-4xl font-extrabold tracking-tight text-warm-gray-900 sm:text-5xl lg:text-6xl">
Get in touch
</h1>
<p className="mt-6 text-xl text-warm-gray-500 max-w-3xl">
Vel nunc non ut montes, viverra tempor. Proin lectus nibh
phasellus morbi non morbi. In elementum urna ut volutpat.
Sagittis et vel et fermentum amet consequat.
</p>
</div>
</div>
</div>
{/* Contact section */}
<section
className="relative bg-white"
aria-labelledby="contact-heading"
>
<div
className="absolute w-full h-1/2 bg-warm-gray-50"
aria-hidden="true"
/>
{/* Decorative dot pattern */}
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<svg
className="absolute z-0 top-0 right-0 transform -translate-y-16 translate-x-1/2 sm:translate-x-1/4 md:-translate-y-24 lg:-translate-y-72"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-warm-gray-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={384}
fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)"
/>
</svg>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="relative bg-white shadow-xl">
<h2 id="contact-heading" className="sr-only">
Contact us
</h2>
<div className="grid grid-cols-1 lg:grid-cols-3">
{/* Contact information */}
<div className="relative overflow-hidden py-10 px-6 bg-gradient-to-b from-teal-500 to-teal-600 sm:px-10 xl:p-12">
{/* Decorative angle backgrounds */}
<div
className="absolute inset-0 pointer-events-none sm:hidden"
aria-hidden="true"
>
<svg
className="absolute inset-0 w-full h-full"
width={343}
height={388}
viewBox="0 0 343 388"
fill="none"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-99 461.107L608.107-246l707.103 707.107-707.103 707.103L-99 461.107z"
fill="url(#linear1)"
fillOpacity=".1"
/>
<defs>
<linearGradient
id="linear1"
x1="254.553"
y1="107.554"
x2="961.66"
y2="814.66"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
</div>
<div
className="hidden absolute top-0 right-0 bottom-0 w-1/2 pointer-events-none sm:block lg:hidden"
aria-hidden="true"
>
<svg
className="absolute inset-0 w-full h-full"
width={359}
height={339}
viewBox="0 0 359 339"
fill="none"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-161 382.107L546.107-325l707.103 707.107-707.103 707.103L-161 382.107z"
fill="url(#linear2)"
fillOpacity=".1"
/>
<defs>
<linearGradient
id="linear2"
x1="192.553"
y1="28.553"
x2="899.66"
y2="735.66"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
</div>
<div
className="hidden absolute top-0 right-0 bottom-0 w-1/2 pointer-events-none lg:block"
aria-hidden="true"
>
<svg
className="absolute inset-0 w-full h-full"
width={160}
height={678}
viewBox="0 0 160 678"
fill="none"
preserveAspectRatio="xMidYMid slice"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M-161 679.107L546.107-28l707.103 707.107-707.103 707.103L-161 679.107z"
fill="url(#linear3)"
fillOpacity=".1"
/>
<defs>
<linearGradient
id="linear3"
x1="192.553"
y1="325.553"
x2="899.66"
y2="1032.66"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#fff" />
<stop offset={1} stopColor="#fff" stopOpacity={0} />
</linearGradient>
</defs>
</svg>
</div>
<h3 className="text-lg font-medium text-white">
Contact information
</h3>
<p className="mt-6 text-base text-teal-50 max-w-3xl">
Nullam risus blandit ac aliquam justo ipsum. Quam mauris
volutpat massa dictumst amet. Sapien tortor lacus arcu.
</p>
<dl className="mt-8 space-y-6">
<dt>
<span className="sr-only">Phone number</span>
</dt>
<dd className="flex text-base text-teal-50">
<PhoneIcon
className="flex-shrink-0 w-6 h-6 text-teal-200"
aria-hidden="true"
/>
<span className="ml-3">+1 (555) 123-4567</span>
</dd>
<dt>
<span className="sr-only">Email</span>
</dt>
<dd className="flex text-base text-teal-50">
<MailIcon
className="flex-shrink-0 w-6 h-6 text-teal-200"
aria-hidden="true"
/>
<span className="ml-3">support@workcation.com</span>
</dd>
</dl>
<ul className="mt-8 flex space-x-12" role="list">
<li>
<a className="text-teal-200 hover:text-teal-100" href="#">
<span className="sr-only">Facebook</span>
<svg
className="w-7 h-7"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 24 24"
>
<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>
</a>
</li>
<li>
<a className="text-teal-200 hover:text-teal-100" href="#">
<span className="sr-only">GitHub</span>
<svg
className="w-7 h-7"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 24 24"
>
<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>
</a>
</li>
<li>
<a className="text-teal-200 hover:text-teal-100" href="#">
<span className="sr-only">Twitter</span>
<svg
className="w-7 h-7"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 24 24"
>
<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>
</a>
</li>
</ul>
</div>
{/* Contact form */}
<div className="py-10 px-6 sm:px-10 lg:col-span-2 xl:p-12">
<h3 className="text-lg font-medium text-warm-gray-900">
Send us a message
</h3>
<form
action="#"
method="POST"
className="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
>
<div>
<label
htmlFor="first-name"
className="block text-sm font-medium text-warm-gray-900"
>
First name
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="py-3 px-4 block w-full shadow-sm text-warm-gray-900 focus:ring-teal-500 focus:border-teal-500 border-warm-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="last-name"
className="block text-sm font-medium text-warm-gray-900"
>
Last name
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="py-3 px-4 block w-full shadow-sm text-warm-gray-900 focus:ring-teal-500 focus:border-teal-500 border-warm-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-warm-gray-900"
>
Email
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="py-3 px-4 block w-full shadow-sm text-warm-gray-900 focus:ring-teal-500 focus:border-teal-500 border-warm-gray-300 rounded-md"
/>
</div>
</div>
<div>
<div className="flex justify-between">
<label
htmlFor="phone"
className="block text-sm font-medium text-warm-gray-900"
>
Phone
</label>
<span
id="phone-optional"
className="text-sm text-warm-gray-500"
>
Optional
</span>
</div>
<div className="mt-1">
<input
type="text"
name="phone"
id="phone"
autoComplete="tel"
className="py-3 px-4 block w-full shadow-sm text-warm-gray-900 focus:ring-teal-500 focus:border-teal-500 border-warm-gray-300 rounded-md"
aria-describedby="phone-optional"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="subject"
className="block text-sm font-medium text-warm-gray-900"
>
Subject
</label>
<div className="mt-1">
<input
type="text"
name="subject"
id="subject"
className="py-3 px-4 block w-full shadow-sm text-warm-gray-900 focus:ring-teal-500 focus:border-teal-500 border-warm-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex justify-between">
<label
htmlFor="message"
className="block text-sm font-medium text-warm-gray-900"
>
Message
</label>
<span
id="message-max"
className="text-sm text-warm-gray-500"
>
Max. 500 characters
</span>
</div>
<div className="mt-1">
<textarea
id="message"
name="message"
rows={4}
className="py-3 px-4 block w-full shadow-sm text-warm-gray-900 focus:ring-teal-500 focus:border-teal-500 border border-warm-gray-300 rounded-md"
aria-describedby="message-max"
defaultValue={""}
/>
</div>
</div>
<div className="sm:col-span-2 sm:flex sm:justify-end">
<button
type="submit"
className="mt-2 w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-teal-500 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:w-auto"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{/* Contact grid */}
<section aria-labelledby="offices-heading">
<div className="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<h2
id="offices-heading"
className="text-3xl font-extrabold text-warm-gray-900"
>
Our offices
</h2>
<p className="mt-6 text-lg text-warm-gray-500 max-w-3xl">
Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate
id malesuada non. Cras aliquet purus dui laoreet diam sed lacus,
fames.
</p>
<div className="mt-10 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4">
{offices.map((office) => (
<div key={office.id}>
<h3 className="text-lg font-medium text-warm-gray-900">
{office.city}
</h3>
<p className="mt-2 text-base text-warm-gray-500">
{office.address.map((line) => (
<span key={line} className="block">
{line}
</span>
))}
</p>
</div>
))}
</div>
</div>
</section>
</main>
<footer className="bg-warm-gray-900" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-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-warm-gray-400 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-warm-gray-400 hover:text-warm-gray-300"
>
<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-warm-gray-200 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-warm-gray-400 hover:text-warm-gray-300"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-warm-gray-200 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-warm-gray-400 hover:text-warm-gray-300"
>
{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-warm-gray-200 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-warm-gray-400 hover:text-warm-gray-300"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-warm-gray-200 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-warm-gray-400 hover:text-warm-gray-300"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-warm-gray-700 pt-8">
<p className="text-base text-warm-gray-400 xl:text-center">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
Split With Image And Centered CTA 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: {
grape: colors.purple,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import { MenuIcon, XIcon } from "@heroicons/react/outline";
import { ExternalLinkIcon } from "@heroicons/react/solid";
const navigation = [
{ name: "Work", href: "#" },
{ name: "Services", href: "#" },
{ name: "About", href: "#" },
{ name: "Blog", href: "#" },
];
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="min-h-screen bg-white">
<Popover as="header" className="relative z-10">
{({ open }) => (
<>
<div className="bg-gray-50">
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between pt-8 px-6 xl:px-8"
aria-label="Global"
>
<div className="flex items-center justify-between w-full lg: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 lg:hidden">
<Popover.Button className="bg-gray-50 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-grape-500">
<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-10 lg:flex lg:ml-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-gray-500 hover:text-gray-600"
>
{item.name}
</a>
))}
</div>
<div className="hidden lg:flex lg:items-center lg:space-x-6">
<a
href="#"
className="py-2 px-6 bg-white border border-transparent rounded-md shadow-md text-base font-medium text-grape-600 hover:bg-gray-50"
>
Contact
</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 lg:hidden"
>
<div className="rounded-lg shadow-lg 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-grape-500">
<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-2 px-4 border border-transparent rounded-md shadow bg-grape-500 text-white font-medium hover:bg-grape-600"
>
Contact
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<main>
{/* Header */}
<div className="py-24 bg-gray-50 sm:py-32">
<div className="max-w-md mx-auto pl-4 pr-8 sm:max-w-lg sm:px-6 lg:max-w-7xl lg:px-8">
<h1 className="text-4xl leading-10 font-extrabold tracking-tight text-gray-900 text-center sm:text-5xl sm:leading-none lg:text-6xl">
Get in touch
</h1>
<p className="mt-6 max-w-3xl mx-auto text-xl leading-normal text-gray-500 text-center">
Convallis feugiat et aliquet pellentesque dictum nisi, velit.
Egestas fermentum adipiscing risus quam ac consectetur mattis
turpis tristique.
</p>
</div>
</div>
{/* Contact Section */}
<div className="relative bg-white">
<div className="lg:absolute lg:inset-0">
<div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img
className="h-56 w-full object-cover lg:absolute lg:h-full"
src="https://images.unsplash.com/photo-1556761175-4b46a572b786?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80"
alt=""
/>
</div>
</div>
<div className="relative py-16 px-4 sm:py-24 sm:px-6 lg:px-8 lg:max-w-7xl lg:mx-auto lg:py-32 lg:grid lg:grid-cols-2">
<div className="lg:pr-8">
<div className="max-w-md mx-auto sm:max-w-lg lg:mx-0">
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
Let's work together
</h2>
<p className="mt-4 text-lg text-gray-500 sm:mt-3">
We’d love to hear from you! Send us a message using the form
opposite, or email us. We’d love to hear from you! Send us a
message using the form opposite, or email us.
</p>
<form
action="#"
method="POST"
className="mt-9 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
>
<div>
<label
htmlFor="first-name"
className="block text-sm font-medium text-gray-700"
>
First name
</label>
<div className="mt-1">
<input
type="text"
name="first-name"
id="first-name"
autoComplete="given-name"
className="block w-full shadow-sm sm:text-sm focus:ring-grape-500 focus:border-grape-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label
htmlFor="last-name"
className="block text-sm font-medium text-gray-700"
>
Last name
</label>
<div className="mt-1">
<input
type="text"
name="last-name"
id="last-name"
autoComplete="family-name"
className="block w-full shadow-sm sm:text-sm focus:ring-grape-500 focus:border-grape-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<div className="mt-1">
<input
id="email"
name="email"
type="email"
autoComplete="email"
className="block w-full shadow-sm sm:text-sm focus:ring-grape-500 focus:border-grape-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<label
htmlFor="company"
className="block text-sm font-medium text-gray-700"
>
Company
</label>
<div className="mt-1">
<input
type="text"
name="company"
id="company"
autoComplete="organization"
className="block w-full shadow-sm sm:text-sm focus:ring-grape-500 focus:border-grape-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex justify-between">
<label
htmlFor="phone"
className="block text-sm font-medium text-gray-700"
>
Phone
</label>
<span
id="phone-description"
className="text-sm text-gray-500"
>
Optional
</span>
</div>
<div className="mt-1">
<input
type="text"
name="phone"
id="phone"
autoComplete="tel"
aria-describedby="phone-description"
className="block w-full shadow-sm sm:text-sm focus:ring-grape-500 focus:border-grape-500 border-gray-300 rounded-md"
/>
</div>
</div>
<div className="sm:col-span-2">
<div className="flex justify-between">
<label
htmlFor="how-can-we-help"
className="block text-sm font-medium text-gray-700"
>
How can we help you?
</label>
<span
id="how-can-we-help-description"
className="text-sm text-gray-500"
>
Max. 500 characters
</span>
</div>
<div className="mt-1">
<textarea
id="how-can-we-help"
name="how-can-we-help"
aria-describedby="how-can-we-help-description"
rows={4}
className="block w-full shadow-sm sm:text-sm focus:ring-grape-500 focus:border-grape-500 border border-gray-300 rounded-md"
defaultValue={""}
/>
</div>
</div>
<fieldset className="sm:col-span-2">
<legend className="block text-sm font-medium text-gray-700">
Expected budget
</legend>
<div className="mt-4 grid grid-cols-1 gap-y-4">
<div className="flex items-center">
<input
id="budget-under-25k"
name="budget"
defaultValue="under_25k"
type="radio"
className="focus:ring-grape-500 h-4 w-4 text-grape-600 border-gray-300"
/>
<label htmlFor="budget-under-25k" className="ml-3">
<span className="block text-sm text-gray-700">
Less than $25K
</span>
</label>
</div>
<div className="flex items-center">
<input
id="budget-25k-50k"
name="budget"
defaultValue="25k-50k"
type="radio"
className="focus:ring-grape-500 h-4 w-4 text-grape-600 border-gray-300"
/>
<label htmlFor="budget-25k-50k" className="ml-3">
<span className="block text-sm text-gray-700">
$25K – $50K
</span>
</label>
</div>
<div className="flex items-center">
<input
id="budget-50k-100k"
name="budget"
defaultValue="50k-100k"
type="radio"
className="focus:ring-grape-500 h-4 w-4 text-grape-600 border-gray-300"
/>
<label htmlFor="budget-50k-100k" className="ml-3">
<span className="block text-sm text-gray-700">
$50K – $100K
</span>
</label>
</div>
<div className="flex items-center">
<input
id="budget-over-100k"
name="budget"
defaultValue="over_100k"
type="radio"
className="focus:ring-grape-500 h-4 w-4 text-grape-600 border-gray-300"
/>
<label htmlFor="budget-over-100k" className="ml-3">
<span className="block text-sm text-gray-700">
$100K+
</span>
</label>
</div>
</div>
</fieldset>
<div className="sm:col-span-2">
<label
htmlFor="how-did-you-hear-about-us"
className="block text-sm font-medium text-gray-700"
>
How did you hear about us?
</label>
<div className="mt-1">
<input
type="text"
name="how-did-you-hear-about-us"
id="how-did-you-hear-about-us"
className="shadow-sm focus:ring-grape-500 focus:border-grape-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div className="text-right sm:col-span-2">
<button
type="submit"
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-grape-600 hover:bg-grape-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-grape-500"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>
{/* CTA Section */}
<div className="bg-grape-400">
<div className="max-w-md mx-auto text-center py-16 px-4 sm:max-w-2xl sm:py-24 sm:px-6 lg:px-8 lg:py-32">
<h2 className="text-3xl font-extrabold sm:text-4xl">
<span className="block text-white">
Looking for a new career?
</span>
<span className="block text-grape-900">We’re hiring.</span>
</h2>
<a
href="#"
className="mt-8 w-full inline-flex items-center justify-center py-3 px-5 bg-white border border-transparent rounded-md shadow-md text-base font-medium text-grape-600 hover:bg-grape-50 sm:w-auto"
>
<span>See open positions</span>
<ExternalLinkIcon
className="ml-3 h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
</a>
</div>
</div>
</main>
<footer className="bg-gray-900" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-md mx-auto py-12 px-4 sm:max-w-lg sm:pt-16 sm:px-6 lg:max-w-7xl lg:pt-24 lg:pb-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-400 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-300"
>
<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-200 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-400 hover:text-gray-300"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-200 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-400 hover:text-gray-300"
>
{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-200 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-400 hover:text-gray-300"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-gray-200 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-400 hover:text-gray-300"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-gray-700 pt-8">
<p className="text-base text-gray-400 xl:text-center">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}
With Overlapping Cards
/*
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: {
'blue-gray': colors.blueGray,
}
}
},
plugins: [
// ...
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
]
}
*/
import { Fragment } from "react";
import { Popover, Transition } from "@headlessui/react";
import {
MenuIcon,
NewspaperIcon,
PhoneIcon,
SupportIcon,
XIcon,
} from "@heroicons/react/outline";
const navigation = [
{ name: "Changelog", href: "#" },
{ name: "About", href: "#" },
{ name: "Partners", href: "#" },
{ name: "News", href: "#" },
];
const supportLinks = [
{
name: "Sales",
href: "#",
description:
"Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.",
icon: PhoneIcon,
},
{
name: "Technical Support",
href: "#",
description:
"Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.",
icon: SupportIcon,
},
{
name: "Media Inquiries",
href: "#",
description:
"Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate id malesuada non. Cras aliquet purus dui laoreet diam sed lacus, fames.",
icon: NewspaperIcon,
},
];
const faqs = [
{
id: 1,
question: "What's the best thing about Switzerland?",
answer:
"I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 2,
question: "Why do you never see elephants hiding in trees?",
answer:
"Because they're so good at it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 3,
question: "How do you make holy water?",
answer:
"You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 4,
question: "Why can't you hear a pterodactyl go to the bathroom?",
answer:
"Because the pee is silent. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 5,
question: "What do you call someone with no body and no nose?",
answer:
"Nobody knows. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
{
id: 6,
question: "Why did the invisible man turn down the job offer?",
answer:
"He couldn't see himself doing it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.",
},
];
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="min-h-screen bg-white">
<header className="relative pb-36 bg-blue-gray-800">
<div className="absolute inset-0">
<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
className="absolute inset-0 bg-blue-gray-800 mix-blend-multiply"
aria-hidden="true"
/>
</div>
<Popover as="div" className="relative z-10">
{({ open }) => (
<>
<nav
className="relative max-w-7xl mx-auto flex items-center justify-between pt-6 pb-2 px-4 sm:px-6 lg:px-8"
aria-label="Global"
>
<div className="flex items-center flex-1">
<div className="flex items-center justify-between w-full lg: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 lg:hidden">
<Popover.Button className="bg-blue-gray-900 bg-opacity-0 rounded-md p-2 inline-flex items-center justify-center text-white hover:bg-opacity-100 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-10 lg:flex lg:ml-10">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-white hover:text-blue-100"
>
{item.name}
</a>
))}
</div>
</div>
<div className="hidden lg:flex lg:items-center lg:space-x-6">
<a
href="#"
className="py-2 px-6 bg-blue-500 border border-transparent rounded-md shadow-md text-base font-medium text-white hover:bg-blue-600"
>
Login
</a>
</div>
</nav>
<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 lg:hidden"
>
<div className="rounded-lg shadow-lg 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-blue-gray-400 hover:bg-blue-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="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-blue-gray-900 hover:bg-blue-gray-50"
>
{item.name}
</a>
))}
</div>
<div className="mt-6 px-5">
<a
href="#"
className="block text-center w-full py-2 px-4 border border-transparent rounded-md shadow bg-blue-500 text-white font-medium hover:bg-blue-600"
>
Login
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<div className="relative mt-24 max-w-md mx-auto px-4 pb-32 sm:max-w-3xl sm:px-6 md:mt-32 lg:max-w-7xl lg:px-8">
<h1 className="text-4xl font-extrabold tracking-tight text-white md:text-5xl lg:text-6xl">
Support
</h1>
<p className="mt-6 max-w-3xl text-xl text-blue-gray-300">
Varius facilisi mauris sed sit. Non sed et duis dui leo, vulputate
id malesuada non. Cras aliquet purus dui laoreet diam sed lacus,
fames. Dui, amet, nec sit pulvinar.
</p>
</div>
</header>
<main>
<div className="bg-blue-gray-50">
{/* Cards */}
<section
className="-mt-32 max-w-md mx-auto relative z-10 px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8"
aria-labelledby="contact-heading"
>
<h2 className="sr-only" id="contact-heading">
Contact us
</h2>
<div className="grid grid-cols-1 gap-y-20 lg:grid-cols-3 lg:gap-y-0 lg:gap-x-8">
{supportLinks.map((link) => (
<div
key={link.name}
className="flex flex-col bg-white rounded-2xl shadow-xl"
>
<div className="flex-1 relative pt-16 px-6 pb-8 md:px-8">
<div className="absolute top-0 p-5 inline-block bg-blue-600 rounded-xl shadow-lg transform -translate-y-1/2">
<link.icon
className="h-6 w-6 text-white"
aria-hidden="true"
/>
</div>
<h3 className="text-xl font-medium text-blue-gray-900">
{link.name}
</h3>
<p className="mt-4 text-base text-blue-gray-500">
{link.description}
</p>
</div>
<div className="p-6 bg-blue-gray-50 rounded-bl-2xl rounded-br-2xl md:px-8">
<a
href={link.href}
className="text-base font-medium text-blue-700 hover:text-blue-600"
>
Contact us<span aria-hidden="true"> →</span>
</a>
</div>
</div>
))}
</div>
</section>
{/* FAQ */}
<section
className="max-w-md mx-auto py-24 px-4 divide-y-2 divide-blue-gray-200 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:py-32 lg:px-8"
aria-labelledby="faq-heading"
>
<h2
className="text-3xl font-extrabold text-blue-gray-900"
id="faq-heading"
>
Frequently asked questions
</h2>
<div className="mt-6 pt-10">
<dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-x-8 md:gap-y-12">
{faqs.map((faq) => (
<div key={faq.id}>
<dt className="text-lg font-medium text-blue-gray-900">
{faq.question}
</dt>
<dd className="mt-2 text-base text-blue-gray-500">
{faq.answer}
</dd>
</div>
))}
</dl>
</div>
</section>
</div>
{/* CTA Section */}
<section className="relative bg-white" aria-labelledby="join-heading">
<div
className="hidden absolute inset-x-0 h-1/2 bg-blue-gray-50 lg:block"
aria-hidden="true"
/>
<div className="max-w-7xl mx-auto bg-blue-600 lg:bg-transparent lg:px-8">
<div className="lg:grid lg:grid-cols-12">
<div className="relative z-10 lg:col-start-1 lg:row-start-1 lg:col-span-4 lg:py-16 lg:bg-transparent">
<div
className="absolute inset-x-0 h-1/2 bg-blue-gray-50 lg:hidden"
aria-hidden="true"
/>
<div className="max-w-md mx-auto px-4 sm:max-w-3xl sm:px-6 lg:max-w-none lg:p-0">
<div className="aspect-w-10 aspect-h-6 sm:aspect-w-2 sm:aspect-h-1 lg:aspect-w-1">
<img
className="object-cover object-center rounded-3xl shadow-2xl"
src="https://images.unsplash.com/photo-1507207611509-ec012433ff52?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=934&q=80"
alt=""
/>
</div>
</div>
</div>
<div className="relative bg-blue-600 lg:col-start-3 lg:row-start-1 lg:col-span-10 lg:rounded-3xl lg:grid lg:grid-cols-10 lg:items-center">
<div
className="hidden absolute inset-0 overflow-hidden rounded-3xl lg:block"
aria-hidden="true"
>
<svg
className="absolute bottom-full left-full transform translate-y-1/3 -translate-x-2/3 xl:bottom-auto xl:top-0 xl:translate-y-0"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-blue-500"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={384}
fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)"
/>
</svg>
<svg
className="absolute top-full transform -translate-y-1/3 -translate-x-1/3 xl:-translate-y-1/2"
width={404}
height={384}
fill="none"
viewBox="0 0 404 384"
aria-hidden="true"
>
<defs>
<pattern
id="64e643ad-2176-4f86-b3d7-f2c5da3b6a6d"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-blue-500"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={384}
fill="url(#64e643ad-2176-4f86-b3d7-f2c5da3b6a6d)"
/>
</svg>
</div>
<div className="relative max-w-md mx-auto py-12 px-4 space-y-6 sm:max-w-3xl sm:py-16 sm:px-6 lg:max-w-none lg:p-0 lg:col-start-4 lg:col-span-6">
<h2
className="text-3xl font-extrabold text-white"
id="join-heading"
>
Join our team
</h2>
<p className="text-lg text-white">
Varius facilisi mauris sed sit. Non sed et duis dui leo,
vulputate id malesuada non. Cras aliquet purus dui laoreet
diam sed lacus, fames.
</p>
<a
className="block w-full py-3 px-5 text-center bg-white border border-transparent rounded-md shadow-md text-base font-medium text-blue-700 hover:bg-blue-gray-50 sm:inline-block sm:w-auto"
href="#"
>
Explore open positions
</a>
</div>
</div>
</div>
</div>
</section>
{/* Newsletter Section */}
<section
className="max-w-md mx-auto py-24 px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:py-32 lg:px-8 lg:flex lg:items-center"
aria-labelledby="newsletter-heading"
>
<div className="lg:w-0 lg:flex-1">
<h2
className="text-3xl font-extrabold text-blue-gray-900 sm:text-4xl"
id="newsletter-heading"
>
Sign up for our newsletter
</h2>
<p className="mt-3 max-w-3xl text-lg text-blue-gray-500">
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>
<div className="mt-8 lg:mt-0 lg:ml-8">
<form className="sm:flex">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
id="email-address"
name="email-address"
type="email"
autoComplete="email"
required
className="w-full px-5 py-3 border border-blue-gray-300 shadow-sm placeholder-blue-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:max-w-xs rounded-md"
placeholder="Enter your email"
/>
<div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
<button
type="submit"
className="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Notify me
</button>
</div>
</form>
<p className="mt-3 text-sm text-blue-gray-500">
We care about the protection of your data. Read our{" "}
<a href="#" className="font-medium underline">
Privacy Policy.
</a>
</p>
</div>
</section>
</main>
<footer className="bg-blue-gray-50" aria-labelledby="footer-heading">
<h2 id="footer-heading" className="sr-only">
Footer
</h2>
<div className="max-w-md mx-auto py-12 px-4 sm:max-w-7xl sm:px-6 lg:py-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-blue-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-blue-gray-400 hover:text-blue-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-blue-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-blue-gray-500 hover:text-blue-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-blue-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-blue-gray-500 hover:text-blue-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-blue-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-blue-gray-500 hover:text-blue-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-12 md:mt-0">
<h3 className="text-sm font-semibold text-blue-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-blue-gray-500 hover:text-blue-gray-900"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
</div>
<div className="mt-12 border-t border-blue-gray-200 pt-8">
<p className="text-base text-blue-gray-400 xl:text-center">
© 2020 Loesen, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
);
}