{% 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="lore">
<section class="intro">
<div data-a-up class="ct">
{{ m.Breadcrumb('tome', {link:{
0:['tome']
}}) }}
<div class="title_page">
<h2 class="h3">{{"Create Richly Detailed Universes"|trans|raw}}</h2>
<h3>{{ 'Experienced Game Master or passionate beginner, everything you need to bring your imaginary worlds to life.'|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/lore/FR_Hero_Section.jpg'), {width:1250, height:771}) }}
{% else %}
{{ m.img(asset('img/software/EN/lore/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="waves top">
<div class="bg smoke">
<div>{{ m.img(asset('img/bg-smoke.webp')) }}</div>
</div>
<div class="group-waves">{{ m.svg('group-waves', 'all.site') }}</div>
<div class="last-wave">{{ m.svg('last-wave', 'all.site') }}</div>
</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/lore/FR_Section_Create.jpg'), {width:1250, height:771}) }}
{% else %}
{{ m.img(asset('img/software/EN/lore/ENG_Section_Create.jpg'), {width:1250, height:771}) }}
{% endif %}
<div class="bloc-text">
<h2 class="h3">{{ "Create"|trans|raw }}</h2>
<h3 class="h4">{{ "Centralize and save time"|trans|raw }}</h3>
<p>{{ "<strong>Create and organize your worlds</strong> intuitively with custom templates. Imagine being able to <strong>centralize all your world's information</strong> in one structured and coherent place. This allows you to focus on what matters most: <strong>bringing your imagination to life.</strong>"|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/lore/FR_Section_Organize.jpg'), {width:1250, height:771}) }}
{% else %}
{{ m.img(asset('img/software/EN/lore/ENG_Section_Organize.jpg'), {width:1250, height:771}) }}
{% endif %}
<div class="bloc-text">
<h2 class="h3">{{ "Organize"|trans|raw }}</h2>
<h3 class="h4">{{ "Express your creativity without limits"|trans|raw }}</h3>
<p>{{ "<strong>Unleash your creativity</strong> with our convenient drag-and-drop system. Designing your pages becomes a breeze. Our drag-and-drop system offers you <strong>total flexibility</strong> to express your creativity without any limits."|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/lore/FR_Section_Develop.jpg'), {width:1250, height:771}) }}
{% else %}
{{ m.img(asset('img/software/EN/lore/ENG_Section_Develop.jpg'), {width:1250, height:771}) }}
{% endif %}
<div class="bloc-text">
<h2 class="h3">{{ "Develop"|trans|raw }}</h2>
<h3 class="h4">{{ "Automate and simplify"|trans|raw }}</h3>
<p>{{ "Simplify template creation with <strong>Runes</strong>, reusable content blocks. Integrate them automatically for <strong>consistency</strong> and easy updates. <strong>Automate</strong> your tasks to focus on your story."|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(
"Eleyon",
"Lore really helps me organize my world ideas, no matter how many or how crazy they get!",
"Lore really helps me organize my world ideas, no matter how many or how crazy they get!",
"fr"
) }}
{{ m.reviewCard(
"Thelos",
"Lore has completely changed the way I approach session prep. I’ve never seen a single RPG book where all the information on a given topic is gathered in one place. Now it is […]",
"Lore a énormément changé mon rapport à la préparation des parties. Je n’ai jamais vu un seul livre de JdR où toutes les informations sur un même sujet étaient rassemblées à un seul endroit. Maintenant c’est le cas[…].",
"en"
) }}
{{ m.reviewCard(
"ElvenLady",
"The Lore program has been incredible for me to get down all the details of my homebrew world with a level of customization that is only improving the more the team flushes out the program.",
"The Lore program has been incredible for me to get down all the details of my homebrew world with a level of customization that is only improving the more the team flushes out the program.",
"fr"
) }}
{{ m.reviewCard(
"GM Swiss",
"Stunning, I love the way you can reorganize any textbloc, imagebloc, etc…",
"Stunning, I love the way you can reorganize any textbloc, imagebloc, etc…",
"fr"
) }}
{{ m.reviewCard(
"Kaiser",
"It’s such a pleasure to be able to switch templates on the fly and have everything adapt instantly (…) It’s just so good — and the craziest part is, this is only the beginning.",
"Un plaisir de pouvoir changer les templates à la volée et que ça soit adapté directement (…) C’est juste trop bien et c'est que le début, c'est ça le plus fou.",
"en"
) }}
</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>
<h4><strong>{{ 'Hierarchical tree structure'|trans|raw }}</strong></h4>
</div>
<p>{{ 'Visualize the overall structure of your universe with a clear tree structure. Facilitate the organization and management of your creations.'|trans|raw }}</p>
</div>
</li>
<li class="gutter" data-a-up>
<div class="card_icon">
<div>
<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>
<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>
<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>
<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>
<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>
<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>
<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_tome.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 world creation to storytelling"|trans|raw }}</h3>
<ul class="listing">
<li class="gutter" data-a-up>
<div class="card_icon">
<div>
{{ m.icon('home/software_8') }}
<h4><strong>{{ 'World-story connection'|trans|raw }}</strong></h4>
</div>
<p>{{ 'Directly integrate elements of your world into your story for a more immersive and coherent narrative experience.'|trans|raw }}</p>
</div>
</li>
<li class="gutter" data-a-up>
<div class="card_icon">
<div>
{{ m.icon('home/software_9') }}
<h4><strong>{{ 'Non-linear scenarios'|trans|raw }}</strong></h4>
</div>
<p>{{ 'Organize and visualize complex plots with non-linear scenarios, ensuring clarity and coherence in your narratives.'|trans|raw }}</p>
</div>
</li>
<li class="gutter" data-a-up>
<div class="card_icon">
<div>
{{ m.icon('home/software_7') }}
<h4><strong>{{ 'Player choice tracking'|trans|raw }}</strong></h4>
</div>
<p>{{ 'Track character decisions and their consequences on the story, allowing for dynamic and interactive storytelling.'|trans|raw }}</p>
</div>
</li>
</ul>
{{ m.btn('icons-ollam/contact', 'Learn more about Tome', path('software-tome'), {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 Lore's latest news"|trans|raw }}</h2>
</div>
{% if articlesLore|length > 0 %}
<div class="all_actus swiper" data-swiper="all">
{{ m.SwiperNav('all') }}
<div class="swiper-wrapper">
{% for a in articlesLore %}
<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="waves top">
<div class="bg smoke">
<div>{{ m.img(asset('img/bg-smoke.webp')) }}</div>
</div>
<div class="group-waves">{{ m.svg('group-waves', 'all.site') }}</div>
<div class="last-wave">{{ m.svg('last-wave', 'all.site') }}</div>
</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">
{{'Legends tell that long ago...'|trans|raw}}
<br>
{{'...a tool could transform your imaginary worlds 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 %}