import Image from "next/image";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Layout from "../components/layout";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

const Location = () => {
  const { t: translate } = useTranslation();
  return (
    <>
      <Layout title="ANIMATION" subtitle="Animación">
        <main className="layout flex justify-center py-10">
          <button className="group  relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-black  px-8 py-3 text-base font-medium  text-white transition duration-300 ease-out ">
            <span className="absolute inset-0 bg-gradient-to-r from-orange-400 via-pink-500 to-purple-500 opacity-0 transition duration-300 ease-out group-hover:opacity-100 "></span>
            <span className="relative">Lets get started</span>
          </button>
        </main>
      </Layout>
    </>
  );
};

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

export default Location;
