<!DOCTYPE html>

<html lang="en">
<head>
    <?php echo view('partials/title-meta', array('title' => 'One Page Landing')) ?> <?= $this->include('partials/head-css') ?>
</head>
<body class="bg-card">
<div class="wrapper">
<!-- Top Alert -->
<div class="relative bg-[#1E1F27] dark:bg-primary text-white text-sm py-3 px-4 transition-all duration-300 hs-removing:opacity-0 hs-removing:-translate-x-3" id="alert" role="alert">
<div class="flex lg:items-center items-start justify-center relative">
<!-- Message -->
<p class="text-center italic font-medium">
                    🚀 Inspinia is here! Now powered by Tailwind CSS 4.x, Bootstrap, multi-framework support, dark mode,
                    and a completely refreshed UI. Upgrade today for the best experience!
                    <a class="font-semibold text-white underline underline-offset-4 not-italic ms-2" href="https://wrapmarket.com/item/inspinia-multipurpose-admin-dashboard-template-WB0R5L90S?via=webapp" target="_blank">Buy Now!</a>
</p>
</div>
</div>
<header class="dark:bg-body-bg bg-card">
<nav class="container py-5">
<div class="flex flex-wrap justify-between items-center">
<!-- Logo -->
<div>
<a class="inline-block" href="/">
<img alt="dark logo" class="lg:h-8 h-6.5 dark:hidden block" src="/images/logo-black.png"/>
</a>
<a class="inline-block" href="/">
<img alt="logo" class="lg:h-8 h-6.5 dark:block hidden" src="/images/logo.png"/>
</a>
</div>
<!-- Toggle -->
<div class="flex items-center gap-x-2 lg:hidden">
<button aria-controls="hs-navbar-alignment" aria-expanded="false" aria-label="Toggle navigation" class="hs-collapse-toggle relative btn btn-icon py-1 border border-default-300" data-hs-collapse="#hs-navbar-alignment" id="hs-navbar-alignment-collapse" type="button">
<svg class="size-5" fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<line x1="3" x2="21" y1="6" y2="6"></line>
<line x1="3" x2="21" y1="12" y2="12"></line>
<line x1="3" x2="21" y1="18" y2="18"></line>
</svg>
</button>
</div>
<!-- Collapse Menu -->
<div aria-labelledby="hs-navbar-alignment-collapse" class="hs-collapse hidden w-full overflow-hidden transition-all duration-300 lg:block lg:w-auto" id="hs-navbar-alignment" role="region">
<div class="flex flex-col lg:gap-1.25 gap-y-2 lg:flex-row lg:items-center lg:mt-0 mt-2.5">
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#hero">Home</a>
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#services">Services</a>
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#features">Features</a>
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#plans">Plans</a>
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#reviews">Reviews</a>
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#blog">Blog</a>
<a class="lg:p-2 py-2 text-sm text-default-700 hover:text-primary" href="#contact">Contact</a>
</div>
<!-- Desktop Button -->
<div class="lg:hidden flex lg:items-center gap-x-2">
<a class="btn font-semibold ps-2" href="/auth-sign-in">SIGN IN</a>
<a class="btn btn-sm bg-primary text-white hover:bg-primary-hover" href="/auth-sign-up">Sign Up</a>
</div>
</div>
<!-- Desktop Button -->
<div class="lg:flex hidden lg:items-center gap-x-2">
<a class="btn font-semibold ps-2" href="/auth-sign-in">SIGN IN</a>
<a class="btn btn-sm bg-primary text-white hover:bg-primary-hover" href="/auth-sign-up">Sign
                            Up</a>
</div>
</div>
</nav>
</header>
<!--HERO SECTION-->
<section class="bg-light/50 border-t border-light relative" id="hero">
<!-- Background Pattern -->
<div class="absolute top-0 inset-s-1/2 -translate-x-1/2 mt-15">
<img alt="" src="/images/bg-pattern.png"/>
</div>
<div class="container pt-15 relative">
<!-- Hero Content Row -->
<div class="lg:w-8/12 mx-auto text-center">
<!-- Pre Info Text -->
<span class="font-semibold text-default-400 italic">Trusted by 50k+ happy customers</span>
<!-- Avatar Group -->
<div class="flex justify-center items-center -space-x-2 mt-2.5">
<div>
<img alt="Ava Lee" class="size-8 rounded-full hover:-translate-y-0.75 transition-all duration-300" src="/images/users/user-7.jpg"/>
</div>
<div>
<img alt="Ethan King" class="size-8 rounded-full hover:-translate-y-0.75 transition-all duration-300" src="/images/users/user-8.jpg"/>
</div>
<div>
<img alt="Lucas White" class="size-8 rounded-full hover:-translate-y-0.75 transition-all duration-300" src="/images/users/user-9.jpg"/>
</div>
<div>
<img alt="Lucas White" class="size-8 rounded-full hover:-translate-y-0.75 transition-all duration-300" src="/images/users/user-1.jpg"/>
</div>
<div>
<img alt="Lucas White" class="size-8 rounded-full hover:-translate-y-0.75 transition-all duration-300" src="/images/users/user-2.jpg"/>
</div>
</div>
<!-- Hero Title -->
<h1 class="my-7.5 text-4xl font-bold">
                        The #1 <span class="text-primary">Admin Dashboard</span> Template on Wrapmarket –
                        <span class="italic text-default-400">Trusted by Thousands</span>
</h1>
<!-- Hero Description -->
<p class="mb-7.5 text-default-400 text-sm leading-6.5">
                        Build powerful, modern web applications with our top-rated Admin Dashboard Template. Designed
                        for performance, flexibility, and ease of customization, it’s the perfect solution for startups,
                        agencies, and enterprise teams.
                    </p>
