CTA Sections

<!--Call to action start-->
<section class="py-5">
    <div class="container">
        <div class="row bg-pattern bg-primary-gradient rounded-3 p-7 g-0">
            <div
                class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-md-12 col-12">
                <div class="position-relative z-1 my-lg-5">
                    <div class="mb-5 text-center">
                        <h3 class="h2 text-white-stable mb-1">Try our
                            powerful work management tools</h3>
                        <p class="mb-0 text-white-stable">Sign up for a free
                            two-week trial of Block today — no credit card
                            required.</p>
                    </div>
                    <form class="row g-2 needs-validation d-flex mx-lg-7"
                        novalidate>
                        <div class="col-md-7 col-xl-7 col-12">
                            <label for="notificationEmail"
                                class="visually-hidden"></label>
                            <input type="email" id="notificationEmail"
                                class="form-control"
                                placeholder="Enter your business email"
                                aria-label="Enter your business email"
                                required />
                            <div class="invalid-feedback text-start">Please
                                choose a email.</div>
                        </div>
                        <div class="col-md-5 col-xl-5 col-12">
                            <div class="d-grid">
                                <button class="btn btn-dark"
                                    type="submit">Get notified for
                                    free</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Call to action end-->

<!--Call to action start-->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-10 offset-md-1">
                <!-- cta style 1 -->
                <div
                    class="text-center bg-primary bg-opacity-25 p-md-7 p-4 rounded-4 pattern-square">
                    <div class="mb-6">
                        <h2 class="display-6 h1">Join for free today.</h2>
                        <p class="mb-0">Supercharge your team with the best
                            sales acceleration and business automation
                            tools.</p>
                    </div>

                    <form
                        class="row d-flex justify-content-center mb-6 needs-validation"
                        novalidate>
                        <div class="col-lg-6">
                            <label for="subscribeEmail"
                                class="visually-hidden">Email</label>
                            <div class="input-group has-validation">
                                <input type="text" id="subscribeEmail"
                                    class="form-control border-primary"
                                    placeholder="Enter your business email"
                                    aria-label="Enter your business email"
                                    aria-describedby="basic-addon2"
                                    required />
                                <button class="btn btn-primary"
                                    type="submit" id="basic-addon2">Join
                                    Now</button>
                                <div class="invalid-feedback text-start">
                                    Please choose a email.</div>
                            </div>
                        </div>
                    </form>

                    <div
                        class="d-flex align-items-center justify-content-center flex-wrap">
                        <span class="me-3">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                width="16" height="16" fill="currentColor"
                                class="bi bi-check-circle-fill text-dark"
                                viewBox="0 0 16 16">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </svg>
                            <span class="text-dark ms-2">Try it free for 30
                                Days.</span>
                        </span>
                        <span class="me-3">
                            <svg xmlns="http://www.w3.org/2000/svg"
                                width="16" height="16" fill="currentColor"
                                class="bi bi-check-circle-fill text-dark"
                                viewBox="0 0 16 16">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </svg>
                            <span class="text-dark ms-2">No credit card
                                required.</span>
                        </span>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg"
                                width="16" height="16" fill="currentColor"
                                class="bi bi-check-circle-fill text-dark"
                                viewBox="0 0 16 16">
                                <path
                                    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                            </svg>
                            <span class="text-dark ms-2">Cancel
                                anytime.</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Call to action end-->

<!--Call to action start-->
<section>
    <div style="background-image: url(../assets/images/pattern/cta-pattern.png); background-position: center; background-repeat: no-repeat; background-size: cover"
        class="py-7 bg-primary-dark">
        <div class="container my-lg-7">
            <div class="row">
                <div class="col-lg-8 offset-lg-2">
                    <div class="text-center mb-5">
                        <h2 class="text-white-stable mb-3">Experience the
                            next-gen banking</h2>
                        <p class="mb-0 text-white-50">
                            Enim sed parturient sem enim nunc sit erat velit
                            eget hac nulla nullam et id praesent nisi ornare
                            risus risus consequat nunc nisl pellentesque
                            diam neque.
                        </p>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="text-center">
                        <a href="#!" class="btn btn-primary">Open an account
                            today</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Call to action end-->

<!--Call to action start-->
<section class="my-lg-7 py-5">
    <div class="container">
        <div
            class="row bg-pattern bg-primary-gradient rounded-3 py-lg-7 py-5 g-0">
            <div class="col-md-8 offset-md-2">
                <div class="text-center position-relative z-1 px-5"
                    >
                    <div class="mb-5">
                        <h3 class="h2 text-white-stable mb-3">Ready to
                            attend?</h3>
                        <p class="mb-0 text-white-stable">
                            Ready to join our block community of business
                            leaders for four days of virtual sessions on
                            driving developer happiness and boosting
                            productivity?
                        </p>
                    </div>

                    <a href="#" class="btn btn-dark">Register Now</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--Call to action end-->

