docs: update screenshots

README.md

@@ -1,11 +1,38 @@
-# xLog
+<p align="center">
+<img src="https://raw.githubusercontent.com/Crossbell-Box/xLog/main/public/logo.svg" alt="xLog" width="100">
+</p>
+<h1 align="center">xLog</h1>
 
-> On-Chain Content Creating for Absolutely Everyone
-
-Meet xLog, the on-chain and open-source blogging platform for everyone. Permanently stored on the blockchain by yourself.
+> An on-chain and open-source blogging platform for everyone.
 
 This project is developed based on [proselog](https://github.com/proselog/proselog)
 
+## Features
+
+## Elegant
+
+Out-of-the-box, good looking, no friction.
+
+![](https://raw.githubusercontent.com/Crossbell-Box/xLog/main/public/screenshot1.png)
+
+### On-chain
+
+All blog data, including configs, posts, following, comments, etc., are permanently stored on the blockchain with your own hands and can only be controlled by yourself and not the platform.
+
+![](https://raw.githubusercontent.com/Crossbell-Box/xLog/main/public/screenshot4.png)
+
+### Rich Interactions
+
+You can follow, comment, like, and mint your blog and posts, all on the blockchain of course.
+
+![](https://raw.githubusercontent.com/Crossbell-Box/xLog/main/public/screenshot2.png)
+
+### Highly Customizable
+
+Domain name, navigation bar, custom styles, all as you wish, and stored on the blockchain.
+
+![](https://raw.githubusercontent.com/Crossbell-Box/xLog/main/public/screenshot3.png)
+
 ## Development
 
 Follow the steps to run it locally.

src/pages/index.tsx

@@ -50,11 +50,21 @@ export default function Home({ region }: { region: string | null }) {
   }, [isTry, address, router])
 
   const description = [
+    {
+      screenshot: {
+        src: "/screenshot1.png",
+        width: 3947,
+        height: 1888,
+      },
+      icon: <BlockchainIcon className="inline mb-2" />,
+      title: "Elegent",
+      text: <>Out-of-the-box, good looking, no friction.</>,
+    },
     {
       screenshot: {
         src: "/screenshot4.png",
         width: 1542,
-        height: 630,
+        height: 467,
       },
       icon: <BlockchainIcon className="inline mb-2" />,
       title: "On-chain",
@@ -70,7 +80,7 @@ export default function Home({ region }: { region: string | null }) {
       screenshot: {
         src: "/screenshot2.png",
         width: 1528,
-        height: 946,
+        height: 758,
       },
       icon: <LoveIcon className="inline mb-2" />,
       title: "Rich Interactions",
@@ -79,8 +89,8 @@ export default function Home({ region }: { region: string | null }) {
     {
       screenshot: {
         src: "/screenshot3.png",
-        width: 4232,
-        height: 1486,
+        width: 4394,
+        height: 1854,
       },
       icon: <DashboardIcon className="inline mb-2" />,
       title: "Highly Customizable",