Merge branch 'main' of https://github.com/tabler/tabler into dev

site/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["next/babel"],
-  "plugins": []
-}

site/.editorconfig

@@ -1,10 +0,0 @@
-# editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = space
-insert_final_newline = true
-trim_trailing_whitespace = true

site/.env.example

@@ -1,2 +0,0 @@
-# App
-NEXT_PUBLIC_APP_URL=http://localhost:3010

site/.gitignore

@@ -1,50 +0,0 @@
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-.idea/
-
-# testing
-/coverage
-
-# next.js
-.next/
-/out/
-/public/sitemap*
-
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel
-package-lock.json
-
-# tmp files
-/.tmp-emails
-
-# yarn
-.yarn
-.yarnrc.yml
-.pnp.loader.mjs
-.pnp.cjs
-.jekyll-cache/
-_site
-
-.contentlayer
-
-public/static/tabler-icons/icons/*
-public/static/tabler-icons/icons-png/*

site/.nvmrc

@@ -1 +0,0 @@
-v18

site/.prettierignore

@@ -1,6 +0,0 @@
-src/data/*
-dist
-node_modules
-.next
-build
-.contentlayer

site/.prettierrc

@@ -1,10 +0,0 @@
-{
-	"bracketSpacing": true,
-	"jsxSingleQuote": false,
-	"printWidth": 240,
-	"proseWrap": "always",
-	"semi": true,
-	"singleQuote": true,
-	"tabWidth": 2,
-	"trailingComma": "all"
-}

site/README.md

@@ -1,34 +0,0 @@
-<p align="center">
-<a href="https://github.com/tabler/tabler"><img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/logo.svg" alt="A premium and open source dashboard template with a responsive and high-quality UI." width="300"></a><br><br>
-A premium and open source dashboard template with a responsive and high-quality UI.
-</p>
-
-## 📦 Setup environment
-
-To run our documentation locally, first follow the steps in the main [Tabler README](https://github.com/tabler/tabler/blob/dev/README.md) to set up dependencies.
-
-## Build documentation locally
-
-You need to have `pnpm` installed.
-
-1. From the `/tabler/site` directory, run `pnmp install` to install dependencies in the command line.
-2. Then execute `pnpm run build` to build the Next site which holds Tabler documentation.
-3. Execute `pnpm run start` to start the Next site.
-   - A success may look like
-   ```
-    > start
-    > next start
-
-    ▲ Next.js 13.5.3
-    - Local:        http://localhost:3000
-
-    ✓ Ready in 1513ms
-
-   ```
-4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the documentation site, a local version of [tabler.io/docs](https://tabler.io/docs).
-
-**Note**: *To see a full list of possible documentation site command line commands, go to `tabler/site/package.json`.*
-
-## License
-
-See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.

site/app/(empty)/layout.tsx

@@ -1,5 +0,0 @@
-export default function PreviewLayout({ children }) {
-  return (
-    <>{children}</>
-  );
-}

site/app/(empty)/preview/page.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Link from 'next/link';
-// import { PreviewLayout } from "@/layouts/PreviewLayout"
-import clsx from 'clsx';
-
-import { uiDemoUrl, uiDownloadUrl } from '@/config/site';
-import Icon from '@/components/Icon';
-
-const devices = [
-  { name: 'mobile', width: 375, icon: 'device-mobile' },
-  { name: 'tablet', width: 960, icon: 'device-tablet' },
-  { name: 'desktop', width: '100%', icon: 'device-desktop' },
-];
-
-export default function PreviewPage() {
-  const [currentDevice, setCurrentDevice] = useState('desktop');
-  const [width, setWidth] = useState<string|number>('100%');
-
-  return (
-    <div className="preview">
-      <iframe
-        className="preview-iframe"
-        src={uiDemoUrl}
-        frameBorder="0"
-        style={{ width }}
-      />
-      <div className="preview-navbar">
-        <div className="mr-auto">
-          <Link href="/" className="preview-navbar-link">
-            <span className="logo logo-white logo-square" aria-label="Tabler" />
-          </Link>
-        </div>
-        <div className="preview-navbar-devices">
-          {devices.map((device) => (
-            <button
-              key={device.name}
-              className={clsx('preview-navbar-link', {
-                active: device.name === currentDevice,
-              })}
-              title={`Preview template on ${device.name}`}
-              onClick={() => {
-                setCurrentDevice(device.name);
-                setWidth(device.width);
-              }}
-            >
-              <Icon name={device.icon} />
-            </button>
-          ))}
-        </div>
-        <div className="ml-auto d-flex">
-          <a href={uiDownloadUrl} className="btn btn-primary btn-responsive-sm lemonsqueezy-button">
-            <Icon name="download" />
-            <span className="btn-responsive-text">Download Tabler</span>
-          </a>
-          <a href={uiDemoUrl} className="preview-navbar-link ml-3">
-            <Icon name="x" />
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// export async function getStaticProps() {
-//   return {
-//     props: {
-//       meta: {
-//         bodyClassName: "o-auto",
-//       },
-//     },
-//   }
-// }

site/app/(empty)/samples/page.tsx

@@ -1,66 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useClipboard } from '@/hooks';
-import clsx from 'clsx';
-// import glob from 'glob';
-
-
-const importFiles = (type) => {
-  return [];
-  //return glob.sync(`./public/samples/${type}/*.{jpg,png}`).map((file) => file.replace('./public', ''))
-};
-
-export default function SamplesPage() {
-
-  const clipboard = useClipboard();
-  const types = [
-    {
-      title: 'Avatars',
-      list: importFiles('avatars'),
-    },
-    {
-      title: 'Photos',
-      list: importFiles('photos'),
-    },
-    {
-      title: 'Products',
-      list: importFiles('products'),
-    },
-    {
-      title: 'Tracks',
-      list: importFiles('tracks'),
-    },
-  ];
-
-  let [clicked, setClicked] = useState([]);
-
-  return (
-    <>
-      {types.map((type, i) => (
-        <section className={clsx('section', i % 2 === 0 ? '' : 'section-light')} key={type.title}>
-          <div className="container">
-            <div>
-              <h3 className="mb-4">{type.title}</h3>
-              <div className="row">
-                {type.list.map((item) => (
-                  <div className="col-auto" key={item}>
-                    <img
-                      src={`${item}`}
-                      alt=""
-                      style={{ width: '80px', opacity: clicked.indexOf(item) >= 0 ? 0.2 : 1 }}
-                      onClick={() => {
-                        clipboard.copy(item);
-                        setClicked([item, ...clicked]);
-                      }}
-                    />
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </section>
-      ))}
-    </>
-  );
-}

site/app/(marketing)/[slug]/layout.tsx

@@ -1,14 +0,0 @@
-
-export default function SingleLayout({
-  children
-}: {
-  children: React.ReactNode,
-}) {
-  return (
-    <section className="section">
-      <div className="container container-narrow">
-        {children}
-      </div>
-    </section>
-  );
-}

site/app/(marketing)/[slug]/page.tsx

@@ -1,65 +0,0 @@
-import { notFound } from 'next/navigation';
-import { allPages } from 'contentlayer/generated';
-import { Metadata } from 'next';
-import Mdx from '@/components/MDX';
-
-interface PageProps {
-  params: {
-    slug: string
-  }
-}
-
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
-  const page = await getPageFromParams(params);
-
-  if (!page) {
-    return {};
-  }
-
-  return {
-    title: `${page.title}`,
-    description: page.description,
-    robots: page.robots,
-  };
-}
-
-async function getPageFromParams(params) {
-  const slug = params?.slug,
-    page = allPages.find((page) => page.slugAsParams === slug);
-
-  if (!page) {
-    null;
-  }
-
-  return page;
-}
-
-export async function generateStaticParams(): Promise<PageProps['params'][]> {
-  return allPages.map((page) => ({
-    slug: page.slugAsParams,
-  }));
-}
-
-export default async function PagePage({ params }: PageProps) {
-  const page = await getPageFromParams(params);
-
-  if (!page) {
-    notFound();
-  }
-
-  return (
-    <>
-      {page && page.title && (
-        <>
-          <div className="section-header">
-            <h1 className="section-title section-title-lg">{page.title}</h1>
-          </div>
-        </>
-      )}
-      <div className="markdown">
-        {page.description && <p className="lead">{page.description}</p>}
-        <Mdx code={page.body.code} />
-      </div>
-    </>
-  );
-}

site/app/(marketing)/blog/[slug]/page.tsx

@@ -1,83 +0,0 @@
-import { notFound } from 'next/navigation';
-import { allPosts } from 'contentlayer/generated';
-
-import Mdx from '@/components/MDX';
-import Ad from '@/components/Ad';
-import Link from '@/components/Link';
-import Icon from '@/components/Icon';
-import { blogEnabled } from '@/config/site';
-
-interface PageProps {
-  params: {
-    slug: string;
-  };
-}
-
-async function getPageFromParams(params) {
-  const slug = params?.slug,
-    page = allPosts.find((page) => page.slugAsParams === slug);
-
-  if (!page) {
-    null;
-  }
-
-  return page;
-}
-
-export async function generateStaticParams(): Promise<PageProps['params'][]> {
-  return allPosts.map((page) => ({
-    slug: page.slugAsParams,
-  }));
-}
-
-export default async function PostPage({ params }: PageProps) {
-  const post = await getPageFromParams(params);
-
-  if (!post || !blogEnabled) {
-    notFound();
-  }
-
-  return (
-    <>
-      <section className="section pt-0">
-        <div className="container">
-          <div>
-            {post && post.title && (
-              <div className="py-7 text-center">
-                {post.product && <div className="hero-subheader">{post.product}</div>}
-                <div className="text-muted mb-2">July 25, 2023</div>
-                <h1 className="hero-title">{post.title}</h1>
-              </div>
-            )}
-          </div>
-
-          <div className="row">
-            <div className="col">
-              <div className="sticky-top">
-                <Link href="/blog" className="link-muted">
-                  <Icon name="chevron-left" />
-                  Go back
-                </Link>
-              </div>
-            </div>
-            <div className="col-slim">
-              <div className="markdown">
-                {post.description && <p className="lead">{post.description}</p>}
-                <Mdx code={post.body.code} />
-              </div>
-            </div>
-            <div className="col">
-              <div className="sticky-top">
-                <div className="row justify-end">
-                  <div className="col-side">
-                    <Ad />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

site/app/(marketing)/blog/archive/page.tsx

@@ -1,24 +0,0 @@
-import { blogEnabled } from '@/config/site';
-import { allPosts } from 'contentlayer/generated';
-import { notFound } from 'next/navigation';
-
-export default async function BlogArchivePage() {
-  const posts = allPosts.sort((a, b) => {
-    return new Date(a.date).getTime() - new Date(b.date).getTime();
-  }).reverse();
-
-  if (!blogEnabled) {
-    notFound();
-  }
-
-  return (
-    <>
-      {posts.map((post, i) => (
-        <div key={post._id}>
-          {post._id}
-          <a href={post.slug}>{post.title}</a>
-        </div>
-      ))}
-    </>
-  );
-}

site/app/(marketing)/blog/page.tsx

@@ -1,83 +0,0 @@
-import Icon from '@/components/Icon';
-import { iconsUrl, blogEnabled } from '@/config/site';
-import Link from 'components/Link';
-import { allPosts } from 'contentlayer/generated';
-import { format } from 'date-fns';
-import { notFound } from 'next/navigation';
-
-export const metadata = {
-  title: 'Blog',
-  description: 'Stay in the loop with all things Tabler. We provide regular updates on new features, changelogs, and news, ensuring you never miss any of our software developments.',
-};
-
-export default async function BlogPage() {
-  if(! blogEnabled) {
-    notFound();
-  }
-
-  return (
-    <>
-      <section className="section">
-        <div className="page-header">
-          <h2 className="page-title page-title-lg">Blog</h2>
-          <p className="page-description">
-            Stay in the loop with all things <Link href="/">Tabler</Link> and <a href={iconsUrl}>Tabler Icons</a>. Regular updates on new features, changelogs, and news, ensuring you never miss any of our software developments.
-          </p>
-        </div>
-        <div className="container">
-          <div className="row justify-center">
-            <div className="col-slim">
-              <div className="divider-y-8">
-                {allPosts.map((post, i) => (
-                  <div className="" key={post.slug} itemScope={true} itemType="https://schema.org/NewsArticle">
-                    {post.image && (
-                      <Link href={post.slug} className="d-block mb-4">
-                        <div className="outline-light rounded lh-1">
-                          <img src={`/img/blog/${post.image}`} width={660} height={361} className="rounded" alt={post.title} itemProp="image" />
-                        </div>
-                      </Link>
-                    )}
-                    <div>
-                      {post.title && (
-                        <h2>
-                          <meta itemProp="headline" content={post?.title} />
-                          <meta itemProp="url" content={post.slug} />
-                          <Link href={post.slug}>{post?.title}</Link>
-                        </h2>
-                      )}
-
-                      <div className="markdown text-muted">
-                        <p itemProp="description">{post.description}</p>
-                      </div>
-                    </div>
-
-                    <div className="mt-4">
-                      <div className="row">
-                        <div className="col">
-                          <meta itemProp="datePublished" content={format(new Date(post.date), 'yyyy-MM-dd')} />
-                          <div className="text-muted">{format(new Date(post.date), 'MMM d, Y')}</div>
-                        </div>
-                        <div className="col text-right">
-                          <Link href={post.slug} aria-label={`Read more about "${post.title}"`}>
-                            Read more <Icon name="arrow-right" />
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="section section-light">
-        <div className="container">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quibusdam quos est repellat rerum molestias, autem ullam, exercitationem magni non eos sunt, voluptates laboriosam dignissimos mollitia tempora ipsum illo
-          adipisci.
-        </div>
-      </section>
-    </>
-  );
-}

site/app/(marketing)/changelog/page.tsx

@@ -1,69 +0,0 @@
-import { allChangelogs } from '@/.contentlayer/generated';
-import Mdx from '@/components/MDX';
-import { changelogEnabled } from '@/config/site';
-import { dateTemplate, distanceToNow, format } from '@/lib/date';
-import { notFound } from 'next/navigation';
-
-export const metadata = {
-  title: 'Changelog',
-  description: 'Discover the latest Tabler app updates and enhancements on our Changelog page. Stay informed and experience the best features!',
-};
-
-export default function ChangelogPage() {
-  if (!changelogEnabled) {
-    notFound();
-  }
-
-  const changelogs = allChangelogs
-    .sort((a, b) => {
-      return new Date(a.date).getTime() - new Date(b.date).getTime();
-    })
-    .reverse();
-
-  return (
-    <>
-      <section className="section pb-0">
-        <div className="container">
-          <div className="section-header mb-0">
-            <h2 className="section-title section-title-lg">Changelog</h2>
-            <p className="section-description">
-              Most recent updates, bug fixes, and introduction of new features.
-            </p>
-          </div>
-        </div>
-      </section>
-      <section className="section">
-        <div className="container container-narrow">
-          <div className="timeline">
-            {changelogs.map((changelog) => (
-              <div className="row g-7 timeline-item" key={changelog.version}>
-                <div className="col-3 timeline-summary">
-                  <div className="font-medium font-h4">v{changelog.version}</div>
-                  <div
-                    className="text-muted mb-3 font-h6"
-                    itemProp="datePublished"
-                    content={format(changelog.date, 'yyyy-MM-dd')}
-                  >
-                    Published{' '}
-                    <time
-                      dateTime={dateTemplate(changelog.date)}
-                      className="text-muted"
-                    >
-                      {distanceToNow(changelog.date)}
-                    </time>
-                  </div>
-                </div>
-                <div className="col-9 timeline-description">
-                  {changelog.title && <h3 className="mb-3">{changelog.title}</h3>}
-                  <div className="markdown">
-                    <Mdx code={changelog.body.code} />
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

site/app/(marketing)/docs/[[...slug]]/layout.tsx

@@ -1,13 +0,0 @@
-export const metadata = {
-  title: 'Documentation',
-  template: '%s - Documentation',
-  description: 'Get started with Tabler, the one of world’s most popular framework for building responsive, mobile-first dashboards.',
-};
-
-export default function DocsLayout({ children /*, meta = {}, pageProps*/ }) {
-  return (
-    <div className="border-bottom bg-white">
-      <div className="container">{children}</div>
-    </div>
-  );
-}

site/app/(marketing)/docs/[[...slug]]/page.tsx

