Tailwind CSS Pricing Pages

All Blocks
Marketing
Pricing Pages

Pricing Pages

Browse Preline UI pricing page examples. Enhance your project and convert users into paying clients with our diverse, eye-catching designs!

Pricing Page with Comparison Table and FAQ Free

The page stacks a pricing hero, plan cards, billing toggle, comparison table, FAQ, and closing CTA sections.

Create a responsive UI block named "Pricing Page with Comparison Table and FAQ" that visually and behaviorally matches the Preline source block. Use the destination project's existing framework, Tailwind setup, semantic tokens, component primitives, icon system, routing/link conventions, and dark-mode strategy.

Implementation preflight:
- Exact public block reference: https://preline.co/blocks/marketing/pricing-pages/#pricing-page-with-comparison-table-and-faq. Open this exact anchored block and inspect its Preview and HTML tabs when browsing is available; do not use neighboring examples or surrounding docs chrome as source.
- Before writing code, inspect the destination project's package manifest, Tailwind/theme configuration, global styles, app shell/container conventions, icon system, and existing components. Reuse or compose an existing implementation when it already represents the same source partial or behavior; do not duplicate its markup, state, assets, or interaction logic.
- If neither the public reference nor local source paths are accessible, use only the explicit source-derived details in this prompt. If those details are insufficient, request the source HTML instead of guessing from the block title or category.

Build only this source block. Do not add unrelated page chrome, marketing sections, dashboard widgets, extra cards, extra modals, placeholder states, or footer content unless they are present in the source block.

Source metadata:
- Catalog family: marketing/pricing-pages
- Block ID: pricing-page-with-comparison-table-and-faq
- Source description: The page stacks a pricing hero, plan cards, billing toggle, comparison table, FAQ, and closing CTA sections.
- Preview iframe: https://preline.co/blocks/marketing/pricing-pages/iframes/free/pricing-page-with-comparison-table-and-faq.html (repo path: blocks/marketing/pricing-pages/iframes/free/pricing-page-with-comparison-table-and-faq.html)
- Source markup reference:
  - partials/blocks/sources/pages/page-demos-pricing.html
  - partials/blocks/sources/pages/testimonials-with-small-image.html
  - partials/blocks/sources/pages/faq-right-aligned-with-border-bottom.html
  - partials/blocks/sources/pages/footer-5-cols-with-language-dropdown.html

Use the source HTML tab and referenced partials as the source of truth. Preserve exact visible copy, content order, hierarchy, component density, spacing relationships, borders, radii, icons, status markers, dropdown/menu rows, form states, responsive order, and interaction content. If the source imports shared partials or assets, reuse those local components/assets when the destination can import them; otherwise recreate their visible structure faithfully from the source.

Block-specific fidelity rules:
- Preserve the source marketing hierarchy, first-viewport signal, media subject, CTA order, proof/social elements, visual rhythm, and responsive composition.
- Do not convert distinctive hero/marketing visuals into a generic split card layout or invent decorative media that is not present in the source.
- Source content inventory (from the source markup):
  - Section order top to bottom: navbar header, pricing hero (title, billing switch, four plan cards), client-logo strip, `Compare plans` table, testimonial, FAQ accordion, five-column footer.
  - Hero heading `Simple, transparent pricing` is gradient-clipped text (`bg-clip-text bg-linear-to-r from-primary to-chart-5 text-transparent`) over `Whatever your status, our offers evolve according to your needs.`; the `Monthly` / `Annually` switch below it is a CSS-only peer checkbox that is `checked` on load and does not change any price.
  - Four plan cards: `Free` / `Free` / `Get started with basic features`; `Startup` / `$39` / `All the basics for starting a new business`; `Team` / `$89` / `Everything you need for a growing business`; `Enterprise` / `$149` / `Advanced features for scaling your business`. Only Startup carries the `Most popular` pill and `border-2 border-primary`, and every CTA reads `Get started`.
  - Client strip heading is `Trusted by Open Source, enterprise, and more than 99,000 of you`, followed by four inline monochrome logo SVGs in a `flex justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24` row.
  - The `Compare plans` section uses feature groups `General`, `Financial data`, `On-chain data`, `Social data`, repeats a `Get started` link per plan column, and ends with `Need a custom plan?` beside a `Contact us` button.
  - Testimonial copy: `To say that switching to Preline has been life-changing is an understatement. My business has tripled and I got my life back.` attributed to `Nicole Grazioso`, `Head of Finance`, with a `lg:grid-cols-6` layout whose image column is hidden below `lg`.
  - FAQ is a Preline accordion (`hs-accordion-group divide-y`) with six items in order: `Can I cancel at anytime?`, `My team has credits. How do we use them?`, `How does Preline's pricing work?`, `How secure is Preline?`, `How do I get access to a theme I purchased?`, `Upgrade License Type`; the first is `active` with `aria-expanded="true"` on load and the other five are closed. Heading reads `Frequently` / `asked questions` split by a `<br>`.
  - The mobile nav is Preline HSCollapse: an `hs-collapse-toggle` button with `aria-expanded="false"` and `data-hs-collapse="#hs-navbar-page-demo-pricing"` controlling a region that is `hidden` below `md` and `md:block` above.

Token and Tailwind rules:
- Treat source token classes as semantic roles, not fixed class names to blindly copy.
- Map every source `primary` role to the destination project's current primary token/config/CSS variable. Active links, checked states, progress lines, focus rings, primary gradients, logo primary fills/strokes, and primary buttons must share that destination primary color.
- Do not hardcode Preline blue or emit `text-blue-*`, `bg-blue-*`, `border-blue-*`, `fill-blue-*`, `stroke-blue-*`, `from-blue-*`, `via-blue-*`, `to-blue-*`, or fixed blue hex/rgb values for primary roles unless the destination primary is explicitly blue.
- Before using source-only token classes such as `text-foreground-inverse`, `bg-layer`, `border-layer-line`, `bg-navbar`, `border-line-2`, `bg-dropdown`, or similar Preline tokens, inspect the destination Tailwind config, global CSS/theme variables, and existing components for an equivalent utility/token.
- Prefer existing destination utilities such as `text-white`, `text-primary-foreground`, `text-foreground`, `text-muted-foreground`, `bg-background`, `bg-card`, `bg-popover`, `border-border`, `bg-muted`, `bg-accent`, `ring-ring`, or app-specific tokens when they match the source role.
- If no equivalent exists, add the smallest project-appropriate token or utility before using it. Do not leave undefined source classes in the generated markup.

