From ad3a0b50b7e43e9ba3fbea9887130bb8b8aed041 Mon Sep 17 00:00:00 2001
From: onursenture <woof.uyelik@gmail.com>
Date: Mon, 2 Mar 2020 21:20:53 +0300
Subject: [PATCH] Add designer section

---
 src/assets/styles/app.scss | 16 ++++++++++++++++
 src/views/Home.vue         | 12 ++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
index ac576cca8..11ba895b9 100644
--- a/src/assets/styles/app.scss
+++ b/src/assets/styles/app.scss
@@ -1220,6 +1220,22 @@ a {
     }
 }
 
+    /* DESIGNER */
+    .primevue-designer {
+        background-color: #ffffff;
+        padding: 30px;
+        h3 {
+            margin: 10px 0 20px 0;
+            display: block;
+            text-align: center;
+            font-size: 24px;
+        }
+        img {
+            width: 100%;
+            margin-bottom: 30px;
+        }
+    }
+
 .icons-page {
     .icons-list {
         text-align: center;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3276acb2e..e16b2df18 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -170,6 +170,18 @@
                 </div>
             </div>
         </div>
+        <div class="primevue-designer">
+            <h3>PrimeVue Designer API</h3>
+            <div class="p-grid">
+                <div className="p-col-12">
+                    <img alt="PrimeReact Designer" src="../assets/images/primevue-designer.jpg" />
+                    <p><a href="https://www.primefaces.org/designer/primevue">Designer API</a> is a SASS based theme engine to create PrimeVue themes easily featuring over 500 variables,
+                        a demo application and a base sample theme. Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
+
+                    <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> for more information, live demos and access to a trial version.</p>
+                </div>
+            </div>
+        </div>
         <div class="prosupport">
             <div class="p-grid">
                 <div class="p-col-12 p-md-6">