import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Layout from "../components/layout";
import pexels from "../../public/pexels1.jpg";
import Card from "../components/card";
import Profiles from "<as>/components/profiles";

const Team = () => {
  const { t: translate } = useTranslation();

  return (
    <>
      <Layout title="people.title" subtitle="people.subtitle">

        <Card
          title="people.first.title"
          subtitle="people.first.subtitle"
          image={pexels}
        />
        <div className="h-24 pt-10 flex justify-center items-center bg-zinc-100">
          <p className="font-cooperBold text-4xl">
            {translate("people.profiles")}
          </p>
        </div>
        <Profiles />
      </Layout>
    </>
  );
};

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale)),
    },
  };
}

export default Team;
