<!DOCTYPE html>

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

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

                    <div class="container">
<div class="lg:gap-base grid grid-cols-1 lg:grid-cols-4">
<div>
<div class="card overflow-hidden lg:top-22 lg:sticky">
<div aria-label="Sidebar" class="hs-overlay hs-overlay-open:translate-x-0 fixed start-0 top-0 bottom-0 z-50 lg:z-10 hidden h-full lg:min-w-auto min-w-75 -translate-x-full transform bg-card transition-all duration-300 [--auto-close:lg] lg:static lg:end-auto lg:bottom-0 lg:block! lg:translate-x-0" id="outlookSidebaroffcanvas" role="dialog" tabindex="-1">
<div class="card-body h-full" data-simplebar="">
<div class="mb-5 flex items-center justify-between">
<div class="flex items-center gap-2.5">
<img alt="avatar" class="size-10.5 rounded" src="/images/users/user-3.jpg"/>
<div>
<h5 class="flex items-center">
<a class="hover:text-primary" href="#!">Damian D.</a>
<img alt="US" class="ms-2.5 size-4 rounded-full" src="/images/flags/us.svg"/>
</h5>
<p class="text-default-400">Content Creator</p>
</div>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-2xl"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<a class="dropdown-item" href="#">View Profile</a>
<a class="dropdown-item" href="#">Send message</a>
<a class="dropdown-item" href="#">Copy Profile Link</a>
<div class="border-default-300 my-3 border-t"></div>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item text-danger" href="#">Block user</a>
<a class="dropdown-item text-danger" href="#">Report user</a>
</div>
</div>
</div>
</div>
<div>
<a class="active hover:bg-default-100 bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--smart-home text-base text-default-700"></i>
                                                    News Feed
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--message-circle text-base text-default-700"></i>
                                                    Messages
                                                    <span class="badge font-semibold text-danger bg-danger/10 ms-auto">5</span>
</a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--users text-base text-default-700"></i>
                                                    Friends
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--bell text-base text-default-700"></i>
                                                    Notifications
                                                    <span class="badge font-semibold text-warning bg-warning/10 ms-auto">12</span>
</a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--category text-base text-default-700"></i>
                                                    Groups
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--book text-base text-default-700"></i>
                                                    Pages
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--calendar-event text-base text-default-700"></i>
                                                    Events
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--settings"></i>
                                                    Settings
                                                </a>
<div class="list-group-item mt-2.5 px-3.5 py-2.25">
<span class="align-middle font-semibold">Categories</span>
</div>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--tag text-primary text-base"></i>
                                                    Technology
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--tag text-success text-base"></i>
                                                    Travel
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--tag text-danger text-base"></i>
                                                    Lifestyle
                                                </a>
<a class="hover:bg-default-100 focus:bg-default-100 flex w-full items-center gap-2.25 rounded px-3 py-2 font-semibold" href="#">
<i class="iconify tabler--tag text-info text-base"></i>
                                                    Photography
                                                </a>
</div>
</div>
</div>
</div>
</div>
<div class="mb-5 lg:col-span-2 lg:mb-0">
<div class="flex gap-base flex-col">
<!-- card -->
<div class="card">
<div class="card-header lg:hidden">
<button class="btn btn-sm btn-icon border-default-300">
<i aria-controls="outlookSidebaroffcanvas" aria-expanded="false" aria-haspopup="dialog" aria-label="Toggle navigation" class="iconify tabler--menu-4 text-default-600 text-2xl" data-hs-overlay="#outlookSidebaroffcanvas"></i>
</button>
</div>
<div class="card-body">
<h5 class="mb-2.5">What's on your mind?</h5>
<!-- Post Form -->
<textarea class="form-textarea" placeholder="Share your thoughts..." rows="3"></textarea>
<div class="flex justify-between pt-2.5">
<div class="flex gap-1.25">
<a class="btn btn-sm btn-icon bg-light hover:text-primary size-8" href="#">
<i class="iconify tabler--user text-base"></i>
</a>
<a class="btn btn-sm btn-icon bg-light hover:text-primary size-8" href="#">
<i class="iconify tabler--map-pin text-base"></i>
</a>
<a class="btn btn-sm btn-icon bg-light hover:text-primary size-8" href="#">
<i class="iconify tabler--camera text-base"></i>
</a>
<a class="btn btn-sm btn-icon bg-light hover:text-primary size-8" href="#">
<i class="iconify tabler--mood-smile text-base"></i>
</a>
</div>
<button class="btn bg-dark btn-sm text-white" type="submit">Post</button>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body pb-2">
<div class="mb-2.5 flex items-center gap-2.5">
<img alt="Generic placeholder image" class="size-9 rounded-full" src="/images/users/user-10.jpg"/>
<div class="w-full">
<h5>
<a class="hover:text-primary" href="#!">Jeremy Tomlinson</a>
</h5>
<p class="text-default-400">
<small>about 2 minutes ago</small>
</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                                    Edit post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                    Delete post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--share"></i>
                                                                    Share
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--pin"></i>
                                                                    Pin to top
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--flag"></i>
                                                                    Report post
                                                                </a>