Asset and icon rules:
- Use exact source images, avatars, product media, branded SVGs, payment marks, channel logos, and app icons when the source provides them.
- Do not replace source assets with initials, emojis, generic icons, generated placeholders, or different stock media.
- Ordinary interface icons should match the destination icon system. If the project uses Lucide-style outline icons, keep the 24 viewBox, `fill="none"`, `stroke="currentColor"`, rounded caps/joins, and source stroke widths.
- Brand/source SVG shape is fixed content. Only map semantic colors such as primary fill/stroke to the destination token.

Behavior and accessibility:
- Preserve source interactions: links, buttons, dropdowns, tooltips, tabs, menus, drawers, modals, toggles, search, filters, form controls, validation states, loading/empty states, and open/closed defaults.
- For source behavior powered by Preline JS or a third-party package, inspect installed dependencies and existing primitives first. Reuse a destination primitive only when it can preserve the source geometry, states, accessibility, and behavior.
- Treat new dependencies as allowed by default unless the user, repository instructions, or package policy explicitly prohibit them. When no faithful equivalent exists, install/use the Preline UI runtime/plugin or the exact source third-party package; do not silently substitute ad hoc JavaScript or custom React state.
- Only under an explicit dependency prohibition may you implement a scoped framework-native equivalent. It must preserve keyboard and focus management, placement and layering, responsive behavior, and accessibility; static or simplified approximations are not acceptable.
- Use semantic HTML and accessible names. Keep `aria-current`, `aria-expanded`, `aria-haspopup`, `role`, labels, focus states, and keyboard behavior when the source exposes them or the destination primitive requires them.
- Desktop and mobile states must not overlap text, clip controls, or shift layout unexpectedly. Controls with icons, counters, badges, and labels should keep stable dimensions across hover/focus/active states.

Final QA:
- Compare the result against the source preview and HTML tab.
- Verify primary color follows the destination project, not Preline's default blue.
- Verify all emitted classes exist in the destination or are added deliberately.
- Verify responsive layout, focus states, dropdown/popover layering, long-text truncation, and source asset paths.
- Keep the final implementation scoped to this block and avoid unrelated refactors.

