templates/client/default/home.html.twig line 1

Open in your IDE?
  1. {% extends '/client/common/base.html.twig' %}
  3. {% block title %}Home{% endblock %}
  5. {% block body %}
  6. <section class="uk-cover-container" tm-header-transparent="dark" uk-height-viewport="offset-top: true; offset-bottom: 25">
  7.     <video src="{{ asset('/assets/video/intro.mp4') }}" loop muted playsinline uk-video="autoplay: inview" uk-cover></video>
  8. </div>
  10. <section class="uk-section-muted uk-section uk-section-medium" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 100;">
  11.     <div class="uk-container uk-container-small">
  12.         <h1 class="uk-h1 uk-text-center">
  13.             <b class="uk-text-emphasis">YOUR</b> determination and <b class="uk-text-emphasis">OUR</b> courses <br>will make you the <b class="uk-text-emphasis">ONLY</b> choice for your
  14.         </h1>
  15.     </div>
  16. </section>
  18. <section class="uk-section-default uk-section uk-section-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 100;">
  19.     <div class="uk-container">
  20.         <div class="tm-grid-expand uk-child-width-1-1 uk-grid-margin" uk-grid uk-height-match="target: .uk-card">
  21.             <div>
  22.                 <h2 class="uk-h1 uk-position-relative uk-text-center" style="z-index: 1;">
  23.                     This Is How Learning With Us Looks Like
  24.                 </h2>
  25.                 <div class="uk-position-relative uk-margin-large uk-text-center" style="z-index: 1;">
  26.                     <div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-4@m uk-grid-match" uk-grid="parallax: 100;">
  27.                         <div>
  28.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  29.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/glasses.svg">
  30.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Take Your Time</h3>
  31.                                 <div class="uk-margin-top uk-text-small">Enjoy learning on your own pace, in your own space.</div>
  32.                             </a>
  33.                         </div>
  34.                         <div>
  35.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  36.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/stamp.svg">
  37.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Expert Guidance</h3>
  38.                                 <div class="uk-margin-top uk-text-small">Learn from our certified trainers who offer multiple learning tools and techniques.</div>
  39.                             </a>
  40.                         </div>
  41.                         <div>
  42.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  43.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/medal-award.svg">
  44.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Certification</h3>
  45.                                 <div class="uk-margin-top uk-text-small">At the end of each course you will receive a certificate of completion, signed by the instructor.</div>
  46.                             </a>
  47.                         </div>
  48.                         <div>
  49.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  50.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/star.svg">
  51.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Top Material</h3>
  52.                                 <div class="uk-margin-top uk-text-small">Using the newest material for a holistic approach in our always up-to-date courses.</div>
  53.                             </a>
  54.                         </div>
  55.                         <div>
  56.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  57.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/support.svg">
  58.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Support</h3>
  59.                                 <div class="uk-margin-top uk-text-small">For a great learning experience, asking questions and requesting feedback is encouraged.</div>
  60.                             </a>
  61.                         </div>
  62.                         <div>
  63.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  64.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/diamond.svg">
  65.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Quality Learning</h3>
  66.                                 <div class="uk-margin-top uk-text-small">Content and audiovisual material of the highest quality.</div>
  67.                             </a>
  68.                         </div>
  69.                         <div>
  70.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  71.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/light-bulb.svg">
  72.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Industry Professionals</h3>
  73.                                 <div class="uk-margin-top uk-text-small">All of our instructors are charismatic professionals in their field.</div>
  74.                             </a>
  75.                         </div>
  76.                         <div>
  77.                             <a class="uk-card uk-card-default uk-card-hover uk-card-body uk-margin-remove-first-child uk-link-toggle uk-display-block" href="#" uk-scrollspy-class="uk-animation-fade">
  78.                                 <img width="68" class="uk-text-emphasis" alt uk-svg src="/assets/icons/worldwide.svg">
  79.                                 <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom uk-text-bold uk-text-primary">Recognition</h3>
  80.                                 <div class="uk-margin-top uk-text-small">You can use your globally recognized certificates to get your dream job.</div>
  81.                             </a>
  82.                         </div>
  83.                     </div>
  84.                 </div>
  85.             </div>
  86.         </div>
  87.     </div>
  88. </section>
  90. <section id="career-paths" class="uk-section-default uk-section uk-section-large uk-background-primary uk-light">
  91.     <div class="uk-margin-large uk-container">
  92.         <div class="uk-grid" uk-grid="">
  93.             <div class="uk-width-3-4@m">
  94.                 <h2 class="uk-text-left@m uk-text-center">Reach Your Goals With our Career Paths <br class="uk-visible@s">Trusted by Many Training Experts</h2>
  95.             </div>
  96.             <div class="uk-grid-item-match uk-flex-middle uk-width-1-4@m">
  97.                 <div class="uk-panel uk-width-1-1">
  98.                     <div class="uk-margin uk-text-right@m uk-text-center">
  99.                         <a class="uk-button uk-button-primary" href="{{ path('client_career_path_list') }}">View All</a>
  100.                     </div>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.     </div>
  106.     <div class="tm-grid-expand uk-child-width-1-1 uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
  107.         <div class="uk-first-column">
  108.             <div uk-slider class="uk-margin-large uk-margin-remove-bottom uk-text-center uk-slider uk-slider-container">
  109.                 <div class="uk-position-relative">
  110.                     <ul class="uk-slider-items uk-grid uk-grid-small uk-grid-match">
  111.                         {% for cpath in latestCareerPaths %}
  112.                         <li class="uk-active" tabindex="-1">
  113.                             <div class="uk-grid-item-match uk-light">
  114.                                 <a class="uk-cover-container uk-transition-toggle uk-display-block uk-link-toggle" href="{{ path('client_career_path_view', {'slug': cpath.slug}) }}">
  115.                                     <picture>
  116.                                         <source srcset="{{ vich_uploader_asset(cpath.imageIntro, 'imageFile') | imagine_filter('careerpath_list_webp') }}" type="image/webp">
  117.                                         <source srcset="{{ vich_uploader_asset(cpath.imageIntro, 'imageFile') | imagine_filter('careerpath_list') }}" type="image/jpeg">
  118.                                         <img src="{{ vich_uploader_asset(cpath.imageIntro, 'imageFile') | imagine_filter('careerpath_list') }}" alt="{{ cpath.title }}">
  119.                                     </picture>
  121.                                     <div class="uk-position-bottom-center">
  122.                                         <div class="uk-panel uk-padding-large uk-margin-remove-first-child">
  123.                                             <div class="uk-h1">{{ cpath.title }}</div>
  124.                                             <div class="uk-margin-xlarge-top uk-transition-fade">
  125.                                                 <div class="uk-button uk-button-default">View Path</div>
  126.                                             </div>
  127.                                         </div>
  128.                                     </div>
  129.                                 </a>
  130.                             </div>
  131.                         </li>
  132.                         {% endfor %}
  133.                     </ul>
  134.                     <div class="uk-visible@s">
  135.                         <a class="el-slidenav uk-position-medium uk-position-center-left uk-icon uk-slidenav-previous uk-slidenav" href="#" uk-slidenav-previous="" uk-slider-item="previous"><svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="#000" stroke-width="1.4" points="12.775,1 1.225,12 12.775,23 "></polyline></svg></a>
  136.                         <a class="el-slidenav uk-position-medium uk-position-center-right uk-icon uk-slidenav-next uk-slidenav" href="#" uk-slidenav-next="" uk-slider-item="next"><svg width="14" height="24" viewBox="0 0 14 24" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="#000" stroke-width="1.4" points="1.225,23 12.775,12 1.225,1 "></polyline></svg></a>
  137.                     </div>
  138.                 </div>
  139.             </div>
  140.         </div>
  141.     </div>
  142. </section>
  144. <section id="latest-courses" class="uk-section-default uk-section uk-section-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 100;">
  145.     <div class="uk-container uk-container-large">
  146.         <div>
  147.             <h2 class="uk-h1 uk-text-center">Train Yourself With<br class="uk-visible@s"> Our Latest Courses</h2>
  148.         </div>
  149.         <div class="uk-child-width-1-1 uk-grid-margin uk-grid-stack" uk-grid="" uk-height-match="target: .uk-card">
  150.             <div>
  151.                 <div class="uk-position-relative uk-margin">
  152.                     <div class="uk-child-width-1-1 uk-child-width-1-3@m uk-grid-match" uk-grid="">
  153.                         {% for course in latestCourses %}
  154.                         <div>
  155.                             <div class="uk-margin-auto uk-width-large uk-card uk-card-default uk-card-large uk-margin-remove-first-child uk-scrollspy-inview " uk-scrollspy-class="" style="">
  156.                                 <div class="uk-card-media-top">
  157.                                     <picture>
  158.                                         <source srcset="{{ vich_uploader_asset(course.imageIntro, 'imageFile') | imagine_filter('blog_large_webp') }}" type="image/webp">
  159.                                         <source srcset="{{ vich_uploader_asset(course.imageIntro, 'imageFile') | imagine_filter('blog_large') }}" type="image/jpeg">
  160.                                         <img src="{{ vich_uploader_asset(course.imageIntro, 'imageFile') | imagine_filter('blog_large') }}" alt="{{ course.title }}">
  161.                                     </picture>
  162.                                 </div>
  163.                                 <div class="uk-card-body uk-margin-remove-first-child">
  164.                                     <h3 class="uk-h2 uk-margin-top uk-margin-remove-bottom">
  165.                                         {{ course.title }}
  166.                                     </h3>
  167.                                     <div class="uk-panel uk-margin-top">{{ course.intro|striptags|u.truncate(100) }}</div>
  168.                                     <div class="uk-margin-medium-top">
  169.                                         <a href="{{ path('client_course_view', {'slug': course.slug}) }}" class="uk-button uk-button-default uk-button-large">View Course</a>
  170.                                     </div>
  171.                                 </div>
  172.                             </div>
  173.                         </div>
  174.                         {% endfor %}
  175.                     </div>
  176.                 </div>
  177.             </div>
  178.         </div>
  179.     </div>
  180. </section>
  182. <section id="latest-news" class="uk-section-muted uk-section uk-section-large" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: false;">
  183.     <div class="uk-container">
  184.         <div class="tm-grid-expand uk-child-width-1-1 uk-grid-margin" uk-grid>
  185.             <div>
  186.                 <h2 class="uk-h1 uk-text-center">Latest News</h2>
  187.                 <div class="uk-panel uk-text-lead uk-margin uk-width-xlarge uk-margin-auto uk-text-center">
  188.                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
  189.                 </div>
  190.                 <div class="uk-margin uk-text-center">
  191.                     <a class="uk-button uk-button-text" href="{{ path('client_blog_article_list') }}">Visit Our Blog</a>
  192.                 </div>
  193.                 <div class="uk-position-relative uk-margin-large uk-margin-remove-bottom uk-text-center" style="z-index: 1;">
  194.                     <div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-grid-match" uk-grid>
  195.                         {% for article in latestArticles %}
  196.                         <div>
  197.                             <div class="uk-card uk-card-default uk-card-hover uk-margin-remove-first-child uk-link-toggle uk-display-block" uk-scrollspy-class>
  198.                                 <div class="uk-card-media-top">
  199.                                     <a href="{{ path('client_blog_article_view', {'slug': article.slug}) }}">
  200.                                         <picture>
  201.                                             <source srcset="{{ vich_uploader_asset(article.imageIntro, 'imageFile') | imagine_filter('blog_list_webp') }}" type="image/webp">
  202.                                             <source srcset="{{ vich_uploader_asset(article.imageIntro, 'imageFile') | imagine_filter('blog_list') }}" type="image/jpeg">
  203.                                             <img src="{{ vich_uploader_asset(article.imageFull, 'imageFile') | imagine_filter('blog_list') }}" alt="{{ article.title }}">
  204.                                         </picture>
  205.                                     </a>
  206.                                 </div>
  207.                                 <div class="uk-card-body uk-margin-remove-first-child">
  208.                                     <div class="uk-text-muted">
  209.                                         {% for category in article.blogCategories %}
  210.                                             <a class="uk-link uk-link-reset" href="{{ path('client_blog_category_article_list', {'slug': category.slug }) }}">{{ category.title }}</a>{% if not (loop.last) %}, {% endif %}
  211.                                         {% endfor %}
  212.                                     </div>
  213.                                     <div class="uk-text-meta">{{ article.createdAt|date("d/m/Y") }}</div>
  214.                                     <h3 class="uk-h4 uk-margin-top uk-margin-remove-bottom">
  215.                                         <a class="uk-link-reset" href="{{ path('client_blog_article_view', {'slug': article.slug}) }}"><span class="uk-text-emphasis">{{ article.title }}</span></a>
  216.                                     </h3>
  217.                                     <div class="uk-margin-top">
  218.                                         <div class="uk-margin">
  219.                                             {{ article.introText|raw|striptags|slice(0, 180) }}
  220.                                         </div>
  221.                                         <a class="uk-button uk-button-primary" href="{{ path('client_blog_article_view', {'slug': article.slug}) }}">{{ 'Read more...'|trans }}</a>
  222.                                     </div>
  223.                                 </div>
  224.                             </div>
  225.                         </div>
  226.                         {% endfor %}
  227.                     </div>
  228.                 </div>
  229.             </div>
  230.         </div>
  231.     </div>
  232. </section>
  233. {% endblock %}