<!-- Call to Action Buttons -->
<div class="flex gap-2.5 flex-wrap justify-center">
<a class="btn bg-secondary py-2.5 font-semibold text-white hover:bg-secondary-hover" href="#">
<i class="iconify tabler--basket text-xl me-2"></i>Buy Now! </a>
<a class="btn bg-light py-2.5 font-semibold hover:text-primary" href="https://wrapbootstrap.com/user/WebAppLayers/message" target="_blank"> <i class="iconify tabler--confetti text-xl me-2"></i>Contact Us </a>
</div>
</div>
<!-- Images & Clients Section -->
<div class="container relative">
<!-- Hero Illustration Image Row -->
<div class="md:w-5/6 mx-auto relative">
<!-- Decorative SVG Element -->
<figure class="absolute top-0 inset-s-0 -translate-1/2 -ms-3 opacity-50">
<svg fill="#1AB394" height="170" viewbox="0 0 111 170" width="111" xmlns="http://www.w3.org/2000/svg">
<path d="M99.2319 7.37436C100.054 7.30936 101.638 15.7474 102.856 26.059C104.147 36.3089 105.01 48.3589 105.287 55.3911C105.778 69.3822 104.459 80.6992 102.753 80.7559C100.986 80.7391 99.5737 69.5262 99.0765 55.6027C98.7941 48.638 98.612 36.5788 98.4807 26.2931C98.3494 16.0074 98.3422 7.43353 99.2319 7.37436Z">
</path>
<path d="M80.3888 75.0118C79.555 75.2119 77.8208 71.6599 75.6665 67.4591C73.5063 63.3259 70.8525 58.6057 69.3802 55.9609C66.4471 50.5361 64.4804 45.7392 65.8687 44.6345C67.1836 43.5915 71.6484 47.0394 74.8842 52.8986C76.5416 55.7636 78.7318 61.1241 79.8822 65.9185C81.0327 70.7128 81.2226 74.8118 80.3888 75.0118Z">
</path>
<path d="M61.7883 89.4615C61.3805 90.2428 54.8078 87.5652 47.1688 83.8428C39.5297 80.1205 30.9035 75.2241 26.0659 72.1522C16.3908 66.0084 9.53733 59.4962 10.5438 58.0863C11.5502 56.6764 19.903 60.8007 29.4489 66.8652C34.2189 69.9313 42.3932 75.3329 49.4043 80.0217C56.4097 84.7779 62.1902 88.7478 61.7883 89.4615Z">
</path>
<path d="M46.1586 113.626C46.0151 114.498 42.6533 114.82 38.7186 114.684C34.7105 114.609 30.1297 114.077 27.4574 113.506C22.1804 112.369 18.3033 109.993 18.7195 108.328C19.1356 106.663 23.5897 106.299 28.7317 107.424C31.2689 107.984 35.6563 109.18 39.43 110.39C43.2037 111.601 46.2962 112.821 46.1586 113.626Z">
</path>
<path d="M52.2364 144.838C52.4365 145.672 46.3447 147.663 39.1256 150.101C31.9065 152.538 23.5601 155.423 18.719 157.114C9.04856 160.36 0.851466 162.305 0.169487 160.749C-0.512493 159.193 6.75837 154.583 16.7107 151.225C21.6868 149.545 30.3976 147.169 38.0635 145.858C45.6002 144.469 52.0363 144.005 52.2364 144.838Z">
</path>
</svg>
</figure>
<!-- Hero Main Image -->
<img alt="saas-img" class="rounded-t-md shadow-lg mt-15" src="/images/dashboard-1.png"/>
</div>
</div>
</div>
</section>
<!-- Services -->
<section class="lg:pt-26 pt-12 pb-15" id="services">
<div class="container">
<div class="text-center">
<span class="text-default-400 rounded-xl inline-block">🚀 Empowering your digital journey</span>
<h2 class="mt-5 font-bold md:text-2xl text-xl mb-15">Discover Our <mark class="italic bg-warning/20 text-default-800">Core Services</mark> and Capabilities</h2>
</div>
<div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-base mb-5">
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--bulb text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">Digital Strategy</h4>
<p class="text-default-400 mb-5">Crafting data-driven strategies to maximize online growth
                                and brand engagement.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--chart-bar text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">SEO Optimization</h4>
<p class="text-default-400 mb-5">Improve search engine rankings and increase website
                                visibility through tailored SEO practices.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--speakerphone text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">Social Media Marketing</h4>
<p class="text-default-400 mb-5">Engage your audience across platforms with strategic
                                content and campaign management.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--world text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">Web Development</h4>
<p class="text-default-400 mb-5">Building fast, responsive, and scalable websites that meet
                                your business needs.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--mail text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">Email Marketing</h4>
<p class="text-default-400 mb-5">Connect with your audience and boost conversions through
                                targeted email campaigns.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--shopping-cart text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">E-Commerce Solutions</h4>
<p class="text-default-400 mb-5">Launch and manage high-performing online stores with
                                secure, scalable features.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--camera text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">Content Creation</h4>
<p class="text-default-400 mb-5">Produce compelling visuals and copy to drive traffic and
                                build brand identity.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
<div class="card border-0 p-2 h-full">
<div class="card-body pb-0">
<div class="mb-5">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary text-white">
<i class="iconify tabler--shield-check text-2xl"></i>
</span>
</div>
<h4 class="mb-2.5 text-lg">Security Audits</h4>
<p class="text-default-400 mb-5">Ensure your website and data are secure with comprehensive
                                vulnerability assessments.</p>
