

Vvveb.SectionsGroup['<?= lang('sections.group.skill') ?>'] =
["skill/skill_style_1","skill/skill_style_2","skill/skill_style_3"];

Vvveb.Sections.add("skill/skill_style_1", {
name: "<?= lang('sections.skill_style_1') ?>",
image: "<?= SITE_THEME_URL ?>/assets/preview/skill_style_1.png",
html: `
<section class="choose-area jarallax choose-bg">
    <div class="choose-shape">
        <img id="<?=uniqid()?>" src="<?= SITE_THEME_URL ?>/assets/img/images/choose_shape.png" alt="" data-aos="fade-right"
             data-aos-delay="0" style="z-index: 1">
    </div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="choose-content">
                    <div class="section-title-two white-title mb-20 tg-heading-subheading animation-style3">
                        <h2 class="title tg-element-title">Her zaman en iyi rehberliği almanızı sağlayacağız.</h2>
                    </div>
                    <p>Morem ipsum dolor sit amet, consectetur adipiscing elita florai psum dolor sit amet,
                        consecteture.Borem.</p>
                    <a href="https://www.youtube.com/watch?v=6mkoGSqTqFI" class="play-btn popup-video"><i
                                class="la la-play"></i>Videoyu İzle</a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="skill-wrap wow fadeInRight" data-wow-delay=".2s">
                    <div class="section-title-two mb-15">
                        <span class="sub-title">Neden en iyisiyiz</span>
                        <h2 class="title">Sizin için Akıllı ve Mükemmel Finans Çözümleri</h2>
                    </div>
                    <p>Morem ipsum dolor sit amet consectedipiscing elita florai psum dolor sit amonsectet Borem ipsum
                        consectetur.</p>
                    <div class="progress-wrap">
                        <div class="progress-item">
                            <h6 class="title" id="<?=uniqid()?>">Danışmanlık</h6>
                            <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="85"
                                 aria-valuemin="0" aria-valuemax="100" id="<?=uniqid()?>">
                                <div class="progress-bar wow slideInLeft" data-wow-delay=".1s" style="width: 85%" data-vvveb-disabled-noback=""><span>85%</span>
                                </div>
                            </div>
                        </div>
                        <div class="progress-item">
                            <h6 class="title" id="<?=uniqid()?>">Yatırım</h6>
                            <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="76"
                                 aria-valuemin="0" aria-valuemax="100" id="<?=uniqid()?>">
                                <div class="progress-bar wow slideInLeft" data-wow-delay=".2s" style="width: 76%" data-vvveb-disabled-noback=""><span>76%</span>
                                </div>
                            </div>
                        </div>
                        <div class="progress-item">
                            <h6 class="title" id="<?=uniqid()?>">İşletme</h6>
                            <div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="90"
                                 aria-valuemin="0" aria-valuemax="100" id="<?=uniqid()?>">
                                <div class="progress-bar wow slideInLeft" data-wow-delay=".3s" style="width: 90%" data-vvveb-disabled-noback=""><span>90%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="background-container"><img src="<?= SITE_THEME_URL ?>/assets/img/bg/choose_bg.jpg"></div>

</section>
`,
});

