import { useState } from 'react' import { Dialog } 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 stats = [ { label: 'Transactions every 24 hours', value: '44 million' }, { label: 'Assets under holding', value: '$119 trillion' }, { label: 'New users annually', value: '46,000' }, ] const values = [ { name: 'Be world-class', description: 'Aut illo quae. Ut et harum ea animi natus. Culpa maiores et sed sint et magnam exercitationem quia. Ullam voluptas nihil vitae dicta molestiae et. Aliquid velit porro vero.', }, { name: 'Share everything you know', description: 'Mollitia delectus a omnis. Quae velit aliquid. Qui nulla maxime adipisci illo id molestiae. Cumque cum ut minus rerum architecto magnam consequatur. Quia quaerat minima.', }, { name: 'Always learning', description: 'Aut repellendus et officiis dolor possimus. Deserunt velit quasi sunt fuga error labore quia ipsum. Commodi autem voluptatem nam. Quos voluptatem totam.', }, { name: 'Be supportive', description: 'Magnam provident veritatis odit. Vitae eligendi repellat non. Eum fugit impedit veritatis ducimus. Non qui aspernatur laudantium modi. Praesentium rerum error deserunt harum.', }, { name: 'Take responsibility', description: 'Sit minus expedita quam in ullam molestiae dignissimos in harum. Tenetur dolorem iure. Non nesciunt dolorem veniam necessitatibus laboriosam voluptas perspiciatis error.', }, { name: 'Enjoy downtime', description: 'Ipsa in earum deserunt aut. Quos minus aut animi et soluta. Ipsum dicta ut quia eius. Possimus reprehenderit iste aspernatur ut est velit consequatur distinctio.', }, ] const team = [ { name: 'Michael Foster', role: 'Co-Founder / CTO', imageUrl: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80', }, // More people... ] const blogPosts = [ { id: 1, title: 'Vel expedita assumenda placeat aut nisi optio voluptates quas', href: '#', description: 'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel. Iusto corrupti dicta.', imageUrl: 'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80', date: 'Mar 16, 2020', datetime: '2020-03-16', author: { name: 'Michael Foster', imageUrl: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80', }, }, // More posts... ] const footerNavigation = { main: [ { name: 'Blog', href: '#' }, { name: 'Jobs', href: '#' }, { name: 'Press', href: '#' }, { name: 'Accessibility', href: '#' }, { name: 'Partners', 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 */}

{/* Hero section */}

We’re changing the way people connect.

Cupidatat minim id magna ipsum sint dolor qui. Sunt sit in quis cupidatat mollit aute velit. Et labore commodo nulla aliqua proident mollit ullamco exercitation tempor. Sint aliqua anim nulla sunt mollit id pariatur in voluptate cillum. Eu voluptate tempor esse minim amet fugiat veniam occaecat aliqua.

{/* Content section */}

Our mission

Aliquet nec orci mattis amet quisque ullamcorper neque, nibh sem. At arcu, sit dui mi, nibh dui, diam eget aliquam. Quisque id at vitae feugiat egestas ac. Diam nulla orci at in viverra scelerisque eget. Eleifend egestas fringilla sapien.

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. 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 consect adipisicing elit. Possimus magnam voluptatum cupiditate veritatis in accusamus quisquam.

{value.name}: {value.description}

{/* Logo cloud */}

Trusted by the world’s most innovative teams

{/* Team section */}

Our team

Sit facilis neque ab nulla vel. Cum eos in laudantium. Temporibus eos totam in dolorum. Nemo vel facere repellendus ut eos dolores similique.

{person.name}

{person.role}

{/* Blog section */}

From the blog

Vel dolorem qui facilis soluta sint aspernatur totam cumque.

{blogPosts.map((post) => (

{post.date}

{post.author.name}

{post.title}

))}

{/* Footer */}

) }