Deploy

2026-06-27 09:51:15 +00:00
parent c738e0d237
commit 2e3177f935
1 changed files with 53 additions and 0 deletions
@@ -0,0 +1,53 @@
 import Image from "next/image"
 export default function AboutSection() {
  return (
    <section data-vula-section="about" id="about" className="py-24 bg-white">
      <div className="max-w-6xl mx-auto px-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div className="space-y-6">
            <div className="relative h-[400px] overflow-hidden rounded-xl shadow-[var(--shadow-card)]">
              <Image
                src="https://images.pexels.com/photos/36595940/pexels-photo-36595940.jpeg?auto=compress&cs=tinysrgb&h=350&w=800"
                alt="Warm interior of Bona Vista with hand-painted tiles"
                fill
                className="object-cover hover:scale-105 transition-transform duration-500 ease-out"
                sizes="(max-width: 768px) 100vw, 50vw"
              />
            </div>
          </div>
          <div className="bg-[#F1F8E9] p-8 rounded-xl shadow-[var(--shadow-card)]">
            <h2 className="text-4xl font-bold text-[#1B3A1F] mb-6">
              Our Story
            </h2>
            <p className="text-[#1B3A1F]/80 text-lg leading-relaxed mb-5">
              Founded in 1968 by the Conti family, Bona Vista serves Roman recipes passed down
              through three generations. Every dish starts with organic produce from local farms
              within 30 km of our Trastevere kitchen.
            </p>
            <p className="text-[#1B3A1F]/70 mb-6">
              We source our pecorino from a single artisan in Pienza, our olive oil from a
              century-old grove in Lazio, and our San Marzano tomatoes directly from the slopes
              of Mount Vesuvius.
            </p>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 rounded-full overflow-hidden">
                <Image
                  src="https://images.pexels.com/photos/29039082/pexels-photo-29039082.jpeg?auto=compress&cs=tinysrgb&h=350&w=350"
                  alt="Chef Marco Conti"
                  width={48}
                  height={48}
                  className="object-cover w-full h-full"
                />
              </div>
              <div>
                <p className="font-semibold text-[#1B3A1F]">Chef Marco Conti</p>
                <p className="text-sm text-[#1B3A1F]/60">Third-generation chef</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
 }