@@ -1,136 +0,0 @@
-
-import { Metadata } from 'next';
-import { notFound } from 'next/navigation';
-import { allDocs } from 'contentlayer/generated';
-import { name } from '@/config/site';
-
-import { getTableOfContents } from '@/lib/toc';
-import Mdx from '@/components/MDX';
-import TablerSponsorsBanner from '@/components/TablerSponsorsBanner';
-import Link from 'next/link';
-import TOC from '@/components/TOC';
-import DocsMenu from '@/components/DocsMenu';
-import Icon from '@/components/Icon';
-import Ad from '@/components/Ad';
-
-
-interface DocPageProps {
-  params: {
-    slug: string[]
-  }
-}
-
-async function getDocFromParams(params) {
-  const slug = params.slug?.join('/') || '';
-  const doc = allDocs.find((doc) => doc.slugAsParams === slug);
-
-  if (!doc) {
-    null;
-  }
-
-  return doc;
-}
-
-export async function generateMetadata({
-  params,
-}: DocPageProps): Promise<Metadata> {
-  const doc = await getDocFromParams(params);
-
-  if (!doc) {
-    return {};
-  }
-
-  return {
-    title: `${doc.title} - Documentation - ${name}`,
-    description: doc.description,
-    openGraph: {
-      type: 'article',
-    },
-  };
-}
-
-export async function generateStaticParams(): Promise<
-  DocPageProps['params'][]
-> {
-  return allDocs.map((doc) => ({
-    slug: doc.slugAsParams.split('/'),
-  }));
-}
-
-export default async function DocPage({ params }: DocPageProps) {
-  const doc = await getDocFromParams(params);
-
-  if (!doc) {
-    notFound();
-  }
-
-  const toc = await getTableOfContents(doc.body.raw);
-
-  return (
-    <div className="row g-0">
-      <div className="md:col-auto docs-side">
-        {/*<input type="search" className="form-control w-100 mb-5" placeholder="Search&hellip;" />*/}
-        <DocsMenu />
-      </div>
-      <div className="col">
-        <div className="row">
-          <div className="md:col">
-            <div className="py-6 md:pl-6">
-              <nav aria-label="breadcrumbs" className="breadcrumb mb-6">
-                <ul className="breadcrumb-list">
-                  <li className="breadcrumb-item">
-                    <Link href="/" className="breadcrumb-link">
-                      Home
-                    </Link>
-                  </li>
-                  <li className="breadcrumb-item">
-                    <Link href="/docs" className="breadcrumb-link">
-                      Documentation
-                    </Link>
-                  </li>
-                  <li className="breadcrumb-item">
-                    <Link href={`/docs/${params.slug.join('/')}`} className="breadcrumb-link">
-                      {doc.title}
-                    </Link>
-                  </li>
-                </ul>
-              </nav>
-              <div className="markdown">
-                {/* {category && (
-        <div className="h-subheader text-primary">{category}</div>
-      )} */}
-                {doc.title && <h1>{doc.title}</h1>}
-                {doc.description && <p className="lead">{doc.description}</p>}
-
-                <Mdx code={doc.body.code} />
-              </div>
-            </div>
-          </div>
-          <div className="docs-side-toc">
-            <div className="pl-6 font-h6 pt-6">
-              <div className="h6 mb-3">On this page</div>
-              <div>
-                <TOC toc={toc} />
-              </div>
-              <div className="mt-4 border-top pt-4">
-                <a href={`https://github.com/tabler/tabler/blob/main/docs/${doc.slugAsParams.split(',').join('/')}.mdx`} className="link-muted">
-                  Improve this page
-                  <Icon name="edit" className="icon-inline ml-2" />
-                </a>
-              </div>
-
-              <div className="mt-5">
-                <Ad />
-              </div>
-            </div>
-          </div>
-          <div className="col-12">
-            <div className="pl-6 mt-7">
-              <TablerSponsorsBanner />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

site/app/(marketing)/emails/gallery/page.tsx

@@ -1,69 +0,0 @@
-import emails from '@/data/emails.json';
-import Link from '@/components/Link';
-import EmailImage from '@/components/EmailImage';
-import Slider from '@/components/Slider';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import { emailsCount } from '@/config/site';
-import CTABannerEmails from '@/components/CTABAnnerEmails';
-import clsx from 'clsx';
-
-export const metadata = {
-  title: 'Emails Gallery',
-  description: 'Tabler Emails is a set of responsive email templates for marketing, transactional and automated emails.',
-};
-
-export default function EmailsGalleryPage() {
-  return (
-    <>
-      <section className="section pb-0">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="section-title section-title-lg">Email templates gallery</h2>
-            <p className="section-description">
-              See how our emails look. Choose your favorite from among {emailsCount}
-              &nbsp;carefully prepared emails.
-            </p>
-          </div>
-        </div>
-      </section>
-
-
-      {emails.map((email, i) => (
-        <section key={email.descriptionShort} className={clsx('section py-6', i % 2 == 1 ? 'section-light' : '')}>
-          <div className="container container-narrow">
-            <div className={clsx('row g-6 items-center', i % 2 == 0 ? 'flex-row-reverse' : '')}>
-              <div className="col">
-                <h3 className="mb-4">{email.descriptionShort}</h3>
-                <p>
-                  {email.descriptionLong}
-                </p>
-              </div>
-              <div className="col-5">
-                <div>
-                  <div className="rounded img-gradient border">
-                    <div className="o-hidden ratio-3x4 mx-auto ">
-                      <ResponsiveImage
-                        src={`/img/tabler-emails/screenshots/${email.screenshot}-full.png`}
-                        width={540}
-                        height={email.height / email.width * 540}
-                        className="rounded mx-auto"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      ))}
-
-      <section className="section">
-        <div className="container">
-          <div className="mt-7">
-            <CTABannerEmails />
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

site/app/(marketing)/emails/page.tsx

@@ -1,286 +0,0 @@
-import HeroEmails from '@/components/layout/hero/UiEmails';
-import CTABannerEmails from '@/components/CTABAnnerEmails';
-import Link from '@/components/Link';
-import SectionDivider from '@/components/SectionDivider';
-import Features from '@/components/Features';
-import Shape from '@/components/Shape';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import React from 'react';
-import Slider from '@/components/Slider';
-
-export const metadata = {
-  title: '54 eye-catching, customizable and responsive email templates',
-  description: 'Tabler Emails is a set of responsive email templates for marketing, transactional and automated emails.',
-};
-
-const EmailsFeatures1 = () => {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="row xl:g-7">
-          <div className="lg:col-6">
-            <ResponsiveImage
-              src="/img/tabler-emails/features/emails.png"
-              width="564"
-              height="549"
-              className="mx-auto"
-            />
-          </div>
-          <div className="lg:col-6 d-flex flex-column items-center">
-            <div className="section-header w-100">
-              <h4 className="section-title text-center lg:text-left">Promote your brand the right way</h4>
-            </div>
-
-            <div className="space-y-5">
-              <div data-aos="fade-up" data-aos-delay="0">
-                <div className="row">
-                  <div className="col-auto">
-                    <Shape size="md" color="primary" icon="target-arrow" />
-                  </div>
-                  <div className="col">
-                    <h3>Achieve your marketing goals</h3>
-                    <p className="text-muted m-0">
-                      Prepare engaging email campaigns and newsletters, keep your recipients up to date with the latest
-                      news, let them know about their order status or send out customer satisfaction surveys. Our set of
-                      emails will help you with all that and much more!
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div data-aos="fade-up" data-aos-delay="150">
-                <div className="row">
-                  <div className="col-auto">
-                    <Shape size="md" color="primary" icon="brush" />
-                  </div>
-                  <div className="col">
-                    <h3>Personalization is key</h3>
-                    <p className="text-muted m-0">
-                      Customize the templates to make them suitable for your target group. You can change every element
-                      as you wish, including the background, colors, icons, spacers and images. And if you want to
-                      present your data in an attractive way, make use of advanced reports, charts or progress bars.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div data-aos="fade-up" data-aos-delay="300">
-                <div className="row">
-                  <div className="col-auto">
-                    <Shape size="md" color="primary" icon="device-mobile" />
-                  </div>
-                  <div className="col">
-                    <h3>Great quality with little effort</h3>
-                    <p className="text-muted m-0">
-                      More than 50% of emails today are open on mobile devices, so we’ve made sure our templates look
-                      great on any device and screen size. They are fully responsive and mobile-ready, helping you take
-                      care of great user experience.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const EmailsFeatures2 = () => {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="row xl:g-7">
-          <div className="lg:col-6 d-flex flex-column items-center">
-            <div className="section-header w-100">
-              <h4 className="section-title text-center lg:text-left">
-                Focus on your brand and we’ll take care of the rest
-              </h4>
-            </div>
-            <div className="space-y-5">
-              <div data-aos="fade-up" data-aos-delay="0">
-                <div className="row">
-                  <div className="col-auto">
-                    <Shape size="md" color="primary" icon="brand-bootstrap" />
-                  </div>
-                  <div className="col">
-                    <h3>Bootstrap-inspired design</h3>
-                    <p className="text-muted m-0">
-                      Based on Bootstrap and Material Design principles, our email templates are responsive and meet the
-                      highest quality standards. Thanks to that, you can be sure the layout will look perfect in every
-                      email client and on any device.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div data-aos="fade-up" data-aos-delay="150">
-                <div className="row">
-                  <div className="col-auto">
-                    <Shape size="md" color="primary" icon="layout-dashboard" />
-                  </div>
-                  <div className="col">
-                    <h3>No coding skills needed</h3>
-                    <p className="text-muted m-0">
-                      Our templates are ready-to-use. You don’t need coding skills to prepare eye-catching emails and
-                      boost your brand awareness. Have a basic knowledge of HTML? Design your own email using the
-                      elements from different templates and make it even more customized.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div data-aos="fade-up" data-aos-delay="300">
-                <div className="row">
-                  <div className="col-auto">
-                    <Shape size="md" color="primary" icon="tools" />
-                  </div>
-                  <div className="col">
-                    <h3>Reliable solution</h3>
-                    <p className="text-muted m-0">
-                      Tabler Emails have been tested across more than 90 email clients and many devices. Thanks to that,
-                      instead of worrying about any technical issues, you can focus on making the content of your
-                      message exceptional.
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="lg:col-6">
-            <ResponsiveImage src="/img/tabler-emails/features/stats.png" width="564" height="762" className="mx-auto" />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const EmailsGallery = () => {
-  return (
-    <div className="section section-light">
-      <div className="container">
-        <div className="section-header">
-          <h2 className="section-title">See what you will get</h2>
-          <p className="section-description">Browse our selection of emails and see how they look.</p>
-        </div>
-      </div>
-
-      <div className="expandable expandable-emails" />
-
-      <div className="container">
-        <div className="text-center mt-2">
-          <Link href="/emails/gallery" className="btn btn-lg">
-            Browse emails gallery
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const EmailsDark = () => {
-  return (
-    <section className="section section-dark">
-      <div className="container">
-        <div className="row xl:g-7 items-center">
-          <div className="lg:col-6">
-            <ResponsiveImage
-              src="/img/tabler-emails/features/dark.png"
-              width="564"
-              height="585"
-              key="img-1"
-              className="mx-auto"
-            />
-          </div>
-          <div className="lg:col-6">
-            <div className="section-header text-left">
-              <h2 className="section-title">Dark mode? No problem!</h2>
-              <div className="section-description">
-                <p>
-                  Dark mode is a darker color palette for low-light or nighttime environments. This inverted color
-                  scheme uses light typography, UI elements and icons on a dark background - and is one of the hottest
-                  trends in digital design in recent years. If your subscribers are making a conscious decision to view
-                  Dark Mode emails, it&apos;s best to respect that!
-                </p>
-                <p>
-                  Each email in Tabler Emails is available in two color versions: light and dark. It&apos;s up to you
-                  which version suits your branding better!
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-7">
-          <CTABannerEmails />
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const EmailsKickItOff = () => {
-  return (
-    <section className="section section-sm section-light">
-      <div className="container">
-        <div className="row text-center">
-          <div className="md:col" data-aos="fade-up" data-aos-delay={0}>
-            <Shape placeholder={1} size="md" className="mb-2" color="primary" />
-            <div>Choose one of 54 email templates</div>
-          </div>
-          <div className="md:col" data-aos="fade-up" data-aos-delay={150}>
-            <Shape placeholder={2} size="md" className="mb-2" color="primary" />
-            <div>Add your own content to customize it</div>
-          </div>
-          <div className="md:col" data-aos="fade-up" data-aos-delay={300}>
-            <Shape placeholder={3} size="md" className="mb-2" color="primary" />
-            <div>Send it using one of the most popular email sending systems</div>
-          </div>
-        </div>
-
-        {/*<div className="mt-5 text-center">*/}
-        {/*  <a href="#" className="btn btn-primary">Buy now for ${emailsPrice}</a>*/}
-        {/*</div>*/}
-      </div>
-    </section>
-  );
-};
-
-export default function EmailsPage() {
-  const features = [
-    {
-      icon: 'devices',
-      title: 'Mobile-optimized',
-      description:
-        'Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.',
-    },
-    {
-      icon: 'mailbox',
-      title: 'Compatible with 90+ email clients',
-      description:
-        'Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.',
-    },
-    {
-      icon: 'palette',
-      title: 'Unique, minimal design',
-      description:
-        'Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.',
-    },
-  ];
-
-  return (
-    <>
-      <HeroEmails />
-      <section className="section section-sm section-light">
-        <SectionDivider />
-        <div className="container">
-          <Features list={features} />
-        </div>
-      </section>
-
-      <EmailsFeatures1 />
-      <EmailsKickItOff />
-      <EmailsFeatures2 />
-      <EmailsGallery />
-      <EmailsDark />
-    </>
-  );
-}

site/app/(marketing)/features/page.tsx

@@ -1,46 +0,0 @@
-import ResponsiveImage from '@/components/ResponsiveImage';
-import features from '@/data/features';
-
-export const metadata = {
-  title: 'Tabler Features',
-  description: 'Explore the powerful and versatile features of Tabler. Simplify tasks, boost productivity, and enhance your experience. Discover Tabler today!',
-};
-
-export default function FeaturesPage() {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="section-header">
-          <h2 className="section-title section-title-lg">Some examples built with Tabler</h2>
-          <p className="section-description">Get everything you need for building amazing websites</p>
-        </div>
-        <div className="row g-3 md:g-4 xl:g-6" data-aos-id-blocks-features>
-          {features.map(
-            (feature, i) =>
-              !feature.hide && (
-                <div className="col-12 sm:col-6 md:col-4" key={i}>
-                  <div data-aos="fade-up" data-aos-anchor="[data-aos-id-blocks-features]" data-aos-delay={i * 100}>
-                    <div className="mb-3 shadow-card rounded">
-                      <ResponsiveImage
-                        src={`/img/tabler/features-small/${feature.image}`}
-                        width={368}
-                        height={276}
-                        className="rounded d-block"
-                        alt={feature.title}
-                      />
-                    </div>
-                    <h3 className="h4">{feature.title}</h3>
-                    <p className="text-muted m-0">{feature.description}</p>
-                  </div>
-                </div>
-              )
-          )}
-        </div>
-
-        {/*<div className="mt-7">*/}
-        {/*  <CTABannerEmails />*/}
-        {/*</div>*/}
-      </div>
-    </section>
-  );
-}

site/app/(marketing)/guides/[slug]/page.tsx

@@ -1,188 +0,0 @@
-import { notFound, useRouter } from 'next/navigation';
-import { useClipboard } from '@/hooks';
-import clsx from 'clsx';
-import { allGuides } from 'contentlayer/generated';
-import { escapeHtml, uiUrl } from '@/config/site';
-import { dateTemplate, distanceToNow, format } from '@/lib/date';
-import CTABannerEmails from '@/components/CTABAnnerEmails';
-import Icon from '@/components/Icon';
-import TablerSponsorsBanner from '@/components/TablerSponsorsBanner';
-import Mdx from '@/components/MDX';
-
-interface GuidePageProps {
-  params: {
-    slug: string
-  }
-}
-
-async function getGuideFromParams(params) {
-  const slug = params.slug || '';
-  const guide = allGuides.find((guide) => guide.slugAsParams === slug);
-
-  if (!guide) {
-    null;
-  }
-
-  return guide;
-}
-
-export async function generateStaticParams(): Promise<
-  GuidePageProps['params'][]
-> {
-  return allGuides.map((guide) => ({
-    slug: guide.slugAsParams,
-  }));
-}
-
-export default async function GuidePage({ params }: GuidePageProps) {
-  const guide = await getGuideFromParams(params);
-
-  if (!guide) {
-    notFound();
-  }
-
-  const url = `${uiUrl}${guide.slug}`;
-
-  // const router = useRouter(),
-  //   currentPath = router.pathname,
-  //   url = `${uiUrl}${guide.slug}`
-  // clipboard = useClipboard()
-
-  return (
-    <>
-      <section
-        className="section"
-        itemScope={true}
-        itemType="https://schema.org/NewsArticle"
-      >
-        <div className="container">
-          {/* {meta.date && (
-            <div
-              className="text-muted mb-3 font-h6"
-              itemProp="datePublished"
-              content={format(meta.date, "yyyy-MM-dd")}
-            >
-              Published{" "}
-              <time dateTime={dateTemplate(meta.date)} className="text-muted">
-                {distanceToNow(meta.date)}
-              </time>
-            </div>
-          )} */}
-          <h1 className="h0 mb-3" itemProp="headline">
-            {guide.title}
-          </h1>
-
-          <div className="row">
-            <div className="md:col-9 text-muted font-h4">{guide.summary}</div>
-          </div>
-
-          <div className="mt-6">
-            <div className="row">
-              <div className="md:col-8">
-                {guide.image && (
-                  <div className="mb-6">
-                    <img
-                      src={guide.image}
-                      alt={guide.title}
-                      className="border-light rounded"
-                      // lazy={true}
-                      itemProp="image"
-                    />
-                  </div>
-                )}
-
-                <article className="markdown">
-                  <Mdx code={guide.body.code} />
-                </article>
-
-                <TablerSponsorsBanner className="mt-7" />
-              </div>
-              <div className="md:col-3 md:order-first">
-                {guide.tags && (
-                  <div className="tags-list mt-3">
-                    {guide.tags.map((tag) => (
-                      <div className="tag" key={tag}>
-                        {tag}
-                      </div>
-                    ))}
-                  </div>
-                )}
-
-                <div
-                  itemProp="author"
-                  itemScope={true}
-                  itemType="https://schema.org/Person"
-                >
-                  <div
-                    className="avatar avatar-xl avatar-rounded mb-3"
-                    style={{
-                      backgroundImage: 'url(/img/authors/codecalm.jpg)',
-                    }}
-                  ></div>
-                  <div className="h4" itemProp="name">
-                    Paweł Kuna
-                  </div>
-                  <div className="text-muted">Founder of Tabler</div>
-                  <meta itemProp="url" content={uiUrl} />
-                </div>
-
-                <div className="btn-list mt-6">
-                  <button
-                    type="button"
-                    className={clsx(
-                      'btn btn-icon btn-circle'
-                      // clipboard.copied ? "btn-green" : ""
-                    )}
-                    aria-label="Copy the Canonical link"
-                    // onClick={() => clipboard.copy(url)}
-                  >
-                    {/* {clipboard.copied ? (
-                      <Icon name="check" />
-                    ) : (
-                      <Icon name="link" />
-                    )} */}
-                  </button>
-                  <a
-                    className="btn btn-icon btn-circle"
-                    target="_blank"
-                    rel="noopener"
-                    href={`https://twitter.com/share?url=${escapeHtml(
-                      url
-                    )}&text=${escapeHtml(guide.title)}`}
-                  >
-                    <Icon name="brand-twitter" />
-                  </a>
-                  <a
-                    className="btn btn-icon btn-circle"
-                    target="_blank"
-                    rel="noopener"
-                    href={`https://www.facebook.com/sharer/sharer.php?u=${escapeHtml(
-                      url
-                    )}`}
-                  >
-                    <Icon name="brand-facebook" />
-                  </a>
-                  <a
-                    className="btn btn-icon btn-circle"
-                    target="_blank"
-                    rel="noopener"
-                    href={`https://www.linkedin.com/share?url=${escapeHtml(
-                      url
-                    )}`}
-                  >
-                    <Icon name="brand-linkedin" />
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      <section className="section bg-light">
-        <div className="container">
-          <CTABannerEmails />
-        </div>
-      </section>
-    </>
-  );
-}

site/app/(marketing)/guides/page.tsx

@@ -1,119 +0,0 @@
-import { allGuides } from 'contentlayer/generated';
-
-import { format } from '@/lib/date';
-import Link from '@/components/Link';
-
-export const metadata = {
-  title: 'Guides',
-  description: 'Learn how to use Tabler effectively with our comprehensive guides. Master the app and streamline your workflow today.',
-};
-
-export default async function GuidesPage() {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="section-header">
-          <h2 className="section-title section-title-lg">Guides</h2>
-          <p className="section-description">
-            The most interesting articles to help you build better applications
-          </p>
-        </div>
-
-        <div className="guides sm:gx-6 xl:gx-7">
-          {allGuides.map((guide, i) => (
-            <div
-              className="guide"
-              key={guide.slug}
-              itemScope={true}
-              itemType="https://schema.org/NewsArticle"
-            >
-              <div className="guide-date">
-                <meta
-                  itemProp="datePublished"
-                  content={format(guide.date, 'yyyy-MM-dd')}
-                />
-                <div>{format(guide.date, 'd')}</div>
-                <div>{format(guide.date, 'MMM')}</div>
-              </div>
-              <div className="box">
-                {guide.image && (
-                  <Link href={guide.slug} className="d-block mb-4">
-                    <div className="border-light rounded lh-1">
-                      <img
-                        src={guide.image}
-                        width={660}
-                        height={361}
-                        className="rounded"
-                        alt={guide.title}
-                        itemProp="image"
-                      />
-                    </div>
-                  </Link>
-                )}
-                <div>
-                  {guide.title && (
-                    <h2>
-                      <meta itemProp="headline" content={guide?.title} />
-                      <meta itemProp="url" content={guide.slug} />
-                      <Link href={guide.slug}>{guide?.title}</Link>
-                    </h2>
-                  )}
-
-                  <div className="markdown text-muted">
-                    <p itemProp="description">{guide.summary}</p>
-                  </div>
-                </div>
-
-                <div className="mt-4">
-                  <div className="row items-center">
-                    <div className="col">
-                      <div
-                        className="d-flex items-center"
-                        itemProp="author"
-                        itemScope={true}
-                        itemType="https://schema.org/Person"
-                      >
-                        <div
-                          className="avatar mr-3"
-                          style={{
-                            backgroundImage: 'url(/img/authors/codecalm.jpg)',
-                          }}
-                        />
-                        <span itemProp="name">Paweł Kuna</span>
-                        <meta itemProp="url" content="https://tabler.io" />
-                      </div>
-                    </div>
-                    <div className="col-auto">
-                      <Link
-                        href={guide.slug}
-                        className="btn"
-                        aria-label={`Read more about "${guide.title}"`}
-                      >
-                        Read more
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-// export async function getStaticProps() {
-//   const guides = await getAllGuides(['slug', 'title', 'summary', 'date', 'image'])
-
-//   return {
-//     props: {
-//       guides,
-//       menu: 'guides',
-//       meta: {
-//         bodyClassName: 'bg-light',
-//         title: 'Guides - The most interesting articles to help you build better applications',
-//       },
-//     },
-//   }
-// }

site/app/(marketing)/icons/page.tsx

@@ -1,191 +0,0 @@
-import React from 'react';
-import { icons } from '@/config/tabler';
-import { groupBy, sortByKeys } from '@/helpers';
-import { IconType, IconsType } from '@/types';
-
-import { figmaPluginUrl, iconsCount, iconsCountRounded, iconsUrl } from '@/config/site';
-import Features from '@/components/Features';
-import Icon from '@/components/Icon';
-import IconSvg from '@/components/IconSvg';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import SectionDivider from '@/components/SectionDivider';
-import HeroIcons from '@/components/layout/hero/UiIcons';
-
-export const metadata = {
-  title: 'Tabler Icons',
-  description: 'Explore our Tabler Icons package. Enhance your designs with a diverse collection of stunning icons.',
-};
-
-// const IconsInstallation = () => {
-//   return (
-//     <section className="section section-light">
-//       <div className="container">
-//         <div className="section-header">
-//           <h2 className="section-title">Installation</h2>
-//         </div>
-//       </div>
-//     </section>
-//   )
-// }
-
-// const IconsFrameworks = () => {
-//   const frameworks = [
-//     { name: 'React', route: '/docs/icons/react', package: '@tabler/icons-react', icon: 'react' },
-//     { name: 'Svelte', route: '/docs/icons/svelte', package: '@tabler/icons-svelte', icon: 'svelte' },
-//     { name: 'Blade', route: '/docs/icons/blade', package: '@tabler/icons-blade', icon: 'blade' },
-//     { name: 'Vue 3', route: '/docs/icons/vue', package: '@tabler/icons-vue', icon: 'vue' },
-//     { name: 'Preact', route: '/docs/icons/preact', package: '@tabler/icons-preact', icon: 'preact' },
-//     { name: 'Figma', href: figmaPluginUrl, package: '@tabler/icons-figma', icon: 'figma' },
-//   ]
-//
-//   return (
-//       <section className="section section-sm section-light">
-//         <div className="container">
-//           <div className="section-header">
-//             <h2 className="section-title">Frameworks</h2>
-//           </div>
-//
-//           <div className="row justify-center g-4">
-//             {frameworks.map((framework) => (
-//                 <div className="col" key={framework.icon}>
-//                   {framework.route ?
-//                       <Link href={framework.route} className="d-block text-center text-reset bg-white border rounded-lg py-3">
-//                         <img src={`/img/tabler-icons/framework/${framework.icon}.svg`} alt={framework.name} className="mx-auto mb-2" />
-//                         {framework.name}
-//                       </Link>
-//                       :
-//                       <a href={framework.href} className="d-block text-center text-reset bg-white border rounded-lg py-3" target="_blank" rel="noopener noreferrer">
-//                         <img src={`/img/tabler-icons/framework/${framework.icon}.svg`} alt={framework.name} className="mx-auto mb-2" />
-//                         {framework.name}
-//                       </a>}
-//                 </div>
-//             ))}
-//           </div>
-//         </div>
-//       </section>
-//   )
-// }
-
-const IconsFigma = () => {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="row xl:g-7 items-center">
-          <div className="md:col-6">
-            <ResponsiveImage src="/img/tabler-icons/features/figma.png" width="564" height="448" />
-          </div>
-          <div className="md:col-6">
-            <div className="section-header text-left">
-              <h2 className="section-title">Do you need Figma plugin? No problem!</h2>
-              <p className="section-description">
-                Tabler Icons offers a plugin for Figma, with which you can easily find and customize the icons you just need. You will always find the newest icons that you can quickly add to your project!
-              </p>
-            </div>
-
-            <div className="btn-list mt-6">
-              <a href={figmaPluginUrl} className="btn btn-lg" target="_blank" rel="noopener noreferrer">
-                <Icon name="brand-figma" /> Get Figma plugin
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const IconsFeatures = () => {
-  const features = [
-    {
-      icon: 'check',
-      title: 'Ready-to-use',
-      description: 'You can use the icons as HTML images, embed them in your HTML code, create an SVG sprite or render them in React.',
-    },
-    {
-      icon: 'brand-sketch',
-      title: 'Multiple formats',
-      description: 'Icons can be used in Sketch, Illustrator, XD and Figma - choose the tool you feel the most comfortable working with.',
-    },
-    {
-      icon: 'edit',
-      title: 'Customizable',
-      description: 'Every icon is designed on a 24x24 grid and a 2px stroke. You can easily customize them, changing the size, stroke or color.',
-    },
-    {
-      icon: 'brand-github',
-      title: 'Free and open source',
-      description: 'Tabler Icons is a free and open source solution, which is continuously developed. Feel free to request an icon you need!',
-    },
-  ];
-
-  return (
-    <section className="section section-sm section-light">
-      <SectionDivider wave />
-      <div className="container">
-        {/*<div className="section-header">*/}
-        {/*  <h2 className="section-title">*/}
-        {/*    Icons tailored to your needs*/}
-        {/*  </h2>*/}
-        {/*</div>*/}
-        <Features list={features} />
-      </div>
-    </section>
-  );
-};
-
-const IconsCategories = () => {
-  const iconsGroupedByCategory = ((icons) => {
-    return sortByKeys(groupBy(Object.values(icons), 'category'));
-  })(icons);
-
-  delete iconsGroupedByCategory[''];
-  delete iconsGroupedByCategory['Gender'];
-  delete iconsGroupedByCategory['Zodiac'];
-  delete iconsGroupedByCategory['Database'];
-  delete iconsGroupedByCategory['Building'];
-  delete iconsGroupedByCategory['Logic'];
-  delete iconsGroupedByCategory['Currency'];
-  delete iconsGroupedByCategory['Animals'];
-
-  return (
-    <section className="section section-light">
-      <div className="container">
-        <div className="section-header">
-          <div className="section-title">Wide choice of categories</div>
-          <div className="section-description">Search for icons by categories to find what you need easier and faster. Tabler icons will help you make your design consistent and eye-catching.</div>
-        </div>
-
-        <div className="row" data-aos-id-blocks-icons>
-          {Object.entries<IconsType>(iconsGroupedByCategory).map(([category, icons], i) => (
-            <div className="sm:col-6 md:col-4 lg:col-3" key={category} data-aos="fade-up" data-aos-anchor="[data-aos-id-blocks-icons]" data-aos-delay={i * 50}>
-              <a href={`${iconsUrl}?category=${encodeURIComponent(category)}`} className="icons-card" target="_blank">
-                <strong className="icons-card-title">{category}</strong>
-                <div className="icons-card-list">
-                  {icons.filter((icon) => !icon.name.endsWith('-off')).map((icon, i) => i < 14 && <IconSvg svg={icon.svg} key={icon.name} className="icons-card-icon" />)}
-
-                  {icons.length > 15 && <div className="icons-card-placeholder">+{icons.length - 14}</div>}
-                </div>
-                <span className="icons-card-layer">
-                  <Icon name="search" /> Browse {icons.length} icons
-                </span>
-              </a>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default function IconsPage() {
-  return (
-    <>
-      <HeroIcons />
-      <IconsFeatures />
-      <IconsFigma />
-      {/*<IconsFrameworks />*/}
-      <IconsCategories />
-      {/*<IconsInstallation />*/}
-    </>
-  );
-}

site/app/(marketing)/layout.tsx

@@ -1,19 +0,0 @@
-import Header from '@/components/layout/Header';
-import Footer from '@/components/layout/Footer';
-import AOS from '@/components/AOS';
-
-export default function CoreLayout({
-  children
-}: {
-  children: React.ReactNode,
-}) {
-  return (
-    <>
-      <AOS>
-        <Header />
-        <main className="main">{children}</main>
-        <Footer />
-      </AOS>
-    </>
-  );
-}

site/app/(marketing)/page.tsx

@@ -1,579 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-import questions from '@/data/faq.json';
-
-import { componentsCount, iconsUrl } from '@/config/site';
-import Features from '@/components/Features';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import SectionDivider from '@/components/SectionDivider';
-import Shape from '@/components/Shape';
-import Testimonials from '@/components/layout/Testimonials';
-import TestimonialsShare from '@/components/layout/TestimonialsShare';
-import HeroUi from '@/components/layout/hero/Ui';
-import { sponsors } from '@/config/sponsors';
-
-export const metadata = {
-  title: 'Premium dashboard template with responsive and high quality UI',
-  description: 'Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!',
-};
-
-const benefits = [
-  'Fully responsive',
-  'Based on Bootstrap 5',
-  'Built with Sass',
-  'Detailed documentation',
-  'MIT license',
-  'Customizable',
-  `${componentsCount}+ UI components`,
-  'Multiple layouts',
-  'Dark mode',
-  'Premium vector icons',
-];
-
-
-const FAQ = () => {
-  return (
-    <section className="section section-light">
-      <div className="container">
-        <div className="row xl:g-6">
-          <div className="md:col-4" data-aos="fade-up">
-            <div className="section-header text-left sticky-top">
-              <div className="section-title">Frequently asked questions</div>
-              <p className="section-description">
-                Can’t find the answer you’re looking for? Reach out to our
-                customer support team.
-              </p>
-            </div>
-          </div>
-          <div className="col">
-            <div className="space-y-5">
-              {questions.map((question, i) => (
-                <div data-aos="fade-up" data-aos-delay={i * 150} key={i}>
-                  <div className="h3 mb-1">{question.question}</div>
-                  <div className="text-muted">{question.answer}</div>
-                </div>
-              ))}
-            </div>
-
-            <div className="mt-5">
-              <Link href="/faq" className="btn">
-                Read more questions
-              </Link>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const Projects = () => {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="section-header">
-          <h3 className="section-title">Section title</h3>
-          <p className="section-description">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-          </p>
-        </div>
-
-        <div className="row">
-          <div className="col">
-            <div className="card">
-              <div className="row g-0">
-                <div className="col">
-                  <div className="card-body h-100 d-flex flex-column pr-0">
-                    <div className="h-subheader text-primary">Tabler Icons</div>
-                    <h3 className="section-title mb-4">
-                      Brilliant Toolkit to Build Nextgen Website Faster.
-                    </h3>
-                    <div className="text-muted markdown">
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                        elit. Illo perferendis, repellat! Asperiores ducimus
-                        esse nobis quaerat sed! Delectus eius illum incidunt
-                        minus neque, quos ratione reiciendis voluptatum. Odio
-                        quia, similique.
-                      </p>
-                    </div>
-                    <div className="mt-auto pt-5">
-                      <div className="btn-list">
-                        <a
-                          href={iconsUrl}
-                          className="btn btn-primary"
-                          target="_blank"
-                        >
-                          Browse icons
-                        </a>
-                        <Link href="/icons" className="btn">
-                          More info
-                        </Link>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="col-4">
-                  <div
-                    className="ratio ratio-1x1 rounded-right"
-                    style={{
-                      backgroundColor: '#fff',
-                      backgroundImage: 'url(/img/tabler/icons-bg.png)',
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col">
-            <div className="card">
-              <div className="row g-0">
-                <div className="col">
-                  <div className="card-body h-100 d-flex flex-column pr-0">
-                    <div className="h-subheader text-primary">
-                      Tabler Emails
-                    </div>
-                    <h3 className="section-title mb-4">
-                      Brilliant Toolkit to Build Nextgen Website Faster.
-                    </h3>
-                    <div className="text-muted markdown">
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing
-                        elit. Illo perferendis, repellat! Asperiores ducimus
-                        esse nobis quaerat sed! Delectus eius illum incidunt
-                        minus neque, quos ratione reiciendis voluptatum. Odio
-                        quia, similique.
-                      </p>
-                    </div>
-                    <div className="mt-auto pt-5">
-                      <div className="btn-list">
-                        <a href="#" className="btn btn-primary">
-                          Buy emails for $29
-                        </a>
-                        <Link href="/icons" className="btn">
-                          More info
-                        </Link>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="col-4">
-                  <div
-                    className="ratio ratio-1x1 rounded-right"
-                    style={{
-                      backgroundColor: '#fff',
-                      backgroundImage: 'url(/img/tabler/icons-bg.png)',
-                    }}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-const Sponsors = () => {
-  return (
-    <div className="section section-light pt-6 pb-5">
-      <SectionDivider />
-      <div className="container img-overlap-padding text-center">
-        <div className="mb-6">
-          <h2 className="h4 font-normal text-muted mb-6">The project was made possible thanks to wonderful sponsors:</h2>
-
-          <div className="row gx-6 md:gx-7 gy-4 items-center justify-center">
-            {sponsors.map((sponsor, i) => (
-              <div className="col-auto" key={i}>
-                <a href={sponsor.url} className="link-brand" dangerouslySetInnerHTML={{ __html: sponsor.logo }} target="_blank" rel="nofollow"></a>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default async function HomePage() {
-  const features = [
-    {
-      icon: 'brand-github',
-      title: 'Free and open source',
-      description:
-        'A big choice of free UI elements and layouts in one efficient, open source solution',
-    },
-    {
-      icon: 'brand-bootstrap',
-      title: 'Based on Bootstrap 5',
-      description:
-        'Based on the latest version of Bootstrap, Tabler is a UI Kit of the future',
-    },
-    {
-      icon: 'brand-html5',
-      title: 'Modern design',
-      description:
-        'Beautiful, fully responsive UI elements that will make your design modern and user-friendly',
-    },
-  ];
-
-  const highlighCode = `<div className="col" data-aos="fade-up">
-  <h2 className="section-title">
-    Loving Tabler? Get to know our set of {iconsCount}&nbsp;free vector icons!
-  </h2>
-  <p className="section-description">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ex facere impedit nostrum
-    obcaecati. Ipsam, magnam nam nihil quisquam repellendus tempora. Dicta dignissimos ex laudantium
-    reiciendis sapiente ut voluptate voluptatibus?
-  </p>
-
-  <div className="mt-5">
-    <Link href="/icons" className="btn">
-      Read more about icons
-    </Link>
-  </div>
-</div>`;
-
-  return (
-    <>
-      {/*<Modal />*/}
-      <HeroUi />
-
-      <Sponsors />
-
-      {/* <div className="section section-light pt-6 pb-6">
-        <SectionDivider />
-        <div className="container img-overlap-padding">
-          <Features list={features} />
-        </div>
-      </div> */}
-
-      <section className="section" id="features">
-        <div className="container">
-          <div className="row items-center">
-            <div className="lg:col-6" data-aos="fade-up">
-              <div className="section-header w-100">
-                <h2 className="section-title text-center lg:text-left">Benefit from Tabler’s top-notch features</h2>
-              </div>
-
-              {/*<p className="section-description mb-5">*/}
-              {/*  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur*/}
-              {/*  deleniti dicta, earum eligendi exercitationem itaque molestias nobis non optio perspiciatis*/}
-              {/*  placeat possimus praesentium rerum tempora tempore totam vel. Autem, repudiandae!*/}
-              {/*</p>*/}
-
-              <div className="row">
-                {benefits.map((benefit, i) => (
-                  <div className="sm:col-6 md:col-4 lg:col-6" key={i}>
-                    <Shape icon="check" color="green" className="mr-3" size="sm" rounded />
-                    {benefit}
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div className="lg:col-6" data-aos="fade-up">
-              <ResponsiveImage src="/img/tabler/features/charts.png" width="510" height="524" className="mx-auto" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="section section-light">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="section-title">Multiple Demos</h2>
-            <p className="section-description">6 Pre-built layout options to cater needs of modern web applications. Ready-to-use UI elements enable to develop modern web application with great speed</p>
-          </div>
-          <div className="row" data-aos-id-blocks-previews>
-            <div className="col-6 md:col-4">
-              <a href="https://preview.tabler.io?theme=light" className="d-block text-center link text-reset" data-aos="fade-up" data-aos-anchor="[data-aos-id-blocks-previews]" data-aos-delay={0} target="_blank" rel="noopener noreferrer">
-                <ResponsiveImage src="/img/tabler/preview.png" width="389" height="243" className="mx-auto rounded link-img" />
-                <div className="mt-3">Modern dashboard</div>
-              </a>
-            </div>
-            <div className="col-6 md:col-4">
-              <a href="https://preview.tabler.io?theme=dark" className="d-block text-center link text-reset" data-aos="fade-up" data-aos-anchor="[data-aos-id-blocks-previews]" data-aos-delay={150} target="_blank" rel="noopener noreferrer">
-                <ResponsiveImage src="/img/tabler/preview-dark.png" width="389" height="243" className="mx-auto rounded link-img" />
-                <div className="mt-3">Dark mode</div>
-              </a>
-            </div>
-            <div className="col-6 md:col-4">
-              <a
-                href="https://preview.tabler.io/layout-vertical.html?theme=light"
-                className="d-block text-center link text-reset"
-                data-aos="fade-up"
-                data-aos-anchor="[data-aos-id-blocks-previews]"
-                data-aos-delay={300}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <ResponsiveImage src="/img/tabler/preview-sidebar.png" width="389" height="243" className="mx-auto rounded link-img" />
-                <div className="mt-3">With sidebar navigation</div>
-              </a>
-            </div>
-            <div className="col-6 md:col-4">
-              <a
-                href="https://preview.tabler.io/layout-navbar-overlap.html?theme=light"
-                className="d-block text-center link text-reset"
-                data-aos="fade-up"
-                data-aos-anchor="[data-aos-id-blocks-previews]"
-                data-aos-delay={450}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <ResponsiveImage src="/img/tabler/preview-navbar-overlap.png" width="389" height="243" className="mx-auto rounded link-img" />
-                <div className="mt-3">With overlap navbar</div>
-              </a>
-            </div>
-            <div className="col-6 md:col-4">
-              <a
-                href="https://preview.tabler.io/layout-vertical-transparent.html?theme=light"
-                className="d-block text-center link text-reset"
-                data-aos="fade-up"
-                data-aos-anchor="[data-aos-id-blocks-previews]"
-                data-aos-delay={600}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <ResponsiveImage src="/img/tabler/preview-sidebar-transparent.png" width="389" height="243" className="mx-auto rounded link-img" />
-                <div className="mt-3">With transparent navigation</div>
-              </a>
-            </div>
-            <div className="col-6 md:col-4">
-              <a
-                href="https://preview.tabler.io/layout-rtl.html?theme=light"
-                className="d-block text-center link text-reset"
-                data-aos="fade-up"
-                data-aos-anchor="[data-aos-id-blocks-previews]"
-                data-aos-delay={750}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <ResponsiveImage src="/img/tabler/preview-rtl.png" width="389" height="243" className="mx-auto rounded link-img" />
-                <div className="mt-3">RTL mode</div>
-              </a>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="section">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="section-title">Create a perfect interface. Make your life easier.</h2>
-          </div>
-
-          <div className="row items-center">
-            <div className="lg:col-6" data-aos="fade-up">
-              <ResponsiveImage src="/img/tabler/features/forms.png" width={510} height={524} className="mx-auto" />
-            </div>
-            <div className="lg:col-6">
-              <div className="space-y-5">
-                <div data-aos="fade-up" data-aos-delay="0">
-                  <div className="row">
-                    <div className="col-auto">
-                      <Shape size="md" color="primary" icon="tools" />
-                    </div>
-                    <div className="col">
-                      <h3>Designed with users in mind</h3>
-                      <p className="text-muted m-0">
-                        Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love. Every UI element has been created with
-                        attention to detail to make your interface beautiful!
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="150">
-                  <div className="row">
-                    <div className="col-auto">
-                      <Shape size="md" color="primary" icon="brand-bootstrap" />
-                    </div>
-                    <div className="col">
-                      <h3>Built for developers</h3>
-                      <p className="text-muted m-0">
-                        Having in mind what it takes to write high-quality code, we want to help you speed up the development process and keep your code clean. Based on Bootstrap 5, Tabler is a cutting-edge solution, compatible with all
-                        modern browsers and fully responsive.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="300">
-                  <div className="row">
-                    <div className="col-auto">
-                      <Shape size="md" color="primary" icon="paint" />
-                    </div>
-                    <div className="col">
-                      <h3>Fully customizable</h3>
-                      <p className="text-muted m-0">You can easily customize the UI elements to make them fit the needs of your project. And don’t worry if you don’t have much experience - Tabler is easy to get started!</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="section section-dark">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="section-title">Dark theme whenever you need it ✨</h2>
-          </div>
-
-          <div className="row items-center">
-            <div className="lg:col-6">
-              <div className="space-y-5">
-                <div data-aos="fade-up" data-aos-delay="0">
-                  <div className="row">
-                    <div className="col-auto">
-                      <Shape size="md" color="white" icon="sun-moon" />
-                    </div>
-                    <div className="col">
-                      <h3>Change default variant when you need</h3>
-                      <p className="text-muted m-0">
-                        Tabler is a beautiful dashboard that comes in 2 versions: Dark and Light Mode. If you are looking for a tool to manage and visualize data about your business, this dashboard is the thing for you. It combines colors
-                        that are easy on the eye, spacious cards, beautiful typography, and graphics.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-                <div data-aos="fade-up" data-aos-delay="150">
-                  <div className="row">
-                    <div className="col-auto">
-                      <Shape size="md" color="white" icon="tools" />
-                    </div>
-                    <div className="col">
-                      <h3>All components available in dark mode</h3>
-                      <p className="text-muted m-0">Tabler contains a vast collection of assorted reusable dark UI components, page layouts, charts, tables, UI elements, and icons.</p>
-                    </div>
-                  </div>
-                </div>
-
-                <div data-aos="fade-up" data-aos-delay="300">
-                  <div className="row">
-                    <div className="col-auto">
-                      <Shape size="md" color="white" icon="paint" />
-                    </div>
-                    <div className="col">
-                      <h3>A lot of reasons why dark theme are used widely</h3>
-                      <p className="text-muted m-0">
-                        Dark mode saves battery life and can reduce eye fatigue in low-light conditions. The high contrast between text and background reduces eye fatigue, and the dark screen helps you focus your eyes longer and helps your
-                        brain keep more attention on the screen.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="lg:col-6" data-aos="fade-up">
-              <ResponsiveImage src="/img/tabler/features/dark.png" width={510} height={524} className="mx-auto" />
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section className="section">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="section-title">Trusted by hundreds</h2>
-            <p className="section-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
-          </div>
-
-          <div className="expandable">
-            <Testimonials limit={10} />
-          </div>
-
-          <TestimonialsShare />
-        </div>
-      </section>
-
-      {/*<section className="section section-light">*/}
-      {/*  <div className="container">*/}
-      {/*    <div className="row items-center">*/}
-      {/*      <div className="col" data-aos="fade-up">*/}
-      {/*        <ResponsiveImage*/}
-      {/*            src="/img/features/code.png"*/}
-      {/*            width={510}*/}
-      {/*            height={276}*/}
-      {/*        />*/}
-      {/*      </div>*/}
-      {/*      <div className="col" data-aos="fade-up">*/}
-      {/*        <h2 className="section-title">*/}
-      {/*          Loving Tabler? Get to know our set of {iconsCount}&nbsp;free vector icons!*/}
-      {/*        </h2>*/}
-      {/*        <p className="section-description">*/}
-      {/*          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ex facere impedit nostrum*/}
-      {/*          obcaecati. Ipsam, magnam nam nihil quisquam repellendus tempora. Dicta dignissimos ex laudantium*/}
-      {/*          reiciendis sapiente ut voluptate voluptatibus?*/}
-      {/*        </p>*/}
-
-      {/*        <div className="mt-5">*/}
-      {/*          <Link href="/icons" className="btn">*/}
-      {/*            Read more about icons*/}
-      {/*          </Link>*/}
-      {/*        </div>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*  </div>*/}
-      {/*</section>*/}
-
-      {/*<section className="section">*/}
-      {/*  <div className="container text-center">*/}
-      {/*    <blockquote className="font-h2 lh-h2 mb-5 font-medium">*/}
-      {/*      “UI Prep has been instrumental in our agency work. UI Prep helps us start at 60% instead of 0%. It’s comprehensive, organized, and very*/}
-      {/*      thoughtfully designed. I could not recommend this more.”*/}
-      {/*    </blockquote>*/}
-
-      {/*    <div>*/}
-      {/*      <span className="avatar avatar-xl" style={{ backgroundImage: "url(/img/authors/codecalm.jpg)"}} />*/}
-      {/*    </div>*/}
-      {/*    <div className="h4">Jon Moore</div>*/}
-      {/*    <div className="text-muted">Principal Product Designer at Innovate map</div>*/}
-      {/*    <div>*/}
-      {/*      <Icon name="star" filled color="yellow" />*/}
-      {/*      <Icon name="star" filled color="yellow" />*/}
-      {/*      <Icon name="star" filled color="yellow" />*/}
-      {/*      <Icon name="star" filled color="yellow" />*/}
-      {/*      <Icon name="star" filled color="yellow" />*/}
-      {/*    </div>*/}
-      {/*  </div>*/}
-      {/*</section>*/}
-
-      {/*<section className="section section-light">*/}
-      {/*  <div className="container">*/}
-      {/*    <div className="row items-center">*/}
-      {/*      <div className="col-6" data-aos="fade-up">*/}
-      {/*        <h2 className="section-title">*/}
-      {/*          Loving Tabler? Get to know our set of {iconsCount}&nbsp;free vector icons!*/}
-      {/*        </h2>*/}
-      {/*        <p className="section-description">*/}
-      {/*          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ex facere impedit nostrum*/}
-      {/*          obcaecati. Ipsam, magnam nam nihil quisquam repellendus tempora. Dicta dignissimos ex laudantium*/}
-      {/*          reiciendis sapiente ut voluptate voluptatibus?*/}
-      {/*        </p>*/}
-
-      {/*        <div className="mt-5">*/}
-      {/*          <Link href="/icons" className="btn">*/}
-      {/*            Read more about icons*/}
-      {/*          </Link>*/}
-      {/*        </div>*/}
-      {/*      </div>*/}
-      {/*      <div className="col-6" data-aos="fade-up">*/}
-      {/*        <div className="highlight highlight-readonly" data-language="html">*/}
-      {/*          <SyntaxHighlighter language={"xml"} useInlineStyles={false}>*/}
-      {/*            {highlighCode}*/}
-      {/*          </SyntaxHighlighter>*/}
-      {/*        </div>*/}
-      {/*      </div>*/}
-      {/*    </div>*/}
-      {/*  </div>*/}
-      {/*</section>*/}
-      {/*<News />*/}
-      {/*<Projects />*/}
-      <FAQ />
-    </>
-  );
-}
-
-HomePage.bodyClass = 'xxx';

site/app/(marketing)/pricing/page.tsx

@@ -1,177 +0,0 @@
-import { pricingPlansPersonal, pricingPlanTeam } from '@/config/pricing';
-import clsx from 'clsx';
-import Icon from '@/components/Icon';
-
-export const metadata = {
-  title: 'Tabler Pricing',
-  description: 'Check out our pricing plans and choose the best option for your needs. Find affordable and flexible solutions for our products and services.',
-};
-
-const PricingCards = () => {
-  return (
-    <div className="pricing">
-      {pricingPlansPersonal.map(plan => (
-        <div
-          key={plan.name}
-          className={clsx('pricing-card', {
-            featured: plan.featured
-          })}
-        >
-          {plan.featured && (
-            <div className="pricing-label">
-              <div className="label label-primary">Popular</div>
-            </div>
-          )}
-
-          <h4 className="pricing-title">{plan.name}</h4>
-
-          <div className="pricing-price">
-            <span className="pricing-price-currency">$</span>
-            {plan.price}
-            <div className="pricing-price-description">
-              <div>per user</div>
-              <div>per year</div>
-            </div>
-          </div>
-
-          <ul className="pricing-features">
-            {pricingPlanTeam.features.map(feature => (
-              <li key={feature}>
-                <Icon name="check" className="text-green mr-2" />
-                {feature}
-              </li>
-            ))}
-          </ul>
-
-          <div className="pricing-btn">
-            <a
-              href="#"
-              className={clsx('btn btn-block', {
-                'btn-primary': plan.featured
-              })}
-            >
-              Get started
-            </a>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const PricingTeam = ({ className }) => {
-  return (
-    <div className={clsx('pricing-banner', className)}>
-      <div className="row g items-center">
-        <div className="lg:col">
-          <h3>{pricingPlanTeam.name}</h3>
-          <p className="m-0">{pricingPlanTeam.description}</p>
-        </div>
-        <div className="lg:col">
-          <ul className="pricing-features m-0">
-            {pricingPlanTeam.features.map(feature => (
-              <li key={feature}>
-                <Icon name="check" className="text-green mr-2" />
-                {feature}
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div className="sm:col-6 lg:col">
-          <div className="pricing-price m-0">
-            <span className="pricing-price-currency">$</span>
-            {pricingPlanTeam.price}
-            <div className="pricing-price-description">
-              <div>per team</div>
-              <div>per year</div>
-            </div>
-          </div>
-        </div>
-        <div className="sm:col-6 lg:col-auto">
-          <a href="#" className="btn btn-primary btn-block">
-            Get started
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default function Page() {
-  return (
-    <>
-      <section className="section">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="page-title">Simple, transparent pricing</h2>
-            <p className="section-description">
-              Get early access to 100+ components and free updates every month. Make it yours today!
-            </p>
-          </div>
-
-          <PricingCards />
-
-          <PricingTeam className="mt-5" />
-        </div>
-      </section>
-
-      <section className="section section-light">
-        <div className="container">
-          <div className="section-header">
-            <h2 className="section-title">Frequently Asked Questions</h2>
-          </div>
-
-          <div className="row gy">
-            <div className="md:col-4 markdown">
-              <h3>How is Tabler UI Pro different from Tabler UI?</h3>
-              <p>
-                Tabler UI provides the basic functional components you&apos;ll need to compose together to create your
-                app or website. Pro components are assembled, building blocks and page templates you can drop-in your
-                app to save time.
-              </p>
-            </div>
-            <div className="md:col-4 markdown">
-              <h3>Is this a yearly subscription?</h3>
-              <p>
-                No, you have a lifetime access to all our components. This means that you&apos;ll get new components and
-                updates every month till we&apos;ve exhausted our component inspiration.
-              </p>
-            </div>
-            <div className="md:col-4 markdown">
-              <h3>I want to buy this but I can&apos;t afford it. Is there a discount?</h3>
-              <p>
-                If you&apos;re a student or if the price in your local currency is too high, kindly send an email to
-                [email protected] stating your situation and we&apos;ll consider giving you a discount.
-              </p>
-            </div>
-            <div className="md:col-4 markdown">
-              <h3>What can I do with this license?</h3>
-              <ul>
-                <li>To build your websites or SaaS project that end-users need to pay</li>
-                <li>To build an open-source tool or documentation website</li>
-              </ul>
-            </div>
-            <div className="md:col-4 markdown">
-              <h3>What version of Tabler UI is used?</h3>
-              <p>
-                The components in PRO are authored using Tabler UI v1.2+. If you&apos;re on v0.8, we recommend upgrading
-                to the most recent version to use Pro components.
-              </p>
-            </div>
-            <div className="md:col-4 markdown">
-              <h3>What restrictions does this license have?</h3>
-              <ul>
-                <li>Create a clone of Tabler UI pro to sell</li>
-                <li>
-                  Create products like templates, themes, Figma or Sketch UI kits, page builders based on the PRO
-                  components
-                </li>
-                <li>Recreate the components for other UI libraries or CSS frameworks</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

site/app/(marketing)/sponsorship/page.tsx

@@ -1,8 +0,0 @@
-export const metadata = {
-  title: 'Sponsorship Options',
-  description: 'Tabler Sponsorship options',
-};
-
-export default function SponsorshipPage() {
-  return false;
-}

site/app/(marketing)/support/page.tsx

@@ -1,69 +0,0 @@
-import Shape from '@/components/Shape';
-
-export const metadata = {
-  title: 'Support',
-  description: 'Get help and assistance on our Support page. Find answers to your queries and resolve issues quickly. We\'re here to support you.',
-};
-
-export default function Support() {
-  return (
-    <section className="section">
-      <div className="container">
-        <div className="section-header">
-          <h1 className="section-title section-title-lg">Tabler Support</h1>
-          <p className="section-description">
-            If you have any questions regarding our theme, feel free to contact us using one of the methods below. We
-            usually reply within 24 hours.
-          </p>
-        </div>
-
-        <div className="row xl:g-6">
-          <div className="sm:col-6 lg:col-4">
-            <div className="box text-center">
-              <Shape icon="message" color="primary" size="md" className="mb-4" />
-              <h3>General Inquiry</h3>
-              <p className="text-muted">
-                Have a question? Something is not clear? Or maybe you just want to say ‘Hi!’ We usually reply within 24
-                hours.
-              </p>
-              <a href="mailto:[email protected]" className="btn">
-                Send a Message
-              </a>
-            </div>
-          </div>
-
-          <div className="sm:col-6 lg:col-4">
-            <div className="box text-center">
-              <Shape icon="settings" color="primary" size="md" className="mb-4" />
-              <h3>Technical Support</h3>
-              <p className="text-muted">
-                Something is wrong with one of our theme? Found a bug or have a feature request?
-              </p>
-              <a
-                href="https://github.com/tabler/tabler/issues/new/choose"
-                className="btn"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Open a new issue
-              </a>
-            </div>
-          </div>
-
-          <div className="sm:col-6 lg:col-4">
-            <div className="box text-center">
-              <Shape icon="adjustments" color="primary" size="md" className="mb-4" />
-              <h3>Customization</h3>
-              <p className="text-muted">
-                Need one of theme customized? Let us know exactly what you need and we’ll get back to you with a quote.
-              </p>
-              <a href="mailto:[email protected]" className="btn">
-                Get a Quote
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}

site/app/(marketing)/testimonials/page.tsx

@@ -1,23 +0,0 @@
-import Testimonials from '@/components/layout/Testimonials';
-
-export const metadata = {
-  title: 'Testimonials',
-  description: 'Read what our customers are saying about us. Explore testimonials and see why people love our products and services.',
-};
-
-export default function TestimonialsPage() {
-   return <>
-      <section className="section">
-         <div className="container">
-            <div className="section-header">
-               <h2 className="section-title section-title-lg">Our Wall Of Love</h2>
-               <p className="section-description">
-                  Reviews and feedback from our satisfied users who have experienced our products.
-               </p>
-            </div>
-
-            <Testimonials />
-         </div>
-      </section>
-   </>;
-}

site/app/layout.tsx

@@ -1,84 +0,0 @@
-import '@/styles/website.scss';
-
-import { creator, description, name, uiUrl } from '@/config/site';
-import PageProgress from '@/components/PageProgress';
-
-export const metadata = {
-  metadataBase: uiUrl,
-  title: {
-    default: name,
-    template: `%s - ${name}`,
-  },
-  description: description,
-  keywords: [
-    'css',
-    'html',
-    'jekyll',
-    'sass',
-    'bootstrap',
-    'modular',
-    'html5',
-    'dashboard',
-    'sponsors',
-    'uikit',
-    'boilerplate-template',
-    'scss',
-    'admin-dashboard',
-    'themes',
-    'dashboards',
-    'ui-kit',
-    'adminpanel',
-    'dashboard-templates',
-    'bootstrap4-theme',
-    'bootstrap5',
-    'bootstrap',
-  ],
-  authors: [
-    {
-      name: creator,
-      url: uiUrl,
-    },
-  ],
-  creator: creator,
-  themeColor: [
-    { media: '(prefers-color-scheme: light)', color: 'white' },
-    { media: '(prefers-color-scheme: dark)', color: 'black' },
-  ],
-  openGraph: {
-    type: 'website',
-    locale: 'en_US',
-    url: uiUrl,
-    siteName: name,
-  },
-  twitter: {
-    card: 'summary_large_image',
-    images: ['og.jpg'],
-    creator: `@${creator}`,
-  },
-  icons: {
-    icon: '/favicon.ico',
-    shortcut: '/favicon-16x16.png',
-    apple: '/apple-touch-icon.png',
-  },
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en">
-      <head>
-        {process.env.NODE_ENV !== 'development' && (
-          <>
-            <script defer data-api="/stats/api/event" data-domain="tabler.io,tabler" src="/stats/js/script.js" />
-            <script>{'window.plausible=window.plausible||function(){(window.plausible.q=window.plausible.q||[]).push(arguments)}'}</script>
-          </>
-        )}
-      </head>
-      <body className="body-gradient">
-        <PageProgress />
-        {children}
-        <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-        <script src="https://assets.lemonsqueezy.com/lemon.js" defer />
-      </body>
-    </html>
-  );
-}

site/app/not-found.tsx

@@ -1,44 +0,0 @@
-import Link from 'next/link';
-import Script from 'next/script';
-
-import Icon from '@/components/Icon';
-
-export default function Custom404Page() {
-  return (
-    <>
-      <section className="section">
-        <div className="container">
-          <div className="py-6 text-center">
-            <img
-              src="/img/404.svg"
-              alt="404 - not found"
-              height={200}
-              className="mb-6 mx-auto"
-            />
-
-            <div className="section-header">
-              <h1 className="section-title section-title-lg">
-                Oooops! Page Not Found
-              </h1>
-              <p className="section-description">
-                This page doesn&apos;t exist or was removed!
-                <br />
-                We suggest you back home
-              </p>
-
-              <div className="mt-5">
-                <Link href="/" className="btn btn-primary">
-                  <Icon name="chevron-left" />
-                  Back to home
-                </Link>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* <Script id="plausible">
-        {'window.plausible && window.plausible("404",{props:{path:document.location.pathname}})'}
-      </Script> */}
-    </>
-  );
-}

site/app/robots.ts

@@ -1,12 +0,0 @@
-import { uiUrl } from '@/config/site';
-import { MetadataRoute } from 'next';
-
-export default function robots(): MetadataRoute.Robots {
-  return {
-    rules: {
-      userAgent: '*',
-      allow: '/',
-    },
-    sitemap: `${uiUrl}/sitemap.xml`,
-  };
-}

site/app/sitemap.ts

@@ -1,43 +0,0 @@
-import { MetadataRoute } from 'next';
-import { allDocs, allGuides, allPages, allPosts } from '@/.contentlayer/generated';
-
-
-
-import { uiUrl } from '@/config/site';
-
-
-
-
-
-const pages = [
-  'testimonials',
-  'support',
-  'icons',
-  'guides',
-  'features',
-  'emails',
-  'emails/gallery',
-  'docs',
-  'blog'
-];
-
-export default function sitemap(): MetadataRoute.Sitemap {
-  return [
-    {
-      url: uiUrl,
-      lastModified: new Date(),
-    },
-    ...pages.map((page) => ({
-      url: `${uiUrl}/${page}`,
-      lastModified: new Date(),
-    })),
-    ...allPages.map((page) => ({
-      url: `${uiUrl}/${page.slugAsParams}`,
-      lastModified: new Date(),
-    })),
-    ...[...allDocs, ...allGuides, ...allPosts].map((doc) => ({
-      url: `${uiUrl}${doc.slug}`,
-      lastModified: new Date(),
-    })),
-  ];
-}

site/build/reformat-codeblocks.js

@@ -1,24 +0,0 @@
-const fs = require('fs')
-const path = require('path')
-const glob = require('glob')
-const { html: beautifyHtml } = require('js-beautify')
-
-const files = glob(path.join(__dirname, '../content/{docs,blog}/**/*.mdx'), {}, (err, files) => {
-  files.forEach((file) => {
-    let content = fs.readFileSync(file, 'utf-8')
-
-    content = content.replace(/\n\n+/g, '\n\n')
-
-    content = content.replace(/(?<=```html [^\n]+\n)([^`]+)(?=\n```)/g, (m, code) => {
-      code = code.trim()
-
-      code = beautifyHtml(code, {
-        indent_size: 2,
-      })
-
-      return code
-    })
-
-    fs.writeFileSync(file, content, 'utf-8')
-  })
-})

site/components/AOS.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-import AOS from 'aos';
-
-export default function AOSComponent({ children }: { children: React.ReactNode }) {
-  useEffect(() => {
-    AOS.init();
-  }, []);
-
-  return <>{children}</>;
-}

site/components/Ad.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import clsx from 'clsx';
-import { useRef, useEffect } from 'react';
-
-export default function Ad({ className, horizontal }: { className?: string; horizontal?: boolean }) {
-  const ad = useRef<any>(null);
-
-  useEffect(() => {
-    if (ad.current && process.env.NODE_ENV !== 'development') {
-      ad.current.innerHTML = '';
-
-      const script = document.createElement('script');
-      script.async = true;
-      script.src = '//cdn.carbonads.com/carbon.js?serve=CWYDCKQE&placement=tabler-iconsio';
-      script.id = '_carbonads_js';
-      ad.current.appendChild(script);
-    }
-  }, []);
-
-  return <div ref={ad} className={clsx('carbon', className, horizontal && 'carbon-horizontal')}></div>;
-};

site/components/Browser.tsx

@@ -1,37 +0,0 @@
-import { uiDemoUrl } from '@/config/site';
-import Icon from '@/components/Icon';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import clsx from 'clsx';
-
-export default function Browser({ icon = 'lock', url = uiDemoUrl, noresize = false, className, children, ...props }:{
-  icon?: string,
-  url?: string,
-  noresize?: boolean,
-  className?: string,
-  children?: React.ReactNode
-}) {
-  return (
-    <div className={clsx('browser', noresize && 'browser-noresize', className)} {...props}>
-      <div className="browser-header">
-        <div className="row items-center">
-          <div className="col-auto md:col-2">
-            <div className="browser-dots">
-              <div className="browser-dot" />
-              <div className="browser-dot" />
-              <div className="browser-dot" />
-            </div>
-          </div>
-          <div className="col-8">
-            <div className="tooltip" data-title="Open preview of Tabler dashboard!">
-              <a href={url} className="browser-input" target="_blank" rel="noopener noreferrer">
-                <Icon name={icon} />
-                {url}
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="browser-image">{children}</div>
-    </div>
-  );
-}

site/components/CTABAnner.tsx

@@ -1,37 +0,0 @@
-export default function CTABanner({
-  title,
-  description,
-  buttonHref,
-  buttonText,
-  buttonSecondaryHref,
-  buttonSecondaryText
-}) {
-  return (
-    <div className="bg-primary text-white rounded p-5 lg:p-6" data-aos="zoom-y-out">
-      <div className="row items-center text-center md:text-left">
-        <div className="lg:col">
-          <h3 className="h1 text-reset font-black">{title}</h3>
-          <p className="font-h4 m-0">{description}</p>
-        </div>
-        <div className="lg:col-auto">
-          <div className="row g-2">
-            {buttonText && buttonHref && (
-              <div className="col-auto">
-                <a href={buttonHref} className="btn btn-lg btn-white lemonsqueezy-button">
-                  {buttonText}
-                </a>
-              </div>
-            )}
-            {buttonSecondaryText && buttonSecondaryHref && (
-              <div className="col-auto">
-                <a href={buttonSecondaryHref} className="btn btn-lg btn-white btn-outline" target="_blank" rel="noopener noreferrer">
-                  {buttonSecondaryText}
-                </a>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

site/components/CTABAnnerEmails.tsx

@@ -1,15 +0,0 @@
-import { emailsDownloadUrl, emailsPrice, emailsSampleDownloadUrl } from '@/config/site';
-import CTABanner from '@/components/CTABAnner';
-
-export default function CTABannerEmails() {
-  return (
-    <CTABanner
-      title="Ready to download?"
-      description="Look like a PRO in every inbox. Start with one of our templates!"
-      buttonHref={emailsDownloadUrl}
-      buttonText={`Download for $${emailsPrice}`}
-      buttonSecondaryHref={emailsSampleDownloadUrl}
-      buttonSecondaryText="Get free sample"
-    />
-  );
-}

site/components/CodeBlock.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import React from 'react';
-import { useClipboard } from '@/hooks';
-import clsx from 'clsx';
-import { html as beautifyHtml } from 'js-beautify';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-
-
-
-import Icon from '@/components/Icon';
-
-
-
-
-
-export default function CodeBlock({
-  html,
-  children,
-  className,
-  language = 'xml',
-  copyable = true,
-  beautify = false,
-  hideLinks = false,
-}:{
-  html?: string,
-  children?: React.ReactNode,
-  className?: string,
-  language?: string,
-  copyable?: boolean,
-  beautify?: boolean,
-  hideLinks?: boolean,
-}) {
-  let code = html ?? (children || '').toString();
-  const clipboard = useClipboard();
-
-  if (hideLinks) {
-    code = code
-      .replace(/url\([^\)]+\)/g, 'url(...)')
-      .replace(/img src="[^"]+"/g, 'img src="..."')
-      .replace(
-        /(\n?)(\s*)<svg[^>]+icon-tabler-([^"]+).*?<\/svg>/gms,
-        '$1$2<!-- SVG icon from http://tabler-icons.io/i/$3 -->\n$2<svg>...</svg>'
-      );
-  }
-
-  if (beautify) {
-    code = beautifyHtml(code, {
-      inline: 'strong',
-      indent_size: 2,
-    });
-  }
-
-  const languageNames = {
-    js: 'JavaScript',
-    ts: 'TypeScript',
-    javascript: 'JavaScript',
-    typescript: 'TypeScript',
-    php: 'PHP',
-    python: 'Python',
-    ruby: 'Ruby',
-    go: 'Go',
-  };
-
-  if (language === 'js') {
-    language = 'javascript';
-  } else if (language === 'html') {
-    language = 'xml';
-  }
-
-  return (
-    <div className="codeblock">
-      {copyable && (
-        <div className="codeblock-copy">
-          <button
-            className={clsx('btn btn-icon', clipboard.copied ? 'btn-green' : 'btn-dark')}
-            onClick={() => clipboard.copy(html || '')}
-          >
-            {clipboard.copied ? <Icon name="check" /> : <Icon name="clipboard" />}
-          </button>
-        </div>
-      )}
-
-      <SyntaxHighlighter
-        className={clsx(`language-${language}`, className)}
-        language={language}
-        useInlineStyles={false}
-      >
-        {code}
-      </SyntaxHighlighter>
-    </div>
-  );
-}

site/components/DocsMenu.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import Link from '@/components/Link';
-import { usePathname } from 'next/navigation';
-import { DocsConfigType } from '@/types';
-import clsx from 'clsx';
-
-import { docsConfig } from '@/config/docs';
-
-
-
-
-
-export default function DocsMenu() {
-  const pathname = usePathname();
-
-  return (
-    <ul role="list" className="docs-menu scrollbar">
-      {docsConfig.map((item, index) => (
-        <li className="docs-menu-group" key={index}>
-          <span className="docs-menu-header">{item.title}</span>
-          {item.items && (
-            <div className="docs-menu-submenu">
-              {item.items.map((page, j) => (
-                <Link
-                  href={page.href}
-                  className={clsx(
-                    'docs-menu-item',
-                    pathname === page.href && 'active'
-                  )}
-                  exact
-                  key={j}
-                >
-                  {page.title}
-                  {page.label && (
-                    <>
-                      <span className="badge badge-primary ml-2">
-                        {page.label}
-                      </span>
-                    </>
-                  )}
-                </Link>
-              ))}
-            </div>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-}

site/components/EmailImage.tsx

@@ -1,21 +0,0 @@
-import ResponsiveImage from '@/components/ResponsiveImage';
-
-export default function EmailImage({ email, dark = false, full = false, ...props }) {
-  const width = full ? email.widthFull : email.width;
-  const height = full ? email.heightFull : email.height;
-
-  return (
-    <ResponsiveImage
-      src={`/img/tabler-emails/screenshots/${email.screenshot}${dark ? '-dark' : ''}${full ? '-full' : ''}.png`}
-      width={width}
-      height={height}
-      {...props}
-    />
-  );
-
-  // return (
-  //     <div className="rounded bg-white border-light" style={{ position: 'relative', paddingTop: `${height / width * 100}%`, overflow: 'hidden'}}>
-  //       <div style={{ background: `url() no-repeat top center/cover`, position: 'absolute', top: -2, left: -2, right: -2, bottom: -2 }} />
-  //     </div>
-  // )
-}

site/components/Example.tsx

@@ -1,120 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import clsx from 'clsx';
-
-import { uiCdnUrl, uiUrl } from '@/config/site';
-
-const previewHtml = (
-  example,
-  {
-    background = '',
-    vertical = false,
-    scrollable = false,
-    columns = 0,
-    centered = false,
-    vcentered = false,
-    separated = false,
-    vendors = false,
-    overview = false,
-    fullpage = false,
-    plugins = [],
-    libs = [],
-  }: {
-    vertical?: boolean;
-    background?: string;
-    scrollable?: boolean;
-    columns?: number;
-    centered?: boolean;
-    vcentered?: boolean;
-    separated?: boolean;
-    vendors?: boolean;
-    overview?: boolean;
-    fullpage?: boolean;
-    plugins?: string[];
-    libs?: string[];
-  },
-) => {
-  let assetsUrl = uiCdnUrl;
-
-  if (process.env.TABLER_LOCAL) {
-    assetsUrl = 'http://localhost:3000';
-  }
-
-  let content = example;
-  example = example
-    .replace(/ href="[^"]+"/g, ' href="javascript:void(0)"')
-    .replace(/action="[^"]+"/g, 'action="javascript:void(0)"');
-
-  if (!fullpage) {
-    content = `<main class="min-vh-100 ${vertical ? 'p-4' : 'py-4 px-4'}${centered ? ' d-flex justify-content-center align-items-center flex-wrap' : ''}${vcentered ? ' d-flex justify-content-center flex-column' : ''}">
-
-			${columns ? `<div class="mx-auto w-100" style="max-width: ${columns * 20}rem">` : ''}
-			${separated ? (vertical ? '<div class="space-y">' : '<div class="space-x">') : ''}
-
-			 ${example}
-
-			${separated ? '</div>' : ''}
-			${columns ? '</div>' : ''}
-		 </main>`;
-  }
-
-  return `<html lang="en">
-	<head>
-	<title>Example</title>
-	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler.css">
-	${plugins ? plugins.map((plugin) => `	<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-${plugin}.css" />`) : ''}
-</head>
-	<body class="h-100${background ? ` bg-${background}` : ''}${scrollable || fullpage ? ' auto-scroll' : ' no-scroll'}"${!background && ' style="--tblr-body-bg: #fbfcfd"'}>
-		 ${content}
-	${vendors ? `<link rel="stylesheet" href="${assetsUrl}/dist/css/tabler-vendors.css" />` : ''}
-	<script src="${assetsUrl}/dist/js/tabler.js"></script>
-	</body>
-</html>`;
-};
-
-export default function Example({
-  height = 200,
-  vertical = false,
-  background = '',
-  scrollable = false,
-  columns = 0,
-  centered = false,
-  vcentered = false,
-  separated = false,
-  vendors = false,
-  overview = false,
-  fullpage = false,
-  plugins = '',
-  resizable = false,
-  libs = '',
-  html,
-}) {
-  const [iframeHeight, setIframeHeight] = useState(height);
-  const srcDoc = previewHtml(html, {
-    vertical,
-    background,
-    scrollable,
-    columns,
-    centered,
-    vcentered,
-    separated,
-    vendors,
-    overview,
-    fullpage,
-    plugins: plugins ? plugins.split(',') : [],
-    libs: libs ? libs.split(',') : [],
-  });
-
-  return (
-    <div className="example">
-      <iframe
-        className={clsx('example-frame', {
-          'example-frame-resizable': resizable,
-        })}
-        srcDoc={srcDoc}
-        style={{ height: iframeHeight }}
-      />
-    </div>
-  );
-}

site/components/ExampleIframe.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import clsx from 'clsx';
-
-
-
-import { uiPackageName, uiVersion } from '@/config/site';
-import { generateIframeContent } from '@/lib/components';
-
-
-
-
-
-export default function ExampleIframe({
-  html,
-  height = 15,
-  wrapper,
-  backgroundColor = '',
-  plugins,
-  resizabe = false,
-  className
-}) {
-  const iframeRef = React.useRef<HTMLIFrameElement>(null);
-  const [contentHeight, setContentHeight] = useState(0);
-
-  const iframeLoaded = e => {
-    setContentHeight(e.target.contentWindow.document.body.scrollHeight);
-  };
-  function resizeIframe(obj) {
-    obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
-  }
-
-  const srcDoc = generateIframeContent({
-    html,
-    wrapper,
-    plugins,
-    backgroundColor
-  });
-
-  // React.useEffect(() => {
-  //   const iframe = iframeRef.current
-  //   // const listener = e => console.log(e)
-
-  //   // iframe && iframe.addEventListener("load", listener)
-
-  //   // return () => {
-  //   //   iframe && iframe.removeEventListener("load", listener)
-  //   // }
-  // })
-
-  return (
-    <iframe
-      ref={iframeRef}
-      className={clsx('example-frame', resizabe && 'example-frame-resizable', className)}
-      srcDoc={srcDoc}
-      style={{ minHeight: `${height}rem`, height: `${contentHeight}px` }}
-      onLoad={iframeLoaded}
-    />
-  );
-}

site/components/Features.tsx

@@ -1,15 +0,0 @@
-import Shape from '@/components/Shape';
-
-export default function Features({ list }) {
-  return (
-    <div className="row items-center text-center lg:g-6">
-      {list.map((feature, i) => (
-        <div className="md:col-6 lg:col" key={i} data-aos="fade-up" data-aos-delay={i * 150}>
-          <Shape icon={feature.icon} size="md" className="mb-3" color="primary" />
-          <h2 className="h3">{feature.title}</h2>
-          <p className="text-muted">{feature.description}</p>
-        </div>
-      ))}
-    </div>
-  );
-}

site/components/Icon.tsx

@@ -1,1043 +0,0 @@
-import clsx from 'clsx';
-
-const icons = {
-  plus: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon icon-tabler icon-tabler-plus', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  ),
-  'brand-github': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-github', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
-    </svg>
-  ),
-  'brand-sketch': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-sketch', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3.262 10.878l8 8.789c.4 .44 1.091 .44 1.491 0l8 -8.79c.313 -.344 .349 -.859 .087 -1.243l-3.537 -5.194a1 1 0 0 0 -.823 -.436h-8.926a1 1 0 0 0 -.823 .436l-3.54 5.192c-.263 .385 -.227 .901 .087 1.246z" />
-    </svg>
-  ),
-  'brand-figma': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-figma', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx={15} cy={12} r={3} />
-      <rect x={6} y={3} width={12} height={6} rx={3} />
-      <path d="M9 9a3 3 0 0 0 0 6h3m-3 0a3 3 0 1 0 3 3v-15" />
-    </svg>
-  ),
-  'brand-twitter': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-twitter', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
-    </svg>
-  ),
-  'brand-facebook': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-facebook', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
-    </svg>
-  ),
-  'brand-dribbble': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-dribbble', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx={12} cy={12} r={9} />
-      <path d="M9 3.6c5 6 7 10.5 7.5 16.2" />
-      <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" />
-      <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" />
-    </svg>
-  ),
-  heart: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-heart', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
-    </svg>
-  ),
-  download: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-download', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
-      <polyline points="7 11 12 16 17 11" />
-      <line x1={12} y1={4} x2={12} y2={16} />
-    </svg>
-  ),
-  edit: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-edit', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
-      <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
-      <path d="M16 5l3 3" />
-    </svg>
-  ),
-  search: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-search', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx={10} cy={10} r={7} />
-      <line x1={21} y1={21} x2={15} y2={15} />
-    </svg>
-  ),
-  lock: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-lock', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x={5} y={11} width={14} height={10} rx={2} />
-      <circle cx={12} cy={16} r={1} />
-      <path d="M8 11v-4a4 4 0 0 1 8 0v4" />
-    </svg>
-  ),
-  'brand-bootstrap': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-bootstrap', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M2 12a2 2 0 0 0 2 -2v-4a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2" />
-      <path d="M2 12a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-4a2 2 0 0 1 2 -2" />
-      <path d="M9 16v-8h3.5a2 2 0 1 1 0 4h-3.5h4a2 2 0 1 1 0 4h-4z" />
-    </svg>
-  ),
-  'brand-html5': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-html5', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M20 4l-2 14.5l-6 2l-6 -2l-2 -14.5z" />
-      <path d="M15.5 8h-7l.5 4h6l-.5 3.5l-2.5 .75l-2.5 -.75l-.1 -.5" />
-    </svg>
-  ),
-  tools: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-tools', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4" />
-      <line x1="14.5" y1="5.5" x2="18.5" y2="9.5" />
-      <polyline points="12 8 7 3 3 7 8 12" />
-      <line x1={7} y1={8} x2="5.5" y2="9.5" />
-      <polyline points="16 12 21 17 17 21 12 16" />
-      <line x1={16} y1={17} x2="14.5" y2="18.5" />
-    </svg>
-  ),
-  paint: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-paint', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x={5} y={3} width={14} height={6} rx={2} />
-      <path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" />
-      <rect x={10} y={15} width={4} height={6} rx={1} />
-    </svg>
-  ),
-  check: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-check', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M5 12l5 5l10 -10" />
-    </svg>
-  ),
-  x: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-x', className)}
-      width={24}
-      height={24}
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  ),
-  copy: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-copy', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="8" y="8" width="12" height="12" rx="2" />
-      <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
-    </svg>
-  ),
-  'arrow-down-circle': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-arrow-down-circle', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="9" />
-      <line x1="8" y1="12" x2="12" y2="16" />
-      <line x1="12" y1="8" x2="12" y2="16" />
-      <line x1="16" y1="12" x2="12" y2="16" />
-    </svg>
-  ),
-  'arrow-right': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-arrow-right', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M5 12l14 0" />
-      <path d="M13 18l6 -6" />
-      <path d="M13 6l6 6" />
-    </svg>
-  ),
-  'thumb-up': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-thumb-up', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" />
-    </svg>
-  ),
-  'device-mobile': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-device-mobile', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="6" y="3" width="12" height="18" rx="2" />
-      <line x1="11" y1="4" x2="13" y2="4" />
-      <line x1="12" y1="17" x2="12" y2="17.01" />
-    </svg>
-  ),
-  'device-tablet': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-device-tablet', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="5" y="3" width="14" height="18" rx="1" />
-      <circle cx="12" cy="17" r="1" />
-    </svg>
-  ),
-  'device-desktop': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-device-desktop', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="3" y="4" width="18" height="12" rx="1" />
-      <line x1="7" y1="20" x2="17" y2="20" />
-      <line x1="9" y1="16" x2="9" y2="20" />
-      <line x1="15" y1="16" x2="15" y2="20" />
-    </svg>
-  ),
-  'chevron-left': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-chevron-left', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="1.5"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="15 6 9 12 15 18" />
-    </svg>
-  ),
-  'chevron-right': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-chevron-right', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="9 6 15 12 9 18" />
-    </svg>
-  ),
-  lego: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-lego', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <line x1="9.5" y1="11" x2="9.51" y2="11" />
-      <line x1="14.5" y1="11" x2="14.51" y2="11" />
-      <path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
-      <path d="M7 5h1v-2h8v2h1a3 3 0 0 1 3 3v9a3 3 0 0 1 -3 3v1h-10v-1a3 3 0 0 1 -3 -3v-9a3 3 0 0 1 3 -3" />
-    </svg>
-  ),
-  'chevron-up': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-chevron-up', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="6 15 12 9 18 15" />
-    </svg>
-  ),
-  devices: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-devices', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="13" y="8" width="8" height="12" rx="1" />
-      <path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h9" />
-      <line x1="16" y1="9" x2="18" y2="9" />
-    </svg>
-  ),
-  mailbox: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-mailbox', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M10 21v-6.5a3.5 3.5 0 0 0 -7 0v6.5h18v-6a4 4 0 0 0 -4 -4h-10.5" />
-      <path d="M12 11v-8h4l2 2l-2 2h-4" />
-      <path d="M6 15h1" />
-    </svg>
-  ),
-  palette: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-palette', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M12 21a9 9 0 1 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" />
-      <circle cx="7.5" cy="10.5" r=".5" fill="currentColor" />
-      <circle cx="12" cy="7.5" r=".5" fill="currentColor" />
-      <circle cx="16.5" cy="10.5" r=".5" fill="currentColor" />
-    </svg>
-  ),
-  message: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-message', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" />
-      <line x1="8" y1="9" x2="16" y2="9" />
-      <line x1="8" y1="13" x2="14" y2="13" />
-    </svg>
-  ),
-  settings: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-settings', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
-      <circle cx="12" cy="12" r="3" />
-    </svg>
-  ),
-  adjustments: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-adjustments', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="6" cy="10" r="2" />
-      <line x1="6" y1="4" x2="6" y2="8" />
-      <line x1="6" y1="12" x2="6" y2="20" />
-      <circle cx="12" cy="16" r="2" />
-      <line x1="12" y1="4" x2="12" y2="14" />
-      <line x1="12" y1="18" x2="12" y2="20" />
-      <circle cx="18" cy="7" r="2" />
-      <line x1="18" y1="4" x2="18" y2="5" />
-      <line x1="18" y1="9" x2="18" y2="20" />
-    </svg>
-  ),
-  clipboard: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-clipboard-copy', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h3m9 -9v-5a2 2 0 0 0 -2 -2h-2" />
-      <path d="M13 17v-1a1 1 0 0 1 1 -1h1m3 0h1a1 1 0 0 1 1 1v1m0 3v1a1 1 0 0 1 -1 1h-1m-3 0h-1a1 1 0 0 1 -1 -1v-1" />
-      <rect x="9" y="3" width="6" height="4" rx="2" />
-    </svg>
-  ),
-  home: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-home', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-    </svg>
-  ),
-  box: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-box', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-      <line x1="12" y1="12" x2="20" y2="7.5" />
-      <line x1="12" y1="12" x2="12" y2="21" />
-      <line x1="12" y1="12" x2="4" y2="7.5" />
-    </svg>
-  ),
-  lifebuoy: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-lifebuoy', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="4" />
-      <circle cx="12" cy="12" r="9" />
-      <line x1="15" y1="15" x2="18.35" y2="18.35" />
-      <line x1="9" y1="15" x2="5.65" y2="18.35" />
-      <line x1="5.65" y1="5.65" x2="9" y2="9" />
-      <line x1="18.35" y1="5.65" x2="15" y2="9" />
-    </svg>
-  ),
-  code: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-code', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="7 8 3 12 7 16" />
-      <polyline points="17 8 21 12 17 16" />
-      <line x1="14" y1="4" x2="10" y2="20" />
-    </svg>
-  ),
-  versions: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-versions', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="10" y="5" width="10" height="14" rx="2" />
-      <line x1="7" y1="7" x2="7" y2="17" />
-      <line x1="4" y1="8" x2="4" y2="16" />
-    </svg>
-  ),
-  maximize: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-maximize', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4 8v-2a2 2 0 0 1 2 -2h2" />
-      <path d="M4 16v2a2 2 0 0 0 2 2h2" />
-      <path d="M16 4h2a2 2 0 0 1 2 2v2" />
-      <path d="M16 20h2a2 2 0 0 0 2 -2v-2" />
-    </svg>
-  ),
-  minimize: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-minimize', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M15 19v-2a2 2 0 0 1 2 -2h2" />
-      <path d="M15 5v2a2 2 0 0 0 2 2h2" />
-      <path d="M5 15h2a2 2 0 0 1 2 2v2" />
-      <path d="M5 9h2a2 2 0 0 0 2 -2v-2" />
-    </svg>
-  ),
-  'external-link': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-external-link', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-      <line x1="10" y1="14" x2="20" y2="4" />
-      <polyline points="15 4 20 4 20 9" />
-    </svg>
-  ),
-  star: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-star', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
-    </svg>
-  ),
-  'target-arrow': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-target-arrow', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="1" />
-      <path d="M12 7a5 5 0 1 0 5 5" />
-      <path d="M13.004 3.055a9 9 0 1 0 7.941 7.945" />
-      <path d="M15 6v3h3l3 -3h-3v-3z" />
-      <path d="M15 9l-3 3" />
-    </svg>
-  ),
-  brush: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brush', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 21v-4a4 4 0 1 1 4 4h-4" />
-      <path d="M21 3a16 16 0 0 0 -12.8 10.2" />
-      <path d="M21 3a16 16 0 0 1 -10.2 12.8" />
-      <path d="M10.6 9a9 9 0 0 1 4.4 4.4" />
-    </svg>
-  ),
-  'layout-dashboard': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-layout-dashboard', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4 4h6v8h-6z" />
-      <path d="M4 16h6v4h-6z" />
-      <path d="M14 12h6v8h-6z" />
-      <path d="M14 4h6v4h-6z" />
-    </svg>
-  ),
-  'sun-moon': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-sun-moon', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M9.173 14.83a4 4 0 1 1 5.657 -5.657" />
-      <path d="M11.294 12.707l.174 .247a7.5 7.5 0 0 0 8.845 2.492a9 9 0 0 1 -14.671 2.914" />
-      <path d="M3 12h1" />
-      <path d="M12 3v1" />
-      <path d="M5.6 5.6l.7 .7" />
-      <path d="M3 21l18 -18" />
-    </svg>
-  ),
-  'circle-x-filled': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-circle-x-filled', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path
-        d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-6.489 5.8a1 1 0 0 0 -1.218 1.567l1.292 1.293l-1.292 1.293l-.083 .094a1 1 0 0 0 1.497 1.32l1.293 -1.292l1.293 1.292l.094 .083a1 1 0 0 0 1.32 -1.497l-1.292 -1.293l1.292 -1.293l.083 -.094a1 1 0 0 0 -1.497 -1.32l-1.293 1.292l-1.293 -1.292l-.094 -.083z"
-        strokeWidth="0"
-        fill="currentColor"
-      ></path>
-    </svg>
-  ),
-  'circle-check-filled': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-circle-check-filled', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path
-        d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
-        strokeWidth="0"
-        fill="currentColor"
-      ></path>
-    </svg>
-  ),
-  'alert-circle-filled': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-alert-circle-filled', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path
-        d="M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"
-        stroke-width="0"
-        fill="currentColor"
-      ></path>
-    </svg>
-  ),
-  sparkles: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-sparkles', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2zm-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6z"></path>
-    </svg>
-  ),
-  script: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-script', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-      <path d="M17 20h-11a3 3 0 0 1 0 -6h11a3 3 0 0 0 0 6h1a3 3 0 0 0 3 -3v-11a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v8"></path>
-    </svg>
-  ),
-  link: ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-link', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path>
-      <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path>
-    </svg>
-  ),
-  'brand-linkedin': ({ className }) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={clsx('icon icon-tabler icon-tabler-brand-linkedin', className)}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      strokeWidth="2"
-      stroke="currentColor"
-      fill="none"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
-      <path d="M8 11l0 5"></path>
-      <path d="M8 8l0 .01"></path>
-      <path d="M12 16l0 -5"></path>
-      <path d="M16 16v-3a2 2 0 0 0 -4 0"></path>
-    </svg>
-  ),
-};
-
-export default function Icon({
-  name,
-  color,
-  filled = false,
-  className = null,
-}: {
-  name: string
-  color?: string
-  filled?: boolean
-  className?: string | null
-}) {
-  if (icons[name]) {
-    const Component = icons[name];
-
-    return (
-      <Component
-        className={clsx('icon', className, {
-          [`text-${color}`]: color,
-          'icon-filled': filled,
-        })}
-      />
-    );
-  } else {
-    throw Error(`Icon ${name} doesn't exists`);
-  }
-}

site/components/IconSvg.tsx

@@ -1,5 +0,0 @@
-import clsx from 'clsx';
-
-export default function IconSvg({ svg, className }) {
-  return <span className={clsx('icon-svg', className)} dangerouslySetInnerHTML={{ __html: svg }} />;
-}

site/components/Link.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { default as NextLink } from 'next/link';
-import { usePathname } from 'next/navigation';
-import clsx from 'clsx';
-
-
-
-
-
-export default function Link({
-  href,
-  children,
-  className,
-  prefetch = false,
-  exact = false,
-  onClick = () => {},
-  ...props
-}: {
-  href: string
-  children?: React.ReactNode
-  prefetch?: boolean
-  className?: string
-  exact?: boolean
-  onClick?: (event: React.MouseEvent) => void
-}): JSX.Element {
-  const pathname = usePathname();
-
-  return (
-    <NextLink
-      href={href}
-      className={clsx(className, [
-        (exact ? pathname === href : pathname.startsWith(href)) ? 'active' : '',
-      ])}
-      {...props}
-    >
-      {children}
-    </NextLink>
-  );
-}

site/components/MDX.tsx

@@ -1,210 +0,0 @@
-import * as React from 'react';
-import type { MDXComponents } from 'mdx';
-import { useMDXComponent } from 'next-contentlayer/hooks';
-
-
-
-import Link from '@/components/Link';
-import TablerSponsorsBanner from '@/components/TablerSponsorsBanner';
-import Callout from '@/components/mdx/Callout';
-import { Card, Cards } from '@/components/mdx/Cards';
-import { Code, Pre } from '@/components/mdx/Code';
-import ColorsTable from '@/components/mdx/ColorsTable';
-import EmailsCount from '@/components/mdx/EmailsCount';
-import FlagsTable from '@/components/mdx/FlagsTable';
-import GuideImage from '@/components/mdx/GuideImage';
-import IconsCount from '@/components/mdx/IconsCount';
-import Image from '@/components/mdx/Image';
-import PaymentsTable from '@/components/mdx/PaymentsTable';
-import TablerLogos from '@/components/mdx/TablerLogos';
-import { Tab, Tabs } from '@/components/mdx/Tabs';
-import { TabsPackage } from '@/components/mdx/TabsPackage';
-import { TipBad, TipGood, TipChanges } from '@/components/mdx/Tips';
-import { OptionDescription, OptionTitle, OptionsTable } from '@/components/mdx/OptionsTable';
-
-
-
-
-
-const components: MDXComponents = {
-  // h1: ({ className, ...props }) => (
-  //   <h1
-  //     className={cn(
-  //       "mt-2 scroll-m-20 text-4xl font-bold tracking-tight",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // h2: ({ className, ...props }) => (
-  //   <h2
-  //     className={cn(
-  //       "mt-10 scroll-m-20 border-b pb-1 text-3xl font-semibold tracking-tight first:mt-0",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // h3: ({ className, ...props }) => (
-  //   <h3
-  //     className={cn(
-  //       "mt-8 scroll-m-20 text-2xl font-semibold tracking-tight",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // h4: ({ className, ...props }) => (
-  //   <h4
-  //     className={cn(
-  //       "mt-8 scroll-m-20 text-xl font-semibold tracking-tight",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // h5: ({ className, ...props }) => (
-  //   <h5
-  //     className={cn(
-  //       "mt-8 scroll-m-20 text-lg font-semibold tracking-tight",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // h6: ({ className, ...props }) => (
-  //   <h6
-  //     className={cn(
-  //       "mt-8 scroll-m-20 text-base font-semibold tracking-tight",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // a: ({ className, ...props }) => (
-  //   <a
-  //     className={cn("font-medium underline underline-offset-4", className)}
-  //     {...props}
-  //   />
-  // ),
-  // p: ({ className, ...props }) => (
-  //   <p
-  //     className={cn("leading-7 [&:not(:first-child)]:mt-6", className)}
-  //     {...props}
-  //   />
-  // ),
-  // ul: ({ className, ...props }) => (
-  //   <ul className={cn("my-6 ml-6 list-disc", className)} {...props} />
-  // ),
-  // ol: ({ className, ...props }) => (
-  //   <ol className={cn("my-6 ml-6 list-decimal", className)} {...props} />
-  // ),
-  // li: ({ className, ...props }) => (
-  //   <li className={cn("mt-2", className)} {...props} />
-  // ),
-  // blockquote: ({ className, ...props }) => (
-  //   <blockquote
-  //     className={cn(
-  //       "mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // img: ({
-  //   className,
-  //   alt,
-  //   ...props
-  // }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-  //   // eslint-disable-next-line @next/next/no-img-element
-  //   <img className={cn("rounded-md border", className)} alt={alt} {...props} />
-  // ),
-  // hr: ({ ...props }) => <hr className="my-4 md:my-8" {...props} />,
-  // table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-  //   <div className="my-6 w-full overflow-y-auto">
-  //     <table className={cn("w-full", className)} {...props} />
-  //   </div>
-  // ),
-  // tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
-  //   <tr
-  //     className={cn("m-0 border-t p-0 even:bg-muted", className)}
-  //     {...props}
-  //   />
-  // ),
-  // th: ({ className, ...props }) => (
-  //   <th
-  //     className={cn(
-  //       "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // td: ({ className, ...props }) => (
-  //   <td
-  //     className={cn(
-  //       "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // pre: ({ className, ...props }) => (
-  //   <pre
-  //     className={cn(
-  //       "mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // code: ({ className, ...props }) => (
-  //   <code
-  //     className={cn(
-  //       "relative rounded border px-[0.3rem] py-[0.2rem] font-mono text-sm",
-  //       className
-  //     )}
-  //     {...props}
-  //   />
-  // ),
-  // Image,
-  // Callout,
-  // Card: MdxCard,
-  Link,
-  TablerLogos,
-  PaymentsTable,
-  FlagsTable,
-  ColorsTable,
-  EmailsCount,
-  IconsCount,
-  GuideImage,
-  Callout,
-  Tabs,
-  TabsPackage,
-  Tab,
-  Card,
-  Cards,
-  TipGood,
-  TipBad,
-  TipChanges,
-  pre: Pre,
-  code: Code,
-  a: (props) => {
-    return <Link {...props} />;
-  },
-  img: Image,
-  TablerSponsorsBanner,
-  OptionDescription,
-  OptionTitle,
-  OptionsTable,
-};
-
-export default function Mdx({ code }: { code: string }) {
-  const Component = useMDXComponent(code);
-
-  return (
-    <>
-      <Component components={components} />
-    </>
-  );
-}

site/components/Modal.tsx

@@ -1,39 +0,0 @@
-import Icon from '@/components/Icon';
-import { useCallback, useEffect, useState } from 'react';
-
-export function Modal({ children }) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleEscape = useCallback(e => {
-    if (e.keyCode === 27) {
-      setIsOpen(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      document.addEventListener('keydown', handleEscape, false);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleEscape, false);
-    };
-  });
-
-  const hideModal = e => {
-    setIsOpen(false);
-  };
-
-  return isOpen ? (
-    <div className="modal-backdrop" tabIndex={-1} role="dialog" onClick={hideModal} onKeyDown={hideModal}>
-      <div className="modal">
-        <a href="#" className="modal-close" data-dismiss="modal" aria-label="Close modal" onClick={hideModal}>
-          <Icon name="x" />
-        </a>
-        <div className="modal-body">{children}</div>
-      </div>
-    </div>
-  ) : null;
-}
-
-export default Modal;

site/components/NavLink.tsx

@@ -1,16 +0,0 @@
-import Link from '@/components/Link';
-import clsx from 'clsx';
-
-function NavLink({ href, active, children, ...props }) {
-  if (active) {
-    props.className = clsx(props.className, 'active');
-  }
-
-  return (
-    <Link href={href} {...props}>
-      {children}
-    </Link>
-  );
-}
-
-export default NavLink;

site/components/PageProgress.tsx

@@ -1,8 +0,0 @@
-'use client';
-
-import { color } from '@/config/site';
-import NextTopLoader from 'nextjs-toploader';
-
-export default function ProgressBar() {
-  return <NextTopLoader color={color} height={2} />;
-}

site/components/PostItem.tsx

@@ -1,21 +0,0 @@
-import Link from '@/components/Link';
-import clsx from 'clsx';
-import BlogAuthors from '@/components/blog/Authors';
-
-export default function PostItem({ title, category, slug, date, children, authors, wide = false }) {
-  return (
-    <div>
-      <div className="row gx-5 justify-center">
-        <div className="col-3">
-          <BlogAuthors authors={authors} />
-        </div>
-        <article className="col-6">
-          <Link href={`/blog/${slug}`} className="h3 mb-3">
-            {title}
-          </Link>
-          <div className="markdown">{children}</div>
-        </article>
-      </div>
-    </div>
-  );
-}

site/components/PricingCardTeam.tsx

@@ -1,41 +0,0 @@
-import { pricingPlanTeam as plan } from '@/config/pricing';
-import Icon from '@/components/Icon';
-import clsx from 'clsx';
-
-export default function PricingCardTeam({ className }) {
-  return (
-    <div className={clsx('pricing-banner', className)}>
-      <div className="row g items-center">
-        <div className="lg:col">
-          <h3>{plan.name}</h3>
-          <p className="m-0">{plan.description}</p>
-        </div>
-        <div className="lg:col">
-          <ul className="pricing-features m-0">
-            {plan.features.map(feature => (
-              <li key={feature}>
-                <Icon name="check" className="text-green mr-2" />
-                {feature}
-              </li>
-            ))}
-          </ul>
-        </div>
-        <div className="sm:col-6 lg:col">
-          <div className="pricing-price m-0">
-            <span className="pricing-price-currency">$</span>
-            {plan.price}
-            <div className="pricing-price-description">
-              <div>per team</div>
-              <div>per year</div>
-            </div>
-          </div>
-        </div>
-        <div className="sm:col-6 lg:col-auto">
-          <a href="#" className="btn btn-primary btn-block">
-            Get started
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}

site/components/PricingCards.tsx

@@ -1,50 +0,0 @@
-import { pricingPlansPersonal as plans } from '@/config/pricing';
-import clsx from 'clsx';
-import Icon from '@/components/Icon';
-
-export default function PricingCards() {
-  return (
-    <div className="pricing">
-      {plans.map(plan => (
-        <div key={plan.name} className={clsx('pricing-card', { featured: plan.featured })}>
-          {plan.featured && (
-            <div className="pricing-label">
-              <div className="label label-primary label-sm">Popular</div>
-            </div>
-          )}
-
-          <h4 className="pricing-title">{plan.name}</h4>
-
-          <div className="pricing-price">
-            <span className="pricing-price-currency">$</span>
-            {plan.price}
-            <div className="pricing-price-description">
-              <div>per user</div>
-              <div>per year</div>
-            </div>
-          </div>
-
-          <ul className="pricing-features">
-            {plan.features.map(feature => (
-              <li key={feature}>
-                <Icon name="check" className="text-green mr-2" />
-                {feature}
-              </li>
-            ))}
-          </ul>
-
-          <div className="pricing-btn">
-            <a
-              href="#"
-              className={clsx('btn btn-block', {
-                'btn-primary': plan.featured
-              })}
-            >
-              Get started
-            </a>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

site/components/ResponsiveImage.tsx

@@ -1,32 +0,0 @@
-import clsx from 'clsx';
-import Image from 'next/image';
-
-export default function ResponsiveImage(props) {
-  if (props.url) {
-    return (
-      <img
-        src={props.url}
-        className={clsx('img-fluid', props.className)}
-        width={props.width}
-        height={props.height}
-        loading="lazy"
-        alt={props.alt || ''}
-      />
-    );
-  }
-
-  const src2x = props.src;
-
-  return (
-    <Image
-      className={clsx(props.className)}
-      src={src2x}
-      alt={props.alt || ''}
-      width={props.width}
-      height={props.height}
-      quality={85}
-      srcSet={[props.width, props.width * 2]}
-      {...props}
-    />
-  );
-}

site/components/SEO.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-const SEO = (props) => {
-  const { title, description, image } = props;
-  return (
-    <Head>
-      <title>{title} | App</title>
-      <meta name="description" content={description} />
-      <meta itemProp="name" content={title} />
-      <meta itemProp="description" content={description} />
-      <meta itemProp="image" content={image} />
-    </Head>
-  );
-};
-
-export default SEO;

site/components/SectionDivider.tsx

@@ -1,22 +0,0 @@
-export default function SectionDivider({ wave = false }) {
-  if (wave) {
-    return (
-      <svg className="section-divider section-divider-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 80">
-        <path d="M1920,80 L0,80 L0,0 C0,0 387,59 960,59 C1533,59 1920,0 1920,0 L1920,80 Z" />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      className="section-divider"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 24 150 28"
-      preserveAspectRatio="none"
-    >
-      <path className="wave-1" d="M-110 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-      <path className="wave-2" d="M-110 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-      <path className="wave-3" d="M-110 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
-    </svg>
-  );
-}

site/components/Shape.tsx

@@ -1,36 +0,0 @@
-import clsx from 'clsx';
-
-import Icon from '@/components/Icon';
-
-export default function Shape({
-  icon,
-  placeholder,
-  color,
-  size,
-  rounded,
-  className,
-}: {
-  icon?: string
-  placeholder?: string | number
-  color?: string
-  size?: string
-  rounded?: boolean
-  className?: string
-}) {
-  return (
-    <div
-      className={clsx(
-        'shape',
-        {
-          [`shape-${color}`]: color,
-          [`shape-${size}`]: size,
-          'shape-rounded': rounded,
-        },
-        className
-      )}
-    >
-      {icon && <Icon name={icon} />}
-      {placeholder && placeholder}
-    </div>
-  );
-}

site/components/Slider.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import Glide from '@glidejs/glide';
-
-import Icon from '@/components/Icon';
-
-const sliderConfiguration = {
-  gap: 0,
-  perView: 1,
-  type: 'carousel',
-  autoplay: 7000,
-  animationDuration: 1000,
-};
-
-export default function Slider({
-  slides = [],
-  style = {},
-}: {
-  slides: React.ReactNode[]
-  style?: React.CSSProperties
-}) {
-  const wrapper = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const glide = new Glide(wrapper.current, sliderConfiguration).mount();
-
-    return () => glide.destroy();
-  }, []);
-
-  return (
-    <div ref={wrapper} className="glide" style={style}>
-      <div className="glide__track" data-glide-el="track">
-        <ul className="glide__slides">
-          {slides.map((slide, i) => (
-            <li className="glide__slide slider" key={i}>
-              {slide}
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="glide__arrows" data-glide-el="controls">
-        <button
-          className="glide__arrow glide__arrow--prev"
-          data-glide-dir="<"
-          aria-label="Previous slide"
-        >
-          <Icon name="chevron-left" />
-        </button>
-        <button
-          className="glide__arrow glide__arrow--next"
-          data-glide-dir=">"
-          aria-label="Next slide"
-        >
-          <Icon name="chevron-right" />
-        </button>
-      </div>
-    </div>
-  );
-}

site/components/Svg.tsx

@@ -1,16 +0,0 @@
-export default function Svg({ width = 20, height = 20, className }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      stroke="#b8cef1"
-    >
-      <rect x=".5" y=".5" width={width - 1} height={height - 1} fill="#fff" rx="2" />
-      <line x1="1" y1="1" x2={width - 1} y2={height - 1} />
-      <line x1="1" y1={height - 1} x2={width - 1} y2="1" />
-    </svg>
-  );
-}

site/components/TOC.tsx

@@ -1,101 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import { TableOfContents } from '@/lib/toc';
-import useMounted from '@/hooks/use-mounted';
-import clsx from 'clsx';
-
-interface TocProps {
-  toc: TableOfContents;
-}
-
-export default function TOC({ toc }: TocProps) {
-  const itemIds = React.useMemo(
-    () =>
-      toc.items
-        ? toc.items
-            .flatMap((item) => [item.url, item?.items?.map((item) => item.url)])
-            .flat()
-            .filter(Boolean)
-            .map((id) => id?.split('#')[1])
-        : [],
-    [toc],
-  );
-  const activeHeading = useActiveItem(itemIds);
-  const mounted = useMounted();
-
-  if (!toc?.items) {
-    return null;
-  }
-
-  return mounted ? (
-    <Tree tree={toc} activeItem={activeHeading} />
-  ) : <Tree tree={toc} />;
-}
-
-function useActiveItem(itemIds: (string | undefined)[]) {
-  const [activeId, setActiveId] = React.useState<string>('');
-
-  React.useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setActiveId(entry.target.id);
-          }
-        });
-      },
-      { rootMargin: '0% 0% -80% 0%' },
-    );
-
-    itemIds?.forEach((id) => {
-      if (!id) {
-        return;
-      }
-
-      const element = document.getElementById(id);
-      if (element) {
-        observer.observe(element);
-      }
-    });
-
-    return () => {
-      itemIds?.forEach((id) => {
-        if (!id) {
-          return;
-        }
-
-        const element = document.getElementById(id);
-        if (element) {
-          observer.unobserve(element);
-        }
-      });
-    };
-  }, [itemIds]);
-
-  return activeId;
-}
-
-interface TreeProps {
-  tree: TableOfContents;
-  level?: number;
-  activeItem?: string | null;
-}
-
-function Tree({ tree, level = 1, activeItem }: TreeProps) {
-  return tree?.items?.length && level < 3 ? (
-    <ul className={clsx('p-0 list-unstyled space-y-2', { 'pl-4': level !== 1 })}>
-      {tree.items.map((item, index) => {
-        return (
-          <li key={index}>
-            <a href={item.url} className={clsx('link-muted', item.url === `#${activeItem}` ? 'font-medium text-headers' : '')}>
-              {item.title}
-            </a>
-            {item.items?.length ? <Tree tree={item} level={level + 1} activeItem={activeItem} /> : null}
-          </li>
-        );
-      })}
-    </ul>
-  ) : null;
-}

site/components/blog/Authors.tsx

@@ -1,21 +0,0 @@
-export default function BlogAuthors({ authors }) {
-  return (
-    <>
-      {authors.map(author => (
-        <div key={author.twitter} className="row gx-3 items-center">
-          <div className="col-auto">
-            <img src={author.avatar} alt="" className="avatar" />
-          </div>
-          <div className="col">
-            <div>{author.name}</div>
-            <div>
-              <a href={`https://twitter.com/${author.twitter}`} target="_blank" rel="noopener noreferrer">
-                @{author.twitter}
-              </a>
-            </div>
-          </div>
-        </div>
-      ))}
-    </>
-  );
-}

site/components/layout/CTA.tsx

@@ -1,10 +0,0 @@
-// import CTABanner from '@/components/CTABAnner'
-// import CTABannerEmails from '@/components/CTABAnnerEmails'
-
-export default function CTA() {
-  return (
-    <section className="section">
-      <div className="container" />
-    </section>
-  );
-}

site/components/layout/Footer.tsx

@@ -1,100 +0,0 @@
-import clsx from 'clsx';
-
-import { footerMenu, socialLinks } from '@/config/site';
-import Icon from '@/components/Icon';
-import Link from '@/components/Link';
-
-const FooterMenu = ({ border = false }: { border?: boolean }) => (
-  <footer className="footer">
-    <div className="container">
-      <div className={clsx('py-6', border && 'border-top')}>
-        <div className="row">
-          <div className="lg:col-7">
-            <div className="row">
-              {footerMenu.map((column) => (
-                <div className="sm:col-6 md:col" key={column.title}>
-                  <div className="h-subheader mb-3">{column.title}</div>
-                  <ul className="list-unstyled list-separated">
-                    {column.items.map((item) => (
-                      <li key={item.title}>
-                        {item.route ? (
-                          <Link href={item.route} className="link-muted">
-                            {item.title}
-                          </Link>
-                        ) : (
-                          <a href={item.href} className="link-muted" target="_blank" rel="noopener noreferrer">
-                            {item.title}
-                          </a>
-                        )}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="lg:col-4 ml-auto">
-            <div className="logo logo-gray mb-4" />
-
-            <div className="text-muted">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!</div>
-
-            <div className="mt-4 lg:mt-6">
-              <div className="row gx-3">
-                {socialLinks.map((social) => (
-                  <div className="col-auto" key={social.icon}>
-                    <a href={social.url} className="link-muted" aria-label="social.label" target="_blank" rel="noopener noreferrer">
-                      <Icon name={social.icon} className="icon-md" />
-                    </a>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </footer>
-);
-
-const FooterMain = () => (
-  <footer className="footer">
-    <div className="container">
-      <div className="py-5 text-center lg:text-left border-top">
-        <div className="row">
-          <div className="lg:col-auto lg:text-right lg:order-last">
-            <div className="row justify-center">
-              <div className="col-auto">
-                ©
-                <a href="https://codecalm.net" className="link-muted" target="_blank" rel="noopener noreferrer">
-                  codecalm.net
-                </a>
-              </div>
-              <div className="col-auto">
-                <div className="list-inline-dots">
-                  <Link href="/terms-of-service" className="link-muted" prefetch={false}>
-                    Terms of service
-                  </Link>
-                  <Link href="/privacy-policy" className="link-muted" prefetch={false}>
-                    Privacy policy
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="lg:col">
-            Made with <Icon name="heart" color="red" filled /> in Poland.
-          </div>
-        </div>
-      </div>
-    </div>
-  </footer>
-);
-
-export default function Footer() {
-  return (
-    <>
-      <FooterMenu />
-      <FooterMain />
-    </>
-  );
-}

site/components/layout/GoToTop.tsx

@@ -1,37 +0,0 @@
-import clsx from 'clsx';
-import Icon from '@/components/Icon';
-import { useEffect, useState } from 'react';
-
-export default function GoToTop() {
-  const [goToTopVisible, setGoToTopVisible] = useState(false);
-
-  const pop = () => {
-    setGoToTopVisible(window.pageYOffset > window.innerHeight / 2);
-  };
-
-  const scrollToTop = e => {
-    window.scroll({
-      top: 0,
-      behavior: 'smooth'
-    });
-
-    e.preventDefault();
-    return false;
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', pop);
-
-    return () => window.removeEventListener('scroll', pop);
-  }, []);
-
-  return (
-    <button
-      className={clsx('go-to-top', goToTopVisible && 'go-to-top-visible')}
-      aria-label="Go to top"
-      onClick={scrollToTop}
-    >
-      <Icon name="chevron-up" />
-    </button>
-  );
-}

site/components/layout/Header.tsx

@@ -1,309 +0,0 @@
-'use client';
-
-import { Fragment, MutableRefObject, PropsWithChildren, RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { Dialog, Popover } from '@headlessui/react';
-import clsx from 'clsx';
-
-import { banner, blogEnabled, componentsRounded, iconsCountRounded, sponsorsUrl, uiGithubUrl } from '@/config/site';
-import Icon from '@/components/Icon';
-import GoToTop from '@/components/layout/GoToTop';
-import Link from '@/components/Link';
-import NavLink from '@/components/NavLink';
-import Shape from '@/components/Shape';
-import { usePathname } from 'next/navigation';
-
-const NavDropdown = ({ title, children, active, footer = false }) => {
-  return (
-    <Popover className="navbar-dropdown">
-      {({ open }) => (
-        <>
-          <Popover.Button className={clsx('navbar-link', active && 'active')}>{title}</Popover.Button>
-          <Popover.Panel className="navbar-dropdown-menu">
-            <div className="navbar-dropdown-menu-content">{children}</div>
-            {footer && <div className="navbar-dropdown-menu-footer">{footer}</div>}
-          </Popover.Panel>
-        </>
-      )}
-    </Popover>
-  );
-};
-
-const menuLinks = [
-  {
-    title: 'UI Kit',
-    menu: 'ui',
-    children: [
-      {
-        icon: 'home',
-        href: '/',
-        title: 'About',
-        description: 'Develop beautiful web apps with Tabler',
-      },
-      {
-        icon: 'layout-dashboard',
-        href: '/preview',
-        title: 'Preview template',
-        description: 'See what Tabler looks like and offers',
-      },
-      {
-        icon: 'script',
-        href: '/docs',
-        title: 'Documentation',
-        description: 'Read how to develop apps with Tabler',
-      },
-      {
-        icon: 'lego',
-        href: '/features',
-        title: 'Features',
-        description: 'See what kind of features you can find here',
-      },
-      {
-        icon: 'lifebuoy',
-        href: '/support',
-        title: 'Support',
-        description: 'Write to us if you need anything!',
-      },
-      {
-        icon: 'brand-github',
-        href: uiGithubUrl,
-        title: 'Source code',
-        description: 'View Tabler\'s source code ',
-        props: {
-          target: '_blank',
-          rel: 'nofollow',
-        },
-      },
-    ],
-  },
-  {
-    href: '/emails',
-    menu: 'emails',
-    title: 'Email templates',
-  },
-  {
-    href: '/icons',
-    menu: 'icons',
-    title: (
-      <>
-        <span className="d-none lg:d-inline">Over {iconsCountRounded} </span>
-        Icons
-      </>
-    ),
-  },
-  ...(blogEnabled ? [{
-    href: '/blog',
-    menu: 'blog',
-    title: <>Blog</>,
-  }] : []),
-  {
-    href: '/docs',
-    menu: 'docs',
-    title: 'Documentation',
-  },
-  // {
-  //   href: '/guides',
-  //   menu: 'guides',
-  //   title: 'Guides',
-  // },
-  {
-    menu: 'sponsors',
-    href: sponsorsUrl,
-    type: 'button',
-    title: (
-      <span>
-        Sponsor<span className="d-none lg:d-inline"> project</span>
-      </span>
-    ),
-    icon: <Icon name="heart" filled color="red" />,
-  },
-];
-
-const NavbarLink = (link, menu) => {
-  // const router = useRouter()
-
-  if (link.type === 'button') {
-    return (
-      <div className="navbar-item">
-        <a href={link.href} className="btn" target="_blank" rel="noopener noreferrer">
-          {link.icon}
-          {link.title}
-        </a>
-      </div>
-    );
-  } else if (link.children) {
-    return (
-      <NavDropdown title={link.title} active={menu === link.menu}>
-        {link.children.map((link) => (
-          <Popover.Button as={Link} href={link.href || ''} className="navbar-dropdown-menu-link" key={link.title} onClick={() => true} {...link.props}>
-            <div className="row g-3">
-              <div className="col-auto">
-                <Shape icon={link.icon} />
-              </div>
-              <div className="col">
-                <h5 className="mb-1">{link.title}</h5>
-                <p className="font-h6 m-0 text-muted">{link.description}</p>
-              </div>
-            </div>
-          </Popover.Button>
-        ))}
-      </NavDropdown>
-    );
-  }
-
-  return (
-    // router.pathname.replace(/^\//, '').startsWith(link.menu)
-    <NavLink href={link.href} className="navbar-link" active={false}>
-      {link.title}
-    </NavLink>
-  );
-};
-
-const SidebarLink = (link, menu, onClick) => {
-  if (link.type === 'button') {
-    return (
-      <div className="aside-menu-item mt-4">
-        <a href={link.href} className="btn btn-block" target="_blank" rel="noopener noreferrer" onClick={onClick}>
-          {link.icon}
-          {link.title}
-        </a>
-      </div>
-    );
-  } else if (link.children) {
-    return (
-      <div className="aside-menu-item">
-        <div className={clsx('aside-menu-title', { active: menu === link.menu })}>{link.title}</div>
-        <div className="aside-menu-children">
-          {link.children.map((link) => (
-            <Link href={link.href || ''} key={link.title} className="aside-menu-link" onClick={onClick} {...link.props}>
-              {link.title}
-            </Link>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <Link href={link.href} className={clsx('aside-menu-link', { active: menu === link.menu })} onClick={onClick}>
-      {link.title}
-    </Link>
-  );
-};
-
-const Navbar = ({ menu, opened, onClick, ...props }: { menu?: string; opened?: boolean; onClick?: (event: React.MouseEvent) => void; className?: string }) => {
-  return <div className={clsx('navbar', opened && 'opened', props.className)}>{menuLinks.map((link) => (<Fragment key={link.menu}>{NavbarLink(link, menu)}</Fragment>))}</div>;
-};
-
-const Banner = () => {
-  const [showBanner, setShowBanner] = useState(false);
-
-  useEffect(() => {
-    if (window.localStorage.getItem(`banner-${banner.id}`) !== '1') {
-      setShowBanner(true);
-    }
-  }, []);
-
-  function closeBanner() {
-    localStorage.setItem(`banner-${banner.id}`, '1');
-    setShowBanner(false);
-  }
-
-  return (
-    banner.show &&
-    showBanner && (
-      <div className="banner">
-        <div className="container">
-          <div className="text-truncate">{banner.text}</div>
-          <a href={banner.link.href} className="ml-5 banner-link" target="_blank">
-            {banner.link.text}
-          </a>
-        </div>
-
-        <a onClick={closeBanner} className="banner-close">
-          <Icon name="x" />
-        </a>
-      </div>
-    )
-  );
-};
-
-export default function Header({ headerStatic, className, pageProps, ...props }: { headerStatic?: boolean; className?: string; pageProps?: any }) {
-  const [sticky, setSticky] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const pathname = usePathname();
-
-  function closeModal() {
-    setIsOpen(false);
-  }
-
-  function toggleModal() {
-    setIsOpen(!isOpen);
-  }
-
-  useEffect(() => {
-    const handleScroll = () => {
-      setSticky(window.pageYOffset > 0);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    handleScroll();
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, []);
-
-  return (
-    <>
-      <Banner />
-      <header
-        className={clsx(
-          'header',
-          sticky && 'header-sticky',
-          pathname.startsWith('/docs') && 'header-docs',
-          className,
-        )}
-      >
-        <div className="container">
-          <nav className="row items-center">
-            <div className="col-auto">
-              <Link href="/" className={clsx('logo' /*, pageProps.brand ? `logo-${pageProps.brand}` : ''*/)} aria-label="Tabler" />
-            </div>
-            <div className="col-auto ml-auto">
-              <div className="d-none md:d-block">
-                {/* <Navbar menu={pageProps.menu} /> */}
-                <Navbar />
-              </div>
-
-              <div className="md:d-none">
-                <button
-                  className={clsx('navbar-toggle', {
-                    active: isOpen,
-                  })}
-                  onClick={toggleModal}
-                >
-                  <span />
-                  <span />
-                  <span />
-                  <span />
-                </button>
-              </div>
-            </div>
-          </nav>
-        </div>
-      </header>
-
-      <Dialog open={isOpen} onClose={closeModal} className="modal-backdrop">
-        <Dialog.Panel className="modal modal-side">
-          <div className={clsx('aside-menu mt-4')}>
-            {/* {menuLinks.map((link) => (
-              // <Fragment key={link.menu}>{SidebarLink(link, pageProps.menu, closeModal)}</Fragment>
-            ))} */}
-          </div>
-        </Dialog.Panel>
-      </Dialog>
-
-      <GoToTop />
-    </>
-  );
-}

site/components/layout/News.tsx

@@ -1,57 +0,0 @@
-import Link from '@/components/Link';
-import tinytime from 'tinytime';
-import CTABannerEmails from '@/components/CTABAnnerEmails';
-
-export default function News() {
-  const changelogs = [];
-  const dateTemplate = tinytime('{MM} {DD}, {YYYY}');
-
-  return (
-    <section className="section section-light">
-      <div className="container">
-        <div className="section-header">
-          <h2 className="section-title">Refreshing posts from our blog</h2>
-        </div>
-
-        <div className="row xl:g-5">
-          {/* {changelogs.map(({ slug, module: { default: Component, meta } }, i) => (
-            <div className="col-12 md:col-6 lg:col-4" key={i} data-aos="zoom-y-out" data-aos-delay={i * 150}>
-              <Link href={`/changelog/${slug}`} className="d-block text-reset">
-                <div
-                  className="ratio-16x9 mb-4 border-light rounded-lg"
-                  style={{
-                    backgroundColor: '#fff',
-                    backgroundImage: meta?.image && `url(/img/changelog/${meta.image})`
-                  }}
-                />
-                <h3 className="mb-2">{meta?.title}</h3>
-                <p className="text-muted">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                  dolore magna aliqua.
-                </p>
-                <div className="row g-3 items-center">
-                  <div className="col-auto">
-                    <div
-                      className="avatar"
-                      style={{
-                        backgroundImage: `url(/img/authors/codecalm.jpg)`
-                      }}
-                    />
-                  </div>
-                  <div className="col">
-                    Paweł Kuna
-                    <span className="text-muted"> - {dateTemplate.render(new Date(meta?.date.replace(' ', 'T')))}</span>
-                  </div>
-                </div>
-              </Link>
-            </div>
-          ))} */}
-        </div>
-
-        <div className="mt-7">
-          <CTABannerEmails />
-        </div>
-      </div>
-    </section>
-  );
-}

site/components/layout/Testimonials.tsx

@@ -1,61 +0,0 @@
-import Image from 'next/image';
-import testimonials from '@/data/testimonials.json';
-import clsx from 'clsx';
-
-import TestimonialsShare from './TestimonialsShare';
-
-export default function Testimonials({ limit = 0 }) {
-  let testimonialsList = testimonials;
-
-  if (limit) {
-    testimonialsList = testimonials.slice(0, limit);
-  }
-
-  return (
-    <>
-      <div className="row" data-aos-id-blocks-testimonials>
-        {testimonialsList.map((column, id) => (
-          <div
-            className={clsx('col-12 sm:col', id === 2 && 'd-none lg:d-block')}
-            key={id}
-          >
-            {column.map((testimonial, id2) => (
-              <a
-                href={testimonial.url}
-                className="testimonial"
-                target="_blank"
-                rel="noopener noreferrer"
-                key={id2}
-                data-aos="fade-up"
-                data-aos-anchor="[data-aos-id-blocks-testimonials]"
-                data-aos-delay={id2 * 150 + id * 50}
-              >
-                <div className="row g-3 items-center">
-                  <div className="col-auto">
-                    <Image
-                      className="avatar avatar-lg d-block"
-                      src={`/img/testimonials/${testimonial.avatar}`}
-                      width={48}
-                      height={48}
-                      alt={testimonial.name}
-                    />
-                  </div>
-                  <div className="col">
-                    <div className="font-bold">{testimonial.name}</div>
-                    <div className="text-muted">{testimonial.job}</div>
-                  </div>
-                </div>
-
-                <div className="mt-3">{testimonial.description}</div>
-              </a>
-            ))}
-          </div>
-        ))}
-      </div>
-
-      <div className="mt-5">
-        <TestimonialsShare />
-      </div>
-    </>
-  );
-}

site/components/layout/TestimonialsShare.tsx

@@ -1,17 +0,0 @@
-import { escapeHtml, uiUrl } from '@/config/site';
-import Icon from '@/components/Icon';
-
-export default function TestimonialsShare() {
-   const twitterUrl = `https://twitter.com/intent/tweet?url=${escapeHtml(
-      uiUrl
-   )}&via=codecalm&text=Tabler+-+Premium+dashboard+template+with+responsive+and+high+quality+UI`;
-
-   return <>
-      <div className="text-center mt-2">
-         <a href={twitterUrl} className="btn btn-lg" target="_blank" rel="noopener noreferrer">
-            <Icon name="heart" className="text-red" />
-            Share the love with us!
-         </a>
-      </div>
-   </>;
-}

site/components/layout/Title.tsx

@@ -1,71 +0,0 @@
-import Head from 'next/head';
-import { uiUrl } from '@/config/site';
-import { useRouter } from 'next/router';
-
-export default function Title({ meta = {
-  title: '',
-  image: '',
-  description: '',
-}}) {
-  const router = useRouter(),
-    path = router.pathname;
-
-  let section = '';
-
-  if (path.match(/\/docs/)) {
-    section = 'Documentation';
-  }
-
-  const title = meta.title
-    ? `${meta.title} - ${section ? `${section} - ` : ''}Tabler`
-    : 'Tabler: Premium dashboard template with responsive and high quality UI';
-
-  const image = `${meta.image ? meta.image : `${uiUrl}/img/tabler/og.png?2`}`;
-
-  const description = meta.description
-    ? meta.description
-    : 'Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!';
-
-  const canonical = `${uiUrl}${(path === '/' ? '' : path).split('?')[0]}`;
-
-  return (
-    <Head>
-      <link rel="canonical" href={canonical} />
-
-      <title key="title">{title}</title>
-      <meta key="og:type" property="og:type" content="website" />
-      <meta key="og:url" property="og:url" content={canonical} />
-      <meta key="og:title" property="og:title" content={title} />
-      <meta key="twitter:title" name="twitter:title" content={title} />
-
-      <meta key="description" name="description" content={description} />
-      <meta key="og:description" property="og:description" content={description} />
-
-      <meta key="og:image" property="og:image" content={`${image}`} />
-      <meta key="twitter:image" name="twitter:image" content={`${image}`} />
-
-      <meta key="og:image:width" property="og:image:width" content="1200" />
-      <meta key="og:image:height" property="og:image:height" content="630" />
-
-      <meta key="twitter:card" name="twitter:card" content="summary_large_image" />
-      <meta key="twitter:site" name="twitter:site" content="@codecalm" />
-      <meta key="twitter:creator" name="twitter:creator" content="@codecalm" />
-
-      <link rel="preconnect" href="https://rsms.me/" />
-      <link rel="preconnect" href="https://vitals.vercel-insights.com/" />
-
-      <link rel="shortcut icon" href="/favicon.ico" />
-      <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
-      <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
-      <link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png" />
-      <link rel="manifest" href="/favicons/manifest.json" />
-      <meta name="theme-color" content="#fff" />
-      <meta name="application-name" content="tabler" />
-      <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png" />
-      <meta name="msapplication-TileColor" content="#206bc4" />
-
-      <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
-      <meta httpEquiv="pragma" content="no-cache" />
-    </Head>
-  );
-}

site/components/layout/hero/Icons.tsx

@@ -1,41 +0,0 @@
-import Icon from '@/components/Icon';
-import { escapeHtml, iconsCountRounded, iconsUrl } from '@/config/site';
-
-const twitterUrl = `https://twitter.com/intent/tweet?url=${escapeHtml(
-  iconsUrl
-)}&via=codecalm&text=Over%20${iconsCountRounded}%20free%20and%20open%20source%20icons%20for%20web%20design%3A%20Tabler%20Icons&hashtags=opensource,icons,iconfont,freebie`;
-
-const fbUrl = `https://www.facebook.com/sharer/sharer.php?u=${escapeHtml(iconsUrl)}`;
-
-export default function LayoutHeroIcons() {
-  return (
-    <div>
-      <header className="hero pb-8">
-        <div className="container">
-          <h1 className="hero-title">Over {iconsCountRounded} pixel-perfect icons for web design</h1>
-          <p className="hero-description mt-4">
-            Free and open source icons designed to make your website or app attractive, visually consistent and simply
-            beautiful.
-          </p>
-
-          <div className="mt-5">
-            <div className="row g-3 justify-center">
-              <div className="col-auto">
-                <a href={twitterUrl} className="btn btn-twitter" target="_blank" rel="noopener noreferrer">
-                  <Icon name="brand-twitter" />
-                  Tweet me
-                </a>
-              </div>
-              <div className="col-auto">
-                <a href={fbUrl} className="btn btn-facebook" target="_blank" rel="noopener noreferrer">
-                  <Icon name="brand-facebook" />
-                  Share me
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-    </div>
-  );
-}

site/components/layout/hero/Ui.tsx

@@ -1,42 +0,0 @@
-import Browser from '@/components/Browser';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import { uiDownloadUrl } from '@/config/site';
-import React from 'react';
-
-export default function LayoutHeroUi() {
-  return (
-    <>
-      <header className="hero pt-10 pb-0 bg-gradient">
-        <div className="container">
-          <h1 className="hero-title" data-aos="zoom-y-out">
-            Develop beautiful web apps with&nbsp;Tabler
-          </h1>
-          <p className="hero-description mt-4" data-aos="zoom-y-out" data-aos-delay="150">
-            Tabler is a free and open source web application UI kit based on Bootstrap&nbsp;5, with hundreds responsive components and multiple layouts.
-          </p>
-
-          <div className="mt-5" data-aos="zoom-y-out" data-aos-delay="300">
-            <div className="row g-3 justify-center">
-              <div className="col-auto">
-                <a href={uiDownloadUrl} className="btn btn-lg btn-primary lemonsqueezy-button">
-                  Download template
-                </a>
-              </div>
-              <div className="col-auto">
-                <a href="/preview" className="btn btn-lg" target="_blank" rel="noopener noreferrer">
-                  Preview template
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div className="hero-img img-overlap-margin" data-aos="zoom-y-out" data-aos-delay="450">
-            <Browser>
-              <ResponsiveImage src="/img/tabler/preview.png" width={1080} height={760} priority />
-            </Browser>
-          </div>
-        </div>
-      </header>
-    </>
-  );
-}

site/components/layout/hero/UiComponents.tsx

@@ -1,43 +0,0 @@
-import { componentsCount, componentsRounded, emailsCount, emailsPrice } from '@/config/site';
-import Svg from '@/components/Svg';
-import Link from '@/components/Link';
-import ResponsiveImage from '@/components/ResponsiveImage';
-
-export default function LayoutHeroUiComponents() {
-  return (
-    <header className="hero pb-8">
-      <div className="container">
-        <div className="row items-center">
-          <div className="col text-left" data-aos="fade-up">
-            <div className="hero-subheader">Tabler Components</div>
-            <h1 className="hero-title">{componentsRounded}+ responsive components built with Tabler</h1>
-            <p className="hero-description mt-4">
-              Build your next website even faster with premade responsive components designed and built by Tabler
-              maintainers and community. All components are free forever for everyone.
-            </p>
-
-            <div className="mt-7">
-              <div className="row g-3">
-                <div className="col-auto">
-                  <a href="#" className="btn btn-lg btn-primary">
-                    Buy now for ${emailsPrice}
-                  </a>
-                </div>
-                <div className="col-auto">
-                  <Link href="/emails/gallery" className="btn btn-lg">
-                    Browse gallery
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="col" data-aos="fade-up">
-            <div className="hero-img-side pl-5">
-              <ResponsiveImage src="/img/components/hero.png" class="hero-image" width="552" height="420" alt="" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}

site/components/layout/hero/UiEmails.tsx

@@ -1,55 +0,0 @@
-'use client';
-
-import { emailsCount, emailsDownloadUrl, emailsPrice } from '@/config/site';
-import Link from '@/components/Link';
-import Slider from '@/components/Slider';
-import ResponsiveImage from '@/components/ResponsiveImage';
-
-export default function LayoutHeroUiEmails() {
-  return (
-    <header className="hero pb-8">
-      <div className="container">
-        <div className="row items-center">
-          <div className="md:col-6 text-center md:text-left" data-aos="fade-up">
-            <div className="hero-subheader">Tabler Emails</div>
-            <h1 className="hero-title">Better email communication, less effort.</h1>
-            <p className="hero-description mt-4">{emailsCount} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.</p>
-
-            <div className="mt-6 lg:mt-7">
-              <div className="row justify-center md:justify-start">
-                <div className="col-auto">
-                  <a href={emailsDownloadUrl} className="btn btn-lg btn-primary lemonsqueezy-button">
-                    Buy for ${emailsPrice}
-                  </a>
-                </div>
-                <div className="col-auto">
-                  <Link href="/emails/gallery" className="btn btn-lg">
-                    Browse gallery
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="md:col-6" data-aos="fade-up">
-            <div className="lg:my-n6">
-              <div className="hero-img-side">
-                <Slider
-                  style={{
-                    background: 'url(/img/emails/hero-bg.svg) no-repeat center/contain',
-                  }}
-                  slides={[
-                    <ResponsiveImage src="/img/emails/hero-5.png" className="mx-auto" width="604" height="590" alt="" key="hero-1" priority />,
-                    <ResponsiveImage src="/img/emails/hero-1.png" className="mx-auto" width="604" height="590" alt="" key="hero-2" />,
-                    <ResponsiveImage src="/img/emails/hero-2.png" className="mx-auto" width="604" height="590" alt="" key="hero-3" />,
-                    <ResponsiveImage src="/img/emails/hero-3.png" className="mx-auto" width="604" height="590" alt="" key="hero-4" />,
-                    <ResponsiveImage src="/img/emails/hero-4.png" className="mx-auto" width="604" height="590" alt="" key="hero-5" />,
-                  ]}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}

site/components/layout/hero/UiIcons.tsx

@@ -1,89 +0,0 @@
-import { iconsCount, iconsGithubUrl, iconsUrl } from '@/config/site';
-import ResponsiveImage from '@/components/ResponsiveImage';
-import Icon from '@/components/Icon';
-import React from 'react';
-import Slider from '@/components/Slider';
-
-export default function LayoutHeroUiIcons() {
-  return (
-    <header className="hero">
-      <div className="container">
-        <div className="row items-center xl:g-6">
-          <div className="md:col-6 md:text-left" data-aos="fade-up">
-            <div className="hero-subheader">Tabler Icons</div>
-            <h1 className="hero-title">Pixel-perfect icons that match your design</h1>
-            <p className="hero-description mt-4">
-              {iconsCount} free, open source icons designed to make your website or app attractive, visually
-              consistent and simply beautiful.
-            </p>
-            <div className="mt-5 lg:mt-7">
-              <div className="row justify-center md:justify-start g-3">
-                <div className="col-auto">
-                  <a href={iconsUrl} className="btn btn-lg btn-primary" target="_blank">
-                    <Icon name="search" /> Browse icons
-                  </a>
-                </div>
-                <div className="col-auto">
-                  <a href={iconsGithubUrl} className="btn btn-lg" target="_blank" rel="noopener noreferrer">
-                    See on GitHub
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="md:col-6 md:order-first" data-aos="fade-up">
-            <div className="hero-img-side">
-              <Slider
-                style={{
-                  background: 'url(/img/icons/hero-bg.svg) no-repeat center/contain'
-                }}
-                slides={[
-                  <ResponsiveImage
-                    src="/img/icons/hero-1.png"
-                    className="mx-auto"
-                    width="552"
-                    height="420"
-                    alt=""
-                    key="hero-1"
-                  />,
-                  <ResponsiveImage
-                    src="/img/icons/hero-2.png"
-                    className="mx-auto"
-                    width="552"
-                    height="420"
-                    alt=""
-                    key="hero-2"
-                  />,
-                  <ResponsiveImage
-                    src="/img/icons/hero-3.png"
-                    className="mx-auto"
-                    width="552"
-                    height="420"
-                    alt=""
-                    key="hero-3"
-                  />,
-                  <ResponsiveImage
-                    src="/img/icons/hero-4.png"
-                    className="mx-auto"
-                    width="552"
-                    height="420"
-                    alt=""
-                    key="hero-4"
-                  />,
-                  <ResponsiveImage
-                    src="/img/icons/hero-5.png"
-                    className="mx-auto"
-                    width="552"
-                    height="420"
-                    alt=""
-                    key="hero-5"
-                  />
-                ]}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-}

site/components/mdx/Callout.tsx

@@ -1,8 +0,0 @@
-export default function Callout({ children, title = 'Important' }) {
-  return (
-    <div className="callout">
-      <div className="callout-title">{title}</div>
-      {children}
-    </div>
-  );
-}

site/components/mdx/Cards.tsx

@@ -1,36 +0,0 @@
-import Link from '@/components/Link';
-import Icon from '@/components/Icon';
-
-export function Cards({ children, ...props }) {
-  return <div className="cards">{children}</div>;
-}
-
-export function Card({ children, title, icon, href, ...props }) {
-  let Component: typeof Link | string = Link;
-
-  if (!href) {
-    Component = 'div';
-  }
-
-  return (
-    <Component className="card" href={href}>
-      <div className="card-body">
-        <div className="row items-center">
-          <div className="col">
-            {icon && <Icon name={icon} className="card-icon" />}
-            {title && <div className="card-title">{title}</div>}
-            {children}
-          </div>
-
-          {href && (
-            <div className="col-auto">
-              <div className="card-chevron">
-                <Icon name="chevron-right" />
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </Component>
-  );
-}

site/components/mdx/Code.tsx

@@ -1,25 +0,0 @@
-import Example from '@/components/Example';
-import CodeBlock from '@/components/CodeBlock';
-import { iconsVersion, uiCdnUrl } from '@/config/site';
-
-export function Code({ children, ...props }) {
-  return <code {...props}>{children}</code>;
-}
-
-export function Pre({ children, ...props }) {
-  const language = (children.props.className || '').replace(/^language-/, ''),
-    html = ([...children.props.children].join('') || '')
-      .replace(/\$TABLER_CDN/g, uiCdnUrl)
-      .replace(/\$ICONS_VERSION/g, iconsVersion);
-
-  if (props.example) {
-    return (
-      <>
-        <Example html={html} {...props} />
-        {props.code && <CodeBlock html={html} language={language} hideLinks />}
-      </>
-    );
-  }
-
-  return <CodeBlock html={html} language={language} />;
-}

site/components/mdx/ColorsTable.tsx

@@ -1,38 +0,0 @@
-import { colors } from '@/config/tabler';
-
-type Color = {
-  name: string
-  value: string
-  variable?: string
-}
-
-export default function ColorsTable({ name }: { name: string }) {
-  if (!colors[name]) {
-    return null;
-  }
-
-  return (
-    <div className="colors-table mt-5 mb-6">
-      <div className="row">
-        {colors[name].map((color: Color, i: number) => (
-          <div className="col-3" key={i}>
-            <div className="row g-3 items-center">
-              <div className="col-auto">
-                <div className="avatar avatar-lg" style={{ backgroundColor: color.value }}></div>
-              </div>
-              <div className="col">
-                <div className="font-bold">{color.name}</div>
-                <div>
-                  <code>{color.value}</code>
-                </div>
-              </div>
-              {/*<div className="col-auto">*/}
-              {/*  <code>{color.variable}</code>*/}
-              {/*</div>*/}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

site/components/mdx/EmailsCount.tsx

@@ -1,5 +0,0 @@
-import { emailsCount } from '@/config/site';
-
-export default function EmailsCount() {
-  return emailsCount;
-}

site/components/mdx/FlagsTable.tsx

@@ -1,36 +0,0 @@
-import { flags } from '@/config/tabler';
-import { uiCdnUrl } from '@/config/site';
-
-type Flag = {
-  flag: string
-  name: string
-}
-
-export default function FlagsTable () {
-
-  return (
-    <table className="table">
-      <tbody>
-        {flags.map((flag: Flag) => (
-          <tr key={flag.flag}>
-            <td>
-              <img
-                src={`${uiCdnUrl}/dist/img/flags/${flag.flag}.svg`}
-                height="40"
-                alt={flag.name}
-                className="rounded border"
-              />
-            </td>
-            <td className="d-none lg:d-table-cell">{flag.name}</td>
-            <td>
-              <code>{flag.flag}</code>
-            </td>
-            <td className="d-none lg:d-table-cell">
-              <code>.flag-country-{flag.flag}</code>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}

site/components/mdx/GuideImage.tsx

@@ -1,17 +0,0 @@
-import ResponsiveImage from '@/components/ResponsiveImage';
-import clsx from 'clsx';
-
-export default function GuideImage({ src, width, height, description, float }) {
-  return (
-    <figure className={clsx('guide-image', { [`guide-image-${float}`]: float })}>
-      <ResponsiveImage
-        src={src}
-        width={width}
-        height={height}
-        alt={description}
-        className="rounded bg-white shadow-card"
-      />
-      {description && <figcaption>{description}</figcaption>}
-    </figure>
-  );
-}

site/components/mdx/IconsCount.tsx

@@ -1,9 +0,0 @@
-import { iconsCount, iconsCountRounded } from '@/config/site';
-
-export default function IconsCount({ rounded = false }) {
-  if (rounded) {
-    return iconsCountRounded;
-  }
-
-  return iconsCount;
-}

site/components/mdx/Image.tsx

@@ -1,8 +0,0 @@
-export default function Image(props) {
-  return (
-    <figure>
-      <img className={'border rounded'} alt="" {...props} />
-      <figcaption>{props.alt}</figcaption>
-    </figure>
-  );
-}

site/components/mdx/OptionsTable.tsx

@@ -1,25 +0,0 @@
-import { FC, ReactNode } from 'react';
-
-
-
-
-
-export function OptionsTable({ children }) {
-  return (
-    <div className="options-table">
-      {children}
-    </div>
-  );
-}
-
-export function OptionTitle({ children }) {
-  return (
-    <div className="options-table-title not-markdown">
-      {children}
-    </div>
-  );
-}
-
-export function OptionDescription({ children }) {
-  return <div className="options-table-description">{children}</div>;
-}

site/components/mdx/PaymentsTable.tsx

@@ -1,38 +0,0 @@
-import { payments } from '@/config/tabler';
-import { uiCdnUrl } from '@/config/site';
-
-export default function PaymentsTable() {
-  return (
-    <table className="table">
-      <tbody>
-        {payments.map((payment) => (
-          <tr key={payment.logo}>
-            <td>
-              <img
-                src={`${uiCdnUrl}/dist/img/payments/${payment.logo}.svg`}
-                height="40"
-                alt={payment.name}
-                className="rounded border"
-              />
-            </td>
-            <td className="d-none lg:d-table-cell">
-              <img
-                src={`${uiCdnUrl}/dist/img/payments/${payment.logo}-dark.svg`}
-                height="40"
-                alt={payment.name}
-                className="rounded border"
-              />
-            </td>
-            <td className="d-none lg:d-table-cell">{payment.name}</td>
-            <td>
-              <code>{payment.logo}</code>
-            </td>
-            <td className="d-none lg:d-table-cell">
-              <code>.payment-provider-{payment.logo}</code>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  );
-}