</div>
<div class="card-footer border-0 pt-0 pb-3.75">
<a class="text-primary hover:text-primary-hover font-semibold" href="#">Know more<i class="iconify tabler--arrow-right ms-2 align-middle"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="lg:py-26 py-12 bg-light/30 border-t border-b border-default-300" id="features">
<div class="container">
<div class="grid xl:grid-cols-12 grid-cols-1 gap-base items-center pb-15">
<div class="xl:col-span-5 py-5">
<div class="relative">
<figure class="absolute top-0 inset-s-0 -translate-x-1/2 -translate-y-1/2 opacity-25">
<svg fill="#1ab394" height="170" viewbox="0 0 111 170" width="111" xmlns="http://www.w3.org/2000/svg">
<path d="M99.2319 7.37436C100.054 7.30936 101.638 15.7474 102.856 26.059C104.147 36.3089 105.01 48.3589 105.287 55.3911C105.778 69.3822 104.459 80.6992 102.753 80.7559C100.986 80.7391 99.5737 69.5262 99.0765 55.6027C98.7941 48.638 98.612 36.5788 98.4807 26.2931C98.3494 16.0074 98.3422 7.43353 99.2319 7.37436Z"></path>
<path d="M80.3888 75.0118C79.555 75.2119 77.8208 71.6599 75.6665 67.4591C73.5063 63.3259 70.8525 58.6057 69.3802 55.9609C66.4471 50.5361 64.4804 45.7392 65.8687 44.6345C67.1836 43.5915 71.6484 47.0394 74.8842 52.8986C76.5416 55.7636 78.7318 61.1241 79.8822 65.9185C81.0327 70.7128 81.2226 74.8118 80.3888 75.0118Z"></path>
<path d="M61.7883 89.4615C61.3805 90.2428 54.8078 87.5652 47.1688 83.8428C39.5297 80.1205 30.9035 75.2241 26.0659 72.1522C16.3908 66.0084 9.53733 59.4962 10.5438 58.0863C11.5502 56.6764 19.903 60.8007 29.4489 66.8652C34.2189 69.9313 42.3932 75.3329 49.4043 80.0217C56.4097 84.7779 62.1902 88.7478 61.7883 89.4615Z"></path>
<path d="M46.1586 113.626C46.0151 114.498 42.6533 114.82 38.7186 114.684C34.7105 114.609 30.1297 114.077 27.4574 113.506C22.1804 112.369 18.3033 109.993 18.7195 108.328C19.1356 106.663 23.5897 106.299 28.7317 107.424C31.2689 107.984 35.6563 109.18 39.43 110.39C43.2037 111.601 46.2962 112.821 46.1586 113.626Z"></path>
<path d="M52.2364 144.838C52.4365 145.672 46.3447 147.663 39.1256 150.101C31.9065 152.538 23.5601 155.423 18.719 157.114C9.04856 160.36 0.851466 162.305 0.169487 160.749C-0.512493 159.193 6.75837 154.583 16.7107 151.225C21.6868 149.545 30.3976 147.169 38.0635 145.858C45.6002 144.469 52.0363 144.005 52.2364 144.838Z"></path>
</svg>
</figure>
<!-- Main image -->
<img alt="saas-img" class="rounded-xl shadow-lg max-w-full mt-12 z-10 relative" src="/images/chat.png"/>
<figure class="absolute bottom-0 end-0 lg:-me-15 -me-3 -mb-12 opacity-25">
<svg height="120" width="120" xmlns="http://www.w3.org/2000/svg">
<g fill="#1c84c6">
<circle cx="10" cy="10" r="4"></circle>
<circle cx="26" cy="10" r="4"></circle>
<circle cx="42" cy="10" r="4"></circle>
<circle cx="58" cy="10" r="4"></circle>
<circle cx="74" cy="10" r="4"></circle>
<circle cx="90" cy="10" r="4"></circle>
<!-- Row 1 -->
<circle cx="10" cy="26" r="4"></circle>
<circle cx="26" cy="26" r="4"></circle>
<circle cx="42" cy="26" r="4"></circle>
<circle cx="58" cy="26" r="4"></circle>
<circle cx="74" cy="26" r="4"></circle>
<circle cx="90" cy="26" r="4"></circle>
<!-- Row 2 -->
<circle cx="10" cy="42" r="4"></circle>
<circle cx="26" cy="42" r="4"></circle>
<circle cx="42" cy="42" r="4"></circle>
<circle cx="58" cy="42" r="4"></circle>
<circle cx="74" cy="42" r="4"></circle>
<circle cx="90" cy="42" r="4"></circle>
<!-- Row 3 -->
<circle cx="10" cy="58" r="4"></circle>
<circle cx="26" cy="58" r="4"></circle>
<circle cx="42" cy="58" r="4"></circle>
<circle cx="58" cy="58" r="4"></circle>
<circle cx="74" cy="58" r="4"></circle>
<circle cx="90" cy="58" r="4"></circle>
<!-- Row 4 -->
<circle cx="10" cy="74" r="4"></circle>
<circle cx="26" cy="74" r="4"></circle>
<circle cx="42" cy="74" r="4"></circle>
<circle cx="58" cy="74" r="4"></circle>
<circle cx="74" cy="74" r="4"></circle>
<circle cx="90" cy="74" r="4"></circle>
<!-- Row 5 -->
<circle cx="10" cy="90" r="4"></circle>
<circle cx="26" cy="90" r="4"></circle>
<circle cx="42" cy="90" r="4"></circle>
<circle cx="58" cy="90" r="4"></circle>
<circle cx="74" cy="90" r="4"></circle>
<circle cx="90" cy="90" r="4"></circle>
</g>
</svg>
</figure>
</div>
<!-- end relative -->
</div>
<div class="xl:col-span-7 lg:w-132.5 lg:ms-auto py-5">
<h2 class="mb-7.5 md:text-2xl text-xl">Connecting conversations across the world</h2>
<p class="mb-2.5 text-[17px] font-light lead">Fast, secure, and intuitive—our chat platform
                            empowers teams and communities to communicate effortlessly, no matter the distance.</p>
<p class="text-default-400 text-sm mb-7.5">Experience seamless messaging with built-in privacy
                            features and unmatched reliability.</p>
<a class="btn bg-primary text-white mb-7.5 hover:bg-primary-hover" href="#!">Check Chat App</a>
<div class="flex flex-wrap justify-between gap-7.5 mt-7.5">
<div>
<h3 class="mb-2.5 text-xl"><span data-target="99.2">99.20</span><span class="text-primary">%</span></h3>
<p class="text-default-400">User satisfaction</p>
</div>
<div>
<h3 class="mb-2.5 text-xl"><span data-target="7.4">7.40</span><span class="text-primary">x</span></h3>
<p class="text-default-400">Monthly user growth</p>
</div>
<div>
<h3 class="mb-2.5 text-xl"><span data-target="1200">1,200</span><span class="text-primary">+</span></h3>
<p class="text-default-400">Messages sent per second</p>
</div>
</div>
</div>
</div>
<div class="grid xl:grid-cols-12 grid-cols-1 gap-base items-center py-15">
<div class="xl:col-span-5 py-5 xl:order-1 order-2">
<h2 class="mb-7.5 md:text-2xl text-xl">Manage your files seamlessly from anywhere</h2>
<p class="mb-2.5 text-[17px] font-light lead">A powerful, secure, and intuitive file manager
                            built to simplify how individuals and teams store, share, and organize files.</p>
<p class="text-default-400 text-sm mb-7.5">Access files instantly, collaborate in real-time, and
                            enjoy peace of mind with encrypted storage.</p>
<a class="btn bg-primary text-white mb-7.5 hover:bg-primary-hover" href="#!">Explore File
                            Manager</a>
