Spaces:
Running
Running
File size: 3,792 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 |
export default function WithImageTiles() {
return (
<div className="overflow-hidden bg-white py-32">
<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">Our people</h2>
<p className="mt-6 text-xl/8 text-gray-700">
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">
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 className="mt-10 flex">
<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"
>
Join our team
<span aria-hidden="true">→</span>
</a>
</div>
</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"
/>
</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 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"
/>
</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"
/>
</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"
/>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
|