From 49b2c2cda03794f26748efb10a56ff6334d4c452 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 27 Dec 2023 00:24:05 +0300
Subject: [PATCH] Add introduction doc

---
 doc/introduction/AccessibilityDoc.vue |  8 ++++
 doc/introduction/AddOnsDoc.vue        |  8 ++++
 doc/introduction/OverviewDoc.vue      | 15 +++++++
 doc/introduction/PassThroughDoc.vue   |  9 ++++
 doc/introduction/SupportDoc.vue       | 10 +++++
 doc/introduction/ThemingDoc.vue       | 10 +++++
 pages/introduction/index.vue          | 64 +++++++++++++++++++++++++++
 7 files changed, 124 insertions(+)
 create mode 100644 doc/introduction/AccessibilityDoc.vue
 create mode 100644 doc/introduction/AddOnsDoc.vue
 create mode 100644 doc/introduction/OverviewDoc.vue
 create mode 100644 doc/introduction/PassThroughDoc.vue
 create mode 100644 doc/introduction/SupportDoc.vue
 create mode 100644 doc/introduction/ThemingDoc.vue
 create mode 100644 pages/introduction/index.vue

diff --git a/doc/introduction/AccessibilityDoc.vue b/doc/introduction/AccessibilityDoc.vue
new file mode 100644
index 000000000..a2dde6924
--- /dev/null
+++ b/doc/introduction/AccessibilityDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue has WCAG 2.1 AA level compliance; each component has a dedicated accessibility section to document several aspects, including keyboard and screen reader support. Through communication channels such as GitHub or Discord, numerous
+            accessibility experts worldwide continue to provide constant feedback to improve the accessibility features further. View the <NuxtLink to="/guides/accessibility">accessibility guide</NuxtLink> to learn more.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/AddOnsDoc.vue b/doc/introduction/AddOnsDoc.vue
new file mode 100644
index 000000000..60ce746be
--- /dev/null
+++ b/doc/introduction/AddOnsDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue does not require financial sponsorships from its community; instead, to be backed by a solid financial foundation, optional add-ons are offered. These include a Figma UI Kit, premium application templates, and reusable UI blocks
+            called PrimeBlocks. The add-ons are optional and there is no paywall when using PrimeVue.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/OverviewDoc.vue b/doc/introduction/OverviewDoc.vue
new file mode 100644
index 000000000..9180d954b
--- /dev/null
+++ b/doc/introduction/OverviewDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue is a complete UI suite for Vue.js consisting of a rich set of UI components, icons, blocks, and application templates. The project's primary goal is to boost developer productivity by offering reusable solutions that are easy to
+            tune and customize as an in-house library.
+        </p>
+        <p>
+            The project has been created by <a href="https://www.primetek.com.tr" class="text-primary hover:underline font-medium">PrimeTek</a> a world-renowned vendor of popular UI Component suites, including
+            <a href="https://primefaces.org" class="text-primary hover:underline font-medium">PrimeFaces</a>, <a href="https://primeng.org" class="text-primary hover:underline font-medium">PrimeNG</a>, and
+            <a href="https://primevue.org" class="text-primary hover:underline font-medium">PrimeReact.</a> All the members in <NuxtLink to="/team">our team</NuxtLink> are full time employees of PrimeTek who share the same passion and vision for open
+            source to create awesome UI libraries. Depending on a 3rd party library may introduce risks if the library maintainers decide not to work on the project, however, this is not the case with PrimeVue as the track record of PrimeTek shows.
+            For example, PrimeFaces has been maintained actively since 2008.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/PassThroughDoc.vue b/doc/introduction/PassThroughDoc.vue
new file mode 100644
index 000000000..0ef90b466
--- /dev/null
+++ b/doc/introduction/PassThroughDoc.vue
@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PassThrough is an innovative API to provide access to the internal DOM elements to add arbitrary attributes. In general, traditional UI component libraries encapsulate UI and logic with limited APIs that makes the developers dependant on
+            the library maintainer to extend this API by adding new props or events. With <NuxtLink to="/passthrough">PassThrough</NuxtLink> this limitation has been eliminated since, you'll be able to access the internal of the components to add
+            events and attributes. Some common use-cases are adding test attributes, additional aria attributes, custom events and styling.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/SupportDoc.vue b/doc/introduction/SupportDoc.vue
new file mode 100644
index 000000000..247a725b4
--- /dev/null
+++ b/doc/introduction/SupportDoc.vue
@@ -0,0 +1,10 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            <a href="https://github.com/orgs/primefaces/discussions" class="font-medium hover:underline text-primary">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY" class="font-medium hover:underline text-primary">Discord</a> are the open
+            environments for the community users to seek support, post topics and discuss the technology. GitHub issue tracker is the channel where community users can create tickets however PrimeTek cannot guarantee an instant response time although
+            they are monitored and maintained by our staff regularly. If you need to secure our response within 1 business day in addition to other benefits, you may consider the optional <NuxtLink to="/support">PRO support</NuxtLink> service
+            instead.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/introduction/ThemingDoc.vue b/doc/introduction/ThemingDoc.vue
new file mode 100644
index 000000000..1a7fe400e
--- /dev/null
+++ b/doc/introduction/ThemingDoc.vue
@@ -0,0 +1,10 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue can be styled in two modes; styled or unstyled. Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Unstyled mode on the other hand, leaves the styling to you while
+            implementing the functionality and accessibility. Unstyled mode provides full control over the styling with no boundaries by implementing a pluggable architecture to utilize CSS libraries like Tailwind CSS, Bootstrap, Bulma or your own
+            custom CSS. We've even further built the <a href="tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> library to skin the UI library with utility classes of Tailwind. This design is future proof as
+            PrimeVue can be styled with any CSS library without actually depending on it in its core.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/pages/introduction/index.vue b/pages/introduction/index.vue
new file mode 100644
index 000000000..f44957e6a
--- /dev/null
+++ b/pages/introduction/index.vue
@@ -0,0 +1,64 @@
+<template>
+    <Head>
+        <Title>Introduction - PrimeVue</Title>
+        <Meta name="description" content="Next-generation UI Component suite for Vue." />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Introduction</h1>
+                <p>Next-generation UI Component suite for Vue.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/introduction/AccessibilityDoc.vue';
+import AddOnsDoc from '@/doc/introduction/AddOnsDoc.vue';
+import OverviewDoc from '@/doc/introduction/OverviewDoc.vue';
+import PassThroughDoc from '@/doc/introduction/PassThroughDoc.vue';
+import SupportDoc from '@/doc/introduction/SupportDoc.vue';
+import ThemingDoc from '@/doc/introduction/ThemingDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'overview',
+                    label: 'Overview',
+                    component: OverviewDoc
+                },
+                {
+                    id: 'theming',
+                    label: 'Theming',
+                    component: ThemingDoc
+                },
+                {
+                    id: 'passthrough',
+                    label: 'PassThrough',
+                    component: PassThroughDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                },
+                {
+                    id: 'add-ons',
+                    label: 'Add-Ons',
+                    component: AddOnsDoc
+                },
+                {
+                    id: 'support',
+                    label: 'Support',
+                    component: SupportDoc
+                }
+            ]
+        };
+    }
+};
+</script>