templates/content/caseStudy.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %} 
  2. {% block body %}
  3. <div id="main-content" class="content">
  4.     <div class="section bottom-padding top-padding-4em">
  5.         <div class="inner position-relative">
  6.             <div class="case-study-details">
  7.                 <div class="logo-container">
  8.                     <img style="max-width: 225px; max-height: 100px" src="{{ caseStudy.getClientLogo() }}" />
  9.                 </div>
  10.                 <div>
  11.                     <h3>Project Details:</h3>
  12.                     <ul>
  13.                         <li><strong>Client:</strong> {{ caseStudy.getClientName()|raw }}</li>
  14.                         <li><strong>Industry:</strong> {{ caseStudy.getIndustry()|join(', ') }} </li>
  15.                         <li><strong>Solutions:</strong> {{ caseStudy.getSolutions()|join(', ') }} </li>
  16.                     </ul>
  17.                 </div>
  18.             </div>
  19.             <div class="row middle-lg middle-md">
  20.                 <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 intro-title-description">
  21.                     {# <h2 data-aos="fade-up">{{ caseStudy.getDescriptionTitle() }}</h2> #}
  22.                     <p data-aos="fade-up"> {{ caseStudy.getDescription() }} </p>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  28.     {% set keyFactItems = caseStudy.getKeyFacts() %}
  29.     {% if keyFactItems %}
  30.     {% set keyFactsMaxWidth = caseStudy.getkeyFactsMaxWidth() ? ' style=max-width:' ~ caseStudy.getkeyFactsMaxWidth() ~ 'px' : '' %}
  31.     <div class="section bottom-padding">
  32.         <div class="inner text-align-center{% if not caseStudy.getMaxWidth() %} maxwidth--1080{% endif %}"{{ keyFactsMaxWidth }}>
  33.             <h2 data-aos="fade-up" class="h2--lg">Client Key Facts</h2>
  34.             {% if keyFactItems %}
  35.             <div data-aos="fade-up" class="top-margin-2em red-backdrop">
  36.                 <div class="results-box row gutter-space--lg center-lg center-md center-sm center-xs bg-color--lightgray border-right-bottom{% if keyFactItems|length == 2 %} two-facts{% elseif keyFactItems|length == 3 %} three-facts{% endif %}" style="margin-left:auto;margin-right:auto;">
  37.                     {% for keyFactItem in keyFactItems %}
  38.                     <div data-aos="fade-up" class="col{% if keyFactItems|length == 2 %} col-lg-6 col-md-6{% elseif keyFactItems|length == 3 %} col-lg-4 col-md-4{% endif %} col-sm-6 col-xs-12">
  39.                         {% if keyFactItem["Icon"].getData() %}
  40.                         <img src="{{ keyFactItem["Icon"].getData() }}" style="max-height: 50px;margin:0 auto 10px;">
  41.                         {% endif %}
  42.                         {% if keyFactItem["Digit"].getData() %}
  43.                         <p class="large-number">{{ keyFactItem["Digit"].getData()|raw }}</p>
  44.                         {% endif %}
  45.                         <p class="text--lg auto-margins" style="max-width: 300px">
  46.                             <strong>{{ keyFactItem["Title"].getData()|raw }}</strong>
  47.                         </p>
  48.                     </div>
  49.                     {% endfor %}
  50.                 </div>
  51.             </div>
  52.             {% endif %}
  53.         </div>
  54.     </div>
  55.     {% endif %}
  57.     {% set vertAlignChallenge = caseStudy.getVerticalAlignment1() == 'top' ? '' : caseStudy.getVerticalAlignment1() == 'middle' ? ' middle-lg middle-md' : caseStudy.getVerticalAlignment1() == 'bottom' ? ' bottom-lg bottom-md' : '' %}
  58.     <div class="section bg-color--dark top-bottom-padding">
  59.         <div class="inner light">
  60.             <div class="row gutter-space--lg{{ vertAlignChallenge }} gutter-space--md">
  61.                 <div class="col col-lg-{% if caseStudy.getChallengeImage() %}6{% else %}7{% endif %} col-md-{% if caseStudy.getChallengeImage() %}6{% else %}7{% endif %} col-sm-12 col-xs-12 bottom-margin-2em-mobile">
  62.                     <h2 data-aos="fade-up" class="h2--lg">The Challenge</h2>
  63.                     <div data-aos="fade-up">
  64.                         {{ caseStudy.getChallenge() | raw }}
  65.                     </div>
  66.                 </div>
  67.                 {% if caseStudy.getChallengeImage() is not empty %}
  68.                 {% set imgClass = caseStudy.getPolaroid() ? 'full-width polaroid' : 'full-width' %}
  69.                 <div class="col col-lg-6 col-md-6 col-sm-12 col-xs-12">
  70.                     {{ caseStudy.getChallengeImage().thumbnail('width_500').html({
  71.                         'imgAttributes': {
  72.                           'class': imgClass,
  73.                           'data-aos': 'fade-up',
  74.                         }
  75.                     })|raw }}
  76.                 </div>
  77.                 {% endif %}
  78.             </div>
  79.         </div>
  80.     </div>
  82.     {% if caseStudy.getTestimonial() %}
  83.     <div class="section top-bottom-padding">
  84.         <div class="inner text-align-center">
  85.         {% if caseStudy.getAuthorPortrait() %}
  86.         <div data-aos="fade-up" class="author-portrait-container">
  87.             <img
  88.             src="{{ caseStudy.getAuthorPortrait() }}"
  89.             class="author-portrait"
  90.             />
  91.         </div>
  92.         {% endif %}
  93.         <div
  94.             data-aos="fade-up"
  95.             class="text--lg auto-margins bottom-margin-1em"
  96.             style="max-width: 850px; font-style: italic"
  97.         >
  98.             {{ caseStudy.getTestimonial() | raw }}
  99.         </div>
  100.         <p data-aos="fade-up">
  101.             {{ caseStudy.getAuthorName() }}<br />{{ caseStudy.getAuthorPosition() }}
  102.         </p>
  103.         </div>
  104.     </div>
  105.     {% endif %}
  107.     {% set vertAlign = caseStudy.getVerticalAlignment() == 'top' ? '' : caseStudy.getVerticalAlignment() == 'middle' ? ' middle-lg middle-md' : caseStudy.getVerticalAlignment() == 'bottom' ? ' bottom-lg bottom-md' : '' %}
  108.     <div class="section bg-color--lightgray top-bottom-padding">
  109.         <div class="inner">
  110.         <div class="row gutter-space--lg{{ vertAlign }} gutter-space--md reverse">
  111.             <div class="col col-lg-6 col-md-6 col-sm-12 col-xs-12 bottom-margin-2em-mobile">
  112.             <h2 data-aos="fade-up" class="h2--lg">Our Solution</h2>
  113.             <div data-aos="fade-up">
  114.                 {{ caseStudy.getSolution() | raw }}
  115.             </div>
  116.             </div>
  117.             {% if caseStudy.getSolutionImage() is not empty %}
  118.             {% set imgClass = caseStudy.getPolaroid1() ? 'full-width polaroid' : 'full-width' %}
  119.             <div class="col col-lg-6 col-md-6 col-sm-12 col-xs-12">
  120.             {% if caseStudy.getLightbox() %}
  121.             <a href="{{ caseStudy.getSolutionImage() }}" data-fslightbox="lightbox" data-type="image">
  122.             {% endif %}
  123.                 {{ caseStudy.getSolutionImage().thumbnail('width_500').html({
  124.                     'imgAttributes': {
  125.                     'class': imgClass,
  126.                     'data-aos': 'fade-up',
  127.                     }
  128.                 })|raw }}
  129.             {% if caseStudy.getLightbox() %}
  130.             </a>
  131.             {% endif %}
  132.             </div>
  133.             {% endif %}
  134.         </div>
  135.         </div>
  136.     </div>
  138.     {% if caseStudy.getSecondaryTestimonial() %} 
  139.     {% set bgColor = caseStudy.getSelect() == 'dark' ? ' bg-color--dark' : '' %}
  140.     <div class="section top-bottom-padding{{ bgColor }}">
  141.         <div class="inner text-align-center">
  142.             {% if caseStudy.getSecondaryAuthorPortrait() %}
  143.             <div data-aos="fade-up" class="author-portrait-container">
  144.                 <img
  145.                 src="{{ caseStudy.getSecondaryAuthorPortrait() }}"
  146.                 class="author-portrait"
  147.                 />
  148.             </div>
  149.             {% endif %}
  150.             <p
  151.                 data-aos="fade-up"
  152.                 class="text--lg auto-margins"
  153.                 style="max-width: 850px; font-style: italic"
  154.             >
  155.                 {{ caseStudy.getSecondaryTestimonial() }}
  156.             </p>
  157.             <p data-aos="fade-up">
  158.                 {{ caseStudy.getSecondaryAuthorName() }}<br />{{
  159.                 caseStudy.getSecondaryAuthorPosition()
  160.                 }}
  161.             </p>
  162.         </div>
  163.     </div>
  164.     {% endif %}
  166.     {% set maxWidth = caseStudy.getMaxWidth() ? ' style=max-width:' ~ caseStudy.getMaxWidth() ~ 'px' : '' %}
  167.     <div class="section top-bottom-padding the-results">
  168.         <div class="inner text-align-center{% if not caseStudy.getMaxWidth() %} maxwidth--1080{% endif %}"{{ maxWidth }}>
  169.         <h2 data-aos="fade-up" class="h2--lg">The Results</h2>
  170.         <div data-aos="fade-up" class="auto-margins">
  171.             {{ caseStudy.getResults() | raw }}
  172.         </div>
  173.         {% set featureBlockItems = caseStudy.getFeatures() %}
  174.         {% if featureBlockItems %}
  175.         <div data-aos="fade-up" class="top-margin-2em red-backdrop{% if caseStudy.getClientLink() %} bottom-margin-1em{% endif %}">
  176.             <div class="results-box row gutter-space--lg center-lg center-md center-sm center-xs bg-color--lightgray border-right-bottom" style="margin-left:auto;margin-right:auto;">
  177.                 {% for featureBlockItem in featureBlockItems %}
  178.                 <div data-aos="fade-up" class="col{% if featureBlockItems|length == 2 %} col-lg-6 col-md-6{% elseif featureBlockItems|length == 3 %} col-lg-4 col-md-4{% endif %} col-sm-6 col-xs-12">
  179.                 {% if featureBlockItem["Icon"].getData() %}
  180.                 <img src="{{ featureBlockItem["Icon"].getData() }}" style="max-height: 50px;margin:0 auto 10px;">
  181.                 {% endif %}
  182.                 {% if featureBlockItem["Digit"].getData() %}
  183.                     <p class="large-number">{{ featureBlockItem["Digit"].getData()|raw }}</p>
  184.                 {% endif %}
  185.                 <p class="text--lg auto-margins" style="max-width: 300px">
  186.                     <strong>{{ featureBlockItem["Title"].getData()|raw }}</strong>
  187.                 </p>
  188.                 </div>
  189.                 {% endfor %}
  190.             </div>
  191.         </div>
  192.         {% endif %}
  193.         {% if caseStudy.getClientLink() %}
  194.         {% set buttonLabel = caseStudy.getButtonLabel() ? caseStudy.getButtonLabel() : 'Visit Website' %}
  195.         <a data-aos="fade-up" class="btn dark" href="{{ caseStudy.getClientLink() }}" target="_blank">{{ buttonLabel }}</a>
  196.         {% endif %}
  197.         </div>
  198.     </div>
  200.     {% include 'content/includes/case-study-carousel.html.twig' %}
  202.     <section class="section top-bottom-padding bg-color--red light">
  203.         <div class="inner text-align-center">
  204.             <div class="row gutter-space--md center-lg center-md center-sm center-xs">
  205.                 <div class="cta-display-flex no-bottom-margin col-lg-12 col-md-12 col-sm-12 col-xs-12">
  206.                     <div data-aos="fade-up">
  207.                         <h1 data-aos="fade-up" class="h2--lg aos-init aos-animate">Ready to get started?</h1>
  208.                     </div>
  209.                     <div data-aos="fade-up">
  210.                         <a href="/contact" class="btn dark">Talk to an expert</a>
  211.                     </div>
  212.                 </div>
  213.             </div>
  214.         </div>
  215.     </section>
  216. </div>
  217. {% endblock %}