templates/app/ecommerce/list.html.twig line 1

Open in your IDE?
  1. {% import 'app/_inc/macros.html.twig' as m %}
  2. {% extends 'base.html.twig' %}
  4. {% block css %}
  5.     {{ encore_entry_link_tags('app-ecommerce-css') }}
  6.     {{ encore_entry_link_tags('app-swiper-css') }}
  7. {% endblock %}
  8. {% block js %}
  9.     {{ encore_entry_script_tags('app-swiper-js') }}
  10.     {{ encore_entry_script_tags('app-accordion-js') }}
  11. {#    {{ encore_entry_script_tags('app-shop-list-js') }}#}
  12. {% endblock %}
  14. {% block info %}
  15. {% endblock %}
  16. {% block content %}
  17.     <div id="page" class="shop_list">
  18.         <section>
  19.             <div class="background-img">
  20.                 {{ m.img(asset('img/homepage/bg_preorder.webp'), {width:1250, height:771, 'attr_img':{'alt':'Amsel Suite'|trans|raw}}) }}
  21.             </div>
  22.             <div class="ct">
  23.                 <h2 class="h2">{{ "Pay once. Enjoy it for life."|trans|raw }}</h2>
  24.                 <small>{{ "No subscriptions. No hidden fees. Just lifetime access"|trans|raw }}</small>
  25.                 {{ m.Breadcrumb('nav.shop', {link:{
  26.                     0:['nav.shop']
  27.                 }}) }}
  28.             </div>
  29.         </section>
  30.         <section class="shop-cards">
  31.             <div class="ct">
  32.                 <div class="cards-grid">
  33.                     {{ m.cardProduct(
  34.                         lore.id,
  35.                         "Lore",
  36.                         "Create your universe",
  37.                         lore.actualPrice,
  38.                         [
  39.                             "Customizable Templates",
  40.                             "Form module (Rune)",
  41.                             "Interactive maps",
  42.                             "Diagram",
  43.                             "Mirror link"
  44.                         ],
  45.                         {readMore:path('software-lore')}
  46.                     ) }}
  47.                     {{ m.cardProduct(
  48.                         tome.id,
  49.                         "Tome",
  50.                         "Design Scenarios",
  51.                         tome.actualPrice,
  52.                         [
  53.                             "Non-linear scenario",
  54.                             "Directory Sheets (Locations, Items, Characters...)",
  55.                             "Interactive maps",
  56.                             "Custom Framing Layouts",
  57.                             "Player Choice & Role Tracking"
  58.                         ],
  59.                         {readMore:path('software-tome')}
  60.                     ) }}
  61.                     {{ m.cardProduct(
  62.                         pack.id,
  63.                         "GM’s toolbox",
  64.                         "Create and design without limits",
  65.                         pack.actualPrice,
  66.                         [
  67.                             "Access to Lore: worldbuilding",
  68.                             "Access to Tome: scenario design",
  69.                             "Manage links between story and universe"
  70.                         ],
  71.                         {badge:"Best choice"}
  72.                     ) }}
  73.                 </div>
  74.                 <div class="info-cards-product">
  75.                     <div>{{ "Launch Offer. 34,99 € after June 30, 2025"|trans|raw }}</div>
  76.                     <div class="pack">{{ "Last weeks to get this offer. 59,99 € after June 30, 2025"|trans|raw }}</div>
  77.                 </div>
  78.             </div>
  79.         </section>
  81.         <section class="review">
  82.             <div class="background-img">
  83.                 {{ m.img(asset('img/homepage/bg_review_500px.webp'), {width:1250, height:771, 'attr_img':{'alt':'These dreamers share their stories'|trans|raw}}) }}
  84.             </div>
  85.             <div class="ct">
  86.                 <div class="title-review" data-a-up>
  87.                     <h2 class="h2">{{ 'Check out our reviews'|trans|raw }}</h2>
  88.                     <h3 class="h3">{{ "8,000+ users"|trans|raw }}</h3>
  89.                 </div>
  90.                 <div class="swiper" data-swiper="review">
  91.                     {{ m.SwiperNav('review') }}
  92.                     <div class="swiper-wrapper">
  93.                         {{ m.reviewCard(
  94.                             "Kaiser",
  95.                             "And the cherry on top: no subscription, just a one-time purchase. These days, that’s rare… and honestly, really refreshing.",
  96.                             "[…] cerise sur le gâteau : pas d’abonnement, juste un achat unique. À l’heure actuelle, c’est rare… et franchement, très appréciable.",
  97.                             "en"
  98.                         ) }}
  99.                         {{ m.reviewCard(
  100.                             "Thelos",
  101.                             "Amsel was a real eye-opener for me […] It gave shape and clarity to the messy vision of my needs that I’d been carrying for years.",
  102.                             "Amsel a été une véritable claque pour moi […] C’était mettre en images et en promesses la vision brouillonne des besoins que j’avais depuis des années.",
  103.                             "en"
  104.                         ) }}
  105.                         {{ m.reviewCard(
  106.                             "Meltintalle",
  107.                             "It’s great to follow the progress [of the software] and feel included in the journey, even as a user.",
  108.                             "C'est appréciable de suivre la progression [des logiciels] et de s'y sentir inclus, même en temps qu'utilisateur.",
  109.                             "en"
  110.                         ) }}
  111.                         {{ m.reviewCard(
  112.                             "Memnoich",
  113.                             "The Discord community is wonderful, and many members are willing to step up and help answer questions, guide new users, or offer opinions on the different ways to use the suite.",
  114.                             "La communauté Discord est formidable, et de nombreux membres sont prêts à intervenir pour répondre aux questions, guider les nouveaux utilisateurs ou partager leurs avis sur les différentes façons d’utiliser la suite.",
  115.                             "en"
  116.                         ) }}
  117.                         {{ m.reviewCard(
  118.                             "OliRO",
  119.                             "Amsel gives me access to powerful tools and offers a blank canvas where I can imagine the wildest ideas that come to mind.",
  120.                             "Amsel me donne accès à des outils et m'offre une toile blanche sur laquelle je peux imaginer les choses les plus folles qui me viennent à l'esprit.",
  121.                             "en"
  122.                         ) }}
  123.                     </div>
  124.                 </div>
  125.             </div>
  126.         </section>
  128.         <section class="comparator">
  129.             <div class="ct">
  130.                 <h2 class="h2" data-a-up>{{ "Compare solutions"|trans|raw }}</h2>
  131.                 {% include 'app/_inc/_comparator.html.twig' %}
  132.             </div>
  133.         </section>
  134.         <section class="banner-gift">
  135.             <div class="ct">
  136.                 <div class="banner-content" data-a-up>
  137.                     <h2 class="h2">{{ "The ultimate gift for RPG lovers"|trans|raw }}</h2>
  138.                     <p>{{ "For yourself or a fellow enthusiast, share the magic of role-playing games"|trans|raw }}</p>
  139.                     <a href="{{ path("faq") }}" title="{{ "Learn more"|trans|raw }}">
  140.                         {{ "Learn more"|trans|raw }}
  141.                     </a>
  142.                 </div>
  143.                 <div class="breathing" data-a-up>
  144.                     {{ m.img(asset('img/shop-gift.webp'), {width:292, height:297, 'attr_img':{'alt':'gift'|trans|raw}}) }}
  145.                 </div>
  146.             </div>
  147.         </section>
  148.         <section class="faq">
  149.             <div class="ct" data-a-up>
  150.                 <h2 class="h2">{{ "Common questions"|trans|raw }}</h2>
  151.                 {{ m.faqShop(
  152.                     "Why should I only buy Lore or Tome?",
  153.                     "We've created a package to satisfy all your needs. However, some creators only need <a href='%link1%' title='worldbuilding software'>worldbuilding software</a> like Lore or <a href='%link2%' title='storytelling software'>storytelling software</a> like Tome."|trans({
  154.                         '%link1%': path('software-lore'),
  155.                         '%link2%': path('software-tome')
  156.                     }),
  157.                     {class:"is-open"}
  158.                 ) }}
  159.                 {{ m.faqShop(
  160.                     "Are the programs compatible with my operating system?",
  161.                     "You bet! Software compatible with Windows, MacOS and Linux."
  162.                 ) }}
  163.                 {{ m.faqShop(
  164.                     "Is payment secure? What payment methods are available?",
  165.                     "All payments are processed via Stripe, a worldwide payment platform used by millions of companies. Your data is encrypted and protected. We use the secure Stripe platform for payments. You can pay by credit card, PayPal, iDEAL, BanContact."
  166.                 ) }}
  167.                 {{ m.faqShop(
  168.                     "How can I cancel my purchase?",
  169.                     "To cancel your order or to claim a refund, please use the <a href='%link1%' title='contact form'>contact form</a>."|trans({
  170.                         '%link1%': path('contact')
  171.                     })
  172.                 ) }}
  173.                 {{ m.faqShop(
  174.                     "What if I buy just one software package and then want the whole package?",
  175.                     "If you're happy with the first software, you can purchase the second one directly from our website, then download it via your launcher."
  176.                 ) }}
  177.                 {{ m.faqShop(
  178.                     "Is it possible to offer one of the software packages or the complete suite?",
  179.                     "Yes, just tick the “offer” box and enter the e-mail address of the lucky recipient. They'll receive an e-mail with an activation code."
  180.                 ) }}
  181.                 <small>{{ "Need more info or help? Check out our <a href='%link1%' title='FAQ'>FAQ</a> or contact our <a href='%link2%' title='support'>support</a> team."|trans({
  182.                         '%link1%': path('faq'),
  183.                         '%link2%': path('contact')
  184.                     })|raw }}</small>
  185.             </div>
  186.         </section>
  187.         <section class="community">
  188.             <div class="background-img">
  189.                 {{ m.img(asset('img/homepage/bg_features.webp'), {width:1250, height:771, 'attr_img':{'alt':'Community'|trans|raw}}) }}
  190.             </div>
  191.             <div class="ct" data-a-up>
  192.                 <div>
  193.                     <h2 class="h2">{{ "Join our community"|trans|raw }}</h2>
  194.                     <p>{{ "Discover creations from our users"|trans|raw }}</p>
  195.                     {{ m.btn('share/discord', 'Join the adventure', social.discord, {class:'btn'}) }}
  196.                 </div>
  197.             </div>
  198.         </section>
  199.     </div>
  200. {% endblock %}