[gtk-web/new-website: 80/191] updated docs page

[Emmanuele Bassi <ebassi src gnome org>]

commit eaa81cd80e9c161fc4f6f1fca1ec81d685194f32
Author: ravgeetdhillon <ravgeetdhillon gmail com>
Date:   Tue Jul 9 15:48:47 2019 +0530

    updated docs page

 assets/avatar.png    | Bin 109105 -> 16823 bytes
 assets/css/index.css |   8 ++++++
 docs.html            |  80 ++++++++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 81 insertions(+), 7 deletions(-)
---
diff --git a/assets/avatar.png b/assets/avatar.png
index d91bce4..78f14b1 100644
Binary files a/assets/avatar.png and b/assets/avatar.png differ
diff --git a/assets/css/index.css b/assets/css/index.css
index eef494c..5fbd443 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -347,4 +347,12 @@ pre {
     transition: box-shadow 0.15s ease-in-out;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
     cursor: pointer;
+}
+.shadow-sm-hover:hover {
+    transition: 0.15s ease-in-out;
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+.bg-light-hover:hover {
+    transition: 0.15s ease-in-out;
+    background-color: var(--light) !important;
 }
\ No newline at end of file
diff --git a/docs.html b/docs.html
index e9e0e37..1f8558e 100644
--- a/docs.html
+++ b/docs.html
@@ -18,13 +18,13 @@ navbar_dark: true
         </div>
     </div>
 </section>
-    
-<section class="py-4" id="usecases">
+
+<section class="py-4" id="topics">
        <div class="container"> 
                <div class="row text-center d-flex justify-content-center">
                        <div class="col-md-10 col-lg-7">
                                <h2 class="font-weight-light mb-3">Browse Topics</h2>
-                               <span class="text-muted">Get set with the choice of your topic and explore 
the documentation.</span>                    
+                               <span class="text-muted">Get set with the topic of your choice and explore 
the documentation.</span>
                        </div>
                </div>
                <div class="row d-flex justify-content-center pt-5">
@@ -33,6 +33,7 @@ navbar_dark: true
                                        <i class="fas fa-cogs fa-fw fa-3x pb-4 text-primary"></i>
                                        <h5>Getting Started</h5>
                                        <span class="text-muted small">Get started now by building a Hello 
World app and playing around it.</span>
+                                       <a href="/" class="stretched-link"></a>
                                </div>
                        </div>
                        <div class="col-md-4 pb-5">
@@ -40,6 +41,7 @@ navbar_dark: true
                                        <i class="fas fa-tools fa-fw fa-3x pb-4 text-primary"></i>
                                        <h5>Dev Tools</h5>
                                        <span class="text-muted small">Learn how to setup your development 
environment with GTK recommended tools.</span>
+                                       <a href="/" class="stretched-link"></a>
                                </div>
                        </div>
                        <div class="col-md-4 pb-5">
@@ -47,6 +49,7 @@ navbar_dark: true
                                        <i class="fas fa-random fa-fw fa-3x pb-4 text-primary"></i>
                                        <h5>Language Bindings</h5>
                                        <span class="text-muted small">Learn to integrate your favorite 
programming language with GTK through bindings.</span>
+                                       <a href="/" class="stretched-link"></a>
                                </div>
                        </div>
                        <div class="col-md-4 pb-5">
@@ -54,6 +57,7 @@ navbar_dark: true
                                        <i class="fas fa-box-open fa-fw fa-3x pb-4 text-primary"></i>
                                        <h5>API References</h5>
                                        <span class="text-muted small">Dig deep into the API references for 
GTK3 and GTK4.</span>
+                                       <a href="/" class="stretched-link"></a>
                                </div>
                        </div>
                        <div class="col-md-4 pb-5">
@@ -61,19 +65,81 @@ navbar_dark: true
                                        <i class="fas fa-vector-square fa-fw fa-3x pb-4 text-primary"></i>
                                        <h5>Architecture</h5>
                                        <span class="text-muted small">Learn about the sub modules the GTK 
has been built upon.</span>
+                                       <a href="/" class="stretched-link"></a>
                                </div>
                        </div>
                        <div class="col-md-4 pb-5">
                                <div class="col h-100 py-5 text-center d-flex flex-column align-items-center 
shadow-sm shadow-hover rounded border-bottom border-primary" style="border-width:2px!important;">
                                        <i class="fas fa-tools fa-fw fa-3x pb-4 text-primary"></i>
                                        <h5>Dev Tools</h5>
-                                       <span class="text-muted small">Learn how to setup your development 
environment with GTK recommended tools.</span>
+                                       <span class="text-muted small">Learn how to setup your development 
environment.</span>
                                        <a href="/" class="stretched-link"></a>
                                </div>
                        </div>
-                       <!-- <div class="col-12 text-center pt-3 pt-md-4">
-                               <a href="/usecases/" class="btn btn-md btn-outline-primary" 
role="button">Discover Usecases</a>
-                       </div> -->
+               </div>
+       </div>
+</section>
+
+<section class="py-4" id="articles">
+       <div class="container"> 
+               <div class="row text-center d-flex justify-content-center">
+                       <div class="col-md-10 col-lg-7">
+                               <h2 class="font-weight-light mb-3">Popular Articles</h2>
+                               <span class="text-muted">Selected featured articles for you to get started 
fast with GTK.</span>
+                       </div>
+               </div>
+               <div class="row d-flex justify-content-center pt-5">
+                       <div class="col-md-8 pb-5">
+                               <div class="list-group">
+                                       <a href="#" class="d-flex py-3 px-3 text-decoration-none text-dark 
border rounded shadow-sm-hover bg-light-hover justify-content-between align-items-center mb-2">Frequently 
asked question sections<i class="fas fa-chevron-circle-right text-info"></i></a>
+                                       <a href="#" class="d-flex py-3 px-3 text-decoration-none text-dark 
border rounded shadow-sm-hover bg-light-hover justify-content-between align-items-center mb-2">Creating your 
first application<i class="fas fa-chevron-circle-right text-info"></i></a>
+                                       <a href="#" class="d-flex py-3 px-3 text-decoration-none text-dark 
border rounded shadow-sm-hover bg-light-hover justify-content-between align-items-center mb-2">Your first 
contribution to GTK<i class="fas fa-chevron-circle-right text-info"></i></a>
+                                       <a href="#" class="d-flex py-3 px-3 text-decoration-none text-dark 
border rounded shadow-sm-hover bg-light-hover justify-content-between align-items-center mb-2">Learn about 
GTK's best practices<i class="fas fa-chevron-circle-right text-info"></i></a>
+                               </div>
+                       </div>
+               </div>
+       </div>
+</section>
+
+<section class="py-4" id="team">
+       <div class="container"> 
+               <div class="row text-center d-flex justify-content-center">
+                       <div class="col-md-10 col-lg-7">
+                               <h2 class="font-weight-light mb-3">We are here to help</h2>
+                               <span class="text-muted">Catch up with our core team to get answers for your 
questions.</span>
+                       </div>
+               </div>
+               <div class="row d-flex justify-content-center py-5 mx-auto">
+                       <div class="col d-flex flex-column align-items-center text-center">
+                               <img src="/assets/avatar.png" class="pb-2 img-fluid rounded-circle" 
style="max-width: 100px;">
+                               <span class="small"><strong>Emmanuele Bassi</strong></span>
+                               <span class="small text-muted">Endless Mobile</span>
+                       </div>
+                       <div class="col d-flex flex-column align-items-center text-center">
+                               <img src="/assets/avatar.png" class="pb-2 img-fluid rounded-circle" 
style="max-width: 100px;">
+                               <span class="small"><strong>Matthias Clasen</strong></span>
+                               <span class="small text-muted">Red Hat</span>
+                       </div>
+                       <div class="col d-flex flex-column align-items-center text-center">
+                               <img src="/assets/avatar.png" class="pb-2 img-fluid rounded-circle" 
style="max-width: 100px;">
+                               <span class="small"><strong>Behdad Esfahbod</strong></span>
+                               <span class="small text-muted">Google</span>
+                       </div>
+                       <div class="col d-flex flex-column align-items-center text-center">
+                               <img src="/assets/avatar.png" class="pb-2 img-fluid rounded-circle" 
style="max-width: 100px;">
+                               <span class="small"><strong>Emmanuele Bassi</strong></span>
+                               <span class="small text-muted">Endless Mobile</span>
+                       </div>
+                       <div class="col d-flex flex-column align-items-center text-center">
+                               <img src="/assets/avatar.png" class="pb-2 img-fluid rounded-circle" 
style="max-width: 100px;">
+                               <span class="small"><strong>Matthias Clasen</strong></span>
+                               <span class="small text-muted">Red Hat</span>
+                       </div>
+                       <div class="col d-flex flex-column align-items-center text-center">
+                               <img src="/assets/avatar.png" class="pb-2 img-fluid rounded-circle" 
style="max-width: 100px;">
+                               <span class="small"><strong>Behdad Esfahbod</strong></span>
+                               <span class="small text-muted">Google</span>
+                       </div>
                </div>
        </div>
 </section>