templates/app/pages/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% import 'app/_inc/macros.html.twig' as m %}
  3. {% block css %}
  4.     {{ encore_entry_link_tags('app-index-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 lcp %}
  11.         {% if is_mobile() %}
  12.             {% if app.request.locale == 'fr' %}
  13.                 <link rel="preload" fetchpriority="high" href="{{ asset('img/homepage/500px/hero_fr_lore.webp') }}" as="image"/>
  14.             {% else %}
  15.                 <link rel="preload" fetchpriority="high" href="{{ asset('img/homepage/500px/hero_eng_lore.webp') }}" as="image"/>
  16.             {% endif %}
  17.         {% else %}
  18.             <link rel="preload" fetchpriority="high" href="{{ asset('img/bg-smoke.webp') }}" as="image"/>
  19.             <link rel="preload" href="{{ asset('img/white-tree.webp') }}" as="image"/>
  20.             <link rel="preload" href="{{ asset('img/black-tree.webp') }}" as="image"/>
  21.             {% if app.request.locale == 'fr' %}
  22.                 <link rel="preload" fetchpriority="high" href="{{ asset('img/homepage/900px/hero_fr_lore.webp') }}" as="image"/>
  23.                 <link rel="preload" fetchpriority="high" href="{{ asset('img/homepage/900px/hero_fr_tome.webp') }}" as="image"/>
  24.             {% else %}
  25.                 <link rel="preload" fetchpriority="high" href="{{ asset('img/homepage/900px/hero_eng_lore.webp') }}" as="image"/>
  26.                 <link rel="preload" fetchpriority="high" href="{{ asset('img/homepage/900px/hero_eng_tome.webp') }}" as="image"/>
  27.             {% endif %}
  28.         {% endif %}
  29.     {% endblock %}
  30. {% block content %}
  31.     <div id="home">
  33.         <section class="intro">
  34.             <div class="ct">
  35.                 <div class="title_page">
  36.                     <h2 class="h2">{{ "Amsel Suite, your faithful Game Master's companion"|trans|raw }}</h2>
  37.                     <div class="links">
  38.                         <p>{{ 'Complete solution'|trans|raw }}</p>
  39.                         <p>{{ 'No subscription'|trans|raw }}</p>
  40.                         <p>{{ 'Made for you'|trans|raw }}</p>
  41.                     </div>
  42.                 </div>
  43.                 <div class="links">
  44.                     {% if app.request.locale == 'fr' %}
  45.                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }}
  46.                     {% else %}
  47.                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }}
  48.                     {% endif %}
  49.                     <button title="{{ 'Learn more'|trans|raw }}" class="btn" data-scroll="#software_homepage">
  50.                         {{ m.icon('icons-ollam/contact') }}
  51.                         <span>{{ "Learn more"|trans|raw }}</span>
  52.                     </button>
  53.                 </div>
  54.                 <div class="intro_softwares breathing">
  55.                     {% if app.request.locale == 'fr' %}
  56.                         {% if is_mobile() %}
  57.                             {{ m.imgSource(
  58.                                 asset('img/homepage/500px/hero_fr_lore.webp'),
  59.                                 "Lore",
  60.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_fr_lore.webp'),
  61.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_fr_lore.webp')},
  62.                                 false,
  63.                                 "373",
  64.                                 "230",
  65.                                 null,
  66.                                 {fetchpriority:"high"}
  67.                             ) }}
  68.                             {{ m.imgSource(
  69.                                 asset('img/homepage/500px/hero_fr_tome.webp'),
  70.                                 "Tome",
  71.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_fr_tome.webp'),
  72.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_fr_tome.webp')},
  73.                                 true,
  74.                                 "373",
  75.                                 "230",
  76.                                 null
  77.                             ) }}
  78.                         {% else %}
  79.                             {{ m.imgSource(
  80.                                 asset('img/homepage/900px/hero_fr_lore.webp'),
  81.                                 "Lore",
  82.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_fr_lore.webp'),
  83.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_fr_lore.webp')},
  84.                                 false,
  85.                                 "695",
  86.                                 "429",
  87.                                 null,
  88.                             ) }}
  89.                             {{ m.imgSource(
  90.                                 asset('img/homepage/900px/hero_fr_tome.webp'),
  91.                                 "Tome",
  92.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_fr_tome.webp'),
  93.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_fr_tome.webp')},
  94.                                 false,
  95.                                 "695",
  96.                                 "429",
  97.                                 null,
  98.                             ) }}
  99.                         {% endif %}
  100.                     {% else %}
  101.                         {% if is_mobile() %}
  102.                             {{ m.imgSource(
  103.                                 asset('img/homepage/500px/hero_eng_lore.webp'),
  104.                                 "Lore",
  105.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_eng_lore.webp'),
  106.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_eng_lore.webp')},
  107.                                 false,
  108.                                 "373",
  109.                                 "230",
  110.                                 null,
  111.                                 {fetchpriority:"high"}
  112.                             ) }}
  113.                             {{ m.imgSource(
  114.                                 asset('img/homepage/500px/hero_eng_tome.webp'),
  115.                                 "Tome",
  116.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_eng_tome.webp'),
  117.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_eng_tome.webp')},
  118.                                 true,
  119.                                 "373",
  120.                                 "230",
  121.                                 null
  122.                             ) }}
  123.                         {% else %}
  124.                             {{ m.imgSource(
  125.                                 asset('img/homepage/900px/hero_eng_lore.webp'),
  126.                                 "Lore",
  127.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_eng_lore.webp'),
  128.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_eng_lore.webp')},
  129.                                 false,
  130.                                 "695",
  131.                                 "429",
  132.                                 null,
  133.                             ) }}
  134.                             {{ m.imgSource(
  135.                                 asset('img/homepage/900px/hero_eng_tome.webp'),
  136.                                 "Tome",
  137.                                 {"(min-width: 901px)":asset('img/homepage/900px/hero_eng_tome.webp'),
  138.                                     "(max-width: 900px)":asset('img/homepage/500px/hero_eng_tome.webp')},
  139.                                 false,
  140.                                 "695",
  141.                                 "429",
  142.                                 null,
  143.                             ) }}
  144.                         {% endif %}
  145.                     {% endif %}
  146.                 </div>
  147.             </div>
  148.             {% if is_mobile() is same as(false) %}
  149.                 <div class="night">
  150.                     {% for i in 1..10 %}
  151.                         <div class="star"></div>
  152.                     {% endfor %}
  153.                 </div>
  154.                 <div class="bg white-forest">
  155.                     <picture>
  156.                         <source srcset="{{ asset('img/white-tree.webp') }}" media="(min-width: 901px)"/>
  157.                         <img src="{{ asset('img/white-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707">
  158.                     </picture>
  159.                 </div>
  160.                 <div class="bg smoke">
  161.                     <picture>
  162.                         <source srcset="{{ asset('img/bg-smoke.webp') }}" media="(min-width: 901px)"/>
  163.                         <img loading="eager" src="{{ asset('img/bg-smoke.webp') }}" alt="Image Amsel Suite" width="2600" height="650">
  164.                     </picture>
  165.                 </div>
  166.                 <div class="bg black-forest">
  167.                     <picture>
  168.                         <source srcset="{{ asset('img/black-tree.webp') }}" media="(min-width: 901px)"/>
  169.                         <img src="{{ asset('img/black-tree.webp') }}" alt="Image Amsel Suite" width="1713" height="707">
  170.                     </picture>
  171.                 </div>
  172.             {% endif %}
  173.         </section>
  175.         {# Software #}
  176.         {% include 'app/pages/_softwares-homepage.html.twig' %}
  178.         <section class="product_price">
  179.             <div class="ct">
  180.                 <div data-a-up>
  181.                     <h2 class="h2">{{ 'Amsel Suite License'|trans|raw }}</h2>
  182.                     <p>{{ 'Get the Amsel Suite, TOME, and LORE on all operating systems :'|trans|raw }}</p>
  183.                 </div>
  184.                 <div class="content" data-a-up>
  185.                     <div class="product-order">
  186.                         {{ m.svg('lore', 'Lore') }}
  187.                         <div class="product-infos">
  188.                             <h3 class="h4">{{ 'Lore'|trans|raw }}</h3>
  189.                             <p>{{ 'World creation'|trans|raw }}</p>
  190.                             <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small>
  191.                         </div>
  192.                     </div>
  193.                     <p><strong>{{ "+" }}</strong></p>
  194.                     <div class="product-order">
  195.                         {{ m.svg('tome', 'Tome') }}
  196.                         <div class="product-infos">
  197.                             <h3 class="h4">{{ 'Tome'|trans|raw }}</h3>
  198.                             <p>{{ 'Story design'|trans|raw }}</p>
  199.                             <small>{{ 'Windows, MacOS, Linux'|trans|raw }}</small>
  200.                         </div>
  201.                     </div>
  202.                 </div>
  203.                 <div class="price" data-a-up>
  204.                     <div>
  205.                         <p class="h3">{{ '49,99'|trans|raw }}{{ " €" }}</p>
  206.                     </div>
  207.                     <p>{{ 'One-time payment - All taxes included'|trans|raw }}</p>
  208.                     {% if app.request.locale == 'fr' %}
  209.                         {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta-secondary'}) }}
  210.                     {% else %}
  211.                         {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta-secondary'}) }}
  212.                     {% endif %}
  213.                 </div>
  214.             </div>
  215.         </section>
  217.         <section class="features">
  218.             <div class="background-img">
  219.                 {{ m.img(asset('img/homepage/bg_features.webp'), {width:1250, height:771, 'attr_img':{'alt':'What kind of adventurer are you?'|trans|raw}}) }}
  220.             </div>
  221.             <div class="ct">
  222.                 <div data-a-up>
  223.                     <h2 class="h2">{{ 'What kind of adventurer are you?'|trans|raw }}</h2>
  224.                     <p>{{ 'Whether you are a beginner or experienced G/DM, Amsel meets your needs with intuitive features for all roles.'|trans|raw }}</p>
  225.                 </div>
  226.                 <div class="swiper" data-swiper="all">
  227.                     {{ m.SwiperNav('all') }}
  228.                     <div class="swiper-wrapper">
  229.                         <div class="swiper-slide card_icon" data-a-up>
  230.                             <div class="info">{{ 'World Creator'|trans|raw }}</div>
  231.                             {{ m.icon('home/feature_1') }}
  232.                             <h3><strong>{{ 'Imagine'|trans|raw }}</strong></h3>
  233.                             <p>{{ 'Rich, detailed universes with customization options.'|trans|raw }}</p>
  234.                         </div>
  235.                         <div class="swiper-slide card_icon" data-a-up>
  236.                             <div class="info">{{ 'Storyteller'|trans|raw }}</div>
  237.                             {{ m.icon('home/feature_2') }}
  238.                             <h3><strong>{{ 'Design'|trans|raw }}</strong></h3>
  239.                             <p>{{ 'Immersive and engaging stories.'|trans|raw }}</p>
  240.                         </div>
  241.                         <div class="swiper-slide card_icon" data-a-up>
  242.                             <div class="info">{{ 'Writer'|trans|raw }}</div>
  243.                             {{ m.icon('home/feature_3') }}
  244.                             <h3><strong>{{ 'Express'|trans|raw }}</strong></h3>
  245.                             <p>{{ 'Your creativity and write captivating stories.'|trans|raw }}</p>
  246.                         </div>
  247.                         <div class="swiper-slide card_icon" data-a-up>
  248.                             <div class="info">{{ 'Campaign Manager'|trans|raw }}</div>
  249.                             {{ m.icon('home/feature_4') }}
  250.                             <h3><strong>{{ 'Orchestrate'|trans|raw }}</strong></h3>
  251.                             <p>{{ 'Smooth game sessions and a satisfying gaming experience.'|trans|raw }}</p>
  252.                         </div>
  253.                         <div class="swiper-slide card_icon" data-a-up>
  254.                             <div class="info">{{ 'Explorer'|trans|raw }}</div>
  255.                             {{ m.icon('home/feature_5') }}
  256.                             <h3><strong>{{ 'Discover'|trans|raw }}</strong></h3>
  257.                             <p>{{ 'New possibilities and push the limits of your creativity with Amsel.'|trans|raw }}</p>
  258.                         </div>
  259.                     </div>
  260.                 </div>
  262.             </div>
  263.         </section>
  265.         <section class="review">
  266.             <div class="background-img">
  267.                 {% if is_mobile() %}
  268.                     {{ m.imgSource(
  269.                         asset('img/homepage/bg_review_500px.webp'),
  270.                         'These dreamers share their stories'|trans|raw,
  271.                         {"(min-width: 901px)":asset('img/homepage/bg_review_900px.webp'),
  272.                             "(max-width: 900px)":asset('img/homepage/bg_review_500px.webp')},
  273.                         true,
  274.                         "900",
  275.                         "1125",
  276.                         null
  277.                     ) }}
  278.                 {% else %}
  279.                     {{ m.imgSource(
  280.                         asset('img/homepage/bg_review_900px.webp'),
  281.                         'These dreamers share their stories'|trans|raw,
  282.                         {"(min-width: 901px)":asset('img/homepage/bg_review_900px.webp'),
  283.                             "(max-width: 900px)":asset('img/homepage/bg_review_500px.webp')},
  284.                         true,
  285.                         "500",
  286.                         "625",
  287.                         null
  288.                     ) }}
  289.                 {% endif %}
  290.             </div>
  291.             <div class="ct">
  292.                 <div data-a-up>
  293.                     <h2 class="h2">{{ 'These dreamers share their stories'|trans|raw }}</h2>
  294.                 </div>
  295.                 <div class="swiper" data-swiper="review">
  296.                     {{ m.SwiperNav('review') }}
  297.                     <div class="swiper-wrapper">
  298.                         {{ m.reviewCard(
  299.                             "Alexander",
  300.                             "The Amsel Suite is the one place for everything in your tabletop game. Any game. Really.",
  301.                             "The Amsel Suite is the one place for everything in your tabletop game. Any game. Really.",
  302.                             "fr"
  303.                         ) }}
  304.                         {{ m.reviewCard(
  305.                             "ElvenLady",
  306.                             "I also really appreciate the one time pricing - in a world where everything is subscription based, I love the fact that I can pay one price and not worry about the program lapsing.",
  307.                             "I also really appreciate the one time pricing - in a world where everything is subscription based, I love the fact that I can pay one price and not worry about the program lapsing.",
  308.                             "fr"
  309.                         ) }}
  310.                         {{ m.reviewCard(
  311.                             "Meltintalle",
  312.                             "The interfaces and features are clear, with their practicality being one of their main strengths, allowing for a quick start when laying the groundwork.",
  313.                             "Les interfaces et les fonctionnalités sont claires, leur praticité étant un de leurs atouts majeurs, permettant une prise en main rapide pour poser les premières bases.",
  314.                             "en"
  315.                         ) }}
  316.                         {{ m.reviewCard(
  317.                             "Keïten",
  318.                             "The team is efficient at developing and fixing bugs, and the tutorials available on the website make it easy to understand how to use the various tools. The community is fantastic and always ready to help.",
  319.                             "L'équipe développe et corrige les bugs avec efficacité, les tutos disponibles sur le site permettent de bien comprendre la manière d’utilisation des différents outils et la communauté est top et toujours prête à aider.",
  320.                             "en"
  321.                         ) }}
  322.                         {{ m.reviewCard(
  323.                             "Thelos",
  324.                             "Having everything I need to prepare and run my sessions in one place is a huge time-saver.",
  325.                             "Rassembler en un seul endroit tout ce dont j’ai besoin pour préparer et jouer mes séances est un véritable gain de temps phénoménal.",
  326.                             "en"
  327.                         ) }}
  328.                     </div>
  329.                 </div>
  330.             </div>
  331.         </section>
  333.         <section class="numbers">
  334.             <div class="bg img-sticker">
  335.                 {{ m.img(asset('img/crystal.png'), {'attr_img':{'alt':"Amsel Suite"}}) }}
  336.             </div>
  337.             <div class="ct">
  338.                 <div data-a-up>
  339.                     <h3 class="h2">{{ '6,000+ contributors'|trans|raw }}</h3>
  340.                     <p>{{ 'trusted us during our crowdfunding phase, allowing us to realize this ambitious project.'|trans|raw }}</p>
  341.                 </div>
  342.                 <div data-a-up>
  343.                     <h3 class="h2">{{ '1,200+ beta testers'|trans|raw }}</h3>
  344.                     <p>{{ 'help us every day to ensure an exceptional quality release.'|trans|raw }}</p>
  345.                 </div>
  346.                 <div data-a-up>
  347.                     <p>{{ 'Our community now spans'|trans|raw }}</p>
  348.                     <h3 class="h2">{{ '60+ countries,'|trans|raw }}</h3>
  349.                     <p>{{ 'bringing together users from around the world.'|trans|raw }}</p>
  350.                 </div>
  351.                 <div data-a-up>
  352.                     <p>{{ 'Supported by'|trans|raw }}</p>
  353.                     <h3 class="h2">{{ 'BPI France 2030,'|trans|raw }}</h3>
  354.                     <p>{{ 'our software benefits from strong institutional backing, ensuring innovation and quality.'|trans|raw }}</p>
  355.                 </div>
  356.             </div>
  357.         </section>
  360.         <section class="news">
  361.             <div class="ct">
  362.                 <div data-a-up>
  363.                     <h2 class="h2">{{ 'Adventurers’ Chronicle: Stay informed.'|trans|raw }}</h2>
  364.                     <p>{{ 'News, behind the scenes, and other shenanigans.'|trans|raw }}</p>
  365.                 </div>
  366.                 {% if articles|length > 0 %}
  367.                     <div class="all_actus swiper" data-swiper="all">
  368.                         {{ m.SwiperNav('all') }}
  369.                         <div class="swiper-wrapper">
  370.                             {% for a in articles %}
  371.                                 <div class="swiper-slide">
  372.                                     {{ m.Actu(a) }}
  373.                                 </div>
  374.                             {% endfor %}
  375.                         </div>
  376.                     </div>
  377.                 {% endif %}
  378.                 {% include 'app/_inc/_newsletter.html.twig' %}
  379.             </div>
  380.             <div class="bg white-forest">
  381.                 {{ m.imgSource(
  382.                     asset('img/white-tree.webp'),
  383.                     "Image Amsel Suite",
  384.                     {"(min-width: 1px)":asset('img/white-tree.webp')},
  385.                     true,
  386.                     "1713",
  387.                     "707",
  388.                     null
  389.                 ) }}
  390.             </div>
  391.             <div class="bg black-forest">
  392.                 {{ m.imgSource(
  393.                     asset('img/black-tree.webp'),
  394.                     "Image Amsel Suite",
  395.                     {"(min-width: 1px)":asset('img/black-tree.webp')},
  396.                     true,
  397.                     "1713",
  398.                     "707",
  399.                     null
  400.                 ) }}
  401.             </div>
  402.         </section>
  404.         <section class="community">
  405.             <div class="ct">
  406.                 <div class="left" data-a-up>
  407.                     {{ m.img(asset('img/homepage/discord.webp'), {'attr_img':{'alt':'Discord'|trans|raw}}) }}
  408.                     <div class="community_content" data-a-up>
  409.                         <h2 class="h4">{{ "Get feedback <br>from world creators"|trans|raw }}</h2>
  410.                         {{ m.btn('share/discord', 'Discord', social.discord, {class:'btn'}) }}
  411.                     </div>
  412.                 </div>
  413.                 <div class="right" data-a-up>
  414.                     {{ m.img(asset('img/homepage/instagram.webp'), {'attr_img':{'alt':'Instagram'|trans|raw}}) }}
  415.                     <div class="community_content" data-a-up>
  416.                         <h2 class="h4">{{ "Follow us <br>for exclusive info and tips"|trans|raw }}</h2>
  417.                         {{ m.btn('share/instagram', 'Instagram', social.instagram, {class:'btn'}) }}
  418.                     </div>
  419.                 </div>
  420.             </div>
  421.         </section>
  423.         <section class="preorder">
  424.             <div class="background-img">
  425.                 {{ m.img(asset('img/homepage/bg_preorder.webp'), {width:1250, height:771, 'attr_img':{'alt':'Amsel Suite'|trans|raw}}) }}
  426.             </div>
  427.             <div class="ct" data-a-up>
  428.                 <h2 class="h2">{{ 'Dive into a new role-playing game format!'|trans|raw }}</h2>
  429.                 {% if app.request.locale == 'fr' %}
  430.                     {{ m.btn('icons-ollam/contact', 'Acheter dès maintenant', path('shop'), {class:'btn btn-cta'}) }}
  431.                 {% else %}
  432.                     {{ m.btn('icons-ollam/contact', 'Buy now', path('shop'), {class:'btn btn-cta'}) }}
  433.                 {% endif %}
  434.             </div>
  435.         </section>
  437.     </div>
  439. {% endblock %}