marketing / page-examples / pricing-pages
With Three Tiers And Testimonials
03-with-three-tiers-and-testimonials.jsx
'use client'
import { useState } from 'react'
import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
import { CheckIcon } from '@heroicons/react/20/solid'
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
]
const pricing = {
tiers: [
{
id: 'freelancer',
name: 'Freelancer',
price: { monthly: '$19', annually: '$199' },
description: 'The essentials to provide your best work for clients.',
features: ['5 products', 'Up to 1,000 subscribers', 'Basic analytics', '48-hour support response time'],
featured: false,
},
{
id: 'startup',
name: 'Startup',
price: { monthly: '$29', annually: '$299' },
description: 'A plan that scales with your rapidly growing business.',
features: [
'25 products',
'Up to 10,000 subscribers',
'Advanced analytics',
'24-hour support response time',
'Marketing automations',
],
featured: true,
},
{
id: 'enterprise',
name: 'Enterprise',
price: { monthly: '$59', annually: '$599' },
description: 'Dedicated support and infrastructure for your company.',
features: [
'Unlimited products',
'Unlimited subscribers',
'Advanced analytics',
'1-hour, dedicated support response time',
'Marketing automations',
'Custom reporting tools',
],
featured: false,
},
],
}
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: '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: 3,
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: 4,
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: 5,
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: 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: 'Automation', href: '#' },
{ name: 'Commerce', href: '#' },
{ name: 'Insights', href: '#' },
],
support: [
{ name: 'Submit ticket', href: '#' },
{ name: 'Documentation', href: '#' },
{ name: 'Guides', href: '#' },
],
company: [
{ name: 'About', href: '#' },
{ name: 'Blog', href: '#' },
{ name: 'Jobs', href: '#' },
{ name: 'Press', href: '#' },
],
legal: [
{ name: 'Terms of service', href: '#' },
{ name: 'Privacy policy', href: '#' },
{ name: 'License', 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: 'X',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</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: 'YouTube',
href: '#',
icon: (props) => (
<svg fill="currentColor" viewBox="0 0 24 24" {...props}>
<path
fillRule="evenodd"
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
clipRule="evenodd"
/>
</svg>
),
},
],
}
export default function Example() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<div className="bg-white dark:bg-gray-900">
{/* Header */}
<header>
<nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
<div className="flex lg:flex-1">
<a href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto dark:hidden"
/>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
className="h-8 w-auto not-dark:hidden"
/>
</a>
</div>
<div className="flex lg:hidden">
<button
type="button"
onClick={() => setMobileMenuOpen(true)}
className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-gray-200"
>
<span className="sr-only">Open main menu</span>
<Bars3Icon aria-hidden="true" className="size-6" />
</button>
</div>
<div className="hidden lg:flex lg:gap-x-12">
{navigation.map((item) => (
<a key={item.name} href={item.href} className="text-sm/6 font-semibold text-gray-900 dark:text-white">
{item.name}
</a>
))}
</div>
<div className="hidden lg:flex lg:flex-1 lg:justify-end">
<a href="#" className="text-sm/6 font-semibold text-gray-900 dark:text-white">
Log in <span aria-hidden="true">→</span>
</a>
</div>
</nav>
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
<div className="fixed inset-0 z-50" />
<DialogPanel className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:bg-gray-900 dark:sm:ring-gray-100/10">
<div className="flex items-center justify-between">
<a href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto dark:hidden"
/>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500"
className="h-8 w-auto not-dark:hidden"
/>
</a>
<button
type="button"
onClick={() => setMobileMenuOpen(false)}
className="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-gray-200"
>
<span className="sr-only">Close menu</span>
<XMarkIcon aria-hidden="true" className="size-6" />
</button>
</div>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10 dark:divide-white/10">
<div className="space-y-2 py-6">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className="-mx-3 block rounded-lg px-3 py-2 text-base/7 font-semibold text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-white/5"
>
{item.name}
</a>
))}
</div>
<div className="py-6">
<a
href="#"
className="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:bg-white/5"
>
Log in
</a>
</div>
</div>
</div>
</DialogPanel>
</Dialog>
</header>
<main>
{/* Pricing section */}
<form className="group/tiers pt-24 sm:pt-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-4xl text-center">
<h2 className="text-base/7 font-semibold text-indigo-600 dark:text-indigo-400">Pricing</h2>
<p className="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl dark:text-white">
Pricing that grows with you
</p>
</div>
<p className="mx-auto mt-6 max-w-2xl text-center text-lg font-medium text-pretty text-gray-600 sm:text-xl/8 dark:text-gray-400">
Choose an affordable plan that’s packed with the best features for engaging your audience, creating
customer loyalty, and driving sales.
</p>
<div className="mt-16 flex justify-center">
<fieldset aria-label="Payment frequency">
<div className="grid grid-cols-2 gap-x-1 rounded-full p-1 text-center text-xs/5 font-semibold inset-ring inset-ring-gray-200 dark:inset-ring-white/10">
<label className="group relative rounded-full px-2.5 py-1 has-checked:bg-indigo-600 dark:has-checked:bg-indigo-500">
<input
defaultValue="monthly"
defaultChecked
name="frequency"
type="radio"
className="absolute inset-0 appearance-none rounded-full"
/>
<span className="text-gray-500 group-has-checked:text-white dark:text-gray-400">Monthly</span>
</label>
<label className="group relative rounded-full px-2.5 py-1 has-checked:bg-indigo-600 dark:has-checked:bg-indigo-500">
<input
defaultValue="annually"
name="frequency"
type="radio"
className="absolute inset-0 appearance-none rounded-full"
/>
<span className="text-gray-500 group-has-checked:text-white dark:text-gray-400">Annually</span>
</label>
</div>
</fieldset>
</div>
<div className="isolate mx-auto mt-10 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{pricing.tiers.map((tier) => (
<div
key={tier.id}
data-featured={tier.featured ? 'true' : undefined}
className="group/tier rounded-3xl p-8 ring-1 ring-gray-200 data-featured:ring-2 data-featured:ring-indigo-600 xl:p-10 dark:bg-gray-800/50 dark:ring-white/15 dark:data-featured:ring-indigo-400"
>
<div className="flex items-center justify-between gap-x-4">
<h3
id={`tier-${tier.id}`}
className="text-lg/8 font-semibold text-gray-900 group-data-featured/tier:text-indigo-600 dark:text-white dark:group-data-featured/tier:text-indigo-400"
>
{tier.name}
</h3>
<p className="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs/5 font-semibold text-indigo-600 group-not-data-featured/tier:hidden dark:bg-indigo-500 dark:text-white">
Most popular
</p>
</div>
<p className="mt-4 text-sm/6 text-gray-600 dark:text-gray-300">{tier.description}</p>
<p className="mt-6 flex items-baseline gap-x-1 group-not-has-[[name=frequency][value=monthly]:checked]/tiers:hidden">
<span className="text-4xl font-semibold tracking-tight text-gray-900 dark:text-white">
{tier.price.monthly}
</span>
<span className="text-sm/6 font-semibold text-gray-600 dark:text-gray-400">/month</span>
</p>
<p className="mt-6 flex items-baseline gap-x-1 group-not-has-[[name=frequency][value=annually]:checked]/tiers:hidden">
<span className="text-4xl font-semibold tracking-tight text-gray-900 dark:text-white">
{tier.price.annually}
</span>
<span className="text-sm/6 font-semibold text-gray-600 dark:text-gray-400">/year</span>
</p>
<a
href={tier.href}
aria-describedby={tier.id}
className="mt-6 block w-full rounded-md px-3 py-2 text-center text-sm/6 font-semibold text-indigo-600 inset-ring-1 inset-ring-indigo-200 group-data-featured/tier:bg-indigo-600 group-data-featured/tier:text-white group-data-featured/tier:shadow-xs group-data-featured/tier:inset-ring-0 hover:inset-ring-indigo-300 group-data-featured/tier:hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-white/10 dark:text-white dark:inset-ring dark:inset-ring-white/5 dark:group-data-featured/tier:bg-indigo-500 dark:group-data-featured/tier:shadow-none dark:hover:bg-white/20 dark:hover:inset-ring-white/5 dark:group-data-featured/tier:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500 dark:group-not-data-featured/tier:focus-visible:outline-white/75"
>
Buy plan
</a>
<ul role="list" className="mt-8 space-y-3 text-sm/6 text-gray-600 xl:mt-10 dark:text-gray-300">
{tier.features.map((feature) => (
<li key={feature} className="flex gap-x-3">
<CheckIcon
aria-hidden="true"
className="h-6 w-5 flex-none text-indigo-600 dark:text-indigo-400"
/>
{feature}
</li>
))}
</ul>
</div>
))}
</div>
</div>
</form>
{/* Testimonial section */}
<div className="mx-auto mt-24 max-w-7xl px-6 sm:mt-56 lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div className="flex flex-col pb-10 sm:pb-16 lg:pr-8 lg:pb-0 xl:pr-20">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/tuple-logo-gray-900.svg"
className="h-12 self-start dark:hidden"
/>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/tuple-logo-white.svg"
className="h-12 self-start not-dark:hidden"
/>
<figure className="mt-10 flex flex-auto flex-col justify-between">
<blockquote className="text-lg/8 text-gray-900 dark:text-gray-100">
<p>
“Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare
arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam
ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.”
</p>
</blockquote>
<figcaption className="mt-10 flex items-center gap-x-6">
<img
alt=""
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
className="size-14 rounded-full bg-gray-50 dark:bg-gray-800"
/>
<div className="text-base">
<div className="font-semibold text-gray-900 dark:text-white">Judith Black</div>
<div className="mt-1 text-gray-500 dark:text-gray-400">CEO of Tuple</div>
</div>
</figcaption>
</figure>
</div>
<div className="flex flex-col border-t border-gray-900/10 pt-10 sm:pt-16 lg:border-t-0 lg:border-l lg:pt-0 lg:pl-8 xl:pl-20 dark:border-white/10">
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/reform-logo-gray-900.svg"
className="h-12 self-start dark:hidden"
/>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/reform-logo-white.svg"
className="h-12 self-start not-dark:hidden"
/>
<figure className="mt-10 flex flex-auto flex-col justify-between">
<blockquote className="text-lg/8 text-gray-900 dark:text-gray-100">
<p>
“Excepteur veniam labore ullamco eiusmod. Pariatur consequat proident duis dolore nulla veniam
reprehenderit nisi officia voluptate incididunt exercitation exercitation elit. Nostrud veniam sint
dolor nisi ullamco.”
</p>
</blockquote>
<figcaption className="mt-10 flex items-center gap-x-6">
<img
alt=""
src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
className="size-14 rounded-full bg-gray-50 dark:bg-gray-800"
/>
<div className="text-base">
<div className="font-semibold text-gray-900 dark:text-white">Joseph Rodriguez</div>
<div className="mt-1 text-gray-500 dark:text-gray-400">CEO of Reform</div>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
{/* FAQ section */}
<div className="mx-auto mt-24 max-w-7xl px-6 sm:mt-56 lg:px-8">
<h2 className="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl dark:text-white">
Frequently asked questions
</h2>
<p className="mt-6 max-w-2xl text-base/7 text-gray-600 dark:text-gray-400">
Have a different question and can’t find the answer you’re looking for? Reach out to our support team by{' '}
<a
href="#"
className="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
>
sending us an email
</a>{' '}
and we’ll get back to you as soon as we can.
</p>
<div className="mt-20">
<dl className="space-y-16 sm:grid sm:grid-cols-2 sm:space-y-0 sm:gap-x-6 sm:gap-y-16 lg:gap-x-10">
{faqs.map((faq) => (
<div key={faq.id}>
<dt className="text-base/7 font-semibold text-gray-900 dark:text-white">{faq.question}</dt>
<dd className="mt-2 text-base/7 text-gray-600 dark:text-gray-400">{faq.answer}</dd>
</div>
))}
</dl>
</div>
</div>
</main>
{/* Footer */}
<footer className="mx-auto max-w-7xl px-6 pt-24 pb-8 sm:pt-56 lg:px-8">
<div className="border-t border-gray-900/10 pt-24 dark:border-white/10">
<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/6 font-semibold text-gray-900 dark:text-white">Solutions</h3>
<ul role="list" className="mt-6 space-y-4">
{footerNavigation.solutions.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-sm/6 font-semibold text-gray-900 dark:text-white">Support</h3>
<ul role="list" className="mt-6 space-y-4">
{footerNavigation.support.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
<div className="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 className="text-sm/6 font-semibold text-gray-900 dark:text-white">Company</h3>
<ul role="list" className="mt-6 space-y-4">
{footerNavigation.company.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-10 md:mt-0">
<h3 className="text-sm/6 font-semibold text-gray-900 dark:text-white">Legal</h3>
<ul role="list" className="mt-6 space-y-4">
{footerNavigation.legal.map((item) => (
<li key={item.name}>
<a
href={item.href}
className="text-sm/6 text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>
{item.name}
</a>
</li>
))}
</ul>
</div>
</div>
</div>
<div className="mt-10 xl:mt-0">
<h3 className="text-sm/6 font-semibold text-gray-900 dark:text-white">Subscribe to our newsletter</h3>
<p className="mt-2 text-sm/6 text-gray-600 dark:text-gray-400">
The latest news, articles, and resources, sent to your inbox weekly.
</p>
<form className="mt-6 sm:flex sm:max-w-md">
<label htmlFor="email-address" className="sr-only">
Email address
</label>
<input
id="email-address"
name="email-address"
type="email"
required
placeholder="Enter your email"
autoComplete="email"
className="w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-500 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:w-64 sm:text-sm/6 xl:w-full dark:bg-white/5 dark:text-white dark:outline-gray-700 dark:focus:outline-indigo-500"
/>
<div className="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
<button
type="submit"
className="flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
>
Subscribe
</button>
</div>
</form>
</div>
</div>
<div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 md:flex md:items-center md:justify-between lg:mt-24 dark:border-white/10">
<div className="flex gap-x-6 md:order-2">
{footerNavigation.social.map((item) => (
<a
key={item.name}
href={item.href}
className="text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
>
<span className="sr-only">{item.name}</span>
<item.icon aria-hidden="true" className="size-6" />
</a>
))}
</div>
<p className="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0 dark:text-gray-400">
© 2024 Your Company, Inc. All rights reserved.
</p>
</div>
</div>
</footer>
</div>
)
}