templates/app/pages/_softwares-homepage.html.twig line 1

Open in your IDE?
  1. {% import 'app/_inc/macros.html.twig' as m %}
  3. <section id="software_homepage" class="software">
  4.     <div class="ct">
  5.         <h2 class="h2">{{ 'Create and tell stories, simply.'|trans|raw }}</h2>
  6.         <div class="swiper" data-swiper="large">
  7.             {{ m.SwiperPagination('large') }}
  8.             <div class="swiper-wrapper">
  10.                 {# La suite                #}
  11.                 <div class="swiper-slide">
  12.                     <div class="content_software" data-a-up>
  13.                         <div data-a-up class="large bloc-video">
  14.                             <div class="swiper" data-swiper="software">
  15.                                 <div class="swiper-wrapper">
  16.                                     {% if app.request.locale == 'fr' %}
  17.                                         {% for img in ['h_fr_plan_de_travail.webp', 'h_fr_tag.webp', 'h_fr_onglets.webp'] %}
  18.                                             <div class="swiper-slide">
  19.                                                 {{ m.imgSource(
  20.                                                     asset('img/homepage/900px/'~img),
  21.                                                     "La Suite",
  22.                                                     {"(min-width: 901px)":asset('img/homepage/900px/'~img),
  23.                                                         "(max-width: 900px)":asset('img/homepage/500px/'~img)},
  24.                                                     true,
  25.                                                     null,
  26.                                                     null,
  27.                                                     "100%"
  28.                                                 ) }}
  29.                                             </div>
  30.                                         {% endfor %}
  31.                                     {% else %}
  32.                                         {% for img in ['h_eng_plan_de_travail.webp', 'h_eng_tag.webp', 'h_eng_onglets.webp'] %}
  33.                                             <div class="swiper-slide">
  34.                                                 {{ m.imgSource(
  35.                                                     asset('img/homepage/900px/'~img),
  36.                                                     "La Suite",
  37.                                                     {"(min-width: 901px)":asset('img/homepage/900px/'~img),
  38.                                                         "(max-width: 900px)":asset('img/homepage/500px/'~img)},
  39.                                                     true,
  40.                                                     null,
  41.                                                     null,
  42.                                                     "100%"
  43.                                                 ) }}
  44.                                             </div>
  45.                                         {% endfor %}
  46.                                     {% endif %}
  47.                                 </div>
  48.                             </div>
  49.                         </div>
  50.                         <div class="bloc-description">
  51.                             <h3 class="h4">{{ 'Merge creation and narration.'|trans|raw }}</h3>
  52.                             <ul>
  53.                                 <li class="card_icon">
  54.                                     <div>
  55.                                         {{ m.icon('home/software_1') }}
  56.                                         <h4><strong>{{ 'Organize and navigate easily'|trans|raw }}</strong></h4>
  57.                                     </div>
  58.                                     <p>{{ 'Simplify the management of your content with categories and visually distinct tags.'|trans|raw }}</p>
  59.                                 </li>
  60.                                 <li class="card_icon">
  61.                                     <div>
  62.                                         {{ m.icon('home/software_2') }}
  63.                                         <h4><strong>{{ 'Your creative space, reinvented'|trans|raw }}</strong></h4>
  64.                                     </div>
  65.                                     <p>{{ 'Access all your information on a single screen with a tabbed workspace.'|trans|raw }}</p>
  66.                                 </li>
  67.                                 <li class="card_icon">
  68.                                     <div>
  69.                                         {{ m.icon('home/software_3') }}
  70.                                         <h4><strong>{{ 'Multi-platform compatibility'|trans|raw }}</strong></h4>
  71.                                     </div>
  72.                                     <p>{{ 'Windows, Apple or Linux: our suite adapts to your environment.'|trans|raw }}</p>
  73.                                 </li>
  74.                             </ul>
  75.                             <div class="icons_system">
  76.                                 {{ m.icon('home/windows') }}
  77.                                 {{ m.icon('home/mac') }}
  78.                                 {{ m.icon('home/linux') }}
  79.                             </div>
  80.                             <div class="bottom">
  81.                                 <div>
  82.                                     {% if app.request.locale == 'fr' %}
  83.                                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta-secondary'}) }}
  84.                                     {% else %}
  85.                                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta-secondary'}) }}
  86.                                     {% endif %}
  87.                                 </div>
  88.                                 <p class="small">{{ 'Software available in <strong>English</strong> and <strong>French</strong>'|trans|raw }}</p>
  89.                             </div>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.                 {# Lore                #}
  94.                 <div class="swiper-slide">
  95.                     <div class="content_software" data-a-up>
  96.                         <div data-a-up class="large bloc-video">
  97.                             <div class="swiper" data-swiper="software">
  98.                                 <div class="swiper-wrapper">
  99.                                     {% if app.request.locale == 'fr' %}
  100.                                         {% for img in ['h_fr_template.webp', 'h_fr_rune.webp', 'h_fr_arbo.webp'] %}
  101.                                             <div class="swiper-slide">
  102.                                                 {{ m.imgSource(
  103.                                                     asset('img/homepage/900px/'~img),
  104.                                                     "Lore",
  105.                                                     {"(min-width: 901px)":asset('img/homepage/900px/'~img),
  106.                                                         "(max-width: 900px)":asset('img/homepage/500px/'~img)},
  107.                                                     true,
  108.                                                     null,
  109.                                                     null,
  110.                                                     "100%"
  111.                                                 ) }}
  112.                                             </div>
  113.                                         {% endfor %}
  114.                                     {% else %}
  115.                                         {% for img in ['h_eng_template.webp', 'h_eng_rune.webp', 'h_eng_arbo.webp'] %}
  116.                                             <div class="swiper-slide">
  117.                                                 {{ m.imgSource(
  118.                                                     asset('img/homepage/900px/'~img),
  119.                                                     "Lore",
  120.                                                     {"(min-width: 901px)":asset('img/homepage/900px/'~img),
  121.                                                         "(max-width: 900px)":asset('img/homepage/500px/'~img)},
  122.                                                     true,
  123.                                                     null,
  124.                                                     null,
  125.                                                     "100%"
  126.                                                 ) }}
  127.                                             </div>
  128.                                         {% endfor %}
  129.                                     {% endif %}
  130.                                 </div>
  131.                             </div>
  132.                         </div>
  133.                         <div class="bloc-description">
  134.                             <h3 class="h4">{{ 'Create rich, detailed universes'|trans|raw }}</h3>
  135.                             <ul>
  136.                                 <li class="card_icon">
  137.                                     <div>
  138.                                         {{ m.icon('home/software_4') }}
  139.                                         <h4><strong>{{ 'Centralize and save time'|trans|raw }}</strong></h4>
  140.                                     </div>
  141.                                     <p>{{ 'Create and organize your worlds intuitively with customized templates.'|trans|raw }}</p>
  142.                                 </li>
  143.                                 <li class="card_icon">
  144.                                     <div>
  145.                                         {{ m.icon('home/software_5') }}
  146.                                         <h4><strong>{{ 'Express your creativity without limits'|trans|raw }}</strong></h4>
  147.                                     </div>
  148.                                     <p>{{ 'Design rich, detailed game universes and establish a coherent framework for your players.'|trans|raw }}</p>
  149.                                 </li>
  150.                                 <li class="card_icon">
  151.                                     <div>
  152.                                         {{ m.icon('home/software_6') }}
  153.                                         <h4><strong>{{ 'Automate and simplify' }}</strong></h4>
  154.                                     </div>
  155.                                     <p>{{ 'Automate blocks to quickly fill in and maintain consistency across pages.'|trans|raw }}</p>
  156.                                 </li>
  157.                             </ul>
  158.                             <div class="icons_system">
  159.                                 {{ m.icon('home/windows') }}
  160.                                 {{ m.icon('home/mac') }}
  161.                                 {{ m.icon('home/linux') }}
  162.                             </div>
  163.                             <div class="bottom">
  164.                                 <div>
  165.                                     {{ m.btn('icons-ollam/contact', 'Learn more about Lore', path('software-lore'), {class:'btn'}) }}
  166.                                 </div>
  167.                                 <p class="small">{{ 'Software available in <strong>English</strong> and <strong>French</strong>'|trans|raw }}</p>
  168.                             </div>
  169.                         </div>
  170.                     </div>
  171.                 </div>
  172.                 {# Tome                #}
  173.                 <div class="swiper-slide">
  174.                     <div class="content_software" data-a-up>
  175.                         <div data-a-up class="large bloc-video">
  176.                             <div class="swiper" data-swiper="software">
  177.                                 <div class="swiper-wrapper">
  178.                                     {% if app.request.locale == 'fr' %}
  179.                                         {% for img in ['h_fr_choixjoueurs.webp', 'h_fr_connexionloretome.webp', 'h_fr_arbononlineaire.webp'] %}
  180.                                             <div class="swiper-slide">
  181.                                                 {{ m.imgSource(
  182.                                                     asset('img/homepage/900px/'~img),
  183.                                                     "Tome",
  184.                                                     {"(min-width: 901px)":asset('img/homepage/900px/'~img),
  185.                                                         "(max-width: 900px)":asset('img/homepage/500px/'~img)},
  186.                                                     true,
  187.                                                     null,
  188.                                                     null,
  189.                                                     "100%"
  190.                                                 ) }}
  191.                                             </div>
  192.                                         {% endfor %}
  193.                                     {% else %}
  194.                                         {% for img in ['h_eng_choixjoueurs.webp', 'h_eng_connexionloretome.webp', 'h_eng_arbononlineaire.webp'] %}
  195.                                             <div class="swiper-slide">
  196.                                                 {{ m.imgSource(
  197.                                                     asset('img/homepage/900px/'~img),
  198.                                                     "Tome",
  199.                                                     {"(min-width: 901px)":asset('img/homepage/900px/'~img),
  200.                                                         "(max-width: 900px)":asset('img/homepage/500px/'~img)},
  201.                                                     true,
  202.                                                     null,
  203.                                                     null,
  204.                                                     "100%"
  205.                                                 ) }}
  206.                                             </div>
  207.                                         {% endfor %}
  208.                                     {% endif %}
  209.                                 </div>
  210.                             </div>
  211.                         </div>
  212.                         <div class="bloc-description">
  213.                             <h3 class="h4">{{ 'Tell memorable stories'|trans|raw }}</h3>
  214.                             <ul>
  215.                                 <li class="card_icon">
  216.                                     <div>
  217.                                         {{ m.icon('home/software_7') }}
  218.                                         <h4><strong>{{ 'Track player choices'|trans|raw }}</strong></h4>
  219.                                     </div>
  220.                                     <p>{{ 'Keep track of your players’ decisions in real-time to enrich your story.'|trans|raw }}</p>
  221.                                 </li>
  222.                                 <li class="card_icon">
  223.                                     <div>
  224.                                         {{ m.icon('home/software_8') }}
  225.                                         <h4><strong>{{ 'World-story connection'|trans|raw }}</strong></h4>
  226.                                     </div>
  227.                                     <p>{{ 'Tell stories based on the universe you have created.'|trans|raw }}</p>
  228.                                 </li>
  229.                                 <li class="card_icon">
  230.                                     <div>
  231.                                         {{ m.icon('home/software_9') }}
  232.                                         <h4><strong>{{ 'Non-linear scenarios'|trans|raw }}</strong></h4>
  233.                                     </div>
  234.                                     <p>{{ 'Offer challenges and choices for an enriching gaming experience.'|trans|raw }}</p>
  235.                                 </li>
  236.                             </ul>
  237.                             <div class="icons_system">
  238.                                 {{ m.icon('home/windows') }}
  239.                                 {{ m.icon('home/mac') }}
  240.                                 {{ m.icon('home/linux') }}
  241.                             </div>
  242.                             <div class="bottom">
  243.                                 <div>
  244.                                     {{ m.btn('icons-ollam/contact', 'Learn more about Tome', path('software-tome'), {class:'btn'}) }}
  245.                                 </div>
  246.                                 <p class="small">{{ 'Software available in <strong>English</strong> and <strong>French</strong>'|trans|raw }}</p>
  247.                             </div>
  248.                         </div>
  249.                     </div>
  250.                 </div>
  251.             </div>
  252.         </div>
  253.     </div>
  254. </section>