Deploy

2026-06-27 09:51:17 +00:00
parent 1624a46015
commit d65fbcc085
1 changed files with 54 additions and 0 deletions
@@ -0,0 +1,54 @@
 'use client'
 import Image from 'next/image'
 import { Quote } from 'lucide-react'
 export default function TeamProfilesSection() {
  const team = [
    {
      name: 'Marco Rossi',
      role: 'Head Chef',
      bio: 'Maestro della cucina tradizionale romana, Marco porta 25 anni di esperienza dai migliori ristoranti di Roma, specializzato in ricette tramandate da generazioni.',
      quote: 'La cucina è la mia anima; ogni piatto racconta la storia della nostra terra.',
      image: 'https://images.pexels.com/photos/29039082/pexels-photo-29039082.jpeg?auto=compress&cs=tinysrgb&h=350',
    },
    {
      name: 'Elena Bianchi',
      role: 'Sommelier',
      bio: 'Con una laurea in enologia e certificazioni internazionali, Elena seleziona vini locali che esaltano i sapori naturali dei nostri piatti.',
      quote: 'Il vino è poesia liquida, un abbraccio tra terra e cielo.',
      image: 'https://images.pexels.com/photos/36513586/pexels-photo-36513586.jpeg?auto=compress&cs=tinysrgb&h=350',
    },
    {
      name: 'Giovanni Verdi',
      role: 'Chef Pasticcere',
      bio: 'Giovanni crea dolci artigianali con ingredienti biologici locali, unendo tecniche moderne alla tradizione italiana dei forni a legna.',
      quote: 'La dolcezza è il sorriso della natura sulla tavola.',
      image: 'https://images.pexels.com/photos/16620746/pexels-photo-16620746.jpeg?auto=compress&cs=tinysrgb&h=350',
    },
  ]
  return (
    <section id="team" data-vula-section="team" className="bg-[#F1F8E9] py-20 px-4">
      <div className="max-w-5xl mx-auto">
        <h2 className="text-3xl font-bold text-[#1B3A1F] mb-12 text-center">Il Nostro Team</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {team.map((member, index) => (
            <div key={index} 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 p-6 text-center">
              <div className="relative w-24 h-24 mx-auto mb-4 rounded-full border-4 border-[#8BC34A] overflow-hidden">
                <Image src={member.image} alt={member.name} fill className="object-cover" sizes="96px" />
              </div>
              <h3 className="text-xl font-bold text-[#1B3A1F]">{member.name}</h3>
              <p className="text-sm text-[#4CAF50] font-medium mb-3">{member.role}</p>
              <p className="text-sm text-[#1B3A1F]/70 mb-4">{member.bio}</p>
              <div className="border-t border-[#8BC34A]/30 pt-4">
                <Quote className="w-5 h-5 text-[#8BC34A] mx-auto mb-2" />
                <p className="text-xs italic text-[#1B3A1F]/60">&ldquo;{member.quote}&rdquo;</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
 }