'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 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: 'Human McPersonface', role: 'Co-Founder / CTO', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Git McRepositron', role: 'Business Relations', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Kernel Compiler', role: 'Front-end Developer', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Syntaxy Highlightor', role: 'Designer', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Square Pusher', role: 'Director of Product', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Whitney Francis', role: 'Copywriter', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Leonard Krasner', role: 'Senior Designer', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Floyd Miles', role: 'Principal Designer', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Emily Selman', role: 'VP, User Experience', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Kristin Watson', role: 'VP, Human Resources', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Emma Dorsey', role: 'Senior Developer', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, { name: 'Alicia Bell', role: 'Junior Copywriter', imageUrl: 'https://placehold.co/1024x1024/ecdfd8/120D0A?font=poppins&text=Avatar', }, ] 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://placehold.co/3603x300/ecdfd8/120D0A?font=poppins&text=Image', date: 'Mar 16, 2020', datetime: '2020-03-16', author: { name: 'Human McPersonface', imageUrl: 'https://placehold.co/256x256/ecdfd8/120D0A?font=poppins&text=Avatar', }, }, { id: 2, title: 'Libero quisquam voluptatibus nam iusto qui dolor', href: '#', description: 'Optio cum necessitatibus dolor voluptatum provident commodi et. Qui aperiam fugiat nemo cumque.', imageUrl: 'https://placehold.co/3270x300/ecdfd8/120D0A?font=poppins&text=Image', date: 'Mar 10, 2020', datetime: '2020-03-10', author: { name: 'Kernel Compiler', imageUrl: 'https://placehold.co/256x256/ecdfd8/120D0A?font=poppins&text=Avatar', }, }, { id: 3, title: 'Asperiores mollitia et dolor autem modi sit eius quisquam', href: '#', description: 'Cupiditate maiores ullam eveniet adipisci in doloribus nulla minus. Voluptas iusto libero adipisci rem et corporis.', imageUrl: 'https://placehold.co/3270x300/ecdfd8/120D0A?font=poppins&text=Image', date: 'Feb 12, 2020', datetime: '2020-02-12', author: { name: 'Square Pusher', imageUrl: 'https://placehold.co/256x256/ecdfd8/120D0A?font=poppins&text=Avatar', }, }, ] const footerNavigation = { main: [ { name: 'About', href: '#' }, { 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: 'X', href: '#', icon: (props) => ( ), }, { name: 'GitHub', href: '#', icon: (props) => ( ), }, { name: 'YouTube', href: '#', icon: (props) => ( ), }, ], } export default function Example() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false) return (
{/* Header */}
Your Company
{navigation.map((item) => ( {item.name} ))}
{/* Hero section */}
{/* Footer */}
) }