<main id="content">
  <div class="overflow-hidden">
    
    <header class="flex flex-wrap md:justify-start md:flex-nowrap z-50 w-full text-sm py-3 md:py-0">
      <nav class="max-w-340 w-full mx-auto px-4 md:px-6 lg:px-8">
        <div class="relative md:flex md:items-center md:justify-between">
          <div class="flex items-center justify-between">
            <a class="flex-none focus:outline-hidden focus:opacity-80" href="#">
              <svg class="w-28 h-auto" width="116" height="32" viewBox="0 0 116 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M33.5696 30.2968V10.7968H37.4474V13.1789H37.6229C37.7952 12.7972 38.0445 12.4094 38.3707 12.0155C38.7031 11.6154 39.134 11.283 39.6634 11.0183C40.1989 10.7475 40.8636 10.6121 41.6577 10.6121C42.6918 10.6121 43.6458 10.8829 44.5199 11.4246C45.3939 11.9601 46.0926 12.7695 46.6158 13.8529C47.139 14.93 47.4006 16.2811 47.4006 17.9061C47.4006 19.488 47.1451 20.8237 46.6342 21.9132C46.1295 22.9966 45.4401 23.8183 44.5661 24.3784C43.6982 24.9324 42.7256 25.2094 41.6484 25.2094C40.8852 25.2094 40.2358 25.0832 39.7003 24.8308C39.1709 24.5785 38.737 24.2615 38.3984 23.8799C38.0599 23.4921 37.8014 23.1012 37.6229 22.7073H37.5028V30.2968H33.5696ZM37.4197 17.8877C37.4197 18.7309 37.5367 19.4665 37.7706 20.0943C38.0045 20.7222 38.343 21.2115 38.7862 21.5624C39.2294 21.9071 39.768 22.0794 40.402 22.0794C41.0421 22.0794 41.5838 21.904 42.027 21.5532C42.4702 21.1961 42.8056 20.7037 43.0334 20.0759C43.2673 19.4419 43.3842 18.7125 43.3842 17.8877C43.3842 17.069 43.2704 16.3488 43.0426 15.7272C42.8149 15.1055 42.4794 14.6192 42.0362 14.2683C41.593 13.9175 41.0483 13.7421 40.402 13.7421C39.7618 13.7421 39.2202 13.9113 38.777 14.2499C38.34 14.5884 38.0045 15.0685 37.7706 15.6902C37.5367 16.3119 37.4197 17.0444 37.4197 17.8877ZM49.2427 24.9786V10.7968H53.0559V13.2712H53.2037C53.4622 12.391 53.8961 11.7262 54.5055 11.2769C55.1149 10.8214 55.8166 10.5936 56.6106 10.5936C56.8076 10.5936 57.02 10.6059 57.2477 10.6306C57.4754 10.6552 57.6755 10.689 57.8478 10.7321V14.2222C57.6632 14.1668 57.4077 14.1175 57.0815 14.0745C56.7553 14.0314 56.4567 14.0098 56.1859 14.0098C55.6073 14.0098 55.0903 14.136 54.6348 14.3884C54.1854 14.6346 53.8284 14.9793 53.5638 15.4225C53.3052 15.8657 53.176 16.3765 53.176 16.9551V24.9786H49.2427ZM64.9043 25.2556C63.4455 25.2556 62.1898 24.9601 61.1373 24.3692C60.0909 23.7721 59.2845 22.9289 58.7182 21.8394C58.1519 20.7437 57.8688 19.448 57.8688 17.9523C57.8688 16.4935 58.1519 15.2132 58.7182 14.1114C59.2845 13.0096 60.0816 12.1509 61.1096 11.5354C62.1437 10.9199 63.3563 10.6121 64.7474 10.6121C65.683 10.6121 66.5539 10.7629 67.3603 11.0645C68.1728 11.36 68.8806 11.8062 69.4839 12.4033C70.0932 13.0004 70.5672 13.7513 70.9057 14.6561C71.2443 15.5548 71.4135 16.6074 71.4135 17.8138V18.8941H59.4384V16.4566H67.7111C67.7111 15.8903 67.588 15.3886 67.3418 14.9516C67.0956 14.5146 66.754 14.1729 66.317 13.9267C65.8861 13.6744 65.3844 13.5482 64.812 13.5482C64.2149 13.5482 63.6856 13.6867 63.2239 13.9637C62.7684 14.2345 62.4114 14.6007 62.1529 15.0624C61.8944 15.5179 61.762 16.0257 61.7559 16.5858V18.9033C61.7559 19.605 61.8851 20.2113 62.1437 20.7222C62.4083 21.2331 62.7807 21.627 63.2608 21.904C63.741 22.181 64.3103 22.3195 64.9689 22.3195C65.406 22.3195 65.8061 22.2579 66.1692 22.1348C66.5324 22.0117 66.8432 21.8271 67.1018 21.5808C67.3603 21.3346 67.5572 21.033 67.6927 20.676L71.3304 20.9161C71.1458 21.7901 70.7672 22.5534 70.1948 23.2058C69.6285 23.8522 68.896 24.3569 67.9974 24.7201C67.1048 25.0771 66.0738 25.2556 64.9043 25.2556ZM77.1335 6.06949V24.9786H73.2003V6.06949H77.1335ZM79.5043 24.9786V10.7968H83.4375V24.9786H79.5043ZM81.4801 8.96863C80.8954 8.96863 80.3937 8.77474 79.9752 8.38696C79.5628 7.99302 79.3566 7.52214 79.3566 6.97431C79.3566 6.43265 79.5628 5.96792 79.9752 5.58014C80.3937 5.1862 80.8954 4.98923 81.4801 4.98923C82.0649 4.98923 82.5635 5.1862 82.9759 5.58014C83.3944 5.96792 83.6037 6.43265 83.6037 6.97431C83.6037 7.52214 83.3944 7.99302 82.9759 8.38696C82.5635 8.77474 82.0649 8.96863 81.4801 8.96863ZM89.7415 16.7797V24.9786H85.8083V10.7968H89.5569V13.2989H89.723C90.037 12.4741 90.5632 11.8216 91.3019 11.3415C92.0405 10.8552 92.9361 10.6121 93.9887 10.6121C94.9735 10.6121 95.8322 10.8275 96.5647 11.2584C97.2971 11.6893 97.8665 12.3048 98.2728 13.105C98.679 13.899 98.8821 14.8469 98.8821 15.9487V24.9786H94.9489V16.6505C94.9551 15.7826 94.7335 15.1055 94.2841 14.6192C93.8348 14.1268 93.2162 13.8806 92.4283 13.8806C91.8989 13.8806 91.4311 13.9944 91.0249 14.2222C90.6248 14.4499 90.3109 14.7823 90.0831 15.2193C89.8615 15.6502 89.7477 16.1703 89.7415 16.7797ZM107.665 25.2556C106.206 25.2556 104.951 24.9601 103.898 24.3692C102.852 23.7721 102.045 22.9289 101.479 21.8394C100.913 20.7437 100.63 19.448 100.63 17.9523C100.63 16.4935 100.913 15.2132 101.479 14.1114C102.045 13.0096 102.842 12.1509 103.87 11.5354C104.905 10.9199 106.117 10.6121 107.508 10.6121C108.444 10.6121 109.315 10.7629 110.121 11.0645C110.934 11.36 111.641 11.8062 112.245 12.4033C112.854 13.0004 113.328 13.7513 113.667 14.6561C114.005 15.5548 114.174 16.6074 114.174 17.8138V18.8941H102.199V16.4566H110.472C110.472 15.8903 110.349 15.3886 110.103 14.9516C109.856 14.5146 109.515 14.1729 109.078 13.9267C108.647 13.6744 108.145 13.5482 107.573 13.5482C106.976 13.5482 106.446 13.6867 105.985 13.9637C105.529 14.2345 105.172 14.6007 104.914 15.0624C104.655 15.5179 104.523 16.0257 104.517 16.5858V18.9033C104.517 19.605 104.646 20.2113 104.905 20.7222C105.169 21.2331 105.542 21.627 106.022 21.904C106.502 22.181 107.071 22.3195 107.73 22.3195C108.167 22.3195 108.567 22.2579 108.93 22.1348C109.293 22.0117 109.604 21.8271 109.863 21.5808C110.121 21.3346 110.318 21.033 110.454 20.676L114.091 20.9161C113.907 21.7901 113.528 22.5534 112.956 23.2058C112.389 23.8522 111.657 24.3569 110.758 24.7201C109.866 25.0771 108.835 25.2556 107.665 25.2556Z" fill="currentColor" class="fill-primary"/>
                <path d="M1 28.9786V15.9786C1 9.35116 6.37258 3.97858 13 3.97858C19.6274 3.97858 25 9.35116 25 15.9786C25 22.606 19.6274 27.9786 13 27.9786H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                <path d="M5 28.9786V16.1386C5 11.6319 8.58172 7.97858 13 7.97858C17.4183 7.97858 21 11.6319 21 16.1386C21 20.6452 17.4183 24.2986 13 24.2986H12" class="stroke-primary" stroke="currentColor" stroke-width="2"/>
                <circle cx="13" cy="16" r="5" fill="currentColor" class="fill-primary"/>
              </svg>
            </a>

<div id="hs-navbar-page-demo-pricing" class="hidden hs-collapse overflow-hidden transition-all duration-300 basis-full grow md:block" aria-labelledby="hs-navbar-page-demo-pricing-collapse" role="region">
            <div class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
              <div class="flex flex-col gap-x-0 mt-5 divide-y divide-dashed divide-navbar-divider md:flex-row md:items-center md:justify-end md:gap-x-7 md:mt-0 md:ps-7 md:divide-y-0 md:divide-solid">
                <a class="py-3 md:py-6 font-medium text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#" aria-current="page">
                  Landing
                </a>

