marketing / page-examples / about-pages
With Timeline And Stats
02-with-timeline-and-stats.jsx
'use client'
import { useState } from 'react'
import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
const navigation = [
{ name: 'Product', href: '#' },
{ name: 'Features', href: '#' },
{ name: 'Resources', href: '#' },
{ name: 'Company', href: '#' },
]
const timeline = [
{
name: 'Founded company',
description:
'Nihil aut nam. Dignissimos a pariatur et quos omnis. Aspernatur asperiores et dolorem dolorem optio voluptate repudiandae.',
date: 'Aug 2021',
dateTime: '2021-08',
},
{
name: 'Secured $65m in funding',
description:
'Provident quia ut esse. Vero vel eos repudiandae aspernatur. Cumque minima impedit sapiente a architecto nihil.',
date: 'Dec 2021',
dateTime: '2021-12',
},
{
name: 'Released beta',
description:
'Sunt perspiciatis incidunt. Non necessitatibus aliquid. Consequatur ut officiis earum eum quia facilis. Hic deleniti dolorem quia et.',
date: 'Feb 2022',
dateTime: '2022-02',
},
{
name: 'Global launch of product',
description:
'Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id architecto voluptatem hic aut pariatur velit.',
date: 'Dec 2022',
dateTime: '2022-12',
},
]
const jobOpenings = [
{
id: 1,
role: 'Full-time designer',
href: '#',
description:
'Quos sunt ad dolore ullam qui. Enim et quisquam dicta molestias. Corrupti quo voluptatum eligendi autem labore.',
salary: '$75,000 USD',
location: 'San Francisco, CA',
},
{
id: 2,
role: 'Laravel developer',
href: '#',
description:
'Et veniam et officia dolorum rerum. Et voluptas consequatur magni sapiente amet voluptates dolorum. Ut porro aut eveniet.',
salary: '$125,000 USD',
location: 'San Francisco, CA',
},
{
id: 3,
role: 'React Native developer',
href: '#',
description:
'Veniam ipsam nisi quas architecto eos non voluptatem in nemo. Est occaecati nihil omnis delectus illum est.',
salary: '$105,000 USD',
location: 'San Francisco, CA',
},
]
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 className="absolute inset-x-0 top-0 z-50">
<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 className="isolate">
{/* Hero section */}
<div className="relative isolate -z-10 overflow-hidden bg-linear-to-b from-indigo-100/20 pt-14 dark:from-indigo-950/10">
<div
aria-hidden="true"
className="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-white shadow-xl ring-1 shadow-indigo-600/10 ring-indigo-50 sm:-mr-80 lg:-mr-96 dark:bg-gray-800/30 dark:shadow-indigo-400/10 dark:ring-white/5"
/>
<div className="mx-auto max-w-7xl px-6 py-32 sm:py-40 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-8 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8">
<h1 className="max-w-2xl text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-7xl lg:col-span-2 xl:col-auto dark:text-white">
We’re a passionate group of people building the future of ecommerce
</h1>
<div className="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
<p className="text-lg font-medium text-pretty text-gray-500 sm:text-xl/8 dark:text-gray-400">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt
amet fugiat veniam occaecat fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt sunt. Qui
irure qui lorem cupidatat commodo.
</p>
</div>
<img
alt=""
src="https://images.unsplash.com/photo-1567532900872-f4e906cbf06a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1280&q=80"
className="mt-10 aspect-6/5 w-full max-w-lg rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5 sm:mt-16 lg:mt-0 lg:max-w-none xl:row-span-2 xl:row-end-2 xl:mt-36 dark:outline-white/10"
/>
</div>
</div>
<div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-linear-to-t from-white sm:h-32 dark:from-gray-900" />
</div>
{/* Timeline section */}
<div className="mx-auto -mt-8 max-w-7xl px-6 lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
{timeline.map((item) => (
<div key={item.name}>
<time
dateTime={item.dateTime}
className="flex items-center text-sm/6 font-semibold text-indigo-600 dark:text-indigo-400"
>
<svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 size-1 flex-none">
<circle r={2} cx={2} cy={2} fill="currentColor" />
</svg>
{item.date}
<div
aria-hidden="true"
className="absolute -ml-2 h-px w-screen -translate-x-full bg-gray-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0 dark:bg-white/15"
/>
</time>
<p className="mt-6 text-lg/8 font-semibold tracking-tight text-gray-900 dark:text-white">{item.name}</p>
<p className="mt-1 text-base/7 text-gray-600 dark:text-gray-400">{item.description}</p>
</div>
))}
</div>
</div>
{/* Logo cloud */}
<div className="mx-auto mt-32 max-w-7xl sm:mt-40 sm:px-6 lg:px-8">
<div className="relative isolate overflow-hidden bg-gray-900 px-6 py-24 text-center shadow-2xl sm:rounded-3xl sm:px-16 dark:shadow-none dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:inset-ring dark:after:inset-ring-white/10 dark:after:sm:rounded-3xl">
<h2 className="mx-auto max-w-2xl text-3xl font-bold tracking-tight text-white sm:text-4xl">
Our customers love us
</h2>
<p className="mx-auto mt-6 max-w-xl text-lg/8 text-gray-300">
Aliquip reprehenderit incididunt amet quis fugiat ut velit. Sit occaecat labore proident cillum in nisi
adipisicing officia excepteur tempor deserunt.
</p>
<div className="mx-auto mt-20 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-12 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 sm:gap-y-14 lg:max-w-4xl lg:grid-cols-5">
<img
alt="Transistor"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-white.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
/>
<img
alt="Reform"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-white.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
/>
<img
alt="Tuple"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-white.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
/>
<img
alt="SavvyCal"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-white.svg"
width={158}
height={48}
className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
/>
<img
alt="Statamic"
src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-white.svg"
width={158}
height={48}
className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
/>
</div>
<div aria-hidden="true" className="absolute -top-24 right-0 -z-10 transform-gpu blur-3xl">
<div
style={{
clipPath:
'polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)',
}}
className="aspect-1404/767 w-351 bg-linear-to-r from-[#80caff] to-[#4f46e5] opacity-25"
/>
</div>
</div>
</div>
{/* CTA section */}
<div className="mt-32 overflow-hidden sm:mt-40">
<div className="mx-auto max-w-7xl px-6 lg:flex lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-12 gap-y-16 lg:mx-0 lg:max-w-none lg:min-w-full lg:flex-none lg:gap-y-8">
<div className="lg:col-end-1 lg:w-full lg:max-w-lg lg:pb-8">
<h2 className="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl dark:text-white">
Our people
</h2>
<p className="mt-6 text-xl/8 text-gray-700 dark:text-gray-300">
Quasi est quaerat. Sit molestiae et. Provident ad dolorem occaecati eos iste. Soluta rerum quidem
minus ut molestiae velit error quod. Excepturi quidem expedita molestias quas.
</p>
<p className="mt-6 text-base/7 text-gray-600 dark:text-gray-400">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt
amet fugiat veniam occaecat fugiat. Quasi aperiam sit non sit neque reprehenderit.
</p>
</div>
<div className="flex flex-wrap items-start justify-end gap-6 sm:gap-8 lg:contents">
<div className="w-0 flex-auto lg:ml-auto lg:w-auto lg:flex-none lg:self-end">
<img
alt=""
src="https://images.unsplash.com/photo-1670272502246-768d249768ca?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&q=80"
className="aspect-7/5 w-148 max-w-none rounded-2xl bg-gray-50 object-cover max-sm:w-120 dark:bg-gray-800"
/>
</div>
<div className="contents lg:col-span-2 lg:col-end-2 lg:ml-auto lg:flex lg:w-148 lg:items-start lg:justify-end lg:gap-x-8">
<div className="order-first flex w-64 flex-none justify-end self-end max-sm:w-40 lg:w-auto">
<img
alt=""
src="https://images.unsplash.com/photo-1605656816944-971cd5c1407f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&h=604&q=80"
className="aspect-4/3 w-[24rem] max-w-none flex-none rounded-2xl bg-gray-50 object-cover dark:bg-gray-800"
/>
</div>
<div className="flex w-96 flex-auto justify-end lg:w-auto lg:flex-none">
<img
alt=""
src="https://images.unsplash.com/photo-1568992687947-868a62a9f521?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1152&h=842&q=80"
className="aspect-7/5 w-148 max-w-none flex-none rounded-2xl bg-gray-50 object-cover max-sm:w-120 dark:bg-gray-800"
/>
</div>
<div className="hidden sm:block sm:w-0 sm:flex-auto lg:w-auto lg:flex-none">
<img
alt=""
src="https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=768&h=604&q=80"
className="aspect-4/3 w-[24rem] max-w-none rounded-2xl bg-gray-50 object-cover dark:bg-gray-800"
/>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Stats */}
<div className="mx-auto mt-32 max-w-7xl px-6 sm:mt-40 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl dark:text-white">
We approach work as a place to make the world better
</h2>
<p className="mt-6 text-base/7 text-gray-600 dark:text-gray-300">
Diam nunc lacus lacus aliquam turpis enim. Eget hac velit est euismod lacus. Est non placerat nam arcu.
Cras purus nibh cursus sit eu in id. Integer vel nibh.
</p>
</div>
<div className="mx-auto mt-16 flex max-w-2xl flex-col gap-8 lg:mx-0 lg:mt-20 lg:max-w-none lg:flex-row lg:items-end">
<div className="flex flex-col-reverse justify-between gap-x-16 gap-y-8 rounded-2xl bg-gray-50 p-8 sm:w-3/4 sm:max-w-md sm:flex-row-reverse sm:items-end lg:w-72 lg:max-w-none lg:flex-none lg:flex-col lg:items-start dark:bg-white/5 dark:inset-ring dark:inset-ring-white/10">
<p className="flex-none text-3xl font-bold tracking-tight text-gray-900 dark:text-white">250k</p>
<div className="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
<p className="text-lg font-semibold tracking-tight text-gray-900 dark:text-white">
Users on the platform
</p>
<p className="mt-2 text-base/7 text-gray-600 dark:text-gray-300">
Vel labore deleniti veniam consequuntur sunt nobis.
</p>
</div>
</div>
<div className="flex flex-col-reverse justify-between gap-x-16 gap-y-8 rounded-2xl bg-gray-900 p-8 sm:flex-row-reverse sm:items-end lg:w-full lg:max-w-sm lg:flex-auto lg:flex-col lg:items-start lg:gap-y-44 dark:bg-gray-700 dark:inset-ring dark:inset-ring-white/10">
<p className="flex-none text-3xl font-bold tracking-tight text-white">$8.9 billion</p>
<div className="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
<p className="text-lg font-semibold tracking-tight text-white">
We’re proud that our customers have made over $8 billion in total revenue.
</p>
<p className="mt-2 text-base/7 text-gray-400 dark:text-gray-300">
Eu duis porta aliquam ornare. Elementum eget magna egestas.
</p>
</div>
</div>
<div className="flex flex-col-reverse justify-between gap-x-16 gap-y-8 rounded-2xl bg-indigo-600 p-8 sm:w-11/12 sm:max-w-xl sm:flex-row-reverse sm:items-end lg:w-full lg:max-w-none lg:flex-auto lg:flex-col lg:items-start lg:gap-y-28 dark:inset-ring dark:inset-ring-white/10">
<p className="flex-none text-3xl font-bold tracking-tight text-white">401,093</p>
<div className="sm:w-80 sm:shrink lg:w-auto lg:flex-none">
<p className="text-lg font-semibold tracking-tight text-white">Transactions this year</p>
<p className="mt-2 text-base/7 text-indigo-200 dark:text-indigo-100">
Eu duis porta aliquam ornare. Elementum eget magna egestas. Eu duis porta aliquam ornare.
</p>
</div>
</div>
</div>
</div>
{/* Blog section */}
<div className="mx-auto mt-32 max-w-7xl px-6 sm:mt-40 lg:px-8">
<div className="mx-auto flex max-w-2xl flex-col items-end justify-between gap-16 lg:mx-0 lg:max-w-none lg:flex-row">
<div className="w-full lg:max-w-lg lg:flex-auto">
<h2 className="text-3xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-4xl dark:text-white">
We’re always looking for awesome people to join us
</h2>
<p className="mt-6 text-xl/8 text-gray-600 dark:text-gray-400">
Diam nunc lacus lacus aliquam turpis enim. Eget hac velit est euismod lacus. Est non placerat nam arcu.
Cras purus nibh cursus sit eu in id.
</p>
<img
alt=""
src="https://images.unsplash.com/photo-1606857521015-7f9fcf423740?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1344&h=1104&q=80"
className="mt-16 aspect-6/5 w-full rounded-2xl object-cover outline-1 -outline-offset-1 outline-black/5 lg:aspect-auto lg:h-138 dark:outline-white/10"
/>
</div>
<div className="w-full lg:max-w-xl lg:flex-auto">
<h3 className="sr-only">Job openings</h3>
<ul className="-my-8 divide-y divide-gray-100 dark:divide-gray-800">
{jobOpenings.map((opening) => (
<li key={opening.id} className="py-8">
<dl className="relative flex flex-wrap gap-x-3">
<dt className="sr-only">Role</dt>
<dd className="w-full flex-none text-lg font-semibold tracking-tight text-gray-900 dark:text-white">
<a href={opening.href}>
{opening.role}
<span aria-hidden="true" className="absolute inset-0" />
</a>
</dd>
<dt className="sr-only">Description</dt>
<dd className="mt-2 w-full flex-none text-base/7 text-gray-600 dark:text-gray-400">
{opening.description}
</dd>
<dt className="sr-only">Salary</dt>
<dd className="mt-4 text-base/7 font-semibold text-gray-900 dark:text-white">{opening.salary}</dd>
<dt className="sr-only">Location</dt>
<dd className="mt-4 flex items-center gap-x-3 text-base/7 text-gray-500 dark:text-gray-400">
<svg
viewBox="0 0 2 2"
aria-hidden="true"
className="size-0.5 flex-none fill-gray-300 dark:fill-gray-600"
>
<circle r={1} cx={1} cy={1} />
</svg>
{opening.location}
</dd>
</dl>
</li>
))}
</ul>
<div className="mt-8 flex border-t border-gray-100 pt-8 dark:border-gray-800">
<a
href="#"
className="text-sm/6 font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
>
View all openings <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</main>
{/* Footer */}
<footer className="mx-auto mt-32 max-w-7xl px-6 sm:mt-40 lg:px-8">
<div className="border-t border-gray-900/10 pt-20 pb-8 sm: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>
)
}