From c2224ade8f14f1e5fa5fb407e6a2bc7e0012e782 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 26 Dec 2024 17:46:35 +0300
Subject: [PATCH] Genesis promo and Laravel installation pages added

---
 apps/showcase/assets/menu/menu.json           |   4 +
 .../components/template/TemplateHero.vue      |   7 +-
 .../components/template/logo/GenesisLogo.vue  |  30 +++
 .../template/separator/GenesisSeparator.vue   |  28 +++
 apps/showcase/doc/laravel/DownloadDoc.vue     |  27 +++
 apps/showcase/doc/laravel/ExamplesDoc.vue     |   9 +
 apps/showcase/doc/laravel/NextStepsDoc.vue    |  12 +
 apps/showcase/doc/laravel/PluginDoc.vue       |  24 ++
 apps/showcase/doc/laravel/ThemeDoc.vue        |  29 +++
 apps/showcase/doc/laravel/VerifyDoc.vue       |  49 ++++
 apps/showcase/doc/setup/GuidesDoc.vue         |  28 ++-
 apps/showcase/pages/laravel/index.vue         |  64 ++++++
 .../pages/templates/genesis/index.vue         | 212 ++++++++++++++++++
 apps/showcase/pages/templates/index.vue       |  20 ++
 14 files changed, 538 insertions(+), 5 deletions(-)
 create mode 100644 apps/showcase/components/template/logo/GenesisLogo.vue
 create mode 100644 apps/showcase/components/template/separator/GenesisSeparator.vue
 create mode 100644 apps/showcase/doc/laravel/DownloadDoc.vue
 create mode 100644 apps/showcase/doc/laravel/ExamplesDoc.vue
 create mode 100644 apps/showcase/doc/laravel/NextStepsDoc.vue
 create mode 100644 apps/showcase/doc/laravel/PluginDoc.vue
 create mode 100644 apps/showcase/doc/laravel/ThemeDoc.vue
 create mode 100644 apps/showcase/doc/laravel/VerifyDoc.vue
 create mode 100644 apps/showcase/pages/laravel/index.vue
 create mode 100644 apps/showcase/pages/templates/genesis/index.vue

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index a982277a6..b274d15e2 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -33,6 +33,10 @@
                 {
                     "name": "CDN",
                     "to": "/cdn"
+                },
+                {
+                    "name": "Laravel",
+                    "to": "/laravel"
                 }
             ]
         },
diff --git a/apps/showcase/components/template/TemplateHero.vue b/apps/showcase/components/template/TemplateHero.vue
index 02d121cd2..4e6374044 100644
--- a/apps/showcase/components/template/TemplateHero.vue
+++ b/apps/showcase/components/template/TemplateHero.vue
@@ -6,8 +6,11 @@
                 class="absolute top-0 left-0 w-full h-full backdrop-blur-[2px] rounded-3xl border border-[rgba(255,255,255,0.24)] [background:linear-gradient(180deg,rgba(170,140,255,0.00)_0%,var(--p-primary-400)/0.8_100%),rgba(255,255,255,0.10)] shadow-[0px_2px_4px_0px_rgba(255,255,255,0.24)_inset,0px_48px_80px_0px_rgba(0,0,0,0.08),0px_-5px_13px_-2px_rgba(255,255,255,0.55)_inset]"
             />
             <div class="z-10 relative">
-                <div class="h-8 lg:h-10 [&>svg]:h-full [&>svg]:w-auto select-none">
-                    <component :is="templateHeroData.logo"> </component>
+                <div class="flex gap-4 items-center">
+                    <div class="h-8 lg:h-10 [&>svg]:h-full [&>svg]:w-auto select-none">
+                        <component :is="templateHeroData.logo"> </component>
+                    </div>
+                    <div v-if="templateHeroData.isMultipurpose" class="bg-surface-0 text-surface-900 px-2 py-1 font-medium leading-6 rounded-md">Multipurpose</div>
                 </div>
                 <p class="text-primary-contrast mt-4 mb-0 lg:text-base text-sm">{{ templateHeroData.description }}</p>
                 <div class="flex items-center gap-4 mt-8">