<a class="py-3 md:py-6 font-medium text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                  Company
                </a>

<div class="hs-dropdown [--strategy:static] md:[--strategy:absolute] [--adaptive:none] md:[--trigger:hover] py-3 md:py-4">
                  <button id="hs-mega-menu-pdp" type="button" class="flex items-center w-full text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1 font-medium" aria-haspopup="menu" aria-expanded="false" aria-label="Mega Menu">
                    Resources
                    <svg class="ms-2 size-2.5 text-muted-foreground-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                    </svg>
                  </button>

<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-150 hs-dropdown-open:opacity-100 opacity-0 w-full hidden z-10 top-full inset-s-0 min-w-60 bg-dropdown border border-dropdown-line md:shadow-2xl rounded-lg py-2 md:p-4 before:absolute before:-top-5 before:inset-s-0 before:w-full before:h-5" role="menu" aria-orientation="vertical" aria-labelledby="hs-mega-menu-pdp">
                    <div class="md:grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                      <div class="flex flex-col mx-1 md:mx-0">
                        <a class="group flex gap-x-5 text-navbar-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus rounded-lg p-4" href="#">
                          <svg class="shrink-0 size-5 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
                          <div class="grow">
                            <p class="font-medium text-foreground">Support Docs</p>
                            <p class="text-sm text-muted-foreground-1 group-hover:text-foreground group-focus:text-foreground">Explore advice and explanations for all of Preline's features.</p>
                          </div>
                        </a>

<a class="group flex gap-x-5 text-navbar-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus rounded-lg p-4" href="#">
                          <svg class="shrink-0 size-5 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="14" y="3" rx="1"/><path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3"/></svg>
                          <div class="grow">
                            <p class="font-medium text-foreground">Integrations</p>
                            <p class="text-sm text-muted-foreground-1 group-hover:text-foreground group-focus:text-foreground">Discover the huge range of tools that Preline integrates with.</p>
                          </div>
                        </a>

<a class="group flex gap-x-5 text-navbar-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus rounded-lg p-4" href="#">
                          <svg class="shrink-0 size-5 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 11 2-2-2-2"/><path d="M11 13h4"/><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/></svg>
                          <div class="grow">
                            <p class="font-medium text-foreground">API Reference</p>
                            <p class="text-sm text-muted-foreground-1 group-hover:text-foreground group-focus:text-foreground">Build custom integrations with our first-class API.</p>
                          </div>
                        </a>
                      </div>

<div class="flex flex-col mx-1 md:mx-0">
                        <a class="group flex gap-x-5 text-navbar-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus rounded-lg p-4" href="#">
                          <svg class="shrink-0 size-5 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
                          <div class="grow">
                            <p class="font-medium text-foreground">Help Center</p>
                            <p class="text-sm text-muted-foreground-1 group-hover:text-foreground group-focus:text-foreground">Learn how to install, set up, and use Preline.</p>
                          </div>
                        </a>

<a class="group flex gap-x-5 text-navbar-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus rounded-lg p-4" href="#">
                          <svg class="shrink-0 size-5 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8"/></svg>
                          <div class="grow">
                            <p class="font-medium text-foreground">Developer Hub</p>
                            <p class="text-sm text-muted-foreground-1 group-hover:text-foreground group-focus:text-foreground">Learn how to integrate or build on top of Preline.</p>
                          </div>
                        </a>

<a class="group flex gap-x-5 text-navbar-nav-foreground hover:bg-navbar-nav-hover focus:outline-hidden focus:bg-navbar-nav-focus rounded-lg p-4" href="#">
                          <svg class="shrink-0 size-5 mt-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                          <div class="grow">
                            <p class="font-medium text-foreground">Community Forum</p>
                            <p class="text-sm text-muted-foreground-1 group-hover:text-foreground group-focus:text-foreground">Learn, share, and connect with other Preline users.</p>
                          </div>
                        </a>
                      </div>

<div class="flex flex-col pt-4 md:pt-0 mx-1 md:mx-0">
                        <span class="text-sm font-semibold uppercase text-foreground">Customer stories</span>

<a class="mt-4 group flex gap-x-5 items-center focus:outline-hidden" href="#">
                          <img class="size-32 rounded-lg" src="https://images.unsplash.com/photo-1648737967328-690548aec14f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=320&q=80" alt="Avatar">
                          <div class="grow">
                            <p class="text-foreground">Preline Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
                            <p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-foreground">
                              Learn more
                              <svg class="shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </p>
                          </div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>

<a class="py-3 md:py-6 font-medium text-navbar-nav-foreground hover:text-muted-foreground-1 focus:outline-hidden focus:text-muted-foreground-1" href="#">
                  Login
                </a>

<div class="pt-3 md:pt-0">
                  <a class="py-2.5 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                    Request demo
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>

<div class="relative">
      <div class="max-w-340 px-4 pt-10 sm:px-6 lg:px-8 lg:pt-14 mx-auto">
        
        <div class="max-w-2xl mx-auto text-center mb-10">
          <h2 class="text-3xl leading-tight font-bold md:text-4xl md:leading-tight lg:text-5xl lg:leading-tight bg-clip-text bg-linear-to-r from-primary to-chart-5 text-transparent">Simple, transparent pricing</h2>
          <p class="mt-2 lg:text-lg text-foreground">Whatever your status, our offers evolve according to your needs.</p>
        </div>

<div class="flex justify-center items-center gap-x-3">
          <label for="pricing-switch" class="text-sm text-foreground">Monthly</label>
          <label for="pricing-switch" class="relative inline-block w-11 h-6 cursor-pointer">
            <input type="checkbox" id="pricing-switch" class="peer sr-only" checked>
            <span class="absolute inset-0 bg-surface-1 rounded-full transition-colors duration-200 ease-in-out peer-checked:bg-primary-checked peer-disabled:opacity-50 peer-disabled:pointer-events-none"></span>
            <span class="absolute top-1/2 inset-s-0.5 -translate-y-1/2 size-5 bg-switch rounded-full shadow-sm transition-transform duration-200 ease-in-out peer-checked:translate-x-full"></span>
          </label>
          <label for="pricing-switch" class="relative text-sm text-foreground">Annually</label>
        </div>