<div class="flex flex-wrap justify-between gap-7.5 mt-7.5">
<div>
<h3 class="mb-2.5 text-xl"><span data-target="99.5">99.50</span><span class="text-primary">%</span></h3>
<p class="text-default-400">File recovery success rate</p>
</div>
<div>
<h3 class="mb-2.5 text-xl"><span data-target="3.2">3.20</span><span class="text-primary">x</span></h3>
<p class="text-default-400">Faster upload speed</p>
</div>
<div>
<h3 class="mb-2.5 text-xl"><span data-target="1500">1,500</span><span class="text-primary">+</span></h3>
<p class="text-default-400">Files organized per minute</p>
</div>
</div>
</div>
<div class="xl:col-span-7 lg:w-132.5 lg:ms-auto py-5 xl:order-2 order-1">
<div class="relative">
<figure class="absolute top-0 inset-s-0 -translate-x-1/2 -translate-y-1/2 opacity-25">
<svg fill="#1c84c6" height="170" viewbox="0 0 111 170" width="111" xmlns="http://www.w3.org/2000/svg">
<path d="M99.2319 7.37436C100.054 7.30936 101.638 15.7474 102.856 26.059C104.147 36.3089 105.01 48.3589 105.287 55.3911C105.778 69.3822 104.459 80.6992 102.753 80.7559C100.986 80.7391 99.5737 69.5262 99.0765 55.6027C98.7941 48.638 98.612 36.5788 98.4807 26.2931C98.3494 16.0074 98.3422 7.43353 99.2319 7.37436Z"></path>
<path d="M80.3888 75.0118C79.555 75.2119 77.8208 71.6599 75.6665 67.4591C73.5063 63.3259 70.8525 58.6057 69.3802 55.9609C66.4471 50.5361 64.4804 45.7392 65.8687 44.6345C67.1836 43.5915 71.6484 47.0394 74.8842 52.8986C76.5416 55.7636 78.7318 61.1241 79.8822 65.9185C81.0327 70.7128 81.2226 74.8118 80.3888 75.0118Z"></path>
<path d="M61.7883 89.4615C61.3805 90.2428 54.8078 87.5652 47.1688 83.8428C39.5297 80.1205 30.9035 75.2241 26.0659 72.1522C16.3908 66.0084 9.53733 59.4962 10.5438 58.0863C11.5502 56.6764 19.903 60.8007 29.4489 66.8652C34.2189 69.9313 42.3932 75.3329 49.4043 80.0217C56.4097 84.7779 62.1902 88.7478 61.7883 89.4615Z"></path>
<path d="M46.1586 113.626C46.0151 114.498 42.6533 114.82 38.7186 114.684C34.7105 114.609 30.1297 114.077 27.4574 113.506C22.1804 112.369 18.3033 109.993 18.7195 108.328C19.1356 106.663 23.5897 106.299 28.7317 107.424C31.2689 107.984 35.6563 109.18 39.43 110.39C43.2037 111.601 46.2962 112.821 46.1586 113.626Z"></path>
<path d="M52.2364 144.838C52.4365 145.672 46.3447 147.663 39.1256 150.101C31.9065 152.538 23.5601 155.423 18.719 157.114C9.04856 160.36 0.851466 162.305 0.169487 160.749C-0.512493 159.193 6.75837 154.583 16.7107 151.225C21.6868 149.545 30.3976 147.169 38.0635 145.858C45.6002 144.469 52.0363 144.005 52.2364 144.838Z"></path>
</svg>
</figure>
<!-- Main image -->
<img alt="saas-img" class="rounded-xl shadow-lg max-w-full mt-12 z-10 relative" src="/images/file-manager.png"/>
<figure class="absolute bottom-0 end-0 lg:-me-15 -me-3 -mb-12 opacity-25">
<svg height="120" width="120" xmlns="http://www.w3.org/2000/svg">
<g fill="#f8ac59">
<circle cx="10" cy="10" r="4"></circle>
<circle cx="26" cy="10" r="4"></circle>
<circle cx="42" cy="10" r="4"></circle>
<circle cx="58" cy="10" r="4"></circle>
<circle cx="74" cy="10" r="4"></circle>
<circle cx="90" cy="10" r="4"></circle>
<!-- Row 1 -->
<circle cx="10" cy="26" r="4"></circle>
<circle cx="26" cy="26" r="4"></circle>
<circle cx="42" cy="26" r="4"></circle>
<circle cx="58" cy="26" r="4"></circle>
<circle cx="74" cy="26" r="4"></circle>
<circle cx="90" cy="26" r="4"></circle>
<!-- Row 2 -->
<circle cx="10" cy="42" r="4"></circle>
<circle cx="26" cy="42" r="4"></circle>
<circle cx="42" cy="42" r="4"></circle>
<circle cx="58" cy="42" r="4"></circle>
<circle cx="74" cy="42" r="4"></circle>
<circle cx="90" cy="42" r="4"></circle>
<!-- Row 3 -->
<circle cx="10" cy="58" r="4"></circle>
<circle cx="26" cy="58" r="4"></circle>
<circle cx="42" cy="58" r="4"></circle>
<circle cx="58" cy="58" r="4"></circle>
<circle cx="74" cy="58" r="4"></circle>
<circle cx="90" cy="58" r="4"></circle>
<!-- Row 4 -->
<circle cx="10" cy="74" r="4"></circle>
<circle cx="26" cy="74" r="4"></circle>
<circle cx="42" cy="74" r="4"></circle>
<circle cx="58" cy="74" r="4"></circle>
<circle cx="74" cy="74" r="4"></circle>
<circle cx="90" cy="74" r="4"></circle>
<!-- Row 5 -->
<circle cx="10" cy="90" r="4"></circle>
<circle cx="26" cy="90" r="4"></circle>
<circle cx="42" cy="90" r="4"></circle>
<circle cx="58" cy="90" r="4"></circle>
<circle cx="74" cy="90" r="4"></circle>
<circle cx="90" cy="90" r="4"></circle>
</g>
</svg>
</figure>
</div>
<!-- end relative -->
</div>
</div>
<div class="grid xl:grid-cols-12 grid-cols-1 gap-base items-center py-15">
<div class="xl:col-span-5 py-5">
<div class="relative">
<figure class="absolute top-0 inset-s-0 -translate-x-1/2 -translate-y-1/2 opacity-25">
<svg fill="#7b70ef" height="170" viewbox="0 0 111 170" width="111" xmlns="http://www.w3.org/2000/svg">
<path d="M99.2319 7.37436C100.054 7.30936 101.638 15.7474 102.856 26.059C104.147 36.3089 105.01 48.3589 105.287 55.3911C105.778 69.3822 104.459 80.6992 102.753 80.7559C100.986 80.7391 99.5737 69.5262 99.0765 55.6027C98.7941 48.638 98.612 36.5788 98.4807 26.2931C98.3494 16.0074 98.3422 7.43353 99.2319 7.37436Z"></path>
<path d="M80.3888 75.0118C79.555 75.2119 77.8208 71.6599 75.6665 67.4591C73.5063 63.3259 70.8525 58.6057 69.3802 55.9609C66.4471 50.5361 64.4804 45.7392 65.8687 44.6345C67.1836 43.5915 71.6484 47.0394 74.8842 52.8986C76.5416 55.7636 78.7318 61.1241 79.8822 65.9185C81.0327 70.7128 81.2226 74.8118 80.3888 75.0118Z"></path>
<path d="M61.7883 89.4615C61.3805 90.2428 54.8078 87.5652 47.1688 83.8428C39.5297 80.1205 30.9035 75.2241 26.0659 72.1522C16.3908 66.0084 9.53733 59.4962 10.5438 58.0863C11.5502 56.6764 19.903 60.8007 29.4489 66.8652C34.2189 69.9313 42.3932 75.3329 49.4043 80.0217C56.4097 84.7779 62.1902 88.7478 61.7883 89.4615Z"></path>
<path d="M46.1586 113.626C46.0151 114.498 42.6533 114.82 38.7186 114.684C34.7105 114.609 30.1297 114.077 27.4574 113.506C22.1804 112.369 18.3033 109.993 18.7195 108.328C19.1356 106.663 23.5897 106.299 28.7317 107.424C31.2689 107.984 35.6563 109.18 39.43 110.39C43.2037 111.601 46.2962 112.821 46.1586 113.626Z"></path>
<path d="M52.2364 144.838C52.4365 145.672 46.3447 147.663 39.1256 150.101C31.9065 152.538 23.5601 155.423 18.719 157.114C9.04856 160.36 0.851466 162.305 0.169487 160.749C-0.512493 159.193 6.75837 154.583 16.7107 151.225C21.6868 149.545 30.3976 147.169 38.0635 145.858C45.6002 144.469 52.0363 144.005 52.2364 144.838Z"></path>
</svg>
</figure>
<!-- Main image -->
<img alt="saas-img" class="rounded-xl shadow-lg max-w-full mt-12 z-10 relative" src="/images/team.png"/>
<figure class="absolute bottom-0 end-0 lg:-me-15 -me-3 -mb-12 opacity-25">
<svg height="120" width="120" xmlns="http://www.w3.org/2000/svg">
<g fill="#ed5565">
<circle cx="10" cy="10" r="4"></circle>
<circle cx="26" cy="10" r="4"></circle>
<circle cx="42" cy="10" r="4"></circle>
<circle cx="58" cy="10" r="4"></circle>
<circle cx="74" cy="10" r="4"></circle>
<circle cx="90" cy="10" r="4"></circle>
<!-- Row 1 -->
<circle cx="10" cy="26" r="4"></circle>
<circle cx="26" cy="26" r="4"></circle>
<circle cx="42" cy="26" r="4"></circle>
<circle cx="58" cy="26" r="4"></circle>
<circle cx="74" cy="26" r="4"></circle>
<circle cx="90" cy="26" r="4"></circle>
<!-- Row 2 -->
<circle cx="10" cy="42" r="4"></circle>
<circle cx="26" cy="42" r="4"></circle>
<circle cx="42" cy="42" r="4"></circle>
<circle cx="58" cy="42" r="4"></circle>
<circle cx="74" cy="42" r="4"></circle>
<circle cx="90" cy="42" r="4"></circle>
<!-- Row 3 -->
<circle cx="10" cy="58" r="4"></circle>
<circle cx="26" cy="58" r="4"></circle>
<circle cx="42" cy="58" r="4"></circle>
<circle cx="58" cy="58" r="4"></circle>
<circle cx="74" cy="58" r="4"></circle>
<circle cx="90" cy="58" r="4"></circle>
<!-- Row 4 -->
<circle cx="10" cy="74" r="4"></circle>
<circle cx="26" cy="74" r="4"></circle>
<circle cx="42" cy="74" r="4"></circle>
<circle cx="58" cy="74" r="4"></circle>
<circle cx="74" cy="74" r="4"></circle>
<circle cx="90" cy="74" r="4"></circle>
<!-- Row 5 -->
<circle cx="10" cy="90" r="4"></circle>
<circle cx="26" cy="90" r="4"></circle>
<circle cx="42" cy="90" r="4"></circle>
<circle cx="58" cy="90" r="4"></circle>
<circle cx="74" cy="90" r="4"></circle>
<circle cx="90" cy="90" r="4"></circle>
</g>
</svg>
</figure>
</div>
<!-- end relative -->
</div>
<div class="xl:col-span-7 lg:w-132.5 lg:ms-auto py-5">
<h2 class="mb-7.5 md:text-2xl text-xl">Manage your connections with ease</h2>
<p class="mb-2.5 text-[17px] font-light lead">Our smart contacts app keeps all your
                            relationships organized, accessible, and in sync across devices—at home or on the go.</p>