diff --git a/apps/showcase/components/template/logo/GenesisLogo.vue b/apps/showcase/components/template/logo/GenesisLogo.vue
new file mode 100644
index 000000000..2551abda3
--- /dev/null
+++ b/apps/showcase/components/template/logo/GenesisLogo.vue
@@ -0,0 +1,30 @@
+<template>
+    <svg width="168" height="39" viewBox="0 0 168 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M37.3347 19.4999C38.1902 19.4999 38.8902 18.8052 38.8221 17.9523C38.5587 14.6525 37.4559 11.4652 35.6073 8.69855C33.471 5.50135 30.4346 3.00943 26.882 1.53792C23.3295 0.0664072 19.4203 -0.318607 15.649 0.431563C11.8776 1.18173 8.41341 3.0334 5.69441 5.75239C2.97541 8.47139 1.12375 11.9356 0.373579 15.707C-0.376591 19.4783 0.00842391 23.3874 1.47994 26.94C2.95145 30.4925 5.44337 33.5289 8.64057 35.6653C11.4072 37.5139 14.5945 38.6166 17.8943 38.8801C18.7472 38.9482 19.4419 38.2482 19.4419 37.3926V32.7142C19.4419 31.8586 18.7453 31.1756 17.8973 31.0623C16.1379 30.8273 14.4482 30.1928 12.9611 29.1991C11.0428 27.9173 9.54763 26.0955 8.66473 23.964C7.78182 21.8324 7.55081 19.487 8.00091 17.2241C8.45102 14.9613 9.56201 12.8828 11.1934 11.2514C12.8248 9.62 14.9033 8.509 17.1662 8.0589C19.429 7.6088 21.7744 7.8398 23.906 8.72271C26.0375 9.60562 27.8593 11.1008 29.1411 13.0191C30.1348 14.5062 30.7693 16.1959 31.0043 17.9553C31.1176 18.8033 31.8006 19.4999 32.6562 19.4999H37.3347Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M28.4704 21.3644C28.4792 21.3216 28.4464 21.2815 28.4027 21.2815H22.7723C21.9167 21.2815 21.2232 21.9751 21.2232 22.8307V28.4608C21.2232 28.5045 21.2632 28.5373 21.3061 28.5285C24.9007 27.7901 27.7319 24.959 28.4704 21.3644Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M30.9616 21.2815C30.8952 21.2815 30.8387 21.3303 30.8279 21.3958C30.0254 26.2509 26.1926 30.0836 21.3375 30.8859C21.2719 30.8968 21.2232 30.9532 21.2232 31.0197V37.3928C21.2232 38.2483 21.9167 38.9419 22.7723 38.9419H25.8706C26.7262 38.9419 27.4198 38.2483 27.4198 37.3928V31.4297C27.4198 31.405 27.4497 31.3926 27.4672 31.4101L33.9755 37.9184C34.5805 38.5234 35.5614 38.5234 36.1664 37.9184L37.86 36.2247C38.465 35.6198 38.465 34.6389 37.86 34.0339L31.3517 27.5256C31.3342 27.5081 31.3466 27.4782 31.3713 27.4782H37.3344C38.19 27.4782 38.8835 26.7846 38.8835 25.929V22.8307C38.8835 21.9751 38.19 21.2815 37.3344 21.2815H30.9616Z"
+            :fill="fillColor"
+        />
+        <path
+            d="M63.2988 31.3745C56.7762 31.3745 52.4538 26.9117 52.4538 19.5308C52.4538 11.9783 56.9946 7.65587 63.486 7.65587C69.0568 7.65587 73.0359 11.1356 73.426 16.0666H68.4794C68.1674 13.6479 66.2324 11.9315 63.5641 11.9315C59.7098 11.9315 57.5252 14.8183 57.5252 19.4996C57.5252 24.1341 59.585 27.0989 63.6577 27.0989C66.9034 27.0833 68.8695 24.9143 68.9632 22.3552H63.6421V18.7038H73.5821V31H70.2739L69.9775 28.3317H69.9306C68.3546 30.2198 66.3729 31.3745 63.2988 31.3745ZM82.8042 31.2497C77.7952 31.2653 74.6588 27.9571 74.6588 22.7765C74.6588 17.7207 77.8108 14.2877 82.695 14.2721C87.5168 14.2877 90.5596 17.6271 90.5596 22.7609V23.8688H79.2777V23.9936C79.2621 26.1314 80.604 27.8011 82.8511 27.8167C84.4115 27.8011 85.7067 27.0365 86.1124 25.8037H90.4192C89.8262 29.0963 86.9394 31.2653 82.8042 31.2497ZM79.2777 21.0132H86.206C86.1436 19.0627 84.6612 17.7207 82.7574 17.7051C80.7445 17.7207 79.3713 19.1875 79.2777 21.0132ZM97.3319 21.7466V31H92.5414V14.5218H97.1759V17.5334H97.2383C98.0029 15.5829 99.8286 14.2721 102.372 14.2721C105.899 14.2721 108.505 16.7376 108.505 20.7479V31H103.698V21.5906C103.698 19.4372 102.497 18.2356 100.578 18.2356C98.7051 18.2356 97.3319 19.406 97.3319 21.7466ZM118.663 31.2497C113.654 31.2653 110.518 27.9571 110.518 22.7765C110.518 17.7207 113.67 14.2877 118.554 14.2721C123.376 14.2877 126.418 17.6271 126.418 22.7609V23.8688H115.136V23.9936C115.121 26.1314 116.463 27.8011 118.71 27.8167C120.27 27.8011 121.565 27.0365 121.971 25.8037H126.278C125.685 29.0963 122.798 31.2653 118.663 31.2497ZM115.136 21.0132H122.065C122.002 19.0627 120.52 17.7207 118.616 17.7051C116.603 17.7207 115.23 19.1875 115.136 21.0132ZM142.429 19.7961H137.981C137.95 18.5165 136.811 17.7051 135.313 17.7051C133.94 17.7051 132.91 18.298 132.91 19.2187C132.91 19.9677 133.518 20.4983 134.86 20.7791L137.95 21.3877C141.009 22.0119 142.819 23.3227 142.819 25.8662C142.819 29.2211 139.713 31.2653 135.485 31.2653C130.959 31.2653 128.088 29.2211 127.823 25.7569H132.551C132.723 27.1457 133.815 27.8323 135.5 27.8323C136.983 27.8323 137.997 27.2862 137.997 26.3187C137.997 25.4448 137.17 25.0391 135.921 24.7895L133.097 24.2433C129.789 23.6035 128.197 21.9183 128.197 19.4216C128.197 16.2227 130.959 14.2877 135.219 14.2877C139.526 14.2877 142.335 16.3475 142.429 19.7961ZM144.738 31V14.5218H149.528V31H144.738ZM147.141 12.3684C145.643 12.3684 144.441 11.2137 144.457 9.79367C144.441 8.37368 145.643 7.21895 147.141 7.21895C148.608 7.21895 149.809 8.37368 149.825 9.79367C149.809 11.2137 148.608 12.3684 147.141 12.3684ZM166.147 19.7961H161.7C161.669 18.5165 160.53 17.7051 159.032 17.7051C157.658 17.7051 156.628 18.298 156.628 19.2187C156.628 19.9677 157.237 20.4983 158.579 20.7791L161.669 21.3877C164.727 22.0119 166.537 23.3227 166.537 25.8662C166.537 29.2211 163.432 31.2653 159.203 31.2653C154.678 31.2653 151.807 29.2211 151.541 25.7569H156.27C156.441 27.1457 157.534 27.8323 159.219 27.8323C160.701 27.8323 161.715 27.2862 161.715 26.3187C161.715 25.4448 160.888 25.0391 159.64 24.7895L156.816 24.2433C153.508 23.6035 151.916 21.9183 151.916 19.4216C151.916 16.2227 154.678 14.2877 158.938 14.2877C163.245 14.2877 166.054 16.3475 166.147 19.7961Z"
+            :fill="fillColor"
+        />
+    </svg>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/components/template/separator/GenesisSeparator.vue b/apps/showcase/components/template/separator/GenesisSeparator.vue
new file mode 100644
index 000000000..ab31886ef
--- /dev/null
+++ b/apps/showcase/components/template/separator/GenesisSeparator.vue
@@ -0,0 +1,28 @@
+<template>
+    <TemplateSeparator>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+            <path
+                d="M23.0438 12.5C23.5718 12.5 24.0039 12.0712 23.9619 11.5448C23.7992 9.50803 23.1186 7.54079 21.9776 5.83315C20.659 3.85976 18.7849 2.3217 16.5922 1.41345C14.3994 0.505199 11.9867 0.26756 9.65889 0.730581C7.33113 1.1936 5.19294 2.33649 3.51471 4.01471C1.83649 5.69294 0.693602 7.83113 0.230581 10.1589C-0.23244 12.4867 0.00519942 14.8994 0.913448 17.0922C1.8217 19.2849 3.35976 21.159 5.33315 22.4776C7.04079 23.6186 9.00803 24.2992 11.0448 24.4619C11.5712 24.5039 12 24.0718 12 23.5438V20.6561C12 20.128 11.57 19.7065 11.0466 19.6366C9.96068 19.4915 8.91777 19.0998 7.99987 18.4865C6.81584 17.6954 5.893 16.5709 5.34806 15.2553C4.80311 13.9397 4.66052 12.492 4.93834 11.0953C5.21615 9.69866 5.90188 8.41575 6.90881 7.40881C7.91575 6.40188 9.19866 5.71615 10.5953 5.43834C11.992 5.16052 13.4397 5.30311 14.7553 5.84806C16.0709 6.39301 17.1954 7.31584 17.9865 8.49988C18.5998 9.41777 18.9915 10.4607 19.1365 11.5466C19.2065 12.07 19.628 12.5 20.1561 12.5H23.0438Z"
+                :fill="fillColor"
+            />
+            <path
+                d="M17.566 13.6824C17.575 13.6397 17.5422 13.5996 17.4985 13.5996H14.0556C13.5275 13.5996 13.0994 14.0277 13.0994 14.5558V17.9985C13.0994 18.0422 13.1394 18.0751 13.1822 18.066C15.3753 17.6025 17.1023 15.8755 17.566 13.6824Z"
+                :fill="fillColor"
+            />
+            <path
+                d="M19.1544 13.5996C19.0879 13.5996 19.0315 13.6483 19.0203 13.7138C18.5118 16.6753 16.1751 19.0119 13.2136 19.5203C13.1481 19.5316 13.0994 19.588 13.0994 19.6544V23.5438C13.0994 24.0719 13.5275 24.5 14.0556 24.5H15.9679C16.496 24.5 16.9241 24.0719 16.9241 23.5438V19.889C16.9241 19.8642 16.954 19.8518 16.9715 19.8693L20.9704 23.8683C21.3438 24.2417 21.9492 24.2417 22.3227 23.8683L23.368 22.8229C23.7414 22.4495 23.7414 21.8441 23.368 21.4707L19.3691 17.4717C19.3516 17.4542 19.364 17.4243 19.3887 17.4243H23.0436C23.5717 17.4243 23.9998 16.9962 23.9998 16.4682V14.5558C23.9998 14.0277 23.5717 13.5996 23.0436 13.5996H19.1544Z"
+                :fill="fillColor"
+            />
+        </svg>
+    </TemplateSeparator>
+</template>
+
+<script>
+export default {
+    computed: {
+        fillColor() {
+            return this.$appState.darkTheme ? 'var(--p-surface-0)' : 'var(--p-surface-900)';
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/doc/laravel/DownloadDoc.vue b/apps/showcase/doc/laravel/DownloadDoc.vue
new file mode 100644
index 000000000..b59265dfe
--- /dev/null
+++ b/apps/showcase/doc/laravel/DownloadDoc.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue is available for download on <a href="https://www.npmjs.com/package/primevue">npm registry</a>.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+# Using npm
+npm install primevue @primevue/themes
+
+# Using yarn
+yarn add primevue @primevue/themes
+
+# Using pnpm
+pnpm add primevue @primevue/themes
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/laravel/ExamplesDoc.vue b/apps/showcase/doc/laravel/ExamplesDoc.vue
new file mode 100644
index 000000000..245070cd3
--- /dev/null
+++ b/apps/showcase/doc/laravel/ExamplesDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p class="mb-0">
+            We've created various samples for the popular options in the Vue ecosystem. Visit the <a href="https://github.com/primefaces/primevue-examples">primevue-examples</a> repository for more samples including
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/laravel-quickstart" target="_blank" rel="noopener noreferrer">laravel-quickstart</a> and
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/inertia-quickstart" target="_blank" rel="noopener noreferrer">inertia-quickstart</a>.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/laravel/NextStepsDoc.vue b/apps/showcase/doc/laravel/NextStepsDoc.vue
new file mode 100644
index 000000000..5c90c9e4f
--- /dev/null
+++ b/apps/showcase/doc/laravel/NextStepsDoc.vue
@@ -0,0 +1,12 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.</p>
+        <ul class="leading-relaxed">
+            <li><NuxtLink to="/configuration" class="doc-link">Global configuration</NuxtLink></li>
+            <li><NuxtLink to="/autoimport" class="doc-link">Auto imports with tree-shaking</NuxtLink></li>
+            <li><NuxtLink to="/theming/styled" class="doc-link">Customization of styles</NuxtLink></li>
+            <li><NuxtLink to="/passthrough" class="doc-link">Pass through attributes</NuxtLink></li>
+            <li><NuxtLink to="/support" class="doc-link">Getting support</NuxtLink></li>
+        </ul>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/laravel/PluginDoc.vue b/apps/showcase/doc/laravel/PluginDoc.vue
new file mode 100644
index 000000000..0dd0d8c8c
--- /dev/null
+++ b/apps/showcase/doc/laravel/PluginDoc.vue
@@ -0,0 +1,24 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>PrimeVue plugin is required to be installed as an application plugin to set up the default <NuxtLink to="/configuration">configuration</NuxtLink>. The plugin is lightweight, and only utilized for configuration purposes.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/laravel/ThemeDoc.vue b/apps/showcase/doc/laravel/ThemeDoc.vue
new file mode 100644
index 000000000..038895c17
--- /dev/null
+++ b/apps/showcase/doc/laravel/ThemeDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configure PrimeVue to use a theme like Aura.</p>
+        <DocSectionCode :code="code" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura
+    }
+});
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/laravel/VerifyDoc.vue b/apps/showcase/doc/laravel/VerifyDoc.vue
new file mode 100644
index 000000000..9867169da
--- /dev/null
+++ b/apps/showcase/doc/laravel/VerifyDoc.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Verify your setup by adding a component such as <NuxtLink to="/button">Button</NuxtLink>. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available
+            in the documentation of the corresponding component.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Button label="Verify" />
+    </div>
+    <DocSectionCode :code="code" importCode />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Button from "primevue/button"
+
+const app = createApp(App);
+app.component('Button', Button);
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Verify" />
+    </div>
+</template>
+
+<script>
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Verify" />
+    </div>
+</template>
+
+<script setup>
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/setup/GuidesDoc.vue b/apps/showcase/doc/setup/GuidesDoc.vue
index f087cc8d6..6a00118d7 100644
--- a/apps/showcase/doc/setup/GuidesDoc.vue
+++ b/apps/showcase/doc/setup/GuidesDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs"></DocSectionText>
     <div class="grid grid-cols-12 gap-4">