<div class="mt-6 md:mt-12 grid sm:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 lg:gap-3 xl:gap-6 lg:items-center">
          
          <div class="flex flex-col bg-card border border-card-line text-center rounded-xl p-8">
            <h3 class="font-medium text-lg text-foreground">Free</h3>
            <span class="mt-7 font-bold text-5xl text-foreground">Free</span>
            <p class="mt-2 text-sm text-muted-foreground-1">Get started with basic features</p>

<div class="flex flex-col bg-card border-2 border-primary text-center shadow-xl rounded-xl p-8">
            <p class="mb-3"><span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-lg text-xs uppercase font-semibold bg-primary-100 text-primary-800 dark:bg-primary-500/20 dark:text-primary-200">Most popular</span></p>
            <h3 class="font-medium text-lg text-foreground">Startup</h3>
            <span class="mt-5 font-bold text-5xl text-foreground">
              $39
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">All the basics for starting a new business</p>

<li class="flex gap-x-2">
                <svg class="shrink-0 mt-0.5 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <span class="text-foreground">
                  Product support
                </span>
              </li>
            </ul>
            
            <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
              Get started
            </a>
          </div>
          
          
          
          <div class="flex flex-col bg-card border border-card-line text-center rounded-xl p-8">
            <h3 class="font-medium text-lg text-foreground">Team</h3>
            <span class="mt-5 font-bold text-5xl text-foreground">
              $89
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">Everything you need for a growing business</p>

<li class="flex gap-x-2">
                <svg class="shrink-0 mt-0.5 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <span class="text-foreground">
                  Product support
                </span>
              </li>
            </ul>
            
            <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
              Get started
            </a>
          </div>
          
          
          
          <div class="flex flex-col bg-card border border-card-line text-center rounded-xl p-8">
            <h3 class="font-medium text-lg text-foreground">Enterprise</h3>
            <span class="mt-5 font-bold text-5xl text-foreground">
              $149
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">Advanced features for scaling your business</p>

<li class="flex gap-x-2">
                <svg class="shrink-0 mt-0.5 size-4 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                <span class="text-foreground">
                  Product support
                </span>
              </li>
            </ul>
            
            <a class="mt-5 py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
              Get started
            </a>
          </div>
          
        </div>

<div class="w-2/3 sm:w-1/2 lg:w-1/3 mx-auto text-center mt-10 md:mt-14 mb-6 lg:mt-24">
          <h2 class="text-muted-foreground-2">Trusted by Open Source, enterprise, and more than 99,000 of you</h2>
        </div>

<div class="flex justify-center gap-x-6 sm:gap-x-12 lg:gap-x-24">
          <svg class="size-16 md:size-20 lg:size-24 mx-auto sm:mx-0 text-muted-foreground-1" enable-background="new 0 0 2499 614" viewBox="0 0 2499 614" xmlns="http://www.w3.org/2000/svg"><path d="m431.7 0h-235.5v317.8h317.8v-235.5c0-45.6-36.7-82.3-82.3-82.3zm-308.9 0h-40.5c-45.6 0-82.3 36.7-82.3 82.3v40.5h122.8zm-122.8 196.2h122.8v122.8h-122.8zm392.5 317.8h40.5c45.6 0 82.3-36.7 82.3-82.3v-39.2h-122.8zm-196.3-121.5h122.8v122.8h-122.8zm-196.2 0v40.5c0 45.6 36.7 82.3 82.3 82.3h40.5v-122.8zm828-359.6h-48.1v449.4h254.5v-43h-206.4zm360.8 119c-93.7 0-159.5 69.6-159.5 169.6v11.5c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-21.5-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h243.1v-2.5s1.3-15.2 1.3-22.8c-.3-91.2-53.4-149.5-134.4-149.5zm-108.9 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm521.6-96.2v16.5c-20.3-34.2-58.2-55.7-97.5-55.7h-3.8c-86.1 0-145.6 68.4-145.6 168.4 0 101.3 57 169.6 141.8 169.6 67.1 0 97.5-40.5 107.6-58.2v49.4h45.6v-447h-46.8v157zm-98.8 257c-59.5 0-98.7-50.6-98.7-126.6 0-73.4 41.8-125.3 100-125.3 49.4 0 98.7 39.2 98.7 125.3 0 93.7-51.9 126.6-100 126.6zm424.1-250.7v2.5c-8.9-15.2-36.7-48.1-103.8-48.1-84.8 0-140.5 64.6-140.5 163.3s58.2 165.8 144.3 165.8c46.8 0 78.5-16.5 100-50.6v44.3c0 62-39.2 97.5-108.9 97.5-29.1 0-59.5-7.6-86.1-21.5l-2.5-1.3-17.7 39.2 2.5 1.3c32.9 16.5 69.6 25.3 105.1 25.3 74.7 0 154.4-38 154.4-143.1v-311.3h-46.8zm-93.7 241.8c-62 0-102.5-48.1-102.5-122.8 0-76 35.4-119 96.2-119 67.1 0 98.7 39.2 98.7 119 1.3 78.5-31.6 122.8-92.4 122.8zm331.7-286.1c-93.7 0-158.2 69.6-158.2 168.4v11.4c1.3 43 20.3 83.6 51.9 113.9 30.4 27.9 69.6 44.3 111.4 44.3h6.3c44.3 0 86.1-16.5 119-44.3l1.3-1.3-22.8-35.4-2.5 1.3c-26.6 24.1-59.5 38-94.9 38-58.2 0-117.7-38-121.5-122.8h244.2v-2.5s1.3-15.2 1.3-22.8c0-89.9-53.2-148.2-135.5-148.2zm-107.6 134.2c10.1-57 51.9-93.7 106.3-93.7 40.5 0 84.8 24.1 88.6 93.7zm440.6-127.9c-6.3-1.3-11.4-1.3-17.7-2.5-44.3 0-81 27.9-100 74.7v-72.2h-46.8l1.3 320.3v2.5h48.1v-135.4c0-20.3 2.5-41.8 8.9-60.8 15.2-49.4 49.4-81 89.9-81 5.1 0 10.1 0 15.2 1.3h2.5v-46.8z" fill="currentColor"/></svg>

