Update the landing page, preface and reference (#1067)

* Add preface to the preface chapter and the introduction chapter

* Update the landing page

* Update the reference

docs/chapter_introduction/index.md

@@ -11,3 +11,11 @@
     一位少女翩翩起舞，与数据交织在一起，裙摆上飘扬着算法的旋律。
     
     她邀请你共舞，请紧跟她的步伐，踏入充满逻辑与美感的算法世界。
+
+计算机的出现给世界带来了巨大变革，它凭借高速的计算能力和出色的可编程性，成为了执行算法与处理数据的理想媒介。无论是电子游戏的逼真画面、自动驾驶的智能决策，还是 AlphaGo 的精彩棋局、ChatGPT 的自然交互，这些应用都是算法在计算机上的精妙演绎。
+
+事实上，在计算机问世之前，算法和数据结构就已经存在于世界的各个角落。早期的算法相对简单，例如古代的计数方法和工具制作步骤等。随着文明的进步，算法逐渐变得更加精细和复杂。从巧夺天工的匠人技艺、到解放生产力的工业产品、再到宇宙运行的科学规律，几乎每一件平凡或令人惊叹的事物背后，都隐藏着精妙的算法思想。
+
+同样，数据结构无处不在：大到社会网络，小到地铁线路，许多系统都可以建模为“图”；大到一个国家，小到一个家庭，社会的主要组织形式呈现出“树”的特征；冬天的衣服就像“栈”，最先穿上的最后才能脱下；羽毛球筒则如同“队列”，一端放入、另一端取出；字典就像一个“哈希表”，能够快速查找目标词条。
+
+那么，什么是算法，它在我们日常生活中扮演着怎样的角色？接下来，我们将就这些问题展开探讨。

docs/chapter_preface/index.md

@@ -11,3 +11,11 @@
     算法犹如美妙的交响乐，每一行代码都像韵律般流淌。
     
     愿这本书在你的脑海中轻轻响起，留下独特而深刻的旋律。
+
+两年前，我在力扣上分享了“剑指 Offer”系列题解，受到了许多读者的鼓励和支持。在与读者交流期间，我最常被问的一个问题是“如何入门算法”。逐渐地，我对这个问题产生了浓厚的兴趣。
+
+两眼一抹黑地刷题似乎是最受欢迎的方法，简单、直接且有效。然而刷题就如同玩“扫雷”游戏，自学能力强的人能够顺利将地雷逐个排掉，而基础不足的人很可能被得的满头是包，并在挫折中步步退缩。通读教材也是一种常见做法，但对于面向求职的人来说，毕业论文、投递简历、准备笔试和面试已经消耗了大部分精力，啃厚重的书往往变成了一项艰巨的挑战。
+
+如果你也面临类似的困扰，那么很幸运这本书“找”到了你。本书是我对这个问题给出的答案，即使不是最优解，也至少是一次积极的尝试。本书虽然不足以让你直接拿到 Offer，但会引导你探索数据结构与算法的“知识地图”，带你了解不同“地雷”的形状、大小和分布位置，让你掌握各种“排雷方法”。有了这些本领，相信你可以更加自如地刷题和阅读文献，逐步构建起完整的知识体系。
+
+我深深赞同费曼教授所言：“Knowledge isn’t free. You have to pay attention.”从这个意义上看，这本书并非完全“免费”。为了不辜负你为本书所付出的宝贵“注意力”，我会竭尽所能，投入最大的“注意力”来完成本书的创作。

docs/chapter_reference/index.md

@@ -4,16 +4,18 @@
 
 [2] Aditya Bhargava. Grokking Algorithms: An Illustrated Guide for Programmers and Other Curious People (1st Edition).
 
-[3] 严蔚敏. 数据结构（C 语言版）.
+[3] Robert Sedgewick, et al. Algorithms (4th Edition).
 
-[4] 邓俊辉. 数据结构（C++ 语言版，第三版）.
+[4] 严蔚敏. 数据结构（C 语言版）.
 
-[5] 马克 艾伦 维斯著，陈越译. 数据结构与算法分析：Java语言描述（第三版）.
+[5] 邓俊辉. 数据结构（C++ 语言版，第三版）.
 
-[6] 程杰. 大话数据结构.
+[6] 马克 艾伦 维斯著，陈越译. 数据结构与算法分析：Java语言描述（第三版）.
 
-[7] 王争. 数据结构与算法之美.
+[7] 程杰. 大话数据结构.
 
-[8] Gayle Laakmann McDowell. Cracking the Coding Interview: 189 Programming Questions and Solutions (6th Edition). 
+[8] 王争. 数据结构与算法之美.
 
-[9] Aston Zhang, et al. Dive into Deep Learning.
+[9] Gayle Laakmann McDowell. Cracking the Coding Interview: 189 Programming Questions and Solutions (6th Edition).
+
+[10] Aston Zhang, et al. Dive into Deep Learning.

docs/index.md

@@ -93,14 +93,14 @@ hide:
   </div>
 
   <!-- heading and buttons -->
-  <div style="width: 100%; position: absolute; transform: translateX(-50%); left: 50%; bottom: min(2vh, 3vw); pointer-events: none;">
+  <div style="width: 100%; position: absolute; transform: translateX(-50%); left: 50%; bottom: min(2vh, 3vw); pointer-events: none; color: #fff;">
     <img style="height: min(9vh, 12vw);"
       src="https://readme-typing-svg.demolab.com/?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=FFF&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+%E7%AE%97%E6%B3%95+!"
       alt="hello-algo-typing-svg" />
-    <p style="color: #fff; margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">
-      动画图解、一键运行的数据结构与算法教程
-    </p>
     <div style="pointer-events: auto;">
+      <p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">
+        动画图解、一键运行的数据结构与算法教程
+      </p>
       <a href="/chapter_preface/" class="rounded-button">
         <svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -133,9 +133,7 @@ hide:
 <!-- Section: brief introduction  -->
 <section data-md-color-scheme="slate" class="home-div">
   <div class="section-content">
-    <div style="margin-top: 2em; margin-bottom: 1em;">
-      <img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 39em;">
-    </div>
+    <img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 39em;">
     <div class="code-badge">
       <img src="https://img.shields.io/badge/Python-snow?logo=python&logoColor=3776AB">
       <img src="https://img.shields.io/badge/C%2B%2B-snow?logo=c%2B%2B&logoColor=00599C">

overrides/stylesheets/extra.css

@@ -292,9 +292,8 @@ body {
   margin-top: -2.4rem;
   padding: 0;
   position: relative;
-  color: white;
   font-size: min(1.8vh, 2.5vw);
-  font-weight: 500;
+  font-weight: normal;
 }
 
 .hero-bg {
@@ -316,6 +315,7 @@ body {
   position: absolute;
   transform: translateX(-50%) translateY(-50%);
   white-space: nowrap; /* prevent line breaks */
+  color: white;
 }
 
 a:hover .hero-on-hover {
@@ -333,7 +333,7 @@ a:hover .hero-caption {
 .code-badge {
   width: 100%;
   height: auto;
-  margin: 0 auto;
+  margin: 1em auto;
 }
 
 .code-badge img {