Vvveb.Sections.add("skill/skill_style_2", {
name: "<?= lang('sections.skill_style_2') ?>",
image: "<?= SITE_THEME_URL ?>/assets/preview/skill_style_2.png",
html: `
<section class="choose-area-two">
    <div class="container">
        <div class="row align-items-center justify-content-center">
            <div class="col-lg-6 col-md-8">
                <div class="choose-img-two">
                    <img id="<?=uniqid()?>" src="<?= SITE_THEME_URL ?>/assets/img/images/h4_choose_img.png" alt="" style="z-index: 1">
                    <img id="<?=uniqid()?>" src="<?= SITE_THEME_URL ?>/assets/img/images/choose_img_shape01.png" alt="" style="z-index: 1">
                    <img id="<?=uniqid()?>" src="<?= SITE_THEME_URL ?>/assets/img/images/choose_img_shape02.png" alt="" style="z-index: 1">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="choose-content-two">
                    <div class="section-title-two white-title mb-30 tg-heading-subheading animation-style2">
                        <span class="sub-title tg-element-title">Neden Bizi Seçmelisiniz?</span>
                        <h2 class="title tg-element-title">Her Zaman En İyi Rehberliği Almanızı Sağlayacağız.</h2>
                    </div>
                    <p>Morem ipsum dolor sit amet, consectetur adipiscing elita florai psum dolor sit amet,
                        consecteture.Borem.</p>
                    <div class="choose-circle-wrap">
                        <div class="circle-item">
                            <div class="chart" data-percent="55">
                                <div class="circle-content">
                                    <span class="percentage" id="<?=uniqid()?>">55%</span>
                                    <p id="<?=uniqid()?>">İş Büyümesi</p>
                                </div>
                            </div>
                        </div>
                        <div class="circle-item">
                            <div class="chart" data-percent="85">
                                <div class="circle-content">
                                    <span class="percentage" id="<?=uniqid()?>">85%</span>
                                    <p id="<?=uniqid()?>">Güvenilir Müşteriler</p>
                                </div>
                            </div>
                        </div>
                        <div class="circle-item">
                            <div class="chart" data-percent="98">
                                <div class="circle-content">
                                    <span class="percentage" id="<?=uniqid()?>">98%</span>
                                    <p id="<?=uniqid()?>">Komple Sigorta</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="choose-shape">
        <img src="<?= SITE_THEME_URL ?>/assets/img/images/choose_shape.png" alt="" data-aos="fade-right"
             data-aos-delay="200">
    </div>
</section>
`,
});

Vvveb.Sections.add("skill/skill_style_3", {
name: "<?= lang('sections.skill_style_3') ?>",
image: "<?= SITE_THEME_URL ?>/assets/preview/skill_style_3.png",
html: `
<section class="choose-area-three">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="choose-content-three">
                    <div class="section-title-two white-title mb-30">
                        <span class="sub-title">Uzmanlık</span>
                        <h2 class="title">İşletmenizi güvende tutun ve yüksek kullanılabilirlik sağlayın.</h2>
                    </div>
                    <p>Ever find yourself staring at your computer s good consulting slogan to come to mind?
                        Oftentimes.</p>
                    <div class="accordion" id="accordion-parentId">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne-parentId">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-parentId" aria-expanded="true" aria-controls="collapseOne-parentId">
                                    Accordion Item #1
                                </button>
                            </h2>
                            <div id="collapseOne-parentId" class="accordion-collapse collapse show" aria-labelledby="headingOne-parentId" data-bs-parent="#accordion-parentId">
                                <div class="accordion-body">
                                    <p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingTwo-parentId">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-parentId" aria-expanded="false" aria-controls="collapseTwo">
                                    Accordion Item #2
                                </button>
                            </h2>
                            <div id="collapseTwo-parentId" class="accordion-collapse collapse" aria-labelledby="headingTwo-parentId" data-bs-parent="#accordion-parentId">
                                <div class="accordion-body">
                                    <p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingThree-parentId">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-parentId" aria-expanded="false" aria-controls="collapseThree">
                                    Accordion Item #3
                                </button>
                            </h2>
                            <div id="collapseThree-parentId" class="accordion-collapse collapse" aria-labelledby="headingThree-parentId" data-bs-parent="#accordion-parentId">
                                <div class="accordion-body">
                                    <p>Mauris viverra cursus ante laoreet eleifend. Donec vel fringilla ante. Aenean finibus velit id urna vehicula, nec maximus est sollicitudin</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="choose-img-three">
                    <img src="<?= SITE_THEME_URL ?>/assets/img/images/inner_choose_img.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
</section>
`,
});
