templates/app/pages/software-tome.html.twig line 1

Open in your IDE?
  1. {% import 'app/_inc/macros.html.twig' as m %}
  2. {% extends 'base.html.twig' %}
  3. {% block css %}
  4.     {{ encore_entry_link_tags('app-software-css') }}
  5.     {{ encore_entry_link_tags('app-swiper-css') }}
  6. {% endblock %}
  7. {% block js %}
  8.     {{ encore_entry_script_tags('app-swiper-js') }}
  9. {% endblock %}
  10. {% block content %}
  11.     <div id="page_software" class="tome">
  13.         <section class="intro">
  14.             <div data-a-up class="ct">
  15.                 {{ m.Breadcrumb('tome', {link:{
  16.                     0:['tome']
  17.                 }}) }}
  18.                 <div class="title_page">
  19.                     <h2 class="h3">{{"Telling memorable stories"|trans|raw}}</h2>
  20.                     <h3>{{ 'Whether you are an experienced Game Master or an aspiring storyteller, you have everything you need to create unforgettable adventures.'|trans|raw }}</h3>
  21.                 </div>
  22.                 <div class="links">
  23.                     {% if app.request.locale == 'fr' %}
  24.                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }}
  25.                     {% else %}
  26.                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }}
  27.                     {% endif %}
  28.                     <button title="{{ 'Learn more'|trans|raw }}" class="btn" data-scroll="#learnmore">
  29.                         {{ m.icon('icons-ollam/contact') }}
  30.                         <span>{{ "Learn more"|trans|raw }}</span>
  31.                     </button>
  32.                 </div>
  33.                 <div class="intro_softwares breathing">
  34.                     {% if app.request.locale == 'fr' %}
  35.                         {{ m.img(asset('img/software/FR/tome/MémoFR.png'), {width:1250, height:670}) }}
  36.                     {% else %}
  37.                         {{ m.img(asset('img/software/EN/tome/MémoEN.png'), {width:1250, height:670}) }}
  38.                     {% endif %}
  39.                 </div>
  40.             </div>
  41.             <div class="night">
  42.                 {% for i in 1..20 %}
  43.                     <div class="star"></div>
  44.                 {% endfor %}
  45.             </div>
  46.             <div class="bg white-forest">
  47.                 <picture>
  48.                     <source srcset="{{ asset('img/white-tree.webp') }}" media="(min-width: 0px)"/>
  49.                     <img fetchpriority="high" src="{{ asset('img/white-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707">
  50.                 </picture>
  51.             </div>
  52.             <div class="bg smoke">
  53.                 <picture>
  54.                     <source srcset="{{ asset('img/bg-smoke.webp') }}" media="(min-width: 0px)"/>
  55.                     <img fetchpriority="high" src="{{ asset('img/bg-smoke.webp') }}" alt="Image Amsel Suite" width="2600" height="650">
  56.                 </picture>
  57.             </div>
  58.             <div class="bg black-forest">
  59.                 <picture>
  60.                     <source srcset="{{ asset('img/black-tree.webp') }}" media="(min-width: 0px)"/>
  61.                     <img fetchpriority="high" src="{{ asset('img/black-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707">
  62.                 </picture>
  63.             </div>
  64.         </section>
  66.         <section id="learnmore" class="software">
  67.             <div class="ct">
  68.                 <div data-a-up class="bloc-text-media right breathing">
  69.                     {% if app.request.locale == 'fr' %}
  70.                         {{ m.img(asset('img/software/FR/tome/Scène1FR.png'), {width:1250, height:670}) }}
  71.                     {% else %}
  72.                         {{ m.img(asset('img/software/EN/tome/Scène1EN.png'), {width:1250, height:670}) }}
  73.                     {% endif %}
  74.                     <div class="bloc-text">
  75.                         <h2 class="h3">{{ "Organize"|trans|raw }}</h2>
  76.                         <h3 class="h4">{{ "Non-linear stories"|trans|raw }}</h3>
  77.                         <p>{{ "<strong>Offer your players a dynamic and interactive gaming experience</strong>. TOME allows you to create narratives with multiple branches, offering various challenges and choices. <strong>Adapt to players' decisions in real-time</strong> to make each session unique and memorable."|trans|raw }}</p>
  78.                     </div>
  79.                 </div>
  80.                 <div data-a-up class="bloc-text-media breathing">
  81.                     {% if app.request.locale == 'fr' %}
  82.                         {{ m.img(asset('img/software/FR/tome/TMapsFR.png'), {width:1250, height:670}) }}
  83.                     {% else %}
  84.                         {{ m.img(asset('img/software/EN/tome/TMapsEN.png'), {width:1250, height:670}) }}
  85.                     {% endif %}
  86.                     <div class="bloc-text">
  87.                         <h2 class="h3">{{ "Navigate"|trans|raw }}</h2>
  88.                         <h3 class="h4">{{ "Situational awareness"|trans|raw }}</h3>
  89.                         <p>{{ "Thanks to our <strong>unique mapping system</strong>, let your players explore without getting lost in your notes. <strong>Identify at once glance</strong> what you should describe, when, and why: what is visible, audible, discoverable, and more…"|trans|raw }}</p>
  90.                     </div>
  91.                 </div>
  92.                 <div data-a-up class="bloc-text-media right breathing">
  93.                     {% if app.request.locale == 'fr' %}
  94.                         {{ m.img(asset('img/software/FR/tome/ChoixFR.png'), {width:1250, height:670}) }}
  95.                     {% else %}
  96.                         {{ m.img(asset('img/software/EN/tome/ChoixEN.png'), {width:1250, height:670}) }}
  97.                     {% endif %}
  98.                     <div class="bloc-text">
  99.                         <h2 class="h3">{{ "Manage"|trans|raw }}</h2>
  100.                         <h3 class="h4">{{ "Tracking player choices"|trans|raw }}</h3>
  101.                         <p>{{ "<strong>Record and leverage your players' decisions</strong> to enrich your story. Remember who did what, even months later, exactly when you need to remember it. <strong>Create more coherent and personalized stories</strong> based on players' actions and preferences thanks to our storytelling software."|trans|raw }}</p>
  102.                     </div>
  103.                 </div>
  104.                 <div data-a-up class="bloc-text-media breathing">
  105.                     {% if app.request.locale == 'fr' %}
  106.                         {{ m.img(asset('img/software/FR/tome/NotesFR.png'), {width:1250, height:670}) }}
  107.                     {% else %}
  108.                         {{ m.img(asset('img/software/EN/tome/NotesEN.png'), {width:1250, height:670}) }}
  109.                     {% endif %}
  110.                     <div class="bloc-text">
  111.                         <h2 class="h3">{{ "Improvise"|trans|raw }}</h2>
  112.                         <h3 class="h4">{{ "It never goes according to plan…"|trans|raw }}</h3>
  113.                         <p>{{ "When your players do the unexpected, send yourself notes to remember what happened. Then <strong>place these notes within your narrative</strong>, to remember them when they're most needed. <strong>Make sense of the unpredictable and adapt to it all</strong>."|trans|raw }}</p>
  114.                     </div>
  115.                 </div>
  116.                 <div data-a-up class="bloc-text-media right breathing">
  117.                     {% if app.request.locale == 'fr' %}
  118.                         {{ m.img(asset('img/software/FR/tome/CustomiFR.png'), {width:1250, height:670}) }}
  119.                     {% else %}
  120.                         {{ m.img(asset('img/software/EN/tome/CustomiEN.png'), {width:1250, height:670}) }}
  121.                     {% endif %}
  122.                     <div class="bloc-text">
  123.                         <h2 class="h3">{{ "Customize"|trans|raw }}</h2>
  124.                         <h3 class="h4">{{ "Know everything at a glance"|trans|raw }}</h3>
  125.                         <p>{{ "With a visual tagging system, colored stickers, and fully-customizable frames, <strong>everything you write has its own colors and shapes</strong>, and you know exactly where you are at, every time."|trans|raw }}</p>
  126.                     </div>
  127.                 </div>
  128.                 <div data-a-up class="bloc-text-media breathing">
  129.                     {% if app.request.locale == 'fr' %}
  130.                         {{ m.img(asset('img/software/FR/tome/Connect1FR.png'), {width:1250, height:670}) }}
  131.                     {% else %}
  132.                         {{ m.img(asset('img/software/EN/tome/Connect1EN.png'), {width:1250, height:670}) }}
  133.                     {% endif %}
  134.                     <div class="bloc-text">
  135.                         <h2 class="h3">{{ "Connect"|trans|raw }}</h2>
  136.                         <h3 class="h4">{{ "World-Story Connection"|trans|raw }}</h3>
  137.                         <p>{{ "<strong>Create captivating stories</strong> from your imaginary worlds. Easily integrate your worlds created in Lore directly into Tome. <strong>Weave rich and coherent narratives</strong> using your locations, characters, and events."|trans|raw }}</p>
  138.                     </div>
  139.                 </div>
  140.                 <div data-a-up class="bloc-text-media breathing">
  141.                     <div class="bloc-text">
  142.                         <h2 class="h3">{{ "Discover"|trans|raw }}</h2>
  143.                         <h3 class="h4">{{ "A long adventure awaits…"|trans|raw }}</h3>
  144.                         <p>{{ "Since its release in December 2024, Tome underwent <strong>18 updates</strong>, including <strong>3 major updates</strong>. Our team is active, and the numbers above are only going to grow."|trans|raw }}</p>
  145.                     </div>
  146.                 </div>
  147.             </div>
  148.         </section>
  150.         <section class="review">
  151.             <div class="background-img">
  152.                 {{ m.img(asset('img/fond_papier.png')) }}
  153.             </div>
  154.             <div class="ct">
  155.                 <div class="swiper" data-swiper="review">
  156.                     {{ m.SwiperNav('review') }}
  157.                     <div class="swiper-wrapper">
  158.                         {{ m.reviewCard(
  159.                             "Keïten",
  160.                             "[…] I think I’ve found the perfect software for writing and managing my tabletop RPG sessions!",
  161.                             "[…] je pense avoir trouver LE logiciel qui me correspond pour l’écriture et la gestion de mes sessions de jeux de rôles !",
  162.                             "en"
  163.                         ) }}
  164.                         {{ m.reviewCard(
  165.                             "OliRO",
  166.                             "During sessions, Tome keeps me on track with the chapters and scenes I’ve prepared ahead of time.",
  167.                             "Pendant les sessions, Tome me garde sur le droit chemin avec les chapitres et scènes que j'ai créés au préalable.",
  168.                             "en"
  169.                         ) }}
  170.                         {{ m.reviewCard(
  171.                             "Kaiser",
  172.                             "Every update brings new features — sometimes even things I wouldn’t have thought of!",
  173.                             "Chaque mise à jour apporte son lot de nouveautés, parfois même des choses auxquelles on n’aurait pas pensé !",
  174.                             "en"
  175.                         ) }}
  176.                         {{ m.reviewCard(
  177.                             "Thelos",
  178.                             "[…] Now I have everything in one place, with tools like Roles and Plotlines [Choices] that really make my life easier.",
  179.                             "[…] j’ai maintenant tout au même endroit, avec des outils comme les Rôles et les Intrigues [Choix] pour me faciliter efficacement la vie.",
  180.                             "en"
  181.                         ) }}
  182.                         {{ m.reviewCard(
  183.                             "BairWithMe",
  184.                             "I used Tome for my session this past weekend. It worked super well. I'm excited to learn how to navigate it more and see new features.",
  185.                             "I used Tome for my session this past weekend. It worked super well. I'm excited to learn how to navigate it more and see new features.",
  186.                             "fr"
  187.                         ) }}
  188.                     </div>
  189.                 </div>
  190.             </div>
  191.         </section>
  193.         <section class="features">
  194.             <div class="ct">
  195.                 <h2 class="h3" data-a-up>{{ "For Even Richer Creations"|trans|raw }}</h2>
  196.                 <ul class="listing">
  197.                     <li class="gutter" data-a-up>
  198.                         <div class="card_icon">
  199.                             <div>
  200.                                 {#                                    {{ m.icon('home/software_1') }}#}
  201.                                 <h4><strong>{{ 'Memo Sheet Directory'|trans|raw }}</strong></h4>
  202.                             </div>
  203.                             <p>{{ 'Easily access all the essential information for your storytelling.'|trans|raw }}</p>
  204.                         </div>
  205.                     </li>
  206.                     <li class="gutter" data-a-up>
  207.                         <div class="card_icon">
  208.                             <div>
  209.                                 {#                                    {{ m.icon('home/software_1') }}#}
  210.                                 <h4><strong>{{ 'Visual tags'|trans|raw }}</strong></h4>
  211.                             </div>
  212.                             <p>{{ 'Organize and navigate easily between the pages of your world with visual tags. Simplify the search and management of information.'|trans|raw }}</p>
  213.                         </div>
  214.                     </li>
  215.                     <li class="gutter" data-a-up>
  216.                         <div class="card_icon">
  217.                             <div>
  218.                                 {#                                    {{ m.icon('home/software_1') }}#}
  219.                                 <h4><strong>{{ 'Image management'|trans|raw }}</strong></h4>
  220.                             </div>
  221.                             <p>{{ 'Enrich your descriptions with imported images. Integrate visuals directly into your templates and pages for total immersion.'|trans|raw }}</p>
  222.                         </div>
  223.                     </li>
  224.                     <li class="gutter" data-a-up>
  225.                         <div class="card_icon">
  226.                             <div>
  227.                                 {#                                    {{ m.icon('home/software_1') }}#}
  228.                                 <h4><strong>{{ 'Reinvented creative space'|trans|raw }}</strong></h4>
  229.                             </div>
  230.                             <p>{{ 'Use an innovative interface with tabs to keep multiple pages open simultaneously. Manage your projects smoothly and efficiently.'|trans|raw }}</p>
  231.                         </div>
  232.                     </li>
  233.                     <li class="gutter" data-a-up>
  234.                         <div class="card_icon">
  235.                             <div>
  236.                                 {#                                    {{ m.icon('home/software_1') }}#}
  237.                                 <h4><strong>{{ 'Local use'|trans|raw }}</strong></h4>
  238.                             </div>
  239.                             <p>{{ 'Enjoy the flexibility of using our software locally, without the need for an Internet connection. Work on your worlds and stories anytime, without interruption.'|trans|raw }}</p>
  240.                         </div>
  241.                     </li>
  242.                     <li class="gutter" data-a-up>
  243.                         <div class="card_icon">
  244.                             <div>
  245.                                 {#                                    {{ m.icon('home/software_1') }}#}
  246.                                 <h4><strong>{{ 'English and french'|trans|raw }}</strong></h4>
  247.                             </div>
  248.                             <p>{{ 'Our software is available in English and French, offering you linguistic flexibility to work in the language of your choice.'|trans|raw }}</p>
  249.                         </div>
  250.                     </li>
  251.                     <li class="gutter" data-a-up>
  252.                         <div class="card_icon">
  253.                             <div>
  254.                                 {#                                    {{ m.icon('home/software_1') }}#}
  255.                                 <h4><strong>{{ 'Cross-platform compatibility'|trans|raw }}</strong></h4>
  256.                             </div>
  257.                             <p>{{ 'Whether you are a Linux, Mac, or Windows user, our software adapts to your needs, ensuring a smooth and consistent experience.'|trans|raw }}</p>
  258.                         </div>
  259.                     </li>
  260.                     <li class="gutter" data-a-up>
  261.                         <div class="card_icon">
  262.                             <div>
  263.                                 {#                                    {{ m.icon('home/software_1') }}#}
  264.                                 <h4><strong>{{ 'Light and dark modes'|trans|raw }}</strong></h4>
  265.                             </div>
  266.                             <p>{{ 'Adapt the interface to your visual needs with light and dark modes. Reduce eye strain or improve visibility according to your preferences.'|trans|raw }}</p>
  267.                         </div>
  268.                     </li>
  269.                 </ul>
  270.             </div>
  271.         </section>
  273.         <section class="other_software">
  274.             <div class="background-img">
  275.                 {{ m.img(asset('img/dlc_whale.jpg')) }}
  276.             </div>
  277.             <div class="ct">
  278.                 <h2 class="h3" data-a-up>{{ "Amsel Suite, to link your worlds and stories"|trans|raw }}</h2>
  279.                 <h3 data-a-up>{{ "From plot to universe"|trans|raw }}</h3>
  280.                 <ul class="listing">
  281.                     <li class="gutter" data-a-up>
  282.                         <div class="card_icon">
  283.                             <div>
  284.                                 {{ m.icon('home/software_4') }}
  285.                                 <h4><strong>{{ 'Centralize and save time'|trans|raw }}</strong></h4>
  286.                             </div>
  287.                             <p>{{ 'Create and organize your worlds intuitively with customized templates.'|trans|raw }}</p>
  288.                         </div>
  289.                     </li>
  290.                     <li class="gutter" data-a-up>
  291.                         <div class="card_icon">
  292.                             <div>
  293.                                 {{ m.icon('home/software_5') }}
  294.                                 <h4><strong>{{ 'Express your creativity without limits'|trans|raw }}</strong></h4>
  295.                             </div>
  296.                             <p>{{ 'Design game universes rich in detail and establish a coherent framework for your players.'|trans|raw }}</p>
  297.                         </div>
  298.                     </li>
  299.                     <li class="gutter" data-a-up>
  300.                         <div class="card_icon">
  301.                             <div>
  302.                                 {{ m.icon('home/software_6') }}
  303.                                 <h4><strong>{{ 'Automate and simplify'|trans|raw }}</strong></h4>
  304.                             </div>
  305.                             <p>{{ 'Automate blocks to quickly fill in and maintain consistency across pages.'|trans|raw }}</p>
  306.                         </div>
  307.                     </li>
  308.                 </ul>
  309.                 {{ m.btn('icons-ollam/contact', 'Learn more about Lore', path('software-lore'), {class:'btn'}) }}
  310.             </div>
  311.         </section>
  313.         <section class="other_software">
  314.             <div class="background-img">
  315.                 {{ m.img(asset('img/dlc_amsel.jpg')) }}
  316.             </div>
  317.             <div class="ct">
  318.                 <h3 data-a-up>{{ "The ideal alliance for creating and telling"|trans|raw }}</h3>
  319.                 <ul class="listing">
  320.                     <li class="gutter" data-a-up>
  321.                         <div class="card_icon">
  322.                             <div>
  323. {#                                {{ m.icon('home/software_1') }}#}
  324.                                 <h4><strong>{{ 'Coherence and integration'|trans|raw }}</strong></h4>
  325.                             </div>
  326.                             <p>{{ 'Ensure perfect coherence between the elements of your world and your story by directly linking places, characters, and events.'|trans|raw }}</p>
  327.                         </div>
  328.                     </li>
  329.                     <li class="gutter" data-a-up>
  330.                         <div class="card_icon">
  331.                             <div>
  332. {#                                {{ m.icon('home/software_2') }}#}
  333.                                 <h4><strong>{{ 'Time-saving and efficiency'|trans|raw }}</strong></h4>
  334.                             </div>
  335.                             <p>{{ 'Automate repetitive tasks and update information centrally, allowing you to focus on creativity.'|trans|raw }}</p>
  336.                         </div>
  337.                     </li>
  338.                     <li class="gutter" data-a-up>
  339.                         <div class="card_icon">
  340.                             <div>
  341. {#                                {{ m.icon('home/software_3') }}#}
  342.                                 <h4><strong>{{ 'Total immersion'|trans|raw }}</strong></h4>
  343.                             </div>
  344.                             <p>{{ 'Offer a more immersive experience to your players or readers by combining rich and coherent details with captivating storytelling.'|trans|raw }}</p>
  345.                         </div>
  346.                     </li>
  347.                 </ul>
  348.                 {% if app.request.locale == 'fr' %}
  349.                     {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn'}) }}
  350.                 {% else %}
  351.                     {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn'}) }}
  352.                 {% endif %}
  353.             </div>
  354.         </section>
  356.         <section class="product_price">
  357.             <div class="ct">
  358.                 <div data-a-up>
  359.                     <h2 class="h2">{{'Amsel Suite License'|trans|raw}}</h2>
  360.                     <p>{{ 'Get the Amsel Suite, TOME, and LORE on all operating systems :'|trans|raw }}</p>
  361.                 </div>
  362.                 <div class="content" data-a-up>
  363.                     <div class="product-order">
  364.                         {{ m.svg('lore', 'Lore') }}
  365.                         <div class="product-infos">
  366.                             <h3 class="h4">{{ 'Lore'|trans|raw }}</h3>
  367.                             <p>{{ 'World creation'|trans|raw }}</p>
  368.                             <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small>
  369.                         </div>
  370.                     </div>
  371.                     <p><strong>{{ "+" }}</strong></p>
  372.                     <div class="product-order">
  373.                         {{ m.svg('tome', 'Tome') }}
  374.                         <div class="product-infos">
  375.                             <h3 class="h4">{{ 'Tome'|trans|raw }}</h3>
  376.                             <p>{{ 'Story design'|trans|raw }}</p>
  377.                             <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small>
  378.                         </div>
  379.                     </div>
  380.                 </div>
  381.                 <div class="price" data-a-up>
  382.                     <div>
  383.                         <p class="h3">{{ packProduct.actualPrice(app.session.get('currency'))|price(app.session.get('currency')) }}</p>
  384.                     </div>
  385.                     <p>{{ 'One-time payment - All taxes included'|trans|raw }}</p>
  387.                     {% if app.request.locale == 'fr' %}
  388.                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta-secondary'}) }}
  389.                     {% else %}
  390.                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta-secondary'}) }}
  391.                     {% endif %}
  392.                 </div>
  393.             </div>
  394.         </section>
  396.         <section class="news">
  397.             <div class="ct">
  398.                 <div data-a-up>
  399.                     <h2 class="h2">{{ "Discover Tome's latest news"|trans|raw }}</h2>
  400.                 </div>
  401.                 {% if articlesTome|length > 0 %}
  402.                     <div class="all_actus swiper" data-swiper="all">
  403.                         {{ m.SwiperNav('all') }}
  404.                         <div class="swiper-wrapper">
  405.                             {% for a in articlesTome %}
  406.                                 <div class="swiper-slide">
  407.                                     {{m.Actu(a)}}
  408.                                 </div>
  409.                             {% endfor %}
  410.                         </div>
  411.                     </div>
  412.                 {% endif %}
  413.                 <div class="btn-group">
  414.                     {{ m.btn('icons-ollam/contact', "See what's new", path('article_list'), {class:'btn'}) }}
  415.                 </div>
  416.             </div>
  417.             <div class="bg white-forest">
  418.                 <picture>
  419.                     <source srcset="{{ asset('img/white-tree.webp') }}" media="(min-width: 0px)"/>
  420.                     <img fetchpriority="high" src="{{ asset('img/white-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707">
  421.                 </picture>
  422.             </div>
  423.             <div class="bg black-forest">
  424.                 <picture>
  425.                     <source srcset="{{ asset('img/black-tree.webp') }}" media="(min-width: 0px)"/>
  426.                     <img fetchpriority="high" src="{{ asset('img/black-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707">
  427.                 </picture>
  428.             </div>
  429.         </section>
  431.         <section class="help">
  432.             <div class="ct" data-a-up>
  433.                 <h2 class="h3">{{'Questions? We Have the Answers'|trans|raw}}</h2>
  434.                 <div class="btn-group">
  435.                     {{ m.btn('icons-ollam/contact', 'FAQ', path('faq'), {class:'btn'}) }}
  436.                     {{ m.btn('icons-ollam/contact', 'Contact', path('contact'), {class:'btn'}) }}
  437.                 </div>
  438.             </div>
  439.         </section>
  441.         <section class="preorder">
  442.             <div class="background-img">
  443.                 {{ m.img(asset('img/img-dices.jpg')) }}
  444.             </div>
  445.             <div class="ct" data-a-up>
  446.                 <h2 class="h2">
  447.                     {{'Once upon a time, in a faraway kingdom...'|trans|raw}}
  448.                     <br>
  449.                     {{'...a tool could transform your imaginary tales into reality.'|trans|raw}}
  450.                 </h2>
  451.                 {% if app.request.locale == 'fr' %}
  452.                     {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }}
  453.                 {% else %}
  454.                     {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }}
  455.                 {% endif %}
  456.             </div>
  457.         </section>
  459.     </div>
  460. {% endblock %}