<p class="text-default-400 text-sm mb-7.5">Effortlessly import, categorize, and interact with
                            contacts through a clean, privacy-focused interface.</p>
<a class="btn bg-primary text-white mb-7.5 hover:bg-primary-hover" href="#!">Check Contacts
                            App</a>
<div class="flex flex-wrap justify-between gap-7.5 mt-7.5">
<div>
<h3 class="mb-2.5 text-xl"><span data-target="97.5">97.50</span><span class="text-primary">%</span></h3>
<p class="text-default-400">Sync reliability</p>
</div>
<div>
<h3 class="mb-2.5 text-xl"><span data-target="4.2">4.20</span><span class="text-primary">x</span></h3>
<p class="text-default-400">Faster contact search</p>
</div>
<div>
<h3 class="mb-2.5 text-xl"><span data-target="250000">250,000</span><span class="text-primary">+</span></h3>
<p class="text-default-400">Contacts managed daily</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Plans -->
<section class="lg:py-26 py-12" id="plans">
<div class="container">
<div class="text-center">
<span class="text-default-400 rounded-xl inline-block">💰 Transparent and flexible pricing</span>
<h2 class="mt-5 font-bold md:text-2xl text-xl mb-15">Choose the <mark class="italic bg-warning/20 text-default-800">License</mark> That Fits Your Needs</h2>
</div>
<div class="lg:w-5/6 mx-auto">
<div class="grid xl:grid-cols-3 grid-cols-1 gap-base">
<div class="card h-full bg-light/10 border-light rounded-xl">
<div class="card-body lg:px-7.5 p-15 pb-2.5 text-center">
<div class="text-center">
<h3 class="font-bold mb-1.25 text-xl">Single License</h3>
<p class="text-default-400">Perfect for personal or one-client projects</p>
</div>
<div class="my-7.5">
<h1 class="font-bold lg:text-[40px] md:text-[33px] text-[27px]">$49</h1>
<small class="block text-default-400 text-sm font-medium">One-time payment</small>
<small class="block text-default-400 font-medium">Single project use</small>
</div>
<ul class="text-start text-sm font-medium">
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> 1
                                        project usage</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> Full
                                        component access</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> Basic
                                        documentation</li>
