feat(docs): Added benefits & attribution to ngx-bootstrap

Author: Airblader

projects/ngqp-demo/src/app/home/home.component.html

@@ -11,10 +11,23 @@ <h1>ngqp</h1>
         </div>
     </section>
 
-    <!--
-Easy to use: minimum setup, intuitive API based on Forms
-Powerful: feature-rich, highly customisable
-Free: Open source on Github, MIT license, forever free
-Well-Documented, Tested
--->
-</main>
+    <section class="benefits container-fluid">
+        <div class="benefits__content">
+            <div class="row">
+                <div *ngFor="let benefit of benefits" class="col-12 col-sm-6 d-flex flex-wrap">
+                    <div class="benefit__icon">
+                        <fa-icon [icon]="benefit.icon" size="3x" class="text-primary"></fa-icon>
+                    </div>
+                    <div class="benefit__text">
+                        <h4>{{ benefit.title }}</h4>
+                        <p>{{ benefit.description }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</main>
+
+<footer class="footer">
+    Design inspired by <a href="https://valor-software.com/ngx-bootstrap">ngx-bootstrap</a>.
+</footer>

projects/ngqp-demo/src/app/home/home.component.scss

@@ -8,8 +8,7 @@
     }
 
     .btn-block {
-        margin-top: 2rem;
-        margin-bottom: 1rem;
+        margin: 2rem 0;
 
         .btn {
             min-width: 240px;
@@ -29,4 +28,48 @@
             }
         }
     }
+}
+
+.benefits {
+    background: #f5f5f5;
+
+    &__content {
+        padding: 2rem;
+
+        .col-12 {
+            padding-bottom: 2rem;
+        }
+    }
+
+    .benefit__icon {
+        flex: 0 0 80px;
+        max-width: 80px;
+        height: 60px;
+        margin-bottom: 15px;
+        padding-right: 10px;
+
+        img {
+            display: block;
+            max-width: 100%;
+        }
+    }
+
+    .benefit__text {
+        flex: 0 0 calc(100% - 80px);
+        max-width: calc(100% - 80px);
+
+        h4 {
+            color: #333;
+        }
+
+        p {
+            margin: 15px 0 0;
+            color: #666;
+        }
+    }
+}
+
+.footer {
+    padding: 1rem;
+    text-align: center;
 }

projects/ngqp-demo/src/app/home/home.component.ts

@@ -1,4 +1,11 @@
 import { Component } from '@angular/core';
+import { IconDefinition, faGlassCheers, faCogs, faHeart, faAlignLeft } from '@fortawesome/free-solid-svg-icons';
+
+interface BenefitItem {
+    icon: IconDefinition;
+    title: string;
+    description: string;
+}
 
 @Component({
     selector: 'demo-home',
@@ -7,4 +14,42 @@ import { Component } from '@angular/core';
 })
 export class HomeComponent {
 
+    public benefits: BenefitItem[] = [
+        {
+            icon: faGlassCheers,
+            title: 'Simple',
+            description: `
+                We know that you expect things to just work. That's why ngqp requires almost no setup and is easy to use while
+                giving you the flexibility to configure it to your needs. The API feels familiar because it is designed after
+                the Forms API.
+            `,
+        },
+        {
+            icon: faCogs,
+            title: 'Powerful',
+            description: `
+                Dependencies should earn their keep; that's why ngqp ships with a lot of features packed into an intuitive API
+                that allow you to do exactly what you need to do.
+            `,
+        },
+        {
+            icon: faAlignLeft,
+            title: 'Documented',
+            description: `
+                No one should have a hard time learning how to use something. We provide rich documentation with many examples,
+                guides and tips & tricks. If you have any issue getting something to work, the community will be right by your
+                side and help you out.
+            `,
+        },
+        {
+            icon: faHeart,
+            title: 'Free',
+            description: `
+                We ❤️ the open-source community, so there are no hidden fees or strings attached. ngqp is free, open-source and
+                MIT-licensed. Find the source code on Github, fork it, or help improving it by contributing documentation,
+                bug fixes or features.
+            `,
+        },
+    ];
+
 }