Add UI Kit

public/images/uikit/logo-figma-dark.svg

@@ -0,0 +1,8 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="60" height="60" rx="30" fill="#424242"/>
+<path d="M44.0805 16.6833C44.0805 20.3744 41.0883 23.3667 37.3972 23.3667H30.5403V10H37.3972C41.0883 10 44.0805 12.9922 44.0805 16.6833Z" stroke="white" stroke-width="2.61787"/>
+<path d="M17 16.6833C17 20.3744 19.9922 23.3667 23.6833 23.3667H30.5403V10H23.6833C19.9922 10 17 12.9922 17 16.6833Z" stroke="white" stroke-width="2.61787"/>
+<path d="M17 30.0501C17 33.7413 19.9922 36.7335 23.6833 36.7335H30.5403V23.3668H23.6833C19.9922 23.3668 17 26.359 17 30.0501Z" stroke="white" stroke-width="2.61787"/>
+<path d="M17 43.4166C17 47.1077 20.0353 50.0999 23.7265 50.0999C27.4655 50.0999 30.5403 47.0688 30.5403 43.3298V36.7333H23.6833C19.9922 36.7333 17 39.7255 17 43.4166Z" stroke="white" stroke-width="2.61787"/>
+<path d="M30.5403 30.0501C30.5403 33.7413 33.5325 36.7335 37.2236 36.7335H37.3972C41.0883 36.7335 44.0805 33.7413 44.0805 30.0501C44.0805 26.359 41.0883 23.3668 37.3972 23.3668H37.2236C33.5325 23.3668 30.5403 26.359 30.5403 30.0501Z" stroke="white" stroke-width="2.61787"/>
+</svg>

public/images/uikit/logo-figma-light.svg

@@ -0,0 +1,8 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="60" height="60" rx="30" fill="#E9ECEF"/>
+<path d="M44.0805 16.6833C44.0805 20.3744 41.0883 23.3667 37.3972 23.3667H30.5403V10H37.3972C41.0883 10 44.0805 12.9922 44.0805 16.6833Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M17 16.6833C17 20.3744 19.9922 23.3667 23.6833 23.3667H30.5403V10H23.6833C19.9922 10 17 12.9922 17 16.6833Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M17 30.0501C17 33.7413 19.9922 36.7335 23.6833 36.7335H30.5403V23.3668H23.6833C19.9922 23.3668 17 26.359 17 30.0501Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M17 43.4166C17 47.1077 20.0353 50.0999 23.7265 50.0999C27.4655 50.0999 30.5403 47.0688 30.5403 43.3298V36.7333H23.6833C19.9922 36.7333 17 39.7255 17 43.4166Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M30.5403 30.0501C30.5403 33.7413 33.5325 36.7335 37.2236 36.7335H37.3972C41.0883 36.7335 44.0805 33.7413 44.0805 30.0501C44.0805 26.359 41.0883 23.3668 37.3972 23.3668H37.2236C33.5325 23.3668 30.5403 26.359 30.5403 30.0501Z" stroke="#212121" stroke-width="2.61787"/>
+</svg>

src/assets/menu/menu.json

@@ -84,6 +84,17 @@
                 }
             ]
         },