<!--speak with expert-->
<section class="my-9">
    <div class="container">
        <div class="row line-pattern bg-primary-gradient rounded-3 p-7 g-0">
            <div class="col-lg-8 offset-lg-2 z-1">
                <div class="text-center py-md-7">
                    <h2 class="h1 text-white-stable">Want to speak with a
                        expert?</h2>
                    <p class="text-white-50 px-lg-7 mb-5">
                        We’d love to hear about your brand and business
                        challenges, even if you’re not sure what your next
                        step is. No pitch, no strings attached.
                    </p>
                    <a href="#!" class="btn btn-dark">Let's talk</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--speak with expert-->

<!--project idea-->
<section class="py-lg-8 py-5 bg-gray-900">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 offset-lg-1 col-md-12">
                <div class="row align-items-center">
                    <div class="col-lg-8 col-md-7">
                        <div class="text-center text-md-start mb-6 mb-md-0">
                            <h2 class="text-white-stable">Have a Cool
                                Project idea?</h2>
                            <p class="mb-0 text-dark-50">Plan to building a
                                new website or web app for startup.</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-5">
                        <div class="text-center">
                            <a href="#" class="btn btn-primary">Start by
                                saying Hi..</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--project idea-->

<!--powerfull work-->
<section class="container mb-lg-8  py-5">
    <div class="row g-0">
        <div class="col-12">
            <div class="bg-gray-900 rounded-3">
                <div class="row align-items-center">
                    <div class="offset-xl-1 col-xl-4 col-lg-12">
                        <div class="d-flex flex-column gap-4 p-6 p-xl-0">
                            <div>
                                <h2 class="text-white-stable">Try our
                                    powerful work management tools</h2>
                                <p class="mb-0 me-lg-8">Sign up for a free
                                    two-week trial of Block today — no
                                    credit card required.</p>
                            </div>
                            <div>
                                <a href="#" class="btn btn-primary">Get
                                    Started for free</a>
                            </div>
                            <div>
                                <ul class="list-inline">
                                    <li class="list-inline-item">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg"
width="16" height="17"
viewBox="0 0 16 17"
fill="none">
<g
    clip-path="url(#clip0_1710_19624)">
    <path
        d="M16 8.61426C16 10.736 15.1571 12.7708 13.6569 14.2711C12.1566 15.7714 10.1217 16.6143 8 16.6143C5.87827 16.6143 3.84344 15.7714 2.34315 14.2711C0.842855 12.7708 0 10.736 0 8.61426C0 6.49253 0.842855 4.45769 2.34315 2.9574C3.84344 1.45711 5.87827 0.614258 8 0.614258C10.1217 0.614258 12.1566 1.45711 13.6569 2.9574C15.1571 4.45769 16 6.49253 16 8.61426ZM12.03 5.58426C11.9586 5.51308 11.8735 5.45703 11.7799 5.41947C11.6863 5.38192 11.5861 5.36362 11.4853 5.36567C11.3845 5.36772 11.2851 5.39009 11.1932 5.43143C11.1012 5.47276 11.0185 5.53223 10.95 5.60626L7.477 10.0313L5.384 7.93726C5.24183 7.80478 5.05378 7.73266 4.85948 7.73608C4.66518 7.73951 4.47979 7.81822 4.34238 7.95564C4.20497 8.09305 4.12625 8.27843 4.12283 8.47274C4.1194 8.66704 4.19152 8.85508 4.324 8.99726L6.97 11.6443C7.04128 11.7154 7.12616 11.7715 7.21958 11.8091C7.313 11.8467 7.41305 11.8652 7.51375 11.8633C7.61444 11.8614 7.71374 11.8393 7.8057 11.7982C7.89766 11.7572 7.9804 11.698 8.049 11.6243L12.041 6.63426C12.1771 6.49276 12.2523 6.30353 12.2504 6.10722C12.2485 5.9109 12.1698 5.72314 12.031 5.58426H12.03Z"
        fill="#F1F5F9" />
</g>
<defs>
    <clipPath
        id="clip0_1710_19624">
        <rect width="16"
            height="16"
            fill="white"
            transform="translate(0 0.614258)" />
    </clipPath>
</defs>
                                            </svg>
                                        </span>
                                        <span class="ms-1">No credit card
                                            required</span>
                                    </li>
                                    <li class="list-inline-item">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg"
