<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Blog Grid')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Blog', 'title' => 'Blog Grid')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Blog', 'title' => 'Blog Grid')) ?>

                    <div class="container-fluid">
<div class="flex flex-wrap *:w-full md:*:w-1/2 xl:*:w-1/4 -mx-3" data-masonry='{"percentPosition": true }'>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="card-body">
<span class="badge badge-label bg-dark text-white mb-5">Design</span>
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">Mastering Figma: 7 Pro Tips for Better UI Design</a>
</h6>
<p class="text-default-400 mb-5">Unlock advanced techniques in Figma that can speed up your workflow and help you create pixel-perfect designs every time.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">Figma</a>
<a class="badge badge-label border border-default-300" href="#!">UX</a>
<a class="badge badge-label border border-default-300" href="#!">Tips</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                Jan 20, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">23</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                3,842
                                            </span>
</p>
</div>
<!-- Card Footer -->
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-6.jpg"/>
</div>
<div>
<h5>
<a class="text-sm hover:text-primary" href="#!">Emma Blake</a>
</h5>
</div>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="relative h-full overflow-hidden rounded-t-md">
<div class="badge badge-label bg-dark text-white absolute start-6 top-6">Technology</div>
<img alt="Building APIs" class="h-full w-full object-cover" src="/images/blog/blog-4.jpg"/>
</div>
<div class="card-body">
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">The Future of Artificial Intelligence</a>
</h6>
<p class="text-default-400 mb-5">Discover how AI is transforming industries and what the future holds for this cutting-edge technology.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">AI</a>
<a class="badge badge-label border border-default-300" href="#!">Technology</a>
<a class="badge badge-label border border-default-300" href="#!">Innovation</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                May 28, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">89</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                8,654
                                            </span>
</p>
</div>
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-4.jpg"/>
</div>
<div>
<h5>
<a class="text-sm hover:text-primary" href="#!">Michael Turner</a>
</h5>
</div>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="relative h-full overflow-hidden rounded-t-md">
<div class="badge badge-label bg-dark text-white absolute start-6 top-6">Development</div>
<img alt="Building APIs" class="h-full w-full object-cover" src="/images/blog/blog-1.jpg"/>
</div>
<div class="card-body">
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">Building REST APIs with Node.js</a>
</h6>
<p class="text-default-400 mb-5">Learn how to design and build scalable REST APIs with Node.js and Express in this step-by-step tutorial.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">Node.js</a>
<a class="badge badge-label border border-default-300" href="#!">API</a>
<a class="badge badge-label border border-default-300" href="#!">Tutorial</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                Feb 2, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">16</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                8,974
                                            </span>
</p>
</div>
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-3.jpg"/>
</div>
<div>
<h5>
<a class="text-sm hover:text-primary" href="#!">John Doe</a>
</h5>
</div>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="relative h-full overflow-hidden rounded-s-md">
<div class="badge badge-label bg-dark text-white absolute start-6 top-6">Marketing</div>
<img alt="Marketing Strategies" class="h-full w-full object-cover" src="/images/blog/blog-2.jpg"/>
</div>
<div class="card-body">
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">SEO Strategies for 2025: How to Rank Higher</a>
</h6>
<p class="text-default-400 mb-5">Boost your website's search engine ranking with these proven SEO techniques for 2025.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">SEO</a>
<a class="badge badge-label border border-default-300" href="#!">Marketing</a>
<a class="badge badge-label border border-default-300" href="#!">Growth</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar"></i>
                                                Feb 14, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">22</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye"></i>
                                                3,090
                                            </span>
</p>
</div>
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<img alt="avatar-8" class="size-6 rounded-full" src="/images/users/user-2.jpg"/>
<h5>
<a class="text-sm hover:text-primary" href="#!">Sophie Green</a>
</h5>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="relative h-full overflow-hidden rounded-t-md">
<div class="badge badge-label bg-dark text-white absolute start-6 top-6">Data Science</div>
<img alt="Building APIs" class="h-full w-full object-cover" src="/images/blog/blog-5.jpg"/>
</div>
<div class="card-body">
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">Top Data Science Trends in 2025</a>
</h6>
<p class="text-default-400 mb-5">Get ahead in the data science field with the latest trends, technologies, and tools that are reshaping the industry.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">Data Science</a>
<a class="badge badge-label border border-default-300" href="#!">Trends</a>
<a class="badge badge-label border border-default-300" href="#!">2025</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                Aug 17, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">20</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                6,870
                                            </span>
