SHARE-482 welcomesection redesign

README.md

@@ -32,11 +32,15 @@ Make sure all tests are passing when creating a pull request,
 
 ##### Tools integrated in the project:
 
+[![Symfony](https://img.shields.io/badge/Framework-Symfony-0379B8.svg)](https://symfony.com/)
+[![Openapi-generator](https://img.shields.io/badge/API-openapi_generator-0379B8.svg)](https://github.com/OpenAPITools/openapi-generator)
+[![Elastic](https://img.shields.io/badge/Search-Elastic-FF6940.svg)](https://www.elastic.co/)
 [![Php-cs-fixer](https://img.shields.io/badge/Php_Code_Style-Php_CS_Fixer-informational.svg)](https://github.com/FriendsOfPHP/PHP-CS-Fixer)
 [![PhpStan](https://img.shields.io/badge/Php_Code_Quality-PhpStan,_Psalm,_PhpDD,_PhpCPD_-informational.svg)](https://github.com/phpstan/phpstan)
+[![Webpack Encore](https://img.shields.io/badge/Asset_Bundler-Webpack_Encore-75AFCC.svg)](https://github.com/symfony/webpack-encore)
 [![Npm standard](https://img.shields.io/badge/JS_Code_Style-standard-green.svg)](https://standardjs.com)
 [![ESLint](https://img.shields.io/badge/JS_Code_Quality-ESLint-green.svg)](https://eslint.org/)
-[![Sass](https://img.shields.io/badge/CSS_Preprocessor-npm_sass-ff69b4.svg)](https://sass-lang.com/)
+[![Sass](https://img.shields.io/badge/CSS_Preprocessor-Dart_Sass-ff69b4.svg)](https://sass-lang.com/)
 [![StyleLint](https://img.shields.io/badge/CSS_Code_Style-StyleLint-ff69b4.svg)](https://stylelint.io/)
 
 **Have fun!**

assets/js/index.js

@@ -5,9 +5,6 @@ import { ProjectList } from './components/project_list'
 require('../styles/index.scss')
 
 $(() => {
-  const lazyLoadYoutubeVideo = require('./components/lazy_load_youtube_video')
-  lazyLoadYoutubeVideo('youtube-index')
-
   initHomeProjects()
 
   const $oauthGreeting = $('.js-oauth-greeting')

assets/styles/components/welcome_section.scss

@@ -1,74 +1,17 @@
 #welcome-section {
   margin-bottom: 2.5rem;
 
-  iframe {
-    height: 100%;
-  }
-
-  #welcome-section__google-play li:nth-child(1)::before {
-    content: url("../../images/social/google_playstore.png") " ";
-  }
-
-  .youtube {
+  .video-container {
     position: relative;
-    min-width: 300px;
-    height: 92.5%;
-    min-height: 250px;
-    padding-top: 56.25%;
-    overflow: hidden;
-    cursor: pointer;
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 */
     background-color: #000;
   }
-
-  .youtube-img {
-    top: 50%;
-    left: 50%;
-    width: 100%;
-    opacity: 0.7;
-    transform: translate(-50%, -50%);
-  }
-  .youtube .play-button {
-    z-index: 1;
-    width: 90px;
-    height: 60px;
-    background-color: #333;
-    border-radius: 6px;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
-    opacity: 0.8;
-  }
-  .youtube .play-button::before {
-    content: "";
-    border-color: transparent transparent transparent #fff;
-    border-style: solid;
-    border-width: 15px 0 15px 26px;
-  }
-  .youtube img,
-  .youtube .play-button {
-    cursor: pointer;
-  }
-  .youtube img,
-  .youtube iframe,
-  .youtube .play-button,
-  .youtube .play-button::before {
-    position: absolute;
-  }
-  .youtube .play-button,
-  .youtube .play-button::before {
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0);
-  }
-
-  .youtube .play-button:hover {
-    background-color: #f00;
-  }
-
-  .youtube iframe {
+  .video-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
   }
-
 }

deploy.php

@@ -119,7 +119,7 @@
 });
 task('deploy:encore', function () {
   cd('{{release_path}}');
-  run('npm run encore prod');
+  run('npm run prod');
 });
 
 task('deploy:jwt', function () {