<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Profile"; include('./partials/title-meta.php'); ?> <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <article class="card card-out-of-container border-top-0">
                                <div class="position-relative card-side-img overflow-hidden" style="height: 250px; background-image: url(assets/images/profile-bg.jpg)">
                                    <div class="p-4 card-img-overlay rounded-start-0 auth-overlay d-flex align-items-center justify-content-center">
                                        <h3 class="text-white mb-0 fst-italic">"Designing the future, one template at a time"</h3>
                                    </div>
                                </div>

                                <!-- Card Body -->
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex justify-content-start align-items-center gap-3">
                                            <div class="avatar avatar-xxl">
                                                <img src="assets/images/users/user-1.jpg" alt="avatar-2" class="img-fluid img-thumbnail rounded-circle" />
                                            </div>
                                            <div>
                                                <h4 class="text-nowrap fw-bold mb-1">Damian D.</h4>
                                                <p class="text-muted mb-1">Product Designer</p>
                                                <span class="badge badge-soft-primary fw-medium fs-xs ms-auto">Author</span>
                                            </div>
                                        </div>
                                        <div class="d-flex gap-2">
                                            <a class="btn btn-outline-primary" href="#!">Follow</a>
                                            <a class="btn btn-primary" href="#!">Message</a>
                                            <button class="btn btn-icon btn-dark" data-bs-toggle="dropdown">
                                                <i class="ti ti-dots fs-24"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item" href="#">Edit Profile</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item text-danger" href="#">Report</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <!-- end col-->
                    </div>
                    <!-- end row-->

                    <div class="row">
                        <div class="col-xl-4">
                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Personal Information</h4>
                                </div>
                                <div class="card-body">
                                    <div class="">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-briefcase fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">UI/UX Designer & Full-Stack Developer</p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-school fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">
                                                Studied at
                                                <span class="text-dark fw-semibold">Stanford University</span>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-map-pin fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">
                                                Lives in
                                                <span class="text-dark fw-semibold">San Francisco, CA</span>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-users fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">
                                                Followed by
                                                <span class="text-dark fw-semibold">25.3k People</span>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-mail fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">
                                                Email
                                                <a href="mailto:hello@example.com" class="text-primary fw-semibold">hello@example.com</a>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-link fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">
                                                Website
                                                <a href="https://www.example.dev" class="text-primary fw-semibold">www.example.dev</a>
                                            </p>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar-sm bg-light d-flex align-items-center justify-content-center rounded">
                                                <i class="ti ti-world fs-xl text-secondary"></i>
                                            </div>
                                            <p class="mb-0 fs-sm">
                                                Languages
                                                <span class="text-dark fw-semibold">English, Hindi, Japanese</span>
                                            </p>
                                        </div>

                                        <div class="d-flex justify-content-center gap-2 mt-4 mb-2">
                                            <a href="#!" class="btn btn-icon rounded-circle btn-primary" title="Facebook">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-facebook"
                                                >
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                                                </svg>
                                            </a>
                                            <a href="#!" class="btn btn-icon rounded-circle btn-info" title="Twitter-x">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x"
                                                >
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
                                                    <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
                                                </svg>
                                            </a>
                                            <a href="#!" class="btn btn-icon rounded-circle btn-danger" title="Instagram">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-instagram"
                                                >
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M4 8a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" />
                                                    <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
                                                    <path d="M16.5 7.5v.01" />
                                                </svg>
                                            </a>
                                            <a href="#!" class="btn btn-icon rounded-circle btn-success" title="Dribbble">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-dribbble"
                                                >
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
                                                    <path d="M9 3.6c5 6 7 10.5 7.5 16.2" />
                                                    <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" />
                                                    <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" />
                                                </svg>
                                            </a>
                                            <a href="#!" class="btn btn-icon rounded-circle btn-secondary" title="LinkedIn">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin"
                                                >
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M8 11v5" />
                                                    <path d="M8 8v.01" />
                                                    <path d="M12 16v-5" />
                                                    <path d="M16 16v-3a2 2 0 1 0 -4 0" />
                                                    <path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z" />
                                                </svg>
                                            </a>
                                            <a href="#!" class="btn btn-icon rounded-circle btn-danger" title="YouTube">
                                                <svg
                                                    xmlns="http://www.w3.org/2000/svg"
                                                    width="18"
                                                    height="18"
                                                    viewBox="0 0 24 24"
                                                    fill="none"
                                                    stroke="currentColor"
                                                    stroke-width="2"
                                                    stroke-linecap="round"
                                                    stroke-linejoin="round"
                                                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-youtube"
                                                >
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                                    <path d="M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8z" />
                                                    <path d="M10 9l5 3l-5 3z" />
                                                </svg>
                                            </a>
                                        </div>
                                    </div>
                                    <!---->
                                </div>
                            </div>
                            <!-- end card-->

                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">Skills</h4>
                                </div>
                                <!-- end card-header-->

                                <div class="card-body">
                                    <div class="d-flex flex-wrap gap-1">
                                        <a class="btn btn-light btn-sm" href="#">Product Design</a>
                                        <a class="btn btn-light btn-sm" href="#">UI/UX</a>
                                        <a class="btn btn-light btn-sm" href="#">Tailwind CSS</a>
                                        <a class="btn btn-light btn-sm" href="#">Bootstrap</a>
                                        <a class="btn btn-light btn-sm" href="#">React.js</a>
                                        <a class="btn btn-light btn-sm" href="#">Next.js</a>
                                        <a class="btn btn-light btn-sm" href="#">Vue.js</a>
                                        <a class="btn btn-light btn-sm" href="#">Figma</a>
                                        <a class="btn btn-light btn-sm" href="#">Design Systems</a>
                                        <a class="btn btn-light btn-sm" href="#">Template Authoring</a>
                                        <a class="btn btn-light btn-sm" href="#">Responsive Design</a>
                                        <a class="btn btn-light btn-sm" href="#">Component Libraries</a>
                                    </div>
                                </div>
                                <!-- end card-body-->
                            </div>
                            <!-- end card-->

                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title">My Social Feed</h4>
                                </div>
                                <div class="card-body">
                                    <!-- Message -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom pb-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-3.jpg" alt="avatar-3" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="text-nowrap fs-sm mb-0 lh-base">Ava Brooks</h5>
                                                <p class="text-muted fs-xs mb-0">ava@pixelsuite.io</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-primary" title="Message">
                                                <i class="ti ti-message fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Friend Request -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-4.jpg" alt="avatar-4" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="text-nowrap fs-sm mb-0 lh-base">Leo Martin</h5>
                                                <p class="text-muted fs-xs mb-0">leo@designbyte.com</p>
                                            </div>
                                            <div>
                                                <span class="badge badge-soft-success">New Request</span>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-primary" title="Accept">
                                                <i class="ti ti-check fs-lg"></i>
                                            </a>
                                            <a href="#!" class="btn btn-sm btn-icon btn-danger" title="Decline">
                                                <i class="ti ti-x fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Like Notification -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-5.jpg" alt="avatar-5" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Sophie Moore</h5>
                                                <p class="text-muted fs-xs mb-0">Liked your post</p>
                                            </div>
                                        </div>
                                        <div>
                                            <small class="text-muted fs-xxs">2m ago</small>
                                        </div>
                                    </div>

                                    <!-- Comment -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-6.jpg" alt="avatar-6" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Liam Johnson</h5>
                                                <p class="text-muted fs-xs mb-0">Commented on your photo</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-secondary" title="View">
                                                <i class="ti ti-eye fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Group Invitation -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-7.jpg" alt="avatar-7" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Mia Collins</h5>
                                                <p class="text-muted fs-xs mb-0">Invited you to join "Design Ninjas"</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-primary" title="Join">
                                                <i class="ti ti-user-plus fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Mention -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-8.jpg" alt="avatar-8" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Ethan Green</h5>
                                                <p class="text-muted fs-xs mb-0">Mentioned you in a comment</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-info" title="Check">
                                                <i class="ti ti-bell fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Tagged in Photo -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-9.jpg" alt="avatar-9" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Emma King</h5>
                                                <p class="text-muted fs-xs mb-0">Tagged you in a photo</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-secondary">
                                                <i class="ti ti-camera fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Followed You -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-10.jpg" alt="avatar-10" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Jack Wilson</h5>
                                                <p class="text-muted fs-xs mb-0">Started following you</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-primary">
                                                <i class="ti ti-user-check fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <!-- Story Reaction -->
                                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-1.jpg" alt="avatar-1" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Isabella Lee</h5>
                                                <p class="text-muted fs-xs mb-0">Reacted to your story</p>
                                            </div>
                                        </div>
                                        <div>
                                            <small class="text-muted fs-xxs">15m ago</small>
                                        </div>
                                    </div>

                                    <!-- Shared Your Post -->
                                    <div class="d-flex justify-content-between align-items-center pt-2">
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar avatar-sm">
                                                <img src="assets/images/users/user-2.jpg" alt="avatar-2" class="img-fluid rounded" />
                                            </div>
                                            <div>
                                                <h5 class="fs-sm mb-0 lh-base">Benjamin Gray</h5>
                                                <p class="text-muted fs-xs mb-0">Shared your post</p>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#!" class="btn btn-sm btn-icon btn-outline-success">
                                                <i class="ti ti-share fs-lg"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end col-->

                        <div class="col-xl-8">
                            <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1 align-items-center">
                                <div class="col">
                                    <div class="card">
                                        <div class="card-body">
                                            <a href="#!" class="text-muted float-end mt-n1 fs-xl">
                                                <i class="ti ti-external-link"></i>
                                            </a>
                                            <h5 title="Number of Tasks">My Tasks</h5>
                                            <div class="d-flex align-items-center gap-2 my-3">
                                                <div class="avatar-md flex-shrink-0">
                                                    <span class="avatar-title text-bg-primary rounded-circle fs-22">
                                                        <i class="ti ti-clipboard-list"></i>
                                                    </span>
                                                </div>
                                                <h3 class="mb-0">124</h3>
                                                <span class="badge badge-soft-primary fw-medium fs-xs ms-auto">+3 New</span>
                                            </div>
                                            <p class="mb-0">
                                                <span class="text-primary">
                                                    <i class="ti ti-circle align-middle"></i>
                                                </span>
                                                <span class="text-nowrap text-muted">Total Tasks</span>
                                                <span class="float-end"><b>12,450</b></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card">
                                        <div class="card-body">
                                            <a href="#!" class="text-muted float-end mt-n1 fs-xl">
                                                <i class="ti ti-external-link"></i>
                                            </a>
                                            <h5 title="Number of Messages">Messages</h5>
                                            <div class="d-flex align-items-center gap-2 my-3">
                                                <div class="avatar-md flex-shrink-0">
                                                    <span class="avatar-title text-bg-secondary rounded-circle fs-22">
                                                        <i class="ti ti-messages"></i>
                                                    </span>
                                                </div>
                                                <h3 class="mb-0">69.5k</h3>
                                                <span class="badge badge-soft-secondary fw-medium fs-xs ms-auto">+5 New</span>
                                            </div>
                                            <p class="mb-0">
                                                <span class="text-secondary">
                                                    <i class="ti ti-circle align-middle"></i>
                                                </span>
                                                <span class="text-nowrap text-muted">Total Messages</span>
                                                <span class="float-end"><b>32.1M</b></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card">
                                        <div class="card-body">
                                            <a href="#!" class="text-muted float-end mt-n1 fs-xl">
                                                <i class="ti ti-external-link"></i>
                                            </a>
                                            <h5 title="Total Clients">Clients</h5>
                                            <div class="d-flex align-items-center gap-2 my-3">
                                                <div class="avatar-md flex-shrink-0">
                                                    <span class="avatar-title text-bg-secondary rounded-circle fs-22">
                                                        <i class="ti ti-users"></i>
                                                    </span>
                                                </div>
                                                <h3 class="mb-0">184</h3>
                                                <span class="badge badge-soft-secondary fw-medium fs-xs ms-auto">+4 New</span>
                                            </div>
                                            <p class="mb-0">
                                                <span class="text-secondary">
                                                    <i class="ti ti-circle align-middle"></i>
                                                </span>
                                                <span class="text-nowrap text-muted">Total Clients</span>
                                                <span class="float-end"><b>9,835</b></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card">
                                        <div class="card-body">
                                            <a href="#!" class="text-muted float-end mt-n1 fs-xl">
                                                <i class="ti ti-external-link"></i>
                                            </a>
                                            <h5 title="Revenue Generated">Revenue</h5>
                                            <div class="d-flex align-items-center gap-2 my-3">
                                                <div class="avatar-md flex-shrink-0">
                                                    <span class="avatar-title text-bg-primary rounded-circle fs-22">
                                                        <i class="ti ti-credit-card"></i>
                                                    </span>
                                                </div>
                                                <h3 class="mb-0">$25.5k</h3>
                                                <span class="badge badge-soft-primary fw-medium fs-xs ms-auto">+1.5%</span>
                                            </div>
                                            <p class="mb-0">
                                                <span class="text-primary">
                                                    <i class="ti ti-circle align-middle"></i>
                                                </span>
                                                <span class="text-nowrap text-muted">Total Revenue</span>
                                                <span class="float-end"><b>$12.5M</b></span>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end row -->

                            <div class="card">
                                <div class="card-header">
                                    <h4 class="card-title mb-0">About Me</h4>
                                </div>
                                <div class="card-body">
                                    <p>
                                        I'm a Product Designer and template author passionate about crafting clean, scalable, and high-performing UI solutions. With a focus on frontend technologies and modern design systems, I create user-centric digital products that are both
                                        functional and visually appealing.
                                    </p>
                                    <p class="mb-0">
                                        As a template creator, I specialize in building developer-friendly UI kits and dashboards using frameworks like Tailwind CSS, Bootstrap, React, Next.js, Vue, and Laravel. My work powers countless web apps, helping developers save time and
                                        build faster.
                                    </p>

                                    <div class="mt-3">
                                        <h5 class="mb-2">My Approach :</h5>
                                        <p class="mb-0">
                                            I take a user-first approach to design—blending thoughtful UX with clean code. From wireframes to fully responsive templates, I focus on creating intuitive and aesthetic experiences. Whether you're launching a SaaS dashboard, admin
                                            panel, or marketing site, I strive to deliver pixel-perfect results that elevate your product.
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <div data-table data-table-rows-per-page="5" class="card">
                                <div class="card-header">
                                    <h4 class="card-title">My Tasks</h4>
                                </div>
                                <!-- end card-header-->

                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-centered table-custom table-sm table-nowrap table-hover mb-0">
                                            <thead class="bg-light bg-opacity-25 thead-sm">
                                                <tr class="text-uppercase fs-xxs">
                                                    <th data-table-sort="task">Task</th>
                                                    <th data-table-sort>Status</th>
                                                    <th data-table-sort="name">Assigned By</th>
                                                    <th data-table-sort>Start Date</th>
                                                    <th data-table-sort>Priority</th>
                                                    <th data-table-sort>Progress</th>
                                                    <th data-table-sort>Total Time Spent</th>
                                                    <th style="width: 30px"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <h5 class="fs-sm my-1">
                                                            <a data-sort="task" href="#" class="text-body">Admin Dashboard Template - Final Touch</a>
                                                        </h5>
                                                        <span class="text-muted fs-xs">Due in 2 days</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-soft-warning">In-progress</span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-start align-items-center gap-2">
                                                            <div class="avatar avatar-sm">
                                                                <img src="assets/images/users/user-3.jpg" alt="avatar-3" class="img-fluid rounded-circle" />
                                                            </div>
                                                            <div>
                                                                <h5 data-sort="name" class="text-nowrap fs-sm mb-0 lh-base">Liam Johnson</h5>
                                                                <p class="text-muted fs-xs mb-0">liam@pixelcraft.io</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Apr 15, 2025</td>
                                                    <td>
                                                        <span class="badge badge-soft-danger">High</span>
                                                    </td>
                                                    <td>70%</td>
                                                    <td>8h 45min</td>
                                                    <td>
                                                        <a href="javascript: void(0);" class="text-muted fs-xxl">
                                                            <i class="ti ti-edit align-middle"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5 class="fs-sm my-1">
                                                            <a data-sort="task" href="#" class="text-body">Tailwind UI Kit Design</a>
                                                        </h5>
                                                        <span class="text-muted fs-xs">Due in 10 days</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-soft-success">Completed</span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-start align-items-center gap-2">
                                                            <div class="avatar avatar-sm">
                                                                <img src="assets/images/users/user-5.jpg" alt="avatar-5" class="img-fluid rounded-circle" />
                                                            </div>
                                                            <div>
                                                                <h5 data-sort="name" class="text-nowrap fs-sm mb-0 lh-base">Ava Reynolds</h5>
                                                                <p class="text-muted fs-xs mb-0">ava@designwave.co</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Mar 29, 2025</td>
                                                    <td>
                                                        <span class="badge badge-soft-success">Low</span>
                                                    </td>
                                                    <td>100%</td>
                                                    <td>34h 10min</td>
                                                    <td>
                                                        <a href="javascript: void(0);" class="text-muted fs-xxl">
                                                            <i class="ti ti-edit align-middle"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5 class="fs-sm my-1">
                                                            <a data-sort="task" href="#" class="text-body">React + Next.js Starter Template</a>
                                                        </h5>
                                                        <span class="text-muted fs-xs">Due in 5 days</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-soft-warning">In-progress</span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-start align-items-center gap-2">
                                                            <div class="avatar avatar-sm">
                                                                <img src="assets/images/users/user-2.jpg" alt="avatar-2" class="img-fluid rounded-circle" />
                                                            </div>
                                                            <div>
                                                                <h5 data-sort="name" class="text-nowrap fs-sm mb-0 lh-base">Noah Carter</h5>
                                                                <p class="text-muted fs-xs mb-0">noah@devspark.com</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Apr 12, 2025</td>
                                                    <td>
                                                        <span class="badge badge-soft-primary">Medium</span>
                                                    </td>
                                                    <td>45%</td>
                                                    <td>14h 25min</td>
                                                    <td>
                                                        <a href="javascript: void(0);" class="text-muted fs-xxl">
                                                            <i class="ti ti-edit align-middle"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5 class="fs-sm my-1">
                                                            <a data-sort="task" href="#" class="text-body">Laravel Template Docs Update</a>
                                                        </h5>
                                                        <span class="text-muted fs-xs">Due in 4 days</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-soft-dark">On Hold</span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-start align-items-center gap-2">
                                                            <div class="avatar avatar-sm">
                                                                <img src="assets/images/users/user-1.jpg" alt="avatar-1" class="img-fluid rounded-circle" />
                                                            </div>
                                                            <div>
                                                                <h5 data-sort="name" class="text-nowrap fs-sm mb-0 lh-base">Sophia Bennett</h5>
                                                                <p class="text-muted fs-xs mb-0">sophia@codepress.io</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Apr 10, 2025</td>
                                                    <td>
                                                        <span class="badge badge-soft-secondary">Low</span>
                                                    </td>
                                                    <td>30%</td>
                                                    <td>6h 50min</td>
                                                    <td>
                                                        <a href="javascript: void(0);" class="text-muted fs-xxl">
                                                            <i class="ti ti-edit align-middle"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <h5 class="fs-sm my-1">
                                                            <a data-sort="task" href="#" class="text-body">Portfolio Website Redesign</a>
                                                        </h5>
                                                        <span class="text-muted fs-xs">Due in 12 days</span>
                                                    </td>
                                                    <td>
                                                        <span class="badge badge-soft-danger">Outdated</span>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex justify-content-start align-items-center gap-2">
                                                            <div class="avatar avatar-sm">
                                                                <img src="assets/images/users/user-6.jpg" alt="avatar-6" class="img-fluid rounded-circle" />
                                                            </div>
                                                            <div>
                                                                <h5 data-sort="name" class="text-nowrap fs-sm mb-0 lh-base">Mason Clark</h5>
                                                                <p class="text-muted fs-xs mb-0">mason@webgenius.dev</p>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>Apr 01, 2025</td>
                                                    <td>
                                                        <span class="badge badge-soft-danger">High</span>
                                                    </td>
                                                    <td>10%</td>
                                                    <td>11h 30min</td>
                                                    <td>
                                                        <a href="javascript: void(0);" class="text-muted fs-xxl">
                                                            <i class="ti ti-edit align-middle"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- end card-body-->
                            </div>
                            <!-- end card-->

                            <h4 class="my-4">My Blog Posts</h4>

                            <div class="row">
                                <div class="col-xl-4 col-md-6">
                                    <article class="card rounded-3">
                                        <!-- Badge -->
                                        <div class="badge text-bg-dark badge-label position-absolute top-0 start-0 m-3">Technology</div>

                                        <!-- Card image -->
                                        <img class="card-img-top rounded-top-3" src="assets/images/blog/blog-4.jpg" alt="Tech Innovations" />

                                        <!-- Card Body -->
                                        <div class="card-body">
                                            <!-- Title -->
                                            <h6 class="card-title fs-lg lh-base mb-2">
                                                <a href="#!" class="link-reset">The Future of Artificial Intelligence</a>
                                            </h6>
                                            <p class="mb-3 text-muted">Discover how AI is transforming industries and what the future holds for this cutting-edge technology.</p>

                                            <div>
                                                <a href="#!" class="badge badge-label badge-default">AI</a>
                                                <a href="#!" class="badge badge-label badge-default">Technology</a>
                                                <a href="#!" class="badge badge-label badge-default">Innovation</a>
                                            </div>

                                            <p class="d-flex flex-wrap gap-3 text-muted mb-0 mt-3 align-items-center fs-base">
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-calendar fs-md"></i>
                                                    Jan 12, 2025
                                                </span>
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-message-circle fs-md"></i>
                                                    <a href="#!" class="link-reset">89</a>
                                                </span>
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-eye fs-md"></i>
                                                    1,284
                                                </span>
                                            </p>
                                        </div>

                                        <!-- Card footer -->
                                        <div class="card-footer bg-transparent d-flex justify-content-between">
                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                <div class="avatar avatar-xs">
                                                    <img src="assets/images/users/user-4.jpg" alt="avatar-4" class="img-fluid rounded-circle" />
                                                </div>
                                                <div>
                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                        <a href="#!" class="link-reset">Michael Turner</a>
                                                    </h5>
                                                </div>
                                            </div>
                                            <a class="link-primary fw-semibold d-flex align-items-center gap-1" href="#!">
                                                Read more
                                                <i class="ti ti-arrow-right"></i>
                                            </a>
                                        </div>
                                    </article>
                                </div>
                                <!-- end col-->

                                <div class="col-xl-4 col-md-6">
                                    <article class="card rounded-3">
                                        <!-- Badge -->
                                        <div class="badge text-bg-dark badge-label position-absolute top-0 start-0 m-3">Data Science</div>

                                        <!-- Card image -->
                                        <img class="card-img-top rounded-top-3" src="assets/images/blog/blog-5.jpg" alt="Data Science Trends" />

                                        <!-- Card Body -->
                                        <div class="card-body">
                                            <!-- Title -->
                                            <h6 class="card-title fs-lg lh-base mb-2">
                                                <a href="#!" class="link-reset">Top Data Science Trends in 2025</a>
                                            </h6>
                                            <p class="mb-3 text-muted">Get ahead in the data science field with the latest trends, technologies, and tools that are reshaping the industry.</p>

                                            <div>
                                                <a href="#!" class="badge badge-label badge-default">Data Science</a>
                                                <a href="#!" class="badge badge-label badge-default">Trends</a>
                                                <a href="#!" class="badge badge-label badge-default">2025</a>
                                            </div>

                                            <p class="d-flex flex-wrap gap-3 text-muted mb-0 mt-3 align-items-center fs-base">
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-calendar fs-md"></i>
                                                    Jan 29, 2025
                                                </span>
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-message-circle fs-md"></i>
                                                    <a href="#!" class="link-reset">70</a>
                                                </span>
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-eye fs-md"></i>
                                                    1,850
                                                </span>
                                            </p>
                                        </div>

                                        <!-- Card footer -->
                                        <div class="card-footer bg-transparent d-flex justify-content-between">
                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                <div class="avatar avatar-xs">
                                                    <img src="assets/images/users/user-1.jpg" alt="avatar-1" class="img-fluid rounded-circle" />
                                                </div>
                                                <div>
                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                        <a href="#!" class="link-reset">Olivia Brown</a>
                                                    </h5>
                                                </div>
                                            </div>
                                            <a class="link-primary fw-semibold d-flex align-items-center gap-1" href="#!">
                                                Read more
                                                <i class="ti ti-arrow-right"></i>
                                            </a>
                                        </div>
                                    </article>
                                </div>
                                <!-- end col-->

                                <div class="col-xl-4 col-md-6">
                                    <article class="card rounded-3">
                                        <!-- Badge -->
                                        <div class="badge text-bg-dark badge-label position-absolute top-0 start-0 m-3">Business</div>

                                        <!-- Card image -->
                                        <img class="card-img-top rounded-top-3" src="assets/images/blog/blog-3.jpg" alt="Entrepreneur Tips" />

                                        <!-- Card Body -->
                                        <div class="card-body">
                                            <!-- Title -->
                                            <h6 class="card-title fs-lg lh-base mb-2">
                                                <a href="#!" class="link-reset">5 Key Tips for New Entrepreneurs</a>
                                            </h6>
                                            <p class="mb-3 text-muted">Start your entrepreneurial journey with these 5 essential tips that will guide you through the first year of business.</p>

                                            <div>
                                                <a href="#!" class="badge badge-label badge-default">Business</a>
                                                <a href="#!" class="badge badge-label badge-default">Entrepreneur</a>
                                                <a href="#!" class="badge badge-label badge-default">Startup</a>
                                            </div>

                                            <p class="d-flex flex-wrap gap-3 text-muted mb-0 mt-3 align-items-center fs-base">
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-calendar fs-md"></i>
                                                    Jan 20, 2025
                                                </span>
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-message-circle fs-md"></i>
                                                    <a href="#!" class="link-reset">23</a>
                                                </span>
                                                <span class="d-flex align-items-center gap-1">
                                                    <i class="ti ti-eye fs-md"></i>
                                                    3,842
                                                </span>
                                            </p>
                                        </div>

                                        <!-- Card footer -->
                                        <div class="card-footer bg-transparent d-flex justify-content-between">
                                            <div class="d-flex justify-content-start align-items-center gap-2">
                                                <div class="avatar avatar-xs">
                                                    <img src="assets/images/users/user-7.jpg" alt="avatar-7" class="img-fluid rounded-circle" />
                                                </div>
                                                <div>
                                                    <h5 class="text-nowrap fs-sm mb-0 lh-base">
                                                        <a href="#!" class="link-reset">David Clark</a>
                                                    </h5>
                                                </div>
                                            </div>
                                            <a class="link-primary fw-semibold d-flex align-items-center gap-1" href="#!">
                                                Read more
                                                <i class="ti ti-arrow-right"></i>
                                            </a>
                                        </div>
                                    </article>
                                </div>
                                <!-- end col-->
                            </div>
                        </div>
                    </div>
                    <!-- end row-->
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>
    </body>
</html>