</div>
</div>
</div>
</div>
</div>
<p class="mb-4">Story based around the idea of time lapse, animation to post soon!</p>
<div class="grid grid-cols-2 gap-1.25">
<!-- Left tall image -->
<img alt="Tall Image" class="h-full rounded" src="/images/gallery/10.jpg" style="aspect-ratio: 3/4; object-fit: cover"/>
<!-- Right column with two stacked images -->
<div class="flex flex-col gap-1.25">
<img alt="Top Right" class="rounded" src="/images/gallery/2.jpg" style="aspect-ratio: 4/3; object-fit: cover"/>
<img alt="Bottom Right" class="rounded" src="/images/gallery/3.jpg" style="aspect-ratio: 4/3; object-fit: cover"/>
</div>
</div>
<div class="mt-2.5">
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<i class="iconify tabler--corner-up-left text-sm"></i>
                                                    Reply
                                                </a>
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<div class="relative">
<span id="like-count-one"></span>
<button data-hs-toggle-password='{"target": "#like-count-one" }' type="button">
<div class="hs-password-active:hidden flex items-center gap-1.25">
<i class="iconify tabler--heart-filled text-danger"></i>
                                                                Liked!
                                                            </div>
<div class="hs-password-active:flex hidden items-center gap-1.25">
<i class="iconify tabler--heart text-default-400"></i>
                                                                Like
                                                            </div>
</button>
</div>
</a>
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<i class="iconify tabler--share text-sm"></i>
                                                    Share
                                                </a>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body pb-0!">
<div class="mb-2.5 flex items-center gap-2.5">
<img alt="Generic placeholder image" class="size-8 rounded-full" src="/images/users/user-4.jpg"/>
<div class="w-full">
<h5>
<a class="hover:text-primary" href="#!">Sophia Martinez</a>
</h5>
<p class="text-default-400">
<small>about 30 minutes ago</small>
</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                                    Edit post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                    Delete post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--share"></i>
                                                                    Share
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--pin"></i>
                                                                    Pin to top
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--flag"></i>
                                                                    Report post
                                                                </a>
</div>
</div>
</div>
</div>
</div>
<div class="mt-5 mb-7.5 text-center text-base italic">
<i class="iconify tabler--quote text-xl"></i>
                                                Just finished a weekend project! Built a small weather app using React and OpenWeather API. Feeling excited to share the results with everyone soon. 🚀
                                            </div>
</div>
<div class="border-default-300 card-body bg-default-50 border-t border-b border-dashed">
<div class="flex">
<img alt="Generic placeholder image" class="me-2.5 size-8 rounded-full" src="/images/users/user-1.jpg"/>
<div class="flex-1">
<div class="w-full">
<h5 class="mb-1.25">
<a class="hover:text-primary" href="#!">Liam Johnson</a>
<small class="text-default-400 float-end font-normal">10 minutes ago</small>
</h5>
                                                        That sounds awesome! Can't wait to see how you designed the UI.
                                                        <br/>
<a class="text-default-400 mt-2.5 inline-flex items-center gap-1" href="javascript:void(0);">
<i class="iconify tabler--corner-up-left"></i>
                                                            Reply
                                                        </a>
</div>
<div class="mt-5 flex">
<img alt="Generic placeholder image" class="me-2.5 size-8 rounded-full" src="/images/users/user-2.jpg"/>
<div class="flex-1">
<div class="w-full">
<h5 class="mb-1.25">
<a class="hover:text-primary" href="#!">Olivia Carter</a>
<small class="text-default-400 float-end font-normal">5 minutes ago</small>
</h5>
                                                                I recently built something similar with Vue. Let's collaborate sometime!
                                                            </div>
