index.js

  
 import React from 'react';
import clsx from 'clsx';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Image from '@theme/IdealImage';
import styles from './index.module.css';
import useBaseUrl from "@docusaurus/useBaseUrl";
import TestimoniesCarousel from '@site/src/components/TestimoniesCarousel';
import { TeamSlider } from '@site/src/components/TeamComponent';

const pageTitle = "Home"

function HomepageHeader() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <header className={clsx('hero hero--primary', styles.heroBanner)}>
      <div className={'container '+ styles.containerIndex}>
        <Image img={useBaseUrl("img/artisanBackground.jpg")} className={styles.background_image} />
        <h1 className={styles.hero__title}> Artisans DevOps </h1>
        <p className={styles.hero__subtitle}>{siteConfig.tagline}</p>
        <div className={styles.introCard}>
          <div className={clsx("text--center", styles.headerIcon)}>
            <Image img={useBaseUrl("img/collaborate.png")} />
          </div>
          <div className="text--center padding-horiz--md">
            <h2> Notre philosophie </h2>
            <p> Notre expérience nous a prouvé que l’amélioration continue et la collaboration entre les équipes sont essentielles pour que les applications soient robustes et résilientes. </p>
            <p> Nous sommes convaincus que les principes émancipateurs du mouvement des logiciels libres sont un des leviers pour atteindre la souveraineté et l’autonomie numérique. </p>
          </div>
        </div>
      </div>
    </header>
  );
}

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`${pageTitle} - ${siteConfig.title}`}
      description="Description will go into a meta tag in <head />">
      <HomepageHeader />
      <main>
        <TeamSlider />
        <TestimoniesCarousel/>
      </main>
    </Layout>
  );
}