-        <div class="col-span-12 sm:col-span-4">
+        <div class="col-span-12 sm:col-span-3">
             <div class="card">
                 <NuxtLink to="/vite">
                     <span class="images">
@@ -57,7 +57,7 @@
                 </NuxtLink>
             </div>
         </div>
-        <div class="col-span-12 sm:col-span-4">
+        <div class="col-span-12 sm:col-span-3">
             <div class="card">
                 <NuxtLink to="/nuxt">
                     <span class="images">
@@ -81,7 +81,7 @@
                 </NuxtLink>
             </div>
         </div>
-        <div class="col-span-12 sm:col-span-4">
+        <div class="col-span-12 sm:col-span-3">
             <div class="card flex-1">
                 <NuxtLink to="/cdn">
                     <span class="images">
@@ -111,6 +111,28 @@
                 </NuxtLink>
             </div>
         </div>
+        <div class="col-span-12 sm:col-span-3">
+            <div class="card flex-1">
+                <NuxtLink to="/laravel">
+                    <span class="images">
+                        <svg width="62" height="63" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M61.065 14.527C61.0584 14.4981 61.0406 14.4737 61.0317 14.4448C61.0117 14.3937 60.9962 14.3404 60.9695 14.2937C60.9517 14.2626 60.9251 14.2359 60.9028 14.207C60.874 14.1693 60.8495 14.127 60.8162 14.0937C60.7873 14.0648 60.7517 14.0448 60.7206 14.0204C60.6851 13.9915 60.654 13.9604 60.614 13.9382L48.959 7.22742C48.6591 7.05409 48.2902 7.05409 47.9902 7.22742L36.3353 13.9382C36.2953 13.9604 36.2642 13.9937 36.2286 14.0204C36.1975 14.0448 36.1619 14.0648 36.1331 14.0937C36.0997 14.127 36.0753 14.1693 36.0464 14.207C36.0242 14.2359 35.9975 14.2626 35.9797 14.2937C35.9531 14.3404 35.9353 14.3937 35.9175 14.4448C35.9064 14.4715 35.8908 14.4981 35.8842 14.527C35.862 14.6092 35.8509 14.6937 35.8509 14.7803V27.5263L26.138 33.1194V8.18292C26.138 8.09626 26.1269 8.01182 26.1047 7.9296C26.098 7.90071 26.0803 7.87627 26.0714 7.84738C26.0514 7.79627 26.0358 7.74294 26.0092 7.69628C25.9914 7.66517 25.9647 7.63851 25.9425 7.60962C25.9136 7.57184 25.8892 7.52962 25.8558 7.49629C25.8269 7.4674 25.7914 7.4474 25.7603 7.42296C25.7247 7.39407 25.6936 7.36296 25.6536 7.34074L13.9987 0.629993C13.6987 0.456669 13.3298 0.456669 13.0299 0.629993L1.37493 7.34074C1.33493 7.36296 1.30382 7.3963 1.26827 7.42296C1.23716 7.4474 1.2016 7.4674 1.17272 7.49629C1.13939 7.52962 1.11494 7.57184 1.08605 7.60962C1.06383 7.63851 1.03717 7.66517 1.01939 7.69628C0.992728 7.74294 0.974949 7.79627 0.957173 7.84738C0.946062 7.87405 0.930509 7.90071 0.923842 7.9296C0.901621 8.01182 0.890511 8.09626 0.890511 8.18292V48.1052C0.890511 48.4519 1.07717 48.7741 1.37715 48.9474L24.6892 62.3689C24.7403 62.3978 24.7959 62.4156 24.8492 62.4356C24.8737 62.4444 24.8981 62.46 24.9248 62.4667C25.007 62.4889 25.0892 62.5 25.1736 62.5C25.2581 62.5 25.3403 62.4889 25.4225 62.4667C25.4447 62.46 25.4647 62.4467 25.487 62.44C25.5447 62.42 25.6025 62.4 25.6558 62.3711L48.9679 48.9496C49.2701 48.7763 49.4546 48.4563 49.4546 48.1074V35.3615L60.6229 28.9307C60.9251 28.7574 61.1095 28.4374 61.1095 28.0885V14.7803C61.0984 14.6937 61.085 14.6092 61.065 14.527ZM25.1559 46.9875L15.4608 41.5011L25.6425 35.6392L36.813 29.2085L46.5169 34.7948L39.3973 38.859L25.1559 46.9875ZM47.4991 22.0533V33.1194L43.4193 30.7706L37.7841 27.5263V16.4603L41.8639 18.809L47.4991 22.0533ZM48.4702 9.18953L58.1785 14.7803L48.4702 20.3712L38.7618 14.7803L48.4702 9.18953ZM18.554 37.4813L14.4742 39.8301V15.4559L20.1095 12.2116L24.1893 9.86283V34.2349L18.554 37.4813ZM13.5032 2.59433L23.2115 8.18514L13.5032 13.776L3.7948 8.18514L13.5032 2.59433ZM2.81707 9.86283L6.89685 12.2116L12.5321 15.4559V41.5078V41.51V41.5122C12.5321 41.55 12.5432 41.5856 12.5477 41.6211C12.5543 41.6678 12.5543 41.7167 12.5677 41.7633V41.7656C12.5788 41.8033 12.5988 41.8389 12.6143 41.8744C12.6321 41.9144 12.6432 41.9589 12.6654 41.9967C12.6654 41.9967 12.6654 41.9989 12.6677 41.9989C12.6877 42.0322 12.7165 42.0611 12.741 42.0922C12.7677 42.1278 12.7899 42.1633 12.821 42.1944L12.8232 42.1966C12.8499 42.2233 12.8854 42.2433 12.9165 42.2678C12.9521 42.2944 12.9832 42.3255 13.021 42.3477C13.0232 42.3477 13.0232 42.3477 13.0254 42.35C13.0276 42.35 13.0276 42.3522 13.0299 42.3522L24.1937 48.6696V59.8446L2.81707 47.543V9.86283ZM47.4991 47.543L26.1292 59.8468V48.6696L41.955 39.6346L47.4991 36.4703V47.543ZM59.154 27.5263L49.4412 33.1194V22.0533L55.0765 18.809L59.1563 16.4603V27.5263H59.154Z"
+                                stroke="#334155"
+                            />
+                        </svg>
+
+                        <svg width="62" height="63" viewBox="0 0 62 63" fill="none" xmlns="http://www.w3.org/2000/svg" class="original">
+                            <path
+                                d="M61.0652 14.527C61.0585 14.4981 61.0407 14.4737 61.0318 14.4448C61.0118 14.3937 60.9963 14.3404 60.9696 14.2937C60.9518 14.2626 60.9252 14.2359 60.903 14.207C60.8741 14.1693 60.8496 14.127 60.8163 14.0937C60.7874 14.0648 60.7519 14.0448 60.7207 14.0204C60.6852 13.9915 60.6541 13.9604 60.6141 13.9382L48.9591 7.22742C48.6592 7.05409 48.2903 7.05409 47.9903 7.22742L36.3354 13.9382C36.2954 13.9604 36.2643 13.9937 36.2287 14.0204C36.1976 14.0448 36.1621 14.0648 36.1332 14.0937C36.0998 14.127 36.0754 14.1693 36.0465 14.207C36.0243 14.2359 35.9976 14.2626 35.9799 14.2937C35.9532 14.3404 35.9354 14.3937 35.9176 14.4448C35.9065 14.4715 35.891 14.4981 35.8843 14.527C35.8621 14.6092 35.851 14.6937 35.851 14.7803V27.5263L26.1382 33.1194V8.18292C26.1382 8.09626 26.127 8.01182 26.1048 7.9296C26.0982 7.90071 26.0804 7.87627 26.0715 7.84738C26.0515 7.79627 26.0359 7.74294 26.0093 7.69628C25.9915 7.66517 25.9648 7.63851 25.9426 7.60962C25.9137 7.57184 25.8893 7.52962 25.8559 7.49629C25.8271 7.4674 25.7915 7.4474 25.7604 7.42296C25.7248 7.39407 25.6937 7.36296 25.6537 7.34074L13.9988 0.629993C13.6988 0.456669 13.33 0.456669 13.03 0.629993L1.37504 7.34074C1.33505 7.36296 1.30394 7.3963 1.26838 7.42296C1.23727 7.4474 1.20172 7.4674 1.17283 7.49629C1.1395 7.52962 1.11506 7.57184 1.08617 7.60962C1.06395 7.63851 1.03728 7.66517 1.01951 7.69628C0.992842 7.74294 0.975064 7.79627 0.957287 7.84738C0.946177 7.87405 0.930623 7.90071 0.923957 7.9296C0.901736 8.01182 0.890625 8.09626 0.890625 8.18292V48.1052C0.890625 48.4519 1.07728 48.7741 1.37726 48.9474L24.6893 62.3689C24.7405 62.3978 24.796 62.4156 24.8493 62.4356C24.8738 62.4444 24.8982 62.46 24.9249 62.4667C25.0071 62.4889 25.0893 62.5 25.1738 62.5C25.2582 62.5 25.3404 62.4889 25.4226 62.4667C25.4449 62.46 25.4649 62.4467 25.4871 62.44C25.5449 62.42 25.6026 62.4 25.656 62.3711L48.968 48.9496C49.2702 48.7763 49.4547 48.4563 49.4547 48.1074V35.3615L60.623 28.9307C60.9252 28.7574 61.1096 28.4374 61.1096 28.0885V14.7803C61.0985 14.6937 61.0852 14.6092 61.0652 14.527ZM25.156 46.9875L15.461 41.5011L25.6426 35.6392L36.8131 29.2085L46.5171 34.7948L39.3974 38.859L25.156 46.9875ZM47.4992 22.0533V33.1194L43.4194 30.7706L37.7842 27.5263V16.4603L41.864 18.809L47.4992 22.0533ZM48.4703 9.18953L58.1787 14.7803L48.4703 20.3712L38.7619 14.7803L48.4703 9.18953ZM18.5541 37.4813L14.4743 39.8301V15.4559L20.1096 12.2116L24.1894 9.86283V34.2349L18.5541 37.4813ZM13.5033 2.59433L23.2116 8.18514L13.5033 13.776L3.79491 8.18514L13.5033 2.59433ZM2.81719 9.86283L6.89697 12.2116L12.5322 15.4559V41.5078V41.51V41.5122C12.5322 41.55 12.5433 41.5856 12.5478 41.6211C12.5544 41.6678 12.5544 41.7167 12.5678 41.7633V41.7656C12.5789 41.8033 12.5989 41.8389 12.6144 41.8744C12.6322 41.9144 12.6433 41.9589 12.6655 41.9967C12.6655 41.9967 12.6655 41.9989 12.6678 41.9989C12.6878 42.0322 12.7167 42.0611 12.7411 42.0922C12.7678 42.1278 12.79 42.1633 12.8211 42.1944L12.8233 42.1966C12.85 42.2233 12.8855 42.2433 12.9166 42.2678C12.9522 42.2944 12.9833 42.3255 13.0211 42.3477C13.0233 42.3477 13.0233 42.3477 13.0255 42.35C13.0278 42.35 13.0278 42.3522 13.03 42.3522L24.1938 48.6696V59.8446L2.81719 47.543V9.86283ZM47.4992 47.543L26.1293 59.8468V48.6696L41.9551 39.6346L47.4992 36.4703V47.543ZM59.1542 27.5263L49.4413 33.1194V22.0533L55.0766 18.809L59.1564 16.4603V27.5263H59.1542Z"
+                                fill="#FF2D20"
+                            />
+                        </svg>
+                    </span>
+                    <span class="title">LARAVEL</span>
+                </NuxtLink>
+            </div>
+        </div>
     </div>
 </template>
 
