Vula Builder
63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
'use client'
|
||
|
||
import Image from 'next/image'
|
||
|
||
const team = [
|
||
{
|
||
name: 'Nompumelelo Zondi',
|
||
role: 'Host & Manager',
|
||
message:
|
||
'I have been welcoming guests since 2004. For me, ubuntu means every visitor leaves as family. I love seeing their faces light up when they spot a zebra from the veranda.',
|
||
image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
|
||
},
|
||
{
|
||
name: 'Thandiwe Mthembu',
|
||
role: 'Hospitality Coordinator',
|
||
message:
|
||
'Making sure every room is perfect and every breakfast is warm is my joy. KwaNtofontofo is a home, and I take pride in that feeling.',
|
||
image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
|
||
},
|
||
{
|
||
name: 'Sipho Dlamini',
|
||
role: 'Grounds & Maintenance',
|
||
message:
|
||
'I keep the garden, pool, and braai area pristine. Our guests deserve a beautiful outside space to relax and connect with nature.',
|
||
image: 'https://images.pexels.com/photos/8837170/pexels-photo-8837170.jpeg?auto=compress&cs=tinysrgb&h=350',
|
||
},
|
||
]
|
||
|
||
export default function UbuntuTeamSection() {
|
||
return (
|
||
<section data-vula-section="ubuntuteam" id="ubuntu-team" className="bg-[#FDF6EC] py-24 px-4">
|
||
<div className="max-w-6xl mx-auto">
|
||
<h2 className="text-4xl font-bold text-[#2C1810] text-center mb-4">The People Behind the Welcome</h2>
|
||
<p className="text-center text-[#2C1810]/70 mb-12 max-w-xl mx-auto">
|
||
A small team with big hearts – our staff live the spirit of ubuntu every day.
|
||
</p>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
{team.map((member, i) => (
|
||
<div
|
||
key={i}
|
||
className="rounded-xl overflow-hidden bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out"
|
||
>
|
||
<div className="aspect-[4/5] overflow-hidden">
|
||
<Image
|
||
src={member.image}
|
||
alt={member.name}
|
||
width={400}
|
||
height={500}
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
<div className="p-5">
|
||
<h3 className="text-lg font-bold text-[#2C1810]">{member.name}</h3>
|
||
<p className="text-sm font-medium text-[#E67E22] mb-3">{member.role}</p>
|
||
<p className="text-sm text-[#2C1810]/70 leading-relaxed italic">"{member.message}"</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
} |