width="16" height="17"
viewBox="0 0 16 17"
fill="none">
<g
    clip-path="url(#clip0_1710_19624)">
    <path
        d="M16 8.61426C16 10.736 15.1571 12.7708 13.6569 14.2711C12.1566 15.7714 10.1217 16.6143 8 16.6143C5.87827 16.6143 3.84344 15.7714 2.34315 14.2711C0.842855 12.7708 0 10.736 0 8.61426C0 6.49253 0.842855 4.45769 2.34315 2.9574C3.84344 1.45711 5.87827 0.614258 8 0.614258C10.1217 0.614258 12.1566 1.45711 13.6569 2.9574C15.1571 4.45769 16 6.49253 16 8.61426ZM12.03 5.58426C11.9586 5.51308 11.8735 5.45703 11.7799 5.41947C11.6863 5.38192 11.5861 5.36362 11.4853 5.36567C11.3845 5.36772 11.2851 5.39009 11.1932 5.43143C11.1012 5.47276 11.0185 5.53223 10.95 5.60626L7.477 10.0313L5.384 7.93726C5.24183 7.80478 5.05378 7.73266 4.85948 7.73608C4.66518 7.73951 4.47979 7.81822 4.34238 7.95564C4.20497 8.09305 4.12625 8.27843 4.12283 8.47274C4.1194 8.66704 4.19152 8.85508 4.324 8.99726L6.97 11.6443C7.04128 11.7154 7.12616 11.7715 7.21958 11.8091C7.313 11.8467 7.41305 11.8652 7.51375 11.8633C7.61444 11.8614 7.71374 11.8393 7.8057 11.7982C7.89766 11.7572 7.9804 11.698 8.049 11.6243L12.041 6.63426C12.1771 6.49276 12.2523 6.30353 12.2504 6.10722C12.2485 5.9109 12.1698 5.72314 12.031 5.58426H12.03Z"
        fill="#F1F5F9" />
</g>
<defs>
    <clipPath
        id="clip0_1710_19624">
        <rect width="16"
            height="16"
            fill="white"
            transform="translate(0 0.614258)" />
    </clipPath>
</defs>
                                            </svg>
                                        </span>
                                        <span class="ms-1">1 month free
                                            trial</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="offset-xl-1 col-xl-5 col-lg-12">
                        <div class="pt-xl-8 d-none d-xl-block">
                            <img src="../assets/images/landings/sass-v3/cta-img.svg"
                                class="img-fluid w-xxl-100" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--powerfull work-->

<!--Call to action start-->
  <section class="py-5 bg-light-subtle">
     <div class="container my-lg-7">
        <div class="row justify-content-center text-center">
           <div class="col-lg-6 col-md-9 col-12 d-flex flex-column gap-4">
              <div>
                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                    <path opacity="0.2" d="M42 18L27.2719 28.5H20.7281L6 18L24 6L42 18Z" fill="#8B3DFF" />
                    <path
                       d="M42.8325 16.7512L24.8325 4.75125C24.586 4.58679 24.2963 4.49902 24 4.49902C23.7037 4.49902 23.414 4.58679 23.1675 4.75125L5.1675 16.7512C4.96202 16.8883 4.79358 17.0741 4.67713 17.2919C4.56068 17.5098 4.49984 17.753 4.5 18V37.5C4.5 38.2956 4.81607 39.0587 5.37868 39.6213C5.94129 40.1839 6.70435 40.5 7.5 40.5H40.5C41.2957 40.5 42.0587 40.1839 42.6213 39.6213C43.1839 39.0587 43.5 38.2956 43.5 37.5V18C43.5002 17.753 43.4393 17.5098 43.3229 17.2919C43.2064 17.0741 43.038 16.8883 42.8325 16.7512ZM18.135 28.5L7.5 36V20.9119L18.135 28.5ZM21.2044 30H26.7956L37.4137 37.5H10.5862L21.2044 30ZM29.865 28.5L40.5 20.9119V36L29.865 28.5ZM24 7.80187L39.3581 18.0412L26.7956 27H21.2081L8.64563 18.0412L24 7.80187Z"
                       fill="#8B3DFF" />
                 </svg>
              </div>
              <div>
                 <h2 class="fs-1">Subscribe to our newsletter</h2>
                 <p class="mb-0">Enjoy using Block Template and stay tuned for the latest updates and news.</p>
              </div>
              <div>
                 <form
                    class="row g-2 d-flex mx-lg-7"
                    action="https://codescandy.us1.list-manage.com/subscribe/post?u=b838b4eb099ebf09c3407db0f&amp;id=b01fb647c7&amp;f_id=00e5e0e5f0"
                    method="post"
                    name="mc-embedded-subscribe-form"
                    novalidate>
                    <div class="col-md-9 col-12">
                       <label for="notificationEmail" class="visually-hidden"></label>
                       <input type="email" id="notificationEmail" class="form-control" name="EMAIL" placeholder="Email" required="" />
                       <div class="invalid-feedback text-start">Email.</div>
                    </div>
                    <div class="col-md-3 col-12">
                       <div class="d-grid">
                          <button class="btn btn-dark" type="submit" name="subscribe">Subscribe</button>
                       </div>
                    </div>
                    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups -->
                    <div style="position: absolute; left: -5000px" aria-hidden="true">
                       <input class="subscription-form-antispam" type="text" name="b_b838b4eb099ebf09c3407db0f_b01fb647c7" tabindex="-1" />
                    </div>
                 </form>
              </div>
           </div>
        </div>
     </div>
   </section>
   <!--Call to action end-->