79 lines
2.7 KiB
JavaScript
79 lines
2.7 KiB
JavaScript
import act1 from '@/images/act1.png'
|
|
import act2 from '@/images/act2.png'
|
|
import act3 from '@/images/act3.png'
|
|
|
|
|
|
const posts = [
|
|
{
|
|
id: 1,
|
|
title: 'Yoga',
|
|
href: '#',
|
|
description:
|
|
'Step fully into your body. The perfect start to the morning.',
|
|
image:
|
|
'images/act1.png',
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Meditation',
|
|
href: '#',
|
|
description:
|
|
'Open your mind, enter a deeper state of awareness.',
|
|
image:
|
|
'images/act3.png',
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'Nutrition',
|
|
href: '#',
|
|
description:
|
|
'Gluten-free, vegetarian, vegan, detox diets, & more.',
|
|
image:
|
|
'images/act2.png',
|
|
},
|
|
]
|
|
|
|
|
|
export default function activities() {
|
|
return (
|
|
<div className="bg-creme-200 py-12 lg:py-12">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="mx-auto max-w-2xl text-center">
|
|
<p className="mt-2 text-lg leading-8 text-gray-600 italic font-semibold">
|
|
Mind, Body, and Soul: For a Deeper Connection.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto mt-10 grid max-w-2xl auto-rows-fr grid-cols-1 gap-8 lg:mt-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
|
|
{posts.map((post) => (
|
|
<article
|
|
key={post.id}
|
|
className="relative isolate shadow-xl flex flex-col justify-end overflow-hidden rounded-lg bg-gray-900 px-8 pb-8 pt-60 sm:pt-48 lg:pt-60"
|
|
>
|
|
<img alt="" src={post.image} className="absolute inset-0 -z-10 h-full w-full object-cover" />
|
|
<div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
|
|
<div className="absolute inset-0 -z-10 rounded-lg ring-1 ring-inset ring-gray-900/10" />
|
|
|
|
<div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
|
|
<div className="-ml-4 flex items-center gap-x-4">
|
|
</div>
|
|
</div>
|
|
<h3 className="mt-3 text-lg font-semibold leading-6 text-white">
|
|
<a href={post.href}>
|
|
<span className="absolute inset-0" />
|
|
{post.title}
|
|
</a>
|
|
</h3>
|
|
<p className="mt-3 text-base font-medium leading-6 text-white">
|
|
<a href={post.href}>
|
|
<span className="absolute inset-0" />
|
|
{post.description}
|
|
</a>
|
|
</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|