Add .stretched-link for card

Author: jondy

pyarmor/index.html

@@ -15,8 +15,8 @@ <h3 class="m-3">Pyarmor Learning System</h3>
           <div class="card">
             <div class="card-body">
               <h5 class="card-title text-center">Learn</h5>
-              <a href="learn/en/index.html" class="btn btn-light">
-                Learn Pyarmor concepts, how to use Pyarmor and how to fix issues
+              <a href="learn/en/index.html" class="btn btn-light stretched-link w-100">
+                Learn Pyarmor concepts and how to use Pyarmor
               </a>
             </div>
           </div>
@@ -25,8 +25,8 @@ <h5 class="card-title text-center">Learn</h5>
           <div class="card">
             <div class="card-body">
               <h5 class="card-title text-center">Ask</h5>
-              <a href="ask/en/index.html" class="btn btn-light">
-                Something is wrong, or something is not ure, ask Pyarmor
+              <a href="ask/en/index.html" class="btn btn-light stretched-link w-100">
+                Something is wrong, or something is not ure
               </a>
             </div>
           </div>
@@ -37,7 +37,7 @@ <h5 class="card-title text-center">Ask</h5>
           <div class="card">
             <div class="card-body">
               <h5 class="card-title text-center">Try</h5>
-              <a href="try/en/index.html" class="btn btn-light">
+              <a href="try/en/index.html" class="btn btn-light stretched-link w-100">
                 Try some features which not in trial version
               </a>
             </div>
@@ -47,13 +47,33 @@ <h5 class="card-title text-center">Try</h5>
           <div class="card">
             <div class="card-body">
               <h5 class="card-title text-center">Docs</h5>
-              <a href="docs/en/index.html" class="btn btn-light">
+              <a href="docs/en/index.html" class="btn btn-light stretched-link w-100">
                 Pyarmor 9.1 new features online documentation
               </a>
             </div>
           </div>
         </div>
       </div>
+      <div class="row row-cols-1 row-cols-md-3 g-4 my-3 mx-2">
+        <div class="col">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title text-center">App</h5>
+              <a href="app/en/index.html" class="btn btn-light stretched-link w-100">
+                Generate your own Web UI to use pyarmor
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="col d-none">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title text-center"></h5>
+              <a href="" class="btn btn-light stretched-link w-100"></a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="part-zh d-none">
       <h3 class="m-3">Pyarmor 学习系统</h3>
@@ -62,9 +82,9 @@ <h3 class="m-3">Pyarmor 学习系统</h3>
         <div class="col">
           <div class="card">
             <div class="card-body">
-              <h5 class="card-title text-center">学习</h5>
-              <a href="learn/zh/index.html" class="btn btn-light">
-                学习 Pyarmor 的概念，以及如何使用 Pyarmor 和解决常见问题
+              <h5 class="card-title text-center">学习教程</h5>
+              <a href="learn/zh/index.html" class="btn btn-light stretched-link w-100">
+                了解和学习 Pyarmor 的概念以及使用方法
               </a>
             </div>
           </div>
@@ -73,8 +93,8 @@ <h5 class="card-title text-center">学习</h5>
           <div class="card">
             <div class="card-body">
               <h5 class="card-title text-center">答疑解惑</h5>
-              <a href="ask/zh/index.html" class="btn btn-light">
-                当出现问题需要解决的时候，或者对某些功能有疑惑，在这里答疑解惑
+              <a href="ask/zh/index.html" class="btn btn-light stretched-link w-100">
+                对某些功能有疑惑，或者遇到需要解决的问题
               </a>
             </div>
           </div>
@@ -85,7 +105,7 @@ <h5 class="card-title text-center">答疑解惑</h5>
           <div class="card">
             <div class="card-body">
               <h5 class="card-title text-center">在线试用</h5>
-              <a href="try/zh/index.html" class="btn btn-light">
+              <a href="try/zh/index.html" class="btn btn-light stretched-link w-100">
                 在线使用 Pyarmor 的高级加密功能
               </a>
             </div>
@@ -94,14 +114,34 @@ <h5 class="card-title text-center">在线试用</h5>
         <div class="col">
           <div class="card">
             <div class="card-body">
-              <h5 class="card-title text-center">文档</h5>
-              <a href="docs/zh/index.html" class="btn btn-light">
+              <h5 class="card-title text-center">用户手册</h5>
+              <a href="docs/zh/index.html" class="btn btn-light stretched-link w-100">
                 Pyarmor 9.1 新功能的在线文档
               </a>
             </div>
           </div>
         </div>
       </div>
+      <div class="row row-cols-1 row-cols-md-3 g-4 my-3 mx-2">
+        <div class="col">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title text-center">网页应用</h5>
+              <a href="app/en/index.html" class="btn btn-light stretched-link w-100">
+                定制网页版图形接口来使用 Pyarmor
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="col d-none">
+          <div class="card">
+            <div class="card-body">
+              <h5 class="card-title text-center"></h5>
+              <a href="" class="btn btn-light stretched-link w-100"></a>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <script>