templates/bundles/SyliusShopBundle/Homepage/index.html.twig line 1

Open in your IDE?
  1. {% extends '@SyliusShop/layout.html.twig' %}
  3. {% block title %}Hephaestos 1.0 - {{ 'release.tagline'|trans }}{% endblock %}
  5. {% set hephaestos_home_capture = asset('build/img/Captures/Acceuil.PNG') ~ '?v=20260516' %}
  7. {% block stylesheets %}
  8. {{ parent() }}
  9. <style>
  10. .main.stackable.grid.container {
  11. width: 100% !important;
  12. max-width: none !important;
  13. margin: 0 !important;
  14. padding: 0 !important;
  15. display: block !important;
  16. }
  18. .main.stackable.grid.container > header,
  19. .main.stackable.grid.container > .ui.message,
  20. .main.stackable.grid.container > .ui.grid {
  21. max-width: 1180px;
  22. margin-left: auto !important;
  23. margin-right: auto !important;
  24. }
  26. .heph-hero {
  27. position: relative;
  28. min-height: 82vh;
  29. display: flex;
  30. align-items: flex-end;
  31. overflow: hidden;
  32. color: #fff;
  33. background:
  34. linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .54) 46%, rgba(0, 0, 0, .12)),
  35. url("{{ hephaestos_home_capture }}") center right / cover no-repeat,
  36. #151515;
  37. }
  39. .heph-hero-bg {
  40. position: absolute;
  41. inset: 0;
  42. background: linear-gradient(180deg, rgba(0, 0, 0, 0) 65%, #f4efe7 100%);
  43. pointer-events: none;
  44. }
  46. .heph-hero-content,
  47. .heph-container {
  48. width: min(1180px, calc(100% - 40px));
  49. margin: 0 auto;
  50. }
  52. .heph-hero-content {
  53. position: relative;
  54. z-index: 1;
  55. padding: 130px 0 96px;
  56. }
  58. .heph-hero-title {
  59. margin: 0;
  60. font-size: clamp(54px, 9vw, 126px);
  61. line-height: .88;
  62. letter-spacing: 0;
  63. text-transform: uppercase;
  64. }
  66. .heph-hero-subtitle {
  67. max-width: 780px;
  68. margin: 28px 0 0;
  69. font-size: clamp(24px, 3vw, 44px);
  70. line-height: 1.08;
  71. font-weight: 900;
  72. }
  74. .heph-hero-desc {
  75. max-width: 700px;
  76. margin: 24px 0 0;
  77. color: rgba(255, 255, 255, .88);
  78. font-size: 20px;
  79. line-height: 1.55;
  80. }
  82. .heph-hero-actions,
  83. .heph-download-cards,
  84. .heph-features-grid,
  85. .heph-support-grid {
  86. display: grid;
  87. gap: 18px;
  88. }
  90. .heph-hero-actions {
  91. display: flex;
  92. flex-wrap: wrap;
  93. margin-top: 34px;
  94. gap: 14px;
  95. }
  97. .heph-btn {
  98. display: inline-flex;
  99. align-items: center;
  100. justify-content: center;
  101. gap: 10px;
  102. min-height: 52px;
  103. padding: 0 22px;
  104. border: 2px solid currentColor;
  105. border-radius: 6px;
  106. font-weight: 900;
  107. text-transform: uppercase;
  108. transition: transform .18s ease, background .18s ease, color .18s ease;
  109. }
  111. .heph-btn:hover {
  112. transform: translateY(-2px);
  113. text-decoration: none;
  114. }
  116. .heph-btn-primary {
  117. border-color: #ff6a1a;
  118. background: #ff6a1a;
  119. color: #170b04;
  120. }
  122. .heph-btn-secondary {
  123. border-color: rgba(255, 255, 255, .76);
  124. background: rgba(255, 255, 255, .08);
  125. color: #fff;
  126. }
  128. .heph-download-card .heph-btn-secondary {
  129. border-color: #245f8f;
  130. background: #245f8f;
  131. color: #fff;
  132. }
  134. .heph-section {
  135. padding: 86px 20px;
  136. background: #f4efe7;
  137. color: #111;
  138. }
  140. .heph-section-dark {
  141. background: #151515;
  142. color: #fff;
  143. }
  145. .heph-section-title {
  146. max-width: 840px;
  147. margin: 0;
  148. font-size: clamp(34px, 5vw, 70px);
  149. line-height: .98;
  150. letter-spacing: 0;
  151. text-transform: uppercase;
  152. }
  154. .heph-section-desc {
  155. max-width: 820px;
  156. margin: 20px 0 42px;
  157. font-size: 19px;
  158. line-height: 1.6;
  159. color: rgba(17, 17, 17, .72);
  160. }
  162. .heph-section-dark .heph-section-desc {
  163. color: rgba(255, 255, 255, .74);
  164. }
  166. .heph-features-grid {
  167. grid-template-columns: repeat(3, minmax(0, 1fr));
  168. }
  170. .heph-feature-card,
  171. .heph-download-card,
  172. .heph-support-card {
  173. border: 1px solid rgba(17, 17, 17, .14);
  174. border-radius: 8px;
  175. background: rgba(255, 255, 255, .58);
  176. padding: 26px;
  177. }
  179. .heph-section-dark .heph-support-card {
  180. border-color: rgba(255, 255, 255, .16);
  181. background: rgba(255, 255, 255, .08);
  182. }
  184. .heph-feature-card h3,
  185. .heph-download-card h3,
  186. .heph-support-card h3 {
  187. margin-top: 18px;
  188. font-size: 24px;
  189. line-height: 1.12;
  190. }
  192. .heph-feature-card p,
  193. .heph-download-card p,
  194. .heph-support-card p {
  195. color: rgba(17, 17, 17, .7);
  196. line-height: 1.55;
  197. }
  199. .heph-section-dark .heph-support-card p {
  200. color: rgba(255, 255, 255, .74);
  201. }
  203. .heph-feature-icon,
  204. .heph-download-os-icon,
  205. .heph-support-icon {
  206. width: 58px;
  207. height: 58px;
  208. display: inline-flex;
  209. align-items: center;
  210. justify-content: center;
  211. border-radius: 50%;
  212. color: #fff;
  213. background: #c9362b;
  214. }
  216. .heph-icon-video,
  217. .heph-icon-midi,
  218. .heph-download-os-icon {
  219. background: #245f8f;
  220. }
  222. .heph-icon-control,
  223. .heph-icon-dmx,
  224. .heph-icon-automation {
  225. background: #1d7a5c;
  226. }
  228. .heph-screenshot {
  229. width: 100%;
  230. display: block;
  231. border-radius: 8px;
  232. box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
  233. background: #222;
  234. }
  236. .heph-download-cards {
  237. grid-template-columns: repeat(2, minmax(0, 1fr));
  238. }
  240. .heph-download-version {
  241. font-weight: 900;
  242. color: #c9362b !important;
  243. }
  245. .heph-beta-band {
  246. display: grid;
  247. grid-template-columns: minmax(0, 1fr) auto;
  248. gap: 26px;
  249. align-items: center;
  250. padding: 32px;
  251. border-radius: 8px;
  252. background: #fffaf0;
  253. border: 1px solid rgba(17, 17, 17, .14);
  254. }
  256. .heph-beta-band strong {
  257. display: inline-flex;
  258. margin-bottom: 10px;
  259. color: #c9362b;
  260. font-weight: 900;
  261. text-transform: uppercase;
  262. }
  264. .heph-beta-band h2 {
  265. margin: 0;
  266. font-size: clamp(30px, 4vw, 56px);
  267. line-height: 1;
  268. text-transform: uppercase;
  269. }
  271. .heph-beta-band p {
  272. max-width: 740px;
  273. margin: 16px 0 0;
  274. color: rgba(17, 17, 17, .72);
  275. font-size: 18px;
  276. line-height: 1.6;
  277. }
  279. .heph-commercial-cta {
  280. display: grid;
  281. grid-template-columns: minmax(0, 1fr) auto;
  282. gap: 28px;
  283. align-items: center;
  284. padding: 36px;
  285. border: 1px solid rgba(255, 255, 255, .16);
  286. border-radius: 8px;
  287. background: rgba(255, 255, 255, .08);
  288. }
  290. .heph-commercial-cta h2 {
  291. margin: 0;
  292. font-size: clamp(32px, 5vw, 66px);
  293. line-height: .98;
  294. text-transform: uppercase;
  295. }
  297. .heph-commercial-cta p {
  298. max-width: 760px;
  299. margin: 18px 0 0;
  300. color: rgba(255, 255, 255, .76);
  301. font-size: 19px;
  302. line-height: 1.6;
  303. }
  305. .heph-btn-block {
  306. width: 100%;
  307. margin-top: 18px;
  308. }
  310. @media (max-width: 900px) {
  311. .heph-features-grid,
  312. .heph-download-cards,
  313. .heph-beta-band,
  314. .heph-commercial-cta {
  315. grid-template-columns: 1fr;
  316. }
  318. .heph-hero {
  319. min-height: 78vh;
  320. background-position: center;
  321. }
  322. }
  324. @media (max-width: 560px) {
  325. .heph-section {
  326. padding: 58px 16px;
  327. }
  329. .heph-btn {
  330. width: 100%;
  331. }
  332. }
  333. </style>
  334. {% endblock %}
  336. {% block content %}
  338. <section class="heph-hero">
  339. <div class="heph-hero-bg"></div>
  340. <div class="heph-hero-content">
  341. <h1 class="heph-hero-title">Hephaestos</h1>
  342. <p class="heph-hero-subtitle">{{ 'release.tagline'|trans }}</p>
  343. <p class="heph-hero-desc">{{ 'release.description'|trans }}</p>
  344. <div class="heph-hero-actions">
  345. <a href="#download" class="heph-btn heph-btn-primary">
  346. <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
  347. {{ 'Download'|trans }}
  348. </a>
  349. <a href="{{ path('features') }}" class="heph-btn heph-btn-secondary">
  350. <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
  351. {{ 'Features'|trans }}
  352. </a>
  353. </div>
  354. </div>
  355. <div class="heph-hero-scroll">
  356. <span>{{ 'release.scroll'|trans }}</span>
  357. <div class="heph-scroll-indicator"></div>
  358. </div>
  359. </section>
  361. <section class="heph-section">
  362. <div class="heph-container">
  363. <h2 class="heph-section-title">{{ 'release.promise.title'|trans }}</h2>
  364. <p class="heph-section-desc">{{ 'release.promise.desc'|trans }}</p>
  365. <div class="heph-features-grid">
  366. <div class="heph-feature-card">
  367. <div class="heph-feature-icon heph-icon-audio">
  368. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
  369. </div>
  370. <h3>{{ 'release.promise.rehearsal.title'|trans }}</h3>
  371. <p>{{ 'release.promise.rehearsal.desc'|trans }}</p>
  372. </div>
  373. <div class="heph-feature-card">
  374. <div class="heph-feature-icon heph-icon-control">
  375. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
  376. </div>
  377. <h3>{{ 'release.promise.show.title'|trans }}</h3>
  378. <p>{{ 'release.promise.show.desc'|trans }}</p>
  379. </div>
  380. <div class="heph-feature-card">
  381. <div class="heph-feature-icon heph-icon-video">
  382. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
  383. </div>
  384. <h3>{{ 'release.promise.rig.title'|trans }}</h3>
  385. <p>{{ 'release.promise.rig.desc'|trans }}</p>
  386. </div>
  387. </div>
  388. </div>
  389. </section>
  391. <section class="heph-section" id="features">
  392. <div class="heph-container">
  393. <h2 class="heph-section-title">{{ 'release.why.title'|trans }}</h2>
  394. <p class="heph-section-desc">{{ 'release.why.subtitle'|trans }}</p>
  395. <div class="heph-features-grid">
  396. <div class="heph-feature-card">
  397. <div class="heph-feature-icon heph-icon-audio">
  398. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
  399. </div>
  400. <h3>{{ 'release.feature.audio.title'|trans }}</h3>
  401. <p>{{ 'release.feature.audio.desc'|trans }}</p>
  402. </div>
  403. <div class="heph-feature-card">
  404. <div class="heph-feature-icon heph-icon-video">
  405. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
  406. </div>
  407. <h3>{{ 'release.feature.video.title'|trans }}</h3>
  408. <p>{{ 'release.feature.video.desc'|trans }}</p>
  409. </div>
  410. <div class="heph-feature-card">
  411. <div class="heph-feature-icon heph-icon-control">
  412. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>
  413. </div>
  414. <h3>{{ 'release.feature.control.title'|trans }}</h3>
  415. <p>{{ 'release.feature.control.desc'|trans }}</p>
  416. </div>
  417. <div class="heph-feature-card">
  418. <div class="heph-feature-icon heph-icon-dmx">
  419. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
  420. </div>
  421. <h3>{{ 'release.feature.dmx.title'|trans }}</h3>
  422. <p>{{ 'release.feature.dmx.desc'|trans }}</p>
  423. </div>
  424. <div class="heph-feature-card">
  425. <div class="heph-feature-icon heph-icon-midi">
  426. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
  427. </div>
  428. <h3>{{ 'release.feature.midi.title'|trans }}</h3>
  429. <p>{{ 'release.feature.midi.desc'|trans }}</p>
  430. </div>
  431. <div class="heph-feature-card">
  432. <div class="heph-feature-icon heph-icon-automation">
  433. <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
  434. </div>
  435. <h3>{{ 'release.feature.automation.title'|trans }}</h3>
  436. <p>{{ 'release.feature.automation.desc'|trans }}</p>
  437. </div>
  438. </div>
  439. </div>
  440. </section>
  442. <section class="heph-section heph-section-dark" id="screenshot">
  443. <div class="heph-container">
  444. <h2 class="heph-section-title">{{ 'release.preview.title'|trans }}</h2>
  445. <p class="heph-section-desc">{{ 'release.preview.desc'|trans }}</p>
  446. <div class="heph-screenshot-wrapper">
  447. <img src="{{ hephaestos_home_capture }}" alt="Hephaestos 1.0 Preview" class="heph-screenshot" />
  448. </div>
  449. </div>
  450. </section>
  452. <section class="heph-section" id="beta">
  453. <div class="heph-container">
  454. <div class="heph-beta-band">
  455. <div>
  456. <strong>{{ 'beta.home.badge'|trans }}</strong>
  457. <h2>{{ 'beta.home.title'|trans }}</h2>
  458. <p>{{ 'beta.home.desc'|trans }}</p>
  459. </div>
  460. <a href="{{ path('beta_testers') }}" class="heph-btn heph-btn-primary">{{ 'beta.home.cta'|trans }}</a>
  461. </div>
  462. </div>
  463. </section>
  465. <section class="heph-section" id="download">
  466. <div class="heph-container">
  467. <h2 class="heph-section-title">{{ 'release.download.title'|trans }}</h2>
  468. <p class="heph-section-desc">{{ 'release.download.desc'|trans }}</p>
  469. <div class="heph-download-cards">
  470. <div class="heph-download-card">
  471. <div class="heph-download-os-icon">
  472. <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="9" y1="22" x2="15" y2="22"/></svg>
  473. </div>
  474. <h3>Windows 64-bit</h3>
  475. <p class="heph-download-version">v{{ heph_current_version }}</p>
  476. <a id="download_current_win64" href="{{ '/versions/encours/Hephaestos-' ~ heph_current_filename ~ '-windows.zip' }}"
  477. class="heph-btn heph-btn-primary heph-btn-block">
  478. <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
  479. {{ 'release.download.btn'|trans }}
  480. </a>
  481. </div>
  482. <div class="heph-download-card">
  483. <div class="heph-download-os-icon">
  484. <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"/><path d="M10 2c1 .5 2 2 2 5"/></svg>
  485. </div>
  486. <h3>macOS</h3>
  487. <p class="heph-download-version">v{{ heph_current_version }}</p>
  488. <a id="download_current_OSX"
  489. href="{{ '/versions/encours/Hephaestos-' ~ heph_current_filename ~ '-macos.zip' }}"
  490. class="heph-btn heph-btn-secondary heph-btn-block">
  491. <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
  492. {{ 'release.download.btn'|trans }}
  493. </a>
  494. </div>
  495. <div class="heph-download-card">
  496. <div class="heph-download-os-icon">
  497. <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2" ry="2"/><line x1="8" y1="20" x2="16" y2="20"/><line x1="12" y1="18" x2="12" y2="20"/><path d="m8 10 2 2-2 2"/><path d="M12 14h4"/></svg>
  498. </div>
  499. <h3>Ubuntu</h3>
  500. <p class="heph-download-version">v{{ heph_current_version }}</p>
  501. <a id="download_current_ubuntu"
  502. href="{{ '/versions/encours/Hephaestos-' ~ heph_current_filename ~ '-ubuntu.zip' }}"
  503. class="heph-btn heph-btn-primary heph-btn-block">
  504. <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
  505. {{ 'release.download.btn'|trans }}
  506. </a>
  507. </div>
  508. </div>
  509. </div>
  510. </section>
  512. <section class="heph-section heph-section-dark" id="support">
  513. <div class="heph-container">
  514. <div class="heph-commercial-cta">
  515. <div>
  516. <h2>{{ 'release.cta.title'|trans }}</h2>
  517. <p>{{ 'release.cta.desc'|trans }}</p>
  518. </div>
  519. <div class="heph-hero-actions">
  520. <a href="#download" class="heph-btn heph-btn-primary">{{ 'release.cta.download'|trans }}</a>
  521. <a href="{{ path('forum') }}" class="heph-btn heph-btn-secondary">{{ 'release.cta.contact'|trans }}</a>
  522. </div>
  523. </div>
  524. </div>
  525. </section>
  527. {% endblock %}