templates/website/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base_website.html.twig' %}
  3. {% block body %}
  5.     <!--body content wrap start-->
  6.     <div class="main">
  8.         <!--hero section start-->
  9.         <section class="hero-equal-height ptb-100 gradient-overlay"
  10.                 style="background: url('{{ asset('assets_website/img/galaxy-image.jpg') }}')no-repeat center center / cover">
  11.             <div class="container">
  12.                 <div class="row align-items-center">
  13.                     <div class="col-md-6 col-lg-6">
  14.                         <div class="hero-content-left text-white my-lg-0 my-md-5 my-sm-5 my-5">
  15.                             <h1 class="text-white">Mejoramos la experiencia de tus eventos</h1>
  16.                             <p class="lead">
  17.                                 Somos un sistema digital de catalogo, compra y entrega dentro de tus eventos mediante código QR
  18.                             </p>
  19.                             <div class="action-btns download-btn mt-4">
  20.                                 <a href="#" class="btn solid-white-btn animated-btn mr-lg-3">Download Now</a>
  21.                                 <a href="#" class="btn outline-white-btn animated-btn">Contact with us</a>
  22.                             </div>
  23.                         </div>
  24.                     </div>
  25.                     <div class="col-md-5 col-lg-6">
  26.                         <div class="video-app-wrap ml-auto mt--120 d-none d-sm-none d-md-block d-lg-block">
  27.                             <div class="iphone-mask">
  28.                                 <img src="{{ asset('assets_website/img/hero-app-image.png') }}" alt="app" class="img-fluid mask-img"/>
  29.                             </div>
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.             <div class="shape-bottom overflow-hidden">
  35.                 <img src="{{ asset('assets_website/img/hero-shape.svg') }}" alt="shape" class="bottom-shape">                
  36.             </div>
  37.         </section>
  38.         <!--hero section end-->
  41.         <!--promo neb secion start-->
  42.         <section class="promo-new-section ptb-100">
  43.             <div class="container">
  44.                 <div class="row">
  45.                     <div class="col-md-8 col-lg-8">
  46.                         <div class="section-heading mb-5">
  47.                             <h2>Why You Need AppBeats</h2>
  48.                             <p>We will helps you to build beautiful websites that stand out and automatically adapt to your style. Assertively envisioneer standardized portals with high standards in results.</p>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.                 <div class="row">
  53.                     <div class="col-md-4 col-lg-4">
  54.                         <div class="single-promo single-promo-hover single-promo-1 rounded text-center white-bg p-5 h-100">
  55.                             <div class="circle-icon mb-5">
  56.                                 <span class="ti-vector text-white"></span>
  57.                             </div>
  58.                             <h5>Clean Design</h5>
  59.                             <p>Increase sales by showing true dynamics of your website.</p>
  60.                         </div>
  61.                     </div>
  62.                     <div class="col-md-4 col-lg-4">
  63.                         <div class="single-promo single-promo-hover single-promo-1 rounded text-center white-bg p-5 h-100">
  64.                             <div class="circle-icon mb-5">
  65.                                 <span class="ti-lock text-white"></span>
  66.                             </div>
  67.                             <h5>Secure Data</h5>
  68.                             <p>Build your online store’s trust using Social Proof &amp; Urgency.</p>
  69.                         </div>
  70.                     </div>
  71.                     <div class="col-md-4 col-lg-4">
  72.                         <div class="single-promo single-promo-hover single-promo-1 rounded text-center white-bg p-5 h-100">
  73.                             <div class="circle-icon mb-5">
  74.                                 <span class="ti-eye text-white"></span>
  75.                             </div>
  76.                             <h5>Retina Ready</h5>
  77.                             <p>Realize importance of social proof in customer’s purchase decision.</p>
  78.                         </div>
  79.                     </div>
  80.                 </div>
  81.             </div>
  82.         </section>
  83.         <!--promo neb secion end-->
  85.         <!--features section start-->
  86.         <div id="features" class="feature-section gray-light-bg ptb-100">
  87.             <div class="container">
  88.                 <div class="row justify-content-center">
  89.                     <div class="col-md-9 col-lg-9">
  90.                         <div class="section-heading text-center mb-5">
  91.                             <h2>Quick & Easy Process With Best Features</h2>
  92.                             <p>Objectively deliver professional value with diverse web-readiness.
  93.                                 Collaboratively transition wireless customer service without goal-oriented catalysts for
  94.                                 change. Collaboratively.</p>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  100.                 <!--feature new style start-->
  101.                 <div class="row align-items-center">
  102.                     <div class="col-lg-4 col-md-12">
  103.                         <div class="row">
  104.                             <div class="col-12">
  105.                                 <div class="d-flex align-items-start mb-sm-0 mb-md-5 mb-lg-5">
  106.                                     <span class="ti-face-smile icon-sm color-1 color-1-bg p-3 mr-4 mt-1 rounded"></span>
  107.                                     <div class="icon-text">
  108.                                         <h5 class="mb-2">Responsive web design</h5>
  109.                                         <p>Modular and interchangable componente between layouts and even demos.</p>
  110.                                     </div>
  111.                                 </div>
  112.                             </div>
  113.                             <div class="col-12">
  114.                                 <div class="d-flex align-items-start mb-sm-0 mb-md-5 mb-lg-5">
  115.                                     <span class="ti-vector icon-sm color-2 color-2-bg p-3 mr-4 mt-1 rounded"></span>
  116.                                     <div class="icon-text">
  117.                                         <h5 class="mb-2">Loaded with features</h5>
  118.                                         <p>Modular and interchangable componente between layouts and even demos.</p>
  119.                                     </div>
  120.                                 </div>
  121.                             </div>
  122.                             <div class="col-12">
  123.                                 <div class="d-flex align-items-start mb-sm-0 mb-md-5 mb-lg-5">
  124.                                     <span class="ti-headphone-alt icon-sm color-5 color-5-bg p-3 mr-4 mt-1 rounded"></span>
  125.                                     <div class="icon-text">
  126.                                         <h5 class="mb-2">Friendly online support</h5>
  127.                                         <p>Modular and interchangable componente between layouts and even demos.</p>
  128.                                     </div>
  129.                                 </div>
  130.                             </div>
  131.                         </div>
  132.                     </div>
  133.                     <div class="col-lg-4 col-md-12 d-none d-sm-none d-md-block d-lg-block">
  134.                         <div class="position-relative pb-md-5 py-lg-0">
  135.                             <img alt="Image placeholder" src="{{ asset('assets_website/img/image-10.png') }}" class="img-center img-fluid">
  136.                         </div>
  137.                     </div>
  138.                     <div class="col-lg-4 col-md-12">
  139.                         <div class="row">
  140.                             <div class="col-12">
  141.                                 <div class="d-flex align-items-start mb-sm-0 mb-md-5 mb-lg-5">
  142.                                     <span class="ti-layout-media-right icon-sm color-4 color-4-bg p-3 mr-4 mt-1 rounded"></span>
  143.                                     <div class="icon-text">
  144.                                         <h5 class="mb-2">Free updates forever</h5>
  145.                                         <p>Modular and interchangable componente between layouts and even demos.</p>
  146.                                     </div>
  147.                                 </div>
  148.                             </div>
  149.                             <div class="col-12">
  150.                                 <div class="d-flex align-items-start mb-sm-0 mb-md-5 mb-lg-5">
  151.                                     <span class="ti-layout-cta-right icon-sm color-3 color-3-bg p-3 mr-4 mt-1 rounded"></span>
  152.                                     <div class="icon-text">
  153.                                         <h5 class="mb-2">Built with Sass</h5>
  154.                                         <p>Modular and interchangable componente between layouts and even demos.</p>
  155.                                     </div>
  156.                                 </div>
  157.                             </div>
  158.                             <div class="col-12">
  159.                                 <div class="d-flex align-items-start mb-sm-0 mb-md-5 mb-lg-5">
  160.                                     <span class="ti-palette icon-sm color-6 color-6-bg p-3 mr-4 mt-1 rounded"></span>
  161.                                     <div class="icon-text">
  162.                                         <h5 class="mb-2">Infinite colors</h5>
  163.                                         <p>Modular and interchangable componente between layouts and even demos.</p>
  164.                                     </div>
  165.                                 </div>
  166.                             </div>
  167.                         </div>
  168.                     </div>
  169.                 </div>
  170.                 <!--feature new style end-->
  171.             </div>
  172.         </div>
  173.         <!--features section end-->
  175.         <!--feature section tab style start-->
  176.         <section id="how-it-work" class="feature-tab-section ptb-100">
  177.             <div class="container">
  178.                 <div class="row">
  179.                     <div class="col-md-12">
  180.                         <div class="feature-content-wrap">
  181.                             <ul class="nav nav-tabs feature-tab justify-content-center border-bottom-0" data-tabs="tabs">
  182.                                 <li class="nav-item">
  183.                                     <a class="nav-link active h6 d-flex align-items-center" href="#tab6-1"
  184.                                     data-toggle="tab">
  185.                                         <span class="ti-vector d-inline-block color-1 mr-2 icon-sm p-1"></span>
  186.                                         Generate Ideas
  187.                                     </a>
  188.                                 </li>
  189.                                 <li class="nav-item">
  190.                                     <a class="nav-link h6 d-flex align-items-center" href="#tab6-2" data-toggle="tab">
  191.                                         <span class="ti-layout-list-thumb d-inline-block color-2 mr-2 icon-sm p-1"></span>
  192.                                         Collect Contents
  193.                                     </a>
  194.                                 </li>
  195.                                 <li class="nav-item">
  196.                                     <a class="nav-link h6 d-flex align-items-center" href="#tab6-3" data-toggle="tab">
  197.                                         <span class="ti-palette d-inline-block color-3 mr-2 icon-sm p-1"></span>
  198.                                         Create Design
  199.                                     </a>
  200.                                 </li>
  201.                                 <li class="nav-item">
  202.                                     <a class="nav-link h6 d-flex align-items-center" href="#tab6-4" data-toggle="tab">
  203.                                         <span class="ti-cup d-inline-block color-4 mr-2 icon-sm p-1"></span>
  204.                                         Launch Project
  205.                                     </a>
  206.                                 </li>
  207.                             </ul>
  208.                             <div class="tab-content feature-tab-content">
  209.                                 <div class="tab-pane active" id="tab6-1">
  210.                                     <div class="row align-items-center justify-content-between pt-5">
  211.                                         <div class="col-md-5 col-lg-4">
  212.                                             <div class="tab-content-wrap">
  213.                                                 <span class="h1 display-3 color-secondary font-weight-bold mb-3 d-block">01.</span>
  214.                                                 <h3>Fully Branded Portal</h3>
  215.                                                 <p>Assertively incentivize long-term high-impact scenarios whereas accurate
  216.                                                     imperatives.</p>
  217.                                                 <p>Quickly communicate multimedia based materials for enabled channels.
  218.                                                     Seamlessly disintermediate robust best practices for B2C e-tailers.
  219.                                                     Efficiently procrastinate prospective experiences.</p>
  220.                                                 <a href="#" class="mt-3 d-flex align-items-center">Learn more about this
  221.                                                     <span class="ti-angle-right ml-2"></span></a>
  222.                                             </div>
  223.                                         </div>
  224.                                         <div class="col-md-6 col-lg-7">
  225.                                             <div class="img-wrap">
  226.                                                 <img src="{{ asset('assets_website/img/dasboard-screen-1.png') }}" alt="feature"
  227.                                                     class="img-fluid rounded"/>
  228.                                             </div>
  229.                                         </div>
  230.                                     </div>
  231.                                 </div>
  232.                                 <div class="tab-pane" id="tab6-2">
  233.                                     <div class="row align-items-center justify-content-between pt-5">
  234.                                         <div class="col-md-5 col-lg-4">
  235.                                             <div class="tab-content-wrap">
  236.                                                 <span class="h1 display-3 color-secondary font-weight-bold mb-3 d-block">02.</span>
  237.                                                 <h3>Returns to Exchanges</h3>
  238.                                                 <p>Quickly communicate multimedia based materials for enabled channels. Turn
  239.                                                     Returns to Exchanges Seamlessly disintermediate robust best practices
  240.                                                     for B2C e-tailers. Efficiently procrastinate prospective
  241.                                                     experiences.</p>
  242.                                                 <p>Dramatically reconceptualize user-centric expertise whereas competitive
  243.                                                     synergy.</p>
  244.                                                 <a href="#" class="mt-3 d-flex align-items-center">Learn more about this
  245.                                                     <span class="ti-angle-right ml-2"></span></a>
  246.                                             </div>
  247.                                         </div>
  248.                                         <div class="col-md-6 col-lg-7">
  249.                                             <div class="img-wrap">
  250.                                                 <img src="{{ asset('assets_website/img/dasboard-screen-3.png') }}" alt="feature"
  251.                                                     class="img-fluid rounded"/>
  252.                                             </div>
  253.                                         </div>
  254.                                     </div>
  255.                                 </div>
  256.                                 <div class="tab-pane" id="tab6-3">
  257.                                     <div class="row align-items-center justify-content-between pt-5">
  258.                                         <div class="col-md-5 col-lg-4">
  259.                                             <div class="tab-content-wrap">
  260.                                                 <span class="h1 display-3 color-secondary font-weight-bold mb-3 d-block">03.</span>
  261.                                                 <h3>Multichannel Returns</h3>
  262.                                                 <p>Quickly communicate multimedia based materials to team driven
  263.                                                     infrastructures. Seamlessly disintermediate robust best practices for
  264.                                                     B2C e-tailers. Efficiently procrastinate prospective experiences.</p>
  265.                                                 <p>Competently disintermediate web-enabled growth strategies whereas
  266.                                                     professional applications.</p>
  267.                                                 <a href="#" class="mt-3 d-flex align-items-center">Learn more about this
  268.                                                     <span class="ti-angle-right ml-2"></span></a>
  269.                                             </div>
  270.                                         </div>
  271.                                         <div class="col-md-6 col-lg-7">
  272.                                             <div class="img-wrap">
  273.                                                 <img src="{{ asset('assets_website/img/dasboard-screen-4.png') }}" alt="feature"
  274.                                                     class="img-fluid rounded"/>
  275.                                             </div>
  276.                                         </div>
  277.                                     </div>
  278.                                 </div>
  279.                                 <div class="tab-pane" id="tab6-4">
  280.                                     <div class="row align-items-center justify-content-between pt-5">
  281.                                         <div class="col-md-5 col-lg-4">
  282.                                             <div class="tab-content-wrap">
  283.                                                 <span class="h1 display-3 color-secondary font-weight-bold mb-3 d-block">04.</span>
  284.                                                 <h3>Set goals & timelines</h3>
  285.                                                 <p>Quickly communicate multimedia based materials for enabled channels.
  286.                                                     Seamlessly disintermediate robust best practices for B2C e-tailers.
  287.                                                     Efficiently procrastinate prospective experiences.</p>
  288.                                                 <p>Continually architect multifunctional schemas rather than superior users.
  289.                                                     Conveniently scale.</p>
  290.                                                 <a href="#" class="mt-3 d-flex align-items-center">Learn more about this
  291.                                                     <span class="ti-angle-right ml-2"></span></a>
  292.                                             </div>
  293.                                         </div>
  294.                                         <div class="col-md-6 col-lg-7">
  295.                                             <div class="img-wrap">
  296.                                                 <img src="{{ asset('assets_website/img/dasboard-screen-5.png') }}" alt="feature"
  297.                                                     class="img-fluid rounded"/>
  298.                                             </div>
  299.                                         </div>
  300.                                     </div>
  301.                                 </div>
  302.                             </div>
  303.                         </div>
  304.                     </div>
  305.                 </div>
  306.             </div>
  307.         </section>
  308.         <!--feature section tab style end-->
  310.         <!--screenshots section start-->
  311.         <section id="screenshots" class="screenshots-section ptb-100 gray-light-bg">
  312.             <div class="container">
  313.                 <div class="row justify-content-center">
  314.                     <div class="col-md-9 col-lg-8">
  315.                         <div class="section-heading text-center mb-5">
  316.                             <h2>Show Our Apps Screenshots</h2>
  317.                             <p>Credibly synthesize multimedia based networks vis-a-vis top-line growth strategies. Continually leverage existing worldwide interfaces </p>
  318.                         </div>
  319.                     </div>
  320.                 </div>
  321.                 <!--start app screen carousel-->
  322.                 <div class="screen-slider-content">
  323.                     <div class="screenshot-frame"></div>
  324.                     <div class="screen-carousel owl-carousel owl-theme dot-indicator">
  325.                         <img src="{{ asset('assets_website/img/01.png') }}" class="img-fluid" alt="screenshots"/>
  326.                         <img src="{{ asset('assets_website/img/02.png') }}" class="img-fluid" alt="screenshots"/>
  327.                         <img src="{{ asset('assets_website/img/03.png') }}" class="img-fluid" alt="screenshots"/>
  328.                         <img src="{{ asset('assets_website/img/04.png') }}" class="img-fluid" alt="screenshots"/>
  329.                         <img src="{{ asset('assets_website/img/05.png') }}" class="img-fluid" alt="screenshots"/>
  330.                         <img src="{{ asset('assets_website/img/06.png') }}" class="img-fluid" alt="screenshots"/>
  331.                     </div>
  332.                 </div>
  333.                 <!--end app screen carousel-->
  335.             </div>
  336.         </section>
  337.         <!--screenshots section end-->
  339.         <!--download section start-->
  340.         <section id="download" class="gradient-overlay"
  341.                 style="background: url('{{ asset('assets_website/img/hero-bg-3.jpg') }}')no-repeat center center / cover">
  342.             <div class="container">
  343.                 <div class="row justify-content-around align-items-end">
  344.                     <div class="col-md-6 col-lg-5">
  345.                         <div class="download-txt text-white ptb-100">
  346.                             <h2 class="text-white">
  347.                                 Download Our App
  348.                             </h2>
  349.                             <p class="lead">Conveniently transform frictionless mindshare after orthogonal manufactured
  350.                                 products.</p>
  351.                             <div class="action-btns download-btn mt-4">
  352.                                 <a href="#" class="btn solid-white-btn mr-3"> <span class="ti-apple mr-2"></span> App Store</a>
  353.                                 <a href="#" class="btn outline-white-btn"> <span class="ti-android mr-2"></span> Play Store</a>
  354.                             </div>
  355.                         </div>
  356.                     </div>
  357.                     <div class="col-md-6 col-lg-7">
  358.                         <div class="d-flex align-items-end">
  359.                             <img class="img-fluid" src="{{ asset('assets_website/img/hand-with-app.png') }}" alt="download"/>
  360.                         </div>
  361.                     </div>
  362.                 </div>
  363.             </div>
  364.         </section>
  365.         <!--download section end-->
  367.         <!--testimonial section start-->
  368.         <section id="reviews" class="testimonial-section ptb-100">
  369.             <div class="container">
  370.                 <div class="row justify-content-center">
  371.                     <div class="col-md-9 col-lg-8">
  372.                         <div class="section-heading mb-5 text-center">
  373.                             <h2>Testimonials What Clients Say</h2>
  374.                             <p class="lead">
  375.                                 Rapidiously morph transparent internal or "organic" sources whereas resource sucking
  376.                                 e-business. Conveniently innovate compelling internal.
  377.                             </p>
  378.                         </div>
  379.                     </div>
  380.                 </div>
  382.                 <div class="row">
  383.                     <div class="col-md-4 col-lg-4">
  384.                         <div class="testimonial-single shadow-sm gray-light-bg rounded p-4">
  385.                             <blockquote>
  386.                                 Assertively procrastinate distributed relationships whereas equity invested intellectual capital everything energistically underwhelm proactive.
  387.                             </blockquote>
  388.                             <div class="client-ratting mt-2">
  389.                                 <ul class="list-inline">
  390.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  391.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  392.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  393.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  394.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  395.                                 </ul>
  396.                                 <h6 class="font-weight-bold">5.0 <small class="font-weight-lighter">BizBite</small></h6>
  397.                             </div>
  398.                         </div>
  399.                         <div class="client-info-wrap d-flex align-items-center mt-5">
  400.                             <div class="client-img mr-3">
  401.                                 <img src="{{ asset('assets_website/img/client-1.jpg') }}" alt="client" width="60" class="img-fluid rounded-circle shadow-sm"/>
  402.                             </div>
  403.                             <div class="client-info">
  404.                                 <h5 class="mb-0">Austin Cesar</h5>
  405.                                 <p class="mb-0">ThemeTags</p>
  406.                             </div>
  407.                         </div>
  408.                     </div>
  409.                     <div class="col-md-4 col-lg-4">
  410.                         <div class="testimonial-single shadow-sm gray-light-bg rounded p-4">
  411.                             <blockquote>
  412.                                 Intrinsicly facilitate functional imperatives without next-generation meta-services. Compellingly revolutionize worldwide users vis-a-vis enterprise best practices.
  413.                             </blockquote>
  414.                             <div class="client-ratting mt-2">
  415.                                 <ul class="list-inline">
  416.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  417.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  418.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  419.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  420.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  421.                                 </ul>
  422.                                 <h6 class="font-weight-bold">5.0 <small class="font-weight-lighter">BizBite</small></h6>
  423.                             </div>
  424.                         </div>
  425.                         <div class="client-info-wrap d-flex align-items-center mt-5">
  426.                             <div class="client-img mr-3">
  427.                                 <img src="{{ asset('assets_website/img/client-2.jpg') }}" alt="client" width="60" class="img-fluid rounded-circle shadow-sm"/>
  428.                             </div>
  429.                             <div class="client-info">
  430.                                 <h5 class="mb-0">Pirtle Karol</h5>
  431.                                 <p class="mb-0">ThemeTags</p>
  432.                             </div>
  433.                         </div>
  434.                     </div>
  435.                     <div class="col-md-4 col-lg-4">
  436.                         <div class="testimonial-single shadow-sm gray-light-bg rounded p-4">
  437.                             <blockquote>
  438.                                 Interactively grow backend scenarios through one paradigms. Distinctively and communicate efficient information without effective meta-services.
  439.                             </blockquote>
  440.                             <div class="client-ratting mt-2">
  441.                                 <ul class="list-inline">
  442.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  443.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  444.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  445.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  446.                                     <li class="list-inline-item"><span class="ti-star ratting-color"></span></li>
  447.                                 </ul>
  448.                                 <h6 class="font-weight-bold">5.0 <small class="font-weight-lighter">BizBite</small></h6>
  449.                             </div>
  450.                         </div>
  451.                         <div class="client-info-wrap d-flex align-items-center mt-5">
  452.                             <div class="client-img mr-3">
  453.                                 <img src="{{ asset('assets_website/img/client-3.jpg') }}" alt="client" width="60" class="img-fluid rounded-circle shadow-sm"/>
  454.                             </div>
  455.                             <div class="client-info">
  456.                                 <h5 class="mb-0">Aminul Islam</h5>
  457.                                 <p class="mb-0">ThemeTags</p>
  458.                             </div>
  459.                         </div>
  460.                     </div>
  461.                 </div>
  463.             </div>
  464.         </section>
  465.         <!--testimonial section end-->
  467.         <!--pricing section start-->
  468.         <section id="pricing" class="pricing ptb-100 gray-light-bg">
  469.             <div class="container">
  470.                 <div class="row align-items-center justify-content-around">
  471.                     <div class="col-md-12 col-lg-4">
  472.                         <div class="section-heading mb-5">
  473.                             <h2>How We Compare Our Pricing</h2>
  474.                             <p class="lead">Monotonectally mesh visionary supply chains before plug-and-play interfaces.
  475.                                 Globally benchmark worldwide information after clicks-and-mortar channels.</p>
  476.                         </div>
  477.                         <ul class="nav nav-tabs feature-tab pricing-tab border-bottom-0 mb-md-5 mb-lg-0" data-tabs="tabs">
  478.                             <li class="nav-item">
  479.                                 <a class="nav-link active h6 d-flex align-items-center" href="#monthly" data-toggle="tab">
  480.                                     Monthly
  481.                                 </a>
  482.                             </li>
  483.                             <li class="nav-item">
  484.                                 <a class="nav-link h6 d-flex align-items-center" href="#yearly" data-toggle="tab">
  485.                                     Yearly
  486.                                 </a>
  487.                             </li>
  488.                         </ul>
  489.                     </div>
  490.                     <div class="col-md-12 col-lg-7">
  491.                         <div class="tab-content feature-tab-content">
  492.                             <div class="tab-pane active" id="monthly">
  493.                                 <div class="row align-items-center justify-content-between">
  494.                                     <div class="col-lg-6 col-md-6 col-12">
  495.                                         <div class="card text-center single-pricing-pack">
  496.                                             <div class="pt-4"><h5>Basic</h5></div>
  497.                                             <div class="card-header py-4 border-0 pricing-header">
  498.                                                 <div class="h1 text-center mb-0">$<span
  499.                                                         class="price font-weight-bolder">19</span></div>
  500.                                             </div>
  501.                                             <div class="card-body">
  502.                                                 <ul class="list-unstyled text-sm mb-4 pricing-feature-list">
  503.                                                     <li>Push Notifications</li>
  504.                                                     <li>Data Transfer</li>
  505.                                                     <li>SQL Database</li>
  506.                                                     <li>Search & SEO Analytics</li>
  507.                                                     <li>24/7 Phone Support</li>
  508.                                                     <li>2 months technical support</li>
  509.                                                     <li>2+ profitable keyword</li>
  510.                                                 </ul>
  511.                                                 <a href="#" class="btn outline-btn mb-3" target="_blank">Purchase now</a>
  512.                                             </div>
  513.                                         </div>
  514.                                     </div>
  515.                                     <div class="col-lg-6 col-md-6 col-12">
  516.                                         <div class="card popular-price text-center single-pricing-pack">
  517.                                             <div class="pt-4"><h5>Standard</h5></div>
  518.                                             <div class="card-header py-4 border-0 pricing-header">
  519.                                                 <div class="h1 text-center mb-0">$<span
  520.                                                         class="price font-weight-bolder">49</span></div>
  522.                                             </div>
  523.                                             <div class="card-body">
  524.                                                 <ul class="list-unstyled text-sm mb-4 pricing-feature-list">
  525.                                                     <li>Push Notifications</li>
  526.                                                     <li>Data Transfer</li>
  527.                                                     <li>SQL Database</li>
  528.                                                     <li>Search & SEO Analytics</li>
  529.                                                     <li>24/7 Phone Support</li>
  530.                                                     <li>1 Year technical support</li>
  531.                                                     <li>50+ profitable keyword</li>
  532.                                                 </ul>
  533.                                                 <a href="#" class="btn solid-btn mb-3" target="_blank">Purchase now</a>
  534.                                             </div>
  535.                                         </div>
  536.                                     </div>
  537.                                 </div>
  538.                             </div>
  539.                             <div class="tab-pane" id="yearly">
  540.                                 <div class="row align-items-center justify-content-between">
  541.                                     <div class="col-lg-6 col-md-6 col-12">
  542.                                         <div class="card text-center single-pricing-pack">
  543.                                             <div class="pt-4"><h5>Basic</h5></div>
  544.                                             <div class="card-header py-4 border-0 pricing-header">
  545.                                                 <div class="h1 text-center mb-0">$<span
  546.                                                         class="price font-weight-bolder">199</span></div>
  547.                                             </div>
  548.                                             <div class="card-body">
  549.                                                 <ul class="list-unstyled text-sm mb-4 pricing-feature-list">
  550.                                                     <li>Push Notifications</li>
  551.                                                     <li>Data Transfer</li>
  552.                                                     <li>SQL Database</li>
  553.                                                     <li>Search & SEO Analytics</li>
  554.                                                     <li>24/7 Phone Support</li>
  555.                                                     <li>2 months technical support</li>
  556.                                                     <li>2+ profitable keyword</li>
  557.                                                 </ul>
  558.                                                 <a href="#" class="btn outline-btn mb-3" target="_blank">Purchase now</a>
  559.                                             </div>
  560.                                         </div>
  561.                                     </div>
  562.                                     <div class="col-lg-6 col-md-6 col-12">
  563.                                         <div class="card popular-price text-center single-pricing-pack">
  564.                                             <div class="pt-4"><h5>Standard</h5></div>
  565.                                             <div class="card-header py-4 border-0 pricing-header">
  566.                                                 <div class="h1 text-center mb-0">$<span
  567.                                                         class="price font-weight-bolder">549</span></div>
  569.                                             </div>
  570.                                             <div class="card-body">
  571.                                                 <ul class="list-unstyled text-sm mb-4 pricing-feature-list">
  572.                                                     <li>Push Notifications</li>
  573.                                                     <li>Data Transfer</li>
  574.                                                     <li>SQL Database</li>
  575.                                                     <li>Search & SEO Analytics</li>
  576.                                                     <li>24/7 Phone Support</li>
  577.                                                     <li>1 Year technical support</li>
  578.                                                     <li>50+ profitable keyword</li>
  579.                                                 </ul>
  580.                                                 <a href="#" class="btn solid-btn mb-3" target="_blank">Purchase now</a>
  581.                                             </div>
  582.                                         </div>
  583.                                     </div>
  584.                                 </div>
  585.                             </div>
  586.                         </div>
  587.                     </div>
  588.                 </div>
  589.             </div>
  590.         </section>
  591.         <!--pricing section end-->
  593.         <!--faq section start-->
  594.         <div id="faq" class="ptb-100">
  595.             <div class="container">
  596.                 <div class="row">
  597.                     <div class="col-md-9 col-lg-8">
  598.                         <div class="section-heading mb-5">
  599.                             <h2>Frequently Asked Queries</h2>
  600.                             <p>Efficiently productivate reliable paradigms before ubiquitous models. Continually utilize
  601.                                 frictionless expertise whereas tactical relationships. Still have questions? <a
  602.                                         href="#contact" class="page-scroll">Contact us</a></p>
  603.                         </div>
  604.                     </div>
  605.                 </div>
  606.                 <div class="row">
  607.                     <div class="col-md-12 col-lg-12">
  608.                         <div id="accordion" class="accordion">
  609.                             <div class="card mb-0">
  610.                                 <a class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
  611.                                     <h6 class="mb-0 d-inline-block"><span class="ti-receipt mr-3"></span> Which license do I need?</h6>
  612.                                 </a>
  613.                                 <div id="collapseOne" class="collapse" data-parent="#accordion" style="">
  614.                                     <div class="card-body">
  615.                                         <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  616.                                             Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
  617.                                             synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  618.                                         </p>
  619.                                     </div>
  620.                                 </div>
  621.                             </div>
  622.                             <div class="card mb-0">
  623.                                 <a class="card-header collapsed" data-toggle="collapse" href="#collapseTwo">
  624.                                     <h6 class="mb-0 d-inline-block"><span class="ti-gallery mr-3"></span> How do I get access to a
  625.                                         theme?</h6>
  626.                                 </a>
  627.                                 <div id="collapseTwo" class="collapse" data-parent="#accordion" style="">
  628.                                     <div class="card-body">
  629.                                         <p>Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
  630.                                             synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  631.                                         </p>
  632.                                     </div>
  633.                                 </div>
  634.                             </div>
  635.                             <div class="card mb-0">
  636.                                 <a class="card-header collapsed" data-toggle="collapse" href="#collapseThree">
  637.                                     <h6 class="mb-0 d-inline-block"><span class="ti-wallet mr-3"></span> How do I see previous orders?
  638.                                     </h6>
  639.                                 </a>
  640.                                 <div id="collapseThree" class="collapse" data-parent="#accordion" style="">
  641.                                     <div class="card-body">
  642.                                         <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  643.                                             Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
  644.                                             synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  645.                                         </p>
  646.                                     </div>
  647.                                 </div>
  648.                             </div>
  649.                             <div class="card mb-0">
  650.                                 <a class="card-header collapsed" data-toggle="collapse" href="#collapseFour">
  651.                                     <h6 class="mb-0 d-inline-block"><span class="ti-headphone-alt mr-3"></span> Support related issues for the template?
  652.                                     </h6>
  653.                                 </a>
  654.                                 <div id="collapseFour" class="collapse" data-parent="#accordion" style="">
  655.                                     <div class="card-body">
  656.                                         <p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  657.                                             Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table.
  658.                                         </p>
  659.                                     </div>
  660.                                 </div>
  661.                             </div>
  662.                         </div>
  663.                     </div>
  664.                 </div>
  665.             </div>
  666.         </div>
  667.         <!--faq section end-->
  669.         <!--client section start-->
  670.         <section class="client-section ptb-100 gray-light-bg">
  671.             <div class="container">
  672.                 <!--clients logo start-->
  673.                 <div class="row justify-content-center">
  674.                     <div class="col-md-8">
  675.                         <div class="section-heading text-center mb-5">
  676.                             <h2>Trusted by companies</h2>
  677.                             <p class="lead">
  678.                                 Rapidiously morph transparent internal or "organic" sources whereas resource sucking
  679.                                 e-business. Conveniently innovate compelling internal.
  680.                             </p>
  681.                         </div>
  682.                     </div>
  683.                 </div>
  684.                 <div class="row align-items-center">
  685.                     <div class="col-md-12">
  686.                         <div class="owl-carousel owl-theme clients-carousel dot-indicator">
  687.                             <div class="item single-client">
  688.                                 <img src="{{ asset('assets_website/img/clients-logo-01.png') }}" alt="client logo" class="img-fluid client-img">
  689.                             </div>
  690.                             <div class="item single-client">
  691.                                 <img src="{{ asset('assets_website/img/clients-logo-02.png') }}" alt="client logo" class="img-fluid client-img">
  692.                             </div>
  693.                             <div class="item single-client">
  694.                                 <img src="{{ asset('assets_website/img/clients-logo-03.png') }}" alt="client logo" class="img-fluid client-img">
  695.                             </div>
  696.                             <div class="item single-client">
  697.                                 <img src="{{ asset('assets_website/img/clients-logo-04.png') }}" alt="client logo" class="img-fluid client-img">
  698.                             </div>
  699.                             <div class="item single-client">
  700.                                 <img src="{{ asset('assets_website/img/clients-logo-05.png') }}" alt="client logo" class="img-fluid client-img">
  701.                             </div>
  702.                             <div class="item single-client">
  703.                                 <img src="{{ asset('assets_website/img/clients-logo-06.png') }}" alt="client logo" class="img-fluid client-img">
  704.                             </div>
  705.                             <div class="item single-client">
  706.                                 <img src="{{ asset('assets_website/img/clients-logo-07.png') }}" alt="client logo" class="img-fluid client-img">
  707.                             </div>
  708.                             <div class="item single-client">
  709.                                 <img src="{{ asset('assets_website/img/clients-logo-08.png') }}" alt="client logo" class="img-fluid client-img">
  710.                             </div>
  711.                         </div>
  712.                     </div>
  713.                 </div>
  714.                 <!--clients logo end-->
  715.             </div>
  716.         </section>
  717.         <!--client section start-->
  719.         <!--contact us section start-->
  720.         <section id="contact" class="contact-us-section contact-us ptb-100">
  721.             <div class="container">
  722.                 <div class="row justify-content-around">
  723.                     <div class="col-md-6">
  724.                         <div class="message-box d-none">
  725.                             <div class="alert alert-danger"></div>
  726.                         </div>
  727.                         <div class="contact-us-form gray-light-bg rounded p-5">
  728.                             <h4>Ready to get started?</h4>
  729.                             <form action="#" method="POST" id="contactForm" class="contact-us-form" novalidate="novalidate">
  730.                                 <div class="row">
  731.                                     <div class="col-sm-6 col-12">
  732.                                         <div class="form-group">
  733.                                             <input type="text" class="form-control" name="name" id="name" placeholder="Enter name"
  734.                                                 required="required">
  735.                                         </div>
  736.                                     </div>
  737.                                     <div class="col-sm-6 col-12">
  738.                                         <div class="form-group">
  739.                                             <input type="email" class="form-control" name="email" id="email" placeholder="Enter email"
  740.                                                 required="required">
  741.                                         </div>
  742.                                     </div>
  743.                                 </div>
  744.                                 <div class="row">
  745.                                     <div class="col-sm-6 col-12">
  746.                                         <div class="form-group">
  747.                                             <input type="text" name="phone" value="" class="form-control" id="phone"
  748.                                                 placeholder="Your Phone">
  749.                                         </div>
  750.                                     </div>
  751.                                     <div class="col-sm-6 col-12">
  752.                                         <div class="form-group">
  753.                                             <input type="text" name="company" value="" size="40" class="form-control"
  754.                                                 id="company" placeholder="Your Company">
  755.                                         </div>
  756.                                     </div>
  757.                                 </div>
  758.                                 <div class="row">
  759.                                     <div class="col-12">
  760.                                         <div class="form-group">
  761.                                         <textarea name="message" id="message" class="form-control" rows="7" cols="25"
  762.                                                 placeholder="Message"></textarea>
  763.                                         </div>
  764.                                     </div>
  765.                                 </div>
  766.                                 <div class="row">
  767.                                     <div class="col-sm-12 mt-3">
  768.                                         <button type="submit" class="btn solid-btn" id="btnContactUs">
  769.                                             Send Message
  770.                                         </button>
  771.                                     </div>
  772.                                 </div>
  773.                             </form>
  774.                             <p class="form-message"></p>
  775.                         </div>
  776.                     </div>
  777.                     <div class="col-md-5">
  778.                         <div class="contact-us-content">
  779.                             <h2>Looking for a excellent Business idea?</h2>
  780.                             <p class="lead">Seamlessly deliver pandemic e-services and next-generation initiatives.</p>
  782.                             <a href="#" class="btn outline-btn align-items-center">Get Directions <span
  783.                                     class="ti-arrow-right pl-2"></span></a>
  785.                             <hr class="my-5">
  787.                             <h5>Our Headquarters</h5>
  788.                             <address>
  789.                                 100 Yellow House, Mn <br>
  790.                                 Factory, United State, 13420
  791.                             </address>
  792.                             <br>
  793.                             <span>Phone: +1234567890123</span> <br>
  794.                             <span>Email: <a href="mailto:email@yourdomain.com"
  795.                                             class="link-color">email@yourdomain.com</a></span>
  797.                         </div>
  798.                     </div>
  799.                 </div>
  800.             </div>
  801.         </section>
  802.         <!--contact us section end-->
  805.     </div>
  806.     <!--body content wrap end-->
  807. {% endblock %}