</div>
</div>
</div>
</div>
<div class="mt-5 flex items-start gap-2">
<img alt="Generic placeholder image" class="size-7.75 rounded-full" height="31" src="/images/users/user-3.jpg"/>
<div class="w-full">
<input class="form-input" id="simpleinput" placeholder="Add a comment..." type="text"/>
</div>
</div>
</div>
<div class="my-3 px-6">
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<i class="iconify tabler--corner-up-left text-sm"></i>
                                                Reply
                                            </a>
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<div class="relative">
<span id="like-count-two"></span>
<button data-hs-toggle-password='{"target": "#like-count-two"}' type="button">
<div class="hs-password-active:flex hidden items-center gap-1">
<i class="iconify tabler--heart-filled text-danger"></i>
                                                            Liked!
                                                        </div>
<div class="hs-password-active:hidden flex items-center gap-1">
<i class="iconify tabler--heart text-default-400"></i>
                                                            Likes(45)
                                                        </div>
</button>
</div>
</a>
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<i class="iconify tabler--share text-sm"></i>
                                                Share
                                            </a>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body pb-3!">
<div class="mb-2.5 flex items-center gap-2.5">
<img alt="Generic placeholder image" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
<div class="w-full">
<h5>
<a class="hover:text-primary" href="#!">Anika Roy</a>
</h5>
<p class="text-default-400">
<small>2 hours ago</small>
</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                                    Edit post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                    Delete post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--share"></i>
                                                                    Share
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--pin"></i>
                                                                    Pin to top
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--flag"></i>
                                                                    Report post
                                                                </a>
</div>
</div>
</div>
</div>
</div>
<p class="mb-4">Sharing a couple of timelapses from my recent Iceland trip. Let me know which one you like most!</p>
<div class="grid grid-cols-1 gap-1.25 md:grid-cols-2">
<div class="aspect-video overflow-hidden rounded-md">
<iframe allowfullscreen="" class="h-full w-full" src="https://player.vimeo.com/video/1084537"></iframe>
</div>
<div class="aspect-video overflow-hidden rounded-md">
<iframe allowfullscreen="" class="h-full w-full" src="https://player.vimeo.com/video/76979871"></iframe>
</div>
</div>
<div class="mt-2.5">
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<i class="iconify tabler--corner-up-left text-sm"></i>
                                                    Reply
                                                </a>
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<div class="relative">
<span id="like-count-three"></span>
<button data-hs-toggle-password='{"target": "#like-count-three" }' type="button">
<div class="hs-password-active:hidden flex items-center gap-1.25">
<i class="iconify tabler--heart-filled text-danger"></i>
                                                                Liked!
                                                            </div>
<div class="hs-password-active:flex hidden items-center gap-1.25">
<i class="iconify tabler--heart text-default-400"></i>
                                                                Like
                                                            </div>
</button>
</div>
</a>
<a class="btn btn-sm text-default-400 text-sm" href="javascript: void(0);">
<i class="iconify tabler--share text-sm"></i>
                                                    Share
                                                </a>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body">
<div class="mb-2.5 flex items-center gap-2.5">
<img alt="Generic placeholder image" class="size-8 rounded-full" src="/images/users/user-6.jpg"/>
<div class="w-full">
<h5>
<a class="hover:text-primary" href="#!">David Kim</a>
</h5>
<p class="text-default-400">
<small>Posted 1 hour ago</small>
</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                                    Edit post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                    Delete post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--share"></i>
                                                                    Share
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--pin"></i>
                                                                    Pin to top
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--flag"></i>
                                                                    Report post
                                                                </a>
