Promote the All Package on preview and docs (#3138)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/all-package-cta.md

@@ -0,0 +1,6 @@
+---
+"@tabler/docs": patch
+"@tabler/preview": patch
+---
+
+Replaced the Sponsor button in the preview navbar with a subtle All Package link (hosted demo only) and replaced the Illustrations card in the docs sidebar with an All Package card.

docs/components/DocsToc.astro

@@ -3,7 +3,6 @@
 // markdown content, excluding <!--EXAMPLE-->...<!--/EXAMPLE--> blocks).
 import Subheader from '@ui/Subheader.astro'
 import Icon from '@ui/Icon.astro'
-import illustrations from '@data/illustrations.json'
 
 export interface TocItem {
   /** 2 or 3 (h2/h3); h3 gets the ms-3 indent */
@@ -23,7 +22,7 @@ interface Props {
 
 const { toc = [], editUrl, sourceUrl } = Astro.props
 
-const illustrationsCount = illustrations.length
+const allPackageUrl = 'https://tabler.io/pricing?ref=tabler-docs-toc#bundle'
 ---
 
 <!-- BEGIN DOCS TOC -->{
@@ -43,11 +42,13 @@ const illustrationsCount = illustrations.length
   )
 }
 
-<a href="https://r.tabler.io/illustrations" class="card card-sm shadow-none" target="_blank" rel="noopener noreferrer">
+<a href={allPackageUrl} class="card card-sm shadow-none card-gradient card-gradient-rainbow docs-promo-card" target="_blank" rel="noopener noreferrer">
   <div class="card-body">
-    <img src="/img/banner-carbon.png" class="mb-3" alt="" width="260" height="200" loading="lazy" />
+    <img src="/img/banner-all-package.png" class="mb-3 hide-theme-dark" alt="" width="296" height="160" loading="lazy" />
+    <img src="/img/banner-all-package-dark.png" class="mb-3 hide-theme-light" alt="" width="296" height="160" loading="lazy" />
 
-    <h4>{illustrationsCount} sleek illustrations for your startup's visual identity.</h4>
+    <h4>Get Admin Template, Icons, Illustrations and Emails in one bundle.</h4>
+    <div class="text-secondary">Tabler All Package — one purchase, every premium product.</div>
   </div>
 </a>
 

docs/scss/docs.scss

@@ -408,6 +408,17 @@ header > .navbar {
   }
 }
 
+// All Package promo card under the table of contents (.card-gradient-rainbow):
+// on hover the rainbow border starts rotating, reusing core's gradient-animation.
+.docs-promo-card:hover,
+.docs-promo-card:focus-visible {
+  animation: gradient-animation 6s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
 // Previous/next page navigation: a pair of cards on the page canvas below the
 // article panel, aligned with it and with the footer.
 .docs-pagination {

shared/components/navbar/NavbarSide.astro

@@ -6,7 +6,6 @@ import NavbarSideNotifications from './NavbarSideNotifications.astro'
 import NavbarSideApps from './NavbarSideApps.astro'
 import NavbarSideLanguage from './NavbarSideLanguage.astro'
 import NavbarSideUser from './NavbarSideUser.astro'
-import { site } from '@shared/lib/site'
 
 /** Bootstrap responsive breakpoint used for `d-{breakpoint}-flex` — $grid-breakpoints minus xs */
 export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
@@ -32,22 +31,27 @@ const {
   personId = 1,
   hideUsername = false,
   dark = false,
-  // show-* flags default false — sidebar only shows the Sponsor button unless set.
+  // show-* flags default false — sidebar only shows the All Package button (hosted demo) unless set.
   showThemeToggle = false,
   showNotifications = false,
   showApps = false,
   showLanguageSelector = false,
   showUser = false,
 } = Astro.props
+
+// The All Package link is an ad for tabler.io, so it only renders on the hosted demo
+// (Vercel deploys), never in local builds or the packaged template (VERCEL_ENV is unset there).
+const isVercelDeploy = !!process.env.VERCEL_ENV
+const allPackageUrl = 'https://tabler.io/pricing?ref=tabler-preview-navbar#bundle'
 ---
 
 <!-- BEGIN NAVBAR ACTIONS -->
 <div class:list={['navbar-nav flex-row', className]}>
   {
-    !condensed && (
+    !condensed && isVercelDeploy && (
       <div class={`nav-item d-none d-${breakpoint}-flex me-3`}>
         <ButtonList>
-          <Button icon="heart" iconColor="pink" text="Sponsor" href={site.githubSponsorsUrl} external />
+          <Button icon="package" iconColor="blue" text="All Package" href={allPackageUrl} external />
         </ButtonList>
       </div>
     )