templates/application/whileresume/website/cv-public/choice.html.twig line 1

Open in your IDE?
  1. {% extends 'application/whileresume/website/cv-public/base.html.twig' %}
  3. {% block title %}{{ 'generate2.choice.page_title'|trans({}, 'whr-public') }} ยท WhileResume{% endblock %}
  5. {% block extra_css %}
  6.     .choice-hero { text-align: center; margin-bottom: 56px; }
  7.     .choice-hero .badge { margin-inline: auto; display: inline-flex; }
  8.     .choice-hero .stitle { max-width: 680px; margin: 0 auto 14px; }
  9.     .choice-hero .sdesc { max-width: 580px; margin-inline: auto; }
  11.     .choice-grid {
  12.     display: grid;
  13.     grid-template-columns: 1fr 1fr;
  14.     gap: 20px;
  15.     margin-bottom: 40px;
  16.     }
  18.     .choice-card {
  19.     position: relative;
  20.     display: flex;
  21.     flex-direction: column;
  22.     padding: 32px 28px 28px;
  23.     border-radius: var(--r-xl);
  24.     background: var(--white);
  25.     border: 2px solid var(--ink-10);
  26.     text-decoration: none;
  27.     color: inherit;
  28.     cursor: pointer;
  29.     transition: all 0.35s var(--ease);
  30.     overflow: hidden;
  31.     }
  33.     .choice-card:hover {
  34.     transform: translateY(-4px);
  35.     border-color: var(--violet);
  36.     box-shadow: 0 20px 48px rgba(139,111,192,0.18);
  37.     }
  39.     .choice-card.primary {
  40.     background: linear-gradient(135deg, var(--violet-ultra), var(--white));
  41.     border-color: var(--violet);
  42.     box-shadow: 0 12px 40px var(--violet-glow);
  43.     }
  45.     .choice-card.primary::before {
  46.     content: '';
  47.     position: absolute;
  48.     top: 0; left: 0; right: 0;
  49.     height: 4px;
  50.     background: linear-gradient(90deg, var(--violet), var(--violet-deep), var(--violet));
  51.     }
  53.     .choice-card.primary:hover {
  54.     transform: translateY(-6px);
  55.     box-shadow: 0 24px 60px rgba(139,111,192,0.28);
  56.     }
  58.     .choice-badge-recommended {
  59.     position: absolute;
  60.     top: 16px; right: 16px;
  61.     background: var(--violet-deep);
  62.     color: white;
  63.     font-size: 0.66rem;
  64.     font-weight: 700;
  65.     text-transform: uppercase;
  66.     letter-spacing: 0.08em;
  67.     padding: 5px 11px;
  68.     border-radius: var(--r-full);
  69.     }
  71.     .choice-ico {
  72.     width: 64px; height: 64px;
  73.     border-radius: 18px;
  74.     background: var(--violet-soft);
  75.     color: var(--violet-deep);
  76.     display: flex;
  77.     align-items: center;
  78.     justify-content: center;
  79.     margin-bottom: 24px;
  80.     transition: transform 0.3s var(--ease-spring);
  81.     }
  83.     .choice-card:hover .choice-ico { transform: scale(1.08) rotate(-4deg); }
  85.     .choice-card.primary .choice-ico {
  86.     background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  87.     color: white;
  88.     }
  90.     .choice-card.secondary .choice-ico {
  91.     background: var(--ocean-soft);
  92.     color: var(--ocean);
  93.     }
  95.     .choice-title {
  96.     font-family: var(--font-display);
  97.     font-size: 1.5rem;
  98.     font-weight: 500;
  99.     letter-spacing: -0.02em;
  100.     margin-bottom: 10px;
  101.     }
  103.     .choice-title em { font-style: italic; color: var(--violet-dark); }
  105.     .choice-desc {
  106.     font-size: 0.94rem;
  107.     color: var(--ink-60);
  108.     line-height: 1.6;
  109.     margin-bottom: 20px;
  110.     min-height: 56px;
  111.     }
  113.     .choice-features {
  114.     list-style: none;
  115.     padding: 0;
  116.     margin: 0 0 24px;
  117.     display: flex;
  118.     flex-direction: column;
  119.     gap: 8px;
  120.     }
  122.     .choice-features li {
  123.     display: flex;
  124.     align-items: center;
  125.     gap: 10px;
  126.     font-size: 0.85rem;
  127.     color: var(--ink-80);
  128.     }
  130.     .choice-features li svg {
  131.     color: var(--emerald);
  132.     flex-shrink: 0;
  133.     }
  135.     .choice-cta {
  136.     display: inline-flex;
  137.     align-items: center;
  138.     gap: 8px;
  139.     padding: 13px 22px;
  140.     border-radius: var(--r-full);
  141.     font-size: 0.9rem;
  142.     font-weight: 600;
  143.     margin-top: auto;
  144.     transition: all 0.25s var(--ease);
  145.     }
  147.     .choice-card.primary .choice-cta {
  148.     background: var(--violet-deep);
  149.     color: white;
  150.     }
  152.     .choice-card.primary:hover .choice-cta { background: var(--violet-dark); }
  154.     .choice-card.secondary .choice-cta {
  155.     background: var(--white);
  156.     color: var(--ink-80);
  157.     border: 1.5px solid var(--ink-10);
  158.     }
  160.     .choice-card.secondary:hover .choice-cta { border-color: var(--ink-20); }
  162.     .choice-help {
  163.     text-align: center;
  164.     color: var(--ink-40);
  165.     font-size: 0.85rem;
  166.     }
  168.     .choice-help a { color: var(--violet-dark); text-decoration: underline; text-underline-offset: 3px; }
  170.     @media (max-width: 760px) {
  171.     .choice-grid { grid-template-columns: 1fr; }
  172.     }
  173. {% endblock %}
  175. {% block body %}
  176.     <div class="choice-hero fade-up">
  177.         <div class="badge"><span class="badge-num">1</span> {{ 'generate2.choice.badge'|trans({}, 'whr-public') }}</div>
  178.         <h1 class="stitle">{{ 'generate2.choice.title_part1'|trans({}, 'whr-public') }}<br>{{ 'generate2.choice.title_part2'|trans({}, 'whr-public') }} <em>{{ 'generate2.common.cv'|trans({}, 'whr-public') }}</em> ?</h1>
  179.         <p class="sdesc">{{ 'generate2.choice.subtitle'|trans({}, 'whr-public') }}</p>
  180.     </div>
  183.     <a href="{% if app.request.locale == "en" %}{{ path('cv_public_theme', { slug: public_slug }) }}?mode=scratch{% else %}{{ path('locale_cv_public_theme', { slug: public_slug,'_locale':app.request.locale }) }}?mode=scratch{% endif %}" class="choice-card primary fade-up d1">
  184.         <span class="choice-badge-recommended">{{ 'generate2.choice.recommended'|trans({}, 'whr-public') }}</span>
  186.         <div class="choice-ico">
  187.             <svg width="30" height="30" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
  188.                 <path d="M12 20h9"/>
  189.                 <path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/>
  190.             </svg>
  191.         </div>
  193.         <h2 class="choice-title">{{ 'generate2.choice.scratch.title_part1'|trans({}, 'whr-public') }} <em>{{ 'generate2.choice.scratch.title_part2'|trans({}, 'whr-public') }}</em></h2>
  194.         <p class="choice-desc">{{ 'generate2.choice.scratch.desc'|trans({}, 'whr-public') }}</p>
  196.         <ul class="choice-features">
  197.             <li>
  198.                 <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
  199.                 {{ 'generate2.choice.scratch.feat_1'|trans({}, 'whr-public') }}
  200.             </li>
  201.             <li>
  202.                 <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
  203.                 {{ 'generate2.choice.scratch.feat_2'|trans({}, 'whr-public') }}
  204.             </li>
  205.             <li>
  206.                 <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>
  207.                 {{ 'generate2.choice.scratch.feat_3'|trans({}, 'whr-public') }}
  208.             </li>
  209.         </ul>
  211.         <span class="choice-cta">
  212.                 {{ 'generate2.choice.scratch.cta'|trans({}, 'whr-public') }}
  213.                 <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
  214.                     <path d="M5 12h14M12 5l7 7-7 7"/>
  215.                 </svg>
  216.             </span>
  217.     </a>
  219. {% endblock %}
  221. {% block body_js %}
  222.     <script>
  223.         window.cvLoader.hide();
  224.     </script>
  225. {% endblock %}