</div>
</div>
</div>
</div>
</div>
<h5 class="mb-5">🔥 Quick Poll: What’s your go-to front-end framework in 2025?</h5>
<p class="text-default-400 mb-4">We’re gathering developer preferences for our next project. Cast your vote below! 💻</p>
<form>
<div class="mb-1.25 flex items-center gap-1.5">
<input class="form-checkbox rounded-full" id="optionReact" name="framework_poll" type="radio"/>
<label class="form-check-label font-normal" for="optionReact">React (Meta)</label>
</div>
<div class="mb-1.25 flex items-center gap-1.5">
<input class="form-checkbox rounded-full" id="optionVue" name="framework_poll" type="radio"/>
<label class="form-check-label font-normal" for="optionVue">Vue.js (Evan You)</label>
</div>
<div class="mb-1.25 flex items-center gap-1.5">
<input class="form-checkbox rounded-full" id="optionAngular" name="framework_poll" type="radio"/>
<label class="form-check-label font-normal" for="optionAngular">Angular (Google)</label>
</div>
<div class="mb-5 flex items-center gap-1.5">
<input class="form-checkbox rounded-full" id="optionSvelte" name="framework_poll" type="radio"/>
<label class="form-check-label font-normal" for="optionSvelte">Svelte (Emerging Favorite)</label>
</div>
<button class="btn btn-sm bg-primary text-white hover:bg-primary-hover" type="submit">Submit Vote</button>
</form>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body">
<div class="mb-5 flex items-center gap-2.5">
<img alt="Generic placeholder image" class="size-8 rounded-full" src="/images/users/user-2.jpg"/>
<div class="w-full">
<h5>
<a class="hover:text-primary" href="#!">Anika Roy</a>
</h5>
<p class="text-default-400">
<small>Posted 2 hours ago</small>
</p>
</div>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--edit"></i>
                                                                    Edit post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                    Delete post
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--share"></i>
                                                                    Share
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--pin"></i>
                                                                    Pin to top
                                                                </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--flag"></i>
                                                                    Report post
                                                                </a>
</div>
</div>
</div>
</div>
</div>
<h5 class="mb-3">
                                                📢 You're Invited:
                                                <strong>Dev Meetup 2025 – Build with AI</strong>
</h5>
<p class="text-default-400 mb-3">Join developers and tech enthusiasts for an inspiring evening of AI-driven development talks, live demos, and networking opportunities.</p>
<ul class="list-unstyled mb-base">
<li class="pb-3">
<strong>Date:</strong>
                                                    Friday, 25th July 2025
                                                </li>
<li class="pb-3">
<strong>Time:</strong>
                                                    6:00 PM IST
                                                </li>
<li>
<strong>Location:</strong>
                                                    Online (Zoom – link to be shared)
                                                </li>
</ul>
<div class="flex gap-2.5">
<button class="btn btn-sm border-primary text-primary hover:bg-primary border hover:text-white">
<i class="iconify tabler--bell text-sm"></i>
                                                    Interested
                                                </button>
<button class="btn btn-sm bg-primary text-white hover:bg-primary-hover">
<i class="iconify tabler--user-plus text-sm"></i>
                                                    Join Now
                                                </button>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body text-center">
<h1 class="mb-2.5 text-4xl">🏆</h1>
<h4 class="mb-1.25 text-lg font-semibold">Congratulations, Anika! 🎉</h4>
<p class="text-default-400 mb-5 italic">You’ve hit 1,000 followers ! Your content is making waves in the community!</p>
<div class="mb-5 flex justify-center gap-7.5">
<div class="text-center">
<h6 class="text-2xs">Posts</h6>
<span class="font-bold">135</span>
</div>
<div class="text-center">
<h6 class="text-2xs">Likes</h6>
<span class="font-bold">8,400</span>
</div>
<div class="text-center">
<h6 class="text-2xs">Subscribers</h6>
<span class="font-bold">1,000</span>
</div>
</div>
<div class="flex justify-center gap-3">
<button class="btn btn-sm text-success border-success hover:bg-success border hover:text-white">
<i class="iconify tabler--share"></i>
                                                    Share Achievement
                                                </button>
<a class="btn btn-sm bg-primary text-white hover:bg-primary-hover" href="#!">
<i class="iconify tabler--user"></i>
                                                    View Profile
                                                </a>
