templates/content/solution.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %} 
  2. {% block body %}
  3. {% set maxWidth = solution.getMaxWidth() ? ' style=max-width:' ~ solution.getMaxWidth()|raw ~ 'px;' : '' %}
  4. {% set imageMaxWidth = solution.getImageMaxWidth() ? ' style=max-width:' ~ solution.getImageMaxWidth()|raw ~ 'px;' : '' %}
  5. {% set numOfColumns = solution.getNumColumns() %}
  6. {% set defaultSmXsColWidth = ' col-sm-12 col-xs-12' %}
  7. {% switch numOfColumns %}
  8.     {% case "1" %}
  9.     {% set numOfColumns = ' col-lg-12 col-md-12 ' %}
  10.     {% case "2" %}
  11.     {% set numOfColumns = ' col-lg-6 col-md-6 ' %}
  12.     {% case "3" %}
  13.     {% set numOfColumns = ' col-lg-4 col-md-4 ' %}
  14.     {% case "4" %}
  15.     {% set numOfColumns = ' col-lg-3 col-md-3 ' %}
  16.     {% case "5" %}
  17.     {% set numOfColumns = ' col-lg-1_5 col-md-1_5 ' %}
  18.     {% case "6" %}
  19.     {% set numOfColumns = ' col-lg-2 col-md-2 ' %}
  20.     {% default %}
  21.     {% set numOfColumns = ' col-lg-4 col-md-4 ' %}
  22. {% endswitch %}
  24. {% set benefitsTitle = solution.getBenefitsTitle() ? solution.getBenefitsTitle() : 'The Benefits' %}
  25. <div id="main-content" class="content">
  26.     <div class="section top-bottom-padding">
  27.         <div class="inner position-relative">
  28.             <div class="row gutter-space--lg">
  29.                 {% if solution.getContent() %}
  30.                 {% set colRatio = solution.getColumnRatio() %}
  31.                 {% switch colRatio %}
  32.                     {% case "half-half" %}
  33.                     {% set colRatioLeft = ' col-lg-6 col-md-6' %}
  35.                     {% case "two-fifth-three-fifth" %}
  36.                     {% set colRatioLeft = ' col-lg-5 col-md-5' %}
  38.                     {% case "one-third-two-third" %}
  39.                     {% set colRatioLeft = ' col-lg-4 col-md-4' %}
  41.                     {% case "one-quarter-three-quarter" %}
  42.                     {% set colRatioLeft = ' col-lg-3 col-md-3' %}
  44.                     {% case "three-fifth-two-fifth" %}
  45.                     {% set colRatioLeft = ' col-lg-7 col-md-7' %}
  47.                     {% case "two-third-one-third" %}
  48.                     {% set colRatioLeft = ' col-lg-8 col-md-8' %}
  50.                     {% case "three-quarter-one-quarter" %}
  51.                     {% set colRatioLeft = ' col-lg-9 col-md-9' %}
  53.                     {% default %}
  54.                     {% set colRatioLeft = ' col-lg-12 col-md-12' %}
  55.                 {% endswitch %}
  56.                 <div class="col{{ colRatioLeft }}{{ defaultSmXsColWidth }}"{{ maxWidth }}>
  57.                     {{ solution.getContent()|raw }}
  58.                     {% if solution.getLink() %}
  59.                     <a class="btn dark" href="{% if solution.getLink().path and solution.getLink().anchor %}{{ solution.getLink().path|lower|join('-') ~ '#' ~ solution.getLink().anchor }}{% elseif solution.getLink().path %}{{ solution.getLink().path|lower|join('-') }}{% elseif solution.getLink().anchor %}{{ '#' ~ solution.getLink().anchor }}{% endif %}"{% if solution.getLink().target %}{{' target=' ~ solution.getLink().target }}{% endif %}>{{ solution.getLink().text }}</a>
  60.                     {% endif %}
  61.                 </div>
  62.                 {% endif %}
  63.                 {% if solution.getImage() is not empty %}
  64.                 {% set colRatio = solution.getColumnRatio() %}
  65.                 {% switch colRatio %}
  66.                     {% case "half-half" %}
  67.                     {% set colRatioRight = ' col-lg-6 col-md-6' %}
  69.                     {% case "two-fifth-three-fifth" %}
  70.                     {% set colRatioRight = ' col-lg-7 col-md-7' %}
  72.                     {% case "one-third-two-third" %}
  73.                     {% set colRatioRight = ' col-lg-8 col-md-8' %}
  75.                     {% case "one-quarter-three-quarter" %}
  76.                     {% set colRatioRight = ' col-lg-9 col-md-9' %}
  78.                     {% case "three-fifth-two-fifth" %}
  79.                     {% set colRatioRight = ' col-lg-5 col-md-5' %}
  81.                     {% case "two-third-one-third" %}
  82.                     {% set colRatioRight = ' col-lg-4 col-md-4' %}
  84.                     {% case "three-quarter-one-quarter" %}
  85.                     {% set colRatioRight = ' col-lg-3 col-md-3' %}
  87.                     {% default %}
  88.                     {% set colRatioRight = ' col-lg-12 col-md-12' %}
  89.                 {% endswitch %}
  90.                 <div class="col{{ colRatioRight }}{{ defaultSmXsColWidth }}">
  91.                     <img class="full-width" data-aos="fade-up" src="{{ solution.getImage() }}"{{ imageMaxWidth }} />
  92.                 </div>
  93.                 {% endif %}
  94.             </div>
  95.         </div>
  96.     </div>
  98.     {% set benefitItems = solution.getBenefits() %}
  99.     {% if benefitItems %}
  100.     <section class="section bg-color--lightgray">
  101.         <div class="inner top-padding" style="padding-bottom: 2em;">
  102.             <h1 class="bottom-margin-2em{% if solution.getCenteredTitle() %} text-align-center{% endif %}">{{ benefitsTitle }}</h1>
  103.             <div class="row gutter-space--lg">
  104.                 {% for benefitItem in benefitItems %}
  105.                 <div data-aos="fade-up" class="benefits-container col{{ numOfColumns }} col-sm-{% if solution.getNumColumns() == '1' %}12{% else %}6{% endif %} col-xs-12">
  106.                     <div class="stylized-header">
  107.                         
  108.                         {% if benefitItem["Icon"] %}
  109.                         {% set itemAltData = benefitItem["Icon"].data.metadata[0] is defined and benefitItem["Icon"].data.metadata[0].data is defined ? benefitItem["Icon"].data.metadata[0].data : '' %}
  110.                         {% set iconPadding = benefitItem["IconPadding"] is defined and benefitItem["IconPadding"].getData() is not empty ? 'style=padding:' ~ benefitItem["IconPadding"].getData()|raw ~ 'px;' : '' %}
  111.                         <div class="icon-container"{{ iconPadding }}>
  112.                             <img{% if itemAltData %} alt="{{ itemAltData }}"{% endif %} src="{{ benefitItem["Icon"].getData() }}" style="max-height: 50px;margin:0 auto 10px;">
  113.                         </div>
  114.                         {% endif %}
  115.                         <p class="text--lg text-align-center">
  116.                             {{ benefitItem["Title"].getData()|raw }}
  117.                         </p>
  119.                     </div>
  120.                 </div>
  121.                 {% endfor %}
  122.                 </div>
  123.             </div>
  124.         </div>
  125.     </section>
  126.     {% endif %}
  128.     <section class="section top-bottom-padding bg-color--red light">
  129.         <div class="inner text-align-center">
  130.             <div class="row gutter-space--md center-lg center-md center-sm center-xs">
  131.                 <div class="cta-display-flex no-bottom-margin col-lg-12 col-md-12 col-sm-12 col-xs-12">
  132.                     <div data-aos="fade-up">
  133.                         <h1 data-aos="fade-up" class="h2--lg aos-init aos-animate">Ready to get started?</h1>
  134.                     </div>
  135.                     <div data-aos="fade-up">
  136.                         <a href="{% if solution.getShowForm() %}#contact{% else %}/contact{% endif %}" class="btn btn--dark">Talk to an expert</a>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.         </div>
  141.     </section>
  142.     {% if solution.getShowForm() %}
  143.     {% include 'content/includes/footer-form.html.twig' %}
  144.     {% endif %}
  145. </div>
  146. {% endblock %}