diff --git a/apps/showcase/pages/laravel/index.vue b/apps/showcase/pages/laravel/index.vue
new file mode 100644
index 000000000..777df6419
--- /dev/null
+++ b/apps/showcase/pages/laravel/index.vue
@@ -0,0 +1,64 @@
+<template>
+    <Head>
+        <Title>Install PrimeVue with Laravel</Title>
+        <Meta name="description" content="Setting up PrimeVue in a Laravel project" />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Install PrimeVue with Laravel</h1>
+                <p>Setting up PrimeVue in a Laravel project.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import DownloadDoc from '@/doc/laravel/DownloadDoc.vue';
+import ExamplesDoc from '@/doc/laravel/ExamplesDoc.vue';
+import NextStepsDoc from '@/doc/laravel/NextStepsDoc.vue';
+import PluginDoc from '@/doc/laravel/PluginDoc.vue';
+import ThemeDoc from '@/doc/laravel/ThemeDoc.vue';
+import VerifyDoc from '@/doc/laravel/VerifyDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'download',
+                    label: 'Download',
+                    component: DownloadDoc
+                },
+                {
+                    id: 'theme',
+                    label: 'Plugin',
+                    component: PluginDoc
+                },
+                {
+                    id: 'theme',
+                    label: 'Theme',
+                    component: ThemeDoc
+                },
+                {
+                    id: 'verify',
+                    label: 'Verify',
+                    component: VerifyDoc
+                },
+                {
+                    id: 'examples',
+                    label: 'Examples',
+                    component: ExamplesDoc
+                },
+                {
+                    id: 'nextsteps',
+                    label: 'Next Steps',
+                    component: NextStepsDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/templates/genesis/index.vue b/apps/showcase/pages/templates/genesis/index.vue
new file mode 100644
index 000000000..ca85b1326
--- /dev/null
+++ b/apps/showcase/pages/templates/genesis/index.vue
@@ -0,0 +1,212 @@
+<template>
+    <TemplateContainer :templateData="genesisData">
+        <template #separator>
+            <GenesisSeparator />
+        </template>
+    </TemplateContainer>
+</template>
+
+<script>
+import GenesisLogo from '@/components/template/logo/GenesisLogo.vue';
+import TemplateConfiguration from '@/components/template/TemplateConfiguration.vue';
+import TemplateFeatures from '@/components/template/TemplateFeatures.vue';
+import TemplateFeaturesAnimation from '@/components/template/TemplateFeaturesAnimation.vue';
+import TemplateHero from '@/components/template/TemplateHero.vue';
+import TemplateLicense from '@/components/template/TemplateLicense.vue';
+import { markRaw } from 'vue';
+
+export default {
+    data() {
+        return {
+            genesisData: {
+                components: [
+                    {
+                        name: markRaw(TemplateHero),
+                        props: {
+                            templateHeroData: {
+                                logo: markRaw(GenesisLogo),
+                                pattern: 'https://primefaces.org/cdn/primereact/images/templates/genesis/hero-pattern.png',
+                                dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/genesis/dashboard-2.png',
+                                dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/genesis/dashboard-1.png',
+                                description: 'Genesis is a modern admin template for developers and IT professionals. It comes with a huge collection of reusable UI components and dozens of built-in layouts for various purposes.',
+                                liveHref: 'https://www.primefaces.org/genesis-react/',
+                                docHref: 'https://genesis.primereact.org/documentation',
+                                pattern: {
+                                    className: 'select-none absolute z-[6] w-[58rem] md:w-[50rem] h-auto top-12 md:top-32 -left-24 md:-left-12 opacity-75',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/hero-pattern.png'
+                                },
+                                isMultipurpose: true
+                            }
+                        }
+                    },
+                    {
+                        name: markRaw(TemplateLicense),
+                        props: {
+                            license: {
+                                documentLink: 'https://genesis.primereact.org/documentation',
+                                description: 'The download package is a Nuxt-based project containing all application source codes deployed at the live demo. The project code is written in JavaScript.',
+                                showDiscount: false,
+                                licenseDetails: [
+                                    {
+                                        title: 'Basic License',
+                                        price: '$59',
+                                        discount: '$39',
+                                        included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates']
+                                    },
+                                    {
+                                        title: 'Extended License',
+                                        price: '$590',
+                                        discount: '$390',
+                                        included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates']
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    {
+                        name: markRaw(TemplateFeaturesAnimation),
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Various Landing Pages',
+                                    description: 'Choose from 9 templates for industries like SaaS, Travel, and Real Estate, each tailored to specific business needs.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-landing-pages.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'Secondary Pages',
+                                    description: 'Includes essential pages like About, Pricing, Blog, and Contact for a complete user experience.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-second-pages.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'Dark & Light Modes',
+                                    description: 'Easily switch between Light and Dark modes to match your aesthetic preferences.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-dark-light-modes.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Themes',
+                                    description: 'Customize with 16 color themes to align with your brand effortlessly.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-menu-themes.png'
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        name: markRaw(TemplateConfiguration),
+                        props: {
+                            configurationData: {
+                                title: 'Nuxt App with No Configuration',
+                                description: 'Genesis is powered by Nuxt to get started in no time following the best practices.'
+                            }
+                        }
+                    },
+                    {
+                        name: markRaw(TemplateFeatures),
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Modern and Sleek Design',
+                                    description: 'Enjoy a contemporary design that looks great on all devices.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-1.png'
+                                },
+                                {
+                                    title: 'SEO & Performance',
+                                    description: 'Optimized for fast loading and high search engine rankings.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-2.png'
+                                },
+                                {
+                                    title: 'Animation / Effects',
+                                    description: 'Enhance engagement with captivating animations and effects.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-3.png'
+                                }
+                            ],
+                            displayType: 'horizontal'
+                        }
+                    },
+                    {
+                        name: markRaw(TemplateFeaturesAnimation),
+                        props: {
+                            title: 'Features',
+                            featuresData: [
+                                {
+                                    id: 1,
+                                    title: 'Tailwind',
+                                    description: 'Built with TailwindCSS, offering flexibility and efficiency for responsive design. Enjoy the power of Tailwind, a favorite among developers.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-tailwind.png'
+                                },
+                                {
+                                    id: 2,
+                                    title: 'PrimeBlocks',
+                                    slotType: 'description2',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+                                },
+                                {
+                                    id: 3,
+                                    title: 'PrimeIcons',
+                                    description: 'Genesis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+                                },
+                                {
+                                    id: 4,
+                                    title: 'Figma File',
+                                    slotType: 'description4',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-figma.png'
+                                }
+                            ]
+                        },
+                        slots: {
+                            description2: `
+                                Fully compatible with <a href="https://primeblocks.org/">PrimeBlocks</a>, choose from the wide range of blocks and customize the way you like. Note that
+                                <a href="https://primeblocks.org/">PrimeBlocks</a> is not included in the template and requires a separate purchase.`,
+                            description4: `
+                                Genesis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can
+                                <a href="https://www.figma.com/design/bGujrJyznnSatJFMtkXbTN/Preview-%7C-Genesis?node-id=0-1&t=etuXAwkUAEuhJ3p0-1">preview the Figma file</a> before the purchase. Note that PrimeVue UI components are
+                                excluded from the Genesis Figma file as they are available in <PrimeVueNuxtLink to="/uikit">PrimeOne for Figma</PrimeVueNuxtLink> only.`
+                        }
+                    },
+                    {
+                        name: markRaw(TemplateFeatures),
+                        props: {
+                            featuresData: [
+                                {
+                                    title: 'Fully Responsive',
+                                    description: 'Genesis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/fully-responsive.png'
+                                },
+                                {
+                                    title: 'Cross Browser Compatible',
+                                    description: 'First class support for Firefox, Safari, Chrome and Edge.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+                                },
+                                {
+                                    title: 'Support',
+                                    description:
+                                        'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+                                },
+                                {
+                                    title: 'Customizable Design',
+                                    description: 'Fully customizable with a mixture of Sass and CSS variables.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+                                    darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+                                },
+                                {
+                                    title: 'Mobile Experience',
+                                    description: 'Touch optimized enhanced mobile experience with responsive design.',
+                                    src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/mobile-experience.png'
+                                }
+                            ],
+                            displayType: 'vertical'
+                        }
+                    }
+                ]
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/templates/index.vue b/apps/showcase/pages/templates/index.vue
index ac5b8f444..fc99ba2af 100644
--- a/apps/showcase/pages/templates/index.vue
+++ b/apps/showcase/pages/templates/index.vue
@@ -5,6 +5,26 @@
             <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
         </div>
 
+        <h2>Multi-Purpose Templates</h2>
+        <div class="templates-page grid grid-cols-12 gap-4">
+            <div class="col-span-12 lg:col-span-6 xl:col-span-4">
+                <div class="card mb-0">
+                    <a href="https://genesis.primevue.org" rel="noopener noreferrer">
+                        <img alt="Genesis" src="https://primefaces.org/cdn/primevue/images/layouts/genesis-vue.jpg" class="w-full" />
+                    </a>
+                    <div class="flex gap-4 mt-4">
+                        <a href="https://genesis.primevue.org" class="p-button flex-1" rel="noopener noreferrer" target="_blank">
+                            <span class="p-button-label">Preview</span>
+                        </a>
+                        <PrimeVueNuxtLink to="/templates/genesis" class="p-button p-button-outlined flex-1">
+                            <span class="p-button-label">Learn More</span>
+                        </PrimeVueNuxtLink>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <h2>Admin Templates</h2>
         <div class="templates-page grid grid-cols-12 gap-4">
             <div class="col-span-12 lg:col-span-6 xl:col-span-4">
                 <div class="card mb-0">