<div class="relative">
    <div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 md:py-14 lg:py-20 mx-auto">
      <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
        <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-foreground">Compare plans</h2>
      </div>

<div class="hidden lg:block sticky top-0 inset-s-0 py-2 bg-layer/60 backdrop-blur-md">
        
        <div class="grid grid-cols-6 gap-6">
          <div class="col-span-2">
            <span class="font-semibold text-lg text-foreground">
              Features
            </span>
          </div>

<div class="col-span-1">
            <span class="font-semibold text-lg text-foreground">
              Free
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">
              Free forever
            </p>
          </div>

<div class="col-span-1">
            <span class="font-semibold text-lg text-foreground">
              Startup
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">
              $39 per month billed annually
            </p>
          </div>

<div class="col-span-1">
            <span class="font-semibold text-lg text-foreground">
              Team
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">
              $89 per month billed annually
            </p>
          </div>

<div class="col-span-1">
            <span class="font-semibold text-lg text-foreground">
              Enterprise
            </span>
            <p class="mt-2 text-sm text-muted-foreground-1">
              $149 per month billed annually
            </p>
          </div>
          
        </div>
        
      </div>

<div class="space-y-4 lg:space-y-0">
        
        <ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 lg:py-3">
            <span class="text-lg font-semibold text-foreground">
              General
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Number of seats
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <span class="text-sm text-foreground">
                Unlimited
              </span>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Storage
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <span class="text-sm text-foreground">
                Unlimited
              </span>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Email sharing
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Any time, anywhere access
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>
        
      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
        
        <ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 lg:py-3">
            <span class="text-lg font-semibold text-foreground">
              Financial data
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Open/High/Low/Close
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Price-volume difference indicator
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>
        
      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
        
        <ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 lg:py-3">
            <span class="text-lg font-semibold text-foreground">
              On-chain data
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Network growth
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Average token age consumed
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Exchange flow
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Total ERC20 exchange funds flow
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Transaction volume
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Total circulation (beta)
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Velocity of tokens (beta)
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              ETH gas used
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>
        
      </div>

<div class="mt-6 space-y-4 lg:space-y-0">
        
        <ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 lg:py-3">
            <span class="text-lg font-semibold text-foreground">
              Social data
            </span>
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>

<li class="hidden lg:block lg:col-span-1 py-1.5 lg:py-3 px-4 lg:px-0 lg:text-center">
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Dev activity
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Topic search
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>

<ul class="grid lg:grid-cols-6 lg:gap-6">
          
          <li class="lg:col-span-2 pb-1.5 lg:py-3">
            <span class="font-semibold lg:font-normal text-sm text-foreground">
              Relative social dominance
            </span>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Free
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Startup
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Team
              </span>
              <svg class="shrink-0 size-5 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
            </div>
          </li>

<li class="col-span-1 py-1.5 lg:py-3 border-b border-line-2">
            <div class="grid grid-cols-2 md:grid-cols-6 lg:block">
              <span class="lg:hidden md:col-span-2 text-sm text-foreground">
                Enterprise
              </span>
              <svg class="shrink-0 size-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
          </li>
          
        </ul>
        
      </div>

<div class="hidden lg:block mt-6">
        
        <div class="grid grid-cols-6 gap-6">
          <div class="col-span-2">
          </div>

<div class="col-span-1">
            <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus" href="#">
              Get started
            </a>
          </div>

<div class="col-span-1">
            <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
              Get started
            </a>
          </div>

<div class="mt-8 md:mt-12 flex justify-center items-center gap-x-3">
        <p class="text-sm text-muted-foreground-1">
          Need a custom plan?
        </p>

<button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
          Contact us
        </button>
      </div>
      
    </div>
  </div>

<div class="relative overflow-hidden">
    <div class="max-w-340 px-4 py-12 sm:px-6 lg:px-8 lg:py-16 mx-auto">
      
      <div aria-hidden="true" class="flex -z-1 absolute inset-s-0">
        <div class="bg-primary-200 opacity-20 blur-3xl w-259 h-75 dark:bg-primary-500/50"></div>
      </div>

<div class="lg:grid lg:grid-cols-6 lg:gap-8 lg:items-center">
        <div class="hidden lg:block lg:col-span-2">
          <img class="rounded-xl" src="https://images.unsplash.com/photo-1671726203390-cdc4354ee2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=560&q=80" alt="Avatar">
        </div>

<p class="text-xl font-medium text-foreground lg:text-2xl lg:leading-normal">
              To say that switching to Preline has been life-changing is an understatement. My business has tripled and I got my life back.
            </p>

<footer class="mt-6">
              <div class="flex items-center">
                <div class="lg:hidden shrink-0">
                  <img class="size-12 rounded-full" src="https://images.unsplash.com/photo-1671726203390-cdc4354ee2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80" alt="Avatar">
                </div>
                <div class="ms-4 lg:ms-0">
                  <p class="font-medium text-foreground">
                    Nicole Grazioso
                  </p>
                  <p class="text-sm text-muted-foreground-2">
                    Head of Finance
                  </p>
                </div>
              </div>
            </footer>
          </blockquote>
          
        </div>
        
      </div>
      
    </div>
  </div>

<div class="max-w-340 px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
    
    <div class="grid md:grid-cols-5 gap-10">
      <div class="md:col-span-2">
        <div class="max-w-xs">
          <h2 class="text-2xl font-bold md:text-4xl md:leading-tight text-foreground">Frequently<br>asked questions</h2>
          <p class="mt-1 hidden md:block text-muted-foreground-2">Answers to the most frequently asked questions.</p>
        </div>
      </div>

