Update the landing page and README.

Add a example to algorithms_are_everywhere.md.

README.md

@@ -2,40 +2,37 @@
   <a href="https://www.hello-algo.com/">
     <img src="https://www.hello-algo.com/index.assets/conceptual_rendering.png" width="200">
   </a>
+  &emsp; &emsp;
+  <a href="https://www.hello-algo.com/">
+    <img src="https://www.hello-algo.com/index.assets/hello_algo_knowledge_map_tp.png" width="310">
+  </a>
 </p>
 
-<h3 align="center">
-  《 Hello 算法 》
-</h3>
-
 <p align="center">
-  动画图解、能运行、可提问的</br>数据结构与算法快速入门教程
+  动画图解、能运行、可提问的数据结构与算法教程
 </p>
 
-</br>
+<p align="center">
+  <a href="https://www.hello-algo.com/">
+    <img src="https://www.hello-algo.com/index.assets/btn_read_online.png" width="150">
+  </a>
+  <a href="https://github.com/krahets/hello-algo/releases">
+    <img src="https://www.hello-algo.com/index.assets/btn_download_pdf.png" width="150">
+  </a>
+</p>
 
 <p align="center">
   <img src="https://www.hello-algo.com/index.assets/animation.gif" width="49%">
   <img src="https://www.hello-algo.com/index.assets/running_code.gif" width="49%">
 </p>
 
-<p align="center">
-    <a href="https://www.hello-algo.com/">
-    阅读网页版
-    </a>
-  &nbsp; | &nbsp;
-    <a href="https://github.com/krahets/hello-algo/releases">
-    下载 PDF 版
-    </a>
-</p>
-
 ## 关于本书
 
 本项目旨在打造一本开源免费、新手友好的数据结构与算法入门教程。
 
-- 全书采用动画图解，内容清晰易懂、学习曲线平滑，引导初学者探索数据结构与算法的“知识地图”；
-- 源代码可一键运行，帮助读者在实践练习中提升编程技能，了解算法工作原理和数据结构底层实现；
-- 鼓励读者互助学习，提问与评论通常可在两日内得到回复；
+- 全书采用动画图解，内容清晰易懂、学习曲线平滑，引导初学者探索数据结构与算法的知识地图。
+- 源代码可一键运行，帮助读者在练习中提升编程技能，了解算法工作原理和数据结构底层实现。
+- 鼓励读者互助学习，提问与评论通常可在两日内得到回复。
 
 若本书对您有所帮助，请在页面右上角点个 Star :star: 支持一下，谢谢！
 

docs/chapter_introduction/algorithms_are_everywhere.md

@@ -33,6 +33,15 @@
 
 查阅字典这个小学生必备技能，实际上就是著名的「二分查找」。从数据结构的角度，我们可以把字典视为一个已排序的「数组」；从算法的角度，我们可以将上述查字典的一系列操作看作是「二分查找」算法。
 
+**例三：货币找零**。假设我们在超市购买了 $69$ 元的商品，给收银员付了 $100$ 元，则收银员需要给我们找 $31$ 元。他会很自然地完成以下思考：
+
+1. 可选项是比 $31$ 元面值更小的货币，包括 $1$ , $5$ , $10$ , $20$ 元。
+2. 从可选项中拿出最大的 $20$ 元，剩余 $31 - 20 = 11$ 元。
+3. 从剩余可选项中拿出最大的 $10$ 元，剩余 $11 - 10 = 1$ 元。
+4. 从剩余可选项中拿出最大的 $1$ 元，剩余 $1 - 1 = 0$ 元。完成找零。
+
+在以上步骤中，我们每一步都采取当前看来最好的选择（尽可能用大面额的货币），最终得到了可行的找零方案 $20 + 10 + 1 = 31$ 元。从数据结构与算法的角度看，以上方法本质上是「贪心算法」。
+
 小到烹饪一道菜，大到星际航行，几乎所有问题的解决都离不开算法。计算机的出现使我们能够通过编程将数据结构存储在内存中，同时编写代码调用 CPU 和 GPU 执行算法。这样一来，我们就能把生活中的问题转移到计算机上，以更高效的方式解决各种复杂问题。
 
 !!! tip

docs/index.md

@@ -4,16 +4,26 @@ hide:
   - footer
 ---
 
-=== " "
+<h1 align="center">  </h1>
 
-    <div class="result" markdown>
-    ![conceptual_rendering](index.assets/conceptual_rendering.png){ align=left width=330 }
-    </br></br></br></br></br>
-    <h1 align="center"> 《 Hello 算法 》 </h1>
-    <p align="center"> 动画图解、能运行、可提问的</br>数据结构与算法快速入门教程 </p>
-    <p align="center"> [![github-stars](https://img.shields.io/github/stars/krahets/hello-algo?style=social)](https://github.com/krahets/hello-algo)</p>
-    <h6 align="center"> [@Krahets](https://leetcode.cn/u/jyd/) </h6>
-    </div>
+<p align="center">
+  <img src="index.assets/conceptual_rendering.png" width="270">
+  &emsp; &emsp;
+  <img src="index.assets/hello_algo_knowledge_map_tp.png" width="400">
+</p>
+
+<h2 align="center"> 《 Hello 算法 》</h2>
+
+<p align="center"> 动画图解、能运行、可提问的数据结构与算法教程 </p>
+
+<p align="center">
+  <a href="https://github.com/krahets/hello-algo">
+    <img src="index.assets/btn_download_code.png" width="150">
+  </a>
+  <a href="https://github.com/krahets/hello-algo/releases">
+    <img src="index.assets/btn_download_pdf.png" width="150">
+  </a>
+</p>
 
 ---
 
@@ -33,7 +43,7 @@ hide:
 
 ---
 
-<h3 align="center"> 「全书动画图解」 </h3>
+<h3 align="center"> 全书动画图解 </h3>
 
 <p align="center"> 内容清晰易懂、学习曲线平滑</br>电脑、平板、手机全终端阅读 </p>
 
@@ -46,7 +56,7 @@ hide:
 
 ---
 
-<h3 align="center"> 「代码一键运行」 </h3>
+<h3 align="center"> 代码一键运行 </h3>
 
 <p align="center"> 提供各个算法与数据结构的简洁实现与测试样例，皆可直接运行</br>支持 Java, C++, Python, Go, JS, TS, C#, Swift, Zig 等语言 </p>
 
@@ -59,7 +69,7 @@ hide:
 
 ---
 
-<h3 align="center"> 「可讨论与提问」 </h3>
+<h3 align="center"> 可讨论与提问 </h3>
 
 <p align="center"> 鼓励小伙伴们互帮互助、共同成长</br>提问与评论一般能在两日内得到回复 </p>
 

docs/stylesheets/extra.css

@@ -19,7 +19,7 @@
     --md-accent-fg-color: #999;
 
     --md-typeset-color: #FEFEFE;
-    --md-typeset-a-color: #21C8B8;
+    --md-typeset-a-color: #21C8B8 !important;
 }
 
 /* https://github.com/squidfunk/mkdocs-material/issues/4832#issuecomment-1374891676 */
@@ -62,10 +62,6 @@
   font-weight: 500;
 }
 
-.md-typeset a {
-  text-decoration: underline;
-}
-
 /* Image align center */
 .center {
   display: block;

mkdocs.yml

@@ -49,7 +49,7 @@ theme:
         icon: material/weather-sunny
         name: Switch to dark mode
     - scheme: slate
-      # primary: grey
+      primary: grey
       # accent: indigo
       toggle:
         icon: material/weather-night