templates/page/about_us.html.twig line 1

Open in your IDE?
  1. {% extends 'standard_tpl.html.twig' %}
  3. {# set page_background = 'themes/castine/assets/images/banner/about-us.jpeg' #}
  5. {% block header_desc %}
  6.     <p>The mission of Lister Professional Institute is to tailor the current Ghana educational curriculum
  7. to suit the expectations of our students</p>
  8. {% endblock %}
  10. {% block page_container %}
  12.     <section class="section-box">
  13.     <div class="banner-hero banner-2 bg-about-1">
  14.         <div class="container">
  15.         <div class="row">
  16.             <div class="col-lg-7"><span class="tag-1 color-orange-900">What We Do, What You Get</span>
  17.             <h1 class="text-display-3 mt-30">A small creative team excited to create beautiful things</h1>
  18.             <p class="text-body-lead-large color-gray-500 mt-40 pr-40">Integrated workflow designed for product teams. We create world-class development and branding</p>
  19.             <div class="mt-40"><a class="btn btn-black shape-square icon-arrow-right-white" href="page-service-1.html">Join Our Team</a><a class="btn btn-link color-gray-900 icon-arrow-right text-heading-6" href="page-contact.html">Contact Us</a></div>
  20.             </div>
  21.             <div class="col-lg-5 d-none d-lg-block">
  22.             <div class="banner-imgs">
  23.                 <div class="block-1 shape-1"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/banner2.png') }}" alt="Agon"></div><img class="img-responsive shape-2" alt="Agon" src="{{ asset('themes/castine/assets/imgs/page/about/1/banner1.png') }}">
  24.             </div>
  25.             </div>
  26.         </div>
  27.         </div>
  28.     </div>
  29.     </section>
  30.     <div class="section-box mt-100">
  31.         <div class="container">
  32.             <div class="row">
  33.             <div class="col-lg-1"></div>
  34.             <div class="col-lg-10">
  35.                 <div class="bd-bottom pb-20 mb-40 text-mb-center">
  36.                 <div class="row">
  37.                     <div class="col-lg-3 col-md-3 col-sm-6 col-6 mb-30"><span class="text-display-3 color-green-900">+<span class="count">12</span></span>
  38.                     <p class="text-body-text color-gray-500 pl-40t">Years in Business</p>
  39.                     </div>
  40.                     <div class="col-lg-3 col-md-3 col-sm-6 col-6 mb-30"><span class="text-display-3 color-green-900">+<span class="count">14</span>k</span>
  41.                     <p class="text-body-text color-gray-500 pl-40">Projects Done</p>
  42.                     </div>
  43.                     <div class="col-lg-3 col-md-3 col-sm-6 col-6 mb-30"><span class="text-display-3 color-green-900">+<span class="count">26</span></span>
  44.                     <p class="text-body-text color-gray-500 pl-40">Countries / Offices</p>
  45.                     </div>
  46.                     <div class="col-lg-3 col-md-3 col-sm-6 col-6 mb-30"><span class="text-display-3 color-green-900">+<span class="count">24</span>k</span>
  47.                     <p class="text-body-text color-gray-500 pl-40">Constant Clients</p>
  48.                     </div>
  49.                 </div>
  50.                 </div>
  51.             </div>
  52.             <div class="col-lg-1"></div>
  53.             </div>
  54.         </div>
  55.     </div>
  56.     <section class="section-box mt-70">
  57.         <div class="container">
  58.             <div class="row">
  59.             <div class="col-lg-1 col-sm-1 col-12"></div>
  60.             <div class="col-lg-10 col-sm-10 col-12 text-center">
  61.                 <div class="text-center mb-20"><span class="tag-1">What We Do, What You Get</span></div>
  62.                 <h2 class="text-display-3 color-gray-900 mb-60">We believe in the power<br class="d-lg-block d-none"> of creative ideas</h2>
  63.             </div>
  64.             <div class="col-lg-1 col-sm-1 col-12"></div>
  65.             </div>
  66.         </div>
  67.         <div class="container">
  68.             <div class="row">
  69.             <div class="col-lg-1"></div>
  70.             <div class="col-lg-10">
  71.                 <div class="box-image"><a class="popup-youtube btn-play-video btn-play-middle" href="https://www.youtube.com/watch?v=oRI37cOPBQQ"></a><img class="img-responsive bdrd-16" src="{{ asset('themes/castine/assets/imgs/page/about/1/img-1.png') }}" alt="Agon"></div>
  72.             </div>
  73.             <div class="col-lg-1"></div>
  74.             </div>
  75.         </div>
  76.     </section>
  77.     <section class="section-box">
  78.         <div class="container">
  79.             <div class="row">
  80.                 <div class="col-lg-1 col-sm-1 col-12"></div>
  81.                 <div class="col-lg-10 col-sm-10 col-12 text-center">
  82.                     <h2 class="text-heading-1 color-gray-900 mb-10">Providing solutions of every kind</h2>
  83.                     <div class="text-body-lead-large color-gray-600 mt-20 about-us-text" style="text-align:justify">
  84.                         {{ content.body|raw }}
  85.                     </div>
  86.                 </div>
  87.             <div class="col-lg-1 col-sm-1 col-12"></div>
  88.             </div>
  89.         </div>
  90.         <div class="container mt-40">
  91.             <div class="row">
  92.             <div class="col-lg-4 col-md-12 col-sm-12">
  93.                 <div class="list-icons mt-50">
  94.                 <div class="item-icon"><span class="icon-left"><img src="{{ asset('themes/castine/assets/imgs/page/homepage2/icon-acquis.svg') }}" alt="Agon"></span>
  95.                     <h4 class="text-heading-4">1. Acquisition</h4>
  96.                     <p class="text-body-text color-gray-600 mt-15">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit laborum &mdash; semper quis lectus nulla.</p>
  97.                 </div>
  98.                 </div>
  99.             </div>
  100.             <div class="col-lg-4 col-md-12 col-sm-12">
  101.                 <div class="list-icons mt-50">
  102.                 <div class="item-icon"><span class="icon-left"><img src="{{ asset('themes/castine/assets/imgs/page/homepage2/icon-active.svg') }}" alt="Agon"></span>
  103.                     <h4 class="text-heading-4">2. Activation</h4>
  104.                     <p class="text-body-text color-gray-600 mt-15">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit laborum &mdash; semper quis lectus nulla.</p>
  105.                 </div>
  106.                 </div>
  107.             </div>
  108.             <div class="col-lg-4 col-md-12 col-sm-12">
  109.                 <div class="list-icons mt-50">
  110.                 <div class="item-icon"><span class="icon-left"><img src="{{ asset('themes/castine/assets/imgs/page/homepage2/icon-retent.svg') }}" alt="Agon"></span>
  111.                     <h4 class="text-heading-4">3. Retention</h4>
  112.                     <p class="text-body-text color-gray-600 mt-15">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit laborum &mdash; semper quis lectus nulla.</p>
  113.                 </div>
  114.                 </div>
  115.             </div>
  116.             </div>
  117.         </div>
  118.     </section>
  119.     <section class="section-box mt-100">
  120.     <div class="container">
  121.         <div class="text-center mb-20"><span class="tag-1 bg-6 color-green-900">What We Do, What You Get</span></div>
  122.         <div class="row">
  123.         <div class="col-lg-2 col-sm-1 col-12"></div>
  124.         <div class="col-lg-8 col-sm-10 col-12 text-center">
  125.             <h2 class="text-heading-1 color-gray-900">Bringing the world&apos;s<br class="d-lg-block d-none"> ideas to life</h2>
  126.             <p class="text-body-lead-large color-gray-600 mt-20">Developers are trusted to create an engaging experience for their companies, so we build tools to help them.</p>
  127.         </div>
  128.         <div class="col-lg-2 col-sm-1 col-12"></div>
  129.         </div>
  130.     </div>
  131.     <div class="container mt-70">
  132.         <div class="row">
  133.         <div class="col-lg-4 col-sm-12">
  134.             <div class="card-grid-style-3 pb-40 bg-5 mb-30">
  135.             <div class="grid-1-img"><img src="{{ asset('themes/castine/assets/imgs/page/homepage1/business-strategy.svg') }}" alt="Agon"></div>
  136.             <h3 class="text-heading-3 mt-20">Business Strategy</h3>
  137.             <p class="text-body-excerpt mt-20">You are always welcome to visit our little den. Professional in teir craft! All products were super amazing with strong attension to details, comps and overall vibe.</p>
  138.             <div class="mt-30"><a class="btn btn-default icon-arrow-right" href="page-service-1.html">Learn more</a></div>
  139.             </div>
  140.         </div>
  141.         <div class="col-lg-4 col-sm-12">
  142.             <div class="card-grid-style-3 bd-bg-6 pb-40 mb-30">
  143.             <div class="grid-1-img"><img src="{{ asset('themes/castine/assets/imgs/page/homepage1/local.svg') }}" alt="Agon"></div>
  144.             <h3 class="text-heading-3 mt-20">Local Marketing</h3>
  145.             <p class="text-body-excerpt mt-20">You are always welcome to visit our little den. Professional in teir craft! All products were super amazing with strong attension to details, comps and overall vibe.</p>
  146.             <div class="mt-30"><a class="btn btn-default icon-arrow-right" href="page-service-1.html">Learn more</a></div>
  147.             </div>
  148.         </div>
  149.         <div class="col-lg-4 col-sm-12">
  150.             <div class="card-grid-style-3 bg-2 pb-40 mb-30">
  151.             <div class="grid-1-img"><img src="{{ asset('themes/castine/assets/imgs/page/homepage1/social.svg') }}" alt="Agon"></div>
  152.             <h3 class="text-heading-3 mt-20">Social media</h3>
  153.             <p class="text-body-excerpt mt-20">You are always welcome to visit our little den. Professional in teir craft! All products were super amazing with strong attension to details, comps and overall vibe.</p>
  154.             <div class="mt-30"><a class="btn btn-default icon-arrow-right" href="page-service-1.html">Learn more</a></div>
  155.             </div>
  156.         </div>
  157.         </div>
  158.     </div>
  159.     </section>
  160.     <section class="section-box">
  161.         <div class="container mt-110">
  162.             <div class="row">
  163.             <div class="col-lg-9 col-sm-8">
  164.                 <h3 class="text-heading-1 mb-10">Our Team</h3>
  165.                 <p class="text-body-lead-large color-gray-600">Partner with a team that is passionate about creating engaging content that captivates viewers.</p>
  166.             </div>
  167.             </div>
  168.         </div>
  169.         <div class="container mt-80">
  170.             <div class="box-swiper">
  171.                 <div class="swiper-container swiper-group-1">
  172.                     <div class="swiper-wrapper pb-70 pt-5">
  173.                         <div class="swiper-slide active">
  174.                             <div class="row">
  175.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  176.                                     <div class="card-grid-style-5 hover-up">
  177.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-1.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  178.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  179.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  180.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  181.                                     </div>
  182.                                 </div>
  183.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  184.                                     <div class="card-grid-style-5 hover-up">
  185.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-2.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  186.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  187.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  188.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  189.                                     </div>
  190.                                 </div>
  191.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  192.                                     <div class="card-grid-style-5 hover-up">
  193.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-3.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  194.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  195.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  196.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  197.                                     </div>
  198.                                 </div>
  199.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  200.                                     <div class="card-grid-style-5 hover-up">
  201.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-4.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  202.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  203.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  204.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  205.                                     </div>
  206.                                 </div>
  207.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  208.                                     <div class="card-grid-style-5 hover-up">
  209.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-5.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  210.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  211.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  212.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  213.                                     </div>
  214.                                 </div>
  215.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  216.                                     <div class="card-grid-style-5 hover-up">
  217.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-6.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  218.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  219.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  220.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  221.                                     </div>
  222.                                 </div>
  223.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  224.                                     <div class="card-grid-style-5 hover-up">
  225.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-7.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  226.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  227.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  228.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  229.                                     </div>
  230.                                 </div>
  231.                                 <div class="col-lg-3 col-md-6 col-sm-6">
  232.                                     <div class="card-grid-style-5 hover-up">
  233.                                     <div class="grid-5-img mb-15"><img src="{{ asset('themes/castine/assets/imgs/page/about/1/team-8.png') }}" alt="Agon"></div><span class="text-body-text-md color-gray-500">Marketing CEO</span>
  234.                                     <h3 class="text-heading-5 mb-5 mt-5">Theresa Webb</h3>
  235.                                     <p class="text-body-excerpt text-desc color-gray-500 mt-15 mb-20">Lorem ipsum dolor sit amet consectetur imp adipiscing elit justo</p><span class="text-body-text-md color-gray-600">Let&rsquo;s Connect</span>
  236.                                     <div class="social-bottom"><a class="icon-socials icon-facebook" href="#"></a><a class="icon-socials icon-twitter" href="#"></a><a class="icon-socials icon-instagram" href="#"></a><a class="icon-socials icon-linkedin" href="#"></a></div>
  237.                                     </div>
  238.                                 </div>
  239.                             </div>
  240.                         </div>
  241.                     </div>
  242.                     <div class="swiper-pagination swiper-pagination3"></div>
  243.                 </div>
  244.                 <div class="swiper-button-next swiper-button-next-4"></div>
  245.                 <div class="swiper-button-prev swiper-button-prev-4"></div>
  246.             </div>
  247.         </div>
  248.     </section>
  250. {% endblock %}