chore: fix typo and styles (TuGraph-family#25)

* chore: update the README

* chore: fix typo and styles

README.md

@@ -1,19 +1,27 @@
-# Tugraph homesite
+# Tugraph Homesite
 
-## node version 
+## Node version 
 
-v16.16.0
+`v16.16.0`
 
 ## Getting Started
 
-Install dependencies,
+Install dependencies:
 
 ```bash
 $ yarn
 ```
 
-Start the dev server,
+Start the dev server:
 
 ```bash
 $ yarn start
 ```
+
+Develop:
+
+host config for the doc page
+
+``` base
+127.0.0.1 www.tugraph.org
+```

src/components/Banner/index.less

@@ -8,6 +8,8 @@
   padding: 0 120px;
 
   .containerWrapper {
+    max-width: 1200px;
+    margin: auto;
     display: flex;
     flex-direction: column;
     justify-content: center;

src/components/Carousel/index.tsx

@@ -28,7 +28,7 @@ export const Carousel = () => {
     },
     {
       title: intl.formatMessage({ id: 'home.sliders2' }),
-      url: '',
+      url: 'http://www.wicwuzhen.cn/web21/news/original/202110/t20211029_23287882.shtml',
       imgPc:
         'https://gw.alipayobjects.com/mdn/rms_fa12c2/afts/img/A*NFQWTJTyvN0AAAAAAAAAAAAAARQnAQ',
       imgMobile:

src/locales/en-US.ts

@@ -74,6 +74,8 @@ export default {
   'product.banner.playDesc0': '快速上手演示',
   'product.banner.playDesc1': '可视化操作演示',
   'product.feature': '产品特性',
+  'product.introduction':
+    ' 图数据库由蚂蚁集团与清华大学联合研发，构建了一套包含图存储、图计算、图学习、图研发平台的完善的图技术体系，拥有业界领先规模的图集群，解决了图数据分析面临的大数据量、高吞吐率和低延迟等重大挑战，是蚂蚁集团金融风控能力的重要基础设施，显著提升了欺诈洗钱等金融风险的实时识别能力和审理分析效率，并面向金融、工业、政务服务等行业客户。',
   'product.feature.title0': '完备可靠的一站式图存储',
   'product.feature.desc0':
     'HTAP原生图数据库，满足实时（如实时审核或推荐业务）和离线（如审计业务）的毫秒级复杂查询需求。支持分布式扩展，万亿图数据处理能力，千万顶点/秒的高吞吐率和低延迟，轻松应对不断变化的业务数据。支持 ACID 事务处理，达到可串行化隔离级别，保障数据一致性；超越国际灾难恢复能力6级要求，金融级高可靠。',
@@ -138,17 +140,17 @@ export default {
   'demo.example.challenge2':
     '信用卡申请中的团伙欺诈行为越发隐蔽，单点分析方法难以识别风险全貌。',
   'demo.example.solution0':
-    '金融风险防控是一个不断对抗升级的过程，越来越多的欺诈、洗钱案例呈现出团伙性和隐蔽性，仅靠单一事件和行为识别已无法准确决策，需要引入多维异构数据，进行全局洞察。',
+    '采用图数据模型代替传统关系型数据，每个顶点代表一个设备，每条边代表一条电力线， 可以更直观的呈现电力设备及网络。 通过TuGraph对图数据进行统一存储、管理和计算，其强大的查询语言、多层次灵活的 API，能够实时追踪电网运行状态，支持频繁且复杂的实时数据查询和更加高效的电网 模拟计算',
   'demo.example.solution1':
-    '鉴于电网庞大的设备规模和快速变化的用户行为，实时管理电网设备及监控运行状态一直是电网管理面临的挑战。蚂蚁集团联合用户开展基于图计算技术的设备管理及运行状态监控的探索与验证。',
+    '采用图数据模型代替传统关系型数据，每个顶点代表一个设备，每条边代表一条电力线， 可以更直观的呈现电力设备及网络。 通过TuGraph对图数据进行统一存储、管理和计算，其强大的查询语言、多层次灵活的 API，能够实时追踪电网运行状态，支持频繁且复杂的实时数据查询和更加高效的电网 模拟计算。',
   'demo.example.solution2':
     '团伙在申请信用卡时，通常会重复使用一些特定信息。在TuGraph上构建信用卡申请关联图谱，通过产内置的社区发现等算法挖掘异常申请信息，进而锁定可疑群体团体。',
   'demo.example.profit0':
     '通过图计算技术，2020全年反洗钱风险审理分析效率提升90%，风险识别能力提升了94倍， 有效的保护了支付宝百万亿交易规模的资金安全。',
   'demo.example.profit1':
     '双方通过TuGraph探索实时跟踪电网中数亿台设备的状态，包括响应复杂的实时查询（例如“从电源到接收器的最短路径”），模拟计划运行的效果（例如“添加新的设备或断开开关不会无意中破坏整个电网”）。',
   'demo.example.profit2':
-    '替代原有的开源计算框架GraphX，运算时间从10小时降至10分钟，并在业务效果上取得突破。 有效识别涉及套现、骗贷等违规行为的团伙控制信用卡。',
+    '双方通过TuGraph探索实时跟踪电网中数亿台设备的状态，包括响应复杂的实时查询（例如“从电源到接收器的最短路径”），模拟计划运行的效果（例如“添加新的设备或断开开关不会无意中破坏整个电网”）',
   'download.banner.slogan': 'TuGraph v3.3.0',
   'download.banner.notice': '最新版本2022.09.01',
   'form.banner.slogan': 'TuGraph企业版30天试用申请',

src/locales/zh-CN.ts

@@ -74,6 +74,8 @@ export default {
   'product.banner.playDesc0': '快速上手演示',
   'product.banner.playDesc1': '可视化操作演示',
   'product.feature': '产品特性',
+  'product.introduction':
+    ' 图数据库由蚂蚁集团与清华大学联合研发，构建了一套包含图存储、图计算、图学习、图研发平台的完善的图技术体系，拥有业界领先规模的图集群，解决了图数据分析面临的大数据量、高吞吐率和低延迟等重大挑战，是蚂蚁集团金融风控能力的重要基础设施，显著提升了欺诈洗钱等金融风险的实时识别能力和审理分析效率，并面向金融、工业、政务服务等行业客户。',
   'product.feature.title0': '完备可靠的一站式图存储',
   'product.feature.desc0':
     'HTAP原生图数据库，满足实时（如实时审核或推荐业务）和离线（如审计业务）的毫秒级复杂查询需求。支持分布式扩展，万亿图数据处理能力，千万顶点/秒的高吞吐率和低延迟，轻松应对不断变化的业务数据。支持 ACID 事务处理，达到可串行化隔离级别，保障数据一致性；超越国际灾难恢复能力6级要求，金融级高可靠。',
@@ -138,17 +140,17 @@ export default {
   'demo.example.challenge2':
     '信用卡申请中的团伙欺诈行为越发隐蔽，单点分析方法难以识别风险全貌。',
   'demo.example.solution0':
-    '金融风险防控是一个不断对抗升级的过程，越来越多的欺诈、洗钱案例呈现出团伙性和隐蔽性，仅靠单一事件和行为识别已无法准确决策，需要引入多维异构数据，进行全局洞察。',
+    '采用图数据模型代替传统关系型数据，每个顶点代表一个设备，每条边代表一条电力线， 可以更直观的呈现电力设备及网络。 通过TuGraph对图数据进行统一存储、管理和计算，其强大的查询语言、多层次灵活的 API，能够实时追踪电网运行状态，支持频繁且复杂的实时数据查询和更加高效的电网 模拟计算',
   'demo.example.solution1':
-    '鉴于电网庞大的设备规模和快速变化的用户行为，实时管理电网设备及监控运行状态一直是电网管理面临的挑战。蚂蚁集团联合用户开展基于图计算技术的设备管理及运行状态监控的探索与验证。',
+    '采用图数据模型代替传统关系型数据，每个顶点代表一个设备，每条边代表一条电力线， 可以更直观的呈现电力设备及网络。 通过TuGraph对图数据进行统一存储、管理和计算，其强大的查询语言、多层次灵活的 API，能够实时追踪电网运行状态，支持频繁且复杂的实时数据查询和更加高效的电网 模拟计算。',
   'demo.example.solution2':
     '团伙在申请信用卡时，通常会重复使用一些特定信息。在TuGraph上构建信用卡申请关联图谱，通过产内置的社区发现等算法挖掘异常申请信息，进而锁定可疑群体团体。',
   'demo.example.profit0':
     '通过图计算技术，2020全年反洗钱风险审理分析效率提升90%，风险识别能力提升了94倍， 有效的保护了支付宝百万亿交易规模的资金安全。',
   'demo.example.profit1':
     '双方通过TuGraph探索实时跟踪电网中数亿台设备的状态，包括响应复杂的实时查询（例如“从电源到接收器的最短路径”），模拟计划运行的效果（例如“添加新的设备或断开开关不会无意中破坏整个电网”）。',
   'demo.example.profit2':
-    '替代原有的开源计算框架GraphX，运算时间从10小时降至10分钟，并在业务效果上取得突破。 有效识别涉及套现、骗贷等违规行为的团伙控制信用卡。',
+    '双方通过TuGraph探索实时跟踪电网中数亿台设备的状态，包括响应复杂的实时查询（例如“从电源到接收器的最短路径”），模拟计划运行的效果（例如“添加新的设备或断开开关不会无意中破坏整个电网”）',
   'download.banner.slogan': 'TuGraph v3.3.0',
   'download.banner.notice': '最新版本2022.09.01',
   'form.banner.slogan': 'TuGraph企业版30天试用申请',

src/pages/blog.less

@@ -2,6 +2,9 @@
 .containerWrapper {
   padding-bottom: 120px;
   text-align: right;
+  max-width: 1200px;
+  margin: auto;
+
   .listWrapper {
     background-color: #FFFFFF;
     box-shadow: 0 10px 30px 10px rgba(158,181,213,0.10);

src/pages/demo.less

@@ -68,7 +68,7 @@
     .exampleCards {
 
       .exampleCard {
-        margin: 40px 0;
+        margin: 40px auto;
         max-width: 1200px;
         width: 100%;
 
@@ -78,7 +78,7 @@
           box-sizing: content-box;
 
           .header {
-            padding-bottom: 35px;
+            padding-bottom: 24px;
 
             .title {       
               font-weight: 600;

src/pages/demo.tsx

@@ -48,7 +48,7 @@ export default function DemoPage() {
                     id: 'demo.example.title0',
                   })}${isWide ? ' | ' : ''}`}
                 </div>
-                <div className={styles.subTitle} style={{ height: '80px' }}>
+                <div className={styles.subTitle}>
                   {intl.formatMessage({ id: 'demo.example.subTitle0' })}
                 </div>
               </Space>

src/pages/product.less

@@ -12,6 +12,8 @@
   .banner {
       padding: 35px 65px;
       height: 478px;
+      max-width: 1200px;
+      margin: auto auto 120px auto;
 
       .title {
         font-weight: 600;
@@ -53,7 +55,7 @@
     .featCard {
       margin-right: 24px;
       min-height: 271px;
-      max-width: 588px;  
+      max-width: 580px;  
       border-radius: 12px;
       background-color: #FFFFFF;
       box-shadow: 0 10px 30px 10px rgba(158,181,213,0.10);
@@ -80,6 +82,8 @@
   .reasonWrapper {
 
     .reasonCard {
+      max-width: 1200px;
+      margin: auto;
       padding: 80px 56px;
       position: relative;
       font-weight: 400;

src/pages/product.tsx

@@ -110,6 +110,15 @@ export default function ProductPage() {
           </>
         )}
       </div>
+
+      <div className={styles.reasonWrapper}>
+        <div className={styles.reasonCard}>
+          <div>{intl.formatMessage({ id: 'product.introduction' })}</div>
+          {isWide && (
+            <img src="https://gw.alipayobjects.com/zos/bmw-prod/5eda9000-4c3c-4d30-9378-abfb25b57db3.svg" />
+          )}
+        </div>
+      </div>
       <SubTitle title={intl.formatMessage({ id: 'product.feature' })} />
       <Row className={styles.featCards} gutter={[24, 24]}>
         <Col className={styles.featCard} span={isWide ? 12 : 24}>