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 %}