fix: #212 (#213)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 08472fc..64189c0 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -136,7 +136,7 @@
     navbar: {
       title: "Apache APISIX™",
       logo: {
-        src: "img/logo.png",
+        src: "img/logo2.svg",
       },
       items: [
         {
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index b9b873e..2dd6559 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -57,9 +57,22 @@
   color: var(--color-primary);
 }
 
+.navbar__title{
+  font-size: 18px;
+  height: 30px;
+}
+
 /* home splash */
 .home-splash {
-  margin-top: 8px;
+  margin-top: 0px;
+  margin-bottom: -50px;
+}
+@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
+  .home-splash {
+    /* margin-top: 8px; Original*/
+    margin-top: -20px;
+    margin-bottom: -50px;/*Check*/
+  }
 }
 
 .home-splash .title {
@@ -69,7 +82,7 @@
 }
 
 .home-splash .title.brand {
-  font-size: 2.9rem;
+  font-size: 2.69rem;
   color: #df2d2d;
 }
 
@@ -248,6 +261,7 @@
 }
 .learn-how .container {
   margin-top: 36px;
+  padding-bottom: 30px;
 }
 .learn-how .hero__title {
   font-weight: 700;
@@ -260,11 +274,12 @@
 /* button */
 .button {
   margin: 0 10px;
-  padding: 8px 18px;
+  padding: 18px 18px;
   font-size: 18px;
   font-weight: 600;
   border-radius: 10px;
   border: none;
+  width: 224px;
   background: #fee2e2;
   color: #ef4444;
   transition: all 0.3s;
@@ -278,6 +293,7 @@
   color: white;
   display: inline-flex;
   align-items: center;
+  margin-bottom: 15px;
 }
 .button.github .github-logo {
   height: 24px;
@@ -294,6 +310,7 @@
   color: var(--color-secondary);
   border: 1px solid #d1d5db;
   box-sizing: border-box;
+  margin-bottom: 15px;
 }
 .button.secondary:hover {
   background: #e5e7eb;
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index a78e506..cef385e 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -10,7 +10,7 @@
 
 const HomeSplash = () => {
   const [featureWordIndex, setFeatureWordIndex] = useState(0);
-  const featureWords = ["Dynamic", "Real-Time", "High-Performance"];
+  const featureWords = ["Dynamic", "Real-Time", "Performant"];
 
   const [isShow, setIsShow] = useState(true);
 
@@ -55,7 +55,7 @@
                   <span>{featureWords[featureWordIndex]}</span>
                 </CSSTransition>
               </span>
-              &nbsp;Cloud-Native API Gateway
+              &nbsp; Cloud-Native API Gateway
             </h1>
             <div className="subtitle">
               Provides rich traffic management features such as load balancing,
diff --git a/website/static/img/logo1.svg b/website/static/img/logo1.svg
new file mode 100644
index 0000000..4bbf632
--- /dev/null
+++ b/website/static/img/logo1.svg
@@ -0,0 +1,5 @@
+<svg width="185" height="156" viewBox="0 0 185 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#E83F3C"/>
+<path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="#C4292E"/>
+<path d="M140 155.5H185L94 0L140 155.5Z" fill="#CD3B3A"/>
+</svg>
diff --git a/website/static/img/logo2.svg b/website/static/img/logo2.svg
new file mode 100644
index 0000000..8e99cc5
--- /dev/null
+++ b/website/static/img/logo2.svg
@@ -0,0 +1,15 @@
+<svg width="185" height="156" viewBox="0 0 185 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#F8423F"/>
+<path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)"/>
+<path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.536111" stop-color="#FC0A04"/>
+<stop offset="1" stop-color="#CF0500" stop-opacity="0.77"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
+<stop offset="0.473466" stop-color="#E2423E"/>
+<stop offset="1" stop-color="#E2423E" stop-opacity="0.77"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/website/static/img/logo3.svg b/website/static/img/logo3.svg
new file mode 100644
index 0000000..f950262
--- /dev/null
+++ b/website/static/img/logo3.svg
@@ -0,0 +1,15 @@
+<svg width="185" height="156" viewBox="0 0 185 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 155.5L94 0L185 155.5H140L94 83L42.5 155.5H0Z" fill="#FFE4E3"/>
+<path d="M94 82.5L42.5 155H0L76.5 57L94 82.5Z" fill="url(#paint0_linear)"/>
+<path d="M140 155.5H185L94 0L140 155.5Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="222.5" y1="50" x2="85" y2="223.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.536111" stop-color="#FC0A04"/>
+<stop offset="1" stop-color="#CF0500" stop-opacity="0.77"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="139.5" y1="1.50861e-06" x2="226" y2="136" gradientUnits="userSpaceOnUse">
+<stop offset="0.473466" stop-color="#E2423E"/>
+<stop offset="1" stop-color="#E2423E" stop-opacity="0.77"/>
+</linearGradient>
+</defs>
+</svg>