</div>
</div>
</div>
<!-- card -->
<div class="mb-5 flex items-center justify-center gap-2.5 p-5">
<strong>Loading...</strong>
<div aria-label="loading" class="text-danger inline-block size-4 animate-spin rounded-full border-2 border-current border-t-transparent" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
</div>
<div>
<div class="flex gap-base flex-col">
<!-- card -->
<div class="card">
<div class="card-body">
<div class="mb-5 flex items-center justify-between">
<h5>Activity</h5>
<a class="hover:text-primary text-sm" href="#">See all</a>
</div>
<div class="mb-5">
<small class="text-default-400 uppercase">Stories About You</small>
<div class="mt-2.5 flex items-center">
<img alt="mention" class="me-2.5 size-8 rounded-full" src="/images/users/user-7.jpg"/>
<div>
<strong>Mentions</strong>
<br/>
<span class="text-default-400 text-2xs">3 stories mention you</span>
</div>
</div>
</div>
<span class="text-default-400 text-xs font-bold uppercase">New</span>
<ul class="mt-2.5">
<!-- Item 1 -->
<li class="flex items-center py-1.25">
<img alt="jenny.w" class="me-2.5 size-9 rounded-full" src="/images/users/user-8.jpg"/>
<div class="grow">
<strong>jenny.w</strong>
                                                        started following you
                                                        <br/>
<span class="text-default-400 text-xs">2m ago</span>
</div>
<div class="text-primary text-base">
<i class="iconify tabler--user-plus"></i>
</div>
</li>
<!-- Item 2 -->
<li class="flex items-center py-1.25">
<img alt="daniel92" class="me-2.5 size-9 rounded-full" src="/images/users/user-9.jpg"/>
<div class="grow">
<strong>daniel92</strong>
                                                        commented on your post
                                                        <br/>
<span class="text-default-400 text-xs">3m ago</span>
</div>
<div>
<img alt="commented" class="h-8 w-8 rounded" src="/images/gallery/1.jpg"/>
</div>
</li>
<!-- Item 3 -->
<li class="flex items-center py-1.25">
<img alt="amelie.design" class="me-2.5 size-9 rounded-full" src="/images/users/user-10.jpg"/>
<div class="grow">
<strong>amelie.design</strong>
                                                        liked your story
                                                        <br/>
<span class="text-default-400 text-xs">4m ago</span>
</div>
<div>
<img alt="liked" class="h-8 w-8 rounded" src="/images/gallery/2.jpg"/>
</div>
</li>
<!-- Item 4 -->
<li class="flex items-center py-1.25">
<img alt="johnny_dev" class="me-2.5 size-9 rounded-full" src="/images/users/user-5.jpg"/>
<div class="grow">
<strong>johnny_dev</strong>
                                                        started following you
                                                        <br/>
<span class="text-default-400 text-xs">6m ago</span>
</div>
<div class="text-primary text-base">
<i class="iconify tabler--user-plus"></i>
</div>
</li>
<!-- Item 5 -->
<li class="flex items-center py-1.25">
<img alt="art.gal" class="me-2.5 size-9 rounded-full" src="/images/users/user-6.jpg"/>
<div class="grow">
<strong>art.gal</strong>
                                                        liked your post
                                                        <br/>
<span class="text-default-400 text-xs">8m ago</span>
</div>
<div>
<img alt="liked" class="h-8 w-8 rounded" src="/images/gallery/3.jpg"/>
</div>
</li>
</ul>
</div>
</div>
<!-- card -->
<div class="card">
<!-- Card Header -->
<div class="card-header">
<h4 class="card-title">Trending</h4>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--refresh"></i>
                                                                Refresh Feed
                                                            </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--settings"></i>
                                                                Manage Topics
                                                            </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--alert-circle"></i>
                                                                Report issue
                                                            </a>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="mb-5 flex">
<div>
<i class="iconify tabler--trending-up text-primary me-2.5 mt-1.25 text-sm"></i>
</div>
<a class="hover:text-primary" href="#!">
<strong>Golden Globes:</strong>
                                                    The 27 Best moments from the Golden Globe Awards
                                                </a>
</div>
<div class="mb-5 flex">
<div>
<i class="iconify tabler--trending-up text-primary me-2.5 mt-1.25 text-sm"></i>
</div>
<a class="hover:text-primary" href="#!">
<strong>World Cricket:</strong>
                                                    India has won ICC T20 World Cup Yesterday
                                                </a>
</div>
<div class="mb-5 flex">
<div>
<i class="iconify tabler--trending-up text-primary me-2.5 mt-1.25 text-sm"></i>
</div>
<a class="hover:text-primary" href="#!">
<strong>Antarctica:</strong>
                                                    Melting of Totten Glacier could cause high risk to areas near by sea
                                                </a>
