{% import 'app/_inc/macros.html.twig' as m %}{% extends 'base.html.twig' %}{% block css %} {{ encore_entry_link_tags('app-software-css') }} {{ encore_entry_link_tags('app-swiper-css') }}{% endblock %}{% block js %} {{ encore_entry_script_tags('app-swiper-js') }}{% endblock %}{% block content %} <div id="page_software" class="tome"> <section class="intro"> <div data-a-up class="ct"> {{ m.Breadcrumb('tome', {link:{ 0:['tome'] }}) }} <div class="title_page"> <h2 class="h3">{{"Telling memorable stories"|trans|raw}}</h2> <h3>{{ 'Whether you are an experienced Game Master or an aspiring storyteller, you have everything you need to create unforgettable adventures.'|trans|raw }}</h3> </div> <div class="links"> {% if app.request.locale == 'fr' %} {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }} {% else %} {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }} {% endif %} <button title="{{ 'Learn more'|trans|raw }}" class="btn" data-scroll="#learnmore"> {{ m.icon('icons-ollam/contact') }} <span>{{ "Learn more"|trans|raw }}</span> </button> </div> <div class="intro_softwares breathing"> {% if app.request.locale == 'fr' %} {{ m.img(asset('img/software/FR/tome/tome_FR_Hero_Section.jpg'), {width:1250, height:771}) }} {% else %} {{ m.img(asset('img/software/EN/tome/tome_ENG_Hero_Section.jpg'), {width:1250, height:771}) }} {% endif %} </div> </div> <div class="night"> {% for i in 1..20 %} <div class="star"></div> {% endfor %} </div> <div class="bg white-forest"> <picture> <source srcset="{{ asset('img/white-tree.webp') }}" media="(min-width: 0px)"/> <img fetchpriority="high" src="{{ asset('img/white-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707"> </picture> </div> <div class="bg smoke"> <picture> <source srcset="{{ asset('img/bg-smoke.webp') }}" media="(min-width: 0px)"/> <img fetchpriority="high" src="{{ asset('img/bg-smoke.webp') }}" alt="Image Amsel Suite" width="2600" height="650"> </picture> </div> <div class="bg black-forest"> <picture> <source srcset="{{ asset('img/black-tree.webp') }}" media="(min-width: 0px)"/> <img fetchpriority="high" src="{{ asset('img/black-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707"> </picture> </div> </section> <section id="learnmore" class="software"> <div class="ct"> <div data-a-up class="bloc-text-media right breathing"> {% if app.request.locale == 'fr' %} {{ m.img(asset('img/software/FR/tome/tome_FR_Section_Develop.jpg'), {width:1250, height:771}) }} {% else %} {{ m.img(asset('img/software/EN/tome/tome_ENG_Section_Develop.jpg'), {width:1250, height:771}) }} {% endif %} <div class="bloc-text"> <h2 class="h3">{{ "Develop"|trans|raw }}</h2> <h3 class="h4">{{ "World-story connection"|trans|raw }}</h3> <p>{{ "Create captivating stories from your imaginary worlds. <strong>Easily integrate</strong> your worlds created in LORE directly into TOME. <strong>Weave rich and coherent narratives</strong> using your locations, characters, and events."|trans|raw }}</p> </div> </div> <div data-a-up class="bloc-text-media breathing"> {% if app.request.locale == 'fr' %} {{ m.img(asset('img/software/FR/tome/tome_FR_Section_Organize.jpg'), {width:1250, height:771}) }} {% else %} {{ m.img(asset('img/software/EN/tome/tome_ENG_Section_Organize.jpg'), {width:1250, height:771}) }} {% endif %} <div class="bloc-text"> <h2 class="h3">{{ "Organize"|trans|raw }}</h2> <h3 class="h4">{{ "Non-linear scenarios"|trans|raw }}</h3> <p>{{ "Offer your players <strong>a dynamic and interactive gaming experience.</strong> TOME allows you to create narratives with <strong>multiple branches</strong>, offering various challenges and choices. <strong>Adapt to players' decisions</strong> in real-time to make each session unique and memorable."|trans|raw }}</p> </div> </div> <div data-a-up class="bloc-text-media right breathing"> {% if app.request.locale == 'fr' %} {{ m.img(asset('img/software/FR/tome/tome_FR_Section_Manage.jpg'), {width:1250, height:771}) }} {% else %} {{ m.img(asset('img/software/EN/tome/tome_ENG_Section_Manage.jpg'), {width:1250, height:771}) }} {% endif %} <div class="bloc-text"> <h2 class="h3">{{ "Manage"|trans|raw }}</h2> <h3 class="h4">{{ "Tracking player choices"|trans|raw }}</h3> <p>{{ "Record and leverage your players' decisions to enrich your story. <strong>Track players' choices</strong> in real-time to see how they influence the narrative. <strong>Create more coherent and personalized stories</strong> based on players' actions and preferences."|trans|raw }}</p> </div> </div> </div> </section> <section class="review"> <div class="background-img"> {{ m.img(asset('img/fond_papier.png')) }} </div> <div class="ct"> <div class="swiper" data-swiper="review"> {{ m.SwiperNav('review') }} <div class="swiper-wrapper"> {{ m.reviewCard( "Keïten", "[…] I think I’ve found the perfect software for writing and managing my tabletop RPG sessions!", "[…] je pense avoir trouver LE logiciel qui me correspond pour l’écriture et la gestion de mes sessions de jeux de rôles !", "en" ) }} {{ m.reviewCard( "OliRO", "During sessions, Tome keeps me on track with the chapters and scenes I’ve prepared ahead of time.", "Pendant les sessions, Tome me garde sur le droit chemin avec les chapitres et scènes que j'ai créés au préalable.", "en" ) }} {{ m.reviewCard( "Kaiser", "Every update brings new features — sometimes even things I wouldn’t have thought of!", "Chaque mise à jour apporte son lot de nouveautés, parfois même des choses auxquelles on n’aurait pas pensé !", "en" ) }} {{ m.reviewCard( "Thelos", "[…] Now I have everything in one place, with tools like Roles and Plotlines [Choices] that really make my life easier.", "[…] 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.", "en" ) }} {{ m.reviewCard( "BairWithMe", "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.", "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.", "fr" ) }} </div> </div> </div> </section> <section class="features"> <div class="ct"> <h2 class="h3" data-a-up>{{ "For Even Richer Creations"|trans|raw }}</h2> <ul class="listing"> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Memo Sheet Directory'|trans|raw }}</strong></h4> </div> <p>{{ 'Easily access all the essential information for your storytelling.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Visual tags'|trans|raw }}</strong></h4> </div> <p>{{ 'Organize and navigate easily between the pages of your world with visual tags. Simplify the search and management of information.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Image management'|trans|raw }}</strong></h4> </div> <p>{{ 'Enrich your descriptions with imported images. Integrate visuals directly into your templates and pages for total immersion.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Reinvented creative space'|trans|raw }}</strong></h4> </div> <p>{{ 'Use an innovative interface with tabs to keep multiple pages open simultaneously. Manage your projects smoothly and efficiently.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Local use'|trans|raw }}</strong></h4> </div> <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> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'English and french'|trans|raw }}</strong></h4> </div> <p>{{ 'Our software is available in English and French, offering you linguistic flexibility to work in the language of your choice.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Cross-platform compatibility'|trans|raw }}</strong></h4> </div> <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> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Light and dark modes'|trans|raw }}</strong></h4> </div> <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> </div> </li> </ul> </div> </section> <section class="other_software"> <div class="background-img"> {{ m.img(asset('img/dlc_whale.jpg')) }} </div> <div class="ct"> <h2 class="h3" data-a-up>{{ "Amsel Suite, to link your worlds and stories"|trans|raw }}</h2> <h3 data-a-up>{{ "From plot to universe"|trans|raw }}</h3> <ul class="listing"> <li class="gutter" data-a-up> <div class="card_icon"> <div> {{ m.icon('home/software_4') }} <h4><strong>{{ 'Centralize and save time'|trans|raw }}</strong></h4> </div> <p>{{ 'Create and organize your worlds intuitively with customized templates.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {{ m.icon('home/software_5') }} <h4><strong>{{ 'Express your creativity without limits'|trans|raw }}</strong></h4> </div> <p>{{ 'Design game universes rich in detail and establish a coherent framework for your players.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div> {{ m.icon('home/software_6') }} <h4><strong>{{ 'Automate and simplify'|trans|raw }}</strong></h4> </div> <p>{{ 'Automate blocks to quickly fill in and maintain consistency across pages.'|trans|raw }}</p> </div> </li> </ul> {{ m.btn('icons-ollam/contact', 'Learn more about Lore', path('software-lore'), {class:'btn'}) }} </div> </section> <section class="other_software"> <div class="background-img"> {{ m.img(asset('img/dlc_amsel.jpg')) }} </div> <div class="ct"> <h3 data-a-up>{{ "The ideal alliance for creating and telling"|trans|raw }}</h3> <ul class="listing"> <li class="gutter" data-a-up> <div class="card_icon"> <div>{# {{ m.icon('home/software_1') }}#} <h4><strong>{{ 'Coherence and integration'|trans|raw }}</strong></h4> </div> <p>{{ 'Ensure perfect coherence between the elements of your world and your story by directly linking places, characters, and events.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div>{# {{ m.icon('home/software_2') }}#} <h4><strong>{{ 'Time-saving and efficiency'|trans|raw }}</strong></h4> </div> <p>{{ 'Automate repetitive tasks and update information centrally, allowing you to focus on creativity.'|trans|raw }}</p> </div> </li> <li class="gutter" data-a-up> <div class="card_icon"> <div>{# {{ m.icon('home/software_3') }}#} <h4><strong>{{ 'Total immersion'|trans|raw }}</strong></h4> </div> <p>{{ 'Offer a more immersive experience to your players or readers by combining rich and coherent details with captivating storytelling.'|trans|raw }}</p> </div> </li> </ul> {% if app.request.locale == 'fr' %} {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn'}) }} {% else %} {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn'}) }} {% endif %} </div> </section> <section class="product_price"> <div class="ct"> <div data-a-up> <h2 class="h2">{{'Amsel Suite License'|trans|raw}}</h2> <p>{{ 'Get the Amsel Suite, TOME, and LORE on all operating systems :'|trans|raw }}</p> </div> <div class="content" data-a-up> <div class="product-order"> {{ m.svg('lore', 'Lore') }} <div class="product-infos"> <h3 class="h4">{{ 'Lore'|trans|raw }}</h3> <p>{{ 'World creation'|trans|raw }}</p> <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small> </div> </div> <p><strong>{{ "+" }}</strong></p> <div class="product-order"> {{ m.svg('tome', 'Tome') }} <div class="product-infos"> <h3 class="h4">{{ 'Tome'|trans|raw }}</h3> <p>{{ 'Story design'|trans|raw }}</p> <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small> </div> </div> </div> <div class="price" data-a-up> <div> <p class="h3">{{ '49,99'|trans|raw }}{{ " €" }}</p> </div> <p>{{ 'One-time payment - All taxes included'|trans|raw }}</p> {% if app.request.locale == 'fr' %} {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta-secondary'}) }} {% else %} {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta-secondary'}) }} {% endif %} </div> </div> </section> <section class="news"> <div class="ct"> <div data-a-up> <h2 class="h2">{{ "Discover Tome's latest news"|trans|raw }}</h2> </div> {% if articlesTome|length > 0 %} <div class="all_actus swiper" data-swiper="all"> {{ m.SwiperNav('all') }} <div class="swiper-wrapper"> {% for a in articlesTome %} <div class="swiper-slide"> {{m.Actu(a)}} </div> {% endfor %} </div> </div> {% endif %} <div class="btn-group"> {{ m.btn('icons-ollam/contact', "See what's new", path('article_list'), {class:'btn'}) }} </div> </div> <div class="bg white-forest"> <picture> <source srcset="{{ asset('img/white-tree.webp') }}" media="(min-width: 0px)"/> <img fetchpriority="high" src="{{ asset('img/white-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707"> </picture> </div> <div class="bg black-forest"> <picture> <source srcset="{{ asset('img/black-tree.webp') }}" media="(min-width: 0px)"/> <img fetchpriority="high" src="{{ asset('img/black-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707"> </picture> </div> </section> <section class="help"> <div class="ct" data-a-up> <h2 class="h3">{{'Questions? We Have the Answers'|trans|raw}}</h2> <div class="btn-group"> {{ m.btn('icons-ollam/contact', 'FAQ', path('faq'), {class:'btn'}) }} {{ m.btn('icons-ollam/contact', 'Contact', path('contact'), {class:'btn'}) }} </div> </div> </section> <section class="preorder"> <div class="background-img"> {{ m.img(asset('img/img-dices.jpg')) }} </div> <div class="ct" data-a-up> <h2 class="h2"> {{'Once upon a time, in a faraway kingdom...'|trans|raw}} <br> {{'...a tool could transform your imaginary tales into reality.'|trans|raw}} </h2> {% if app.request.locale == 'fr' %} {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }} {% else %} {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }} {% endif %} </div> </section> </div>{% endblock %}