<li class="mb-2.5"><i class="iconify tabler--x text-danger me-2.5"></i> No
                                        multi-client use</li>
<li class="mb-2.5"><i class="iconify tabler--x text-danger me-2.5"></i> No
                                        SaaS/resale rights</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0 px-15 pb-7.5">
<a class="btn border border-primary text-primary hover:text-white hover:bg-primary rounded-full w-full py-2.5 font-semibold rounded-pill" href="#!">Buy
                                    Single License</a>
</div>
</div>
<div class="card h-full bg-light/10 border-dashed border-default-300 border my-7.5 lg:my-0 rounded-xl">
<div class="card-body lg:px-7.5 p-15 pb-2.5 text-center">
<div class="text-center">
<h3 class="font-bold mb-1.25 text-xl">Multiple License</h3>
<p class="text-default-400">For developers or agencies working with multiple clients
                                    </p>
</div>
<div class="my-7.5">
<h1 class="font-bold lg:text-[40px] md:text-[33px] text-[27px]">$249</h1>
<small class="block text-default-400 text-sm font-medium">One-time payment</small>
<small class="block text-default-400 font-medium">Up to 5 projects</small>
</div>
<ul class="text-start text-sm font-medium">
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> Use in
                                        up to 5 projects</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i>
                                        Commercial client use</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i>
                                        Lifetime updates</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> Premium
                                        support</li>
<li class="mb-2.5"><i class="iconify tabler--x text-danger me-2.5"></i> No
                                        resale/SaaS rights</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0 px-15 pb-7.5">
<a class="btn bg-primary text-white w-full py-2.5 font-semibold rounded-full hover:bg-primary-hover" href="#!">Buy
                                    Multiple License</a>
</div>
<span class="absolute top-0 inset-s-1/2 start-1/2 -translate-x-1/2 badge bg-primary/15 text-primary rounded-full px-5 py-1.25 mt-5">
                                Best Value </span>
</div>
<div class="card h-full bg-light/10 border-light rounded-xl">
<div class="card-body lg:px-7.5 p-15 pb-2.5 text-center">
<div class="text-center">
<h3 class="font-bold mb-1.25 text-xl">Extended License</h3>
<p class="text-default-400">For SaaS products or items offered in paid applications
                                    </p>
</div>
<div class="my-7.5">
<h1 class="font-bold lg:text-[40px] md:text-[33px] text-[27px]">$999</h1>
<small class="block text-default-400 text-sm font-medium">One-time payment</small>
<small class="block text-default-400 font-medium">Commercial redistribution
                                        rights</small>
</div>
<ul class="text-start text-sm font-medium">
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i>
                                        Unlimited project usage</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> SaaS &amp;
                                        resale rights</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> Full
                                        Figma source files</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i>
                                        Priority support</li>
<li class="mb-2.5"><i class="iconify tabler--check text-success me-2.5"></i> Custom
                                        licensing agreement</li>
</ul>
</div>
<div class="card-footer bg-transparent border-0 px-15 pb-7.5">
<a class="btn bg-dark text-white w-full py-2.5 font-semibold rounded-full hover:bg-dark-hover" href="#!">Buy
                                    Extended License</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="min-h-87.5 relative overflow-hidden bg-center bg-no-repeat bg-cover bg-[url(/../images/landing-cta.jpg)]">
<div class="absolute top-0 bottom-0 inset-s-0 start-0 end-0 inset-e-0 rounded-xl flex items-center flex-col gap-5 justify-center bg-linear-to-t from-[#313a46] via-[rgba(49,58,70,0.8)] to-[rgba(49,58,70,0.5)] text-center">
<h3 class="text-white text-2xl font-bold">Build Faster with Our Premium Admin Template</h3>
<p class="text-white/75 text-base">
                    Kickstart your project with a modern, responsive, and developer-friendly admin dashboard. <br/>
                    Try it free for 14 days — no credit card needed.
                </p>
<a class="btn bg-light text-default-800 rounded-full hover:text-primary" href="#!">Buy Our Template</a>
</div>
</section>
<!-- Reviews -->
<section class="lg:py-26 py-12 relative overflow-hidden" id="reviews">
<div class="absolute top-0 inset-s-1/2 -translate-x-1/2 mt-12 opacity-50">
<img alt="" src="/images/bg-pattern.png"/>
</div>
<div class="container">
<div class="text-center">
<span class="text-default-400 rounded-xl inline-block">💬 What Our Customers Are Saying</span>
<h2 class="mt-5 font-bold md:text-2xl text-xl mb-15">Real Feedback from <mark class="italic bg-warning/20 text-default-800">Satisfied</mark> Clients</h2>
</div>
<div class="grid xl:grid-cols-3 grid-cols-1 gap-base place-items-center">
<div class="card border-light rounded-xl p-5 h-full">
<div class="card-body pb-0 text-center">
<div class="mx-auto size-12 mb-5">
<img alt="Emily Carter" class="rounded-full" src="/images/users/user-1.jpg"/>
</div>
<span class="text-warning mb-5 block">
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
</span>
<h4 class="mb-2.5 text-md">Absolutely love it!</h4>
<p class="text-default-400 mb-5 italic text-sm">"This gadget exceeded all my expectations.
                                Sleek design and incredible performance!"</p>
</div>
</div>
<div class="card border-light rounded-xl p-5 h-full">
<div class="card-body pb-0 text-center">
<div class="mx-auto size-12 mb-5">
<img alt="Michael Zhang" class="rounded-full" src="/images/users/user-2.jpg"/>
</div>
<span class="text-warning mb-5 block">
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
</span>
<h4 class="mb-2.5 text-md">Great value for money</h4>
<p class="text-default-400 mb-5 italic text-sm">"Sturdy build and long battery life. Would
                                definitely recommend it to friends!"</p>
