Spaces:
Running
Running
File size: 6,684 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
'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: 'Marketplace', href: '#' },
{ name: 'Company', href: '#' },
{ name: 'Log in', href: '#' },
]
export default function WithAngledImageOnRight() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
return (
<div className="bg-white">
<header className="absolute inset-x-0 top-0 z-50">
<div className="mx-auto max-w-7xl">
<div className="px-6 pt-6 lg:max-w-2xl lg:pr-0 lg:pl-8">
<nav aria-label="Global" className="flex items-center justify-between lg:justify-start">
<a href="#" className="-m-1.5 p-1.5">
<span className="sr-only">Your Company</span>
<img
alt="Your Company"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="h-8 w-auto"
/>
</a>
<button
type="button"
onClick={() => setMobileMenuOpen(true)}
className="-m-2.5 rounded-md p-2.5 text-gray-700 lg:hidden"
>
<span className="sr-only">Open main menu</span>
<Bars3Icon aria-hidden="true" className="size-6" />
</button>
<div className="hidden lg:ml-12 lg:flex lg:gap-x-14">
{navigation.map((item) => (
<a key={item.name} href={item.href} className="text-sm/6 font-semibold text-gray-900">
{item.name}
</a>
))}
</div>
</nav>
</div>
</div>
<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">
<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"
/>
</a>
<button
type="button"
onClick={() => setMobileMenuOpen(false)}
className="-m-2.5 rounded-md p-2.5 text-gray-700"
>
<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">
<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"
>
{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"
>
Log in
</a>
</div>
</div>
</div>
</DialogPanel>
</Dialog>
</header>
<div className="relative">
<div className="mx-auto max-w-7xl">
<div className="relative z-10 pt-14 lg:w-full lg:max-w-2xl">
<svg
viewBox="0 0 100 100"
preserveAspectRatio="none"
aria-hidden="true"
className="absolute inset-y-0 right-8 hidden h-full w-80 translate-x-1/2 transform fill-white lg:block"
>
<polygon points="0,0 90,0 50,100 0,100" />
</svg>
<div className="relative px-6 py-32 sm:py-40 lg:px-8 lg:py-56 lg:pr-0">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<div className="hidden sm:mb-10 sm:flex">
<div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Anim aute id magna aliqua ad ad non deserunt sunt.{' '}
<a href="#" className="font-semibold whitespace-nowrap text-indigo-600">
<span aria-hidden="true" className="absolute inset-0" />
Read more <span aria-hidden="true">→</span>
</a>
</div>
</div>
<h1 className="text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-7xl">
Data to enrich your business
</h1>
<p className="mt-8 text-lg font-medium text-pretty text-gray-500 sm:text-xl/8">
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt
amet fugiat veniam occaecat fugiat aliqua.
</p>
<div className="mt-10 flex items-center gap-x-6">
<a
href="#"
className="rounded-md bg-indigo-600 px-3.5 py-2.5 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"
>
Get started
</a>
<a href="#" className="text-sm/6 font-semibold text-gray-900">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img
alt=""
src="https://images.unsplash.com/photo-1483389127117-b6a2102724ae?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80"
className="aspect-3/2 object-cover lg:aspect-auto lg:size-full"
/>
</div>
</div>
</div>
)
}
|