+        {
+            "name": "UI Kit",
+            "meta": ["ui kit"],
+            "children": [
+                {
+                    "name": "Figma",
+                    "to": "/uikit",
+                    "badge": "NEW"
+                }
+            ]
+        },
         {
             "name": "Accessibility",
             "meta": ["accessibility"],

src/router/index.js

@@ -39,6 +39,11 @@ const routes = [
             name: 'support',
             component: () => import('../views/support/Support.vue')
         },
+        {
+            path: '/uikit',
+            name: 'uikit',
+            component: () => import('../views/uikit/UIKit.vue')
+        },
         {
             path: '/theming',
             name: 'theming',

src/views/uikit/UIKit.vue

@@ -0,0 +1,283 @@
+<template>
+    <div>
+        <div class="content-section">
+            <div style="border-radius: 50px; max-height: 500px" class="overflow-hidden mb-5 flex align-items-center">
+                <img alt="PrimeNG Designer" :src="coverImage" class="w-full"/>
+            </div>
+
+            <div class="card mb-5" style="border-radius: 50px">
+                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                    <div class="w-full md:w-6">
+                        <img alt="PrimeNG Designer" src="images/uikit/uikit-figma.png" class="w-full"/>
+                    </div>
+                    <div class="w-full md:w-6">
+                        <div class="text-primary font-bold mb-2">UP-TO-DATE</div>
+                        <div class="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
+                        <p class="mb-3">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles and interactive components. 
+                            It'll always follow the best practices.</p>
+                        
+                        <ul class="flex flex-wrap m-0 p-0">
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Auto Layout</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Variants</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Styles</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Interactive Components</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                    <div class="w-full md:w-6">
+                        <div class="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
+                        <div class="text-900 text-5xl font-bold mb-3">Powerful System</div>
+                        <p class="mb-3">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>
+                        
+                        <ul class="flex flex-wrap m-0 p-0">
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Numerous Components</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Icon Library</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Easy Customization</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Atomic Approach</span>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="w-full md:w-6">
+                        <img alt="PrimeNG Designer" src="images/uikit/uikit-system.png" class="w-full"/>
+                    </div>
+                </div>
+                <div class="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
+                    <div class="w-full md:w-6">
+                        <img alt="PrimeNG Designer" src="images/uikit/uikit-themes.png" class="w-full"/>
+                    </div>
+                    <div class="w-full md:w-6">
+                        <div class="text-primary font-bold mb-2">DARK MODE</div>
+                        <div class="text-900 text-5xl font-bold mb-3">Two Themes</div>
+                        <p class="mb-3">PrimeOne is designed based on Lara Blue Light and Lara Blue Dark themes. Easily change the themes of your designs using Figma's Swap Library feature.</p>
+                        
+                        <ul class="flex flex-wrap m-0 p-0">
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Lara Light</span>
+                            </li>
+                            <li class="flex align-items-center w-6 p-3">
+                                <i class="pi pi-check-circle text-green-600 mr-2"></i>
+                                <span class="font-bold">Lara Dark</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex flex-column md:flex-row gap-4 md:gap-8 mb-5">
+                <a href="https://www.figma.com/file/c3BuENd8nGcyPmn7ADieee/Preview-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648" class="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300" style="border-radius: 50px">
+                    <span class="text-gray-900 text-4xl font-bold mb-5">Preview Light</span>
+                    <img alt="PrimeNG Designer" src="images/uikit/logo-figma-light.svg" class="w-4rem"/>
+                </a>
+                <a href="https://www.figma.com/file/LJBqVfMpK8xY6KR2KIc8RK/Preview-%7C-Dark-%7C-PrimeOne-2022-%7C-1.0.0?node-id=806%3A36648" class="p-5 w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300" style="border-radius: 50px">
+                    <span class="text-white text-4xl font-bold mb-5">Preview Dark</span>
+                    <img alt="PrimeNG Designer" src="images/uikit/logo-figma-dark.svg" class="w-4rem"/>
+                </a>
+            </div>
+
+            <div class="card mb-5" style="border-radius: 50px">
+                <div class="text-900 font-bold text-5xl mb-4 text-center">Pricing</div>
+                <div class="mb-6 text-center line-height-3">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
+
+                <div class="grid">
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Single Designer</div>
+                                <div class="text-600 font-medium">For individual designers</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div>
+                                    <span class="font-bold text-2xl text-900">$99</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span class="font-bold">1 Designer</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Auto Layout & Variants</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Interactive Components</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Lifetime Support</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Use on Unlimited Projects</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
+                                <a href="https://www.primefaces.org/store/uikit.xhtml" pRipple class="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Buy Now</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-5 h-full flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Team</div>
+                                <div class="text-600 font-medium">For small teams</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div>
+                                    <span class="font-bold text-2xl text-900">$249</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span class="font-bold">Up to 5 Designers</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Auto Layout & Variants</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Interactive Components</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Lifetime Support</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Use on Unlimited Projects</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                <a href="https://www.primefaces.org/store/uikit.xhtml" pRipple class="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Buy Now</a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-12 lg:col-4">
+                        <div class="p-3 h-full">
+                            <div class="shadow-2 p-5 flex flex-column surface-card" style="border-radius: 6px">
+                                <div class="text-900 font-medium text-xl mb-2">Enterprise</div>
+                                <div class="text-600 font-medium">For large teams</div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <div>
+                                    <span class="font-bold text-2xl text-900">Exclusive Deals</span>
+                                </div>
+                                <hr class="my-3 mx-0 border-top-1 border-none surface-border" />
+                                <ul class="list-none p-0 m-0 flex-grow-1">
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span class="font-bold">Unlimited Designers</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Auto Layout & Variants</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Interactive Components</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Lifetime Support</span>
+                                    </li>
+                                    <li class="flex align-items-center mb-3">
+                                        <i class="pi pi-check-circle text-green-500 mr-2"></i>
+                                        <span>Use on Unlimited Projects</span>
+                                    </li>
+                                </ul>
+                                <hr class="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                <a href="mailto:contact@primetek:com.tr" pRipple class="bg-bluegray-500 text-white hover:bg-bluegray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">Contact Us</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card" style="border-radius: 50px">
+                <span class="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
+                <div class="grid">
+                    <div class="col-12 lg:col-4 px-2 lg:px-5">
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What do I get when I purchase a license?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">You'll be able to download two Figma files for light and dark themes.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Is there a recurring fee or is the license perpetual?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">UI Kit license is perpetual so requires one time payment, not subscription based.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I use UI Kit license for commercial projects?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I create multiple projects for multiple clients?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+                    </div>
+                    <div class="col-12 lg:col-4 px-2 lg:px-5">
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Yes, after the purchase, please <a href="mailto:contact@primetek.com.tr" class="text-primary-500 no-underline hover:underline">contact us</a> so we can transfer the license to your client.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Does the enterprise license include contractors within the organization?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Yes, contractors are also able to use the UI Kit within your company.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What does "free updates" mean?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">All updates will be totally free of charge for existing customers for an unlimited period.</p>
+                    </div>
+                    <div class="col-12 lg:col-4 px-2 lg:px-5">
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">How can I get support?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Support is provided by PrimeTek via 
+                                <a href="https://forum.primefaces.org/viewforum.php?f=159" class="text-primary-500 no-underline hover:underline">a dedicated forum channel monitored</a> by PrimeTek support staff.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">What does lifetime support mean?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">Support service at the forum does not have a time limit.</p>
+
+                        <div class="text-xl text-900 line-height-3 mb-2 text-900">Can I include UI Kit in an open source project?</div>
+                        <p class="mt-0 mb-6 p-0 line-height-3">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>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+         isDarkTheme() {
+            return this.$appState.darkTheme === true;
+        }
+    },
+    computed: {
+        coverImage() {
+            return this.$appState.darkTheme ? 'images/uikit/primeone-cover-dark.jpeg' : 'images/uikit/primeone-cover-light.jpeg';
+        }
+    }
+}
+</script>
+