fix: home banner style (#153)

Author: KaiMing-L

src/components/Footer/index.less

@@ -22,6 +22,8 @@
   }
 
   .containerWrapper {
+    max-width: 80rem;
+    padding: 0 32px;
     margin: auto;
     margin-bottom: 48px;
 

src/components/HeroCard/index.less

@@ -84,6 +84,10 @@
         background-color: rgb(53, 169, 245);
         border-radius: 50%;
       }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
   }
 }
@@ -95,16 +99,16 @@
 }
 
 .cardPosition0 {
-  bottom: -10px;
+  bottom: 65px;
   right: 100px;
 }
 
 .cardPosition1 {
-  top: 140px;
+  top: 65px;
   right: 200px;
 }
 
 .cardPosition2 {
-  top: -25px;
+  top: -90px;
   right: 100px;
 }

src/components/ProductBanner/index.less

@@ -10,6 +10,7 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
+  align-items: center;
 
   @media (min-width: 640px) {
     padding-top: 5rem;

src/components/TrackSVG/index.less

@@ -1,5 +1,5 @@
 .mianBox {
-  transform: translate(110px, 170px) rotate(45deg);
+  transform: translate(110px, 95px) rotate(45deg);
 }
 
 .box {

src/components/TrackSVG/index.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import styles from './index.less';
 
 const TrackSVG = () => {

src/layouts/index.less

@@ -16,6 +16,11 @@
   padding: 88px 32px 0;
 }
 
+.content {
+  max-width: 80rem;
+  margin: auto;
+}
+
 @media screen and (max-width: 768px) {
   .mainWrapper {
     padding: 88px 16px 0;
@@ -26,3 +31,9 @@
     width: 1440px;
   }
 }
+
+@media (min-width: 1440) {
+  .mainWrapper {
+    margin: 2.5rem 160px 0;
+  }
+}