Deploy

src/components/sections/FamilyTeamSection.tsx

@@ -0,0 +1,67 @@
+import Image from 'next/image'
+
+export default function FamilyTeamSection() {
+  const team = [
+    {
+      name: 'Marco Pino',
+      role: 'Head Chef & Owner',
+      bio: 'Third-generation chef trained in Bologna and Naples. Marco brings 20 years of expertise in wood-fired techniques and pasta artistry.',
+      image: 'https://images.pexels.com/photos/19420186/pexels-photo-19420186.jpeg?auto=compress&cs=tinysrgb&h=350',
+      alt: 'Marco Pino in chef whites beside the wood-fired oven'
+    },
+    {
+      name: 'Sofia Pino',
+      role: 'Pasta Maker',
+      bio: 'Sofia learned the art of sfoglia rolling from her nonna in Emilia-Romagna. She hand‑rolls every batch of pappardelle and tortellini.',
+      image: 'https://images.pexels.com/photos/30705635/pexels-photo-30705635.jpeg?auto=compress&cs=tinysrgb&h=350',
+      alt: 'Sofia Pino rolling fresh pasta dough'
+    },
+    {
+      name: 'Antonio Rossi',
+      role: 'Pizzaiolo',
+      bio: "Antonio apprenticed in the pizzerias of Naples before joining Pino's. He works the oven six nights a week, turning each pie with a wooden peel.",
+      image: 'https://images.pexels.com/photos/30521745/pexels-photo-30521745.jpeg?auto=compress&cs=tinysrgb&h=350',
+      alt: 'Antonio Rossi sliding a pizza into the wood-fired oven'
+    }
+  ]
+
+  return (
+    <section data-vula-section="familyteam" id="family-team" className="py-20 px-6 bg-neutral-50">
+      <div className="max-w-7xl mx-auto">
+        <div className="text-center mb-14">
+          <span className="text-[#FF5722] text-sm uppercase tracking-widest font-semibold">The Pinot Family</span>
+          <h2 className="text-4xl md:text-5xl font-bold text-[#212121] mt-2">Our Passion, Your Plate</h2>
+          <p className="text-[#212121]/70 max-w-2xl mx-auto mt-4 text-lg">
+            From a small village in Campania to the heart of downtown Chicago, the Pinos have spent three generations perfecting the art of Italian hospitality.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+          {team.map((member, i) => (
+            <div key={i} className="rounded-xl border border-neutral-100 bg-white shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-lifted)] hover:-translate-y-0.5 transition-all duration-200 ease-out overflow-hidden">
+              <div className="overflow-hidden aspect-[3/4]">
+                <Image
+                  src={member.image}
+                  alt={member.alt}
+                  width={400}
+                  height={500}
+                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <div className="p-5 text-center">
+                <h3 className="text-xl font-bold text-[#E91E63]">{member.name}</h3>
+                <p className="text-sm font-medium text-[#FF5722] uppercase tracking-wider mb-2">{member.role}</p>
+                <p className="text-[#212121]/70 text-sm leading-relaxed">{member.bio}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="mt-16 text-center max-w-2xl mx-auto border-t border-neutral-200 pt-10">
+          <p className="text-[#212121]/80 italic text-lg">
+            "Our family serves every guest like they are ours. That is the Pino promise."
+          </p>
+          <p className="text-[#E91E63] font-semibold mt-2">— Lucia Pino, Matriarch</p>
+        </div>
+      </div>
+    </section>
+  )
+}