Merge branch 'prod'

assets/menu/menu.json

@@ -448,10 +448,6 @@
                             "name": "Overview",
                             "to": "/theming"
                         },
-                        {
-                            "name": "Visual Editor",
-                            "href": "https://designer.primevue.org"
-                        },
                         {
                             "name": "Colors",
                             "to": "/colors"

doc/installation/PluginDoc.vue

@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>.</p>
+        <p>
+            PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>. If you are using <NuxtLink to="/theming">Nuxt</NuxtLink>, this step is not required as our
+            nuxt module handles it.
+        </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>

doc/theming/CustomThemeDoc.vue

@@ -5,19 +5,8 @@
             of the built-in themes so that you may customize an existing theme or create your own. The scss variables used in a theme are available at the <a href="https://www.primefaces.org/designer/api/primevue/3.9.0">SASS API</a> documentation.
         </p>
         <p>
-            There are 3 alternatives to create your own theme. First option is using the Visual Editor, second one is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build
+            There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass whereas second option is embedding scss files within your project to let your build environment do the compilation. In all cases,
-            environment do the compilation. In all cases, the generated theme file should be imported to your project. We've created a video tutorial that demonstrates all three options.
+            the generated theme file should be imported to your project.
-        </p>
-
-        <div class="video-container">
-            <iframe width="560" height="315" src="https://www.youtube.com/embed/iZp_l0Yl3Zw" frameborder="0" allowfullscreen></iframe>
-        </div>
-
-        <h3>Visual Editor</h3>
-        <p>
-            <a href="https://designer.primevue.org">Visual Editor</a> is an easy way to quickly customize an existing theme without dealing with the details of the SASS API. The editor allows changing common settings like primary color for built-in
-            themes. Once you have completed the design, click the download button to access the generated <i>theme.css</i> file and import it to your project as an asset. In near future, an advanced UI Designer will be available with the ability to
-            edit all variables and components where you'll also be able to save your themes when accessed with an account.
         </p>
 
         <h3>Theme SCSS</h3>

pages/landing/FooterSection.vue

@@ -27,6 +27,17 @@
                         </li>
                     </ul>
                 </div>
+                <div class="w-6 lg:w-3 flex">
+                    <ul class="list-none p-0 m-0">
+                        <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
+                        <li class="mb-4">
+                            <router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</router-link>
+                        </li>
+                        <li class="mb-4">
+                            <router-link to="/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</router-link>
+                        </li>
+                    </ul>
+                </div>
                 <div class="w-6 lg:w-3 flex">
                     <ul class="list-none p-0 m-0">
                         <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
@@ -55,20 +66,6 @@
                         </li>
                     </ul>
                 </div>
-                <div class="w-6 lg:w-3 flex">
-                    <ul class="list-none p-0 m-0">
-                        <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
-                        <li class="mb-4">
-                            <router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Guide</router-link>
-                        </li>
-                        <li class="mb-4">
-                            <a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Designer</a>
-                        </li>
-                        <li class="mb-4">
-                            <router-link to="/colors" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Colors</router-link>
-                        </li>
-                    </ul>
-                </div>
             </div>
 
             <hr class="section-divider mt-8" />

pages/landing/ThemeSection.vue

@@ -6,7 +6,6 @@
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'green')">PrimeOne</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
             <button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
-            <a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
         </div>
         <div
             class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"