</div>
</div>
<div class="card border-light rounded-xl p-5 h-full">
<div class="card-body pb-0 text-center">
<div class="mx-auto size-12 mb-5">
<img alt="Sara Lopez" class="rounded-full" src="/images/users/user-3.jpg"/>
</div>
<span class="text-warning mb-5 block">
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
<span class="iconify tabler--star-filled"></span>
</span>
<h4 class="mb-2.5 text-md">Top-notch customer service</h4>
<p class="text-default-400 mb-5 italic text-sm">"The team helped me with my issue right
                                away. Smooth experience overall!"</p>
</div>
</div>
</div>
<div class="lg:w-3/4 mx-auto mt-15">
<div class="flex gap-12 flex-wrap justify-center pt-7.5">
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/01.svg"/>
</a>
</div>
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/02.svg"/>
</a>
</div>
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/03.svg"/>
</a>
</div>
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/04.svg"/>
</a>
</div>
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/05.svg"/>
</a>
</div>
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/06.svg"/>
</a>
</div>
<div>
<a class="block" href="#!">
<img alt="logo" class="h-10.5" src="/images/clients/07.svg"/>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Blog -->
<section class="lg:py-26 py-12 bg-light/30 border-t border-b border-default-300" id="blog">
<div class="container">
<div class="text-center">
<span class="text-default-400 rounded-xl inline-block">📝 Insights &amp; Resources</span>
<h2 class="mt-5 font-bold md:text-2xl text-xl mb-15">Explore Our <mark class="italic bg-warning/20 text-default-800">Latest</mark> Articles and Updates</h2>
</div>
<div class="grid xl:grid-cols-3 grid-cols-1 gap-7.5">
<article class="card rounded-md border-0 shadow-sm">
<!-- Badge -->
<div class="badge text-white bg-dark badge-label absolute top-0 inset-s-0 m-5">Technology</div>
<!-- Card image -->
<img alt="Tech Innovations" class="card-img-top rounded-t-md" src="/images/blog/blog-4.jpg"/>
<!-- Card Body -->
<div class="card-body">
<!-- Title -->
<h6 class="card-title text-base mb-2.5">
<a class="hover:text-primary" href="#!">The Future of Artificial Intelligence</a>
</h6>
<p class="mb-5 text-default-400">Discover how AI is transforming industries and what the
                                future holds for this cutting-edge technology.</p>
<p class="flex flex-wrap gap-5 text-default-400 mb-0 mt-5 items-center fs-base">
<span><i class="iconify tabler--calendar"></i> Jan 12, 2025</span>
<span><i class="iconify tabler--message-circle"></i> <a class="hover:text-primary" href="#!">89</a></span>
<span><i class="iconify tabler--eye"></i> 1,284</span>
</p>
</div>
<!-- Card footer -->
<div class="card-footer bg-transparent flex justify-between border-0">
<div class="flex justify-start items-center gap-2.5">
<div class="size-6">
<img alt="avatar-4" class="rounded-full" src="/images/users/user-4.jpg"/>
</div>
<div>
<h5 class="text-nowrap text-sm">
<a class="hover:text-primary" href="#!">Michael Turner</a>
</h5>
</div>
</div>
<a class="text-primary font-semibold hover:text-primary-hover" href="#!">Read more <i class="iconify tabler--arrow-right"></i></a>
</div>
</article>
<article class="card rounded-md border-0 shadow-sm">
<!-- Badge -->
<div class="badge text-white bg-dark badge-label absolute top-0 inset-s-0 m-5">Data Science
                        </div>
<!-- Card image -->
<img alt="Data Science Trends" class="card-img-top rounded-t-md" src="/images/blog/blog-5.jpg"/>
<!-- Card Body -->
<div class="card-body">
<!-- Title -->
<h6 class="card-title text-base mb-2.5">
<a class="hover:text-primary" href="#!">Top Data Science Trends in 2025</a>
</h6>
<p class="mb-5 text-default-400">Get ahead in the data science field with the latest trends,
                                technologies, and tools that are reshaping the industry.</p>
<p class="flex flex-wrap gap-5 text-default-400 mb-0 mt-5 items-center fs-base">
<span><i class="iconify tabler--calendar"></i> Jan 12, 2025</span>
<span><i class="iconify tabler--message-circle"></i> <a class="hover:text-primary" href="#!">89</a></span>
<span><i class="iconify tabler--eye"></i> 1,284</span>
</p>
</div>
<!-- Card footer -->
<div class="card-footer bg-transparent flex justify-between border-0">
<div class="flex justify-start items-center gap-2.5">
<div class="size-6">
<img alt="avatar-1" class="rounded-full" src="/images/users/user-1.jpg"/>
</div>
<div>
<h5 class="text-nowrap text-sm">
<a class="hover:text-primary" href="#!">Olivia Brown</a>
</h5>
</div>
</div>
<a class="text-primary font-semibold hover:text-primary-hover" href="#!">Read more <i class="iconify tabler--arrow-right"></i></a>
</div>
</article>
<article class="card rounded-md border-0 shadow-sm">
<!-- Badge -->
<div class="badge text-white bg-dark badge-label absolute top-0 inset-s-0 m-5">Business</div>
<!-- Card image -->
<img alt="Entrepreneur Tips" class="card-img-top rounded-t-md" src="/images/blog/blog-3.jpg"/>
<!-- Card Body -->
<div class="card-body">
<!-- Title -->
<h6 class="card-title text-base mb-2.5">
<a class="hover:text-primary" href="#!">5 Key Tips for New Entrepreneurs</a>
</h6>
<p class="mb-5 text-default-400">Start your entrepreneurial journey with these 5 essential
                                tips that will guide you through the first year of business.</p>
