PageSourceSearch

https://wrappixel.com/templates/spike-react-tailwind-admin-template

html wrappixel.com collected 2026-10-02 10:51:34 UTC 443,731 bytes, 1,358 lines download raw bytes

1<!DOCTYPE html><html data-dpl-id="dpl_FMEn1zsBDZHBuHfoRyKiEBEYq5TG" lang="en" class="light"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/immutable/media/3c285486269019b7-s.p.1br53b7gww62p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/55605e321d2313ca-s.p.1sj8qnvyyatb6.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/5691580a0d2e7846-s.p.2gu9-nlpfm81k.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/8f46d218c8f79e34-s.p.092z1_2w2m55_.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/9d978ba009f47915-s.p.1p2xad7_-sbqy.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/immutable/media/a4f4f75ad654963f-s.p.22m3f6pvfu2zf.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/demos/demo-main.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/demos/demo-dark.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/demos/demo-horizontal.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/demos/demo-mini.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/demos/demo-rtl.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/demos/demo-firebase.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/frontpages/front-homepage.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/frontpages/front-aboutus.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/frontpages/front-contactus.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/frontpages/front-portfolio.webp"/><link rel="stylesheet" href="/_next/static/immutable/chunks/2775gr8bggl05.css" data-precedence="next"/><link rel="stylesheet" href="/_next/static/immutable/chunks/183whya9mwwoj.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/immutable/chunks/0_zdxx92zcn9k.js"/>
1<script src="/_next/static/immutable/chunks/3j0e2gcw7d1q5.js" async=""></script>
1<script src="/_next/static/immutable/chunks/29a-034_xx9ss.js" async=""></script>
1<script src="/_next/static/immutable/chunks/08z_dqh8kqhd7.js" async=""></script>
1<script src="/_next/static/immutable/chunks/turbopack-3y-hp9-2r6f7m.js" async=""></script>
1<script src="/_next/static/immutable/chunks/2jyo3n9b24cbl.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0gyl_cqc-q8uz.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0r-ly69tvb7i2.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/1idjy-xm-5o9o.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/1g94sy_awtp9p.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/05mvdn-d8v7vs.js" async="" crossorigin=""></script>
1<script src="/_next/static/immutable/chunks/0jn57h87c9wbq.js" async=""></script>
1<script src="/_next/static/immutable/chunks/2qm9pr9c_vza-.js" async=""></script>
1<script src="/_next/static/immutable/chunks/29mlhdfyhr6xg.js" async=""></script>
1<script src="/_next/static/immutable/chunks/18cp4nqu746j2.js" async=""></script>
1<script src="/_next/static/immutable/chunks/13sgxr5h0jhwf.js" async=""></script>
1<script src="/_next/static/immutable/chunks/3x1cz_ocbvu49.js" async=""></script>
1<script src="/_next/static/immutable/chunks/1chlu_1mzrmje.js" async=""></script>
1<script src="/_next/static/immutable/chunks/0jk6a5d1d0pz0.js" async=""></script>
1<script src="/_next/static/immutable/chunks/0w3wza_ti9t7u.js" async=""></script>
1<link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-7NTE0RJE6G" as="script"/><link rel="preload" href="https://code.iconify.design/3/3.1.1/iconify.min.js" as="script"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/frontpages/front-pricing.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/frontpages/front-blog.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-calendar.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-chat.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-contact.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-user-profile.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-blog.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-blog-detail.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-shop.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-product-detail.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-productlist.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-invoice.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-kanban.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/templates/pro/spike/apps/app-note.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/product-detail/trustpilot.webp"/><link rel="preload" as="image" href="https://images.wrappixel.com/product-detail/twitter.webp"/><meta name="next-size-adjust" content=""/><title>Spike React Tailwind Admin Template - WrapPixel</title><meta name="description" content="Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN &amp; Headless Ui."/><link rel="author" href="https://twitter.com/wrappixel"/><meta name="author" content="WrapPixel"/><link rel="canonical" href="https://wrappixel.com/templates/spike-react-tailwind-admin-template"/><meta property="og:title" content="Spike React Tailwind Admin Template - WrapPixel"/><meta property="og:description" content="Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN &amp; Headless Ui."/><meta property="og:url" content="https://wrappixel.com/templates/spike-react-tailwind-admin-template"/><meta property="og:image" content="https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Spike React Tailwind Admin Template"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="@wrappixel"/><meta name="twitter:title" content="Spike React Tailwind Admin Template - WrapPixel"/><meta name="twitter:description" content="Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN &amp; Headless Ui."/><meta name="twitter:image" content="https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp"/><link rel="icon" href="/favicon.ico?favicon.0rp8aga7fedco.ico" sizes="16x16" type="image/x-icon"/>
1<script src="/_next/static/immutable/chunks/0c0hxoamwjsbw.js" noModule=""></script>
1</head><body class="be_vietnam_pro_3438f11d-module__oKYJxa__className antialiased"><div hidden=""><!--$--><!--/$--></div><style>#nprogress{pointer-events:none}#nprogress .bar{background:#6743ea;position:fixed;z-index:1600;top: 0;left:0;width:100%;height:3px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #6743ea,0 0 5px #6743ea;opacity:1;-webkit-transform:rotate(3deg) translate(0px,-4px);-ms-transform:rotate(3deg) translate(0px,-4px);transform:rotate(3deg) translate(0px,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1600;top: 15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#6743ea;border-left-color:#6743ea;border-radius:50%;-webkit-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}</style><header class="w-full z-50 transition-all duration-500 py-3 px-4 bg-card border-b border-border/50 relative"><div class="container"><nav><div class="flex items-center justify-between"><div class="flex items-center gap-8"><a href="/"><img alt="WrapPixel Logo" loading="lazy" width="205" height="40" decoding="async" data-nimg="1" class="block dark:hidden w-[150px] sm:w-[155px] h-full" style="color:transparent" src="/images/logo/dark-logo.svg?dpl=dpl_FMEn1zsBDZHBuHfoRyKiEBEYq5TG"/><img alt="WrapPixel Logo" loading="lazy" width="205" height="40" decoding="async" data-nimg="1" class="hidden dark:block w-[150px] sm:w-[155px] h-full" style="color:transparent" src="/images/logo/white-logo.svg?dpl=dpl_FMEn1zsBDZHBuHfoRyKiEBEYq5TG"/></a><ul class="hidden xl:flex items-center"><li class="relative group px-1"><a class="flex items-center gap-1.5 py-2 px-3 rounded-md transition-all  text-foreground hover:bg-primary/5 hover:text-primary" href="/templates"><span class="text-base font-normal">Templates</span><span></span></a><div class="absolute top-full left-0 pt-4 transition-all duration-300 z-50 opacity-0 invisible lg:group-hover:opacity-100 lg:group-hover:visible translate-y-2 lg:group-hover:translate-y-0"><div class="bg-card border border-border shadow-xl p-6 rounded-3xl w-[1100px]"><div class="grid grid-cols-3 gap-3"><a href="/admin-dashboard-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Admin Dashboard Templates</div><p class="text-sm text-muted">Best Dashboard Templates</p></div></div></a><a href="/mui-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">MUI Templates</div><p class="text-sm text-muted">React Material Themes</p></div></div></a><a href="/bootstrap-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Bootstrap Templates</div><p class="text-sm text-muted">Best Bootstrap 5 Themes</p></div></div></a><a href="/vuetify-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-sky-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Vuetify Templates</div><p class="text-sm text-muted">Best Vuetify Templates</p></div></div></a><a href="/angular-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-rose-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Angular Templates</div><p class="text-sm text-muted">Top Angular Themes</p></div></div></a><a href="/nextjs-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">NextJs Templates</div><p class="text-sm text-muted">Download Nextjs Themes</p></div></div></a><a href="/react-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-cyan-400/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">React Templates</div><p class="text-sm text-muted">Download React Themes</p></div></div></a><a href="/nuxt-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-emerald-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Nuxt Templates</div><p class="text-sm text-muted">Best Nuxjs Themes</p></div></div></a><a href="/vue-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Vue Templates</div><p class="text-sm text-muted">Best Vuejs Templates</p></div></div></a><a href="/tailwind-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-sky-4
100/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Tailwind Templates</div><p class="text-sm text-muted">Best Tailwind Dashboard Templates</p></div></div></a><a href="/framer-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Framer Templates</div><p class="text-sm text-muted">Best Framer Templates</p></div></div></a><a href="/vercel-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Vercel Templates</div><p class="text-sm text-muted">Best Vercel Templates</p></div></div></a><a href="/astro-templates"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Astro Templates</div><p class="text-sm text-muted">Best Astro Templates</p></div></div></a><a href="/shadcn-dashboard"><div data-slot="card" class="bg-card text-card-foreground border group flex flex-row items-center gap-4 p-3 rounded-md transition shadow-none border-none cursor-pointer hover:bg-primary/5 hover:text-primary"><div class="flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-500/10"><span></span></div><div><div class="text-sm font-semibold text-card-foreground">Shadcn Dashboards</div><p class="text-sm text-muted">Best Shadcn Dashboard Templates</p></div></div></a></div></div></div></li><li class="relative group px-1"><a class="flex items-center gap-1.5 py-2 px-3 rounded-md transition-all  text-foreground hover:bg-primary/5 hover:text-primary" href="/free-templates"><span class="text-base font-normal">Freebies</span></a></li><li class="relative group px-1"><a class="flex items-center gap-1.5 py-2 px-3 rounded-md transition-all  text-foreground hover:bg-primary/5 hover:text-primary" href="/blog"><span class="text-base font-normal">Blog</span></a></li><li class="relative group px-1"><a class="flex items-center gap-1.5 py-2 px-3 rounded-md transition-all  text-foreground hover:bg-primary/5 hover:text-primary" href="/support"><span class="text-base font-normal">Support</span></a></li><li class="relative group px-1"><a class="flex items-center gap-1.5 py-2 px-3 rounded-md transition-all  text-foreground hover:bg-primary/5 hover:text-primary" href="/hire-us"><span class="text-base font-normal">Hire Us</span></a></li></ul></div><div class="flex items-center gap-3"><div class="hidden md:flex items-center gap-2"><button data-slot="button" data-variant="ghost" data-size="default" class="inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 !p-0 text-card-foreground hover:text-primary !h-8 !w-8 rounded-full hover:bg-primary/10 h-9 px-4 py-2 has-[&gt;svg]:px-3"><span></span><span class="sr-only">Search</span></button></div><div class="lg:flex hidden items-center gap-5"><span class="size-5 bg-gray-200 dark:bg-white/20 animate-ping rounded-full"></span></div><div class="items-center gap-5 hidden"><button data-slot="dialog-trigger" data-variant="default" data-size="lg" class="shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 hover:bg-primary/90 h-10 rounded-md px-6 has-[&gt;svg]:px-4 flex bg-white text-card-foreground border border-border hover:text-white" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_R_e6ivdb_" data-state="closed"><span></span>Login / Register</button></div><a target="_blank" class="shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-primary text-white hover:bg-primary/90 h-10 rounded-md px-6 has-[&gt;svg]:px-4 header-anim-button xl:flex hidden flex gap-2 rounded" data-slot="button" data-variant="default" data-size="lg" href="/all-access-pass"><span></span>All Access Pass</a><button data-slot="sheet-trigger" data-variant="ghost" data-size="default" class="inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 !p-0 text-card-foreground hover:text-primary !h-8 !w-8 rounded-full hover:bg-primary/10 h-9 px-4 py-2 has-[&gt;svg]:px-3 xl:hidden" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-_R_q6ivdb_" data-state="closed"><span></span><span class="sr-only">Toggle Menu</span></button></div></div></nav></div></header><main class="bg-card"><div class="bg-card">
1<script id="schema-product" type="application/ld+json">{"@context":"https://schema.org","@type":"Product","name":"Spike React Tailwind Admin Template","image":["https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp"],"description":"Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN & Headless Ui.","brand":{"@type":"Brand","@id":"https://wrappixel.com/#organization","name":"WrapPixel"},"sku":"WP-1109321","offers":{"@type":"Offer","url":"https://wrappixel.com/templates/spike-react-tailwind-admin-template","priceCurrency":"USD","price":59,"availability":"https://schema.org/InStock"},"datePublished":"2025-06-10T13:52:40.844Z","dateModified":"2026-05-31T18:30:00.000Z"}</script>
1<script id="schema-breadcrumb" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://wrappixel.com"},{"@type":"ListItem","position":2,"name":"Templates","item":"https://wrappixel.com/templates"},{"@type":"ListItem","position":3,"name":"Spike React Tailwind Admin Template","item":"https://wrappixel.com/templates/spike-react-tailwind-admin-template"}]}</script>
1<section><div class="fixed top-0 left-0 right-0 z-100 bg-white/95 backdrop-blur-md border-b border-border shadow-sm py-4 transition-all duration-500 ease-in-out transform -translate-y-full opacity-0 pointer-events-none"><div class="container mx-auto px-4 flex items-center justify-between xl:px-0"><div class="flex items-center gap-3 sm:gap-4"><a class="w-12 overflow-hidden" href="/"><img alt="logo" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="max-w-none" style="color:transparent" src="/images/logo/white-logo.svg?dpl=dpl_FMEn1zsBDZHBuHfoRyKiEBEYq5TG"/></a><p class="text-base sm:text-lg font-bold text-card-foreground truncate max-w-[120px] sm:max-w-xs md:max-w-md lg:max-w-lg">Spike React Tailwind Admin Template</p></div><div class="flex items-center gap-1"><a data-slot="button" data-variant="outlineprimary" data-size="default" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md whitespace-nowrap outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border bg-transparent text-primary hover:bg-primary hover:text-white py-2 has-[&gt;svg]:px-3 h-10 px-3 sm:px-6 text-sm font-semibold border-primary/20 hover:border-primary transition-colors" href="#product-demo-section"><span></span><span class="sm:inline hidden">Live Preview</span></a><a data-slot="button" data-variant="default" data-size="default" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-primary text-white hover:bg-primary/90 py-2 has-[&gt;svg]:px-3 h-10 px-4 sm:px-8 shadow-btn text-sm font-semibold" href="#pricing-section"><span></span><span class="sm:inline hidden">Buy Now</span></a><a target="_blank" data-slot="button" data-variant="dark" data-size="default" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-card-foreground text-white hover:bg-dark px-4 py-2 has-[&gt;svg]:px-3 h-10" href="https://wrappixel.github.io/premium-documentation-wp/react/spike/index.html">Doc</a></div></div></div><div class="container mx-auto xl:px-0 px-4"><div class="flex md:flex-row flex-col justify-between lg:gap-6 gap-4 lg:py-10 py-6"><h1 class="text-2xl text-dark dark:text-white font-bold">Spike React Tailwind Admin Template</h1><div class="flex gap-4 items-center"><p class="text-sm text-dark dark:text-white capitalize">need customization?</p><a target="_blank" data-slot="button" data-variant="outlineprimary" data-size="default" class="inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border bg-transparent border-primary text-primary hover:bg-primary hover:text-white hover:border-primary h-9 px-4 py-2 has-[&gt;svg]:px-3" href="/hire-us"> Hire Us</a></div></div><div class="grid grid-cols-12 gap-7"><div class="xl:col-span-8 col-span-12"><img alt="product-img-duplicate" loading="lazy" width="1000" height="800" decoding="async" data-nimg="1" class="w-full h-full rounded" style="color:transparent" src="https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp"/></div><div class="xl:col-span-4 col-span-12"><div class="border border-border py-7 rounded"><div class="px-6 flex flex-col gap-2"><div class="flex gap-3 items-center justify-between pb-2"><div class="flex gap-3 items-center"><span></span><div class=""><p class="text-xl font-semibold text-card-foreground">74</p><p class="text-sm text-muted">Sales</p></div></div><p class="text-sm text-muted">No reviews yet</p></div><div class="flex gap-2 "><a data-slot="button" data-variant="dark" data-size="lg" class="inline-flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
1size-&#x27;])]:size-4 bg-card-foreground text-white hover:bg-dark h-10 rounded-md px-6 has-[&gt;svg]:px-4 flex-1 py-5.5 border border-card-foreground" href="#product-demo-section">Live Preview</a><a target="_blank" data-slot="button" data-variant="outlinedark" data-size="lg" class="items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border bg-transparent border-card-foreground text-card-foreground hover:bg-card-foreground hover:text-white h-10 rounded-md px-6 has-[&gt;svg]:px-4 flex py-5.5 flex-1" href="https://wrappixel.github.io/premium-documentation-wp/react/spike/index.html">Documentation</a></div><div class="flex items-center gap-2"><a data-slot="button" data-variant="default" data-size="default" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-primary text-white hover:bg-primary/90 h-9 px-4 has-[&gt;svg]:px-3 py-3.5 flex-1 w-full min-h-11" href="#pricing-section">Purchase Now</a></div><div class="text-muted text-sm font-semibold flex items-center gap-3 justify-center pt-3 pb-5"><span></span>Quality Guaranteed</div></div><div data-orientation="horizontal" role="none" data-slot="separator" class="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"></div><div class="px-6 pt-6 space-y-4"><div class="flex gap-2 items-center"><div class="text-card-foreground text-sm  flex items-center gap-2 justify-center"><span></span>Updated:</div><span class="text-muted text-sm">31 May 2026</span></div><div class="flex gap-2 items-center"><div class="text-card-foreground text-sm  flex items-center gap-2 justify-center"><span></span>Created:</div><span class="text-muted text-sm">10 Jun 2025</span></div><div class="flex gap-2 items-center"><div class="text-card-foreground text-sm  flex items-center gap-2 justify-center"><span></span>Well Documented</div></div><div class="flex gap-2 items-center"><div class="text-card-foreground text-sm  flex items-center gap-2 justify-center"><span></span>1 year support &amp; Updates</div></div><div class="flex gap-2 items-center"><div class="text-card-foreground text-sm  flex items-center gap-2 justify-center"><span></span>Version:</div><span class="text-muted text-sm flex gap-1">v<!-- -->2.0.0<!-- --> - Check<!-- --> <a href="#changelog"><p class="text-sm text-primary">Changelog</p></a></span></div></div></div></div></div></div></section><section class="xl:px-0 px-4"><div><section>
2  <div class="prose">
3    <div class="py-8 md:py-14">
4      <div class="container">
5        <div class="scrollbar-hide">
6          <div class="xs:grid-cols-2 border-border grid grid-cols-1 rounded-md border sm:grid-cols-3 lg:grid-cols-6">
7            <div class="border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5">
8              <span class="iconify w-35 text-3xl" data-icon="vscode-icons:file-type-reactjs"></span>
9              <div>
10                <p class="text-dark text-base font-medium">v19.2.6</p>
11                <p class="text-muted text-sm">React</p>
12              </div>
13            </div>
14            <div class="border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5">
15              <span class="iconify w-35 text-3xl" data-icon="vscode-icons:file-type-tailwind"></span>
16              <div>
17                <p class="text-dark text-base font-medium">v4.3.0</p>
18                <p class="text-muted text-sm">Tailwind</p>
19              </div>
20            </div>
21            <div class="border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5">
22              <span class="iconify w-35 text-3xl" data-icon="cryptocurrency-color:apex"></span>
23              <div>
24                <p class="text-dark text-base font-medium">v5.13.0</p>
25                <p class="text-muted text-sm">Apexcharts</p>
26              </div>
27            </div>
28            <div class="border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5">
29              <span class="iconify w-35 text-3xl" data-icon="simple-icons:shadcnui"></span>
30
31              <div>
32                <p class="text-dark text-base font-medium">latest</p>
33                <p class="text-muted text-sm">Shadcn</p>
34              </div>
35            </div>
36
37            <div class="border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5">
38              <span class="iconify w-35 text-3xl" data-icon="devicon:firebase"></span>
39              <div>
40                <p class="text-dark text-base font-medium">v11.0.2</p>
41                <p class="text-muted text-sm">Firebase</p>
42              </div>
43            </div>
44
45            <div class="flex items-center justify-start gap-4 px-5 py-3 lg:justify-center lg:py-5">
46              <span class="iconify w-35 text-3xl" data-icon="simple-icons:swr"></span>
47              <div>
48                <p class="text-dark text-base font-medium">v2.2.5</p>
49                <p class="text-muted text-sm">SWR</p>
50              </div>
51            </div>
52          </div>
53        </div>
54      </div>
55    </div>
56  </div>
57</section></div></section><section id="product-demo-section" class="xl:px-0 px-4"><div><section>
58  <div class="prose">
59    <div class="py-8 md:py-14">
60      <div class="container mx-auto">
61        <div class="flex flex-col gap-8 sm:gap-12">
62          <!-- -->
63          <div class="max-w-3xl">
64            <p class="text-sm text-muted">What’s included?</p>
65            <h2 class="text-2xl text-dark">
66              Spike React Tailwind Admin includes 6 fully-featured and highly
67              customizable demo variations
68            </h2>
69          </div>
70
71          <!-- -->
72          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8">
73            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded group-hover">
74              <div class="rounded relative overflow-hidden group/overlay">
75                <img src="https://images.wrappixel.com/templates/pro/spike/demos/demo-main.webp" alt="Main Version" class="w-full h-full rounded"/>
76                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
77                  <a href="https://spike-react-tailwind-main.netlify.app/" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
78                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
79
80                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
81  bg-dark text-white text-xs px-3 py-2 rounded 
82  opacity-0 group-hover:opacity-100 transition-all duration-200 
83  pointer-events-none z-50">
84                      Live Preview
85
86                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
87                    </span>
88                  </a>
89                </div>
90              </div>
91
92              <div class="flex items-center justify-between">
93                <p class="text-base sm:text-lg text-dark font-semibold">
94                  Main Demo Version
95                </p>
96
97                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
98                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
99                    Preview
100                  </span>
101                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
102                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
103                  </span>
104                </a>
105              </div>
106            </div>
107
108            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
109              <div class="rounded relative overflow-hidden group/overlay">
110                <img src="https://images.wrappixel.com/templates/pro/spike/demos/demo-dark.webp" alt="Dark Version" class="w-full h-full rounded"/>
111                 <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
112                  <a href="https://spike-react-tailwind-dark.netlify.app/dashboards/dashboard2" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
113                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
114
115                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
116  bg-dark text-white text-xs px-3 py-2 rounded 
117  opacity-0 group-hover:opacity-100 transition-all duration-200 
118  pointer-events-none z-50">
119                      Live Preview
120
121                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
122                    </span>
123                  </a>
124                </div>
125              </div>
126
127              <div class="flex items-center justify-between">
128                <p class="text-base sm:text-lg text-dark font-semibold">
129                  Dark Demo Version
130                </p>
131
132                <a target="_blank" href="https://spike-react-tailwind-dark.netlify.app/dashboards/dashboard2" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
133                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
134                    Preview
135                  </span>
136                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
137                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
138                  </span>
139                </a>
140              </div>
141            </div>
142
143            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
144              <div class="rounded relative overflow-hidden group/overlay">
145                <img src="https://images.wrappixel.com/templates/pro/spike/demos/demo-horizontal.webp" alt="Horizontal Version" class="w-full h-full rounded"/>
146                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
147                  <a href="https://spike-react-tailwind-horizontal.netlify.app/" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
148                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
149
150                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
151  bg-dark text-white text-xs px-3 py-2 rounded 
152  opacity-0 group-hover:opacity-100 transition-all duration-200 
153  pointer-events-none z-50">
154                      Live Preview
155
156                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
157                    </span>
158                  </a>
159                </div>
160              </div>
161
162              <div class="flex items-center justify-between">
163                <p class="text-base sm:text-lg text-dark font-semibold">
164                  Horizontal Demo Version
165                </p>
166
167                <a target="_blank" href="https://spike-react-tailwind-horizontal.netlify.app/" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
168                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
169                    Preview
170                  </span>
171                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
172                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
173                  </span>
174                </a>
175              </div>
176            </div>
177
178            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
179              <div class="rounded relative overflow-hidden group/overlay">
180                <img src="https://images.wrappixel.com/templates/pro/spike/demos/demo-mini.webp" alt="Minisidebar Demo Version" class="w-full h-full rounded"/>
181                 <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
182                  <a href="https://spike-react-tailwind-minisidebar.netlify.app/" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
183                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
184
185                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
186  bg-dark text-white text-xs px-3 py-2 rounded 
187  opacity-0 group-hover:opacity-100 transition-all duration-200 
188  pointer-events-none z-50">
189                      Live Preview
190
191                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
192                    </span>
193                  </a>
194                </div>
195              </div>
196
197              <div class="flex items-center justify-between">
198                <p class="text-base sm:text-lg text-dark font-semibold">
199                  Minisidebar Demo Version
200                </p>
201
202                <a target="_blank" href="https://spike-react-tailwind-minisidebar.netlify.app/" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
203                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
204                    Preview
205                  </span>
206                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
207                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
208                  </span>
209                </a>
210              </div>
211            </div>
212
213            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
214              <div class="rounded relative overflow-hidden group/overlay">
215                <img src="https://images.wrappixel.com/templates/pro/spike/demos/demo-rtl.webp" alt="RTL Demo Version" class="w-full h-full rounded"/>
216                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
217                  <a href="https://spike-react-tailwind-rtl.netlify.app/dashboards/dashboard2" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
218                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
219
220                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
221  bg-dark text-white text-xs px-3 py-2 rounded 
222  opacity-0 group-hover:opacity-100 transition-all duration-200 
223  pointer-events-none z-50">
224                      Live Preview
225
226                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
227                    </span>
228                  </a>
229                </div>
230              </div>
231
232              <div class="flex items-center justify-between">
233                <p class="text-base sm:text-lg text-dark font-semibold">
234                  RTL Demo Version
235                </p>
236
237                <a target="_blank" href="https://spike-react-tailwind-rtl.netlify.app/dashboards/dashboard2" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
238                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
239                    Preview
240                  </span>
241                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
242                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
243                  </span>
244                </a>
245              </div>
246            </div>
247
248            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
249              <div class="rounded relative overflow-hidden group/overlay">
250                <img src="https://images.wrappixel.com/templates/pro/spike/demos/demo-firebase.webp" alt="Firebase Demo Version" class="w-full h-full rounded"/>
251                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
252                  <a href="https://spike-react-tailwind-firebase.netlify.app/" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
253                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
254
255                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
256  bg-dark text-white text-xs px-3 py-2 rounded 
257  opacity-0 group-hover:opacity-100 transition-all duration-200 
258  pointer-events-none z-50">
259                      Live Preview
260
261                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
262                    </span>
263                  </a>
264                </div>
265              </div>
266
267              <div class="flex items-center justify-between">
268                <p class="text-base sm:text-lg text-dark font-semibold">
269                  Firebase Demo Version
270                </p>
271
272                <a target="_blank" href="https://spike-react-tailwind-firebase.netlify.app/" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
273                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
274                    Preview
275                  </span>
276                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
277                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
278                  </span>
279                </a>
280              </div>
281            </div>
282          </div>
283        </div>
284      </div>
285    </div>
286  </div>
287</section>
288</div></section><section id="appdemo" class="xl:px-0 px-4"><div><section>
289  <div class="prose">
290    <div class="py-8 md:py-14">
291      <div class="container mx-auto">
292        <div class="flex flex-col gap-8 sm:gap-12">
293          <!-- -->
294          <div class="max-w-3xl">
295            <h2 class="text-2xl text-dark">
296             5+ Frontend Pages Added
297            </h2>
298          </div>
299
300          <!-- -->
301          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8">
302            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
303              <div class="rounded relative overflow-hidden group/overlay">
304                <img src="https://images.wrappixel.com/templates/pro/spike/frontpages/front-homepage.webp" alt="fontpages" class="w-full h-full rounded"/>
305                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
306                  <a href="https://spike-react-tailwind-main.netlify.app/frontend-pages/homepage" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
307                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
308
309                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
310  bg-dark text-white text-xs px-3 py-2 rounded 
311  opacity-0 group-hover:opacity-100 transition-all duration-200 
312  pointer-events-none z-50">
313                      Live Preview
314
315                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
316                    </span>
317                  </a>
318                </div>
319              </div>
320
321              <div class="flex items-center justify-between">
322                <p class="text-base sm:text-lg text-dark font-semibold">
323                  Homepage
324                </p>
325
326                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/frontend-pages/homepage" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
327                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
328                    Preview
329                  </span>
330                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
331                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
332                  </span>
333                </a>
334              </div>
335            </div>
336
337            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
338              <div class="rounded relative overflow-hidden group/overlay">
339                <img src="https://images.wrappixel.com/templates/pro/spike/frontpages/front-aboutus.webp" alt="fontpages" class="w-full h-full rounded"/>
340                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
341                  <a href="https://spike-react-tailwind-main.netlify.app/frontend-pages/aboutus" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
342                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
343
344                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
345  bg-dark text-white text-xs px-3 py-2 rounded 
346  opacity-0 group-hover:opacity-100 transition-all duration-200 
347  pointer-events-none z-50">
348                      Live Preview
349
350                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
351                    </span>
352                  </a>
353                </div>
354              </div>
355
356              <div class="flex items-center justify-between">
357                <p class="text-base sm:text-lg text-dark font-semibold">
358                  About us
359                </p>
360
361                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/frontend-pages/aboutus" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
362                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
363                    Preview
364                  </span>
365                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
366                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
367                  </span>
368                </a>
369              </div>
370            </div>
371
372            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
373              <div class="rounded relative overflow-hidden group/overlay">
374                <img src="https://images.wrappixel.com/templates/pro/spike/frontpages/front-contactus.webp" alt="fontpages" class="w-full h-full rounded"/>
375                 <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
376                  <a href="https://spike-react-tailwind-main.netlify.app/frontend-pages/contact" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
377                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
378
379                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
380  bg-dark text-white text-xs px-3 py-2 rounded 
381  opacity-0 group-hover:opacity-100 transition-all duration-200 
382  pointer-events-none z-50">
383                      Live Preview
384
385                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
386                    </span>
387                  </a>
388                </div>
389              </div>
390
391              <div class="flex items-center justify-between">
392                <p class="text-base sm:text-lg text-dark font-semibold">
393                  Contact Us
394                </p>
395
396                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/frontend-pages/contact" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
397                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
398                    Preview
399                  </span>
400                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
401                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
402                  </span>
403                </a>
404              </div>
405            </div>
406
407            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
408              <div class="rounded relative overflow-hidden group/overlay">
409                <img src="https://images.wrappixel.com/templates/pro/spike/frontpages/front-portfolio.webp" alt="fontpages" class="w-full h-full rounded"/>
410                        <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
411                  <a href="https://spike-react-tailwind-main.netlify.app/frontend-pages/portfolio" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
412                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
413
414                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
415  bg-dark text-white text-xs px-3 py-2 rounded 
416  opacity-0 group-hover:opacity-100 transition-all duration-200 
417  pointer-events-none z-50">
418                      Live Preview
419
420                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
421                    </span>
422                  </a>
423                </div>
424              </div>
425
426              <div class="flex items-center justify-between">
427                <p class="text-base sm:text-lg text-dark font-semibold">
428                 Portfolio
429                </p>
430
431                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/frontend-pages/portfolio" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
432                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
433                    Preview
434                  </span>
435                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
436                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
437                  </span>
438                </a>
439              </div>
440            </div>
441
442            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
443              <div class="rounded relative overflow-hidden group/overlay">
444                <img src="https://images.wrappixel.com/templates/pro/spike/frontpages/front-pricing.
444webp" alt="fontpages" class="w-full h-full rounded"/>
445                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
446                  <a href="https://spike-react-tailwind-main.netlify.app/frontend-pages/pricing" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
447                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
448
449                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
450  bg-dark text-white text-xs px-3 py-2 rounded 
451  opacity-0 group-hover:opacity-100 transition-all duration-200 
452  pointer-events-none z-50">
453                      Live Preview
454
455                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
456                    </span>
457                  </a>
458                </div>
459              </div>
460
461              <div class="flex items-center justify-between">
462                <p class="text-base sm:text-lg text-dark font-semibold">
463                  Pricing
464                </p>
465
466                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/frontend-pages/pricing" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
467                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
468                    Preview
469                  </span>
470                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
471                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
472                  </span>
473                </a>
474              </div>
475            </div>
476
477            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
478              <div class="rounded relative overflow-hidden group/overlay">
479                <img src="https://images.wrappixel.com/templates/pro/spike/frontpages/front-blog.webp" alt="Firebase Demo Version" class="w-full h-full rounded"/>
480                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
481                  <a href="https://spike-react-tailwind-main.netlify.app/frontend-pages/blog" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
482                    <span class="iconify size-6 text-white" data-icon="solar:laptop-minimalistic-outline"></span>
483
484                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
485  bg-dark text-white text-xs px-3 py-2 rounded 
486  opacity-0 group-hover:opacity-100 transition-all duration-200 
487  pointer-events-none z-50">
488                      Live Preview
489
490                      <span class="iconify size-4 text-dark absolute btm-10 left-40" data-icon="solar:alt-arrow-down-bold"></span>
491                    </span>
492                  </a>
493                </div>
494              </div>
495
496              <div class="flex items-center justify-between">
497                <p class="text-base sm:text-lg text-dark font-semibold">
498                 Blog
499                </p>
500
501                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/frontend-pages/blog" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
502                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
503                    Preview
504                  </span>
505                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
506                    <span class="iconify text-lg" data-icon="solar:arrow-right-up-linear"></span>
507                  </span>
508                </a>
509              </div>
510            </div>
511          </div>
512        </div>
513      </div>
514    </div>
515  </div>
516</section>
517</div></section><section id="appdemo" class="xl:px-0 px-4"><div><section id="appsdemos">
518  <div class="prose">
519    <div class="py-8 md:py-14">
520      <div class="container mx-auto">
521        <div class="flex flex-col gap-8 sm:gap-12">
522          
523          <div class="max-w-3xl">
524            <p class="text-sm text-muted">What’s included?</p>
525            <h2 class="text-2xl text-dark">
526              The package includes over 12 stunning and user-friendly
527              application designs
528            </h2>
529          </div>
530
531          
532          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8">
533            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
534              <div class="rounded relative overflow-hidden group/overlay">
535                <img alt="Calendar App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-calendar.webp"/>
536                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
537                  <a href="https://spike-react-tailwind-main.netlify.app/apps/calendar" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
538                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
539
540                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
541  bg-dark text-white text-xs px-3 py-2 rounded 
542  opacity-0 group-hover:opacity-100 transition-all duration-200 
543  pointer-events-none z-50">
544                      Live Preview
545
546                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
547                    </span>
548                  </a>
549                </div>
550              </div>
551
552              <div class="flex items-center justify-between">
553                <p class="text-base sm:text-lg text-dark font-semibold">
554                  Calendar App
555                </p>
556
557                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/calendar" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
558                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
559                    Preview
560                  </span>
561                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
562                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
563                  </span>
564                </a>
565              </div>
566            </div>
567
568            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
569              <div class="rounded relative overflow-hidden group/overlay">
570                <img alt="Chat App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-chat.webp"/>
571                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
572                  <a href="https://spike-react-tailwind-main.netlify.app/apps/chats" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
573                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
574
575                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
576  bg-dark text-white text-xs px-3 py-2 rounded 
577  opacity-0 group-hover:opacity-100 transition-all duration-200 
578  pointer-events-none z-50">
579                      Live Preview
580
581                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
582                    </span>
583                  </a>
584                </div>
585              </div>
586
587              <div class="flex items-center justify-between">
588                <p class="text-base sm:text-lg text-dark font-semibold">
589                  Chat App
590                </p>
591
592                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/chats" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
593                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
594                    Preview
595                  </span>
596                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
597                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
598                  </span>
599                </a>
600              </div>
601            </div>
602
603            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
604              <div class="rounded relative overflow-hidden group/overlay">
605                <img alt="Contact App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-contact.webp"/>
606                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
607                  <a href="https://spike-react-tailwind-main.netlify.app/apps/contacts" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
608                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
609
610                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
611  bg-dark text-white text-xs px-3 py-2 rounded 
612  opacity-0 group-hover:opacity-100 transition-all duration-200 
613  pointer-events-none z-50">
614                      Live Preview
615
616                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
617                    </span>
618                  </a>
619                </div>
620              </div>
621
622              <div class="flex items-center justify-between">
623                <p class="text-base sm:text-lg text-dark font-semibold">
624                  Contact App
625                </p>
626
627                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/contacts" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
628                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
629                    Preview
630                  </span>
631                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
632                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
633                  </span>
634                </a>
635              </div>
636            </div>
637
638            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
639              <div class="rounded relative overflow-hidden group/overlay">
640                <img alt="User Profile App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-user-profile.webp"/>
641                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
642                  <a href="https://spike-react-tailwind-main.netlify.app/apps/user-profile/profiletwo" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
643                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
644
645                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
646  bg-dark text-white text-xs px-3 py-2 rounded 
647  opacity-0 group-hover:opacity-100 transition-all duration-200 
648  pointer-events-none z-50">
649                      Live Preview
650
651                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
652                    </span>
653                  </a>
654                </div>
655              </div>
656
657              <div class="flex items-center justify-between">
658                <p class="text-base sm:text-lg text-dark font-semibold">
659                  User Profile App
660                </p>
661
662                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/user-profile/profiletwo" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
663                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
664                    Preview
665                  </span>
666                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
667                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
668                  </span>
669                </a>
670              </div>
671            </div>
672
673            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
674              <div class="rounded relative overflow-hidden group/overlay">
675                <img alt="Blog App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-blog.webp"/>
676                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
677                  <a href="https://spike-react-tailwind-main.netlify.app/apps/blog/post" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
678                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
679
680                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
681  bg-dark text-white text-xs px-3 py-2 rounded 
682  opacity-0 group-hover:opacity-100 transition-all duration-200 
683  pointer-events-none z-50">
684                      Live Preview
685
686                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
687                    </span>
688                  </a>
689                </div>
690              </div>
691
692              <div class="flex items-center justify-between">
693                <p class="text-base sm:text-lg text-dark font-semibold">
694                  Blog App
695                </p>
696
697                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/blog/post" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
698                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
699                    Preview
700                  </span>
701                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
702                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
703                  </span>
704                </a>
705              </div>
706            </div>
707
708            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
709              <div class="rounded relative overflow-hidden group/overlay">
710                <img alt="Blog Detail App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-blog-detail.webp"/>
711                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
712                  <a href="https://spike-react-tailwind-main.netlify.app/apps/blog/detail/early-black-friday-amazon-deals-cheap-tvs-headphones-laptops" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
713                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
714
715                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
716  bg-dark text-white text-xs px-3 py-2 rounded 
717  opacity-0 group-hover:opacity-100 transition-all duration-200 
718  pointer-events-none z-50">
719                      Live Preview
720
721                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
722                    </span>
723                  </a>
724                </div>
725              </div>
726
727              <div class="flex items-center justify-between">
728                <p class="text-base sm:text-lg text-dark font-semibold">
729                  Blog Detail App
730                </p>
731
732                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/blog/detail/early-black-friday-amazon-deals-cheap-tvs-headphones-laptops" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
733                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
734                    Preview
735                  </span>
736                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
737                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
738                  </span>
739                </a>
740              </div>
741            </div>
742
743            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
744              <div class="rounded relative overflow-hidden group/overlay">
745                <img alt="eCommerce Shop App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-shop.webp"/>
746                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
747                  <a href="https://spike-react-tailwind-main.netlify.app/apps/ecommerce/shop2" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
748                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
749
750                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
751  bg-dark text-white text-xs px-3 py-2 rounded 
752  opacity-0 group-hover:opacity-100 transition-all duration-200 
753  pointer-events-none z-50">
754                      Live Preview
755
756                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
757                    </span>
758                  </a>
759                </div>
760              </div>
761
762              <div class="flex items-center justify-between">
763                <p class="text-base sm:text-lg text-dark font-semibold">
764                  eCommerce Shop App
765                </p>
766
767                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/ecommerce/shop2" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
768                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
769                    Preview
770                  </span>
771                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
772                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
773                  </span>
774                </a>
775              </div>
776            </div>
777
778          
779
780             <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
781              <div class="rounded relative overflow-hidden group/overlay">
782                <img alt="eCommerce Detail App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-product-detail.webp"/>
783                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
784                  <a href="https://spike-react-tailwind-main.netlify.app/apps/ecommerce/detail-two/5" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
785                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
786
787                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
788  bg-dark text-white text-xs px-3 py-2 rounded 
789  opacity-0 group-hover:opacity-100 transition-all duration-200 
790  pointer-events-none z-50">
791                      Live Preview
792
793                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
794                    </span>
795                  </a>
796                </div>
797              </div>
798
799              <div class="flex items-center justify-between">
800                <p class="text-base sm:text-lg text-dark font-semibold">
801                  eCommerce Detail App
802                </p>
803
804                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/ecommerce/detail-two/5" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
805                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
806                    Preview
807                  </span>
808                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
809                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
810                  </span>
811                </a>
812              </div>
813            </div>
814
815
816             <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
817              <div class="rounded relative overflow-hidden group/overlay">
818                <img alt="eCommerce List App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-productlist.webp"/>
819                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
820                  <a href="https://spike-react-tailwind-main.netlify.app/apps/ecommerce/list" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
821                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
822
823                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
824  bg-dark text-white text-xs px-3 py-2 rounded 
825  opacity-0 group-hover:opacity-100 transition-all duration-200 
826  pointer-events-none z-50">
827                      Live Preview
828
829                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
830                    </span>
831                  </a>
832                </div>
833              </div>
834
835              <div class="flex items-center justify-between">
836                <p class="text-base sm:text-lg text-dark font-semibold">
837                  eCommerce List App
838                </p>
839
840                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/ecommerce/list" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
841                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
842                    Preview
843                  </span>
844                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
845                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
846                  </span>
847                </a>
848              </div>
849            </div>
850
851
852            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
853              <div class="rounded relative overflow-hidden group/overlay">
854                <img alt="Invoice App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-invoice.webp"/>
855                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
856                  <a href="https://spike-react-tailwind-main.netlify.app/apps/invoice/list" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
857                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
858
859                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
860  bg-dark text-white text-xs px-3 py-2 rounded 
861  opacity-0 group-hover:opacity-100 transition-all duration-200 
862  pointer-events-none z-50">
863                      Live Preview
864
865                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
866                    </span>
867                  </a>
868                </div>
869              </div>
870
871              <div class="flex items-center justify-between">
872                <p class="text-base sm:text-lg text-dark font-semibold">
873                  Invoice App
874                </p>
875
876                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/invoice/list" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
877                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
878                    Preview
879                  </span>
880                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
881                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
882                  </span>
883                </a>
884              </div>
885            </div>
886
887             <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
888              <div class="rounded relative overflow-hidden group/overlay">
889                <img alt="Kanban App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-kanban.webp"/>
890                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
891                  <a href="https://spike-react-tailwind-main.netlify.app/apps/kanban" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
892                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
893
894                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
895  bg-dark text-white text-xs px-3 py-2 rounded 
896  opacity-0 group-hover:opacity-100 transition-all duration-200 
897  pointer-events-none z-50">
898                      Live Preview
899
900                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
901                    </span>
902                  </a>
903                </div>
904              </div>
905
906              <div class="flex items-center justify-between">
907                <p class="text-base sm:text-lg text-dark font-semibold">
908                  Kanban App
909                </p>
910
911                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/kanban" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
912                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
913                    Preview
914                  </span>
915                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
916                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
917                  </span>
918                </a>
919              </div>
920            </div>
921
922            <div class="flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded">
923              <div class="rounded relative overflow-hidden group/overlay">
924                <img alt="Notes App" class="w-full h-full rounded" src="https://images.wrappixel.com/templates/pro/spike/apps/app-note.webp"/>
925                <div class="absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white">
926                  <a href="https://spike-react-tailwind-main.netlify.app/apps/notes" target="_blank" class="relative group h-12 w-12 flex justify-center items-center rounded-full border border-border">
927                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:laptop-minimalistic-outline" class="iconify size-6 text-white iconify--solar"><path fill="currentColor" fill-rule="evenodd" d="M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75" clip-rule="evenodd"></path></svg>
928
929                    <span class="absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap 
930  bg-dark text-white text-xs px-3 py-2 rounded 
931  opacity-0 group-hover:opacity-100 transition-all duration-200 
932  pointer-events-none z-50">
933                      Live Preview
934
935                      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:alt-arrow-down-bold" class="iconify size-4 text-dark absolute btm-10 left-40 iconify--solar"><path fill="currentColor" d="m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0"></path></svg>
936                    </span>
937                  </a>
938                </div>
939              </div>
940
941              <div class="flex items-center justify-between">
942                <p class="text-base sm:text-lg text-dark font-semibold">
943                  Notes App
944                </p>
945
946                <a target="_blank" href="https://spike-react-tailwind-main.netlify.app/apps/notes" class="relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm">
947                  <span class="transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden">
948                    Preview
949                  </span>
950                  <span class="absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500">
951                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:arrow-right-up-linear" class="iconify text-lg iconify--solar"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6m0 0H9m9 0v9"></path></svg>
952                  </span>
953                </a>
954              </div>
955            </div>
956          </div>
957        </div>
958      </div>
959    </div>
960  </div>
961</section></div></section><section class="xl:px-0 px-4"><div><section>
962  <div class="prose pb-5">
963    <div class="py-8 md:py-14">
964      <div class="container mx-auto">
965        <div class="flex flex-col gap-8 md:gap-12">
966          <!-- -->
967          <div class="max-w-3xl">
968            <p class="text-sm text-muted">What’s the features?</p>
969            <h3 class="text-2xl text-dark">
970              Here are the numerous features we&#x27;ve included.
971            </h3>
972          </div>
973          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8">
974            <div class="flex gap-5">
975              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
976                <span class="iconify size-6 text-dark" data-icon="solar:magic-stick-3-outline"></span>
977              </div>
978              <div class="flex flex-col gap-1 flex-1">
979                <h4 class="text-lg font-semibold text-dark">6 Theme Colors</h4>
980                <p class="text-base text-muted">
981                  We have included 6 pre-defined Theme Colors with Modernize
982                  Admin.
983                </p>
984              </div>
985            </div>
986
987            <div class="flex gap-5">
988              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
989                <span class="iconify size-6 text-dark" data-icon="solar:archive-check-outline"></span>
990              </div>
991              <div class="flex flex-col gap-1 flex-1">
992                <h4 class="text-lg font-semibold text-dark">
993                  4+ Frontend Pages
994                </h4>
995                <p class="text-base text-muted">
996                  Yes, we have addded 4+ frontend pages.
997                </p>
998              </div>
999            </div>
1000
1001            <div class="flex gap-5">
1002              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1003                <span class="iconify size-6 text-dark" data-icon="solar:calendar-broken"></span>
1004              </div>
1005              <div class="flex flex-col gap-1 flex-1">
1006                <h4 class="text-lg font-semibold text-dark">Calendar Design</h4>
1007                <p class="text-base text-muted">
1008                  Calendar is available with our package &amp; in nice design.
1009                </p>
1010              </div>
1011            </div>
1012
1013            <div class="flex gap-5">
1014              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1015                <span class="iconify size-6 text-dark" data-icon="tabler:brand-headlessui"></span>
1016              </div>
1017              <div class="flex flex-col gap-1 flex-1">
1018                <h4 class="text-lg font-semibold text-dark">Headless Ui</h4>
1019                <p class="text-base text-muted">
1020                  Headless UI is a UI components that provide functionality
1021                  without imposing any design.
1022                </p>
1023              </div>
1024            </div>
1025
1026            <div class="flex gap-5">
1027              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1028                <span class="iconify size-6 text-dark" data-icon="solar:refresh-bold"></span>
1029              </div>
1030              <div class="flex flex-col gap-1 flex-1">
1031                <h4 class="text-lg font-semibold text-dark">Regular Updates</h4>
1032                <p class="text-base text-muted">
1033                  We are constantly updating our pack with new features.
1034                </p>
1035              </div>
1036            </div>
1037
1038            <div class="flex gap-5">
1039              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1040                <span class="iconify size-6 text-dark" data-icon="solar:notification-unread-lines-linear"></span>
1041              </div>
1042              <div class="flex flex-col gap-1 flex-1">
1043                <h4 class="text-lg font-semibold text-dark">
1044                  65+ Page Templates
1045                </h4>
1046                <p class="text-base text-muted">
1047                  Indeed, we offer 6 demos, each featuring over 65+ pages, to
1048                  simplify the process.
1049                </p>
1050              </div>
1051            </div>
1052
1053            <div class="flex gap-5">
1054              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1055                <span class="iconify size-6 text-dark" data-icon="solar:widget-3-linear"></span>
1056              </div>
1057              <div class="flex flex-col gap-1 flex-1">
1058                <h4 class="text-lg font-semibold text-dark">
1059                  45+ UI Components
1060                </h4>
1061                <p class="text-base text-muted">
1062                  Almost 45+ UI Components being given with Spike Admin Pack.
1063                </p>
1064              </div>
1065            </div>
1066
1067            <div class="flex gap-5">
1068              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1069                <span class="iconify size-6 text-dark" data-icon="tabler:brand-tailwind"></span>
1070              </div>
1071              <div class="flex flex-col gap-1 flex-1">
1072                <h4 class="text-lg font-semibold text-dark">Tailwind</h4>
1073                <p class="text-base text-muted">
1074                  It is built using Tailwind, a robust UI component framework.
1075                </p>
1076              </div>
1077            </div>
1078
1079
1080            <div class="flex gap-5">
1081              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1082                <span class="iconify size-6 text-dark" data-icon="solar:fire-outline"></span>
1083              </div>
1084              <div class="flex flex-col gap-1 flex-1">
1085                <h4 class="text-lg font-semibold text-dark">Firebase</h4>
1086                <p class="text-base text-muted">
1087                  offer robust real-time database capabilities, authentication,
1088                  and additional features.
1089                </p>
1090              </div>
1091            </div>
1092
1093            
1094             <div class="flex gap-5">
1095              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1096                <span class="iconify size-6 text-dark" data-icon="solar:link-round-angle-outline"></span>
1097              </div>
1098              <div class="flex flex-col gap-1 flex-1">
1099                <h4 class="text-lg font-semibold text-dark">i18 React</h4>
1100                <p class="text-base text-muted">
1101                react-i18 is a robust framework for internationalization in React applications.
1102                </p>
1103              </div>
1104            </div>
1105
1106            <div class="flex gap-5">
1107              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1108                <span class="iconify size-6 text-dark" data-icon="simple-icons:shadcnui"></span>
1109              </div>
1110              <div class="flex flex-col gap-1 flex-1">
1111                <h4 class="text-lg font-semibold text-dark">Shadcn</h4>
1112                <p class="text-base text-muted">
1113               Shadcn is a customizable UI component library for React, built on Radix UI.
1114                </p>
1115              </div>
1116            </div>
1117
1118             <div class="flex gap-5">
1119              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1120                <span class="iconify size-6 text-dark" data-icon="solar:chart-outline"></span>
1121              </div>
1122              <div class="flex flex-col gap-1 flex-1">
1123                <h4 class="text-lg font-semibold text-dark">Lots of Chart Options</h4>
1124                <p class="text-base text-muted">
1125            With ApexCharts, we offer a wide variety of chart options if you can name it, we likely have it.
1126                </p>
1127              </div>
1128            </div>
1129
1130             <div class="flex gap-5">
1131              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1132                <span class="iconify size-6 text-dark" data-icon="solar:bedside-table-3-outline"></span>
1133              </div>
1134              <div class="flex flex-col gap-1 flex-1">
1135                <h4 class="text-lg font-semibold text-dark">Lots of Table Examples</h4>
1136                <p class="text-base text-muted">
1137          Data Tables are initial requirement and we added them.
1138                </p>
1139              </div>
1140            </div>
1141
1142            <div class="flex gap-5">
1143              <div class="h-16 w-16 rounded-full bg-accent flex justify-center items-center">
1144                <span class="iconify size-6 text-dark" data-icon="solar:book-bookmark-linear"></span>
1145              </div>
1146              <div class="flex flex-col gap-1 flex-1">
1147                <h4 class="text-lg font-semibold text-dark">Detailed Documentation</h4>
1148                <p class="text-base text-muted">
1149        We have made detailed documentation, so it will easy to use.
1150                </p>
1151              </div>
1152            </div>
1153
1154
1155          </div>
1156        </div>
1157      </div>
1158    </div>
1159  </div>
1160</section>
1161</div></section><section class="xl:px-0 px-4"><section id="testimonial-section" class="py-10 md:py-16 bg-gray-100"><div class="max-w-7xl mx-auto px-4 flex flex-col gap-10 md:gap-16"><h2 class="font-bold text-2xl md:text-3xl text-gray-900 max-w-3xl">Don’t just take our words for it, see what developers &amp; designers are saying</h2><div class="columns-1 sm:columns-2 xl:columns-3 gap-6 space-y-6"><div class="break-inside-avoid"><a href="https://www.trustpilot.com/users/5b2d7b8d4de5666d34fa6c55" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Mark</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">I had a great experience purchasing a template from WrapPixel. Overall, it&#x27;s a high-quality template and an excellent starting point for both learning and building real products. I&#x27;d highly recommend WrapPixel.</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><p class="text-sm text-gray-400">07-01-2026</p></div></div></a></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/users/6927583529e259e431dca23b" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Saurabh</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">Wrappixel templates are awesome. I am using in my nuxt project and highly recommend them. Their online support is also very impressive.</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><p class="text-sm text-gray-400">27-11-2025</p></div></div></a></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/users/691533e9ef3d6c74e5c2ac1e" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">SDS JAVA</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">Thank you for the excellent support! Thanks for the prompt response and support on the purchase I made recently. A trusted and reliable theme store.</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><p class="text-sm text-gray-400">13-11-2025</p></div></div></a></div><div class="break-inside-avoid mb-6"><div class="bg-white shadow-md rounded-xl overflow-hidden border border-gray-100 transition-all hover:shadow-lg"><div class="relative w-full h-[500px]"><iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/PXQ7Ibst038?autoplay=0&amp;rel=0" title="Special Thanks from John Leider (CEO @Vuetify)" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen=""></iframe></div></div></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/reviews/678a3365b34a249699d13c03" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Nicolas LÉZORAY</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">I ordered an Angular Template which offers very well structured data, it is a real time saving. I had a problem with my order, support quickly took care of me and resolved my problem.</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="
1161M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><p class="text-sm text-gray-400">17-01-2025</p></div></div></a></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/reviews/66d780ad488ad3ae384ccc89" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Gayle Everton</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">My Client loved the clean &amp; modern design. Using Wrappixel&#x27;s templates is like having a personal assistant. Truly a lifesaver!</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-half absolute top-0 inset-s-0" aria-hidden="true"><path d="M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"></path></svg></div></div><p class="text-sm text-gray-400">04-09-2024</p></div></div></a></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/reviews/668cc75c14c23514c344c355" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Kimberly Rodejo</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/twitter.webp" alt="twitter" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">Life-changing!! Found the template while looking to speed up development. Highly recommend!</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><p class="text-sm text-gray-400">09-07-2024</p></div></div></a></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/reviews/6687ca0e1119332b2ba32ce6" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Fazreen Razeek</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">
1161Amazing service. Work quality is top notch and delivery is as promised.</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-half absolute top-0 inset-s-0" aria-hidden="true"><path d="M12 18.338a2.1 2.1 0 0 0-.987.244L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16l2.309-4.679A.53.53 0 0 1 12 2"></path></svg></div></div><p class="text-sm text-gray-400">05-07-2024</p></div></div></a></div><div class="break-inside-avoid"><a href="https://www.trustpilot.com/reviews/666426a5c7e3339b51eb7191" target="_blank" rel="noreferrer" class="block"><div class="bg-white shadow-sm p-6 flex flex-col gap-6 rounded-lg hover:shadow-md transition"><div class="flex items-center justify-between"><h3 class="text-lg font-semibold text-gray-900">Arun Bhargavan</h3><div class="flex flex-col items-end gap-2"><img src="https://images.wrappixel.com/product-detail/trustpilot.webp" alt="trustpilot" class="max-w-22.5"/><span class="text-xs font-medium bg-green-100 text-green-700 rounded-sm py-1 px-2">Verified Buyer</span></div></div><p class="text-gray-500 text-sm">Outstanding resource for UI kits and templates. Clean, robust, and easy to integrate.</p><div class="flex flex-col gap-1"><div class="flex gap-1"><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div><div class="relative "><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#ffb900" stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg></div></div><p class="text-sm text-gray-400">05-07-2024</p></div></div></a></div></div></div></section></section><section class="bg-[#0A2540]  lg:py-16 py-8 xl:px-0 px-6"><div class="container flex flex-col md:gap-16 gap-8"><h2 class="md:text-3xl text-2xl font-semibold text-white max-w-4xl">How our templates helped designers, developers and agencies to save thousands of dollars</h2><div class="grid lg:grid-cols-3 gap-6"><div data-slot="card" class="bg-card text-card-foreground flex flex-col border shadow-sm overflow-hidden rounded-3xl p-0 gap-0"><div class="relative h-[260px] cursor-pointer"><img alt="Shahid Maqbool" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;
1161color:transparent" src="https://images.wrappixel.com/experts/shahid.png"/><div class="absolute inset-6 flex items-start justify-end top-6 "><div class="bg-primary rounded-full p-3"><span></span></div></div></div><div data-slot="card-content" class="flex items-center justify-between px-5 py-4 bg-gray-100"><h3 class="font-semibold text-lg text-dark">Shahid Maqbool</h3><a target="_blank" href="https://www.linkedin.com/in/rjshahidmaqbool/"><span></span></a></div></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col border shadow-sm overflow-hidden rounded-3xl p-0 gap-0"><div class="relative h-[260px] cursor-pointer"><img alt="Thapa Technical" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://images.wrappixel.com/experts/thapa-technical.png"/><div class="absolute inset-6 flex items-start justify-end top-6 "><div class="bg-primary rounded-full p-3"><span></span></div></div></div><div data-slot="card-content" class="flex items-center justify-between px-5 py-4 bg-gray-100"><h3 class="font-semibold text-lg text-dark">Thapa Technical</h3><a target="_blank" href="https://www.linkedin.com/in/thapatechnical/"><span></span></a></div></div><div data-slot="card" class="bg-card text-card-foreground flex flex-col border shadow-sm overflow-hidden rounded-3xl p-0 gap-0"><div class="relative h-[260px] cursor-pointer"><img alt="Kimberly Rodejo" loading="lazy" decoding="async" data-nimg="fill" class="object-cover" style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent" src="https://images.wrappixel.com/experts/kimberly.png"/><div class="absolute inset-6 flex items-start justify-end top-6 "><div class="bg-primary rounded-full p-3"><span></span></div></div></div><div data-slot="card-content" class="flex items-center justify-between px-5 py-4 bg-gray-100"><h3 class="font-semibold text-lg text-dark">Kimberly Rodejo</h3><a target="_blank" href="https://www.linkedin.com/in/kimberlyaaronrodejo/"><span></span></a></div></div></div></div></section><section id="pricing-section"><div class="py-8 md:py-16 bg-ring"><div class="container mx-auto px-4"><div class="flex flex-col  gap-12"><div class="flex lg:flex-row flex-col md:justify-between gap-6"><h2 class="text-dark font-bold md:text-3xl text-2xl md:max-w-121.25">Simple licenses and pricing suiting to your needs</h2><div class="flex gap-3 items-center"><img alt="money-back" loading="lazy" width="42" height="42" decoding="async" data-nimg="1" class=" rounded" style="color:transparent" src="https://images.wrappixel.com/icon/money-back-icon.svg"/><h3 class="text-dark font-bold md:text-2xl text-xl">Quality Guaranteed</h3></div></div><div class="w-full"><div class="overflow-x-auto overflow-y-visible md:pt-5"><div><table class="w-full border-collapse bg-card rounded-md shadow-sm"><thead><tr><th class="relative p-6  min-w-65 text-left align-top border-r border-r-border last:border-r-0 border-t-4 border-sky-500 "><div class="flex flex-col gap-6 border-b border-border"><div class="flex flex-col justify-between"><p class="text-lg font-bold text-dark">Single Use</p><p class="text-base text-muted font-normal">For a single end product, with no user fees.</p></div><div class="flex items-center gap-2"><p class="text-3xl font-bold text-dark">$<!-- -->59</p></div><div class="flex flex-col gap-1"></div></div></th><th class="relative p-6  min-w-65 text-left align-top border-r border-r-border last:border-r-0 border-t-4 border-primary"><div class="flex flex-col gap-6 border-b border-border"><div class="flex flex-col justify-between"><p class="text-lg font-bold text-dark">Multiple Use</p><p class="text-base text-muted font-normal">For unlimited end products with no user fees.</p></div><div class="flex items-center gap-2"><p class="text-3xl font-bold text-dark">$<!-- -->89</p></div><div class="flex flex-col gap-1"></div></div></th><th class="relative p-6  min-w-65 text-left align-top border-r border-r-border last:border-r-0 border-t-4 border-amber-400"><div class="flex flex-col gap-6 border-b border-border"><div class="flex flex-col justify-between"><p class="text-lg font-bold text-dark">Extended Use</p><p class="text-base text-muted font-normal">For a single end product with user charges.</p></div><div class="flex items-center gap-2"><p class="text-3xl font-bold text-dark">$<!-- -->299</p></div><div class="flex flex-col gap-1"></div></div></th><th class="relative p-6  min-w-65 text-left align-top border-r border-r-border last:border-r-0 border-t-4 border-rose-500 "><div class="flex flex-col gap-6 border-b border-border"><div class="flex flex-col justify-between"><p class="text-lg font-bold text-dark">Multiple Extended Use</p><p class="text-base text-muted font-normal">For multiple end products with user charges.</p></div><div class="flex items-center gap-2"><p class="text-3xl font-bold text-dark">$<!-- -->499</p></div><div class="flex flex-col gap-1"></div></div></th></tr></thead><tbody><tr class=""><td class="p-6 pt-0 align-top
1162                                                border-r border-border"><ul class="flex flex-col gap-4 text-sm mb-6"><li class="flex justify-between text-muted"><span>
1162Full source code</span><span></span></li><li class="flex justify-between text-muted"><span>Documentation</span><span></span></li><li class="flex justify-between text-muted"><span>Figma Included</span><span></span></li><li class="flex justify-between text-muted"><span>Projects</span><span class="font-medium">One</span></li><li class="flex justify-between text-muted"><span>Use in SaaS app</span><span></span></li><li class="flex justify-between text-muted"><span>Technical support</span><span class="font-medium">One Year</span></li><li class="flex justify-between text-muted"><span>Free updates</span><span class="font-medium">One Year</span></li></ul><button data-slot="button" data-variant="outlineprimary" data-size="lg" class="shrink-0 whitespace-nowrap outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border bg-transparent border-primary text-primary hover:bg-primary hover:text-white hover:border-primary h-10 rounded-md px-6 has-[&gt;svg]:px-4 group transition-colors duration-200 flex items-center justify-center gap-2 w-full py-5.5 font-bold text-base">Purchase Now</button></td><td class="p-6 pt-0 align-top
1163                                                border-r border-border"><ul class="flex flex-col gap-4 text-sm mb-6"><li class="flex justify-between text-muted"><span>Full source code</span><span></span></li><li class="flex justify-between text-muted"><span>Documentation</span><span></span></li><li class="flex justify-between text-muted"><span>Figma Included</span><span></span></li><li class="flex justify-between text-muted"><span>Projects</span><span class="font-medium">Unlimited</span></li><li class="flex justify-between text-muted"><span>Use in SaaS app</span><span></span></li><li class="flex justify-between text-muted"><span>Technical support</span><span class="font-medium">One Year</span></li><li class="flex justify-between text-muted"><span>Free updates</span><span class="font-medium">One Year</span></li></ul><button data-slot="button" data-variant="outlineprimary" data-size="lg" class="shrink-0 whitespace-nowrap outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border bg-transparent border-primary text-primary hover:bg-primary hover:text-white hover:border-primary h-10 rounded-md px-6 has-[&gt;svg]:px-4 group transition-colors duration-200 flex items-center justify-center gap-2 w-full py-5.5 font-bold text-base">Purchase Now</button></td><td class="p-6 pt-0 align-top
1164                                                border-r border-border"><ul class="flex flex-col gap-4 text-sm mb-6"><li class="flex justify-between text-muted"><span>Full source code</span><span></span></li><li class="flex justify-between text-muted"><span>Documentation</span><span></span></li><li class="flex justify-between text-muted"><span>Figma Included</span><span></span></li><li class="flex justify-between text-muted"><span>Projects</span><span class="font-medium">One</span></li><li class="flex justify-between text-muted"><span>Use in SaaS app</span><span></span></li><li class="flex justify-between text-muted"><span>Technical support</span><span class="font-medium">One Year</span></li><li class="flex justify-between text-muted"><span>Free updates</span><span class="font-medium">One Year</span></li></ul><button data-slot="button" data-variant="default" data-size="lg" class="shrink-0 whitespace-nowrap outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;
1164size-&#x27;])]:size-4 bg-primary text-white hover:bg-primary/90 h-10 rounded-md px-6 has-[&gt;svg]:px-4 group transition-colors duration-200 flex items-center justify-center gap-2 w-full py-5.5 font-bold text-base">Purchase Now</button></td><td class="p-6 pt-0 align-top
1165                                                "><ul class="flex flex-col gap-4 text-sm mb-6"><li class="flex justify-between text-muted"><span>Full source code</span><span></span></li><li class="flex justify-between text-muted"><span>Documentation</span><span></span></li><li class="flex justify-between text-muted"><span>Figma Included</span><span></span></li><li class="flex justify-between text-muted"><span>Projects</span><span class="font-medium">Unlimited</span></li><li class="flex justify-between text-muted"><span>Use in SaaS app</span><span></span></li><li class="flex justify-between text-muted"><span>Technical support</span><span class="font-medium">One Year</span></li><li class="flex justify-between text-muted"><span>Free updates</span><span class="font-medium">One Year</span></li></ul><button data-slot="button" data-variant="outlineprimary" data-size="lg" class="shrink-0 whitespace-nowrap outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 border bg-transparent border-primary text-primary hover:bg-primary hover:text-white hover:border-primary h-10 rounded-md px-6 has-[&gt;svg]:px-4 group transition-colors duration-200 flex items-center justify-center gap-2 w-full py-5.5 font-bold text-base">Purchase Now</button></td></tr></tbody></table></div></div></div><div class="flex flex-col gap-6"><p class="text-center text-muted text-base">Secured payment with PayPal &amp; Razorpay</p><img alt="payment" loading="lazy" width="400" height="50" decoding="async" data-nimg="1" class="object-contain h-6 w-auto" style="color:transparent" src="https://images.wrappixel.com/payment/pg-logos.png"/></div></div></div></div></section><section class="py-8 xl:px-0 px-4"><div class="container"><div class="grid grid-cols-12 gap-6 items-center"><div class="lg:col-span-6 col-span-12 flex flex-col gap-6 lg:pe-14"><h2 class="text-dark">Created &amp; Supported by Real People to give you Amazing Experience</h2><p class="text-lg text-muted">We pour everything into our work, which is visible through our high-quality products. We offer dedicated support to our customers.</p><div class="flex gap gap-3"><a data-slot="button" data-variant="default" data-size="lg" class="inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 bg-primary text-white hover:bg-primary/90 h-10 rounded-md px-6 has-[&gt;svg]:px-4 py-6 border border-transparent" href="/support">Get Support</a><a target="_blank" rel="noopener noreferrer" data-slot="button" data-variant="default" data-size="lg" class="shrink-0 items-center justify-center gap-2 text-sm whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*=&#x27;size-&#x27;])]:size-4 hover:bg-primary/90 h-10 rounded-md px-6 has-[&gt;svg]:px-4 flex text-primary border border-primary hover:text-white py-6 bg-transparent font-semibold" href="https://discord.com/invite/eMzE8F6Wqs"><span></span>Ask us on Discord</a></div></div><div class="lg:col-span-6 col-span-12 flex lg:justify-end"><img alt="WrapPixel dedicated support team" loading="lazy" width="600" height="800" decoding="async" data-nimg="1" class="w-auto h-auto" style="color:transparent" src="https://images.wrappixel.com/home/background/support-banner.png"/></div></div></div></section><section id="changelog" class="xl:px-0 px-4"><div class="prose"><section id="changelog">
1166  <div class="prose">
1167    <div class="py-8 md:py-14">
1168      <div class="container mx-auto">
1169        <div class="flex flex-col gap-6">
1170          <h2 class="text-dark text-2xl font-bold">Changelog</h2>
1171          <div class="border-border space-y-12 rounded-md border p-6">
1172            <!-- -->
1173            <div class="space-y-4">
1174              <p class="text-card-foreground text-lg font-medium">Version 2.0.0 (01st June 2026)</p>
1175              <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
1176                <div class="flex items-start gap-2">
1177                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1178                  <p class="text-muted flex-1 text-base leading-tight">Migrated project core to Shadcn UI components</p>
1179                </div>
1180                <div class="flex items-start gap-2">
1181                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1182                  <p class="text-muted flex-1 text-base leading-tight">Removed the flowbite-react dependencies</p>
1183                </div>
1184                <div class="flex items-start gap-2">
1185                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1186                  <p class="text-muted flex-1 text-base leading-tight">Updated Tailwind CSS version to V4</p>
1187                </div>
1188                <div class="flex items-start gap-2">
1189                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1190                  <p class="text-muted flex-1 text-base leading-tight">Removed Headless UI package and related utility wrappers</p>
1191                </div>
1192                <div class="flex items-start gap-2">
1193                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1194                  <p class="text-muted flex-1 text-base leading-tight">All packages updated to their latest versions</p>
1195                </div>
1196                <div class="flex items-start gap-2">
1197                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1198                  <div class="flex-1 space-y-2">
1199                    <p class="text-base leading-none">Added New Apps</p>
1200                    <ul class="text-muted flex w-fit flex-col gap-2 text-sm">
1201                      <li class="flex gap-2">
1202                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1203                        AI Image Generator App
1204                      </li>
1205                      <li class="flex gap-2">
1206                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1207                        AI Chat App
1208                      </li>
1209                    </ul>
1210                  </div>
1211                </div>
1212                <div class="flex items-start gap-2">
1213                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1214                  <div class="flex-1 space-y-2">
1215                    <p class="text-base leading-none">Updated Apps</p>
1216                    <ul class="text-muted flex w-fit flex-col gap-2 text-sm">
1217                      <li class="flex gap-2">
1218                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1219                        Blog App - Added Create, Edit, and Manage Blog pages for full blog post management.
1220                      </li>
1221                      <li class="flex gap-2">
1222                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1223                        Invoice App -Fully redesigned with an updated layout and improved using shadcn/ui components.
1224                      </li>
1225                      <li class="flex gap-2">
1226                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1227                        E-commerce App - Redesigned and updated
1228                      </li>
1229                      <li class="flex gap-2">
1230                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1231                        User Profile App - Removed User Profile 2 and User Profile 1 has been updated
1232                      </li>
1233                      <li class="flex gap-2">
1234                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1235                        Kanban App - fully updated UI and layout
1236                      </li>
1237                    </ul>
1238                  </div>
1239                </div>
1240                <div class="flex items-start gap-2">
1241                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1242                  <div class="flex-1 space-y-2">
1243                    <p class="text-base leading-none">Added Pages</p>
1244                    <ul class="text-muted flex w-fit flex-col gap-2 text-sm">
1245                      <li class="flex gap-2">
1246                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1247                        Integrations Page
1248                      </li>
1249                      <li class="flex gap-2">
1250                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1251                        API Keys page
1252                      </li>
1253                      <li class="flex gap-2">
1254                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1255                        Empty State pages
1256                      </li>
1257                    </ul>
1258                  </div>
1259                </div>
1260                <div class="flex items-start gap-2">
1261                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1262                  <div class="flex-1 space-y-2">
1263                    <p class="text-base leading-none">Added Forms Components</p>
1264                    <ul class="text-muted flex w-fit flex-col gap-2 text-sm">
1265                      <li class="flex gap-2">
1266                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1267                        Form Wizard for multi-step workflows
1268                      </li>
1269                      <li class="flex gap-2">
1270                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1271                        Form Examples Page showcasing form layouts and patterns
1272                      </li>
1273                      <li class="flex gap-2">
1274                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1275                        Repeater Form for dynamically adding and removing fields
1276                      </li>
1277                    </ul>
1278                  </div>
1279                </div>
1280                <div class="flex items-start gap-2">
1281                  <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1282                  <div class="flex-1 space-y-2">
1283                    <p class="text-base leading-none">New AI Prompt Features:</p>
1284                    <p class="text-base leading-none">Added a new Prompts Page with a visual intro page that helps you discover and use pre-built prompts for your project. Introduced a dedicated Prompt Library with a collection of ready-to-use AI prompts designed to speed up development and improve workflow efficiency.</p>
1285                    <p class="text-base leading-none">Includes 9 prompt categories with 15+ ready-to-use prompts:</p>
1286                    <ul class="text-muted flex w-fit flex-col gap-2 text-sm">
1287                      <li class="flex gap-2">
1288                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1289                        Dashboard - Build a dashboard from scratch or update an existing components.
1290                      </li>
1291                      <li class="flex gap-2">
1292                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1293                        Apps - Keep selected app and remove others
1294                      </li>
1295                      <li class="flex gap-2">
1296                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1297                        Auth - Generate complete auth pages instantly
1298                      </li>
1299                      <li class="flex gap-2">
1300                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1301                        Branding - Update logos, SVGs, and branding elements
1302                      </li>
1303                      <li class="flex gap-2">
1304                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1305                        Components - Build sortable data tables
1306                      </li>
1307                      <li class="flex gap-2">
1308                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1309                        Forms - Build validated form components with one prompt
1310                      </li>
1311                      <li class="flex gap-2">
1312                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1313                        Language - Add or remove languages with translations
1314                      </li>
1315                      <li class="flex gap-2">
1316                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1317                        Navigation - Manage menus, sidebar nesting, badges, and routing
1318                      </li>
1319                      <li class="flex gap-2">
1320                        <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1321                        Theming - Switch between light and dark mode, change colors, or RTL layout
1322                      </li>
1323                    </ul>
1324                  </div>
1325                </div>
1326              </div>
1327            </div>
1328            <!-- -->
1329            <div class="space-y-4">
1330              <p class="text-dark text-lg font-medium">Version 1.0.0 (10th June 2025)</p>
1331              <div class="flex items-center gap-2">
1332                <span class="iconify text-success text-lg" data-icon="solar:check-circle-bold"></span>
1333                <p class="text-muted flex-1 text-base">Initial Release</p>
1334              </div>
1335            </div>
1336          </div>
1337        </div>
1338      </div>
1339    </div>
1340  </div>
1341</section></div></section><section id="product-description" class="xl:px-0 px-4"><div class="prose container pro-desc-meta"><div class="flex flex-col gap-4 py-8 md:py-14">
1342  <h3 class="text-dark text-2xl font-bold">Item description</h3>
1343  <p>
1344    Spike is a really top-quality
1345    <a href="https://wrappixel.com/admin-dashboard-templates" target="_blank"><strong>Dashboard Design Template</strong></a>, the kind of ready-made admin panel you can use for your project; that was created specifically for today&#x27;s web developers. If you want your project to have a clean and straightforward look, starting with Spike is the perfect choice. It&#x27;s built using React and styled with Tailwind CSS , which makes it very quick and easy to change however you need.
1346  </p>
1347  <p>
1348    This
1349    <a href="https://wrappixel.com/react-templates" target="_blank"><strong>React js Template</strong></a>
1350    gives you everything you need right away: ready-to-use dashboards, charts, and all the essential UI components.
1351  </p>
1352  <p>
1353    The layout works perfectly on any screen size, whether it&#x27;s a phone or a desktop. It helps you skip the boring setup part so you can focus on the important features of your app. For any startup or personal project, Spike is a solid
1354    <a href="https://wrappixel.com/tailwind-templates" target="_blank"><strong>Tailwind Theme</strong></a>
1355    that can easily grow as your app gets bigger. It’s simple, clean, and ready to go!
1356  </p>
1357</div></div></section><div class="container md:py-14 py-8 xl:px-0 px-4"><div class="bg-gray p-5 flex md:flex-row flex-col rounded-3xl gap-2.5 text-muted"><span class="flex gap-2.5"><a class="text-primary" href="/">Home</a> <!-- -->/<!-- --> <a class="text-primary " href="/templates">Templates</a> <!-- -->/</span><span>Spike React Tailwind Admin Template</span></div></div></div><!--$--><!--/$--></main><footer class="w-full bg-gray lg:pt-20 pt-10"><div class="container mx-auto xl:px-0 px-4 "><div class="flex md:flex-row flex-col gap-6 justify-between"><a href="/"><img alt="WrapPixel Logo" loading="lazy" width="205" height="40" decoding="async" data-nimg="1" class="block dark:hidden w-[150px] sm:w-[155px] h-full" style="color:transparent" src="/images/logo/dark-logo.svg?dpl=dpl_FMEn1zsBDZHBuHfoRyKiEBEYq5TG"/><img alt="WrapPixel Logo" loading="lazy" width="205" height="40" decoding="async" data-nimg="1" class="hidden dark:block w-[150px] sm:w-[155px] h-full" style="color:transparent" src="/images/logo/white-logo.svg?dpl=dpl_FMEn1zsBDZHBuHfoRyKiEBEYq5TG"/></a><div class="flex flex-wrap items-center text-sm text-gray-600"><div class="flex items-center"><a class="hover:text-dark transition-colors duration-200 text-sm" href="/bootstrap-templates">Bootstrap</a><span class="mx-2 text-muted opacity-70">|</span></div><div class="flex items-center"><a class="hover:text-dark transition-colors duration-200 text-sm" href="/angular-templates">Angular</a><span class="mx-2 text-muted opacity-70">|</span></div><div class="flex items-center"><a class="hover:text-dark transition-colors duration-200 text-sm" href="/react-templates">React</a><span class="mx-2 text-muted opacity-70">|</span></div><div class="flex items-center"><a class="hover:text-dark transition-colors duration-200 text-sm" href="/vue-templates">Vuejs</a><span class="mx-2 text-muted opacity-70">|</span></div><div class="flex items-center"><a class="hover:text-dark transition-colors duration-200 text-sm" href="/nextjs-templates">Next Js</a><span class="mx-2 text-muted opacity-70">|</span></div><div class="flex items-center"><a class="hover:text-dark transition-colors duration-200 text-sm" href="/tailwind-templates">Tailwind CSS</a></div></div></div><div data-orientation="horizontal" role="none" data-slot="separator" class="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mt-5"></div><div class="grid grid-cols-12 gap-6 lg:pt-20 lg:pb-16 pt-10 pb-8"><div class="lg:col-span-7 col-span-12"><div class="grid grid-cols-1  gap-6 lg:grid-cols-3 md:grid-cols-3"><div class="flex flex-col gap-3"><p class="sm:mb-4 text-base font-semibold text-card-foreground">Company</p><ul class="space-y-2 text-sm text-muted"><li><a class="text-muted hover:text-dark text-sm " href="/about-us">
1357About WrapPixel</a></li><li><a target="_blank" class="text-muted hover:text-dark text-sm " href="https://wrappixel.lemonsqueezy.com/affiliates">Affiliate Program</a></li><li><a class="text-muted hover:text-dark text-sm " href="/blog">Blog</a></li><li><a class="text-muted hover:text-dark text-sm " href="/career">Career</a></li><li><a class="text-muted hover:text-dark text-sm " href="/made-with-wrappixel">Made with WrapPixel</a></li></ul></div><div class="flex flex-col gap-3"><p class="sm:mb-4 text-base font-semibold text-card-foreground">Help &amp; Support</p><ul class="space-y-2 text-sm text-muted"><li><a class="text-muted hover:text-dark text-sm " href="/contact-us">Contact Us</a></li><li><a class="text-muted hover:text-dark text-sm " href="/support">Premium Support</a></li><li><a class="text-muted hover:text-dark text-sm " href="/hire-us">Custom Development</a></li><li><a class="text-muted hover:text-dark text-sm " href="/license">Licenses</a></li></ul></div><div class="flex flex-col gap-3"><p class="sm:mb-4 text-base font-semibold text-card-foreground">Popular Categories</p><ul class="space-y-2 text-sm text-muted"><li><a class="text-muted hover:text-dark text-sm " href="/free-templates">Free Templates</a></li><li><a class="text-muted hover:text-dark text-sm " href="/react-templates">React Templates</a></li><li><a class="text-muted hover:text-dark text-sm " href="/tailwind-templates">Tailwind Templates</a></li><li><a class="text-muted hover:text-dark text-sm " href="/bootstrap-templates">Bootstrap Templates</a></li><li><a class="text-muted hover:text-dark text-sm " href="/shadcn-dashboard">Shadcn Dashboard</a></li></ul></div></div></div><div class="lg:col-span-5 col-span-12 xl:ps-30 space-y-7"><div class="flex flex-col gap-12 pb-4"><div class="grid grid-cols-12 sm:gap-8 gap-4"><div class="lg:col-span-6 sm:col-span-4 col-span-12"><div class="flex flex-col sm:gap-3"><p class="text-3xl text-card-foreground font-bold">567817</p><p class="text-base text-muted">Customers</p></div></div><div class="lg:col-span-6 sm:col-span-4 col-span-12"><div class="flex flex-col sm:gap-3"><p class="text-3xl text-card-foreground font-bold">575702</p><p class="text-base text-muted">Downloads</p></div></div></div></div><div class="flex gap-4 text-muted"><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/wrappixel"><span></span><span class="sr-only">Facebook</span></a><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://x.com/wrappixel"><span></span><span class="sr-only">Twitter</span></a><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://github.com/wrappixel"><span></span><span class="sr-only">Github</span></a><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://dribbble.com/wrappixel"><span></span><span class="sr-only">Dribbble</span></a><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/channel/UCdFDlrhIchtxF8EmxejUPGQ"><span></span><span class="sr-only">Youtube</span></a><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://www.instagram.com/wrappixel"><span></span><span class="sr-only">Instagram</span></a><a class="text-muted hover:text-dark text-base" target="_blank" rel="noopener noreferrer" href="https://discord.com/invite/eMzE8F6Wqs"><span></span><span class="sr-only">Discord</span></a></div><div class="flex gap-6 items-center text-sm text-gray-600"><div class="flex items-center "><a class="hover:text-dark transition-colors duration-200 text-sm" href="/terms-of-use">Terms and Condition</a></div><div class="flex items-center "><a class="hover:text-dark transition-colors duration-200 text-sm" href="/privacy-policy">Privacy Policy</a></div></div></div></div><div class="grid grid-cols-12 sm:gap-7.5 gap-4 lg:pb-12 pb-8"><a target="_blank" class="lg:col-span-3 sm:col-span-6 col-span-12 group p-6 group h-full bg-transparent border border-border rounded-2xl  shadow-none transition-all duration-300  hover:-translate-y-1" href="https://adminmart.com/"><div class="flex flex-col sm:gap-8 gap-6"><div class="flex gap-2 justify-between"><img alt="https://images.wrappixel.com/partners/adminmart.png" loading="lazy" width="115" height="50" decoding="async" data-nimg="1" class="object-contain h-6 w-auto" style="color:transparent" src="https://images.wrappixel.com/partners/adminmart.png"/><span></span></div><p class="text-sm text-muted-foreground dark:text-white leading-relaxed xl:max-w-50 w-full">The Ultimate Dashboard Templates</p></div></a><a target="_blank" class="lg:col-span-3 sm:col-span-6 col-span-12 group p-6 group h-full bg-transparent border border-border rounded-2xl  shadow-none transition-all duration-300  hover:-translate-y-1" href="https://shadcnspace.com/"><div class="flex flex-col sm:gap-8 gap-6"><div class="flex gap-2 justify-between"><img alt="https://images.wrappixel.com/partners/shadcn.png" loading="lazy" width="115" height="50" decoding="async" data-nimg="1" class="object-contain h-6 w-auto" style="color:transparent" src="https://images.wrappixel.com/partners/shadcn.png"/><span></span></div><p class="text-sm text-muted-foreground dark:text-white leading-relaxed xl:max-w-50 w-full">Shadcn Blocks, Templates and Components</p></div></a><a target="_blank" class="lg:col-span-3 sm:col-span-6 col-span-12 group p-6 group h-full bg-transparent border border-border rounded-2xl  shadow-none transition-all duration-300  hover:-translate-y-1" href="https://tailwind-admin.com/"><div class="flex flex-col sm:gap-8 gap-6"><div class="flex gap-2 justify-between"><img alt="https://images.wrappixel.com/partners/tailwind.png" loading="lazy" width="115" height="50" decoding="async" data-nimg="1" class="object-contain h-6 w-auto" style="color:transparent" src="https://images.wrappixel.com/partners/tailwind.png"/><span></span></div><p class="text-sm text-muted-foreground dark:text-white leading-relaxed xl:max-w-50 w-full">The Ultimate Tailwind Component System</p></div></a><a target="_blank" class="lg:col-span-3 sm:col-span-6 col-span-12 group p-6 group h-full bg-transparent border border-border rounded-2xl  shadow-none transition-all duration-300  hover:-translate-y-1" href="https://themedesigner.in/"><div class="flex flex-col sm:gap-8 gap-6"><div class="flex gap-2 justify-between"><img alt="https://images.wrappixel.com/partners/theme-designer.png" loading="lazy" width="115" height="50" decoding="async" data-nimg="1" class="object-contain h-6 w-auto" style="color:transparent" src="https://images.wrappixel.com/partners/theme-designer.png"/><span></span></div><p class="text-sm text-muted-foreground dark:text-white leading-relaxed xl:max-w-50 w-full">The roof under which we make products</p></div></a></div><div data-orientation="horizontal" role="none" data-slot="separator" class="shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px"></div><div class="sm:py-10 py-8 flex md:flex-row flex-col gap-6 justify-center items-center"><p class="text-center text-sm text-muted ">© 2016-<!-- -->2026<a target="_blank" class="font-medium text-card-foreground px-1" href="https://wrappixel.com/">WrapPixel,</a>Crafted with ❤️ for a smarter web.</p></div></div><div class="hidden ml-6 gap-x-6 gap-y-2 overflow-x-auto min-w-262.5 w-92.5 left-[64%] p-10  from-white via-white/50 bg-linear-to-r bg-linear-to-l"></div></footer>
1357<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
1357<script src="/_next/static/immutable/chunks/0_zdxx92zcn9k.js" id="_R_" async=""></script>
1357<script>(self.__next_f=self.__next_f||[]).push([0])</script>
1357<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[651670,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"\"]\nc:I[703919,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"default\",1]\n:HL[\"/_next/static/immutable/chunks/2775gr8bggl05.css\",\"style\"]\n:HL[\"/_next/static/immutable/chunks/183whya9mwwoj.css\",\"style\"]\n:HL[\"/_next/static/immutable/media/3c285486269019b7-s.p.1br53b7gww62p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/55605e321d2313ca-s.p.1sj8qnvyyatb6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/5691580a0d2e7846-s.p.2gu9-nlpfm81k.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/8f46d218c8f79e34-s.p.092z1_2w2m55_.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/9d978ba009f47915-s.p.1p2xad7_-sbqy.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/a4f4f75ad654963f-s.p.22m3f6pvfu2zf.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n3:T8d0,{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://wrappixel.com/#website\",\"url\":\"https://wrappixel.com\",\"name\":\"WrapPixel\",\"description\":\"WrapPixel provides premium \u0026 free AI-friendly admin dashboards, UI kits, and website templates built with React, Next.js, Vue, Angular, Tailwind CSS, and Bootstrap.\",\"potentialAction\":{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https://wrappixel.com/templates?search={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}},{\"@type\":\"Organization\",\"@id\":\"https://wrappixel.com/#organization\",\"name\":\"WrapPixel\",\"url\":\"https://wrappixel.com\",\"description\":\"WrapPixel is a leading provider of premium \u0026 free admin dashboard templates, UI kits, and website template, crafted with modern technologies like React, Vue, Angular, Next.js, Tailwind, Nuxt.js, Bootstrap and more.\",\"email\":\"[email protected]\",\"foundingDate\":\"2016\",\"legalName\":\"Theme Designer\",\"founder\":[{\"@type\":\"Person\",\"name\":\"Sunil Joshi\",\"url\":\"https://wrappixel.com/author/sunil-joshi/\",\"sameAs\":[\"https://x.com/suniljoshi19\",\"https://www.facebook.com/wrappixel/\"]},{\"@type\":\"Person\",\"name\":\"Nirav Joshi\",\"url\":\"https://wrappixel.com/author/nirav-joshi/\"}],\"address\":{\"@type\":\"PostalAddress\",\"addressCountry\":\"IN\",\"addressLocality\":\"Gota\",\"addressRegion\":\"Ahemdabad\",\"postalCode\":\"382481\",\"streetAddress\":\"1029-30, Money Plant High Street\"},\"location\":{\"@id\":\"https://wrappixel.com/#place\"},\"logo\":{\"@id\":\"https://wrappixel.com/#logo\",\"@type\":\"ImageObject\",\"caption\":\"WrapPixel\",\"contentUrl\":\"https://wrappixel.com/images/logo/dark-logo.svg\",\"height\":33,\"inLanguage\":\"en-US\",\"url\":\"https://wrappixel.com/images/logo/dark-logo.svg\",\"width\":173},\"sameAs\":[\"https://discord.com/invite/eMzE8F6Wqs\",\"https://dribbble.com/wrappixel\",\"https://github.com/wrappixel\",\"https://x.com/WrapPixel\",\"https://www.facebook.com/wrappixel\",\"https://www.instagram.com/wrappixel\",\"https://www.linkedin.com/company/wrappixel\",\"https://www.youtube.com/@wrappixel\"]},{\"@type\":\"Place\",\"@id\":\"https://wrappixel.com/#place\",\"address\":{\"@type\":\"PostalAddress\",\"addressCountry\":\"IN\",\"addressLocality\":\"Gota\",\"addressRegion\":\"Ahemdabad\",\"postalCode\":\"382481\",\"streetAddress\":\"1029-30, Money Plant High Street\"}}]}a:X\n0:{\"P\":null,\"c\":[\"\",\"templates\",\"spike-react-tailwind-admin-template\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"(site)\",{\"children\":[\"templates\",{\"children\":[[\"slug\",\"spike-react-tailwind-admin-template\",\"d\",[]],{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4256]},\"$undefined\",\"$undefined\",4192]},\"$undefined\",\"$undefined\",4192]},\"$undefined\",\"$undefined\",4160]},\"$undefined\",\"$undefined\",4112],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/2775gr8bggl05.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/183whya9mwwoj.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"async\":true,\"nonce\":\"$undefined\"}
1357],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"className\":\"light\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"$L2\",null,{\"id\":\"tawk-to\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n              var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();\\n              (function(){\\n                var s1=document.createElement(\\\"script\\\"),s0=document.getElementsByTagName(\\\"script\\\")[0];\\n                s1.async=true;\\n                s1.src='https://embed.tawk.to/5dd3f056d96992700fc82f54/default';\\n                s1.charset='UTF-8';\\n                s1.setAttribute('crossorigin','*');\\n                s0.parentNode.insertBefore(s1,s0);\\n              })();\\n            \"}}]}],[\"$\",\"body\",null,{\"className\":\"be_vietnam_pro_3438f11d-module__oKYJxa__className antialiased\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L2\",null,{\"id\":\"gtm-script\",\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-7NTE0RJE6G\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L2\",null,{\"id\":\"iconify-script\",\"src\":\"https://code.iconify.design/3/3.1.1/iconify.min.js\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L2\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n            window.dataLayer = window.dataLayer || [];\\n            function gtag(){dataLayer.push(arguments);}\\n            gtag('js', new Date());\\n            gtag('config', 'G-7NTE0RJE6G');\\n          \"}],[\"$\",\"$L2\",null,{\"id\":\"schema-org\",\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$3\"}}],\"$L4\",\"$L5\"]}]]}]]}],{\"children\":[\"$L6\",{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,null]},null,false,\"$a\"]},null,false,\"$a\"]},null,false,null]},null,false,null],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[\"$Ld\",\"$Le\"]],\"S\":true,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\"}\nf:I[746798,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"TooltipProvider\"]\n10:I[660222,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"default\"]\n11:I[129499,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"default\"]\n12:I[349694,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/05mvdn-d8v7vs.js\"],\"\"]\n13:I[484398,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"default\"]\n16:I[548260,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"OutletBoundary\"]\n17:\"$Sreact.suspense\"\n19:I[548260,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"ViewportBoundary\"]\n1b:I[548260,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"MetadataBoundary\"]\n4:[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"h-screen flex flex-col gap-6  items-center justify-center\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 520 160\",\"className\":\"w-full max-w-2xl h-auto\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-label\":\"404\",\"children\":[[\"$\",\"defs\",null,{\"children\":[\"$\",\"linearGradient\",null,{\"id\":\"grad404\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\",\"y2\":\"100%\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"stopColor\":\"#6366f1\"}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"stopColor\":\"#a855f7\"}]]}]}],[\"$\",\"text\",null,{\"x\":\"50%\",\"y\":\"52%\",\"dominantBaseline\":\"middle\",\"textAnchor\"
1357:\"middle\",\"fontSize\":\"140\",\"fontWeight\":\"900\",\"fontFamily\":\"ui-sans-serif, system-ui, sans-serif\",\"fill\":\"none\",\"stroke\":\"#e2e8f0\",\"strokeWidth\":\"2\",\"dx\":\"3\",\"dy\":\"4\",\"children\":\"404\"}],[\"$\",\"text\",null,{\"x\":\"50%\",\"y\":\"52%\",\"dominantBaseline\":\"middle\",\"textAnchor\":\"middle\",\"fontSize\":\"140\",\"fontWeight\":\"900\",\"fontFamily\":\"ui-sans-serif, system-ui, sans-serif\",\"fill\":\"none\",\"stroke\":\"url(#grad404)\",\"strokeWidth\":\"3\",\"children\":\"404\"}],[\"$\",\"text\",null,{\"x\":\"50%\",\"y\":\"52%\",\"dominantBaseline\":\"middle\",\"textAnchor\":\"middle\",\"fontSize\":\"140\",\"fontWeight\":\"900\",\"fontFamily\":\"ui-sans-serif, system-ui, sans-serif\",\"fill\":\"url(#grad404)\",\"opacity\":\"0.15\",\"children\":\"404\"}],[\"$\",\"circle\",null,{\"cx\":\"30\",\"cy\":\"30\",\"r\":\"6\",\"fill\":\"#6366f1\",\"opacity\":\"0.4\"}],[\"$\",\"circle\",null,{\"cx\":\"50\",\"cy\":\"55\",\"r\":\"4\",\"fill\":\"#a855f7\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"18\",\"cy\":\"65\",\"r\":\"3\",\"fill\":\"#6366f1\",\"opacity\":\"0.25\"}],[\"$\",\"circle\",null,{\"cx\":\"490\",\"cy\":\"30\",\"r\":\"6\",\"fill\":\"#a855f7\",\"opacity\":\"0.4\"}],[\"$\",\"circle\",null,{\"cx\":\"470\",\"cy\":\"55\",\"r\":\"4\",\"fill\":\"#6366f1\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"500\",\"cy\":\"65\",\"r\":\"3\",\"fill\":\"#a855f7\",\"opacity\":\"0.25\"}],[\"$\",\"circle\",null,{\"cx\":\"260\",\"cy\":\"10\",\"r\":\"5\",\"fill\":\"#6366f1\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"240\",\"cy\":\"145\",\"r\":\"4\",\"fill\":\"#a855f7\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"280\",\"cy\":\"148\",\"r\":\"3\",\"fill\":\"#6366f1\",\"opacity\":\"0.2\"}]]}],[\"$\",\"div\",null,{\"className\":\"text-center space-y-1\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-4xl font-bold \",\"children\":\"Opps, Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"text-muted text-base max-w-md\",\"children\":\"The page you are looking for may have been moved, deleted, or possibly never existed. Please check the URL or return to the homepage.\"}]]}],[\"$\",\"$L12\",null,{\"href\":\"/\",\"children\":\"Back To Home\",\"data-slot\":\"button\",\"data-variant\":\"default\",\"data-size\":\"default\",\"className\":\"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 bg-primary text-white hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]\n5:[\"$\",\"$L13\",null,{}]\n6:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-4\",{\"src\":\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-5\",{\"src\":\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\",\"async\":true,\"nonce\":\"$undefined\"}]],\"$L14\"]}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$L15\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/1chlu_1mzrmje.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/immutable/chunks/0jk6a5d1d0pz0.js\",\"async\":true,\"nonce\":\"$undefined\"}
1357],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/immutable/chunks/0w3wza_ti9t7u.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@18\"}]}]]}]\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L19\",null,{\"children\":\"$L1a\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1b\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1c\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\nd:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/2775gr8bggl05.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\ne:[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/183whya9mwwoj.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\na:C\n1a:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
1357<script>self.__next_f.push([1,"1d:I[977817,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"default\"]\n1e:I[74856,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"DashboardContextProvider\"]\n1f:I[68581,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"AuthProvider\"]\n20:I[464043,[\"/_
1357next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"BlogContextProvider\"]\n21:I[253050,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"Header\"]\n22:I[284505,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"default\"]\n23:I[713354,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\"],\"Toaster\"]\n14:[[\"$\",\"$L1d\",null,{\"color\":\"#6743ea\"}],[\"$\",\"$L1e\",null,{\"initialProducts\":[],\"initialCategory\":[],\"children\":[\"$\",\"$L1f\",null,{\"children\":[\"$\",\"$L20\",null,{\"initialBlogs\":[],\"children\":[[\"$\",\"$L21\",null,{}],[\"$\",\"main\",null,{\"className\":\"bg-card\",\"children\":[\"$\",\"$L10\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L11\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"h-screen flex flex-col gap-6  items-center justify-center\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 520 160\",\"className\":\"w-full max-w-2xl h-auto\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"aria-label\":\"404\",\"children\":[[\"$\",\"defs\",null,{\"children\":[\"$\",\"linearGradient\",null,{\"id\":\"grad404\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\",\"y2\":\"100%\",\"children\":[[\"$\",\"stop\",null,{\"offset\":\"0%\",\"stopColor\":\"#6366f1\"}],[\"$\",\"stop\",null,{\"offset\":\"100%\",\"stopColor\":\"#a855f7\"}]]}]}],[\"$\",\"text\",null,{\"x\":\"50%\",\"y\":\"52%\",\"dominantBaseline\":\"middle\",\"textAnchor\":\"middle\",\"fontSize\":\"140\",\"fontWeight\":\"900\",\"fontFamily\":\"ui-sans-serif, system-ui, sans-serif\",\"fill\":\"none\",\"stroke\":\"#e2e8f0\",\"strokeWidth\":\"2\",\"dx\":\"3\",\"dy\":\"4\",\"children\":\"404\"}],[\"$\",\"text\",null,{\"x\":\"50%\",\"y\":\"52%\",\"dominantBaseline\":\"middle\",\"textAnchor\":\"middle\",\"fontSize\":\"140\",\"fontWeight\":\"900\",\"fontFamily\":\"ui-sans-serif, system-ui, sans-serif\",\"fill\":\"none\",\"stroke\":\"url(#grad404)\",\"strokeWidth\":\"3\",\"children\":\"404\"}],[\"$\",\"text\",null,{\"x\":\"50%\",\"y\":\"52%\",\"dominantBaseline\":\"middle\",\"textAnchor\"
1357:\"middle\",\"fontSize\":\"140\",\"fontWeight\":\"900\",\"fontFamily\":\"ui-sans-serif, system-ui, sans-serif\",\"fill\":\"url(#grad404)\",\"opacity\":\"0.15\",\"children\":\"404\"}],[\"$\",\"circle\",null,{\"cx\":\"30\",\"cy\":\"30\",\"r\":\"6\",\"fill\":\"#6366f1\",\"opacity\":\"0.4\"}],[\"$\",\"circle\",null,{\"cx\":\"50\",\"cy\":\"55\",\"r\":\"4\",\"fill\":\"#a855f7\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"18\",\"cy\":\"65\",\"r\":\"3\",\"fill\":\"#6366f1\",\"opacity\":\"0.25\"}],[\"$\",\"circle\",null,{\"cx\":\"490\",\"cy\":\"30\",\"r\":\"6\",\"fill\":\"#a855f7\",\"opacity\":\"0.4\"}],[\"$\",\"circle\",null,{\"cx\":\"470\",\"cy\":\"55\",\"r\":\"4\",\"fill\":\"#6366f1\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"500\",\"cy\":\"65\",\"r\":\"3\",\"fill\":\"#a855f7\",\"opacity\":\"0.25\"}],[\"$\",\"circle\",null,{\"cx\":\"260\",\"cy\":\"10\",\"r\":\"5\",\"fill\":\"#6366f1\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"240\",\"cy\":\"145\",\"r\":\"4\",\"fill\":\"#a855f7\",\"opacity\":\"0.3\"}],[\"$\",\"circle\",null,{\"cx\":\"280\",\"cy\":\"148\",\"r\":\"3\",\"fill\":\"#6366f1\",\"opacity\":\"0.2\"}]]}],[\"$\",\"div\",null,{\"className\":\"text-center space-y-1\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-4xl font-bold \",\"children\":\"Opps, Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"text-muted text-base max-w-md\",\"children\":\"The page you are looking for may have been moved, deleted, or possibly never existed. Please check the URL or return to the homepage.\"}]]}],[\"$\",\"$L12\",null,{\"href\":\"/\",\"children\":\"Back To Home\",\"data-slot\":\"button\",\"data-variant\":\"default\",\"data-size\":\"default\",\"className\":\"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [\u0026_svg]:pointer-events-none [\u0026_svg]:shrink-0 [\u0026_svg:not([class*='size-'])]:size-4 bg-primary text-white hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L22\",null,{\"customers\":567817,\"downloads\":575702}],[\"$\",\"$L23\",null,{\"position\":\"top-center\"}]]}]}]}]]\n"])</script>
1357<script>self.__next_f.push([1,"24:I[736000,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\",\"/_next/static/immutable/chunks/0jn57h87c9wbq.js\",\"/_next/static/immutable/chunks/2qm9pr9c_vza-.js\",\"/_next/static/immutable/chunks/29mlhdfyhr6xg.js\",\"/_next/static/immutable/chunks/18cp4nqu746j2.js\",\"/_next/static/immutable/chunks/13sgxr5h0jhwf.js\",\"/_next/static/immutable/chunks/3x1cz_ocbvu49.js\",\"/_next/static/immutable/chunks/1chlu_1mzrmje.js\",\"/_next/static/immutable/chunks/0jk6a5d1d0pz0.js\",\"/_next/static/immutable/chunks/0w3wza_ti9t7u.js\"],\"default\"]\n25:Tabf,\u003csection\u003e\n  \u003cdiv class=\"prose\"\u003e\n    \u003cdiv class=\"py-8 md:py-14\"\u003e\n      \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"scrollbar-hide\"\u003e\n          \u003cdiv class=\"xs:grid-cols-2 border-border grid grid-cols-1 rounded-md border sm:grid-cols-3 lg:grid-cols-6\"\u003e\n            \u003cdiv class=\"border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5\"\u003e\n              \u003cspan class=\"iconify w-35 text-3xl\" data-icon=\"vscode-icons:file-type-reactjs\"\u003e\u003c/span\u003e\n              \u003cdiv\u003e\n                \u003cp class=\"text-dark text-base font-medium\"\u003ev19.2.6\u003c/p\u003e\n                \u003cp class=\"text-muted text-sm\"\u003eReact\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5\"\u003e\n              \u003cspan class=\"iconify w-35 text-3xl\" data-icon=\"vscode-icons:file-type-tailwind\"\u003e\u003c/span\u003e\n              \u003cdiv\u003e\n                \u003cp class=\"text-dark text-base font-medium\"\u003ev4.3.0\u003c/p\u003e\n                \u003cp class=\"text-muted text-sm\"\u003eTailwind\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5\"\u003e\n              \u003cspan class=\"iconify w-35 text-3xl\" data-icon=\"cryptocurrency-color:apex\"\u003e\u003c/span\u003e\n              \u003cdiv\u003e\n                \u003cp class=\"text-dark text-base font-medium\"\u003ev5.13.0\u003c/p\u003e\n                \u003cp class=\"text-muted text-sm\"\u003eApexcharts\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5\"\u003e\n              \u003cspan class=\"iconify w-35 text-3xl\" data-icon=\"simple-icons:shadcnui\"\u003e\u003c/span\u003e\n\n              \u003cdiv\u003e\n                \u003cp class=\"text-dark text-base font-medium\"\u003elatest\u003c/p\u003e\n                \u003cp class=\"text-muted text-sm\"\u003eShadcn\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"border-border flex items-center justify-start gap-4 px-5 py-3 sm:border-r lg:justify-center lg:py-5\"\u003e\n              \u003cspan class=\"iconify w-35 text-3xl\" data-icon=\"devicon:firebase\"\u003e\u003c/span\u003e\n              \u003cdiv\u003e\n                \u003cp class=\"text-dark text-base font-medium\"\u003ev11.0.2\u003c/p\u003e\n                \u003cp class=\"text-muted text-sm\"\u003eFirebase\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex items-center justify-start gap-4 px-5 py-3 lg:justify-center lg:py-5\"\u003e\n              \u003cspan class=\"iconify w-35 text-3xl\" data-icon=\"simple-icons:swr\"\u003e\u003c/span\u003e\n              \u003cdiv\u003e\n                \u003cp class=\"text-dark text-base font-medium\"\u003ev2.2.5\u003c/p\u003e\n                \u003cp class=\"text-muted text-sm\"\u003eSWR\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e26:T2a7c,\u003csection id=\"changelog\"\u003e\n  \u003cdiv class=\"prose\"\u003e\n    \u003cdiv class=\"py-8 md:py-14\"\u003e\n      \u003cdiv class=\"container mx-auto\"\u003e\n        \u003cdiv class=\"flex flex-col gap-6\"\u003e\n          \u003ch2 class=\"text-dark text-2xl font-bold\"\u003eChangelog\u003c/h2\u003e\n          \u003cdiv class=\"border-border space-y-12 rounded-md border p-6\"\u003e\n            \u003c!-- Version 2.0.0 --\u003e\n            \u003cdiv class=\"space-y-4\"\u003e\n              \u003cp class=\"text-card-foreground text-lg font-medium\"\u003eVersion 2.0.0 (01st June 2026)\u003c/p\u003e\n              \u003cdiv class=\"grid grid-cols-1 gap-4 md:grid-cols-2\"\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cp class=\"text-muted flex-1 text-base leading-tight\"\u003eMigrated project core to Shadcn UI components\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cp class=\"text-muted flex-1 text-base leading-tight\"\u003eRemoved the flowbite-react dependencies\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cp class=\"text-muted flex-1 text-base leading-tight\"\u003eUpdated Tailwind CSS version to V4\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cp class=\"text-muted flex-1 text-base leading-tight\"\u003eRemoved Headless UI package and related utility wrappers\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cp class=\"text-muted flex-1 text-base leading-tight\"\u003eAll packages updated to their latest versions\u003c/p\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cdiv class=\"flex-1 space-y-2\"\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eAdded New Apps\u003c/p\u003e\n                    \u003cul class=\"text-muted flex w-fit flex-col gap-2 text-sm\"\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        AI Image Generator App\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        AI Chat App\n                      \u003c/li\u003e\n                    \u003c/ul\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cdiv class=\"flex-1 space-y-2\"\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eUpdated Apps\u003c/p\u003e\n                    \u003cul class=\"text-muted flex w-fit flex-col gap-2 text-sm\"\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Blog App - Added Create, Edit, and Manage Blog pages for full blog post management.\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Invoice App -Fully redesigned with an updated layout and improved using shadcn/ui components.\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        E-commerce App - Rede
1357signed and updated\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        User Profile App - Removed User Profile 2 and User Profile 1 has been updated\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Kanban App - fully updated UI and layout\n                      \u003c/li\u003e\n                    \u003c/ul\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cdiv class=\"flex-1 space-y-2\"\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eAdded Pages\u003c/p\u003e\n                    \u003cul class=\"text-muted flex w-fit flex-col gap-2 text-sm\"\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Integrations Page\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        API Keys page\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Empty State pages\n                      \u003c/li\u003e\n                    \u003c/ul\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cdiv class=\"flex-1 space-y-2\"\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eAdded Forms Components\u003c/p\u003e\n                    \u003cul class=\"text-muted flex w-fit flex-col gap-2 text-sm\"\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Form Wizard for multi-step workflows\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Form Examples Page showcasing form layouts and patterns\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Repeater Form for dynamically adding and removing fields\n                      \u003c/li\u003e\n                    \u003c/ul\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"flex items-start gap-2\"\u003e\n                  \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                  \u003cdiv class=\"flex-1 space-y-2\"\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eNew AI Prompt Features:\u003c/p\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eAdded a new Prompts Page with a visual intro page that helps you discover and use pre-built prompts for your project. Introduced a dedicated Prompt Library with a collection of ready-to-use AI prompts designed to speed up development and improve workflow efficie
1357ncy.\u003c/p\u003e\n                    \u003cp class=\"text-base leading-none\"\u003eIncludes 9 prompt categories with 15+ ready-to-use prompts:\u003c/p\u003e\n                    \u003cul class=\"text-muted flex w-fit flex-col gap-2 text-sm\"\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Dashboard - Build a dashboard from scratch or update an existing components.\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Apps - Keep selected app and remove others\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Auth - Generate complete auth pages instantly\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Branding - Update logos, SVGs, and branding elements\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Components - Build sortable data tables\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Forms - Build validated form components with one prompt\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Language - Add or remove languages with translations\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Navigation - Manage menus, sidebar nesting, badges, and routing\n                      \u003c/li\u003e\n                      \u003cli class=\"flex gap-2\"\u003e\n                        \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                        Theming - Switch between light and dark mode, change colors, or RTL layout\n                      \u003c/li\u003e\n                    \u003c/ul\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c!-- Version 1.0.0 --\u003e\n            \u003cdiv class=\"space-y-4\"\u003e\n              \u003cp class=\"text-dark text-lg font-medium\"\u003eVersion 1.0.0 (10th June 2025)\u003c/p\u003e\n              \u003cdiv class=\"flex items-center gap-2\"\u003e\n                \u003cspan class=\"iconify text-success text-lg\" data-icon=\"solar:check-circle-bold\"\u003e\u003c/span\u003e\n                \u003cp class=\"text-muted flex-1 text-base\"\u003eInitial Release\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e27:T27ab,\u003csection\u003e\n  \u003cdiv class=\"prose pb-5\"\u003e\n    \u003cdiv class=\"py-8 md:py-14\"\u003e\n      \u003cdiv class=\"container mx-auto\"\u003e\n        \u003cdiv class=\"flex flex-col gap-8 md:gap-12\"\u003e\n          \u003c!-- Header --\u003e\n          \u003cdiv class=\"max-w-3xl\"\u003e\n            \u003cp class=\"text-sm text-muted\"\u003eWhat’s the features?\u003c/p\u003e\n            \u003ch3 class=\"text-2xl text-dark\"\u003e\n              Here are the numerous features we've included.\n            \u003c/h3\u003e\n          \u003c/div\u003e\n          \u003cdiv\n            class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8\"\n          \u003e\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:magic-stick-3-outline\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003e6 Theme Colors\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  We have included 6 pre-defined Theme Colors with Modernize\n                  Admin.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:archive-check-outline\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003e\n                  4+ Frontend Pages\n                \u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  Yes, we have addded 4+ frontend pages.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:calendar-broken\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eCalendar Design\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  Calendar is available with our package \u0026 in nice design.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"tabler:brand-headlessui\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eHeadless Ui\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  Headless UI is a UI components that provide functionality\n                  without imposing any design.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:refresh-bold\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eRegular Updates\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  We are constantly updating our pack with new features.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:notification-unread-lines-linear\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003e\n                  65+ Page Templates\n                \u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  Indeed, we offer 6 demos, each featuring over 65+ pages, to\n                  simplify the process.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:widget-3-linear\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003e\n                  45+ UI Components\n                \u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  Almost 45+ UI Components being given with Spike Admin Pack.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"tabler:brand-tailwind\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eTailwind\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  It is built using Tailwind, a robust UI component framework.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:fire-outline\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eFirebase\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                  offer robust real-time database capabilities, authentication,\n                  and additional features.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \n             \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:link-round-angle-outline\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003ei18 React\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n                react-i18 is a robust framework for internationalization in React applications.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"simple-icons:shadcnui\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eShadcn\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n               Shadcn is a customizable UI component library for React, built on Radix UI.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n             \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:chart-outline\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eLots of Chart Options\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n            With ApexCharts, we offer a wide variety of chart options if you can name it, we likely have it.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n             \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:bedside-table-3-outline\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eLots of Table Examples\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n          Data Tables are initial requirement and we added them.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex gap-5\"\u003e\n              \u003cdiv\n                class=\"h-16 w-16 rounded-full bg-accent flex justify-center items-center\"\n              \u003e\n                \u003cspan\n                  class=\"iconify size-6 text-dark\"\n                  data-icon=\"solar:book-bookmark-linear\"\n                \u003e\u003c/span\u003e\n              \u003c/div\u003e\n              \u003cdiv class=\"flex flex-col gap-1 flex-1\"\u003e\n                \u003ch4 class=\"text-lg font-semibold text-dark\"\u003eDetailed Documentation\u003c/h4\u003e\n                \u003cp class=\"text-base text-muted\"\u003e\n        We have made detailed documentation, so it will easy to use.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n\n          \u003c/div\u003e\n        \u003c/
1357div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n28:Tc409,\u003csection id=\"appsdemos\"\u003e\n  \u003cdiv class=\"prose\"\u003e\n    \u003cdiv class=\"py-8 md:py-14\"\u003e\n      \u003cdiv class=\"container mx-auto\"\u003e\n        \u003cdiv class=\"flex flex-col gap-8 sm:gap-12\"\u003e\n          \n          \u003cdiv class=\"max-w-3xl\"\u003e\n            \u003cp class=\"text-sm text-muted\"\u003eWhat’s included?\u003c/p\u003e\n            \u003ch2 class=\"text-2xl text-dark\"\u003e\n              The package includes over 12 stunning and user-friendly\n              application designs\n            \u003c/h2\u003e\n          \u003c/div\u003e\n\n          \n          \u003cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8\"\u003e\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Calendar App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-calendar.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/calendar\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Calendar App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/calendar\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Chat App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-chat.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/chats\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Chat App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/chats\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Contact App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-contact.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/contacts\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Contact App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/contacts\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"User Profile App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-user-profile.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/user-profile/profiletwo\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  User Profile App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/user-profile/profiletwo\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Blog App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-blog.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/blog/post\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Blog App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/blog/post\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Blog Detail App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-blog-detail.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/blog/detail/early-black-friday-amazon-deals-cheap-tvs-headphones-laptops\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Blog Detail App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/blog/detail/early-black-friday-amazon-deals-cheap-tvs-headphones-laptops\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"eCommerce Shop App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-shop.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/ecommerce/shop2\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  eCommerce Shop App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/ecommerce/shop2\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n          \n\n             \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"eCommerce Detail App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-product-detail.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/ecommerce/detail-two/5\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  eCommerce Detail App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/ecommerce/detail-two/5\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n\n             \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"eCommerce List App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-productlist.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/ecommerce/list\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  eCommerce List App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/ecommerce/list\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Invoice App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-invoice.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/invoice/list\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Invoice App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/invoice/list\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n             \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Kanban App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-kanban.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/kanban\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Kanban App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/kanban\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg alt=\"Notes App\" class=\"w-full h-full rounded\" src=\"https://images.wrappixel.com/templates/pro/spike/apps/app-note.webp\"\u003e\n                \u003cdiv class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\u003e\n                  \u003ca href=\"https://spike-react-tailwind-main.netlify.app/apps/notes\" target=\"_blank\" class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:laptop-minimalistic-outline\" class=\"iconify size-6 text-white iconify--solar\"\u003e\u003cpath fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M8.945 2.25h6.11c1.367 0 2.47 0 3.337.117c.9.12 1.658.38 2.26.981c.602.602.86 1.36.982 2.26c.116.867.116 1.97.116 3.337v5.107c0 .899 0 1.648-.08 2.242c-.084.628-.27 1.195-.726 1.65c-.455.456-1.022.642-1.65.726c-.594.08-1.343.08-2.242.08H6.948c-.898 0-1.648 0-2.242-.08c-.628-.084-1.195-.27-1.65-.726c-.456-.455-.
1357642-1.022-.726-1.65c-.08-.594-.08-1.344-.08-2.242V8.945c0-1.367 0-2.47.117-3.337c.12-.9.38-1.658.981-2.26c.602-.602 1.36-.86 2.26-.981c.867-.117 1.97-.117 3.337-.117M5.808 3.853c-.734.099-1.122.28-1.399.556c-.277.277-.457.665-.556 1.4C3.752 6.562 3.75 7.564 3.75 9v5c0 .964.002 1.612.067 2.095c.062.461.169.659.3.789s.327.237.788.3c.483.064 1.131.066 2.095.066h10c.964 0 1.612-.002 2.095-.067c.461-.062.659-.169.789-.3s.237-.327.3-.788c.064-.483.066-1.131.066-2.095V9c0-1.435-.002-2.437-.103-3.192c-.099-.734-.28-1.122-.556-1.399c-.277-.277-.665-.457-1.4-.556c-.755-.101-1.756-.103-3.191-.103H9c-1.435 0-2.437.002-3.192.103M8.25 15a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75m-7 6a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75\" clip-rule=\"evenodd\"\u003e\u003c/path\u003e\u003c/svg\u003e\n\n                    \u003cspan class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\u003e\n                      Live Preview\n\n                      \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:alt-arrow-down-bold\" class=\"iconify size-4 text-dark absolute btm-10 left-40 iconify--solar\"\u003e\u003cpath fill=\"currentColor\" d=\"m12.37 15.835l6.43-6.63C19.201 8.79 18.958 8 18.43 8H5.57c-.528 0-.771.79-.37 1.205l6.43 6.63c.213.22.527.22.74 0\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Notes App\n                \u003c/p\u003e\n\n                \u003ca target=\"_blank\" href=\"https://spike-react-tailwind-main.netlify.app/apps/notes\" class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\u003e\n                  \u003cspan class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\u003e\n                    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\" role=\"img\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" data-icon=\"solar:arrow-right-up-linear\" class=\"iconify text-lg iconify--solar\"\u003e\u003cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M6 18L18 6m0 0H9m9 0v9\"\u003e\u003c/path\u003e\u003c/svg\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e29:T46a8,"])</script>
1357<script>self.__next_f.push([1,"\u003csection\u003e\n  \u003cdiv class=\"prose\"\u003e\n    \u003cdiv class=\"py-8 md:py-14\"\u003e\n      \u003cdiv class=\"container mx-auto\"\u003e\n        \u003cdiv class=\"flex flex-col gap-8 sm:gap-12\"\u003e\n          \u003c!-- Header --\u003e\n          \u003cdiv class=\"max-w-3xl\"\u003e\n            \u003cp class=\"text-sm text-muted\"\u003eWhat’s included?\u003c/p\u003e\n            \u003ch2 class=\"text-2xl text-dark\"\u003e\n              Spike React Tailwind Admin includes 6 fully-featured and highly\n              customizable demo variations\n            \u003c/h2\u003e\n          \u003c/div\u003e\n\n          \u003c!-- Grid --\u003e\n          \u003cdiv\n            class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8\"\n          \u003e\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded group-hover\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/demos/demo-main.webp\"\n                  alt=\"Main Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/\"\n                    target=\"_blank\"\n                    class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      class=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Main Demo Version\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/demos/demo-dark.webp\"\n                  alt=\"Dar
1357k Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                 \u003cdiv\n                  class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-dark.netlify.app/dashboards/dashboard2\"\n                    target=\"_blank\"\n                    class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      class=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Dark Demo Version\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-dark.netlify.app/dashboards/dashboard2\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/demos/demo-horizontal.webp\"\n                  alt=\"Horizontal Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-horizontal.netlify.app/\"\n                    target=\"_blank\"\n                    class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      class=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Horizontal Demo Version\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-horizontal.netlify.app/\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/demos/demo-mini.webp\"\n                  alt=\"Minisidebar Demo Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                 \u003cdiv\n                  class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-minisidebar.netlify.app/\"\n                    target=\"_blank\"\n                    class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      class=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Minisidebar Demo Version\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-minisidebar.netlify.app/\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/demos/demo-rtl.webp\"\n                  alt=\"RTL Demo Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-rtl.netlify.app/dashboards/dashboard2\"\n                    target=\"_blank\"\n                    class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      class=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  RTL Demo Version\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-rtl.netlify.app/dashboards/dashboard2\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/demos/demo-firebase.webp\"\n                  alt=\"Firebase Demo Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  class=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-firebase.netlify.app/\"\n                    target=\"_blank\"\n                    class=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      class=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      class=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Firebase Demo Version\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-firebase.netlify.app/\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n2a:T54f7,\u003csection id=\"faq-html\"\u003e\n  \u003cdiv class=\"prose\"\u003e\n    \u003cdiv class=\"py-11 md:py-20\"\u003e\n      \u003cdiv class=\"container mx-auto px-4\"\u003e\n        
1357\u003cdiv class=\"flex flex-col gap-12 max-w-[800px] mx-auto\"\u003e\n          \u003cdiv class=\"flex flex-col gap-6 items-center max-w-4xl mx-auto\"\u003e\n            \u003cp\n              class=\"ppy-1 px-4 bg-primary/10 w-fit text-primary text-base font-normal border border-primary rounded-full\"\n            \u003e\n              Faqs\n            \u003c/p\u003e\n            \u003cdiv class=\"flex flex-col items-center text-center gap-2\"\u003e\n              \u003ch2\n                class=\"text-2xl sm:text-3xl md:text-4xl text-card-foreground font-semibold tracking-tight\"\n              \u003e\n                Frequently asked questions\n              \u003c/h2\u003e\n              \u003ch3 class=\"text-base text-muted font-normal\"\u003e\n                Answered all frequently asked questions, still confused? Feel\n                free to open a support ticket.\n              \u003c/h3\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv\n            class=\"flex flex-col gap-4 relative before:content-[''] before:absolute before:top-[40px] before:left-[-65px] before:h-full before:w-full before:bg-[url('/images/icon/circle-pattern.svg')] before:bg-no-repeat before:z-1 dark:before:opacity-20 xl:before:block before:hidden after:content-[''] after:absolute after:bottom-[35px] after:right-[-38px] after:h-full after:w-full after:bg-[url('/images/icon/circle-pattern2.svg')] after:bg-no-repeat after:bg-right-bottom dark:after:opacity-20 xl:after:block after:hidden\"\n          \u003e\n            \u003c!-- FAQ 01 --\u003e\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      What is MatDash Tailwind React Admin Dashboard?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  MatDash Tailwind React Admin Dashboard Template is developer\n                  friendly and multipurpose admin panel template build on top of\n                  Tailwind Templates. It helps you to speed up your web\n                  development 10x by offering you ready to use components,\n                  amazing dashboard variations, application design, dark and\n                  light color skins, RTL support and much more.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003c!-- FAQ 02 --\u003e\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      How long will I receive updates of the template?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  You will receive a 1 year free update with your purchase. If\n                  you want to re
1357ceive updates after 1 year, you need to renew\n                  the license and we offer a 50% discount on renewals.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003c!-- FAQ 03 --\u003e\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      What could I build using MatDash Theme?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  Using MatDash, you can build any web application and website.\n                  You can change the logo, colors, fonts etc and you can do any\n                  modifications or changes you want to do in our template to\n                  match with your requirements. You are not allowed to use our\n                  theme as it is. Also you are not allowed to use our template\n                  in any offline or online page builder. In such cases you can\n                  get in touch via the contact page.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003c!-- FAQ 04 --\u003e\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      Can I use MatDash in a commercial project?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  Yes, you can use a template more than once under multiple-use\n                  and extended multiple-use licenses.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003c!-- FAQ 05 --\u003e\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      Can I use MatDash in a commercial project ?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  Yes, you can use the MatDash template for both personal as\n                  well as commercial projects.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      How can I make payment for the template?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  Payment for our templates can be made through PayPal or\n                  Credit/Debit cards including Visa, Discover, UnionPay,\n                  American Express, and Mastercard.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      Do I have to pay for every template by AdminMart?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  AdminMart offers many templates for free as well so you don’t\n                  have to pay for them.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      Is there a money-back guarantee?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  Yes, all of our premium templates come with a 100% money-back\n                  guarantee for 48 hours. So you can download and check our\n                  templates in 48 hours and request a refund if you do not like\n                  our template or if it is not the right fit. No questions will\n                  be asked. After 48 hours, no refund will be provided.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      How long do I get support for my purchased template and\n                      what is included in the support?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  We offer 1 year of premium support for your purchased\n                  template. You can create a support ticket from our website and\n                  can expect a response in one business day from our\n                  professional team. Support does include if you have found any\n                  bugs within our template. It does not include any help with\n                  your project integration or any third party integration. You\n                  can expect responses from Monday to Frid
1357ay between 10 am to 6\n                  pm IST time.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                  \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      What does “license” mean?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  The license refers to how a purchased product can be used.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      How many licenses does AdminMart offer?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  Adminmart offers four licenses with its premium templates.\n                  These licenses are single-use, multiple-use, extended-use, and\n                  multiple-extended use.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"accordion-item shadow-sm border border-border rounded-md px-4 py-3 sm:p-5 bg-white dark:bg-dark z-1\"\n            \u003e\n              \u003ch3 class=\"flex\"\u003e\n                \u003cbutton\n                  type=\"button\"\n                  class=\"accordion-header flex flex-1 gap-2 justify-between items-center text-sm font-medium text-left cursor-pointer\"\n                \u003e\n                  \u003cdiv class=\"flex gap-2 items-center\"\u003e\n                    \n                    \u003cp\n                      class=\"sm:text-lg text-base tracking-tight font-semibold text-card-foreground\"\n                    \u003e\n                      Can I resell or re-distribute a template under any\n                      license?\n                    \u003c/p\u003e\n                  \u003c/div\u003e\n                  \u003cdiv\n                    class=\"plus-icon border border-border p-1 rounded-full transition-transform duration-200\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:alt-arrow-down-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/button\u003e\n              \u003c/h3\u003e\n              \u003cdiv\n                class=\"accordion-content overflow-hidden text-sm max-h-0 transition-all duration-300 ease-in-out pb-0 \"\n              \u003e\n                \u003cp class=\"text-sm leading-7 text-muted pt-4\"\u003e\n                  No, you cannot resell or redistribute our product no matter\n                  which license you have purchased.\n                \u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n2b:T539,\u003cdiv class=\"flex flex-col gap-4 py-8 md:py-14\"\u003e\n  \u003ch3 class=\"text-dark text-2xl font-bold\"\u003eItem description\u003c/h3\u003e\n  \u003cp\u003e\n    Spike is a really top-quality\n    \u003ca href=\"https://wrappixel.com/admin-dashboard-templates\" target=\"_blank\"\u003e\u003cstrong\u003eDashboard Design Template\u003c/strong\u003e\u003c/a\n    \u003e, the kind of ready-made admin panel you can use for your project; that was created specifically for today's web developers. If you want your project to have a clean and straightforward look, starting with Spike is the perfect choice. It's built using React and styled with Tailwind CSS , which makes it very quick and easy to change however you need.\n  \u003c/p\u003e\n  \u003cp\u003e\n    This\n    \u003ca href=\"https://wrappixel.com/react-templates\" target=\"_blank\"\u003e\u003cstrong\u003eReact js Template\u003c/strong\u003e\u003c/a\u003e\n    gives you everything you need right away: ready-to-use dashboards, charts, and all the essential UI components.\n  \u003c/p\u003e\n  \u003cp\u003e\n    The layout works perfectly on any screen size, whether it's a phone or a desktop. It helps you skip the boring setup part so you can focus on the important features of your app. For any startup or personal project, Spike is a solid\n    \u003ca href=\"https://wrappixel.com/tailwind-templates\" target=\"_blank\"\u003e\u003cstrong\u003eTailwind Theme\u003c/strong\u003e\u003c/a\u003e\n    that can easily grow as your app gets bigger. It’s simple, clean, and ready to go!\n  \u003c/p\u003e\n\u003c/div\u003e2c:T46da,\u003csection\u003e\n  \u003cdiv class=\"prose\"\u003e\n    \u003cdiv class=\"py-8 md:py-14\"\u003e\n      \u003cdiv class=\"container mx-auto\"\u003e\n        \u003cdiv class=\"flex flex-col gap-8 sm:gap-12\"\u003e\n          \u003c!-- Header --\u003e\n          \u003cdiv class=\"max-w-3xl\"\u003e\n            \u003ch2 class=\"text-2xl text-dark\"\u003e\n             5+ Frontend Pages Added\n            \u003c/h2\u003e\n          \u003c/div\u003e\n\n          \u003c!-- Grid --\u003e\n          \u003cdiv\n            class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-8\"\n          \u003e\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/frontpages/front-homepage.webp\"\n                  alt=\"fontpages\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  className=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/homepage\"\n                    target=\"_blank\"\n                    className=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      className=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      className=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      className=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Homepage\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/homepage\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/frontpages/front-aboutus.webp\"\n                  alt=\"fontpages\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  className=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/aboutus\"\n                    target=\"_blank\"\n                    className=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      className=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      className=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      className=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  About us\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/aboutus\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/frontpages/front-contactus.webp\"\n                  alt=\"fontpages\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                 \u003cdiv\n                  className=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/contact\"\n                    target=\"_blank\"\n                    className=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      className=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      className=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      className=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div
1357\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Contact Us\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/contact\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/frontpages/front-portfolio.webp\"\n                  alt=\"fontpages\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                        \u003cdiv\n                  className=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/portfolio\"\n                    target=\"_blank\"\n                    className=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      className=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      className=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      className=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                 Portfolio\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/portfolio\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/frontpages/front-pricing.
1357webp\"\n                  alt=\"fontpages\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  className=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/pricing\"\n                    target=\"_blank\"\n                    className=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      className=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      className=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      className=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                  Pricing\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/pricing\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n\n            \u003cdiv\n              class=\"flex flex-col gap-4 sm:gap-6 p-3 lg:p-5 border border-border rounded\"\n            \u003e\n              \u003cdiv class=\"rounded relative overflow-hidden group/overlay\"\u003e\n                \u003cimg\n                  src=\"https://images.wrappixel.com/templates/pro/spike/frontpages/front-blog.webp\"\n                  alt=\"Firebase Demo Version\"\n                  class=\"w-full h-full rounded\"\n                /\u003e\n                \u003cdiv\n                  className=\"absolute inset-0 bg-dark/80 opacity-0 group-hover/overlay:opacity-100 transition-opacity duration-300 flex items-center justify-center z-10 text-white\"\n                \u003e\n                  \u003ca\n                    href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/blog\"\n                    target=\"_blank\"\n                    className=\"relative group h-12 w-12 flex justify-center items-center rounded-full border border-border\"\n                  \u003e\n                    \u003cspan\n                      className=\"iconify size-6 text-white\"\n                      data-icon=\"solar:laptop-minimalistic-outline\"\n                    \u003e\u003c/span\u003e\n\n                    \u003cspan\n                      className=\"absolute bottom-14 left-1/2 -translate-x-1/2 whitespace-nowrap \n  bg-dark text-white text-xs px-3 py-2 rounded \n  opacity-0 group-hover:opacity-100 transition-all duration-200 \n  pointer-events-none z-50\"\n                    \u003e\n                      Live Preview\n\n                      \u003cspan\n                      className=\"iconify size-4 text-dark absolute btm-10 left-40\"\n                      data-icon=\"solar:alt-arrow-down-bold\"\n                    \u003e\u003c/span\u003e\n                    \u003c/span\u003e\n                  \u003c/a\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv class=\"flex items-center justify-between\"\u003e\n                \u003cp class=\"text-base sm:text-lg text-dark font-semibold\"\u003e\n                 Blog\n                \u003c/p\u003e\n\n                \u003ca\n                  target=\"_blank\"\n                  href=\"https://spike-react-tailwind-main.netlify.app/frontend-pages/blog\"\n                  class=\"relative inline-flex items-center justify-center px-3 py-1.5 rounded border border-border group/live-preview overflow-hidden text-sm\"\n                \u003e\n                  \u003cspan\n                    class=\"transition-transform duration-500 group-hover/live-preview:translate-x-40 sm:block hidden\"\n                  \u003e\n                    Preview\n                  \u003c/span\u003e\n                  \u003cspan\n                    class=\"absolute inset-0 flex items-center justify-center sm:-translate-x-40 group-hover/live-preview:translate-x-0 transition-transform duration-500\"\n                  \u003e\n                    \u003cspan\n                      class=\"iconify text-lg\"\n                      data-icon=\"solar:arrow-right-up-linear\"\n                    \u003e\u003c/span\u003e\n                  \u003c/span\u003e\n                \u003c/a\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n2d:Tcec,\u003cp\u003eCreate beautifully designed web applications and products with ease using our Admin templates and \u003cstrong\u003esave a month in development timeline \u0026 cut costs\u003c/strong\u003e. Whether you are creating a lightweight dashboard or a complex enterprise-grade dashboards, our templates \u003cstrong\u003eprovide clean code structure\u003c/strong\u003e, scalable folder organization, and optimized UI workflows suitable for real-world applications.\n\u003c/p\u003e\n\n\u003cp\u003eUsed by global brands like Samsung, Oracle, Dell, Infosys, Capgemini, and Intel, along with startups, SaaS platforms, agencies, internal product teams, and enterprise frontend developers, our admin dashboard templates help teams accelerate development while maintaining scalable frontend architecture, professional UI quality, and high-performance user experiences.\u003c/p\u003e\n\n\u003ch2\u003eStop building from scratch, Start with our Pre-built Dashboards\u003c/h2\u003e\n\n\u003cp\u003eOur dashboard templates are flexible, customizable, and responsive, helping you create modern dashboards with clean UI design, ready-made applications, tables, charts, forms, and frontend pages for your projects.\u003c/p\u003e\n\n\u003cp\u003eAll our templates include \u003cstrong\u003eprofessionally designed dashboard\u003c/strong\u003e variations such as SaaS dashboards, E-commerce dashboards, CRM systems, Analytics dashboards, Project Management panels, and many more to supp
1357ort different business use cases and web apps.\u003c/p\u003e\n\n\u003ch2\u003eProduction-Ready Admin themes for modern frontend stacks\u003c/h2\u003e\n\n\u003cp\u003eIf you are looking for admin templates built with a specific frontend framework, WrapPixel offers a wide range of developer-focused options. Our templates support modern frameworks \u0026 UI libraries, including React, Astro, Angular, Vue, Next.js, Nuxt.js, Bootstrap, Tailwind CSS, TypeScript, and Vite, along with popular UI libraries such as Material UI, Vuetify, Shadcn UI, Headless UI, and many more.\u003c/p\u003e\n\n\u003ch2\u003eDashboard templates for all your web app \u0026 website needs\u003c/h2\u003e\n\n\u003cp\u003eOur admin templates are designed to deliver clean UI experiences and efficient frontend workflows for modern web applications \u0026 websites.\u003c/p\u003e\n\n\u003cp\u003eThese templates are \u003cstrong\u003enot limited to admin dashboards\u003c/strong\u003e alone. You can also use them to create SaaS websites, analytics platforms, CRM systems, ecommerce applications, product pages, marketing websites, and business web applications using professionally designed frontend pages and scalable dashboard architecture.\u003c/p\u003e\n\n\u003ch2\u003eOur admin templates pass A/B UI/UX testing\u003c/h2\u003e\n\n\u003cp\u003eWe make sure that our Admin Templates pass the test of time by conducting A/B testing and usability testing with focus groups of different demographic sets. Each Admin Template has been carefully \u003cstrong\u003ecrafted by our UI/UX designers\u003c/strong\u003e with the best user experience so that you can create simplified user journeys and appealing interfaces without investing too much design effort. We also ensure the code is clean and well-tested.\n\u003c/p\u003e\n\n\u003ch2\u003eTry free admin dashboard templates before you purchase\u003c/h2\u003e\n\n\u003cp\u003eWe offer free templates so developers can explore the design quality, frontend architecture, and development workflow \u003cstrong\u003ebefore purchasing a premium\u003c/strong\u003e version. These free admin panel templates are suitable for small applications, prototypes, internal tools, and testing project structures, and they are available with an MIT license.\n\u003c/p\u003e2e:T1448,\u003cp\u003eBrowse professionally \u003cstrong\u003ehand-coded\u003c/strong\u003e React templates built for SaaS platforms, admin dashboards, analytics apps, and modern business websites. Whether you’re creating a dashboard, SaaS platform, or business website, WrapPixel’s React templates provide clean code, modern design, ready-to-use components, and an AI prompt library to help you launch projects faster with confidence.\u003c/p\u003e\n\n\u003cp\u003eEvery React template in this collection is built using the latest React versions, one of the most trusted JavaScript libraries for creating dynamic. These React JS templates follow modern coding standards and UI practices, making them suitable for startups, enterprise apps, analytics platforms, CRM software, and internal business tools.\u003c/p\u003e\n\n\u003cp\u003eWhether you prefer Shadcn UI, Astro Material UI, Next.js, or React + Tailwind CSS, Typescript, you’ll find flexible React templates designed for real-world projects with the \u003cstrong\u003efreedom\u003c/strong\u003e to choose the preferred frameworks that fits your team best.\u003c/p\u003e\n\n\u003ch2\u003e\u003cstrong\u003eWhy WrapPixel is trusted for React templates\u003c/strong\u003e\u003c/h2\u003e\n\n\u003cp\u003eBuilding a web project completely \u003cstrong\u003efrom scratch\u003c/strong\u003e takes significant development time. Our React dashboard templates and React website templates help developers skip repetitive setup work and focus directly on product features.\u003c/p\u003e\n\n\u003cp\u003eUsed by global brands like Samsung, Oracle, Dell, Infosys, Capgemini, and Intel, along with startups, SaaS platforms, agencies, internal product teams, and enterprise frontend developers, our templates help teams accelerate development while maintaining \u003cstrong\u003escalable frontend\u003c/strong\u003e ar
1357chitecture, professional UI quality, and high-performance user experiences.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eOptimized for Performance :\u003c/strong\u003e Every React template is developed with a performance-focused structure for faster page loads, cleaner rendering, and smoother navigation across applications.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eReusable React Components :\u003c/strong\u003e All React templates include reusable and modular components that help maintain consistency while scaling large applications.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eResponsive Across Devices :\u003c/strong\u003e Each React template is designed to work seamlessly across desktops, tablets, and mobile devices for better accessibility and usability.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDeveloper Friendly Customization :\u003c/strong\u003e Structured folders, maintainable codebase, and detailed documentation make these React website templates easy to customize and integrate into existing projects.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eRegular Framework Updates :\u003c/strong\u003e Stay compatible with the latest React ecosystem updates, Astro, Material UI versions, Shadcn UI libraries, and modern frontend tooling.\u003c/p\u003e\n\n\u003ch2\u003eModern React Dashboard templates with AI prompts\u003c/h2\u003e\n\n\u003cp\u003eWrapPixel’s React dashboard templates help developers build admin panels, PaaS, SaaS dashboards, CRM software, analytics platforms, and internal business tools faster. These templates include reusable widgets, charts, tables, forms, authentication pages, AI prompt UI sections, and responsive layouts designed for modern frontend applications \u0026 AI projects.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eModern Dashboard UI :\u003c/strong\u003e Get professionally designed React themes with clean layouts, organized navigation patterns, responsive tables, authentication pages, charts, and analytics-ready interfaces.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eData Visualization Ready :\u003c/strong\u003e Build any dashboards or reporting platforms faster using integrated charts, widgets, tables, and interactive UI blocks.\u003c/p\u003e\n\n\u003cp\u003eWhether you need a lightweight admin template or a complete dashboard, these React templates provide scalable and production-ready UI architecture for real-world projects.\u003c/p\u003e\n\n\u003ch2\u003eReact Website and Landing Page templates\u003c/h2\u003e\n\n\u003cp\u003eOur React website templates help developers build startup websites, SaaS landing pages, agency websites, portfolios, and modern business platforms faster. These templates come with clean layouts, reusable UI sections, and \u003cstrong\u003escalable sites\u003c/strong\u003e designed for real-world projects.\u003c/p\u003e\n\n\u003cp\u003eEach React template includes responsive pages, hero sections, pricing layouts, blogs, testimonials, authentication screens, and \u003cstrong\u003ecustomizable components\u003c/strong\u003e. Developers can easily update branding, navigation, typography, and layouts while maintaining a consistent frontend workflow across projects.\u003c/p\u003e\n\n\u003ch2\u003eBuilt for React developers, SaaS teams \u0026 businesses\u003c/h2\u003e\n\n\u003cp\u003eWhether you are an independent developer, startup team, agency, or enterprise business, these React templates are designed to support scalable application development.\u003c/p\u003e\n\n\u003cp\u003eAll templates include \u003cstrong\u003estructured code\u003c/strong\u003e architecture, documentation, reusable UI systems, and lifetime updates to support long-term development needs.\u003c/p\u003e\n\n\u003ch2\u003eStart building with Free React templates today\u003c/h2\u003e\n\n\u003cp\u003eYou can begin with Free React templates to validate ideas quickly, then move to Premium React templates for \u003cstrong\u003eadvanced features\u003c/strong\u003e, authentications, UI components, and long-term scalability \u0026 AI Features. Explore live demos, compare layouts, and choose the right React admin template or React website template for your next project.\u003c/p\u003e"])</script>
1357<script>self.__next_f.push([1,"2f:T112e,\u003cp\u003eExplore our fully customizable Shadcn dashboards and UI templates built for developers who want fast, scalable, and clean frontend development workflows. WrapPixel’s Shadcn templates are designed using Shadcn UI, Base UI, and Radix UI to \u003cstrong\u003ehelp developers build dashboards\u003c/strong\u003e, SaaS platforms, admin panels, and modern websites without starting from scratch.\u003c/p\u003e\n\n\u003cp\u003eThese Shadcn templates provide reusable UI components, responsive layouts, authentication pages, dashboard screens, and developer-friendly architecture designed for real-world frontend projects. Whether you are building an internal tool, \u003cstrong\u003eanalytics dashboard\u003c/strong\u003e, startup platform, website, landing pages, or any web application, these Shadcn UI templates help reduce repetitive frontend work and speed up development.\u003c/p\u003e\n\n\u003cp\u003eBuilt with modern frameworks like React, Astro, Motion, Tailwind CSS, Next.js, and Vite, our Shadcn templates focus on performance, accessibility, clean code structure, and scalable UI systems that developers can customize easily.\u003c/p\u003e\n\n\u003ch2\u003e\u003cstrong\u003eWhy Choose WrapPixel Shadcn Templates\u003c/strong\u003e\u003c/h2\u003e\n\n\u003cp\u003eWrapPixel’s Shadcn templates are built for developers who want flexibility, reusable components, and production-ready frontend systems without unnecessary complexity.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eReady-To-Use UI Components :\u003c/strong\u003e Buttons, dropdowns, modals, inputs, navigation menus, cards, dialogs, and interactive UI blocks come pre-built using Tailwind CSS and Shadcn UI patterns.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eBuilt with Modern Frontend Stack :\u003c/strong\u003e Developed using Tailwind CSS, Radix UI, Next.js, and Vite for scalable and maintainable frontend architecture.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDark \u0026 Light Theme Support :\u003c/strong\u003e Built-in dark mode and light mode support across all components for better user experience and faster implementation.\u003c/p\u003e\n\n\u003ch2\u003eSpectacular Shadcn Dashboards with AI Prompts\u003c/h2\u003e\n\n\u003cp\u003eDevelopers prefer Shadcn dashboards because they offer full control over components instead of locking projects into rigid UI systems. \u003cstrong\u003eBuilt-in AI prompts\u003c/strong\u003e also help developers customize, iterate, and ship projects faster. Unlike traditional admin templates, our Shadcn UI dashboards are easier to extend, customize, and integrate into modern React ecosystems.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eModern Dashboard UI:\u003c/strong\u003e Professionally designed Shadcn dashboards with clean layouts, charts, tables, widgets, forms, and admin panel pages built for SaaS and business applications.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eAuthentication Pages Included:\u003c/strong\u003e Login, registration, forgot password, reset password, and authentication-ready layouts help developers integrate auth systems faster.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eBuilt-in AI Prompts:\u003c/strong\u003e Customize, iterate, and launch projects faster without handling repetitive frontend setup work. Use AI to shape layouts, streamline workflows, and accelerate development.\u003c/p\u003e\n\n\u003ch2\u003eWhat Makes Our Shadcn Templates \u0026 Landing Pages Special\u003c/h2\u003e\n\n\u003cp\u003eEach Shadcn website template includes hero sections, pricing pages, blog layouts, testimonials, authentication screens, contact forms, navigation menus, and \u003cstrong\u003ereusable UI components\u003c/strong\u003e designed for modern Astro, React, and Next.js projects. Developers can easily customize branding, typography, layouts, and design systems while maintaining a clean and scalable frontend workflow across multiple applications.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003ePerformance \u0026 SEO Optimized:\u003c/strong\u003e Lightweight frontend structure, minimal UI overhead, optimized layouts, and SEO-friendly page architecture help improve loading speed and frontend performance.\n\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDeveloper-Friendly Code Structure:\u003c/strong\u003e Organized folders, reusable Shadcn UI components, and scalable layouts make customization, maintenance, and long-term frontend development easier.\u003c/p\u003e\n\n\u003ch2\u003eStart Building with Shadcn Admin Dashboards Today\u003c/h2\u003e\n\n\u003cp\u003eLaunch dashboards and web applications faster using reusable UI components, scalable layouts, and developer-friendly frontend architecture trusted by modern development teams.\u003c/p\u003e\n\n\u003cp\u003eExplore premium Shadcn templates designed for dashboards, SaaS platforms, landing pages, analytics systems, CRM software, and internal business applications.\u003c/p\u003e\n\n\u003cp\u003eStart with \u003cstrong\u003efree shadcn templates\u003c/strong\u003e to test workflows, customize components, and launch projects faster using modern React and Next.js ecosystems.\u003c/p\u003e30:T1341,\u003cp\u003eDiscover our \u003cstrong\u003eTop-Notch Tailwind CSS\u003c/strong\u003e templates built for developers creating modern landing pages, websites, dashboards, SaaS applications, and admin panels. WrapPixel’s Tailwind CSS templates provide reusable UI components, scalable layouts, and utility-first frontend architecture to help developers build faster without spending days designing interfaces from scratch.\u003c/p\u003e\n\n\u003cp\u003eThese Tailwind templates are \u003cstrong\u003edesigned for developers\u003c/strong\u003e, agencies, startups, and SaaS teams building scalable frontend applications and websites.\u003c/p\u003e\n\n\u003cp\u003eWhether you prefer React, Next.js, Astro, Shadcn UI, Preline, Headless UI, or Material UI, you’ll find flexible Tailwind CSS templates built for modern web projects. From TypeScript support and Motion animations to reusable UI components and scalable layouts, these templates help teams build dashboards, SaaS apps, admin panels, and business websites faster with a development stack that fits their workflow.\u003c/p\u003e\n\n\u003cp\u003eYou can also explore free templates to evaluate the \u003cstrong\u003edesign quality\u003c/strong\u003e, code structure, and component architecture before moving to Premium Tailwind templates.\u003c/p\u003e\n\n\u003ch2\u003e\u003cstrong\u003eWhy developers choose WrapPixel Tailwind templates\u003c/strong\u003e\u003c/h2\u003e\n\n\u003cp\u003eBuilding a polished frontend UI takes more than selecting colors and typography. Developers need scalable components, \u003cstrong\u003eresponsive layouts\u003c/strong\u003e, and maintainable design systems that work efficie
1357ntly across projects. WrapPixel’s Tailwind templates help reduce repetitive frontend work and speed up your development\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eResponsive by Default:\u003c/strong\u003e Built using Tailwind CSS responsive utilities like “sm, md, and lg” etc., breakpoints to ensure layouts adapt smoothly across desktops, tablets, and mobile devices.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eClean \u0026 Scalable Code Structure:\u003c/strong\u003e Organized folders, reusable components, and structured layouts simplify long-term project maintenance and frontend scaling.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eRegular Tailwind CSS Updates:\u003c/strong\u003e Templates stay compatible with the latest Tailwind CSS ecosystem updates, frontend tooling, and modern development workflows.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eSupport \u0026 Documentation:\u003c/strong\u003e Get setup guides, customization documentation, regular updates, technical support, and access to community assistance when needed.\u003c/p\u003e\n\n\u003ch2\u003eScalable Tailwind dashboards with inbuilt AI prompts\u003c/h2\u003e\n\n\u003cp\u003eDevelopers prefer Shadcn dashboards because they offer full control over components instead of locking projects into rigid UI systems. Unlike traditional admin templates, Shadcn based dashboards are easier to extend, customize, and integrate into modern React ecosystems.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDeveloper-Friendly Dashboards:\u003c/strong\u003e These Tailwind CSS templates are built with reusable components, scalable folder structures, clean utility classes, and modern frontend frameworks \u0026 UI libraries that help developers maintain faster development cycles and easier long-term project management.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eProduction-Ready Dashboard Components:\u003c/strong\u003e Every template includes essential dashboard sections such as analytics cards, charts, tables, forms, authentication pages, settings screens, notifications, and responsive layouts commonly required in SaaS products and admin applications.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eBuilt for Modern Dashboard Projects:\u003c/strong\u003e From startup dashboards and SaaS, PaaS, CRM’s to analytics platforms or any internal tools, these Tailwind templates provide a flexible foundation for teams building modern frontend applications with consistent UI systems and faster deployment workflows.\u003c/p\u003e\n\n\u003ch2\u003eTop-Notch TailwindCSS website templates for modern developers\u003c/h2\u003e\n\n\u003cp\u003eOur Tailwind website templates help developers build SaaS landing pages, startup websites, agency platforms, portfolios, ecommerce frontends, charity websites, and modern business platforms faster. These templates are designed with \u003cstrong\u003ereusable UI sections\u003c/strong\u003e, responsive layouts, and scalable frontend structures suitable for real-world production projects.\u003c/p\u003e\n\n\u003cp\u003eEach Tailwind CSS template includes hero sections, pricing pages, blog layouts, testimonials, authentication screens, contact forms, navigation menus, and customizable components. Developers can easily manage branding, typography, layouts, and design systems while maintaining a clean and efficient frontend development workflow across projects.\n\u003c/p\u003e\n\n\u003ch2\u003eStart building with Free Tailwind templates today\u003c/h2\u003e\n\n\u003cp\u003eStart building dashboards, SaaS platforms, admin panels, landing pages, and modern websites faster using free Tailwind templates \u003cstrong\u003edesigned for scalable frontend\u003c/strong\u003e development workflows.\u003c/p\u003e\n\n\u003cp\u003eEvaluate UI quality, component structure, responsive layouts, and frontend architecture before upgrading to premium Tailwind CSS templates with advanced pages, reusable components, and extended features for modern web applications.\u003c/p\u003e31:Tde5,\u003cp\u003eLaunch scalable admin dashboards, SaaS platforms, business websites, and frontend applications faster with \u003cstrong\u003eproduction-ready TypeScript templates\u003c/strong\u003e built for modern development workflows.\n\u003c/p\u003e\n\n\u003cp\u003eWrapPixel’s TypeScript templates are built with the latest frontend technologies, including Next.js, React, Vite, Tailwind CSS, Shadcn UI, Material UI, Angular, Vue, Nuxt, Headless UI, and Vuetify. Also include NextAuth and Firebase integration to simplify authentication workflows and application setup.\u003c/p\u003e\n\n\u003cp\u003eDesigned for developers who value maintainable architecture, \u003cstrong\u003ereusable UI components\u003c/strong\u003e, and type-safe frontend development, these TypeScript templates help teams build modern applications with cleaner code and faster project delivery.\u003c/p\u003e\n\n\u003ch2\u003eWhy choose WrapPixel’s Typescript templates\u003c/h2\u003e\n\n\u003cp\u003eWrapPixel’s Typescript templates are designed for developers \u003cstrong\u003ewho want cleaner code\u003c/strong\u003e, scalable architecture, and faster frontend development workflows.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eCleaner \u0026 Error-Free Code:\u003c/strong\u003e Type
1357Script’s static typing system helps catch development errors early, reducing bugs and improving long-term application reliability.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eFramework Compatibility:\u003c/strong\u003e Our Typescript templates work with modern frameworks like React, Angular, Next, and Vue, giving developers flexibility based on project requirements and frontend preferences.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eScalable Frontend Architecture:\u003c/strong\u003e Modular layouts, reusable components, and maintainable folder structures help teams scale applications more efficiently as projects grow.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eReusable UI Components:\u003c/strong\u003e Pre-built dashboards, forms, tables, authentication pages, widgets, and UI blocks help accelerate frontend development workflows.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDeveloper-Friendly Codebase:\u003c/strong\u003e Organized files, reusable patterns, and structured architecture simplify customization, onboarding, and long-term maintenance.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eStatic Typing Benefits:\u003c/strong\u003e Write predictable and maintainable frontend code using TypeScript’s type safety, reusable interfaces, and structured development patterns.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDocumentation \u0026 Support:\u003c/strong\u003e Every Typescript template includes setup guides, customization documentation, regular updates, and developer-focused support.\u003c/p\u003e\n\n\u003ch2\u003eBuilt for admin dashboards, websites \u0026 landing pages\u003c/h2\u003e\n\n\u003cp\u003eThese TypeScript templates are \u003cstrong\u003edesigned for developers, startups\u003c/strong\u003e, agencies, and enterprise teams building scalable frontend applications and admin dashboards.\u003c/p\u003e\n\n\u003cp\u003eDevelopers commonly use these TypeScript templates for PaaS, SaaS dashboards, CRM software, analytics platforms, admin panels, business websites, startup landing pages, internal company tools, AI applications, data management systems, client portals, project management tools, and enterprise web applications.\u003c/p\u003e\n\n\u003cp\u003eWhether you are \u003cstrong\u003ebuilding a lightweight admin dashboard\u003c/strong\u003e, a modern marketing website, or a large-scale enterprise platform, these Typescript templates provide a stable and scalable frontend foundation for modern application development.\u003c/p\u003e\n\n\u003ch2\u003eStart building with free TypeScript templates today\u003c/h2\u003e\n\n\u003cp\u003eStart with our free TypeScript templates to \u003cstrong\u003eevaluate code quality\u003c/strong\u003e, frontend architecture, reusable UI components, and development workflows before upgrading to premium TypeScript dashboard templates with advanced pages, authentication systems, application layouts, and scalable frontend modules.\u003c/p\u003e32:T1714,\u003cp\u003eDiscover our Vercel templates built for web developers creating fast, scalable web applications without wasting time on \u003cstrong\u003edeployment setup\u003c/strong\u003e, frontend architecture, or repetitive project configuration. WrapPixel’s collection includes production-ready templates for SaaS platforms, admin dashboards, landing pages, business websites, blogs, and modern applications optimized for seamless deployment on Vercel.\u003c/p\u003e\n\n\u003cp\u003eThese templates are built using modern frontend technologies like Vite, Astro, Motion, Next.js, React, Tailwind CSS, TypeScript, MUI, Shadcn, Headless UI, and reusable components that \u003cstrong\u003ehelp developers\u003c/strong\u003e move from development to deployment faster.\u003c/p\u003e\n\n\u003cp\u003eDesigned around scalable frontend workflows, these Vercel templates include authentications, API integrations, reusable UI blocks, dashboard layouts, deployment-ready configurations, and optimized page structures \u003cstrong\u003esuitable for production\u003c/strong\u003e applications.\u003c/p\u003e\n\n\u003ch2\u003e\u003cstrong\u003eBenefits of using WrapPixel Vercel templates\u003c/strong\u003e\u003c/h2\u003e\n\n\u003cp\u003eWrapPixel’s Vercel templates are designed for developers who want clean architecture, faster deployments, and scalable frontend templates ready for production use.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eInstant Deployment Ready:\u003c/strong\u003e Templates are pre-configured for Vercel deployment workflows, allowing developers to connect repositories and deploy projects quickly without complex setup.\n\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eAuthentication \u0026 User Management:\u003c/strong\u003e Our Vercel templates include built-in authentication systems using modern auth workflows with secure login pages, user sign-up , and account management.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eModern SaaS Architecture:\u003c/strong\u003e Multi-tenant support, reusable layouts, scalable routing systems, and environment-aware configurations make these templates suitable for SaaS products and modern applications.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eEdge Optimized Performance:\u003c/strong\u003e Built to take advantage of Vercel’s edge infrastru
1357cture, optimized caching, and fast rendering for better performance and global delivery.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eCustom Domain Support:\u003c/strong\u003e Easily configure custom domains and deployment environments using Vercel-compatible project structures and deployment workflows.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eTypeScript \u0026 Scalable Codebase:\u003c/strong\u003e Developer-friendly architecture using TypeScript, reusable components, modular folders, and maintainable frontend patterns.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eAPI Routes \u0026 Backend Logic:\u003c/strong\u003e Templates include built-in API route support for authentication callbacks, webhooks, form handling, and backend integrations without requiring separate server infrastructure.\u003c/p\u003e\n\n\u003cp\u003e\u003cstrong\u003eDocumentation \u0026 Ongoing Updates:\u003c/strong\u003e Every Vercel template includes setup guides, deployment documentation, regular updates, and developer-focused support resources.\u003c/p\u003e\n\n\u003ch2\u003eBuilt for Ready-to-deploy on Vercel\u003c/h2\u003e\n\n\u003cp\u003eThese Vercel templates are designed for modern frontend teams, startups, agencies, and SaaS developers \u003cstrong\u003ebuilding scalable applications\u003c/strong\u003e with fast deployment workflows.\u003c/p\u003e\n\n\u003cp\u003eWhether you are working solo on a side project or building large-scale production applications with a team, these Vercel templates provide a scalable starting point with optimized deployment workflows.\u003c/p\u003e\n\n\u003ch2\u003eScalable Admin Dashboards for modern web apps with AI-ready features\u003c/h2\u003e\n\n\u003cp\u003eBuild admin dashboards, analytics systems, CRM platforms, AI-powered applications, and internal business tools using \u003cstrong\u003eVercel-ready templates\u003c/strong\u003e designed for scalable frontend workflows.\u003c/p\u003e\n\n\u003cp\u003eThese dashboard templates commonly include:\u003c/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003eCharts and data visualization\u003c/li\u003e\n  \u003cli\u003eIntegrated Authentications\u003c/li\u003e\n  \u003cli\u003eUser and team management\u003c/li\u003e\n  \u003cli\u003eData tables and filters\u003c/li\u003e\n  \u003cli\u003eLight-Dark mode support\u003c/li\u003e\n  \u003cli\u003eNotification systems\u003c/li\u003e\n  \u003cli\u003eSettings pages\u003c/li\u003e\n  \u003cli\u003eForm handling components\u003c/li\u003e\n  \u003cli\u003eAPI-ready architecture\u003c/li\u003e\n  \u003cli\u003eAI dashboard UI sections\u003c/li\u003e\n  \u003cli\u003eAI Prompts Library\u003c/li\u003e\n  \u003cli\u003eMulti-layout navigations\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eUsed by teams building SaaS dashboards, AI admin panels, customer portals, finance tools, and operational management platforms.\u003c/p\u003e\n\n\u003ch2\u003eHigh-performance landing pages \u0026 Website templates for modern startups\u003c/h2\u003e\n\n\u003cp\u003eLaunch startup websites, SaaS landing pages, AI product websites, agency platforms, portfolios, documentation portals, and business \u003cstrong\u003ewebsites faster using Vercel-ready\u003c/strong\u003e website templates built for scalable frontend development workflows.\u003c/p\u003e\n\n\u003cp\u003eThese website templates commonly include:\u003c/p\u003e\n\n\u003cul\u003e\n  \u003cli\u003eHero sections\u003c/li\u003e\n  \u003cli\u003ePricing pages\u003c/li\u003e\n  \u003cli\u003eFeature showcase layouts\u003c/li\u003e\n  \u003cli\u003eTestimonials and reviews\u003c/li\u003e\n  \u003cli\u003eBlog and article pages\u003c/li\u003e\n  \u003cli\u003eFAQ sections\u003c/li\u003e\n  \u003cli\u003eContact and lead generation forms\u003c/li\u003e\n  \u003cli\u003eNewsletter subscription blocks\u003c/li\u003e\n  \u003cli\u003eTeam and company sections\u003c/li\u003e\n  \u003cli\u003eCall-to-action layouts\u003c/li\u003e\n  \u003cli\u003eResponsive navigation systems\u003c/li\u003e\n  \u003cli\u003eSEO-friendly page structure\u003c/li\u003e\n  \u003cli\u003eAuthentication pages\u003c/li\u003e\n  \u003cli\u003eReusable marketing components\u003c/li\u003e\n  \u003cli\u003eConversion-focused landing page sections\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eUsed by teams building SaaS marketing websites, AI startup landing pages, product launch platforms, developer tools, agency websites, and modern business applications.\u003c/p\u003e\n\n\u003ch2\u003eStart building with Free Vercel templates today\u003c/h2\u003e\n\n\u003cp\u003e\n  Browse WrapPixel’s collection of Vercel templates designed for developers building fast, scalable, and production-ready web applications.\n\u003c/p\u003e\n\n\u003cp\u003eSkip repetitive setup work, \u003cstrong\u003edeploy projects faster\u003c/strong\u003e, and focus on building product features using Vercel-ready frontend architecture trusted by modern development teams.\u003c/p\u003e\n\n\u003cp\u003eGet started with \u003cstrong\u003efree Vercel templates\u003c/strong\u003e, optimized frontend performance, and reusable component systems built for real-world web applications and fast deployment on Vercel.\u003c/p\u003e15:[\"$\",\"div\",null,{\"className\":\"bg-card\",\"children\":[\"$\",\"$L24\",null,{\"product\":{\"id\":1109321,\"title\":\"Spike React Tailwind Admin Template\",\"description\":\"$25\",\"subTitle\":\"Vite+Swr+Shadcn+headlessui\",\"downloads\":74,\"status\":\"PUBLISHED\",\"views\":0,\"popularity\":0,\"singleUsePrice\":59,\"singleUseSalePrice\":0,\"multipleUsePrice\":89,\"multipleUseSalePrice\":0,\"extendedUsePrice\":299,\"extendedUseSalePrice\":0,\"multipleExtendedUsePrice\":499,\"multipleExtendedUseSalePrice\":0,\"sales\":0,\"rating\":0,\"liveUrl\":\"/product/spike-react-tailwind-admin-template\",\"changelog\":\"$26\",\"ver
1357sion\":\"2.0.0\",\"feature\":\"$27\",\"applicationDemos\":\"$28\",\"productDemos\":\"$29\",\"testimonials\":\"\",\"faqs\":\"$2a\",\"extraFeatures\":\"\",\"buyUrls\":{\"single\":\"https://wrappixel.lemonsqueezy.com/checkout/buy/ce931b1f-6a94-4977-9300-b434d0733638?embed=1\",\"business\":\"https://wrappixel.lemonsqueezy.com/checkout/buy/c0a72358-91ba-405d-aed4-8faa94ae138f?embed=1\",\"extended\":\"https://wrappixel.lemonsqueezy.com/checkout/buy/4948f60a-2e7c-42db-9a34-6a656a5770dc?embed=1\",\"multipleExtended\":\"https://wrappixel.lemonsqueezy.com/checkout/buy/47bceb64-06e9-473b-8d21-10c8c36ad2d9?embed=1\"},\"isPaid\":true,\"imageUrl\":\"https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp\",\"previewImageUrl\":\"https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp\",\"docsLink\":\"https://wrappixel.github.io/premium-documentation-wp/react/spike/index.html\",\"slug\":\"spike-react-tailwind-admin-template\",\"githubUsername\":\"\",\"githubRepo\":\"\",\"categories\":[{\"sub\":[],\"main\":[\"admin-dashboard-templates\",\"react-templates\",\"shadcn-dashboard\",\"tailwind-templates\",\"typescript-templates\",\"vercel-templates\"]}],\"lemonSqzId\":\"898563\",\"meta_title\":\"Spike React Tailwind Admin Template - WrapPixel\",\"meta_description\":\"Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN \u0026 Headless Ui.\",\"last_update\":\"$D2026-05-31T18:30:00.000Z\",\"pricingTable\":\"\",\"productDescription\":\"$2b\",\"createdAt\":\"$D2025-06-10T13:52:40.844Z\",\"updatedAt\":\"$D2026-06-26T06:35:52.497Z\",\"downloadUrl\":\"https://packages.wrappixel.com/react/spike-react-tailwind-v2.zip\",\"proProductUrl\":\"\",\"frontendDemos\":\"$2c\",\"reviews\":[],\"productCategories\":[{\"id\":3166,\"productId\":1109321,\"categoryId\":28,\"isMain\":true,\"category\":{\"id\":28,\"slug\":\"admin-dashboard-templates\",\"title\":\"Dashboard\",\"category_title\":\"Admin Dashboard Templates\",\"subtitle\":\"Latest Admin \u0026 Dashboard Templates\",\"description\":\"Download Stunning Admin Dashboard Templates built by WrapPixel to create beautiful web applications. Choose from our list of Admin Panel Templates \u0026 Themes.\",\"category_header\":\"$2d\",\"category_footer\":\"footer\",\"meta_title\":\"40+ Stunning Admin Dashboard Templates by WrapPixel\",\"meta_description\":\"Download Stunning Admin Dashboard Templates built by WrapPixel to create beautiful web applications. Choose from our list of Admin Panel Templates \u0026 Themes.\",\"meta_keywords\":[\"reactjs\"],\"faqs\":[{\"answer\":\"Admin dashboard templates are pre-built UI components, pages, and layouts used to build SaaS dashboards, CRM systems, analytics tools, and internal business applications without starting from scratch. They help speed up development using ready-made charts, tables, forms, and authentication pages.\",\"question\":\"What are Admin Dashboard Templates used for?\"},{\"answer\":\"Admin templates provide a full dashboard structure, including pages, layouts, and components ready for development. Admin themes mainly focus on UI design, styling, and visual appearance of dashboard interfaces.\",\"question\":\"What is the difference between Admin Templates and Admin Themes?\"},{\"answer\":\"Dashboard templates save development time by offering ready layouts, UI components, authentication screens, and responsive grids. Developers can focus on business logic instead of rebuilding frontend structures.\",\"question\":\"Why should I use Dashboard Templates instead of building from scratch?\"},{\"answer\":\"Yes, admin themes and dashboard themes are widely used for SaaS platforms because they offer scalable UI structure, reusable components, and ready dashboard layouts for multi-user systems, analytics, and subscription-based applications.\",\"question\":\"Are Admin Themes and Dashboard Themes good for SaaS applications?\"},{\"answer\":\"Modern admin dashboard templates support React, Angular, Vue, Next.js, Nuxt.js, and TypeScript along with styling tools like Tailwind CSS, Bootstrap, and UI libraries such as Material UI, Shadcn UI, Headless UI, and Vuetify.\",\"question\":\"Which frameworks are supported in Admin Dashboard Templates?\"},{\"answer\":\"Yes, dashboard templates are built with modular structure, allowing easy customization of layouts, colors, typography, components, and navigation based on project needs.\",\"question\":\"Can Dashboard Templates be customized easily?\"},{\"answer\":\"Yes, admin dashboard templates are designed with scalable architecture and reusable components, making them suitable for enterprise applications, large systems, and production-grade SaaS products.\",\"question\":\"Are Admin Dashboard Templates suitable for enterprise applications?\"}
1357,{\"answer\":\"You can build SaaS admin panels, CRM systems, ecommerce dashboards, analytics platforms, project management tools, finance dashboards, and custom business applications using dashboard templates.\",\"question\":\"What can I build using Dashboard Templates?\"},{\"answer\":\"Yes, most admin templates support easy integration with REST APIs, GraphQL, Firebase, Supabase, and other modern backend systems for dynamic applications.\",\"question\":\"Do Admin Templates support API integration?\"},{\"answer\":\"Free admin dashboard templates include essential pages like dashboards, login, and registration screens, along with basic UI components like charts, tables, and forms. They are built using popular frameworks like Bootstrap, React, Angular, Vue, and Next.js.\",\"question\":\"What features are included in Free Admin Dashboard Templates?\"},{\"answer\":\"Yes, free admin dashboard templates are fully customizable. You can change layouts, colors, fonts, and components easily. The code structure is clean and simple, making it easy to modify for any project.\",\"question\":\"Can I customize Free Admin Dashboard Templates?\"},{\"answer\":\"Before buying a dashboard template, check if it includes required features like charts, tables, authentication, and user management. It should support your framework, be responsive, easy to customize, and actively maintained with good documentation and support.\",\"question\":\"What should I look for before buying a Dashboard Template?\"},{\"answer\":\"Free admin dashboard templates come with basic documentation and limited updates. Premium templates include regular updates, new features, and dedicated support.\",\"question\":\"Do Free Admin Dashboard Templates include support or updates?\"}],\"subcategories\":[{\"faqs\":[{\"answer\":\"\",\"question\":\"\"}],\"title\":\"\",\"meta_title\":\"\",\"description\":\"\",\"meta_description\":\"\"}],\"imageUrl\":\"streamline-flex-color:dashboard-3-flat\",\"popularity\":1,\"createdAt\":\"$D2017-12-12T11:58:02.543Z\",\"updatedAt\":\"$D2026-05-30T10:02:34.848Z\",\"featured_products\":{\"feature_title\":\"Weekly Best Seller\",\"adminmart_feature_items\":[\"modernize-tailwind-nextjs-dashboard-template\"],\"wrappixel_feature_items\":[\"materialm-tailwind-react-admin-template\"]},\"related_categories\":[],\"isPrimary\":true}},{\"id\":3167,\"productId\":1109321,\"categoryId\":49,\"isMain\":true,\"category\":{\"id\":49,\"slug\":\"react-templates\",\"title\":\"React\",\"category_title\":\"React Templates\",\"subtitle\":\"Top React Templates and Themes\",\"description\":\"Modern React templates built for admin dashboards, SaaS apps and websites. Developer friendly code, reusable components, fast performance - available in free \u0026 premium versions.\",\"category_header\":\"$2e\",\"category_footer\":\"foter\",\"meta_title\":\"18+ React Templates for Admin Dashboards, SaaS Apps \u0026 Websites\",\"meta_description\":\"Modern React templates built for admin dashboards, SaaS apps and websites. Developer friendly code, reusable components, fast performance - available in free \u0026 premium versions.\",\"meta_keywords\":[\"reactjs\"],\"faqs\":[{\"answer\":\"React templates are pre-built frontend projects created using React. They include reusable components, layouts, dashboards, authentication pages, and UI sections that help developers build applications faster without starting from scratch.\",\"question\":\"What are React templates?\"},{\"answer\":\"WrapPixel’s React templates are built with clean code, reusable components, responsive layouts, and scalable frontend architecture. They are designed for developers who want faster project setup, modern UI design, and easier customization.\",\"question\":\"Why should I choose WrapPixel’s React templates?\"},{\"answer\":\"You can use React dashboard templates to build SaaS applications, CRM software, admin panels, analytics dashboards, project management tools, AI platforms, eCommerce admin systems, and internal business applications.\",\"question\":\"What can I build using React dashboard templates?\"},{\"answer\":\"React admin templates reduce the need to build common frontend features from scratch. They already include dashboards, charts, forms, tables, authentication pages, routing, and reusable UI components, allowing developers to focus more on business logic and features.\",\"question\":\"How do React admin templates save development time?\"},{\"answer\":\"WrapPixel React templates use popular UI libraries and frameworks like Nextjs, Astro, Material UI, Shadcn UI, Tailwind CSS, Typescript and Headless UI. This gives developers flexibility based on their preferred frontend workflow.\",\"question\":\"Which UI libraries are used in WrapPixel React templates?\"},{\"answer\":\"Yes. All React templates come with organized folders, reusable components, and scalable code structure, making it easy to customize layouts, colors, typography, navigation, and branding based on project requirements.\",\"question\":\"Are WrapPixel React templates customizable?\"},{\"answer\":\"Yes. React templates work well for startup projects, personal websites, MVPs, and enterprise-level applications. Their modular architecture makes it easier to scale applications as project requirements grow.\",\"question\":\"Can I use React templates for both small and large projects?\"},{\"answer\":\"Yes. WrapPixel offers free React templates and free React dashboard templates that developers can use to evaluate design quality, component structure, and frontend workflows before upgrading to premium versions.\",\"question\":\"Does WrapPixel provide free React templates?\"},{\"answer\":\"Yes. Premium React templates include detailed documentation, regular updates, and one year of professional support for setup guidance, bug fixes, and technical questions.\",\"question\":\"Do premium React templates include support and updates?\"},{\"answer\":\"First install Node.js on your system. Then download the React template, open the project folder, and run \u003ccode\u003enpm install\u003c/code\u003e or \u003ccode\u003eyarn install\u003c/code\u003e to install dependencies. After installation, run \u003ccode\u003enpm start\u003c/code\u003e or \u003ccode\u003eyarn\u003c/code\u003e to launch the project locally.\",\"question\":\"How do I install and run a React template?\"},{\"answer\":\"WrapPixel’s React dashboard templates provide a modern frontend foundation built using popular UI libraries like Material UI, Tailwind CSS, and Shadcn UI. These templates include reusable components, responsive layouts, authentication pages, charts, forms, and scalable dashboard architecture for faster development workflows. Both free and premium React dashboard templates are available for evaluation before upgrading.\",\"question\":\"What are the benefits of using a WrapPixel React dashboard template?\"},{\"answer\":\"Yes. All premium React dashboard templates include one year of professional support covering technical questions, setup guidance, bug fixes, and template-related assistance. Developers also get access to detailed documentation, regular updates, and community resources to support long-term project development.\",\"question\":\"Does WrapPixel offer support for React dashboard templates?\"}],\"subcategories\":[{\"faqs\":[{\"answer\":\"\",\"question\":\"\"}],\"title\":\"\",\"meta_title\":\"\",\"description\":\"\",\"meta_description\":\"\"}],\"imageUrl\":\"logos:react\",\"popularity\":4,\"createdAt\":\"$D2020-12-12T06:47:36.304Z\",\"updatedAt\":\"$D2026-05-30T09:33:54.989Z\",\"featured_products\":{\"feature_title\":\"Weekly Best Seller\",\"adminmart_feature_items\":[\"modernize-react-mui-dashboard-theme\"],\"wrappixel_feature_items\":[\"materialm-tailwind-react-admin-template\"]},\"related_categories\":[\"mui-templates\"],\"isPrimary\":true}},{\"id\":3168,\"productId\":1109321,\"categoryId\":44,\"isMain\":true,\"category\":{\"id\":44,\"slug\":\"shadcn-dashboard\",\"title\":\"Shadcn\",\"category_title\":\"Shadcn Dashboard\",\"subtitle\":\"Shadcn Templates \u0026 Themes (Free and Premium)\",\"description\":\"Production grade and Highly customizable Shadcn Themes and Templates by WrapPixel to kich start your web application with ease.\",\"category_header\":\"$2f\",\"category_footer\":\"footer\",\"meta_title\":\"Shadcn Themes and Templates crafted by WrapPixel\",\"meta_description\":\"Production grade and Highly customizable Shadcn Themes and Templates by WrapPixel to kich start your web application with ease.\",\"meta_keywords\":[\"shadcn\"],\"faqs\":[{\"answer\":\"Shadcn templates are pre-built sections \u0026 components created using the shadcn/ui. These templates include ready-made dashboards, landing pages, authentication screens, forms, tables, navigation layouts, and reusable UI blocks that help developers build modern React and Next.js applications faster.\",\"question\":\"What are Shadcn templates?\"},{\"answer\":\"Using a Shadcn template helps developers reduce frontend setup time and maintain consistent UI. Dashboard templates are known for clean component structures, accessibility, customization flexibility, and latest React updates, making them ideal for SaaS platforms, admin dashboards, analytics tools, and startup applications.\",\"question\":\"Why should you use a Shadcn dashboard template?\"},{\"answer\":\"Most Shadcn dashboard templates are production-ready from a frontend and UI perspective. They already include layouts, dashboards, authentication pages, charts, tables, and reusable components. Developers still need to connect APIs, manage application state, and implement backend logic before deploying production applications.\",\"question\":\"Are Shadcn dashboard templates production-ready or just UI starter kits?\"},{\"answer\":\"WrapPixel has years of experience building premium admin dashboard templates trusted by developers, SaaS teams, startups, and enterprise frontend projects. Our Shadcn dashboard templates are regularly updated for compatibility with modern React ecosystems including Next.js, Tailwind CSS, and shadcn/ui.\",\"question\":\"Why are WrapPixel's Shadcn dashboards a better choice over other templates?\"},{\"answer\":\"Yes, WrapPixel provides free Shadcn dashboard templates with functional pages and reusable UI components. These free templates are suitable for learning, MVP projects, startup prototypes, admin panels, and testing frontend workflows before upgrading to premium versions.\",\"question\":\"Does WrapPixel offer free Shadcn dashboard templates?\"},{\"answer\":\"Our Free Shadcn dashboards are ideal for small projects, MVPs, and learning purposes with limited pages and basic layouts. Premium Shadcn dashboard templates usually include multiple dashboards, advanced pages, authentication systems, charts, components, documentation, and long-term support for scaling production applications.\",\"question\":\"How do you choose between free and premium Shadcn dashboards?\"},{\"answer\":\"Yes, all premium Shadcn dashboard templates include 1 year of support, covering technical assistance, setup guidance, bug fixes, documentation, and community support. Developers also get access to detailed installation guides and customization resources for faster project development.\",\"question\":\"Does WrapPixel offer support for Shadcn dashboard templates?\"},{\"answer\":\"Our dashboard templates are widely used for SaaS applications, analytics platforms, CRM software, AI tools, finance dashboards, startup admin panels, project management systems, and internal business applications. Their reusable component architecture and scalable frontend structure make them suitable for both small MVPs and large production-ready platforms.\",\"question\":\"Which projects are Shadcn dashboard templates best for?\"},{\"answer\":\"Yes, our Shadcn templates are not limited to admin dashboards. Many templates also include ready-made website templates, landing pages, marketing sections, authentication pages, and reusable UI blocks for SaaS products, startups, corporate websites, agencies, and modern business applications.\",\"question\":\"Can I create a website or landing page using these Shadcn dashboard templates?\"}],\"subcategories\":[{\"faqs\":[{\"answer\":\"\",\"question\":\"\"}],\"title\":\"\",\"meta_title\":\"\",\"description\":\"\",\"meta_description\":\"\"}],\"imageUrl\":\"bxl:shadcn-ui\",\"popularity\":3,\"createdAt\":\"$D2025-03-30T06:11:33.954Z\",\"updatedAt\":\"$D2026-05-30T09:39:04.975Z\",\"featured_products\":{\"feature_title\":\"Weekly Best Seller\",\"adminmart_feature_items\":[\"matdash-next-js-admin-dashboard-template\"],\"wrappixel_feature_items\":[\"awake-agency-portfolio-astro-template\"]},\"related_categories\":[],\"isPrimary\":true}},{\"id\":3169,\"productId\":1109321,\"categoryId\":53,\"isMain\":true,\"category\":{\"id\":53,\"slug\":\"tailwind-templates\",\"title\":\"Tailwind\",\"category_title\":\"Tailwind Templates\",\"subtitle\":\"Premium \u0026 Free Tailwind CSS Templates\",\"description\":\"Download our stunning Premium and Free Tailwind Templates and themes to Build standout websites \u0026 web applications.\",\"category_header\":\"$30\",\"category_footer\":\"footer\",\"meta_title\":\"15+ Stunning Premium and Free Tailwind Templates | WrapPixel\",\"meta_description\":\"Download our stunning Premium and Free Tailwind Templates and themes to Build standout websites \u0026 web applications.\",\"meta_keywords\":[\"tailwind admin\",\"tailwind dashboard\",\"tailwind dashboard templates\",\"tailwind admin dashboard\",\"tailwind admin templates\",\"tailwind admin dashboard template\",\"tailwind templates\",\"tailwind css templates\",\"tailwind themes\",\"free tailwind templates\",\"tailwind free templates\",\"tailwind css dashboard\",\"tailwind admin panel\",\"tailwind ui templates\",\"responsive tailwind templates\",\"premium tailwind templates\",\"free tailwind dashboard templates\",\"free tailwind admin templates\"],\"faqs\":[{\"answer\":\"Tailwind CSS templates are pre-built frontend UI kits and website layouts created using Tailwind CSS utility classes. They help developers build dashboards, SaaS platforms, admin panels, landing pages, and business websites faster with reusable components and responsive layouts.\",\"question\":\"What are Tailwind CSS templates?\"},{\"answer\":\"Yes, our Tailwind templates are built for real-world production applications. They include scalable frontend architecture, reusable UI components, responsive pages, authentication screens, forms, charts, and modern layouts suitable for startups, SaaS products, agencies, and enterprise projects.\",\"question\":\"Are these Tailwind templates suitable for production projects?\"},{\"answer\":\"Yes, many of our Tailwind templates are available with modern frameworks such as React, Next.js, Astro, and other frontend ecosystems. This allows developers to work with their preferred stack while using Tailwind CSS for UI styling and customization.\",\"question\":\"Do your Tailwind templates support React and Next.js?\"},{\"answer\":\"Yes, our Tailwind dashboard templates are designed for building admin panels, C
1357RM software, analytics platforms, project management systems, and SaaS dashboards. They include charts, tables, widgets, forms, authentication pages, and reusable dashboard components required for modern applications.\",\"question\":\"Can I build a Tailwind dashboard using these templates?\"},{\"answer\":\"Yes, every Tailwind CSS template is fully responsive and optimized for desktops, tablets, and mobile devices. The layouts are designed to maintain consistent user experience across different screen sizes and devices.\",\"question\":\"Are the Tailwind templates responsive?\"},{\"answer\":\"Yes, developers can easily customize colors, typography, layouts, navigation, components, and branding using Tailwind CSS utility classes and structured frontend architecture. The templates are built for flexibility and faster development workflows.\",\"question\":\"Can developers customize the Tailwind templates easily?\"},{\"answer\":\"Yes, our collection includes Tailwind landing page templates, startup websites, SaaS marketing pages, agency websites, portfolios, ecommerce layouts, and modern business website templates with reusable frontend sections.\",\"question\":\"Do the Tailwind templates include landing pages and websites?\"},{\"answer\":\"Developers commonly use Tailwind templates for SaaS products, admin dashboards, CRM systems, analytics platforms, startup websites, internal tools, client portals, ecommerce applications, and modern frontend business websites.\",\"question\":\"What type of projects can I build with Tailwind templates?\"},{\"answer\":\"Yes, most of our Tailwind dashboard templates include built-in dark mode support, allowing users to switch seamlessly between light and dark themes across the entire application interface. These templates use Tailwind CSS class-based dark mode configuration for consistent styling across layouts, components, charts, forms, navigation, and dashboard pages while maintaining a smooth user experience and scalable frontend architecture.\",\"question\":\"Does WrapPixel provide Tailwind templates with Dark Theme support?\"},{\"answer\":\"Tailwind CSS templates help developers reduce frontend development time by providing reusable UI systems, responsive layouts, modern design patterns, and production-ready components that accelerate project delivery and improve development efficiency.\",\"question\":\"Why should developers use Tailwind CSS templates?\"}],\"subcategories\":[{\"faqs\":[{\"answer\":\"\",\"question\":\"\"}],\"title\":\"\",\"meta_title\":\"\",\"description\":\"\",\"meta_description\":\"\"}],\"imageUrl\":\"logos:tailwindcss-icon\",\"popularity\":9,\"createdAt\":\"$D2022-09-30T07:26:37.115Z\",\"updatedAt\":\"$D2026-06-03T10:28:44.084Z\",\"featured_products\":{\"feature_title\":\"Weekly Best Seller\",\"adminmart_feature_items\":[\"modernize-tailwind-nextjs-dashboard-template\"],\"wrappixel_feature_items\":[\"awake-agency-portfolio-astro-template\"]},\"related_categories\":[],\"isPrimary\":true}},{\"id\":3170,\"productId\":1109321,\"categoryId\":41,\"isMain\":true,\"category\":{\"id\":41,\"slug\":\"typescript-templates\",\"title\":\"Typescript Templates \u0026 Themes\",\"category_title\":\"TypeScript Templates\",\"subtitle\":\"Trending Typescript Templates\",\"description\":\"Download the Best Typescript Templates \u0026 Website Themes for quick web development. Enjoy Free \u0026 Premium options include a Live Chat, and Regular Updates.\",\"category_header\":\"$31\",\"category_footer\":\"footer\",\"meta_title\":\"Typescript Templates \u0026 Themes - WrapPixel\",\"meta_description\":\"Download the Best Typescript Templates \u0026 Website Themes for quick web development. Enjoy Free \u0026 Premium options include a Live Chat, and Regular Updates.\",\"meta_keywords\":[\"nextjs\"],\"faqs\":[{\"answer\":\"All the above Type
1357Script templates are used to build scalable web applications like admin dashboards, SaaS platforms, analytics tools, and business websites. They provide reusable components and structured architecture to speed up development.\",\"question\":\"What are TypeScript templates used for?\"},{\"answer\":\"Yes, they are built for production-ready apps with clean architecture, reusable UI systems, and scalable project structure. They are commonly used in SaaS and enterprise-level applications.\",\"question\":\"Are WrapPixel TypeScript templates suitable for production use?\"},{\"answer\":\"Our TypeScript templates work with popular frameworks like React, Next.js, Vite, Vue, Angular, and Vuetify. This gives flexibility to choose the right stack for your project.\",\"question\":\"Which frameworks do your TypeScript templates work with?\"},{\"answer\":\"They are mainly designed for web applications such as dashboards, SaaS platforms, and business websites. However, they can also support PWA-style experiences for mobile-friendly web apps.\",\"question\":\"Are TypeScript templates suitable for mobile apps or only web apps?\"},{\"answer\":\"TypeScript helps catch errors early, improves code quality, and makes large applications easier to maintain. It adds structure and scalability to modern frontend development.\",\"question\":\"Why should I use TypeScript for my project?\"},{\"answer\":\"Yes, we offer both free and premium TypeScript templates. Free templates are ideal for learning and small projects, while premium ones include advanced features and regular updates.\",\"question\":\"Are there any free TypeScript templates available?\"},{\"answer\":\"They provide a structured architecture, reusable components, and clean coding patterns. This helps reduce bugs and keeps the codebase maintainable as the project grows.\",\"question\":\"How do your templates improve code quality?\"},{\"answer\":\"We provide detailed documentation and dedicated support for all templates. This helps developers quickly set up projects and resolve issues efficiently.\",\"question\":\"What kind of support do you provide?\"},{\"answer\":\"Yes, they are designed to scale easily with growing applications. The modular structure makes it simple to extend features without breaking existing functionality.\",\"question\":\"Are these templates suitable for large-scale projects?\"}],\"subcategories\":[{\"faqs\":[{\"answer\":\"\",\"question\":\"\"}],\"title\":\"\",\"meta_title\":\"\",\"description\":\"\",\"meta_description\":\"\"}],\"imageUrl\":\"test\",\"popularity\":0,\"createdAt\":\"$D2025-04-30T05:47:01.118Z\",\"updatedAt\":\"$D2026-06-03T07:27:34.334Z\",\"featured_products\":{\"feature_title\":\"Weekly Best Seller\",\"adminmart_feature_items\":[\"modernize-tailwind-nextjs-dashboard-template\"],\"wrappixel_feature_items\":[\"materialm-tailwind-react-admin-template\"]},\"related_categories\":[],\"isPrimary\":false}},{\"id\":3171,\"productId\":1109321,\"categoryId\":23,\"isMain\":true,\"category\":{\"id\":23,\"slug\":\"vercel-templates\",\"title\":\"Vercel\",\"category_title\":\"Vercel Templates\",\"subtitle\":\"Vercel Themes \u0026 Templates\",\"description\":\"WrapPixel offers high quality and product ready Vercel templates and themes based on Next Js. You can check free and premium vercel templates.\",\"category_header\":\"$32\",\"category_footer\":\"footer\",\"meta_title\":\"Best Vercel Templates \u0026 Themes by WrapPixel\",\"meta_description\":\"WrapPixel offers high quality and product ready Vercel templates and themes based on Next Js. You can check free and premium vercel templates.\",\"meta_keywords\":[\"reactjs\"],\"faqs\":[{\"answer\":\"Vercel templates help developers launch modern web applications faster using pre-built frontend architecture, reusable UI components, deployment-ready configurations, and scalable project structures. They are commonly used for SaaS platforms, admin dashboards, startup websites, landing pages, blogs, AI tools, and internal business applications.\",\"question\":\"What are Vercel templates used for?\"},{\"answer\":\"Yes, all these templates are deployment-ready starter projects optimized for seamless deployment on Vercel, helping developers launch websites, dashboards, and web applications faster.\",\"question\":\"Are these Vercel templates optimized for deployment on Vercel?\"},{\"answer\":\"Mostly, our Vercel templates are built using modern frontend tech stacks like Next.js, React, Tailwind CSS, Astro, Type
1357Script, Shadcn UI, Headless UI, MUI, Vite, Sanity, and reusable components.\",\"question\":\"Which frameworks are used in these Vercel templates?\"},{\"answer\":\"Yes, these templates are designed for SaaS applications and commonly include authentication pages, dashboard layouts, user management systems, reusable frontend components, API-ready architecture, and scalable routing structures.\",\"question\":\"Can I build SaaS applications using these Vercel templates?\"},{\"answer\":\"Yes, many templates include admin dashboard pages with analytics widgets, charts, tables, role-based layouts, settings pages, notifications, and reusable dashboard UI systems for modern web applications.\",\"question\":\"Do the Vercel templates include admin dashboard layouts?\"},{\"answer\":\"Yes, these Vercel templates are not limited to dashboards. Many templates include landing pages, marketing websites, startup homepages, portfolio layouts, blog pages, and reusable website sections optimized for conversion-focused frontend development.\",\"question\":\"Can I create landing pages and business websites using these templates?\"},{\"answer\":\"Yes, all templates are built with responsive layouts to ensure proper rendering across desktops, tablets, and mobile devices using modern frontend responsive design practices.\",\"question\":\"Are the Vercel templates mobile responsive?\"},{\"answer\":\"Most Vercel templates include built-in dark mode support with theme switching capabilities and reusable UI components compatible with light and dark layouts.\",\"question\":\"Do these templates support light-dark mode?\"},{\"answer\":\"Yes, the templates are built with SEO-friendly page structures, semantic HTML, optimized metadata support, responsive layouts, and performance-focused frontend architecture to help improve visibility and page performance.\",\"question\":\"Are the templates SEO optimized?\"},{\"answer\":\"Yes, developers can easily integrate APIs, authentication providers, headless CMS platforms, databases, payment gateways, and third-party backend services using the scalable frontend architecture included in the templates.\",\"question\":\"Can I integrate APIs and backend services with these templates?\"},{\"answer\":\"Yes, the templates include organized folder structures, reusable components, clean code practices, and setup documentation that help developers customize projects more efficiently.\",\"question\":\"Are the Vercel templates beginner-friendly for developers?\"},{\"answer\":\"Yes, every template includes installation guides, setup documentation, deployment instructions, and customization resources to help developers get started quickly.\",\"question\":\"Do WrapPixel Vercel templates include documentation?\"}],\"subcategories\":[],\"imageUrl\":\"logos:vercel-icon\",\"popularity\":11,\"createdAt\":\"$D2025-01-30T10:25:57.948Z\",\"updatedAt\":\"$D2026-05-30T09:47:38.529Z\",\"featured_products\":{\"feature_title\":\"Weekly Best Seller\",\"adminmart_feature_items\":[\"matdash-next-js-admin-dashboard-template\"],\"wrappixel_feature_items\":[\"studiova-nextjs-business-agency-template\"]},\"related_categories\":[],\"isPrimary\":true}}],\"oldReviews\":[]},\"slug\":\"spike-react-tailwind-admin-template\"}]}]\n"])</script>
1357<script>self.__next_f.push([1,"33:I[634719,[\"/_next/static/immutable/chunks/2jyo3n9b24cbl.js\",\"/_next/static/immutable/chunks/0gyl_cqc-q8uz.js\",\"/_next/static/immutable/chunks/0r-ly69tvb7i2.js\",\"/_next/static/immutable/chunks/1idjy-xm-5o9o.js\",\"/_next/static/immutable/chunks/1g94sy_awtp9p.js\"],\"IconMark\"]\n18:null\n1c:[[\"$\",\"title\",\"0\",{\"children\":\"Spike React Tailwind Admin Template - WrapPixel\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN \u0026 Headless Ui.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://twitter.com/wrappixel\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"WrapPixel\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://wrappixel.com/templates/spike-react-tailwind-admin-template\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"Spike React Tailwind Admin Template - WrapPixel\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN \u0026 Headless Ui.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:url\",\"content\":\"https://wrappixel.com/templates/spike-react-tailwind-admin-template\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:image\",\"content\":\"https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:alt\",\"content\":\"Spike React Tailwind Admin Template\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"13\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:site\",\"content\":\"@wrappixel\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:title\",\"content\":\"Spike React Tailwind Admin Template - WrapPixel\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:description\",\"content\":\"Spike React Tailwind is a complete solution for any kind your dashboard project requirements as it comes with Flowbite, ShadCN \u0026 Headless Ui.\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image\",\"content\":\"https://images.wrappixel.com/templates/pro/spike/Spike-React-Tailwind-CSS-Dashboard-Template.webp\"}],[\"$\",\"link\",\"18\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0rp8aga7fedco.ico\",\"sizes\":\"16x16\",\"type\":\"image/x-icon\"}],[\"$\",\"$L33\",\"19\",{}]]\n"])</script>
1357<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"ceaa0eef431a46f3b195537c6963f062","r":1,"spa":2}' crossorigin="anonymous"></script>
1357
1358</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.