</div>
<div class="flex">
<div>
<i class="iconify tabler--trending-up text-primary me-2.5 mt-1.25 text-sm"></i>
</div>
<a class="hover:text-primary" href="#!">
<strong>Global Tournament:</strong>
                                                    America has won Football match Yesterday
                                                </a>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<!-- Card Header -->
<div class="card-header">
<h4 class="card-title">Requests</h4>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">
<i class="iconify tabler--check"></i>
                                                                Mark All as Read
                                                            </a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                Clear All
                                                            </a>
</div>
</div>
</div>
</div>
</div>
<!-- Card Body -->
<div class="card-body">
<!-- Request 1: Collaboration -->
<div class="mb-5 flex items-center justify-between">
<div class="flex items-start">
<img alt="Emily Zhang" class="me-2.5 size-6 rounded-full" src="/images/users/user-3.jpg"/>
<div>
<p class="mb-1.25">
<strong>Emily Zhang</strong>
                                                            requested to collaborate on your design project.
                                                            <span class="badge font-semibold bg-primary ms-1.25 text-white">New</span>
</p>
<small class="text-default-400 text-xs">2 minutes ago</small>
</div>
</div>
<button class="btn btn-sm px-1.25 py-0 border-default-300 hover:border-primary hover:text-primary">Accept</button>
</div>
<!-- Request 2: Feature Suggestion -->
<div class="mb-5 flex items-center justify-between">
<div class="flex items-start">
<div>
<div class="bg-info me-2.5 flex size-6 items-center justify-center rounded-full text-white">
<i class="iconify tabler--rocket"></i>
</div>
</div>
<div>
<p class="mb-1.25">
<strong>New Feature:</strong>
                                                            Suggestion for dark mode support.
                                                            <span class="badge font-semibold bg-warning ms-1.25 text-white">Pending</span>
</p>
<small class="text-default-400 text-xs">10 minutes ago</small>
</div>
</div>
<button class="btn btn-sm px-1.25 py-0 border-default-300 hover:border-primary hover:text-primary">Review</button>
</div>
<!-- Request 3: Feedback -->
<div class="mb-5 flex items-center justify-between">
<div class="flex items-start">
<img alt="Emily Zhang" class="me-2.5 size-6 rounded-full" src="/images/users/user-6.jpg"/>
<div>
<p class="mb-1.25">
<strong>Client Feedback:</strong>
                                                            John Doe left a review on your dashboard.
                                                            <span class="badge font-semibold bg-secondary ms-1.25 text-white">Feedback</span>
</p>
<small class="text-default-400 text-xs">30 minutes ago</small>
</div>
</div>
<button class="btn btn-sm px-1.25 py-0 border-default-300 hover:border-primary hover:text-primary">Respond</button>
</div>
<!-- Request 4: Bug Report -->
<div class="flex items-center justify-between">
<div class="flex items-start">
<div>
<div class="bg-primary me-2.5 flex size-6 items-center justify-center rounded-full text-white">
<i class="iconify tabler--bug"></i>
</div>
</div>
<div>
<p class="mb-1.25">
<strong>Bug Report:</strong>
                                                            Login form issue on Safari mobile.
                                                            <span class="badge font-semibold bg-danger ms-1.25 text-white">Urgent</span>
</p>
<small class="text-default-400 text-xs">1 hour ago</small>
</div>
</div>
<button class="btn btn-sm px-1.25 py-0 border-default-300 hover:border-primary hover:text-primary">View</button>
</div>
</div>
</div>
<!-- card -->
<div class="card">
<!-- Card Header -->
<div class="card-header">
<h4 class="card-title">Featured Video For You</h4>
<div class="relative ms-auto">
<div class="hs-dropdown relative inline-flex [--placement:bottom-right]">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle" type="button">
<i class="iconify tabler--dots-vertical text-default-400 text-base"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#">Watch leter</a>
<a class="dropdown-item" href="#">
<i class="iconify tabler--trash"></i>
                                                                Report video
                                                            </a>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="relative w-full overflow-hidden rounded pt-[56.25%]">
<iframe allowfullscreen="" class="absolute start-0 top-0 h-full w-full rounded" src="https://player.vimeo.com/video/357274789"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

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

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