<p class="flex flex-wrap gap-5 text-default-400 mb-0 mt-5 items-center fs-base">
<span><i class="iconify tabler--calendar"></i> Jan 12, 2025</span>
<span><i class="iconify tabler--message-circle"></i> <a class="hover:text-primary" href="#!">89</a></span>
<span><i class="iconify tabler--eye"></i> 1,284</span>
</p>
</div>
<!-- Card footer -->
<div class="card-footer bg-transparent flex justify-between border-0">
<div class="flex justify-start items-center gap-2.5">
<div class="size-6">
<img alt="avatar-7" class="rounded-full" src="/images/users/user-7.jpg"/>
</div>
<div>
<h5 class="text-nowrap text-sm">
<a class="hover:text-primary" href="#!">David Clark</a>
</h5>
</div>
</div>
<a class="text-primary font-semibold hover:text-primary-hover" href="#!">Read more <i class="iconify tabler--arrow-right"></i></a>
</div>
</article>
</div>
</div>
</section>
<!-- Contact -->
<section class="lg:py-26 py-12" id="contact">
<div class="container">
<div class="text-center">
<span class="text-default-400 rounded-xl inline-block">📞 We're Here to Help</span>
<h2 class="mt-5 font-bold md:text-2xl text-xl mb-15">Get in Touch with <mark class="italic bg-warning/20 text-default-800">Our Team</mark></h2>
</div>
<div class="grid xl:grid-cols-3 grid-cols-1 gap-base">
<div class="col-span-1">
<div class="p-7.5">
<div class="flex gap-5 mb-15">
<div class="shrink-0">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary/15 text-secondary">
<i class="iconify tabler--phone-call text-2xl"></i>
</span>
</div>
<div>
<span class="text-default-400">Contact Numbers</span>
<h5 class="my-2.5">+1 (800) 123-4567</h5>
<h5>+1 (415) 987-6543</h5>
</div>
</div>
<div class="flex gap-5 mb-15">
<div class="shrink-0">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary/15 text-secondary">
<i class="iconify tabler--mail text-2xl"></i>
</span>
</div>
<div>
<span class="text-default-400">Email</span>
<h5 class="my-2.5">support@yourcompany.com</h5>
<h5>info@yourcompany.com</h5>
</div>
</div>
<div class="flex gap-5">
<div class="shrink-0">
<span class="size-12 flex justify-center items-center rounded-full bg-secondary/15 text-secondary">
<i class="iconify tabler--map-pin text-2xl"></i>
</span>
</div>
<div>
<span class="text-default-400">Address</span>
<h5 class="my-1.25">INSPINIA HQ, 123 Market Street, 5th Floor, Financial District,
                                        San Francisco, CA 94103, United States</h5>
</div>
</div>
</div>
</div>
<div class="xl:col-span-2">
<form class="p-7.5 border border-default-300 rounded-xl border-dashed">
<div class="grid md:grid-cols-2 grid-cols-1 gap-base">
<div class="col-span-1">
<label class="form-label" for="name">Full Name</label>
<input autocomplete="name" class="form-input bg-transparent! py-2.5" id="name" placeholder="Enter your full name" type="text"/>
</div>
<div class="col-span-1">
<label class="form-label" for="email">Email Address</label>
<input autocomplete="email" class="form-input bg-transparent! py-2.5" id="email" placeholder="Enter your email" type="email"/>
</div>
<div class="md:col-span-2">
<label class="form-label" for="subject">Subject</label>
<input class="form-input bg-transparent! py-2.5" id="subject" placeholder="What’s the reason for contact?" type="text"/>
</div>
<div class="md:col-span-2">
<label class="form-label" for="message">Message</label>
<textarea class="form-textarea bg-transparent! py-2.5" id="message" placeholder="Write your message here..." rows="5"></textarea>
</div>
<div class="md:col-span-2 text-end">
<button class="btn bg-primary text-white rounded-full hover:bg-primary-hover" type="submit">Send
                                        Message</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="lg:pt-26 pt-12 pb-2.5 bg-[#1e1f27]">
<div class="container">
<div class="grid xl:grid-cols-12 grid-cols-1 gap-7.5">
<div class="xl:col-span-3">
<img alt="logo" class="h-7.5" src="/images/logo.png"/>
<p class="my-5 text-sm text-white/50">INSPINIA is the top-selling admin dashboard template on
                            WrapBootstrap, known for its sleek design, flexibility, and powerful features. Build modern
                            web applications with ease using the best in class!</p>
<div class="flex gap-2.5 mt-7.5 mb-2.5">
<a class="btn btn-sm btn-icon rounded-full bg-dark text-white" href="#!" title="Facebook">
<i class="iconify tabler--brand-facebook text-sm"></i>
</a>
<a class="btn btn-sm btn-icon rounded-full bg-dark text-white" href="#!" title="Twitter-x">
<i class="iconify tabler--brand-x text-sm"></i>
</a>
<a class="btn btn-sm btn-icon rounded-full bg-dark text-white" href="#!" title="Instagram">
<i class="iconify tabler--brand-instagram text-sm"></i>
</a>
<a class="btn btn-sm btn-icon rounded-full bg-dark text-white" href="#!" title="WhatsApp">
<i class="iconify tabler--brand-whatsapp text-sm"></i>
</a>
</div>
</div>
<div class="xl:col-span-9 lg:w-187.75 lg:ms-auto">
<div class="grid md:grid-cols-3 grid-cols-2 gap-7.5">
<div>
<h5 class="text-white mb-7.5 ps-2.5">Company</h5>
<ul class="flex flex-col">
<li class="py-2 px-4 text-white/50 pt-0"><a class="hover:text-white/80" href="#!">Our Story</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Leadership Team</a></li>
<li class="py-2 px-4 text-white/50">
<a class="hover:text-white/80" href="#!">Careers <span class="badge text-white bg-warning ms-2.5">We're Hiring</span></a>
</li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Press &amp;
                                            Media</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Investor Relations</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Sustainability</a></li>
</ul>
</div>
<div>
<h5 class="text-white mb-7.5 ps-2.5">Community</h5>
<ul class="flex flex-col">
<li class="py-2 px-4 text-white/50 pt-0"><a class="hover:text-white/80" href="#!">Community Forum</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Events
                                            &amp; Meetups</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Ambassadors</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Customer Stories</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Open
                                            Source</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Code of
                                            Conduct</a></li>
</ul>
</div>
<div>
<h5 class="text-white mb-7.5 ps-2.5">Admin</h5>
<ul class="flex flex-col">
<li class="py-2 px-4 text-white/50 pt-0"><a class="hover:text-white/80" href="#!">Dashboard</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">User
                                            Management</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Roles &amp;
                                            Permissions</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">System
                                            Logs</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">Settings</a></li>
<li class="py-2 px-4 text-white/50"><a class="hover:text-white/80" href="#!">API
                                            Access</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-15">
<div class="text-center">
<p class="mb-7.5 text-white/50">
                            © 2014 -
                            <span data-current-year=""></span>
                            Inspinia By <span class="fw-semibold">WebAppLayers</span>
</p>
</div>
</div>
</div>
</footer>
</div>

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