@primereact/mcp 11.0.0 → 11.1.0

package/data/llms/styled/add-ons/uikit/guide/v3.md

@@ -0,0 +1,181 @@
+# PrimeOne Guide v3
+
+PrimeOne is PrimeTek's official Figma UI Kit, built to work seamlessly with the Prime UI Suites.
+
+> **Legacy Notice:** UI Kit v3 is deprecated due to its dependency on the Tokens Studio Plugin. We strongly recommend migrating to UI Kit v4, which uses native Figma variables for significantly improved performance and eliminates third-party dependencies.
+
+## Overview
+
+PrimeOne is the official Figma library of UI components designed to match the implementations in the Prime UI Suites. The current iteration of PrimeOne is structured around the **Aura Light** and **Aura Dark** themes.
+
+## Resources
+
+PrimeOne for Figma takes full advantage of powerful Figma features such as components, variants, auto layout, styles, interactivity, and design tokens via Tokens Studio.
+
+If you're new to Figma or want to get the most out of PrimeOne, we recommend exploring the following resources:
+
+- [Tokens Studio Documentation](https://docs.tokens.studio/) - PrimeOne uses Tokens Studio for design token management. Visit the official docs to understand how it works and how to use it effectively.
+- [Figma's Best Practice Guides](https://www.figma.com/best-practices/) - Learn how to work efficiently with components, variants, and layouts.
+- [Figma's Official YouTube Channel](https://www.youtube.com/figmadesign) - Tutorials and feature walkthroughs from the Figma team.
+- [Figmalion Newsletter](https://figmalion.com/) - Stay updated with curated insights from the Figma community.
+
+## Installation
+
+### Importing
+
+- **Download the latest .fig UI Kit** - From your PrimeStore panel, download the latest PrimeOne package. The archive contains the .fig UI Kit.
+- **Open Figma in Google Chrome** - Launch Figma in Chrome (or another supported browser). Avoid using the Desktop app for this import. It's more reliable in-browser.
+- **Import into your Team project** - Navigate to the Teams section in the left sidebar. Select your Team project where you want PrimeOne. Drag and drop the .fig file into the project folder in the browser UI. Figma will upload it, showing a new file card once complete.
+
+![Importing PrimeOne](https://primefaces.org/cdn/uikit/installation-1.png)
+
+### Publishing
+
+To make PrimeOne available as a shared library:
+
+- Open the imported PrimeOne .fig file.
+- Go to **Assets → Manage Libraries**.
+- Click **"Publish..."** to share PrimeOne with your team, then confirm by clicking the "Publish" button in the modal.
+
+![Publishing PrimeOne](https://primefaces.org/cdn/uikit/installation-2.png)
+
+### Enabling
+
+If you want to enable PrimeOne across all files in your team, follow these steps:
+
+- Navigate to **All Projects** from the Teams section.
+- Go to **View Settings → View Team Libraries**. You can find this option in the dropdown menu next to your team name.
+- Toggle PrimeOne "On" to make it available globally.
+
+![Enabling PrimeOne](https://primefaces.org/cdn/uikit/installation-3.png)
+
+## Suggested Workflow
+
+PrimeOne uses Tokens Studio as its primary tool for design token management. To leverage the benefits of Figma Variables, these variables have also been exported from Tokens Studio and included in the file. This setup, while powerful, can make design changes somewhat complex and less fluid due to the way the tools interact. Although the provided guide outlines the recommended steps, we acknowledge that the workflow may feel unintuitive or slow at times. We're actively exploring improvements, and in the meantime, suggest following the guide as a baseline while adapting it to your team's needs where necessary.
+
+### Tokens Studio Setup
+
+- **Set sync provider via Tokens Studio** - Figma plugins are limited to sharing a maximum of 100KB of data through their APIs. Because PrimeOne's token data exceeds this limit, using tokens locally within your Figma file may lead to performance issues. To avoid this, you should first configure and switch to a remote sync provider. You can follow the official [Tokens Studio guide](https://docs.tokens.studio/token-storage/remote) for setting up remote storage.
+- **Push tokens to your sync provider** - Once you've successfully switched to your new sync provider, push the token data from your local file to the new provider to ensure everything stays in sync.
+- **Set Base Font Size to `{app.font.size}` in Tokens Studio Settings** - PrimeOne uses a base font size of 14px, aligning with the default in Prime UI libraries. In Tokens Studio, go to the Settings tab and set the Base font size to `{app.font.size}`.
+- If you wish to change this value, you can [update](https://docs.tokens.studio/manage-settings/base-font-size) the corresponding token in the app set.
+
+### CI Pipeline
+
+Theme Designer offers an API that can be utilized to implement continuous integration pipelines to automate Figma to theme code generation whenever you push updates to the repository from Figma. Visit the [CI Pipeline](/docs/styled/add-ons/designer/ci) documentation for comprehensive information.
+
+### Design Changes
+
+- **Change on Tokens Studio** - The first step when planning a design change is to identify which tokens need to be modified within Tokens Studio. Use the **Inspect** tab in Tokens Studio to locate the relevant tokens, then apply your changes directly via the plugin. After making the updates, don't forget to push the changes to your Sync Provider.
+- **Change on Figma Variables** - After making changes in Tokens Studio, you also need to apply these updates in Figma Variables. There are two options:
+    - Manually update the variables one by one, or
+    - Use the **Export to Styles & Variables** feature in Tokens Studio.
+
+    In our own workflow, we prefer to update the variables manually, as the export feature can be unstable with large files like PrimeOne. We recommend this manual approach for reliability. However, if you choose to use the export feature, make sure the settings match the screenshot provided. Specifically, ensure the "**Themes (Pro)**" tab is selected during the second step. Don't worry, even though it says "Pro," you don't need a Pro license to access this feature in Tokens Studio. If you notice missing or incomplete exports on your first attempt, try running the export again from the beginning. This is a known issue with Tokens Studio and often resolves on the second attempt. For more detailed guidance, see the [official documentation](https://docs.tokens.studio/figma/export).
+
+    ![Design changes export settings](https://primefaces.org/cdn/uikit/designchanges-1.png)
+- **Get Updates on Consumer Files** - We do not recommend making design changes directly in consumer files, as this goes against best practices. Instead, apply all design updates in the main UI Kit file, then publish the library and accept the updates in any consumer files that rely on it.
+
+## Token Sets
+
+- **Primitive** - This set contains the most foundational tokens, such as base colors and border radius, elements that are considered "primitive" by nature.
+- **Semantic** - Includes essential system-wide tokens like primary, surface, and other shared design values. It also defines tokens used across multiple component groups. For example, tokens under `{form.field.*}` are referenced by component-level tokens in InputText, MultiSelect, Checkbox, and other form components, enabling consistent styling across the board.
+- **Component** - These tokens are defined specifically for each component to allow deep customization. While we've aimed to create dedicated tokens for every component state, many of them still reference the semantic or primitive tokens, allowing you to make global updates from a single place when needed.
+- **App** - Tokens in this set are not part of the [PrimeUIX](https://github.com/primefaces/primeuix) system. They are intended for values defined in your own application. The same applies to tokens used in our UI library showcases. For example, there is no dedicated font size token in **PrimeUIX** because font styles are not part of the design system. UI components inherit their font settings from the application.
+- **Custom** - If you're using the Figma to Theme feature and want your newly created custom tokens to appear in your Theme Designer themes, place them in this set. Even if you're not using the Theme Designer, we still recommend creating a separate set — or using the existing "Custom" set — for your own tokens. Making changes to the default sets, especially deleting tokens or altering reference values, can lead to inconsistencies with the library tokens and cause additional work during development.
+
+## Update PrimeOne
+
+When a new version of PrimeOne is released, follow the steps below to update your files:
+
+- Download the latest version of PrimeOne from PrimeStore.
+- Unzip the file and upload it to your Figma workspace.
+- Publish the newly uploaded file as a library.
+- In all consumer files, use **Swap Library** to point to the new version.
+- Once the transition is complete, you can safely unpublish the old PrimeOne library.
+
+Before each update, it's a good idea to review the **Changelog** on the Get Started page of the PrimeOne Figma file.
+
+Keep in mind that while Swap Library will update most components, any customized components may require manual review and adjustment.
+
+## Adding PrimeIcons
+
+PrimeOne uses PrimeIcons, the official icon library by PrimeTek. To use it effectively within your design system, you need to add PrimeIcons to your Figma environment by following these steps:
+
+- Open the [PrimeIcons](https://www.figma.com/community/file/1354343849355792252/primeicons) file in Figma and move it to your team project.
+
+    ![Adding PrimeIcons - step 1](https://primefaces.org/cdn/uikit/primeicons-1.png)
+
+- Publish the PrimeIcons file and enable it for all team files in your Team Settings.
+
+    ![Adding PrimeIcons - step 2](https://primefaces.org/cdn/uikit/primeicons-2.png)
+
+- Return to your PrimeOne file. In the Libraries panel, click on the banner that says "Includes X missing libraries."
+
+    ![Adding PrimeIcons - step 3](https://primefaces.org/cdn/uikit/primeicons-3.png)
+
+- From the dropdown, select "**PrimeIcons (Community)**" and click the **Swap Library** button.
+
+    ![Adding PrimeIcons - step 4](https://primefaces.org/cdn/uikit/primeicons-4.png)
+
+## FAQ
+
+### Usage
+
+**What should we do after purchasing? I can't publish the Preview file?**
+
+The Preview file is **view-only**, so it can't be published. To use the library, download the .fig file from PrimeStore and import it into your Figma workspace. Once imported, you'll be able to open the file and publish it as a library for use in your projects.
+
+**How to change theme?**
+
+After exporting your tokens as Figma Variables using the Themes option in Tokens Studio, theme switching must be handled using Figma's native **Mode Switching** feature. The Theme Switcher within the Tokens Studio plugin will no longer function once themes are bound to a Variable Collection — this applies to PrimeOne as well. Therefore, to switch between Light and Dark modes, you should always use Figma's built-in Mode Switching interface.
+
+### Components
+
+**How to change base font size?**
+
+The base font size used in PrimeOne is 14px. Similar to how rem works in CSS, this is controlled by the `{app.font.size}` token located under the "app" set in Tokens Studio. When you change the value of this token, all size calculations will adjust accordingly based on the new value.
+
+To apply this change, you need to use the "Apply" function in Tokens Studio. However, we do not recommend using the "**Apply to Document**" option if the change affects the entire library, as it may lead to unexpected errors. Instead, go page by page and review the updates carefully before applying changes.
+
+Also note: not all token values in the library may be linked to `{app.font.size}`. So it's important to check components individually. After completing each page, verify the updated values under Local Variables and make manual adjustments if needed. Alternatively, you can use **Export Styles & Variables** to Figma in Tokens Studio to sync the updated values.
+
+### Tokens
+
+**Is Tokens Studio too slow?**
+
+This might be caused by using the wrong Apply method when pushing your changes. Since PrimeOne is a large file, using **Apply to Document** can result in very long processing times. We recommend using **Apply to Selection** or **Apply to Page** instead for better performance.
+
+### Updates
+
+**Will there be a completely new Figma file with each update, or will the current PrimeOne file be modified and versioned?**
+
+Each update will come as a new Figma file—an updated version of the previous one. You can seamlessly transition to the new version in your consumer files using Figma's **Swap Library** feature.
+
+**Will the PrimeOne UI Kit stay in sync with ongoing updates to the Prime UI Libraries?**
+
+The PrimeOne UI Kit does not update in real time alongside the libraries. However, we regularly release updates to bridge the gap and ensure alignment with key changes.
+
+**How will users receive new components when they're added?**
+
+New components will be included in future updates to the UI Kit. Please note that these updates may not coincide immediately with library changes and may take some time to roll out.
+
+**How frequently is the PrimeOne UI Kit updated?**
+
+We don't follow a fixed release schedule. Updates are made as needed, based on significant changes or additions to the Prime UI libraries.
+
+### Roadmap
+
+**Are there plans to add a Tailwind theme to the UI Kit?**
+
+At this time, we do not plan to include Tailwind theme support in the Figma UI Kit.
+
+### Licence
+
+**Will purchasing a PrimeBlocks license include access to PrimeOne components?**
+
+No. The PrimeBlocks license does not grant access to the PrimeOne UI Kit. They are separate products with individual licenses.
+
+## Support
+
+The community gathers on [GitHub Discussions](https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit) and [Discord](https://discord.gg/gzKFYnpmCY) to ask questions, share ideas, and discuss the technology. For direct inquiries or suggestions, feel free to contact us at [contact@primetek.com.tr](mailto:contact@primetek.com.tr).

package/data/llms/styled/add-ons/uikit/guide/v4.md

@@ -0,0 +1,163 @@
+# PrimeOne Guide
+
+PrimeOne is a strong UI component library that gets even better with a great Figma UI Kit. It is PrimeTek's official Figma UI Kit, built to work seamlessly with the Prime UI Suites.
+
+## Overview
+
+PrimeOne is the official Figma library of UI components designed to match the implementations in the Prime UI Suites. The current iteration of PrimeOne is structured around the **Aura Light** and **Aura Dark** themes.
+
+## Important Notice
+
+Starting from PrimeOne UI Kit version 4.0, the Tokens Studio plugin is no longer used. We've fully migrated to Figma's native variable features, which now power the system. If you prefer to continue working with Tokens Studio, please use PrimeOne UI Kit version 3.2, which still supports the plugin.
+
+## Resources
+
+PrimeOne for Figma takes full advantage of powerful Figma features such as components, variants, auto layout, styles, prototypes, and variables.
+
+If you're new to Figma or want to get the most out of PrimeOne, we recommend exploring the following resources:
+
+- [Variables](https://help.figma.com/hc/en-us/sections/14506605769879-Variables) - PrimeOne uses Figma Variables for design token management. Visit the official docs to understand how it works and how to use it effectively.
+- [Figma's Best Practice Guides](https://www.figma.com/best-practices/) - Learn how to work efficiently with components, variants, and layouts.
+- [Figma's Official YouTube Channel](https://www.youtube.com/figmadesign) - Tutorials and feature walkthroughs from the Figma team.
+- [Figmalion Newsletter](https://figmalion.com/) - Stay updated with curated insights from the Figma community.
+
+## Installation
+
+### Importing
+
+- **Download the latest .fig UI Kit** - From your PrimeStore panel, download the latest PrimeOne package. The archive contains the .fig UI Kit.
+- **Open Figma in Google Chrome** - Launch Figma in Chrome (or another supported browser). Avoid using the Desktop app for this import. It's more reliable in-browser.
+- **Import into your Team project** - Navigate to the Teams section in the left sidebar. Select your Team project where you want PrimeOne. Drag and drop the .fig file into the project folder in the browser UI. Figma will upload it, showing a new file card once complete.
+
+![Importing PrimeOne](https://primefaces.org/cdn/uikit/installation-1.png)
+
+### Publishing
+
+To make PrimeOne available as a shared library:
+
+- Open the imported PrimeOne .fig file.
+- Go to **Assets → Manage Libraries**.
+- Click **"Publish..."** to share PrimeOne with your team, then confirm by clicking the "Publish" button in the modal.
+
+![Publishing PrimeOne](https://primefaces.org/cdn/uikit/installation-2.png)
+
+### Enabling
+
+If you want to enable PrimeOne across all files in your team, follow these steps:
+
+- Navigate to **All Projects** from the Teams section.
+- Go to **View Settings → View Team Libraries**. You can find this option in the dropdown menu next to your team name.
+- Toggle PrimeOne "On" to make it available globally.
+
+![Enabling PrimeOne](https://primefaces.org/cdn/uikit/installation-3.png)
+
+## Collections
+
+- **Primitive** — This collection contains the most foundational variables, such as base colors and border radius, elements that are considered "primitive" by nature.
+- **Semantic Common & Semantic Color Scheme** — Includes essential system-wide variables like primary, surface, and other shared design values. It also defines variables used across multiple component groups. For example, variables under form/field are referenced by component-level variables in InputText, MultiSelect, Checkbox, and other form components, enabling consistent styling across the board.
+- **Component Common & Component Color Scheme** — These variables are defined specifically for each component to allow deep customization. While we've aimed to create dedicated variables for every component state, many of them still reference the semantic or primitive variables, allowing you to make global updates from a single place when needed.
+- **App** — Variables in this collection are not part of the [PrimeUIX](https://github.com/primefaces/primeuix) system. They are intended for values defined in your own application. The same applies to variables used in our UI library showcases. For example, there is no dedicated font size variable in **PrimeUIX** because font styles are not part of the design system. UI components inherit their font settings from the application.
+- **Custom** — If you're using the Figma to Theme feature and want your newly created custom variables to appear in your Theme Designer themes, place them in this collection. Even if you're not using the Theme Designer, we still recommend creating a separate collection — or using the existing "Custom" collection — for your own variables. Making changes to the default collections, especially deleting variables or altering reference values, can lead to inconsistencies with the library variables and cause additional work during development.
+
+## PrimeUI Figma Plugin
+
+PrimeUI Theme Generator Figma plugin is the official tool developed by PrimeTek that provides built-in synchronization capabilities to automate the theme code generation process. Visit the [plugin website](https://www.figma.com/community/plugin/1592914021886732603/primeui-theme-generator) to learn more about this workflow.
+
+## Update PrimeOne
+
+When a new version of PrimeOne is released, follow the steps below to update your files:
+
+- Download the latest version of PrimeOne from PrimeStore.
+- Unzip the file and upload it to your Figma workspace.
+- Publish the newly uploaded file as a library.
+- In all consumer files, use **Swap Library** to point to the new version.
+- Once the transition is complete, you can safely unpublish the old PrimeOne library.
+
+Before each update, it's a good idea to review the **Changelog** on the Get Started page of the PrimeOne Figma file.
+
+Keep in mind that while Swap Library will update most components, any customized components may require manual review and adjustment.
+
+## Adding PrimeIcons
+
+PrimeOne uses PrimeIcons, the official icon library by PrimeTek. To use it effectively within your design system, you need to add PrimeIcons to your Figma environment by following these steps:
+
+- Open the [PrimeIcons](https://www.figma.com/community/file/1354343849355792252/primeicons) file in Figma and move it to your team project.
+
+    ![Adding PrimeIcons - step 1](https://primefaces.org/cdn/uikit/primeicons-1.png)
+
+- Publish the PrimeIcons file and enable it for all team files in your Team Settings.
+
+    ![Adding PrimeIcons - step 2](https://primefaces.org/cdn/uikit/primeicons-2.png)
+
+- Return to your PrimeOne file. In the Libraries panel, click on the banner that says "Includes X missing libraries."
+
+    ![Adding PrimeIcons - step 3](https://primefaces.org/cdn/uikit/primeicons-3.png)
+
+- From the dropdown, select "**PrimeIcons (Community)**" and click the **Swap Library** button.
+
+    ![Adding PrimeIcons - step 4](https://primefaces.org/cdn/uikit/primeicons-4.png)
+
+## FAQ
+
+### Usage
+
+**What should we do after purchasing? I can't publish the Preview file?**
+
+The Preview file is **view-only**, so it can't be published. To use the library, download the .fig file from PrimeStore and import it into your Figma workspace. Once imported, you'll be able to open the file and publish it as a library for use in your projects.
+
+**How to change theme?**
+
+To enable theme switching in PrimeOne, you need to set up the Variable modes. Select the layers you want to switch between Light or Dark. Then, under Appearance, use the Apply variable modes icon to assign both the Semantic and Component modes to the target theme.
+
+### Components
+
+**How to change base font size?**
+
+The base font size used in PrimeOne is 14px. Similar to how rem works in CSS, this is controlled by the scale/\* variables located under the "Primitive" collection in Variables.
+
+When you change the values of these variables, all size calculations will adjust accordingly.
+
+Note that not all variables in the library may be linked to scale/\* variables. So it's essential to check components individually.
+
+### Updates
+
+**Will there be a completely new Figma file with each update, or will the current PrimeOne file be modified and versioned?**
+
+Each update will come as a new Figma file—an updated version of the previous one. You can seamlessly transition to the new version in your consumer files using Figma's **Swap Library** feature.
+
+**Will the PrimeOne UI Kit stay in sync with ongoing updates to the Prime UI Libraries?**
+
+The PrimeOne UI Kit does not update in real time alongside the libraries. However, we regularly release updates to bridge the gap and ensure alignment with key changes.
+
+**How will users receive new components when they're added?**
+
+New components will be included in future updates to the UI Kit. Please note that these updates may not coincide immediately with library changes and may take some time to roll out.
+
+**How frequently is the PrimeOne UI Kit updated?**
+
+We don't follow a fixed release schedule. Updates are made as needed, based on significant changes or additions to the Prime UI libraries.
+
+### Roadmap
+
+**Are there plans to add a Tailwind theme to the UI Kit?**
+
+At this time, we do not plan to include Tailwind theme support in the Figma UI Kit.
+
+### Licence
+
+**Will purchasing a PrimeBlocks license include access to PrimeOne components?**
+
+No. The PrimeBlocks license does not grant access to the PrimeOne UI Kit. They are separate products with individual licenses.
+
+## Limitations
+
+Current known technical limitations are listed at this section.
+
+- **Multiple-value variables** - Figma currently supports only a single value per variable. For this reason, multi-value tokens defined in PrimeUIX—such as padding or margin, which can contain multiple values—are represented in Figma as separate variables for each side (top/right/bottom/left) or axis (x/y), unlike the combined multi-value CSS definitions in PrimeUIX.
+- **Calculations** - Since Figma does not yet allow calculations within variable definitions, values that rely on expressions like calc() cannot function dynamically. In these cases, any adjustments you make may require manual updates.
+- **Focus Rings** - In Tokens Studio, focus rings could be positioned by calculating the outer stroke distance using expressions such as focus.ring.width + focus.ring.offset. Since Figma Variables do not support arithmetic operations, these calculations cannot be reproduced. As a result, focus ring width values are no longer dynamically linked and must be handled as static values.
+- **Color Mix** - Figma Variables do not currently support color mix modifiers. Values in PrimeUIX that rely on color mixing have therefore been converted into raw hex values when brought into Figma Variables.
+
+## Support
+
+The community gathers on [GitHub Discussions](https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit) and [Discord](https://discord.gg/gzKFYnpmCY) to ask questions, share ideas, and discuss the technology. For direct inquiries or suggestions, feel free to contact us at [contact@primetek.com.tr](mailto:contact@primetek.com.tr).

package/data/llms/styled/add-ons/uikit/overview.md

@@ -0,0 +1,204 @@
+# UI Kit
+
+PrimeOne is PrimeTek's official Figma UI Kit, designed to match the implementations in the Prime UI Suites.
+
+<img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/primeone-cover-light.jpg" alt="PrimeOne Figma UI Kit" className="w-full rounded-[50px] mb-8!" />
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="flex flex-col gap-20">
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-figma.png" alt="Best Features of Figma" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">UP-TO-DATE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Best Features of Figma</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables and interactive components. It'll always follow the best practices.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Auto Layout</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Variants</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Variables and Styles</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Interactive Components</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Boolean, Instance Swap & Text</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Nested Instances</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row-reverse items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-system.png" alt="Powerful System" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Powerful System</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Numerous Components</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Icon Library</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Easy Customization</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Atomic Approach</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-themes.png" alt="Two Themes" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">DARK MODE</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Two Themes</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's native variable modes.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Aura Light</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Aura Dark</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row-reverse items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/uikit/uikit-tokens.png" alt="Variables Support" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">VARIABLE MANAGEMENT</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Variables Support</div>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Native Figma Variables unlock a whole new level of flexibility, allowing you to create, manage, and apply design tokens seamlessly—without relying on external plugins.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Countless Variables</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Light and Dark Modes</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Well Documented</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Primitive, Semantic & Component</span></div>
+                </div>
+            </div>
+        </div>
+        <div className="flex flex-col md:flex-row items-center gap-6 md:gap-20">
+            <div className="w-full md:w-1/2">
+                <img src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/common.images/designer/feature-2.png" alt="Figma to Theme Code" className="w-full rounded-xl mb-0!" />
+            </div>
+            <div className="w-full md:w-1/2">
+                <div className="text-primary font-bold mb-2">AUTOMATED</div>
+                <div className="text-5xl font-bold text-surface-900 dark:text-surface-0 mb-4">Figma to Theme Code</div>
+                <p className="text-surface-500 dark:text-surface-400 text-sm italic">This feature requires a <a href="/docs/styled/add-ons/designer/overview">Theme Designer</a> subscription.</p>
+                <p className="text-lg text-surface-600 dark:text-surface-300 mb-4">Sync design tokens from Figma to theme code with ease. Export token.json to the Visual Editor or generate and sync themes directly to your repository via the Figma plugin.</p>
+                <div className="flex flex-wrap text-lg mt-4">
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Automatic Mapping</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Eliminate Handoff</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">CI Pipeline</span></div>
+                    <div className="flex items-center w-1/2 p-4"><i className="pi pi-check-circle text-green-600 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Live Preview</span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<a href="https://www.figma.com/design/iKOqMjb5gBhqMQ0bZyzD0Y/Preview-%7C-PrimeOne-%7C-4.0.0?node-id=806-36648" target="_blank" rel="noopener noreferrer" className="flex flex-col md:flex-row items-center justify-center gap-8 p-12 mb-8 rounded-[50px] bg-linear-to-br from-blue-50 to-purple-50 dark:from-blue-950 dark:to-purple-950 border-2 border-transparent hover:border-primary transition-colors duration-300 no-underline! hover:no-underline!">
+    <div className="flex flex-col items-center md:items-start text-center md:text-left">
+        <span className="text-primary font-semibold text-sm uppercase tracking-wider mb-2">Figma UI Kit</span>
+        <span className="text-surface-900 dark:text-surface-0 text-5xl md:text-6xl font-bold mb-3">Preview</span>
+        <p className="text-surface-600 dark:text-surface-300 text-lg max-w-2xl mb-0!">Explore our complete design system with all components, variants, and interactive elements in Figma</p>
+    </div>
+    <div className="flex items-center justify-center shrink-0">
+        <svg width="80" height="80" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg">
+            <path d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z" fill="#0acf83" />
+            <path d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z" fill="#a259ff" />
+            <path d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z" fill="#f24e1e" />
+            <path d="M100 0h50c27.6 0 50 22.4 50 50s-22.4 50-50 50h-50V0z" fill="#ff7262" />
+            <path d="M200 150c0 27.6-22.4 50-50 50s-50-22.4-50-50 22.4-50 50-50 50 22.4 50 50z" fill="#1abcfe" />
+        </svg>
+    </div>
+</a>
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-2">Pricing</div>
+    <div className="text-center text-lg text-surface-600 dark:text-surface-300 mb-8">Choose the right plan for your business. <a href="https://www.primefaces.org/uikit/licenses">View License Details</a>.</div>
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Single Designer</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For individual designers</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">$249</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">1 Designer</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Auto Layout & Variants</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Interactive Components</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Variables Support</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Free Updates</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="https://primeui.store/uikit" className="bg-blue-500 text-white hover:bg-blue-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Buy Now</a>
+        </div>
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Team</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For small teams</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">$990</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Up to 5 Designers</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Auto Layout & Variants</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Interactive Components</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Variables Support</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Free Updates</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="https://primeui.store/uikit" className="bg-purple-500 text-white hover:bg-purple-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Buy Now</a>
+        </div>
+        <div className="flex flex-col shadow rounded-md p-8 bg-surface-0 dark:bg-surface-900">
+            <div className="text-xl font-medium text-surface-900 dark:text-surface-0 mb-2">Enterprise</div>
+            <div className="text-surface-500 dark:text-surface-400 font-medium">For large teams</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="text-2xl font-bold text-surface-900 dark:text-surface-0">Exclusive Deals</div>
+            <div className="border-t border-surface-200 dark:border-surface-700 my-4" />
+            <div className="flex flex-col grow text-lg">
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="font-bold text-surface-800 dark:text-surface-100">Custom Team Size</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Auto Layout & Variants</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Interactive Components</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Variables Support</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">1 Year Free Updates</span></div>
+                <div className="flex items-center mb-4"><i className="pi pi-check-circle text-green-500 mr-2" /><span className="text-surface-700 dark:text-surface-200">Use on Unlimited Projects</span></div>
+            </div>
+            <div className="border-t border-surface-200 dark:border-surface-700 mb-4 mt-auto" />
+            <a href="mailto:contact@primetek.com.tr" className="bg-gray-500 text-white hover:bg-gray-400 p-4 w-full rounded text-center font-bold no-underline! hover:no-underline! transition-colors">Contact Us</a>
+        </div>
+    </div>
+</div>
+
+<div className="card rounded-[50px]! p-8! md:p-12! mb-8!">
+    <div className="text-5xl font-bold text-center text-surface-900 dark:text-surface-0 mb-8">Frequently Asked Questions</div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">What do I get when I purchase a license?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">You'll be able to download the Figma file of PrimeOne UI Kit.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Is there a recurring fee or is the license perpetual?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">UI Kit license is perpetual so requires one time payment with 1 year free updates, not subscription based.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I use UI Kit license for commercial projects?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I create multiple projects for multiple clients?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">What does "Free Updates" mean?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">All updates are completely free for the first year after your purchase. After this period, you keep access to every version released within that first year indefinitely.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">How can I extend my access to updates?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">At PrimeStore, you have the option to purchase an additional update term for another year.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">Can I include UI Kit in an open source project?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
+        </div>
+        <div>
+            <div className="font-bold text-surface-900 dark:text-surface-0 mb-2">How can I get support?</div>
+            <p className="text-surface-600 dark:text-surface-300 mb-0! leading-normal">Seek assistance in our community via our public <a href="https://discord.com/invite/gzKFYnpmCY">Discord</a> and <a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit">Forum</a>.</p>
+        </div>
+    </div>
+</div>