</p>
</div>
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-1.jpg"/>
</div>
<div>
<h5>
<a class="text-sm hover:text-primary" href="#!">Olivia Brown</a>
</h5>
</div>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card !bg-primary bg-linear-to-b from-white/30 to-white/0">
<div class="card-body">
<span class="badge badge-label bg-white/25 text-white mb-5">Data Science</span>
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base text-white" href="/apps-blog-article">Top Data Science Trends in 2025</a>
</h6>
<p class="mb-5 text-white/50">Get ahead in the data science field with the latest trends, technologies, and tools that are reshaping the industry.</p>
<div>
<a class="badge badge-label rounded border border-white/25 text-white" href="#!">Data Science</a>
<a class="badge badge-label rounded border border-white/25 text-white" href="#!">Trends</a>
<a class="badge badge-label rounded border border-white/25 text-white" href="#!">2025</a>
</div>
<p class="mt-5 flex flex-wrap items-center gap-base text-sm text-white/50">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                Jun 05, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a href="#!">55</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                9,875
                                            </span>
</p>
</div>
<!-- Card Footer -->
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-1.jpg"/>
</div>
<div>
<h5>
<a class="text-sm text-white" href="#!">Olivia Brown</a>
</h5>
</div>
</div>
<a class="flex items-center gap-1.25 font-semibold text-white" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="card-body">
<span class="badge badge-label bg-dark text-white mb-5">Design</span>
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">Web Design Trends to Watch in 2025</a>
</h6>
<p class="text-default-400 mb-5">Explore the top web design trends that will shape the user experience in 2025.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">Web Design</a>
<a class="badge badge-label border border-default-300" href="#!">UX/UI</a>
<a class="badge badge-label border border-default-300" href="#!">Trends</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                Apr 16, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">36</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                1,102
                                            </span>
</p>
</div>
<!-- Card Footer -->
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-5.jpg"/>
</div>
<div>
<h5>
<a class="text-sm hover:text-primary" href="#!">Anna White</a>
</h5>
</div>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
<div class="px-3 mb-base">
<!-- card -->
<article class="card">
<div class="relative h-full overflow-hidden rounded-t-md">
<div class="badge badge-label bg-dark text-white absolute start-6 top-6">Business</div>
<img alt="Building APIs" class="h-full w-full object-cover" src="/images/blog/blog-3.jpg"/>
</div>
<div class="card-body">
<!-- Title -->
<h6 class="card-title mb-2.5">
<a class="text-base hover:text-primary" href="/apps-blog-article">5 Key Tips for New Entrepreneurs</a>
</h6>
<p class="text-default-400 mb-5">Start your entrepreneurial journey with these 5 essential tips that will guide you through the first year of business.</p>
<div>
<a class="badge badge-label border border-default-300" href="#!">Business</a>
<a class="badge badge-label border border-default-300" href="#!">Entrepreneur</a>
<a class="badge badge-label border border-default-300" href="#!">Startup</a>
</div>
<p class="text-default-400 text-sm mt-5 flex flex-wrap items-center gap-base">
<span class="flex items-center gap-1.25">
<i class="iconify tabler--calendar text-md"></i>
                                                May 10, 2025
                                            </span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--message-circle text-md"></i>
<a class="hover:text-primary" href="#!">88</a>
</span>
<span class="flex items-center gap-1.25">
<i class="iconify tabler--eye text-md"></i>
                                                15,842
                                            </span>
</p>
</div>
<div class="card-footer items-center border-t-0 bg-transparent">
<div class="flex items-center gap-2.5">
<div>
<img alt="avatar-3" class="size-6 rounded-full" src="/images/users/user-7.jpg"/>
</div>
<div>
<h5>
<a class="text-sm hover:text-primary" href="#!">David Clark</a>
</h5>
</div>
</div>
<a class="text-primary flex items-center gap-1.25 font-semibold" href="/apps-blog-article">
                                            Read more
                                            <i class="iconify tabler--arrow-right"></i>
</a>
</div>
</article>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>

        <script src="/plugins/masonry/masonry.pkgd.min.js"></script>
<script src="/js/pages/apps-blog-grid.js"></script>
</body>
</html>