import React from "react";
import Head from "next/head";
import AppContext from "../../particles/contexts/app-context";
import AppTemplate from "../../templates/app";
import Footer from "../../organisms/footer";
import AboutUsHero from "../../organisms/about-us-hero";
import styles from "./OurPartners.module.scss";
import Header from "../../organisms/header";
import OurPartners from "../../organisms/our-partners";

const OurPartnersPage = ({ partners, appData }: any) => {
  return (
    <AppContext.Provider value={appData}>
      <AppTemplate
        header={<Header />}
        hero={
          <div className={styles.hero}>
            <AboutUsHero />
          </div>
        }
        footer={<Footer />}
      >
        <Head>
          <title>BASS</title>
        </Head>

        <main>
          <div className={styles.ourPartners}>
            <OurPartners data={partners} currentPage="/our-partners" />
          </div>
        </main>
      </AppTemplate>
    </AppContext.Provider>
  );
};

export default OurPartnersPage;
