clara/resources/views/partials/widgets/lists/_widget-9.blade.php
2023-11-03 16:12:15 +07:00

249 lines
8.3 KiB
PHP

<!--begin::List widget 9-->
<div class="card card-flush h-xl-100">
<!--begin::Header-->
<div class="card-header py-7">
<!--begin::Title-->
<h3 class="card-title align-items-start flex-column">
<span class="card-label fw-bold text-gray-800">Social Network Visits</span>
<span class="text-gray-500 mt-1 fw-semibold fs-6">8k social visitors</span>
</h3>
<!--end::Title-->
<!--begin::Toolbar-->
<div class="card-toolbar">
<a href="#" class="btn btn-sm btn-light">View All</a>
</div>
<!--end::Toolbar-->
</div>
<!--end::Header-->
<!--begin::Body-->
<div class="card-body card-body d-flex justify-content-between flex-column pt-3">
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Flag-->
<img src="{{ image('svg/brand-logos/dribbble-icon-1.svg') }}" class="me-4 w-30px" style="border-radius: 4px" alt="" />
<!--end::Flag-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-stack flex-wrap flex-row-fluid d-grid gap-2">
<!--begin::Content-->
<div class="me-5">
<!--begin::Title-->
<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Dribbble</a>
<!--end::Title-->
<!--begin::Desc-->
<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Community</span>
<!--end::Desc-->
</div>
<!--end::Content-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center">
<!--begin::Number-->
<span class="text-gray-800 fw-bold fs-4 me-3">579</span>
<!--end::Number-->
<!--begin::Info-->
<div class="m-0">
<!--begin::Label-->
<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 2.6%</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="separator separator-dashed my-3"></div>
<!--end::Separator-->
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Flag-->
<img src="{{ image('svg/brand-logos/linkedin-1.svg') }}" class="me-4 w-30px" style="border-radius: 4px" alt="" />
<!--end::Flag-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-stack flex-wrap flex-row-fluid d-grid gap-2">
<!--begin::Content-->
<div class="me-5">
<!--begin::Title-->
<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Linked In</a>
<!--end::Title-->
<!--begin::Desc-->
<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Media</span>
<!--end::Desc-->
</div>
<!--end::Content-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center">
<!--begin::Number-->
<span class="text-gray-800 fw-bold fs-4 me-3">2,588</span>
<!--end::Number-->
<!--begin::Info-->
<div class="m-0">
<!--begin::Label-->
<span class="badge badge-light-danger fs-base">{!! getIcon('arrow-down', 'fs-5 text-danger ms-n1') !!} 0.4%</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="separator separator-dashed my-3"></div>
<!--end::Separator-->
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Flag-->
<img src="{{ image('svg/brand-logos/slack-icon.svg') }}" class="me-4 w-30px" style="border-radius: 4px" alt="" />
<!--end::Flag-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-stack flex-wrap flex-row-fluid d-grid gap-2">
<!--begin::Content-->
<div class="me-5">
<!--begin::Title-->
<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Slack</a>
<!--end::Title-->
<!--begin::Desc-->
<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Messanger</span>
<!--end::Desc-->
</div>
<!--end::Content-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center">
<!--begin::Number-->
<span class="text-gray-800 fw-bold fs-4 me-3">794</span>
<!--end::Number-->
<!--begin::Info-->
<div class="m-0">
<!--begin::Label-->
<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 0.2%</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="separator separator-dashed my-3"></div>
<!--end::Separator-->
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Flag-->
<img src="{{ image('svg/brand-logos/youtube-3.svg') }}" class="me-4 w-30px" style="border-radius: 4px" alt="" />
<!--end::Flag-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-stack flex-wrap flex-row-fluid d-grid gap-2">
<!--begin::Content-->
<div class="me-5">
<!--begin::Title-->
<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">YouTube</a>
<!--end::Title-->
<!--begin::Desc-->
<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Video Channel</span>
<!--end::Desc-->
</div>
<!--end::Content-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center">
<!--begin::Number-->
<span class="text-gray-800 fw-bold fs-4 me-3">1,578</span>
<!--end::Number-->
<!--begin::Info-->
<div class="m-0">
<!--begin::Label-->
<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 4.1%</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="separator separator-dashed my-3"></div>
<!--end::Separator-->
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Flag-->
<img src="{{ image('svg/brand-logos/instagram-2-1.svg') }}" class="me-4 w-30px" style="border-radius: 4px" alt="" />
<!--end::Flag-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-stack flex-wrap flex-row-fluid d-grid gap-2">
<!--begin::Content-->
<div class="me-5">
<!--begin::Title-->
<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Instagram</a>
<!--end::Title-->
<!--begin::Desc-->
<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
<!--end::Desc-->
</div>
<!--end::Content-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center">
<!--begin::Number-->
<span class="text-gray-800 fw-bold fs-4 me-3">3,458</span>
<!--end::Number-->
<!--begin::Info-->
<div class="m-0">
<!--begin::Label-->
<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 8.3%</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
<!--begin::Separator-->
<div class="separator separator-dashed my-3"></div>
<!--end::Separator-->
<!--begin::Item-->
<div class="d-flex flex-stack">
<!--begin::Flag-->
<img src="{{ image('svg/brand-logos/facebook-3.svg') }}" class="me-4 w-30px" style="border-radius: 4px" alt="" />
<!--end::Flag-->
<!--begin::Section-->
<div class="d-flex align-items-center flex-stack flex-wrap flex-row-fluid d-grid gap-2">
<!--begin::Content-->
<div class="me-5">
<!--begin::Title-->
<a href="#" class="text-gray-800 fw-bold text-hover-primary fs-6">Facebook</a>
<!--end::Title-->
<!--begin::Desc-->
<span class="text-gray-500 fw-semibold fs-7 d-block text-start ps-0">Social Network</span>
<!--end::Desc-->
</div>
<!--end::Content-->
<!--begin::Wrapper-->
<div class="d-flex align-items-center">
<!--begin::Number-->
<span class="text-gray-800 fw-bold fs-4 me-3">2,047</span>
<!--end::Number-->
<!--begin::Info-->
<div class="m-0">
<!--begin::Label-->
<span class="badge badge-light-success fs-base">{!! getIcon('arrow-up', 'fs-5 text-success ms-n1') !!} 1.9%</span>
<!--end::Label-->
</div>
<!--end::Info-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Section-->
</div>
<!--end::Item-->
</div>
<!--end::Body-->
</div>
<!--end::List widget 9-->