<div class="md:col-span-3">
        
        <div class="hs-accordion-group divide-y divide-line-2">
          <div class="hs-accordion pb-3 active" id="hs-basic-with-title-and-arrow-stretched-heading-one">
            <button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-foreground rounded-lg transition hover:text-muted-foreground-1 focus:outline-hidden" aria-expanded="true" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-one">
              Can I cancel at anytime?
              <svg class="hs-accordion-active:hidden block shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              <svg class="hs-accordion-active:block hidden shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
            </button>
            <div id="hs-basic-with-title-and-arrow-stretched-collapse-one" class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one">
              <p class="text-muted-foreground-2">
                Yes, you can cancel anytime no questions are asked while you cancel but we would highly appreciate if you will give us some feedback.
              </p>
            </div>
          </div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-two">
            <button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-foreground rounded-lg transition hover:text-muted-foreground-1 focus:outline-hidden" aria-expanded="false" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-two">
              My team has credits. How do we use them?
              <svg class="hs-accordion-active:hidden block shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              <svg class="hs-accordion-active:block hidden shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
            </button>
            <div id="hs-basic-with-title-and-arrow-stretched-collapse-two" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-two">
              <p class="text-muted-foreground-2">
                Once your team signs up for a subscription plan. This is where we sit down, grab a cup of coffee and dial in the details.
              </p>
            </div>
          </div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-three">
            <button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-foreground rounded-lg transition hover:text-muted-foreground-1 focus:outline-hidden" aria-expanded="false" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-three">
              How does Preline's pricing work?
              <svg class="hs-accordion-active:hidden block shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              <svg class="hs-accordion-active:block hidden shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
            </button>
            <div id="hs-basic-with-title-and-arrow-stretched-collapse-three" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-three">
              <p class="text-muted-foreground-2">
                Our subscriptions are tiered. Understanding the task at hand and ironing out the wrinkles is key.
              </p>
            </div>
          </div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-four">
            <button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-foreground rounded-lg transition hover:text-muted-foreground-1 focus:outline-hidden" aria-expanded="false" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-four">
              How secure is Preline?
              <svg class="hs-accordion-active:hidden block shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              <svg class="hs-accordion-active:block hidden shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
            </button>
            <div id="hs-basic-with-title-and-arrow-stretched-collapse-four" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-four">
              <p class="text-muted-foreground-2">
                Protecting the data you trust to Preline is our first priority. This part is really crucial in keeping the project in line to completion.
              </p>
            </div>
          </div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-five">
            <button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-foreground rounded-lg transition hover:text-muted-foreground-1 focus:outline-hidden" aria-expanded="false" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-five">
              How do I get access to a theme I purchased?
              <svg class="hs-accordion-active:hidden block shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              <svg class="hs-accordion-active:block hidden shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
            </button>
            <div id="hs-basic-with-title-and-arrow-stretched-collapse-five" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-five">
              <p class="text-muted-foreground-2">
                If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.
              </p>
            </div>
          </div>

<div class="hs-accordion pt-6 pb-3" id="hs-basic-with-title-and-arrow-stretched-heading-six">
            <button class="hs-accordion-toggle group pb-3 inline-flex items-center justify-between gap-x-3 w-full md:text-lg font-semibold text-start text-foreground rounded-lg transition hover:text-muted-foreground-1 focus:outline-hidden" aria-expanded="false" aria-controls="hs-basic-with-title-and-arrow-stretched-collapse-six">
              Upgrade License Type
              <svg class="hs-accordion-active:hidden block shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              <svg class="hs-accordion-active:block hidden shrink-0 size-5 text-muted-foreground-2 group-hover:text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
            </button>
            <div id="hs-basic-with-title-and-arrow-stretched-collapse-six" class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300" role="region" aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-six">
              <p class="text-muted-foreground-2">
                There may be times when you need to upgrade your license from the original type you purchased and we have a solution that ensures you can apply your original purchase cost to the new license purchase.
              </p>
            </div>
          </div>
        </div>
        
      </div>
      
    </div>
    
  </div>
  
</main>

<footer class="mt-auto w-full max-w-340 py-10 px-4 sm:px-6 lg:px-8 mx-auto">
  
  <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
    <div class="col-span-full hidden lg:col-span-1 lg:block">
      <a class="flex-none font-semibold text-xl text-foreground focus:outline-hidden focus:opacity-80" href="#" aria-label="Brand">Brand</a>
      <p class="mt-3 text-xs sm:text-sm text-muted-foreground-2">
        © 2026 Preline Labs.
      </p>
    </div>
    
    
    <div>
      <h3 class="text-xs font-semibold text-foreground uppercase">Product</h3>

<div class="mt-3 grid space-y-3 text-sm">
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Pricing</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Changelog</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Docs</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Download</a></p>
      </div>
    </div>

<div>
      <h3 class="text-xs font-semibold text-foreground uppercase">Company</h3>
      
      <div class="mt-3 grid space-y-3 text-sm">
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">About us</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Blog</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Careers</a> <span class="inline text-primary">— We're hiring</span></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Customers</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Newsroom</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Sitemap</a></p>
      </div>
    </div>
    
    
    <div>
      <h3 class="text-xs font-semibold text-foreground uppercase">Resources</h3>

<div class="mt-3 grid space-y-3 text-sm">
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Community</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Help & Support</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">eBook</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">What's New</a></p>
        <p><a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Status</a></p>
      </div>
    </div>
    
    
    <div>
      <h3 class="text-xs font-semibold text-foreground uppercase">Developers</h3>

<h3 class="mt-7 text-xs font-semibold text-foreground uppercase">Industries</h3>

<div class="pt-5 mt-5 border-t border-line-2">
    <div class="sm:flex sm:justify-between sm:items-center">
      <div class="flex flex-wrap items-center gap-3">
        
        <div class="hs-dropdown [--placement:top-left] relative inline-flex">
          <button id="hs-footer-language-dropdown" type="button" class="hs-dropdown-toggle py-2 px-3 inline-flex items-center gap-x-2 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
            <svg class="shrink-0 size-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us1" viewBox="0 0 512 512">
              <g fill-rule="evenodd">
                <g stroke-width="1pt">
                  <path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                  <path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                </g>
                <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/>
                <path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/>
              </g>
            </svg>
            English (US)
            <svg class="hs-dropdown-open:rotate-180 shrink-0 size-4 text-muted-foreground-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
          </button>

