import { useState } from 'react' import { Dialog } from '@headlessui/react' import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline' import { AcademicCapIcon, CheckCircleIcon, HandRaisedIcon, RocketLaunchIcon, SparklesIcon, SunIcon, UserGroupIcon, } from '@heroicons/react/20/solid' const navigation = [ { name: 'Product', href: '#' }, { name: 'Features', href: '#' }, { name: 'Marketplace', href: '#' }, { name: 'Company', href: '#' }, ] const stats = [ { label: 'Business was founded', value: '2012' }, { label: 'People on the team', value: '120+' }, { label: 'Users on the platform', value: '250k' }, { label: 'Paid out to creators', value: '$70M' }, ] const values = [ { name: 'Be world-class.', description: 'Lorem ipsum, dolor sit amet consectetur adipisicing elit aute id magna.', icon: RocketLaunchIcon, }, { name: 'Take responsibility.', description: 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.', icon: HandRaisedIcon, }, { name: 'Be supportive.', description: 'Ac tincidunt sapien vehicula erat auctor pellentesque rhoncus voluptas blanditiis et.', icon: UserGroupIcon, }, { name: 'Always learning.', description: 'Iure sed ab. Aperiam optio placeat dolor facere. Officiis pariatur eveniet atque et dolor.', icon: AcademicCapIcon, }, { name: 'Share everything you know.', description: 'Laudantium tempora sint ut consectetur ratione. Ut illum ut rem numquam fuga delectus.', icon: SparklesIcon, }, { name: 'Enjoy downtime.', description: 'Culpa dolorem voluptatem velit autem rerum qui et corrupti. Quibusdam quo placeat.', icon: SunIcon, }, ] const team = [ { name: 'Leslie Alexander', role: 'Co-Founder / CEO', imageUrl: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80', location: 'Toronto, Canada', }, // More people... ] const benefits = [ 'Competitive salaries', 'Flexible work hours', '30 days of paid vacation', 'Annual team retreats', 'Benefits for you and your family', 'A great work environment', ] 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) => ( ), }, { name: 'Instagram', href: '#', icon: (props) => ( ), }, { name: 'Twitter', href: '#', icon: (props) => ( ), }, { name: 'GitHub', href: '#', icon: (props) => ( ), }, { name: 'YouTube', href: '#', icon: (props) => ( ), }, ], } export default function Example() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (

{/* Header */}

{/* Background */}

{/* Header section */}

We love creators

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

{/* Content section */}

Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id. Id dolor praesent donec est. Odio penatibus risus viverra tellus varius sit neque erat velit. Faucibus commodo massa rhoncus, volutpat. Dignissim sed eget risus enim. Mattis mauris semper sed amet vitae sed turpis id.

Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas.

Erat pellentesque dictumst ligula porttitor risus eget et eget. Ultricies tellus felis id dignissim eget. Est augue maecenas risus nulla ultrices congue nunc tortor. Enim et nesciunt doloremque nesciunt voluptate.

Et vitae blandit facilisi magna lacus commodo. Vitae sapien duis odio id et. Id blandit molestie auctor fermentum dignissim. Lacus diam tincidunt ac cursus in vel. Mauris varius vulputate et ultrices hac adipiscing egestas. Iaculis convallis ac tempor et ut. Ac lorem vel integer orci.

{stat.label}: {stat.value}

{/* Image section */}

{/* Values section */}

Our values

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis.

: {value.description}

{/* Team section */}

Our team

Excepturi repudiandae alias ut. Totam aut facilis. Praesentium in neque vel omnis. Eos error odio. Qui fugit voluptatibus eum culpa.

{person.name}

{person.role}

{person.location}

{/* CTA section */}

Join our team

Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.

See our job postings

{/* Footer */}

) }