import React from 'react';
import Card_Title from './Card_Title';
import ListCard from './ListCard';
import ButtonText from './ButtonText';

const WhyUsLayout = () => {
  return (
    <div className='WhyUsLayout_block1' >
      <div style={{ flexGrow: 1 }}>
        <Card_Title />
      </div>
      <div className='WhyUsLayout_block2'>
        <ListCard imageUrl="/img/editeur_fr_drapeau.png" title="Editeur Français" buttonText="Découvrir" />
        <ListCard imageUrl="/img/qualiopi.png" title="Accompagnement à la certification" buttonText="Découvrir" />
        <ListCard imageUrl="/img/solution_complete.png" title="Solution complète pour gérer votre OF" buttonText="Découvrir" />
        <ListCard imageUrl="/img/sol_moins_chere.png" title="Solution la moins chère du marché" buttonText="Découvrir" />
      </div>
      <div style={{ flexGrow: 1, display: 'flex', justifyContent: 'center' }}
       onClick={() => {
        window.open(
          "/fonctionnalites/",
          '_self'
      );
      }}
      >
        <ButtonText text="Découvrir nos fonctionnalités" />
      </div>
    </div>
  );
};

export default WhyUsLayout;