<div class="hs-dropdown-menu w-40 transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden z-10 bg-dropdown border border-dropdown-line shadow-md rounded-lg p-2" role="menu" aria-orientation="vertical" aria-labelledby="hs-footer-language-dropdown">
            <a class="flex items-center gap-x-2 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
              <svg class="shrink-0 size-3.5 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-us" viewBox="0 0 512 512">
                <g fill-rule="evenodd">
                  <g stroke-width="1pt">
                    <path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                    <path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"/>
                  </g>
                  <path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"/>
                  <path fill="#fff" d="M8.2 3l1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0l1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7l.8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0l1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0l.9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0l.9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"/>
                </g>
              </svg>
              English (US)
            </a>
            <a class="flex items-center gap-x-2 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
              <svg class="shrink-0 size-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 512 512">
                <path fill="#ffce00" d="M0 341.3h512V512H0z"/>
                <path d="M0 0h512v170.7H0z"/>
                <path fill="#d00" d="M0 170.7h512v170.6H0z"/>
              </svg>
              Deutsch
            </a>
            <a class="flex items-center gap-x-2 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
              <svg class="shrink-0 size-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-dk" viewBox="0 0 512 512">
                <path fill="#c8102e" d="M0 0h512.1v512H0z"/>
                <path fill="#fff" d="M144 0h73.1v512H144z"/>
                <path fill="#fff" d="M0 219.4h512.1v73.2H0z"/>
              </svg>
              Dansk
            </a>
            <a class="flex items-center gap-x-2 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
              <svg class="shrink-0 size-3 rounded-full" xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-it" viewBox="0 0 512 512">
                <g fill-rule="evenodd" stroke-width="1pt">
                  <path fill="#fff" d="M0 0h512v512H0z"/>
                  <path fill="#009246" d="M0 0h170.7v512H0z"/>
                  <path fill="#ce2b37" d="M341.3 0H512v512H341.3z"/>
                </g>
              </svg>
              Italiano
            </a>
            <a class="flex items-center gap-x-2 py-2 px-3 rounded-lg text-sm text-foreground hover:bg-muted-hover focus:outline-hidden focus:bg-muted-focus" href="#">
              <svg class="shrink-0 size-3 rounded-full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="flag-icon-css-cn" viewBox="0 0 512 512">
                <defs>
                  <path id="a" fill="#ffde00" d="M1-.3L-.7.8 0-1 .6.8-1-.3z"/>
                </defs>
                <path fill="#de2910" d="M0 0h512v512H0z"/>
                <use width="30" height="20" transform="matrix(76.8 0 0 76.8 128 128)" xlink:href="#a"/>
                <use width="30" height="20" transform="rotate(-121 142.6 -47) scale(25.5827)" xlink:href="#a"/>
                <use width="30" height="20" transform="rotate(-98.1 198 -82) scale(25.6)" xlink:href="#a"/>
                <use width="30" height="20" transform="rotate(-74 272.4 -114) scale(25.6137)" xlink:href="#a"/>
                <use width="30" height="20" transform="matrix(16 -19.968 19.968 16 256 230.4)" xlink:href="#a"/>
              </svg>
              中文 (繁體)
            </a>
          </div>
        </div>

<div class="space-x-4 text-sm">
          <a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Terms</a>
          <a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Privacy</a>
          <a class="inline-flex gap-x-2 text-muted-foreground-2 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">Status</a>
        </div>
      </div>

<div class="flex flex-wrap justify-between items-center gap-3">
        <div class="mt-3 sm:hidden">
          <a class="flex-none font-semibold text-xl text-foreground focus:outline-hidden focus:opacity-80" href="#" aria-label="Brand">Brand</a>
          <p class="mt-1 text-xs sm:text-sm text-muted-foreground-2">
            © 2026 Preline Labs.
          </p>
        </div>

<div class="space-x-4">
          <a class="inline-block text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
            </svg>
          </a>
          <a class="inline-block text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
            </svg>
          </a>
          <a class="inline-block text-muted-foreground-1 hover:text-foreground focus:outline-hidden focus:text-foreground" href="#">
            <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M3.362 10.11c0 .926-.756 1.681-1.681 1.681S0 11.036 0 10.111C0 9.186.756 8.43 1.68 8.43h1.682v1.68zm.846 0c0-.924.756-1.68 1.681-1.68s1.681.756 1.681 1.68v4.21c0 .924-.756 1.68-1.68 1.68a1.685 1.685 0 0 1-1.682-1.68v-4.21zM5.89 3.362c-.926 0-1.682-.756-1.682-1.681S4.964 0 5.89 0s1.68.756 1.68 1.68v1.682H5.89zm0 .846c.924 0 1.68.756 1.68 1.681S6.814 7.57 5.89 7.57H1.68C.757 7.57 0 6.814 0 5.89c0-.926.756-1.682 1.68-1.682h4.21zm6.749 1.682c0-.926.755-1.682 1.68-1.682.925 0 1.681.756 1.681 1.681s-.756 1.681-1.68 1.681h-1.681V5.89zm-.848 0c0 .924-.755 1.68-1.68 1.68A1.685 1.685 0 0 1 8.43 5.89V1.68C8.43.757 9.186 0 10.11 0c.926 0 1.681.756 1.681 1.68v4.21zm-1.681 6.748c.926 0 1.682.756 1.682 1.681S11.036 16 10.11 16s-1.681-.756-1.681-1.68v-1.682h1.68zm0-.847c-.924 0-1.68-.755-1.68-1.68 0-.925.756-1.681 1.68-1.681h4.21c.924 0 1.68.756 1.68 1.68 0 .926-.756 1.681-1.68 1.681h-4.21z"/>
            </svg>
          </a>
        </div>
        
      </div>
      
    </div>
  </div>
</footer>