templates/website/page/index.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% block body %}
  4.     <script>
  5.         /* Theme boot */
  6.         (() => {
  7.             const saved = localStorage.getItem('theme');
  8.             if (saved) document.documentElement.setAttribute('data-theme', saved);
  9.             else document.documentElement.setAttribute('data-theme',
  10.                 matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  11.             );
  12.         })();
  13.     </script>
  15.     <div class="section-container">
  16.         <!-- HOME SECTION -->
  17.         <section class="page-section active" id="home-section">
  18.             <header class="hero" id="home" aria-label="Hero">
  19.                 <video autoplay muted loop playsinline poster="{{ asset('media/hero-poster.jpg') }}">
  20.                     <source src="{{ asset('students/big_room_video1.mp4') }}" type="video/mp4" />
  21.                 </video>
  22.                 <div class="hero-inner">
  23.                     <div>
  24.                         <span class="badge">Calm • Clear • Exam-style</span>
  25.                         <h1 class="title">
  26.                             Prepare for <span class="rotator" aria-live="polite"><br>
  27.                                 <span>EFL tests</span>
  28.                                 <span>SAT</span>
  29.                                 <span>IELTS</span>
  30.                                 <span>ACT</span>
  31.                             </span> with total focus
  32.                         </h1>
  33.                         <p class="subtitle">Minimal clicks. Real formats. A beautiful flow that makes studying feel
  34.                             natural.</p>
  35.                         <div class="motivation">
  36.                             <span class="mdot"></span> Small sessions. Daily rhythm. Big results.
  37.                         </div>
  38.                         <div class="hero-cta">
  39.                             <a class="cta" id="startHero" href="{{ path('page_test_selection') }}">Diagnostic free EFL
  40.                                 test</a>&nbsp;&nbsp;
  41.                             <a class="cta" id="startHero2" href="{{ path('page_test_sat_selection') }}">Diagnostic free SAT
  42.                                 test</a>
  43.                         </div>
  44.                     </div>
  46.                     <div class="reveal">
  47.                         <div class="hero-card hero-card-photo" id="heroCard">
  48.                             <div style="max-width:42ch; text-align:center">
  49.                                 <h3>"Understand first. Speed follows."</h3>
  50.                                 <p>Short focused blocks, clean UI, smart review. Come back tomorrow — consistency
  51.                                     compounds.</p>
  52.                                 <div class="chips" aria-hidden="true">
  53.                                     <span class="chip">Focus timer</span>
  54.                                     <span class="chip">Clean math UI</span>
  55.                                     <span class="chip">Real passages</span>
  56.                                 </div>
  57.                             </div>
  58.                         </div>
  59.                     </div>
  61.                 </div>
  62.             </header>
  63.         </section>
  65.         <!-- MENTORS SECTION -->
  66.         <section class="page-section" id="mentors-section">
  67.             <div class="section" id="mentors" aria-label="Meet the mentors">
  68.   <div style="border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 22px 20px; background: transparent; backdrop-filter: blur(0px);">
  69.     
  70.     <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap;">
  71.       <div style="min-width:260px; flex:1;">
  72.         <h2 style="margin: 0 0 10px; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;">
  73.           About Vrshikyans
  74.         </h2>
  75.         <p style="margin: 0; font-size: 15px; line-height: 1.7; opacity: 0.9;">
  76.           Vrshikyans.com is a focused test-prep space built by two experienced mentors, <strong style="font-weight:700;">Hasmik and Heghine Vrshikyans</strong>.
  77.           Our goal is simple: help students train with clarity, build confidence, and walk into exam day feeling ready.
  78.         </p>
  79.       </div>
  81.       <div style="display:flex; gap:10px; align-items:center; flex-wrap:wrap;">
  82.         <span style="display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 13px; opacity: 0.92;">
  83.           <span style="font-weight:700;">60+</span> ACT tests
  84.         </span>
  85.         <span style="display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 13px; opacity: 0.92;">
  86.           <span style="font-weight:700;">60+</span> SAT tests
  87.         </span>
  88.         <span style="display:inline-flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 13px; opacity: 0.92;">
  89.           <span style="font-weight:700;">90+</span> EFL tests
  90.         </span>
  91.       </div>
  92.     </div>
  94.     <div style="margin-top: 18px; display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px;">
  95.       
  96.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px 16px; background: transparent;">
  97.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;">
  98.           Realistic experience, real progress
  99.         </h3>
  100.         <p style="margin: 0; font-size: 14px; line-height: 1.75; opacity: 0.9;">
  101.           Our practice tests are designed to feel like the real exams — with familiar structure, timing, and navigation —
  102.           so students can focus on strategy, speed, and accuracy. Every attempt is saved to your account, so you can track results,
  103.           spot patterns, and measure improvement over time.
  104.         </p>
  105.       </div>
  107.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px 16px; background: transparent;">
  108.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;">
  109.           Your dashboard keeps everything organized
  110.         </h3>
  111.         <ul style="margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.8; opacity: 0.92;">
  112.           <li>Results are automatically saved to your profile</li>
  113.           <li>Progress becomes visible and motivating</li>
  114.           <li>Training feels structured, not chaotic</li>
  115.         </ul>
  116.       </div>
  118.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px 16px; background: transparent;">
  119.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em;">
  120.           Support and community
  121.         </h3>
  122.         <p style="margin: 0; font-size: 14px; line-height: 1.75; opacity: 0.9;">
  123.           Preparation shouldn’t feel lonely. If you have questions or need help, tap the <strong style="font-weight:700;">Support</strong> button below and we’ll guide you.
  124.           You can also read reviews from other learners — or share your own experience to help future students choose confidently.
  125.         </p>
  127.         <div style="margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap;">
  128.           <!-- Keep these as anchors/buttons and wire them to your existing sections/routes -->
  129.           <a href="{{ path('page_support') }}" style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: transparent; font-size: 14px; font-weight: 700;">
  130.             Contact Support
  131.           </a>
  132.           <a href="{{ path('page_reviews') }}" style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: transparent; font-size: 14px; font-weight: 700; opacity: 0.9;">
  133.             Read / Write Reviews
  134.           </a>
  135.         </div>
  136.       </div>
  138.     </div>
  140.     <div style="margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.10);">
  141.       <p style="margin: 0; font-size: 13px; line-height: 1.7; opacity: 0.75;">
  142.         Learn more about the mentors below — Hasmik and Heghine Vrshikyans — and the experience they bring to every student on the platform.
  143.       </p>
  144.     </div>
  146.   </div>
  148.                 <div class="inner">
  149.                     <h2 class="h2">Meet your mentors</h2>
  150.                     <p class="lead">
  151.                         Vrshikyans is led by experienced teachers who've guided thousands of learners to top
  152.                         scores. Beautiful design meets serious results.
  153.                     </p>
  155.                     <div class="mentors">
  156.                         <!-- Ms Heghine -->
  157.                         <article class="mentor reveal">
  158.                             <span class="ribbon-top" aria-hidden="true">SAT • ACT</span>
  159.                             <div class="avatar">
  160.                                 <img src="{{ asset('students/heghine.jpg') }}" alt="Ms Heghine portrait"
  161.                                      onerror="this.remove();this.parentElement.textContent='H';">
  162.                             </div>
  163.                             <div class="meta">
  164.                                 <h3>Ms Heghine</h3>
  165.                                 <p class="role">SAT & ACT Teacher • Owner</p>
  166.                                 <p class="bio">
  167.                                     Over <b>2,000</b> students taught. Many hit a perfect <b>1600 SAT</b>, and the
  168.                                     majority score <b>790+ in Math</b>.
  169.                                     Master's degree, studied abroad. Calm, clear methods that build speed through
  170.                                     understanding.
  171.                                 </p>
  172.                                 <div class="stats" aria-label="Key highlights">
  173.                                     <span class="stat">1600 SAT achievers</span>
  174.                                     <span class="stat">790+ Math majority</span>
  175.                                     <span class="stat">2,000+ students</span>
  176.                                     <span class="stat">Master's • Abroad</span>
  177.                                 </div>
  178.                             </div>
  179.                         </article>
  181.                         <!-- Ms Hasmik -->
  182.                         <article class="mentor reveal">
  183.                             <span class="ribbon-top" aria-hidden="true">TOEFL • IELTS</span>
  184.                             <div class="avatar">
  185.                                 <img src="{{ asset('students/hasmik.jpg') }}" alt="Ms Hasmik portrait"
  186.                                      onerror="this.remove();this.parentElement.textContent='H';">
  187.                             </div>
  188.                             <div class="meta">
  189.                                 <h3>Ms Hasmik</h3>
  190.                                 <p class="role">TOEFL & IELTS Teacher • Owner</p>
  191.                                 <p class="bio">
  192.                                     Taught <b>2,000+</b> students. Most achieve outstanding results like <b>115+
  193.                                         TOEFL</b>
  194.                                     or <b>8.5+ IELTS</b>.
  195.                                     Master's degree, studied abroad. Strategy-first lessons that make hard tasks feel
  196.                                     simple.
  197.                                 </p>
  198.                                 <div class="stats" aria-label="Key highlights">
  199.                                     <span class="stat">115+ TOEFL</span>
  200.                                     <span class="stat">8.5+ IELTS</span>
  201.                                     <span class="stat">2,000+ students</span>
  202.                                     <span class="stat">Master's • Abroad</span>
  203.                                 </div>
  204.                             </div>
  205.                         </article>
  206.                     </div>
  208.                     <div class="reviews-cta">
  209.                         <a class="cta" href="{{ path('page_reviews') }}"
  210.                            aria-label="Read student reviews about Ms Heghine and Ms Hasmik">
  211.                             Read Reviews (scores & opinions)
  212.                         </a>
  213.                     </div>
  214.                     <div class="reviews-cta">
  215.                         <a class="cta" href="{{ path('page_support') }}"
  216.                            aria-label="Contact our support to get fast and detailed answers on questions that you are insterested in.">
  217.                             Support page (ask questions)
  218.                         </a>
  219.                     </div>
  220.                     <p class="lead" style="text-align:center; margin-top:10px">
  221.                         Students share verified scores and write honest opinions about Ms Heghine &amp; Ms Hasmik on our
  222.                         reviews page.
  223.                     </p>
  224.                 </div>
  225.             </div>
  226.         </section>
  228.         <!-- STUDENTS SECTION -->
  229.         <section class="page-section" id="students-section">
  230.             <div class="section" id="students" aria-label="Our students and results">
  231.                 <div class="inner">
  232.                     <div class="students-block">
  233.                         <h2 class="h2">Our students & their scores</h2>
  234.                         <p class="lead">
  235.                             Vrshikyans students quietly collect <b>top scores</b> — while balancing school, olympiads,
  236.                             university applications and real life. They come back week after week, sit in calm
  237.                             exam-style
  238.                             rooms, and treat every practice test like a rehearsal for the real thing.
  239.                         </p>
  240.                         <p class="lead" style="margin-top:6px;">
  241.                             Many of them hit <b>115+ TOEFL</b>, <b>8.5+ IELTS</b>, <b>1500–1600 SAT</b> and strong ACT
  242.                             scores. The atmosphere is friendly, but the standards are high.
  243.                         </p>
  245.                         <!-- student cards rendered by JS -->
  246.                         <div id="studentCards" class="student-grid"></div>
  248.                         <!-- Visual gallery: photos + videos -->
  249.                         <div class="gallery" style="margin-top:22px;">
  250.                             <figure class="reveal">
  251.                                 <img src="students/big_room_whole_photo.jpg"
  252.                                     alt="Vrshikyans TOEFL and SAT group in the big room">
  253.                             </figure>
  255.                             <figure class="reveal">
  256.                                 <video autoplay muted loop playsinline>
  257.                                     <source src="../students/11.mp4" type="video/mp4" />
  258.                                 </video>
  259.                             </figure>
  261.                             <figure class="reveal">
  262.                                 <img src="students/sat_group_big_table_photo.jpg"
  263.                                     alt="Students solving SAT and TOEFL questions together at a big table">
  264.                             </figure>
  266.                             <figure class="reveal">
  267.                                 <img src="students/10.jpg"
  268.                                     alt="TOEFL speaking and writing prep group photo from above">
  269.                             </figure>
  271.                             <figure class="reveal">
  272.                                 <img src="students/2.jpg"
  273.                                     alt="TOEFL speaking and writing prep group photo from above">
  274.                             </figure>
  276.                             <figure class="reveal">
  277.                                 <img src="students/sat_group_small_room_photo.jpg"
  278.                                     alt="Calm late-evening prep group working on practice tests">
  279.                             </figure>
  280.                             <figure class="reveal">
  281.                                 <img src="students/group_photo_top.jpg"
  282.                                     alt="TOEFL speaking and writing prep group photo from above">
  283.                             </figure>
  285.                             <figure class="reveal">
  286.                                 <img src="students/7.jpg"
  287.                                     alt="TOEFL speaking and writing prep group photo from above">
  288.                             </figure>
  290.                             <figure class="reveal">
  291.                                 <img src="students/4.jpg"
  292.                                     alt="Calm late-evening prep group working on practice tests">
  293.                             </figure>
  294.                         </div>
  296.                         <!-- Soft CTA -->
  297.                         <div class="band" style="margin-top:24px;">
  298.                             <p class="lead" style="margin:0;">
  299.                                 Your name can be here too. Start with a full free TOEFL-style test and begin building
  300.                                 your score step by step.
  301.                             </p>
  302.                             <a class="cta" href="{{ path('page_test_selection') }}"
  303.                                aria-label="Take a free TOEFL test and join our students">
  304.                                 Try a free TOEFL test
  305.                             </a>
  306.                         </div>
  307.                     </div>
  308.                 </div>
  309.             </div>
  310.         </section>
  312.         <!-- VALUE SECTION -->
  313.         <section class="page-section" id="value-section">
  314.             <div id="contacts" aria-label="Contacts" style="max-width: 980px; margin: 0 auto; padding: 28px 18px;">
  315.   <div style="border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; padding: 22px 20px; background: transparent;">
  316.     
  317.     <h2 style="margin: 0 0 16px; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700;">
  318.       Contact Information
  319.     </h2>
  321.     <p style="margin: 0 0 20px; font-size: 14px; line-height: 1.7; opacity: 0.85;">
  322.       We believe every big achievement begins with one courageous step. 
  323.       Reach out when you're ready to start your journey.
  324.     </p>
  326.     <div style="display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px;">
  327.       
  328.       <!-- Hasmik -->
  329.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px; background: transparent;">
  330.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700;">
  331.           Hasmik Vrshikyan
  332.         </h3>
  334.         <p style="margin: 0 0 10px; font-size: 14px; opacity: 0.9;">
  335.           Phone: 
  336.           <a href="tel:+37441779995" style="text-decoration:none; font-weight:700;">
  337.             +374 41 779995
  338.           </a>
  339.         </p>
  341.         <a href="https://wa.me/37441779995?text=Hello!%20I%20am%20ready%20to%20achieve%20my%20dreams%20and%20start%20preparing%20seriously.%20I%20would%20love%20your%20guidance."
  342.            target="_blank"
  343.            style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); font-size: 13px; font-weight:700;">
  344.           Message on WhatsApp
  345.         </a>
  346.       </div>
  348.       <!-- Heghine -->
  349.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px; background: transparent;">
  350.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700;">
  351.           Heghine Vrshikyan
  352.         </h3>
  354.         <p style="margin: 0 0 10px; font-size: 14px; opacity: 0.9;">
  355.           Phone: 
  356.           <a href="tel:+37495512737" style="text-decoration:none; font-weight:700;">
  357.             +374 95 512737
  358.           </a>
  359.         </p>
  361.         <a href="https://wa.me/37495512737?text=Hello!%20I%20am%20ready%20to%20achieve%20my%20dreams%20and%20start%20preparing%20seriously.%20I%20would%20love%20your%20guidance."
  362.            target="_blank"
  363.            style="text-decoration:none; display:inline-flex; align-items:center; justify-content:center; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); font-size: 13px; font-weight:700;">
  364.           Message on WhatsApp
  365.         </a>
  366.       </div>
  368.       <!-- Address -->
  369.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px; background: transparent;">
  370.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700;">
  371.           Address
  372.         </h3>
  373.         <p style="margin: 0; font-size: 14px; opacity: 0.9;">
  374.           Avet Avetisyan 25
  375.         </p>
  376.       </div>
  378.       <!-- Email -->
  379.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px; background: transparent;">
  380.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700;">
  381.           General Email
  382.         </h3>
  383.         <p style="margin: 0; font-size: 14px;">
  384.           <a href="mailto:vrshikyanstests@gmail.com" style="text-decoration:none; font-weight:700;">
  385.             vrshikyanstests@gmail.com
  386.           </a>
  387.         </p>
  388.       </div>
  390.       <!-- Developer -->
  391.       <div style="grid-column: span 12; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 16px; background: transparent;">
  392.         <h3 style="margin: 0 0 8px; font-size: 16px; font-weight: 700;">
  393.           Made by
  394.         </h3>
  395.         <p style="margin: 0; font-size: 14px;">
  396.           <a href="mailto:artyom19032008@gmail.com" style="text-decoration:none; font-weight:700;">
  397.             artyom19032008@gmail.com
  398.           </a>
  399.         </p>
  400.       </div>
  402.     </div>
  404.   </div>
  405. </div>
  407.         </section>
  409.         <!-- EXAMS SECTION -->
  410.         <section class="page-section" id="exams-section">
  411.             <div class="section" id="exams" aria-label="Exam info">
  412.                 <div class="inner">
  413.                     <h2 class="h2" style="text-align: center;">At a glance</h2>
  414.                     <div class="tile reveal">
  415.                         <h3 class="motivation">EFL tests 2026(NEW)®</h3><br>
  416.                         <a href="{{ path('page_test_selection') }}?type=toefl2026" style="color: rgb(14, 14, 169);">Choose a
  417.                             TOEFL 2026 Test</a>
  418.                         <div class="kv">
  419.                             <div><b>Reading</b><span>2 passages • 35 min</span></div>
  420.                             <div><b>Listening</b><span>5 sets • 41–57 min</span></div>
  421.                             <div><b>Writing</b><span>2 tasks • 29 min</span></div>
  422.                             <div><b>Speaking</b><span>4 tasks • 16 min</span></div>
  423.                         </div>
  424.                     </div>
  425.                 </div>
  426.                 <div class="inner">
  427.                     <div class="grid-2">
  428.                         <div class="tile reveal">
  429.                             <h3>EFL tests®</h3>
  430.                             <a href="{{ path('page_test_selection') }}?type=toefl" style="color: rgb(14, 14, 169);">Choose a
  431.                                 TOEFL Test</a>
  432.                             <div class="kv">
  433.                                 <div><b>Reading</b><span>2 passages • 35 min</span></div>
  434.                                 <div><b>Listening</b><span>5 sets • 41–57 min</span></div>
  435.                                 <div><b>Speaking</b><span>4 tasks • 16 min</span></div>
  436.                                 <div><b>Writing</b><span>2 tasks • 29 min</span></div>
  437.                             </div>
  438.                         </div>
  440.                         <div class="tile reveal">
  441.                             <h3>SAT®</h3>
  442.                             <a href="{{ path('page_test_sat_selection') }}#sat" style="color: rgb(14, 14, 169);">Choose an
  443.                                 SAT
  444.                                 Test</a>
  445.                             <div class="kv">
  446.                                 <div><b>R&amp;W</b><span>Short passages • Skills</span></div>
  447.                                 <div><b>Math</b><span>Calculator throughout</span></div>
  448.                                 <div><b>Timing</b><span>~2h 14m</span></div>
  449.                                 <div><b>Scale</b><span>1600</span></div>
  450.                             </div>
  451.                         </div>
  453.                         <div class="tile reveal">
  454.                             <h3>IELTS® Academic</h3>
  455.                             <a href="{{ path('page_test_selection') }}" style="color: rgb(14, 14, 169);">Choose an
  456.                                 IELTS-style
  457.                                 Test</a>
  458.                             <div class="kv">
  459.                                 <div><b>Listening</b><span>4 sections • ~30 min</span></div>
  460.                                 <div><b>Reading</b><span>3 passages • 60 min</span></div>
  461.                                 <div><b>Writing</b><span>2 tasks • 60 min</span></div>
  462.                                 <div><b>Speaking</b><span>3 parts • 11–14 min</span></div>
  463.                             </div>
  464.                         </div>
  466.                         <div class="tile reveal">
  467.                             <h3>ACT®</h3>
  468.                             <a href="{{ path('page_test_sat_selection') }}#act" style="color: rgb(14, 14, 169);">Choose an
  469.                                 ACT
  470.                                 Test</a>
  471.                             <div class="kv">
  472.                                 <div><b>English</b><span>75 questions • 45 min</span></div>
  473.                                 <div><b>Math</b><span>60 questions • 60 min</span></div>
  474.                                 <div><b>Reading</b><span>40 questions • 35 min</span></div>
  475.                                 <div><b>Science</b><span>40 questions • 35 min</span></div>
  476.                             </div>
  477.                         </div>
  478.                     </div>
  479.                     <div class="tile reveal" style="text-align: center; margin-top: 12px;">
  480.                         <h3 class="motivation">66 reading practice tests</h3><br>
  481.                         <a href="{{ path('page_test_selection') }}?type=readingPractice"
  482.                            style="color: rgb(14, 14, 169);">Choose a
  483.                             reading practice test</a>
  484.                         <div class="kv">
  485.                             <div><b>Reading</b><span>5 passages • 50 min</span></div>
  486.                             <div><b>Reading</b><span>50 questions</span></div>
  487.                             <div><b>Style</b><span>Designed like real tests</span></div>
  488.                         </div>
  489.                     </div>
  490.                 </div>
  491.             </div>
  492.         </section>
  494.         <!-- PRICING SECTION -->
  495.         <section class="page-section" id="pricing-section">
  496.             <div class="section" id="pricing" aria-label="Subscription plans">
  497.                 <div class="inner">
  498.                     <h2 class="h2">Plans that match your pace</h2>
  499.                     <p class="lead">Start simple or go all-in. Real exam layout, focus tools, and a calm UI in every
  500.                         plan.</p>
  501.                     {% for package in packages|filter(p => p.info.type == 'Best') %}
  502.                         <article class="plan" aria-labelledby="plan-month" style="text-align: center;">
  503.                             <span class="ribbon" aria-hidden="true">The best</span>
  505.                             <h3 id="plan-monthly" class="motivation">{{ package.name }}</h3>
  506.                             <p class="tagline">{{ package.info.sub_info }}</p>
  507.                             <h3>{{ package.info.feature_info }}</h3>
  508.                             <h4 class="tagline">{{ package.price }}AMD</h4>
  510.                             <ul class="features">
  511.                                 {% for feature in package.info.features %}
  512.                                     <li>{{ feature }}</li>
  513.                                 {% endfor %}
  514.                             </ul>
  515.                             <a class="cta glow" href="{{ path('page_checkout', {id: package.id}) }}"
  516.                                aria-label="Choose Monthly plan">
  517.                                 Choose Monthly
  518.                             </a>
  519.                         </article>
  520.                     {% endfor %}
  521.                     <div class="pricing">
  522.                         {% for package in packages|filter(p => p.info.type == 'Monthly full access') %}
  523.                             <article class="plan" aria-labelledby="plan-month-sat" style="text-align: center;">
  524.                                 <h3 id="plan-monthly" class="motivation">{{ package.name }}</h3>
  525.                                 <p class="tagline">{{ package.info.sub_info }}</p>
  526.                                 <h3>{{ package.info.feature_info }}</h3>
  527.                                 <h4 class="tagline">{{ package.price }}AMD</h4>
  528.                                 <ul class="features">
  529.                                     {% for feature in package.info.features %}
  530.                                         <li>{{ feature }}</li>
  531.                                     {% endfor %}
  532.                                 </ul>
  533.                                 <a class="cta glow" href="{{ path('page_checkout', {id: package.id}) }}"
  534.                                    aria-label="Choose Monthly plan">
  535.                                     Choose Monthly
  536.                                 </a>
  538.                             </article>
  539.                         {% endfor %}
  540.                     </div>
  541.                     <br><br>
  542.                         <h2 class="h2">EFL2026 tests are not included in these plans</h2>
  543.                     <div class="pricing">
  544.                         {% for package in packages|filter(p => p.info.type == 'cheap') %}
  545.                             <article class="plan" aria-labelledby="plan-cheap">
  546.                                 <h3 id="plan-cheap">{{ package.name }}</h3>
  547.                                 <p class="tagline">{{ package.info.sub_info }}</p>
  548.                                 <div class="price">{{ package.info.feature_info }}</div>
  549.                                 <div class="price">{{ package.price }}AMD</div>
  550.                                 <ul class="features">
  551.                                     {% for feature in package.info.features %}
  552.                                         <li>{{ feature }}</li>
  553.                                     {% endfor %}
  554.                                 </ul>
  555.                                 <a class="cta" href="{{ path('page_checkout', {id: package.id}) }}"
  556.                                    aria-label="Choose Cheap plan">Choose Cheap</a>
  557.                             </article>
  558.                         {% endfor %}
  559.                     </div>
  561.                     <p class="disclaimer">Cancel anytime. Upgrade later — your progress stays with you.</p>
  562.                 </div>
  563.             </div>
  564.         </section>
  565.     </div>
  568. {% endblock %}