templates/home/home.html.twig line 1

Open in your IDE?
  1. {% extends 'layouts/layout.html.twig' %}
  3. {% block content %}
  4.     <div class='home-page-wrapper'>
  5.         <section class='home-hero-image-section members-together-image text-center d-flex flex-column'>
  6.             <div class='home-hero-image-section py-4'>
  7.                 <h1 class='home-hero-image-section pt-3 pb-0 mb-0'>
  8.                     Hi. Osgo Evolved.
  9.                 </h1>
  10.                 <h4 class='mt-0 pt-0'>
  11.                     We've been busy, welcome back
  12.                 </h4>
  13.                 <a class='home-join-osgo-btn btn pb-1 mt-4' href='/join-us'>
  14.                     Join Osgo
  15.                 </a>
  16.             </div>
  18.         </section>
  21.         <section class='compliance-main pb-5'>
  22.             <div class='container px-2 position-relative'>
  23.                 <div class='sticky-text-back pt-5 pb-0 mb-1 whats-new' id='whats-new'>What's new</div>
  24.                 <div class='pt-0 mt-0 pb-5 home-starter-text fade-down observable-el' data-animation='fadeDown'>
  25.                     <h2>There's a lot to explore, take a look</h2>
  26.                 </div>
  27.                 <div class='row no-gutters'>
  28.                     <div class='col-12 col-sm-8 fade-down observable-el' data-animation='fadeDown'>
  29.                         <p class='home-basic-p color-black-light'>Let's make things better. We've brought out a huge new set of workflows, tools and more to help take your practices to the next level.
  30.                         </p>
  31.                     </div>
  32.                 </div>
  33.                 <div class='compliance-main-tabs mt-5 p-2 p-md-3' id='control-whats-op'>
  34.                     <div class='row no-gutters p-4 fade-left observable-el' data-animation='fadeLeft'>
  35.                         <div class='col-12 col-sm-6 text-center'>
  36.                             <img src='/static/images/home/team-home.svg' alt='home and safety protocols'>
  37.                         </div>
  38.                         <div class='col-12 col-sm-6 mt-2 my-sm-auto'>
  39.                             <h4 class='color-black-light h4-main-oscare'>Open to your team</h4>
  40.                             <p class='home-basic-p text-left color-black-light'>You can now bring your whole team into Osgo and share documents, key details and more. Stay on the same page and increase your collaboration.</p>
  41.                         </div>
  42.                     </div>
  43.                     <div class='row no-gutters p-4 mx-auto fade-right observable-el' data-animation='fadeRight'>
  44.                         <div class='col-12 col-sm-6 text-center'>
  45.                             <img src='/static/images/home/compliance-protect.svg' alt='home and safety protocols'>
  46.                         </div>
  47.                         <div class='col-12 col-sm-6 mt-2 my-sm-auto'>
  48.                             <h4 class='color-black-light h4-main-oscare'>Secure documents</h4>
  49.                             <p class='home-basic-p text-left color-black-light'>Protecting you and your practice. Use the Team HQ to store all your key practice documents and be able to reproduce them at a moment's notice.</p>
  50.                         </div>
  51.                     </div>
  52.                     <div class='row no-gutters p-4 ml-auto fade-left observable-el' data-animation='fadeLeft'>
  53.                         <div class='col-12 col-sm-6 text-center'>
  54.                             <img src='/static/images/home/tools-home.svg' alt='home and safety protocols'>
  55.                         </div>
  56.                         <div class='col-12 col-sm-6 mt-2 my-sm-auto' >
  57.                             <h4 class='color-black-light h4-main-oscare'>Tools that do more</h4>
  58.                             <p class='home-basic-p text-left color-black-light'>Turn complex tasks into easy step-by-step guides. We have the template workflows to get you started - or create your own.</p>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  63.                 <div class='py-4'>
  64.                     <h2 class='text-center hvr-grow'>
  65.                         And more...
  66.                     </h2>
  67.                 </div>
  68.                 <div class='container px-2 position-relative'>
  69.                     <div class='pt-0 mt-0 pb-5 home-starter-text fade-down observable-el' data-animation='fadeDown'>
  70.                         <h2>Check out the Social Media Content Creator</h2>
  71.                     </div>
  72.                     <div class='row no-gutters'>
  73.                         <div class='col-12 col-sm-6 text-right my-auto fade-down observable-el' data-animation='fadeDown'>
  74.                             <p class='home-basic-p text-right ml-auto color-black-light'>Making creating social media images just so easy. We've extended the range of social media images further than ever before with over 50 new designs, ready to hit your feed. Simply add your logo with our simple customiser tool and you're good to go.</p>
  75.                         </div>
  76.                         <div class='col-12 col-sm-6 text-left fade-down observable-el' data-animation='fadeDown'>
  77.                             <img src='/static/images/home/marketing-home.png' alt='shopping pod products'>
  78.                         </div>
  79.                     </div>
  80.                     <div class='row home-wide-row card no-gutters p-3 mt-5 fade-down observable-el' data-animation='fadeDown'>
  82.                         <h4 class='text-center'>
  83.                             How it works
  84.                         </h4>
  85.                         <div class='row'>
  86.                             <div class='col-lg-3 col-md-6 col-12 px-5'>
  87.                                 <img src='/static/images/marketinghub/marketing-hub-step1.webp' alt='step one'>
  88.                                 <h6 class='color-black-light'>Choose your image</h6>
  89.                                 <p class='home-basic-p text-left color-black-light'>Select the image you want to use for your socials
  90.                                 </p>
  91.                             </div>
  92.                             <div class='col-lg-3 col-md-6 col-12 px-5'>
  93.                                 <img src='/static/images/marketinghub/marketing-hub-step2.webp' alt='step two'>
  94.                                 <h6 class='color-black-light'>Add your logo</h6>
  95.                                 <p class='home-basic-p text-left color-black-light'>Click browse to select your logo file and upload
  96.                                 </p>
  97.                             </div>
  98.                             <div class='col-lg-3 col-md-6 col-12 px-5'>
  99.                                 <img src='/static/images/marketinghub/marketing-hub-step3.webp' alt='step three'>
  100.                                 <h6 class='color-black-light'>Adjust position</h6>
  101.                                 <p class='home-basic-p text-left color-black-light'>Adjust your prefered size and position by clicking and dragging
  102.                                 </p>
  103.                             </div>
  104.                             <div class='col-lg-3 col-md-6 col-12 px-5'>
  105.                                 <img src='/static/images/marketinghub/marketing-hub-step4.webp' alt='step four'>
  106.                                 <h6 class='color-black-light'>Download and go</h6>
  107.                                 <p class='home-basic-p text-left color-black-light'>Your customized image is ready for download!</p>
  108.                             </div>
  109.                         </div>
  111.                     </div>
  112.                 </div>
  113.                 <div class='container px-2 position-relative mt-5'>
  114.                     <div class='pt-0 mt-0 pb-5 home-starter-text fade-down observable-el' data-animation='fadeDown'>
  115.                         <h2 class='text-center'>...Even more ways to save</h2>
  116.                     </div>
  117.                     <div class='row no-gutters'>
  118.                         <div class='col-12 col-sm-6 text-right my-auto fade-down observable-el' data-animation='fadeDown'>
  119.                             <p class='home-basic-p text-right ml-auto color-black-light'>We've improved our experience to help you save money with our deals and products. Slick online ordering to save you time and brand new deals to bring your practice success in every avenue it explores.</p>
  120.                         </div>
  121.                         <div class='col-12 col-sm-6 text-left fade-down observable-el' data-animation='fadeDown'>
  122.                             <img src='/static/images/home/shop-main.svg' alt='shopping pod products'>
  123.                         </div>
  124.                     </div>
  125.                 </div>
  126.                 <h3 class='text-left mt-5'>Just some of our new member deals and offers...</h3>
  127.                 <div class='compliance-main-tabs  p-2 p-md-3'>
  129.                     <div class='row no-gutters p-4 fade-left observable-el' data-animation='fadeLeft'>
  130.                         <div class='col-12 col-sm-6 text-center'>
  131.                             <img class='homedealimg' src='/static/images/home/incomeprotection.png' alt='income protection deal'>
  132.                         </div>
  133.                         <div class='col-12 col-sm-6 mt-2 my-sm-auto'>
  134.                             <h4 class='color-black-light h4-main-oscare'>Income Protection</h4>
  135.                             <p class='home-basic-p text-left color-black-light'>Osgo members get 25% off their first two years Income Protection Plus cover from PG Mutual. The policy could cover up to 70% of your income if you’re unable to work due to injury or illness, until you sufficiently recover or reach age 65 – whichever comes first.</p>
  136.                         </div>
  137.                     </div>
  138.                     <div class='row no-gutters p-4 mx-auto fade-right observable-el' data-animation='fadeRight'>
  139.                         <div class='col-12 col-sm-6 text-center'>
  140.                             <img class='homedealimg' src='/static/images/home/formthoticsdeal.png' alt='formthotics deal'>
  141.                         </div>
  142.                         <div class='col-12 col-sm-6 mt-2 my-sm-auto'>
  143.                             <h4 class='color-black-light h4-main-oscare'>Formthotics Range</h4>
  144.                             <p class='home-basic-p text-left color-black-light'>With a unique design and manufacturing process, Formthotics have established distinguishing features that create the ultimate foot orthotics that naturally fit your feet.</p>
  145.                         </div>
  146.                     </div>
  147.                     <div class='row no-gutters p-4 ml-auto fade-left observable-el' data-animation='fadeLeft'>
  148.                         <div class='col-12 col-sm-6 text-center'>
  149.                             <img class='homedealimg' src='/static/images/home/pedsoldeal.png' alt='pedsol deal'>
  150.                         </div>
  151.                         <div class='col-12 col-sm-6 mt-2 my-sm-auto'>
  152.                             <h4 class='color-black-light h4-main-oscare'>Pedsol</h4>
  153.                             <p class='home-basic-p text-left color-black-light'>PedSol provides podiatrists with an easy-to-use platform so you can provide your patients with extensive rehab plans that are tailor-made, easy to follow, and great for monitoring compliance.</p>
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.             </div>
  158.         </section>
  160.     </div>
  162. {% endblock %}