app-sleepy-manatee-skip/app/about/page.tsx

import { Container } from "@/components/container";
import Image from "next/image";

const teamMembers = [
  {
    name: "Mehmet Yilmaz",
    title: "Fondateur & Chef Principal",
    description: "Avec plus de 20 ans d'expérience dans la cuisine turque, Mehmet est le cœur et l'âme de BG Kebab. Sa passion pour les saveurs authentiques et son dévouement à la qualité sont inégalés.",
    image: "https://images.unsplash.com/photo-1611657365907-1ca5d9799f59?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwxfHxjaGVmJTIwcG9ydHJhaXR8ZW58MHwxfHx8MTc2NzQ4MDI5MXww&ixlib=rb-4.1.0&q=80&w=1080",
  },
  {
    name: "Ayşe Demir",
    title: "Responsable des Opérations",
    description: "Ayşe assure le bon fonctionnement de BG Kebab au quotidien. Son sens de l'organisation et son sourire accueillant garantissent une expérience client exceptionnelle à chaque visite.",
    image: "https://images.unsplash.com/photo-1611657366409-55549160be82?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwyfHxjaGVmJTIwcG9ydHJhaXR8ZW58MHwxfHx8MTc2NzQ4MDI5MXww&ixlib=rb-4.1.0&q=80&w=1080",
  },
  {
    name: "Emre Can",
    title: "Chef Pâtissier",
    description: "Emre est notre magicien des desserts. Il apporte une touche de douceur et d'innovation à notre menu avec ses créations uniques, parfaites pour finir votre repas sur une note sucrée.",
    image: "https://images.unsplash.com/photo-1683702831004-97203ddc564e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHwzfHxjaGVmJTIwcG9ydHJhaXR8ZW58MHwxfHx8MTc2NzQ4MDI5MXww&ixlib=rb-4.1.0&q=80&w=1080",
  },
];

export default function AboutPage() {
  return (
    <Container className="mt-16 lg:mt-32">
      <h1 className="text-4xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-5xl mb-12">
        À propos de BG Kebab
      </h1>

      {/* Section Histoire */}
      <section className="mb-16">
        <h2 className="text-3xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
          Notre Histoire
        </h2>
        <p className="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed">
          Fondé en 2023, BG Kebab est né d'une passion pour la cuisine turque authentique et le désir de partager des saveurs traditionnelles avec la communauté. Ce qui a commencé comme un petit rêve est rapidement devenu un lieu de rassemblement pour les amateurs de kebabs, offrant des plats préparés avec des ingrédients frais et de qualité supérieure. Nous sommes fiers de notre héritage et nous nous efforçons de maintenir les standards élevés qui ont fait notre réputation.
        </p>
      </section>

      {/* Section Valeurs */}
      <section className="mb-16">
        <h2 className="text-3xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
          Nos Valeurs
        </h2>
        <ul className="list-disc list-inside text-lg text-neutral-600 dark:text-neutral-400 space-y-3">
          <li>
            <strong>Qualité :</strong> Nous utilisons uniquement les meilleurs ingrédients, frais et locaux lorsque possible, pour garantir un goût incomparable.
          </li>
          <li>
            <strong>Authenticité :</strong> Nos recettes sont fidèles aux traditions turques, transmises de génération en génération.
          </li>
          <li>
            <strong>Communauté :</strong> BG Kebab est plus qu'un restaurant, c'est un lieu où chacun se sent chez soi, un point de rencontre pour les amis et la famille.
          </li>
          <li>
            <strong>Service :</strong> Nous nous engageons à offrir un service chaleureux et efficace, pour que chaque visite soit une expérience agréable.
          </li>
        </ul>
      </section>

      {/* Section Équipe */}
      <section className="mb-16">
        <h2 className="text-3xl font-semibold text-neutral-700 dark:text-neutral-300 mb-6">
          Notre Équipe
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {teamMembers.map((member) => (
            <div key={member.name} className="flex flex-col items-center text-center bg-white dark:bg-neutral-900 p-6 rounded-lg shadow-lg">
              <Image
                src={member.image}
                alt={member.name}
                width={150}
                height={150}
                className="rounded-full object-cover w-36 h-36 mb-4 border-4 border-primary-500"
              />
              <h3 className="text-xl font-bold text-neutral-800 dark:text-neutral-200 mb-2">
                {member.name}
              </h3>
              <p className="text-primary-600 dark:text-primary-400 font-medium mb-2">
                {member.title}
              </p>
              <p className="text-neutral-600 dark:text-neutral-400 text-sm">
                {member.description}
              </p>
            </div>
          ))}
        </div>
      </section>
    </Container>
  );
}