import React from 'react';

const TitleSection = ({ style }) => {
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      gap: '4px',
      padding: '20px',
      width: '100%',
      maxWidth: '1440px',
      boxSizing: 'border-box',
      ...style
    }}>
      <span style={{
        fontFamily: 'DM Sans',
        fontSize: '16px',
        fontWeight: 700,
        lineHeight: '16px',
        textAlign: 'center',
        color: '#3258b6',
        textTransform: 'uppercase',
        width: '100%'
      }}>
        Comment ça marche ?
      </span>
      <h1 style={{
        fontFamily: 'DM Sans',
        fontSize: '40px',
        fontWeight: 700,
        lineHeight: '120%',
        textAlign: 'center',
        color: '#16274f',
        margin: 0,
        width: '100%'
      }}>
        De la complexité à la simplicité.
      </h1>
    </div>
  );
};

TitleSection.defaultProps = {
  style: {}
};

export default TitleSection;

