<div class="code-wrapper">
                  <div class="code-wrapper-inner">
                    <pre class="language-html"><code>&lt;section class=&quot;wrapper bg-soft-primary&quot;&gt;
  &lt;div class=&quot;container pt-10 pb-15 pt-md-14 pb-md-20 text-center&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-10 col-lg-8 col-xl-8 col-xxl-6 mx-auto mb-13&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title&quot;&gt;
        &lt;h1 class=&quot;display-1 mb-4&quot;&gt;Staying on top of your bills never been this easy&lt;/h1&gt;
        &lt;p class=&quot;lead fs-lg px-xl-12 px-xxl-6 mb-7&quot;&gt;Easily achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.&lt;/p&gt;
        &lt;div class=&quot;d-flex justify-content-center&quot; data-cues=&quot;slideInDown&quot; data-group=&quot;page-title-buttons&quot; data-delay=&quot;600&quot;&gt;
          &lt;span&gt;&lt;a class=&quot;btn btn-primary rounded mx-1&quot;&gt;Get Started&lt;/a&gt;&lt;/span&gt;
          &lt;span&gt;&lt;a class=&quot;btn btn-green rounded mx-1&quot;&gt;Free Trial&lt;/a&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;
&lt;section class=&quot;wrapper bg-light&quot;&gt;
  &lt;div class=&quot;container pb-14 pb-md-16 mb-lg-22 mb-xl-24&quot;&gt;
    &lt;div class=&quot;row gx-0 mb-16 mb-mb-20&quot;&gt;
      &lt;div class=&quot;col-9 col-sm-10 col-lg-9 mx-auto mt-n15 mt-md-n20&quot; data-cues data-group=&quot;images&quot; data-delay=&quot;1500&quot;&gt;
        &lt;img class=&quot;img-fluid mx-auto rounded shadow-lg&quot; data-cue=&quot;slideInUp&quot; src=&quot;/assets/img/photos/sa1.jpg&quot; srcset=&quot;/assets/img/photos/sa1@2x.jpg 2x&quot; alt=&quot;&quot; /&gt;
        &lt;img class=&quot;position-absolute rounded shadow-lg&quot; data-cue=&quot;slideInRight&quot; src=&quot;/assets/img/photos/sa2.jpg&quot; srcset=&quot;/assets/img/photos/sa2@2x.jpg 2x&quot; style=&quot;top: 20%; right:-10%; max-width:30%; height: auto;&quot; alt=&quot;&quot; /&gt;
        &lt;img class=&quot;position-absolute rounded shadow-lg&quot; data-cue=&quot;slideInLeft&quot; src=&quot;/assets/img/photos/sa3.jpg&quot; srcset=&quot;/assets/img/photos/sa3@2x.jpg 2x&quot; style=&quot;top: 10%; left:-10%; max-width:30%; height: auto;&quot; alt=&quot;&quot; /&gt;
        &lt;img class=&quot;position-absolute rounded shadow-lg&quot; data-cue=&quot;slideInLeft&quot; src=&quot;/assets/img/photos/sa4.jpg&quot; srcset=&quot;/assets/img/photos/sa4@2x.jpg 2x&quot; style=&quot;bottom: 10%; left:-13%; max-width:30%; height: auto;&quot; alt=&quot;&quot; /&gt;
      &lt;/div&gt;
      &lt;!-- /column --&gt;
    &lt;/div&gt;
    &lt;!-- /.row --&gt;
  &lt;/div&gt;
  &lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>