Storybook showcase

Wheel

Used to present the benefits of AssoConnect on the Home page. To use it you have to use Wheel component as a container and insert 5 WheelItem

Parameters of Wheel (container)

mainTitle : main text content
ctaText : button text content
ctaLink : button link

Parameters of Wheel item (you must provide 5 items)

mainTitle, ctaText, ctaLink

title : text content of the item
animation : File name of the animation (this file must be in the folder `/common/animation/` of azure storage, in json format)

Examples

Comptabilité

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Communication

Fusce in orci vel justo maximus porttitor.

Site internet

Orci varius natoque penatibus et Curabitur

Membres

Et magnis dis parturient montes nascetur ridiculus

Collecte

Curabitur porta varius tempor

L'outil pour
tous vos besoins

<Wheel
          ctaText="Commencer gratuitement"
          ctaLink="/associations"
          mainTitle={
            <>
              L'outil pour
              <br />
              <Highlight>tous vos besoins</Highlight>
            </>
          }
        >
          <WheelItem title="Communication" animation="calculator">
            Lorem ipsum dolor sit amet, consectetur{' '}
            <Highlight>adipiscing elit.</Highlight>
          </WheelItem>
          <WheelItem title="test 2" animation="speaker">
            Fusce in orci vel justo maximus <Highlight>porttitor.</Highlight>
          </WheelItem>
          <WheelItem title="test 3" animation="teamwork">
            <Highlight>Orci varius natoque penatibus et</Highlight> Curabitur
          </WheelItem>
          <WheelItem title="test 4" animation="monitor">
            <Highlight>Et magnis dis parturient montes</Highlight> nascetur
            ridiculus
          </WheelItem>
          <WheelItem title="test 5" animation="credit-card">
            <Highlight>Curabitur</Highlight> porta varius tempor
          </WheelItem>
        </Wheel>


          <Wheel
          ctaText="Commencer gratuitement"
          ctaLink="/associations"
          mainTitle={
            <>
              L'outil pour
              <br />
              <Highlight>tous vos besoins</Highlight>
            </>
          }
        >
          <WheelItem title="Communication" animation="calculator">
            Lorem ipsum dolor sit amet, consectetur{' '}
            <Highlight>adipiscing elit.</Highlight>
          </WheelItem>
          <WheelItem title="test 2" animation="speaker">
            Fusce in orci vel justo maximus <Highlight>porttitor.</Highlight>
          </WheelItem>
          <WheelItem title="test 3" animation="teamwork">
            <Highlight>Orci varius natoque penatibus et</Highlight> Curabitur
          </WheelItem>
          <WheelItem title="test 4" animation="monitor">
            <Highlight>Et magnis dis parturient montes</Highlight> nascetur
            ridiculus
          </WheelItem>
          <WheelItem title="test 5" animation="credit-card">
            <Highlight>Curabitur</Highlight> porta varius tempor
          </WheelItem>
        </Wheel>