templates/app/pages/software-lore.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="lore">
  12.         <section class="intro">
  13.             <div data-a-up class="ct">
  14.                 {{ m.Breadcrumb('lore', {link:{
  15.                     0:['lore']
  16.                 }}) }}
  17.                 <div class="title_page">
  18.                     <h2 class="h3">{{"Create Richly Detailed Universes"|trans|raw}}</h2>
  19.                     <h3>{{ 'Experienced Game Master or passionate beginner, everything you need to bring your imaginary worlds to life.'|trans|raw }}</h3>
  20.                 </div>
  21.                 <div class="links">
  22.                     {% if app.request.locale == 'fr' %}
  23.                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }}
  24.                     {% else %}
  25.                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }}
  26.                     {% endif %}
  27.                     <button title="{{ 'Learn more'|trans|raw }}" class="btn" data-scroll="#learnmore">
  28.                         {{ m.icon('icons-ollam/contact') }}
  29.                         <span>{{ "Learn more"|trans|raw }}</span>
  30.                     </button>
  31.                 </div>
  32.                 <div class="intro_softwares breathing">
  33.                     {% if app.request.locale == 'fr' %}
  34.                         {{ m.img(asset('img/software/FR/lore/LMapsFR.png'), {width:1250, height:670}) }}
  35.                     {% else %}
  36.                         {{ m.img(asset('img/software/EN/lore/LMapsEN.png'), {width:1250, height:670}) }}
  37.                     {% endif %}
  38.                 </div>
  39.             </div>
  40.             <div class="night">
  41.                 {% for i in 1..20 %}
  42.                     <div class="star"></div>
  43.                 {% endfor %}
  44.             </div>
  45.             <div class="waves top">
  46.                 <div class="bg smoke">
  47.                     <div>{{ m.img(asset('img/bg-smoke.webp')) }}</div>
  48.                 </div>
  49.                 <div class="group-waves">{{ m.svg('group-waves', 'all.site') }}</div>
  50.                 <div class="last-wave">{{ m.svg('last-wave', 'all.site') }}</div>
  51.             </div>
  52.         </section>
  53.         <section id="learnmore" class="software">
  54.             <div class="ct">
  55.                 <div data-a-up class="bloc-text-media right breathing">
  56.                     {% if app.request.locale == 'fr' %}
  57.                         {{ m.img(asset('img/software/FR/lore/DiagrammesFR.png'), {width:1250, height:670}) }}
  58.                     {% else %}
  59.                         {{ m.img(asset('img/software/EN/lore/DiagrammesEN.png'), {width:1250, height:670}) }}
  60.                     {% endif %}
  61.                     <div class="bloc-text">
  62.                         <h2 class="h3">{{ "Organize"|trans|raw }}</h2>
  63.                         <h3 class="h4">{{ "Centralize and save time"|trans|raw }}</h3>
  64.                         <p>{{ "<strong>Create and organize your worlds</strong> intuitively. Imagine being able to <strong>centralize all your world's information</strong> in one structured and coherent place. Thanks to our worldbuilding software, focus on what matters most: <strong>bringing your imagination to life</strong>."|trans|raw }}</p>
  65.                     </div>
  66.                 </div>
  67.                 <div data-a-up class="bloc-text-media breathing">
  68.                     {% if app.request.locale == 'fr' %}
  69.                         {{ m.img(asset('img/software/FR/lore/TemplatesDDFR.png'), {width:1250, height:670}) }}
  70.                     {% else %}
  71.                         {{ m.img(asset('img/software/EN/lore/TemplatesDDEN.png'), {width:1250, height:670}) }}
  72.                     {% endif %}
  73.                     <div class="bloc-text">
  74.                         <h2 class="h3">{{ "Create"|trans|raw }}</h2>
  75.                         <h3 class="h4">{{ "Express your creativity without limits"|trans|raw }}</h3>
  76.                         <p>{{ "<strong>Unleash your creativity</strong> with our convenient drag-and-drop system. <strong>Designing your pages</strong> becomes a breeze. Our unique templating system offers you total flexibility to <strong>express your creativity without limits</strong>."|trans|raw }}</p>
  77.                     </div>
  78.                 </div>
  79.                 <div data-a-up class="bloc-text-media right breathing">
  80.                     {% if app.request.locale == 'fr' %}
  81.                         {{ m.img(asset('img/software/FR/lore/MirrorsFR.png'), {width:1250, height:670}) }}
  82.                     {% else %}
  83.                         {{ m.img(asset('img/software/EN/lore/MirrorsEN.png'), {width:1250, height:670}) }}
  84.                     {% endif %}
  85.                     <div class="bloc-text">
  86.                         <h2 class="h3">{{ "Automate"|trans|raw }}</h2>
  87.                         <h3 class="h4">{{ "Connect and simplify"|trans|raw }}</h3>
  88.                         <p>{{ "Thanks to our innovative mirror system, <strong>automate perfunctory tasks</strong>. As you fill in your pages, other pages can update in the background to reflect changes, guaranteeing consistency and <strong>making your life that much easier</strong>."|trans|raw }}</p>
  89.                     </div>
  90.                 </div>
  91.                 <div data-a-up class="bloc-text-media breathing">
  92.                     {% if app.request.locale == 'fr' %}
  93.                         {{ m.img(asset('img/software/FR/lore/RunesFR.png'), {width:1250, height:670}) }}
  94.                     {% else %}
  95.                         {{ m.img(asset('img/software/EN/lore/RunesEN.png'), {width:1250, height:670}) }}
  96.                     {% endif %}
  97.                     <div class="bloc-text">
  98.                         <h2 class="h3">{{ "Systematize"|trans|raw }}</h2>
  99.                         <h3 class="h4">{{ "A consistent framework"|trans|raw }}</h3>
  100.                         <p>{{ "Thanks to Runes, <strong>create a template-within a template</strong> to guide your page creation. Reuse them across template for a consistent experience across pages of your world. Make everything straightforward and <strong>focus on your imagination</strong>."|trans|raw }}</p>
  101.                     </div>
  102.                 </div>
  103.                 <div data-a-up class="bloc-text-media right breathing">
  104.                     {% if app.request.locale == 'fr' %}
  105.                         {{ m.img(asset('img/software/FR/lore/AetherisFR.png'), {width:1250, height:670}) }}
  106.                     {% else %}
  107.                         {{ m.img(asset('img/software/EN/lore/AetherisEN.png'), {width:1250, height:670}) }}
  108.                     {% endif %}
  109.                     <div class="bloc-text">
  110.                         <h2 class="h3">{{ "Revise"|trans|raw }}</h2>
  111.                         <h3 class="h4">{{ "Change your mind freely"|trans|raw }}</h3>
  112.                         <p>{{ "Templates in Lore are not just suggestions. They are <strong>rules you give the Software</strong>. If you decide to rearrange a template, all pages using that template adapt accordingly. Revise, revise again, and <strong>never be forced to backtrack because of it</strong>."|trans|raw }}</p>
  113.                     </div>
  114.                 </div>
  115.                 <div data-a-up class="bloc-text-media breathing">
  116.                     {% if app.request.locale == 'fr' %}
  117.                         {{ m.img(asset('img/software/FR/lore/Connect1FR.png'), {width:1250, height:670}) }}
  118.                     {% else %}
  119.                         {{ m.img(asset('img/software/EN/lore/Connect1EN.png'), {width:1250, height:670}) }}
  120.                     {% endif %}
  121.                     <div class="bloc-text">
  122.                         <h2 class="h3">{{ "Connect"|trans|raw }}</h2>
  123.                         <h3 class="h4">{{ "World-Story Connection"|trans|raw }}</h3>
  124.                         <p>{{ "<strong>Create captivating stories</strong> from your imaginary worlds. <strong>Easily integrate your worlds</strong> created in Lore directly into Tome. <strong>Weave rich and coherent narratives</strong> using your locations, characters, and events."|trans|raw }}</p>
  125.                     </div>
  126.                 </div>
  127.                 <div data-a-up class="bloc-text-media breathing">
  128.                     <div class="bloc-text">
  129.                         <h2 class="h3">{{ "Discover"|trans|raw }}</h2>
  130.                         <h3 class="h4">{{ "A long adventure awaits…"|trans|raw }}</h3>
  131.                         <p>{{ "Since its release in December 2024, Lore 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>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </section>
  136.         <section class="review">
  137.             <div class="background-img">
  138.                 {{ m.img(asset('img/fond_papier.png')) }}
  139.             </div>
  140.             <div class="ct">
  141.                 <div class="swiper" data-swiper="review">
  142.                     {{ m.SwiperNav('review') }}
  143.                     <div class="swiper-wrapper">
  144.                         {{ m.reviewCard(
  145.                             "Eleyon",
  146.                             "Lore really helps me organize my world ideas, no matter how many or how crazy they get!",
  147.                             "Lore really helps me organize my world ideas, no matter how many or how crazy they get!",
  148.                             "fr"
  149.                         ) }}
  150.                         {{ m.reviewCard(
  151.                             "Thelos",
  152.                             "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 […]",
  153.                             "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[…].",
  154.                             "en"
  155.                         ) }}
  156.                         {{ m.reviewCard(
  157.                             "ElvenLady",
  158.                             "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.",
  159.                             "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.",
  160.                             "fr"
  161.                         ) }}
  162.                         {{ m.reviewCard(
  163.                             "GM Swiss",
  164.                             "Stunning, I love the way you can reorganize any textbloc, imagebloc, etc…",
  165.                             "Stunning, I love the way you can reorganize any textbloc, imagebloc, etc…",
  166.                             "fr"
  167.                         ) }}
  168.                         {{ m.reviewCard(
  169.                             "Kaiser",
  170.                             "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.",
  171.                             "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.",
  172.                             "en"
  173.                         ) }}
  174.                     </div>
  175.                 </div>
  176.             </div>
  177.         </section>
  178.         <section class="features">
  179.             <div class="ct">
  180.                 <h2 class="h3" data-a-up>{{ "For Even Richer Creations"|trans|raw }}</h2>
  181.                 <ul class="listing">
  182.                     <li class="gutter" data-a-up>
  183.                         <div class="card_icon">
  184.                             <div>
  185.                                 <h4><strong>{{ 'Hierarchical tree structure'|trans|raw }}</strong></h4>
  186.                             </div>
  187.                             <p>{{ 'Visualize the overall structure of your universe with a clear tree structure. Facilitate the organization and management of your creations.'|trans|raw }}</p>
  188.                         </div>
  189.                     </li>
  190.                     <li class="gutter" data-a-up>
  191.                         <div class="card_icon">
  192.                             <div>
  193.                                 <h4><strong>{{ 'Visual tags'|trans|raw }}</strong></h4>
  194.                             </div>
  195.                             <p>{{ 'Organize and navigate easily between the pages of your world with visual tags. Simplify the search and management of information.'|trans|raw }}</p>
  196.                         </div>
  197.                     </li>
  198.                     <li class="gutter" data-a-up>
  199.                         <div class="card_icon">
  200.                             <div>
  201.                                 <h4><strong>{{ 'Image management'|trans|raw }}</strong></h4>
  202.                             </div>
  203.                             <p>{{ 'Enrich your descriptions with imported images. Integrate visuals directly into your templates and pages for total immersion.'|trans|raw }}</p>
  204.                         </div>
  205.                     </li>
  206.                     <li class="gutter" data-a-up>
  207.                         <div class="card_icon">
  208.                             <div>
  209.                                 <h4><strong>{{ 'Reinvented creative space'|trans|raw }}</strong></h4>
  210.                             </div>
  211.                             <p>{{ 'Use an innovative interface with tabs to keep multiple pages open simultaneously. Manage your projects smoothly and efficiently.'|trans|raw }}</p>
  212.                         </div>
  213.                     </li>
  214.                     <li class="gutter" data-a-up>
  215.                         <div class="card_icon">
  216.                             <div>
  217.                                 <h4><strong>{{ 'Local use'|trans|raw }}</strong></h4>
  218.                             </div>
  219.                             <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>
  220.                         </div>
  221.                     </li>
  222.                     <li class="gutter" data-a-up>
  223.                         <div class="card_icon">
  224.                             <div>
  225.                                 <h4><strong>{{ 'English and french'|trans|raw }}</strong></h4>
  226.                             </div>
  227.                             <p>{{ 'Our software is available in English and French, offering you linguistic flexibility to work in the language of your choice.'|trans|raw }}</p>
  228.                         </div>
  229.                     </li>
  230.                     <li class="gutter" data-a-up>
  231.                         <div class="card_icon">
  232.                             <div>
  233.                                 <h4><strong>{{ 'Cross-platform compatibility'|trans|raw }}</strong></h4>
  234.                             </div>
  235.                             <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>
  236.                         </div>
  237.                     </li>
  238.                     <li class="gutter" data-a-up>
  239.                         <div class="card_icon">
  240.                             <div>
  241.                                 <h4><strong>{{ 'Light and dark modes'|trans|raw }}</strong></h4>
  242.                             </div>
  243.                             <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>
  244.                         </div>
  245.                     </li>
  246.                 </ul>
  247.             </div>
  248.         </section>
  249.         <section class="other_software">
  250.             <div class="background-img">
  251.                 {{ m.img(asset('img/dlc_tome.jpg')) }}
  252.             </div>
  253.             <div class="ct">
  254.                 <h2 class="h3" data-a-up>{{ "Amsel Suite, to link your worlds and stories"|trans|raw }}</h2>
  255.                 <h3 data-a-up>{{ "From world creation to storytelling"|trans|raw }}</h3>
  256.                 <ul class="listing">
  257.                     <li class="gutter" data-a-up>
  258.                         <div class="card_icon">
  259.                             <div>
  260.                                 {{ m.icon('home/software_8') }}
  261.                                 <h4><strong>{{ 'World-Story Connection'|trans|raw }}</strong></h4>
  262.                             </div>
  263.                             <p>{{ 'Directly integrate elements of your world into your story for a more immersive and coherent narrative experience.'|trans|raw }}</p>
  264.                         </div>
  265.                     </li>
  266.                     <li class="gutter" data-a-up>
  267.                         <div class="card_icon">
  268.                             <div>
  269.                                 {{ m.icon('home/software_9') }}
  270.                                 <h4><strong>{{ 'Non-linear stories'|trans|raw }}</strong></h4>
  271.                             </div>
  272.                             <p>{{ 'Organize and visualize complex plots with non-linear stories, ensuring clarity and coherence in your narratives.'|trans|raw }}</p>
  273.                         </div>
  274.                     </li>
  275.                     <li class="gutter" data-a-up>
  276.                         <div class="card_icon">
  277.                             <div>
  278.                                 {{ m.icon('home/software_7') }}
  279.                                 <h4><strong>{{ 'Tracking player choices'|trans|raw }}</strong></h4>
  280.                             </div>
  281.                             <p>{{ 'Track character decisions and their consequences on the story, allowing for dynamic and interactive storytelling.'|trans|raw }}</p>
  282.                         </div>
  283.                     </li>
  284.                 </ul>
  285.                 {{ m.btn('icons-ollam/contact', 'Learn more about Tome', path('software-tome'), {class:'btn'}) }}
  286.             </div>
  287.         </section>
  288.         <section class="other_software">
  289.             <div class="background-img">
  290.                 {{ m.img(asset('img/dlc_amsel.jpg')) }}
  291.             </div>
  292.             <div class="ct">
  293.                 <h3 data-a-up>{{ "The ideal alliance for creating and telling"|trans|raw }}</h3>
  294.                 <ul class="listing">
  295.                     <li class="gutter" data-a-up>
  296.                         <div class="card_icon">
  297.                             <div>
  298. {#                                {{ m.icon('home/software_1') }}#}
  299.                                 <h4><strong>{{ 'Coherence and integration'|trans|raw }}</strong></h4>
  300.                             </div>
  301.                             <p>{{ 'Ensure perfect coherence between the elements of your world and your story by directly linking places, characters, and events.'|trans|raw }}</p>
  302.                         </div>
  303.                     </li>
  304.                     <li class="gutter" data-a-up>
  305.                         <div class="card_icon">
  306.                             <div>
  307. {#                                {{ m.icon('home/software_2') }}#}
  308.                                 <h4><strong>{{ 'Time-saving and efficiency'|trans|raw }}</strong></h4>
  309.                             </div>
  310.                             <p>{{ 'Automate repetitive tasks and update information centrally, allowing you to focus on creativity.'|trans|raw }}</p>
  311.                         </div>
  312.                     </li>
  313.                     <li class="gutter" data-a-up>
  314.                         <div class="card_icon">
  315.                             <div>
  316. {#                                {{ m.icon('home/software_3') }}#}
  317.                                 <h4><strong>{{ 'Total immersion'|trans|raw }}</strong></h4>
  318.                             </div>
  319.                             <p>{{ 'Offer a more immersive experience to your players or readers by combining rich and coherent details with captivating storytelling.'|trans|raw }}</p>
  320.                         </div>
  321.                     </li>
  322.                 </ul>
  323.                 {% if app.request.locale == 'fr' %}
  324.                     {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn'}) }}
  325.                 {% else %}
  326.                     {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn'}) }}
  327.                 {% endif %}
  328.             </div>
  329.         </section>
  330.         <section class="product_price">
  331.             <div class="ct">
  332.                 <div data-a-up>
  333.                     <h2 class="h2">{{'Amsel Suite License'|trans|raw}}</h2>
  334.                     <p>{{ 'Get the Amsel Suite, TOME, and LORE on all operating systems :'|trans|raw }}</p>
  335.                 </div>
  336.                 <div class="content" data-a-up>
  337.                     <div class="product-order">
  338.                         {{ m.svg('lore', 'Lore') }}
  339.                         <div class="product-infos">
  340.                             <h3 class="h4">{{ 'Lore'|trans|raw }}</h3>
  341.                             <p>{{ 'World creation'|trans|raw }}</p>
  342.                             <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small>
  343.                         </div>
  344.                     </div>
  345.                     <p><strong>{{ "+" }}</strong></p>
  346.                     <div class="product-order">
  347.                         {{ m.svg('tome', 'Tome') }}
  348.                         <div class="product-infos">
  349.                             <h3 class="h4">{{ 'Tome'|trans|raw }}</h3>
  350.                             <p>{{ 'Story design'|trans|raw }}</p>
  351.                             <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small>
  352.                         </div>
  353.                     </div>
  354.                 </div>
  355.                 <div class="price" data-a-up>
  356.                     <div>
  357.                         <p class="h3">{{ packProduct.actualPrice(app.session.get('currency'))|price(app.session.get('currency')) }}</p>
  358.                     </div>
  359.                     <p>{{ 'One-time payment - All taxes included'|trans|raw }}</p>
  360.                     {% if app.request.locale == 'fr' %}
  361.                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta-secondary'}) }}
  362.                     {% else %}
  363.                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta-secondary'}) }}
  364.                     {% endif %}
  365.                 </div>
  366.             </div>
  367.         </section>
  368.         <section class="news">
  369.             <div class="ct">
  370.                 <div data-a-up>
  371.                     <h2 class="h2">{{ "Discover Lore's latest news"|trans|raw }}</h2>
  372.                 </div>
  373.                 {% if articlesLore|length > 0 %}
  374.                     <div class="all_actus swiper" data-swiper="all">
  375.                         {{ m.SwiperNav('all') }}
  376.                         <div class="swiper-wrapper">
  377.                             {% for a in articlesLore %}
  378.                                 <div class="swiper-slide">
  379.                                     {{m.Actu(a)}}
  380.                                 </div>
  381.                             {% endfor %}
  382.                         </div>
  383.                     </div>
  384.                 {% endif %}
  385.                 <div class="btn-group">
  386.                     {{ m.btn('icons-ollam/contact', "See what's new", path('article_list'), {class:'btn'}) }}
  387.                 </div>
  388.             </div>
  389.             <div class="waves top">
  390.                 <div class="bg smoke">
  391.                     <div>{{ m.img(asset('img/bg-smoke.webp')) }}</div>
  392.                 </div>
  393.                 <div class="group-waves">{{ m.svg('group-waves', 'all.site') }}</div>
  394.                 <div class="last-wave">{{ m.svg('last-wave', 'all.site') }}</div>
  395.             </div>
  396.         </section>
  397.         <section class="help">
  398.             <div class="ct" data-a-up>
  399.                 <h2 class="h3">{{'Questions? We Have the Answers'|trans|raw}}</h2>
  400.                 <div class="btn-group">
  401.                     {{ m.btn('icons-ollam/contact', 'FAQ', path('faq'), {class:'btn'}) }}
  402.                     {{ m.btn('icons-ollam/contact', 'Contact', path('contact'), {class:'btn'}) }}
  403.                 </div>
  404.             </div>
  405.         </section>
  406.         <section class="preorder">
  407.             <div class="background-img">
  408.                 {{ m.img(asset('img/img-dices.jpg')) }}
  409.             </div>
  410.             <div class="ct" data-a-up>
  411.                 <h2 class="h2">
  412.                     {{'Legends tell that long ago...'|trans|raw}}
  413.                     <br>
  414.                     {{'...a tool could transform your imaginary worlds into reality'|trans|raw}}
  415.                 </h2>
  416.                 {% if app.request.locale == 'fr' %}
  417.                     {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }}
  418.                 {% else %}
  419.                     {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }}
  420.                 {% endif %}
  421.             </div>
  422.         </section>
  423.     </div>
  424. {% endblock %}