1

package-lock.json

@@ -16,9 +16,9 @@
         "layui": "^2.9.7",
         "postcss-pxtorem": "^6.1.0",
         "svg-sprite-loader": "^6.0.11",
-        "swiper": "^11.0.7",
-        "vant": "^2.13.2",
+        "swiper": "^5.4.5",
         "vue": "^2.6.14",
+        "vue-awesome-swiper": "^4.1.1",
         "vue-router": "^3.5.1",
         "vuelidate": "^0.7.7"
       },
@@ -1765,6 +1765,7 @@
       "version": "7.23.9",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.23.9.tgz",
       "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
+      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -2320,20 +2321,11 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@vant/icons": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmmirror.com/@vant/icons/-/icons-3.0.2.tgz",
-      "integrity": "sha512-4OlRVMd0uiDtD9hgSISZW8hB95vU0fFtc41tQchRIyiXkR0tS+DydZOLb8/bQkithrNWhW7Uud38MbKjlJ9lJw=="
-    },
-    "node_modules/@vant/popperjs": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
-      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
-    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==",
+      "dev": true
     },
     "node_modules/@vue/babel-helper-vue-transform-on": {
       "version": "1.2.1",
@@ -5224,6 +5216,14 @@
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true
     },
+    "node_modules/dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "dependencies": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -9626,7 +9626,8 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
@@ -10494,6 +10495,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
@@ -11011,9 +11017,14 @@
       }
     },
     "node_modules/swiper": {
-      "version": "11.0.7",
-      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-11.0.7.tgz",
-      "integrity": "sha512-cDfglW1B6uSmB6eB6pNmzDTNLmZtu5bWWa1vak0RU7fOI9qHjMzl7gVBvYSl34b0RU2N11HxxETJqQ5LeqI1cA==",
+      "version": "5.4.5",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      },
       "engines": {
         "node": ">= 4.7.0"
       }
@@ -11561,21 +11572,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/vant": {
-      "version": "2.13.2",
-      "resolved": "https://registry.npmmirror.com/vant/-/vant-2.13.2.tgz",
-      "integrity": "sha512-anZbbLqXCq+rUJk10D67mn+V/1/i9tfOTdoR+64B0e+0BzV3KFgpHBF76noLa+yX9i/L+8DeL560WMk0GEN38g==",
-      "dependencies": {
-        "@babel/runtime": "7.x",
-        "@vant/icons": "^3.0.2",
-        "@vant/popperjs": "^1.1.0",
-        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
-        "vue-lazyload": "1.2.3"
-      },
-      "peerDependencies": {
-        "vue": ">= 2.6.0"
-      }
-    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
@@ -11595,17 +11591,24 @@
         "csstype": "^3.1.0"
       }
     },
+    "node_modules/vue-awesome-swiper": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-4.1.1.tgz",
+      "integrity": "sha512-50um10t6N+lJaORkpwSi1wWuMmBI1sgFc9Znsi5oUykw2cO5DzLaBHcO2JNX21R+Ue4TGoIJDhhxjBHtkFrTEQ==",
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "swiper": "^5.2.0",
+        "vue": "2.x"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
-    "node_modules/vue-lazyload": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.2.3.tgz",
-      "integrity": "sha512-DC0ZwxanbRhx79tlA3zY5OYJkH8FYp3WBAnAJbrcuoS8eye1P73rcgAZhyxFSPUluJUTelMB+i/+VkNU/qVm7g=="
-    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.4.2.tgz",

src/components/Sales.vue

@@ -6,6 +6,7 @@
         <p>You can count on us. </p>
         <p>Our committed sales team is ready to assist you in discovering the perfect solution for your needs.</p>
       </div>
+
       <div class="right-content">
         <div class="team-member" v-for="member in teamMembers" :key="member.id">
           <el-avatar :src="member.avatar" shape="circle" class="avatar-container"></el-avatar>
@@ -18,13 +19,47 @@
           </div>
         </div>
       </div>
+
+      <div class="swiper-wrap">
+        <swiper class="swiper" :options="swiperOption">
+            <swiper-slide class="swiper-item" v-for="member in teamMembers" :key="member.id">
+              <el-avatar :src="member.avatar" shape="circle" class="avatar-container"></el-avatar>
+            <div class="member-info">
+            <h3>{{ member.name }}</h3>
+            <p><b>Mobile:</b> {{ member.mobile }}</p>
+            <p><b>E:</b> {{ member.email }}</p>
+            <p><b>Language:</b> {{ member.language }}</p>
+            <p><b>Location:</b> {{ member.location }}</p>
+          </div>
+          </swiper-slide>
+          <div class="swiper-button-prev" slot="button-prev"></div>
+          <div class="swiper-button-next" slot="button-next"></div>
+        </swiper>
+      </div>
+
+      
+
     </div>
   </template>
   
   <script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
   export default {
+    name: 'SalesTeam',
+    components: {
+      Swiper,
+      SwiperSlide
+    },
     data() {
       return {
+        swiperOption: {
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                },
+                loop: true,
+            },
         teamMembers: [
           {
             id: 1,
@@ -77,7 +112,7 @@
   }
   </script>
   
-  <style scoped>
+  <style lang="less" scoped>
   .main{
     width: 1200px;
     margin-left: auto;
@@ -126,12 +161,16 @@
 .team-member{
   width: 280px;
 }
+.swiper-wrap{
+  display: none;
+}
 }
 
 
 /* 小屏幕 */
 @media screen and (max-width: 767px) {
-.left-content{
+  .sales-team{
+  .left-content{
   h2{
     font-size: 36px;
     line-height: 38.88px;
@@ -141,5 +180,31 @@
     line-height: 36px;
   }
 }
+.right-content{
+  display: none;
+}
+.swiper-wrap{
+  display: block;
+  .swiper-item{
+    text-align: center;
+    p{
+      text-align: center;
+    }
+  }
+
+}
+.swiper-button-prev:after{
+            font-size: 16px;
+            font-weight: 800;
+            color: #005372;
+        }
+.swiper-button-next:after{
+            font-size: 16px;
+            font-weight: 800;
+            color: #005372;
+        }
+}
+
+
 }
 </style>

src/components/footerMenu.vue

@@ -1,11 +1,9 @@
 <template>
 
     <div class="buttonMenu">
-        <div class="buttonBg">
-           
+        <div class="buttonBg">           
                 <div class="buttonText">
-                    <div class="titleLogo">
-                        
+                    <div class="titleLogo">                        
                         <div @click="goToTop" class="buttonLogo">
                             <img src="../assets/index/Group63.png" alt="">
                             <p>2024 © TrustyPay Payments. All rights reserved.</p>
@@ -34,10 +32,9 @@
                         
                         <div class="rightInfo">
                             <div class="jumpImg">
-                               <a href="https://www.linkedin.com/company/trusty-pay/"> <img src="@/assets/index/linkedin.png" alt=""></a>
+                               <a href="https://www.linkedin.com/company/trusty-pay/"><img src="@/assets/index/linkedin.png" style="width:50px;"></a>                               
                             </div>
-                            <div class="contactText">
-                                
+                            <div class="contactText">                                
                                 <div class="call" @click="call">                                    
                                    <p>Phone: <a href="">1300 67 61 61</a></p> 
                                 </div>
@@ -46,8 +43,7 @@
                                 </div>
                                <div class="support" @click="sendSupport">
                                  <p>Contact support team: <a href="">support@trustypay.com.au</a> </p> 
-                               </div>
-                                                         
+                               </div>                                                         
                                 <p>Address: Level 1, 480 Collins St Melbourne 3000 VIC AUSTRALIA </p>                               
                             </div>
                         </div>
@@ -81,6 +77,7 @@ export default {
                 behavior: 'smooth'
             })
         },
+       
         call() {
       window.location.href = "tel:1300676161";
     },
@@ -97,11 +94,10 @@ export default {
 
 <style>
 .buttonMenu {  
-    .buttonBg {
-        background: url('@/assets/index/asset1.png');
-        width: 100%;
-        height: auto;
-
+    background: url('@/assets/index/asset1.png');
+    
+    .buttonBg {       
+    
         .buttonText {
             display: flex;
             justify-content: center;
@@ -124,7 +120,7 @@ export default {
                     cursor: pointer;
                 }
                 .buttonBtn {
-                    padding-top: 70px;
+                    padding-top: 40px;
 
                     .el-button {
                         font-size: 18px;
@@ -153,23 +149,22 @@ export default {
             nav a:hover {
                 color: #fff;
             }
-            .rightInfo{
-         
+        .rightInfo{         
          margin-top: 15px;
          .jumpImg{
             width: 50px;
             height: 50px;
-             img{
-                 width: 50px;
-                 height: 50px;
+             .to-link{
+                 width: 48px;
+                 height: auto;
              }
          }
          .contactText{
              p{
              font-family: Regular;
              text-align: left;   
-             padding:4px 0;
-             cursor: pointer;                  
+             padding:4px 0; 
+             word-wrap:break-word;               
              }
           
             
@@ -192,12 +187,33 @@ export default {
 }
 
 /* 小屏幕 */
-@media (max-width: 767px) {
-    .buttonMenu{
-        height:auto;
+@media screen and (max-width: 767px) {
+.buttonText{
+    display: block !important;
+    text-align: center;
+    .buttonLogo{
+        img{
+            width: 200px !important;
+            height: auto !important;
+        }
+    
     }
-  .buttonText {
-   display: inline;
+}
+.rightInfo{
+   padding: 20px 0;
+  .jumpImg{
+    margin: 0 auto;
+ 
   }
+  .contactText{
+    p{
+        text-align: center !important;
+        word-wrap:break-word !important;
+        padding: 3px 20px !important;
+    }
+  }
+
+}
+
 }
 </style>

src/components/headTop.vue

@@ -22,7 +22,8 @@
       </div>
 
       <div class="header-mobile-tool">
-        <i :class="isShowMenu ? 'el-icon-close' : 'el-icon-edit'" @click.stop="toggleMenu()"></i>
+        <!-- <i :class="isShowMenu ? 'el-icon-close' : 'el-icon-edit'" @click.stop="toggleMenu()"></i> -->
+        <img :src="isShowMenu ? closeIconSrc : editIconSrc" @click.stop="toggleMenu()" class="icon-img" />
       </div>
 
       <router-link class="header-tool" to="/ContactUs">Sign up</router-link>
@@ -46,6 +47,8 @@ export default {
   data() {
     return {
       isShowMenu: false,
+      closeIconSrc: require('@/assets/vector.png'),
+      editIconSrc: require('@/assets/group-145.png'),
       links: [
         { name: "Payments", path: "/Payments" },
         { name: "About Us", path: "/AboutUs" },
@@ -238,7 +241,7 @@ export default {
         width: 164px;
         height: 33px;
         cursor: pointer;
-        margin-left: 20px;
+        margin-left: 80px;
       }
 
       .header-link-wrap {
@@ -271,6 +274,13 @@ export default {
         i {
           cursor: pointer;
         }
+        .el-icon-close:before{
+          color: #45C7F6;
+        }
+        .icon-img{
+          width: 23px;
+          height: 18px;
+        }
       }
     }
 

src/components/indexAccept.vue

@@ -4,9 +4,8 @@
             <div class="accept-title">
                 <h2>Accept popular cards & digital wallets</h2>
             </div>
-            <div class="accept-logo">
-            
-                <div class="accept-row1">
+            <div class="accept-logo">            
+                <div class="accept-row">
                     <div class="visa"><img src="../assets/payments/visa.png" alt=""></div>
                     <div class="master-card"><img src="../assets/payments/mastercard.png" alt=""></div>
                     <div class="eft-pos"><img src="../assets/payments/eftops.png" alt=""></div>
@@ -14,21 +13,83 @@
                     <div class="jcb"><img src="../assets/payments/jcb.png" alt=""></div>
                     <div class="union-pay"><img src="../assets/payments/unionPay.png" alt=""></div>
                 </div>
-                <div class="accept-row2">
+                <div class="accept-row">
                     <div class="G-pay"><img src="../assets/payments/Gpay.png" alt=""></div>
                     <div class="pay"><img src="../assets/payments/pay.png" alt=""></div>
                     <div class="club"><img src="../assets/payments/Diners.png" alt=""></div>
                     <div class="alipay"><img src="../assets/payments/Alipay.png" alt=""></div>
                     <div class="we-chat"><img src="../assets/payments/weChat.png" alt=""></div>
-                </div>
-              
+                </div>              
+            </div>
+
+            <div class="swiper-wrap">
+                <swiper class="swiper" :options="swiperOption">
+                    <swiper-slide class="swiper-item">
+                        <div class="visa"><img src="../assets/payments/visa.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="master-card"><img src="../assets/payments/mastercard.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="eft-pos"><img src="../assets/payments/eftops.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="american"><img src="../assets/payments/american.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="jcb"><img src="../assets/payments/jcb.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="union-pay"><img src="../assets/payments/unionPay.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="G-pay"><img src="../assets/payments/Gpay.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="pay"><img src="../assets/payments/pay.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="club"><img src="../assets/payments/Diners.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="alipay"><img src="../assets/payments/Alipay.png" alt=""></div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="we-chat"><img src="../assets/payments/weChat.png" alt=""></div>
+                    </swiper-slide>
+                    <div class="swiper-button-prev" slot="button-prev"></div>
+                    <div class="swiper-button-next" slot="button-next"></div>
+                </swiper>
             </div>
+
        
     </div>
 </template>
 
 <script>
-
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+export default {
+    name: 'swiper-example-navigation',
+    title: 'Navigation',
+    components: {
+        Swiper,
+        SwiperSlide
+    },
+    data(){
+        return {
+            swiperOption: {
+                slidesPerView: 2,
+                
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                },
+                loop: true,
+            },
+        }
+    }
+    }
 </script>
 
 <style lang="less" scoped>
@@ -49,7 +110,7 @@
     }
 
     .accept-logo {
-        .accept-row1 {
+        .accept-row {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -99,7 +160,7 @@
             }
         }
 
-        .accept-row2 {
+        .accept-row {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -142,10 +203,12 @@
             }
         }
     }
-
+.swiper-wrap{
+    display: none;
+}
 }
 
-@media (max-width: 767px) {
+@media screen and (max-width: 767px) {
     .accept {
         margin-top: 700px;
      
@@ -154,8 +217,37 @@
           font-size: 36px;
         }
     }
-
-
     }
+.accept-logo{
+        display: none;
+    }
+.swiper-wrap{
+    position: relative;
+    display: block !important;
+    .swiper{
+       height: 100px;
+    }
+.swiper-item{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    
+    img{
+        width: 80px;
+        height: auto;
+    }
+}
+.swiper-button-prev:after{
+            font-size: 16px;
+            font-weight: 800;
+            color: #005372;
+        }
+        .swiper-button-next:after{
+            font-size: 16px;
+            font-weight: 800;
+            color: #005372;
+        }
+}
 }
 </style>

src/components/indexChoose.vue

@@ -22,7 +22,6 @@
                 <div class="swiper-button-prev" slot="button-prev"></div>
                 <div class="swiper-button-next" slot="button-next"></div>
             </swiper>
-
         </div>
     </div>
 </template>
@@ -161,6 +160,16 @@ export default {
                 align-items: center;
             }
         }
+        .swiper-button-prev:after{
+            font-size: 16px;
+            font-weight: 800;
+            color: #507406;
+        }
+        .swiper-button-next:after{
+            font-size: 16px;
+            font-weight: 800;
+            color: #507406;
+        }
     }
 
 

src/components/indexOffer.vue

@@ -242,36 +242,66 @@
 @media (max-width: 767px) {
     .greenCard {
         text-align: center;
+        padding: 0 16px;
     }
  .cardList{
     width: 344px !important;
     height: 211px !important;
     display: block !important;  
-    h1{
+    .cardTitle{
+        margin-left: 0px !important;
+         h1{
        font-size: 48px;
        line-height: 72px;
-    } 
+       padding-top: 10px;
+    }   
+    }
+    .cardText{
+        margin-left: 0px !important;
+    }
+ 
     .cardImg{
         justify-content: center;
+        margin-top: 20px !important;
     }
  }
  .cardList1{
     width: 344px !important;
     height: 211px !important;
     display: block !important; 
-    h1{
+    .cardTitle1{
+        margin-left: 0px !important;
+         h1{
        font-size: 48px;
        line-height: 72px;
-    } 
+       padding-top: 10px;
+    }   
+    }
+    .cardText1{
+        margin-left: 0px !important;
+        line-height: 40px;
+    }
+    .cardImg1{
+        justify-content: center;
+        margin-top: 10px !important;
+    }
  }
  .cardList2{
     width: 344px !important;
     height: 211px !important;
     display: block !important; 
-    h1{
+    .cardTitle2{
+        margin-left: 0px !important;
+         h1{
        font-size: 48px;
        line-height: 72px;
-    }    
+       padding-top: 10px;
+    }   
+    } 
+    .cardText2{
+        margin-left: 0px !important;
+        line-height: 40px;
+    }
  }
 }
 </style>

src/components/indexPlug.vue

@@ -47,12 +47,88 @@
             </div>
         </div>
 
+        <div class="swiper-wrap">
+            <swiper class="swiper" :options="swiperOption">
+                <swiper-slide class="swiper-item">
+                    <div class="left">
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Hosted Payment Page</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Hosted Tokenisation Page</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>All Payment methods available on PSP</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Provisioning API (for settings synchronisation)</p>
+                        </div>
+                        <div class="bg-w">
+                             <svg-icon icon-class="circle" class="icon" />
+                            <p>Pre-configured logic forAutomatic/Delayed Capture</p>
+                        </div>
+                    </div>
+                </swiper-slide>
+                <swiper-slide class="swiper-item">
+                    <div class="right">
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Standalone or Integrated</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Password enabled security features</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Surcharging and Tipping</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Multi-Network Card Routing</p>
+                        </div>
+                        <div class="bg-w">
+                            <svg-icon icon-class="circle" class="icon" />
+                            <p>Dynamic Currency Conversion</p>
+                        </div>
+                    </div>
+                </swiper-slide>
+                <div class="swiper-button-prev" slot="button-prev"></div>
+                <div class="swiper-button-next" slot="button-next"></div>
+            </swiper>
+        </div>
+
     </div>
 
 </template>
 
 <script>
-
+import SvgIcon from './svgIcon.vue';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+export default {
+    name: 'swiper-example-navigation',
+    title: 'Navigation',
+    components: {
+        SvgIcon,
+        Swiper,
+        SwiperSlide
+    },
+    data() {
+        return {
+            swiperOption: {
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                }
+            }
+        }
+    }
+}
 </script>
 
 <style lang="less" scoped>
@@ -65,7 +141,6 @@
         display: flex;
         justify-content: center;
         gap: 40px;
-
         .bg-w {
             margin-top: 26px;
             width: 490px;
@@ -86,7 +161,57 @@
     }
 }
 
-@media screen and (max-width: 767px){
-    
+.swiper-wrap {
+    display: none;
+}
+
+@media screen and (max-width: 767px) {
+    .plug-list {
+        display: none !important;
+    }
+
+    .swiper-wrap {
+        display: block;
+        .left{
+        margin-bottom: 15px;
+        padding: 0 14px;
+    }
+    .right{
+        padding: 0 14px;
+    }
+        .bg-w {
+            display: flex;
+            align-items: center;
+            margin-top: 26px;
+            width: 348px;
+            height: 70px;
+            border-radius: 10px;
+            background-color: white;
+            box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+            line-height: 70px;
+            color: #1a5271;
+
+            p {
+                line-height: 20px; 
+               
+                             
+            }
+            .icon {
+                width:9%;
+                height: 28%;
+                padding: 0 20px;
+            }
+        }
+        .swiper-button-prev:after{
+            font-size: 20px;
+            font-weight: 800;
+            color: #005372;
+        }
+        .swiper-button-next:after{
+            font-size: 20px;
+            font-weight: 800;
+            color: #005372;
+        }
+    }
 }
 </style>

src/components/indexPlugPlay.vue

@@ -0,0 +1,283 @@
+<template>
+    <div class="integration-part">
+        <div class="main">
+            <div class="plugTitle">
+                <h2>Plug & Play Integrations</h2>
+                <h4>with leading eCommerce Platforms</h4>
+            </div>
+            <!-- pc -->
+            <div class="plugImg">
+                <div class="plugList1">
+                    <div class="sap"><img src="@/assets/index/sap.png" alt=""></div>
+                    <div class="shopify"><img src="@/assets/index/shopify.png" alt=""></div>
+                    <div class="sale"><img src="@/assets/index/sale.png" alt=""></div>
+                    <div class="magento"><img src="@/assets/index/magento.png" alt=""></div>
+                    <div class="big-commerce"><img src="@/assets/index/BigCommerce.png" alt=""></div>
+                </div>
+                <div class="plugList2">
+                    <div class="woo"><img src="@/assets/payments/woo.png" alt=""></div>
+                    <div class="presta-shop"><img src="@/assets/payments/prestashop.png" alt=""></div>
+                    <div class="pwa"><img src="@/assets/payments/pwa.png" alt=""></div>
+                    <div class="shop-ware"><img src="@/assets/payments/shopware.png" alt=""></div>
+                </div>
+            </div>
+            <!-- client -->
+            <div class="swiper-wrap">
+                <swiper class="swiper" :options="swiperOption">
+                    <swiper-slide class="swiper-item">
+                        <div class="plug-play">
+                        <img src="@/assets/index/sap.png"  class="sap">
+                        <img src="@/assets/index/shopify.png" class="shopify">
+                        <img src="@/assets/index/sale.png" class="sale"> 
+                        </div>                       
+                                           
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="plug-play">
+                        <img src="@/assets/index/magento.png" class="magento">
+                        <img src="@/assets/index/BigCommerce.png" class="big-commerce">
+                        <img src="@/assets/payments/woo.png" class="woo">
+                        </div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="plug-play">
+                        <img src="@/assets/payments/prestashop.png" class="presta-shop">
+                        <img src="@/assets/payments/pwa.png" class="pwa">
+                       <img src="@/assets/payments/shopware.png" class="shop-ware">
+                        </div>
+                    </swiper-slide>
+                    <div class="swiper-pagination" slot="pagination"></div>
+                </swiper>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+export default {
+    name: 'swiper-example-pagination',
+    title: 'Pagination',
+    components: {
+      Swiper,
+      SwiperSlide
+    },
+    data() {
+      return {
+        swiperOption: {
+          pagination: {
+            el: '.swiper-pagination'
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+.integration-part {
+    margin-top: 60px;
+    padding-bottom: 60px;
+    box-shadow: 0px 14px 17px 0px #0000000A;
+
+    .plugTitle {
+        text-align: center;
+        color: #1a5271;
+        padding-bottom: 50px;
+
+        h2 {
+            font-size: 48px;
+        }
+
+        h4 {
+            font-size: 28px;
+        }
+    }
+
+    .plugImg {
+        .plugList1 {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 100px;
+
+            .sap {
+                img {
+                    width: 130px;
+                    height: auto;
+                }
+            }
+
+            .shopify {
+                img {
+                    width: 150px;
+                    height: auto;
+                }
+            }
+
+            .sale {
+                img {
+                    width: 136px;
+                    height: auto;
+                }
+            }
+
+            .magento {
+                img {
+                    width: 166px;
+                    height: auto;
+                }
+            }
+
+            .big-commerce {
+                img {
+                    width: 160px;
+                    height: auto;
+                }
+            }
+
+
+        }
+
+        .plugList2 {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: 40px;
+            gap: 100px;
+
+            .woo {
+                img {
+                    width: 98px;
+                    height: auto;
+                }
+            }
+
+            .presta-shop {
+                img {
+                    width: 166px;
+                    height: auto;
+                }
+            }
+
+            .pwa {
+                img {
+                    width: 98px;
+                    height: auto;
+                }
+            }
+
+            .shop-ware {
+                img {
+                    width: 160px;
+                    height: auto;
+                }
+            }
+
+
+        }
+    }
+
+    .swiper-wrap {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 768px) {
+
+    .integration-part {
+
+        .main {
+            width: auto;
+        }
+
+        .plugTitle {
+            padding-bottom: 0;
+            h2 {
+                font-size: 36px;
+                line-height: 38.88px;
+            }
+
+            h4 {
+                font-size: 24px;
+                line-height: 36px;
+                text-align: center;
+            }
+        }
+
+        .plugImg {
+            display: none;
+        }
+
+        .swiper-wrap {
+            display: block;
+        .swiper{
+                height: 300px;
+                
+            .swiper-item{
+               
+            .plug-play{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                row-gap: 20px;
+            }
+           
+               
+            .sap {               
+                    width: 90px;
+                    height: auto;                
+            }
+
+            .shopify {                
+                    width: 110px;
+                    height: auto;                
+            }
+
+            .sale {                
+                    width: 110px;
+                    height: auto;               
+            }
+
+            .magento {
+                    width: 130px;
+                    height: auto;                
+            }
+
+            .big-commerce {
+                    width: 140px;
+                    height: auto;
+                    padding: 24px 0;
+                  }
+            .woo {                
+                    width: 80px;
+                    height: auto;
+                }
+
+            .presta-shop {
+              
+                    width: 166px;
+                    height: auto;
+              
+            }
+            .pwa {               
+                    width: 98px;
+                    height: auto;   
+                    padding: 30px 0            
+            }
+
+            .shop-ware {              
+                    width: 160px;
+                    height: auto;               
+            }
+
+            }
+        }
+
+    }
+
+    }
+}
+</style>

src/components/indexTerminals.vue

@@ -55,13 +55,93 @@
                 </div>
             </div>
 
+
+            <div class="swiper-wrap">
+                <swiper class="swiper" :options="swiperOption">
+                    <swiper-slide class="swiper-item">
+                    <div class="left">
+                    <div class="bg-b">
+                        <svg-icon icon-class="contactless" class="icon" />
+                       <p>Contactless</p> 
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="payments" class="icon" />
+                        <p>Mobile Payments</p>
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="touch" class="icon" />
+                        <p>Multimedia touch screen 3.5"</p>
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="printer" class="icon" />
+                        <p>Printer</p>
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="4G" class="icon" />
+                        <p>4G, Wi-Fi, Ethernet & Bluetooth</p>
+                    </div>
+                </div>
+                    </swiper-slide>
+                    <swiper-slide class="swiper-item">
+                        <div class="right">
+                    <div class="bg-b">
+                        <svg-icon icon-class="puzzle" class="icon" />
+                        <p>Standalone or Integrated</p>
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="security" class="icon" />
+                        <p>Password enabled security features</p>                        
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="usd" class="icon" />
+                        <p>Surcharging and Tipping</p>
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="network" class="icon" />
+                        <p>Multi-Network Card Routing</p>
+                    </div>
+                    <div class="bg-b">
+                        <svg-icon icon-class="conversion" class="icon" />
+                       <p>Dynamic Currency Conversion</p> 
+                    </div>
+                    </div>
+                </swiper-slide>
+               
+                <div class="swiper-button-prev" slot="button-prev"></div>
+                <div class="swiper-button-next" slot="button-next"></div>
+                                
+                </swiper>
+            </div>
+
+
         </div>
  
 
 </template>
 
 <script>
-
+import SvgIcon from './svgIcon.vue';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+export default {
+    name: 'swiper-example-navigation',
+    title: 'Navigation',
+    components: {
+      SvgIcon,
+      Swiper,
+      SwiperSlide
+    },
+    data() {
+      return {
+        swiperOption: {
+          navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev'
+          }
+        }
+      }
+    }
+  }
 </script>
 
 <style lang="less" scoped>
@@ -93,13 +173,13 @@
         gap: 40px;
         .bg-b{
             margin-top: 26px;
-                width: 400px;
-                height: 70px;
-                border-radius: 10px;
-                background-color: #60c5f4;
-                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-                line-height: 70px;
-                color: #1a5271;
+            width: 400px;
+            height: 70px;
+            border-radius: 10px;
+            background-color: #60c5f4;
+            box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+            line-height: 70px;
+            color: #1a5271;
                 .icon {
                     width: 40px;
                     height: 40px;
@@ -108,6 +188,9 @@
         }
     }
 }
+.swiper-wrap{
+    display: none;
+}
 
 @media screen and (max-width: 767px){
 .title{
@@ -120,6 +203,49 @@
     font-size: 24px;
     line-height: 36px;
 }
+.list-icon{
+    display: none !important;
+}
+.swiper-wrap{
+    display: block;
+    .left{
+        margin-bottom: 15px;
+        padding: 0 14px;
+    }
+    .right{
+        padding: 0 14px;
+    }
+    .bg-b{
+        display: flex;
+        align-items: center;
+        margin-top: 26px;
+        width: 348px;
+        height: 70px;
+        border-radius: 10px;
+        background-color: #60c5f4;
+        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+        line-height: 70px;
+        color: #1a5271;
+        p{
+            line-height: 20px;
+        }
+        .icon {
+        width: 40px;
+        height: 40px;
+        padding: 0px 20px;
+        } 
+    }
+        .swiper-button-prev:after{
+            font-size: 20px;
+            font-weight: 800;
+            color: #005372;
+        }
+        .swiper-button-next:after{
+            font-size: 20px;
+            font-weight: 800;
+            color: #005372;
+        }
+}
     
 }
 </style>

src/views/AboutUs.vue

@@ -106,5 +106,23 @@ hr {
     }
 }
 }
+@media screen and (max-width: 768px){
+    .main{
+        width: auto;
+    }
+  
+    .aboutPage{
+        .aboutTitle{
+            padding: 0 20px;
+            h1{
+                font-size: 36px;
+                line-height: 38.88px;
+            }
+}
+.aboutSmall{
+    padding: 0 20px;
 
+}
+    }
+}
 </style>

src/views/Copyright.vue

@@ -11,7 +11,7 @@
                     <h3>Last Updated: [15.03.2024]</h3>
                     <h4>© 2024 TrustyPay. All rights reserved.</h4>
                 </div>
-                <div style="margin-top: 40px;">
+                <div>
                     <p>
                         Welcome to TrustyPay, owned and operated by TrustyPay. By accessing this website, you agree to comply with and be bound by the following copyright terms and conditions. If you do not agree, please refrain from using our website.
                     </p>
@@ -35,10 +35,9 @@
                     <p>Kind <br/> Regards,</p>
                 </div>
             </div>
-
-          <footerMenu/>  
+         
         </div>
-        
+        <footerMenu/>  
     </div>
 </template>
 
@@ -99,4 +98,25 @@ hr {
     }
 }
 
+@media screen and (max-width: 768px){
+    .main{
+        width: auto;
+    }
+    hr{
+        margin-right: 0px;
+    }
+    .copyPage{
+        h1{
+            font-size: 36px;
+            line-height: 38.88px;
+            text-align: center;
+        }
+        h3 , h4{
+            padding: 0 20px;
+        }
+        p{
+            padding: 0 20px;
+        }
+    }
+}
 </style>

src/views/Faq.vue

@@ -1,62 +1,83 @@
 <template>
     <div>
-        <headTop/>
+        <headTop />
 
         <div class="faqPage">
-             <div class="main">
+            <div class="main">
                 <div class="quesTitle">
                     <h2>Frequently Asked Questions</h2>
-                </div>        
+                </div>
 
                 <div class="collapseInfo">
-                <el-collapse v-model="activeNames" @change="handleChange">
-                    <el-collapse-item title="What is TrustyPay? " name="1">
-                                <div>TrustyPay, a leading payment solutions company, has strategically partnered with
-                                    major payment service providers in Australia. Our mission is to deliver secure and
-                                    efficient payment processing services to our valued clients.</div>
-                            </el-collapse-item>
-
-              <el-collapse-item
-                                title="What types of businesses can benefit from TrustyPay's payment solutions?"
-                                name="2">
-                                <div>TrustyPay's payment solutions are designed to benefit businesses of all sizes and
-                                    industries, including retailers, service providers, and small business owners.
-                                    Whether you operate a brick-and-mortar store, an online shop, or a mobile business,
-                                    TrustyPay can help streamline your payment processes and support your growth.</div>
-                            </el-collapse-item>
-
-           <el-collapse-item title="What payment methods does TrustyPay support? " name="3">
-                                <div>TrustyPay supports a wide range of payment methods, including credit cards, debit
-                                    cards, digital wallets, and direct bank transfers. Our goal is to offer flexibility
-                                    and convenience for both businesses and their customers.</div>
-                            </el-collapse-item>
-
-          <el-collapse-item
-                                title="Can I use TrustyPay payment solutions with another business account entity?"
-                                name="4">
-                                <div>Yes, you can use TrustyPay payment solutions with another business account entity.
-                                    It does not interfere with the operation of your existing business account.
-                                    Depending on the service you choose, for some users, settlement is processed on the
-                                    same day, while for others with different banking partners, settlement typically
-                                    occurs on a T+1 basis. TrustyPay ensures seamless integration with various business
-                                    account entities to facilitate efficient payment processing.</div>
-                            </el-collapse-item>
-
-                <el-collapse-item title="Do I have access to Merchant Portal? " name="5">
-                                <div>Yes, it allows you to get a structured overview of your transactions, settlements
-                                    and important details about your business. By using the various filter functions,
-                                    you can search for specific transactions and view the relevant details of each
-                                    transaction. You can also manually export reports in .xls or .csv, or set up
-                                    automatic reporting so the most important reports for you and your business are
-                                    emailed directly to you. </div>
-                            </el-collapse-item>
-    
-            </el-collapse>
+                    <el-collapse v-model="activeNames" @change="handleChange">
+                        <el-collapse-item name="1">
+                            <template slot="title">
+                                <div class="collapseInfoTitle">
+                                    What is TrustyPay?
+                                </div>
+                            </template>
+                            <div>TrustyPay, a leading payment solutions company, has strategically partnered with
+                                major payment service providers in Australia. Our mission is to deliver secure and
+                                efficient payment processing services to our valued clients.</div>
+                        </el-collapse-item>
+
+                        <el-collapse-item name="2">
+                            <template slot="title">
+                                <div class="collapseInfoTitle">
+                                    What types of businesses can benefit from TrustyPay's payment solutions?
+                                </div>
+                            </template>
+                            <div>TrustyPay's payment solutions are designed to benefit businesses of all sizes and
+                                industries, including retailers, service providers, and small business owners.
+                                Whether you operate a brick-and-mortar store, an online shop, or a mobile business,
+                                TrustyPay can help streamline your payment processes and support your growth.</div>
+                        </el-collapse-item>
+
+                        <el-collapse-item name="3">
+                            <template slot="title">
+                                <div class="collapseInfoTitle">
+                                    What payment methods does TrustyPay support?
+                                </div>
+                            </template>
+                            <div>TrustyPay supports a wide range of payment methods, including credit cards, debit
+                                cards, digital wallets, and direct bank transfers. Our goal is to offer flexibility
+                                and convenience for both businesses and their customers.</div>
+                        </el-collapse-item>
+
+                        <el-collapse-item name="4">
+                            <template slot="title">
+                                <div class="collapseInfoTitle">
+                                    Can I use TrustyPay payment solutions with another business account entity?
+                                </div>
+                            </template>
+                            <div>Yes, you can use TrustyPay payment solutions with another business account entity.
+                                It does not interfere with the operation of your existing business account.
+                                Depending on the service you choose, for some users, settlement is processed on the
+                                same day, while for others with different banking partners, settlement typically
+                                occurs on a T+1 basis. TrustyPay ensures seamless integration with various business
+                                account entities to facilitate efficient payment processing.</div>
+                        </el-collapse-item>
+
+                        <el-collapse-item name="5">
+                            <template slot="title">
+                                <div class="collapseInfoTitle">
+                                    Do I have access to Merchant Portal?
+                                </div>
+                            </template>
+                            <div>Yes, it allows you to get a structured overview of your transactions, settlements
+                                and important details about your business. By using the various filter functions,
+                                you can search for specific transactions and view the relevant details of each
+                                transaction. You can also manually export reports in .xls or .csv, or set up
+                                automatic reporting so the most important reports for you and your business are
+                                emailed directly to you. </div>
+                        </el-collapse-item>
+
+                    </el-collapse>
+                </div>
+
             </div>
-           
-        </div>    
 
-            <footerMenu/>
+            <footerMenu />
         </div>
 
     </div>
@@ -66,84 +87,119 @@
 import headTop from '@/components/headTop.vue';
 import footerMenu from '@/components/footerMenu.vue';
 
-export default{
+export default {
 
-    name:'Faq',
+    name: 'Faq',
 
-    components: { 
+    components: {
         headTop,
-        footerMenu,      
-       
+        footerMenu,
+
     },
-    data(){
-    return{
-      activeNames: ['1']  
-    }; 
-},
-methods: {
-    handleChange(val) {
-        console.log(val);
-      }
-}
+    data() {
+        return {
+            activeNames: ['1']
+        };
+    },
+    methods: {
+        handleChange(val) {
+            console.log(val);
+        }
+    }
 }
 </script>
 
 <style>
-.main{
+.main {
     width: 1200px;
     margin-left: auto;
     margin-right: auto;
     position: relative;
     z-index: 1;
 }
-.faqPage{
+
+.faqPage {
     margin-top: 100px;
-.quesTitle{
-    h2{
-        text-align: center;
-        color: #1a5271;
-        font-size: 48px;
+
+    .quesTitle {
+        h2 {
+            text-align: center;
+            color: #1a5271;
+            font-size: 48px;
+        }
     }
-}
 
 
 
-    .collapseInfo{
-    width: 900px;
-    margin: auto;
-    padding: 80px 0;
-    .el-collapse{
-        border-top: none;
-        border-bottom: none;
-        .el-collapse-item{
-            padding: 10px 0;
+    .collapseInfo {
+        width: 900px;
+        margin: auto;
+        padding: 80px 0;
+
+        .el-collapse {
+            border-top: none;
+            border-bottom: none;
+
+            .el-collapse-item {
+                padding: 10px 0;
+            }
         }
-    }
-    .el-collapse-item__header{
-        border-radius: 10px;
-        background: #fdfab5;
-        border-bottom: none;
-        height: 80px;
-        padding-left: 30px;
-        color: #6a6721;
-        font-size: 16px;
-        .el-collapse-item__arrow{
-            font-weight: 600;
-            padding-right: 20px;
+
+        .el-collapse-item__header {
+            border-radius: 10px;
+            background: #fdfab5;
+            border-bottom: none;
+            height: 80px;
+            padding-left: 30px;
+            color: #6a6721;
+            font-size: 16px;
+
+            .el-collapse-item__arrow {
+                font-weight: 600;
+                padding-right: 20px;
+            }
         }
-    }
-    
-    .el-collapse-item__wrap{
-            border-bottom:none;
-    .el-collapse-item__content  {
-        
-        padding: 40px 30px;
-        color: #73702e;
-        font-size: 16px;
-    }
+
+        .el-collapse-item__wrap {
+            border-bottom: none;
+
+            .el-collapse-item__content {
+
+                padding: 40px 30px;
+                color: #73702e;
+                font-size: 16px;
+            }
         }
-}
+    }
 
 }
+@media screen and (max-width: 767px) {
+    .faqPage {
+        .main {
+            width: auto
+        }
+
+        .quesTitle {
+            h2 {
+                font-size: 36px;
+                line-height: 38.88px;
+                padding: 0 30px
+            }
+        }
 
+        .collapseInfo {
+            width: 340px;
+            height: auto;
+        .el-collapse-item__header {
+                padding-top: 24px;
+                padding-bottom: 24px;
+                height: auto;
+                .collapseInfoTitle {
+                    line-height: 24px;
+                }
+
+            }
+        }
+    }
+}
 </style>

src/views/Privacy.vue

@@ -257,4 +257,24 @@ hr {
         margin: 14px 50px;
     }
 }
+
+@media screen and (max-width: 768px){
+    .main{
+        width: auto;
+    }
+    hr{
+        margin-right: 0px;
+    }
+    .privacyContent{
+        padding: 0 40px;
+        h1{
+            font-size: 36px;
+            line-height: 38.88px;
+            
+        }
+        ul li{
+            margin: 14px 16px;
+        }
+    }
+}
 </style>

src/views/index.vue

@@ -58,7 +58,7 @@
             <!-- Partners -->
             <div class="partners-part">
                 <div class="main">
-                    <div class="parTitle">
+                    <div class="par-title">
                         <h2>Partners</h2>
                     </div>
                     <!-- 图标 -->
@@ -79,57 +79,33 @@
             <div class="tap-mobile">
                 <div class="main">
                     <div class="tap-content">
-                    <div class="tapTitle">
-                        <h2>Tap on Mobile</h2>
-                        <div class="tap-client">
-                            <img src="@/assets/index/Ellipse24.png" alt="">
-                        </div>
-                        <p>Make payments a breeze, for you and your customers. Get Tap onMobile, the mobile EFTPOS
-                            you've been waiting for.</p>
-                        <div class="tapSvg">
-                            <svg-icon icon-class="IOS" class="ios" />
-                            <svg-icon icon-class="Android" class="android" />
+                        <div class="tap-title">
+                            <h2>Tap on Mobile</h2>
+                            <div class="tap-client">
+                                <img src="@/assets/index/Ellipse24.png" alt="">
+                            </div>
+                            <p>Make payments a breeze, for you and your customers. Get Tap onMobile, the mobile EFTPOS
+                                you've been waiting for.</p>
+                            <div class="tapSvg">
+                                <svg-icon icon-class="IOS" class="ios" />
+                                <svg-icon icon-class="Android" class="android" />
+                            </div>
+                            <!-- learn more -->
+                            <div class="learnMore">
+                                <router-link to="/ToonMobile"><el-button class="btnLearn">Learn
+                                        more</el-button></router-link>
+                            </div>
                         </div>
-                        <!-- learn more -->
-                        <div class="learnMore">
-                            <router-link to="/ToonMobile"><el-button class="btnLearn">Learn
-                                    more</el-button></router-link>
+                        <div class="tapImg">
+                            <img src="@/assets/index/Ellipse24.png" alt="">
                         </div>
                     </div>
-                    <div class="tapImg">
-                        <img src="@/assets/index/Ellipse24.png" alt="">
-                    </div>
-                </div>
                 </div>
             </div>
 
-
-            <!-- Innovation 隐藏 -->
-
-
-            <!-- Plug&play -->
-            <div class="mainContent5">
-                <div class="main">
-                    <div class="plugTitle">
-                        <h2>Plug & Play Integrations</h2>
-                        <h4>with leading eCommerce Platforms</h4>
-                    </div>
-                    <div class="plugImg">
-                        <div class="plugList1">
-                            <div class="sap"><img src="@/assets/index/sap.png" alt=""></div>
-                            <div class="shopify"><img src="@/assets/index/shopify.png" alt=""></div>
-                            <div class="sale"><img src="@/assets/index/sale.png" alt=""></div>
-                            <div class="magento"><img src="@/assets/index/magento.png" alt=""></div>
-                            <div class="big-commerce"><img src="@/assets/index/BigCommerce.png" alt=""></div>
-                        </div>
-                        <div class="plugList2">
-                            <div class="woo"><img src="@/assets/payments/woo.png" alt=""></div>
-                            <div class="presta-shop"><img src="@/assets/payments/prestashop.png" alt=""></div>
-                            <div class="pwa"><img src="@/assets/payments/pwa.png" alt=""></div>
-                            <div class="shop-ware"><img src="@/assets/payments/shopware.png" alt=""></div>
-                        </div>
-                    </div>
-                </div>
+            <!-- Plug & Play Integrations -->
+            <div>
+                <indexPlugPlay/>
             </div>
 
             <!-- plug-list -->
@@ -152,39 +128,55 @@
             </div>
 
             <!-- Sales Team -->
-            <Sales />
+            <div><Sales /></div>
 
             <!-- FAQ -->
-            <div class="faqPage">
+            <div class="faq-page">
                 <div class="main">
                     <div class="quesTitle">
                         <h2>Frequently Asked Questions</h2>
                     </div>
                     <div class="collapseInfo">
                         <el-collapse v-model="activeNames" @change="handleChange">
-                            <el-collapse-item title="What is TrustyPay? " name="1">
+                            <el-collapse-item name="1">
+                                <template slot="title">
+                                    <div class="collapseInfoTitle">
+                                        What is TrustyPay?
+                                    </div>
+                                </template>
                                 <div>TrustyPay, a leading payment solutions company, has strategically partnered with
                                     major payment service providers in Australia. Our mission is to deliver secure and
                                     efficient payment processing services to our valued clients.</div>
                             </el-collapse-item>
 
-                            <el-collapse-item
-                                title="What types of businesses can benefit from TrustyPay's payment solutions?"
-                                name="2">
+                            <el-collapse-item name="2">
+                                <template slot="title">
+                                    <div class="collapseInfoTitle">
+                                        What types of businesses can benefit from TrustyPay's payment solutions?
+                                    </div>
+                                </template>
                                 <div>TrustyPay's payment solutions are designed to benefit businesses of all sizes and
                                     industries, including retailers, service providers, and small business owners.
                                     Whether you operate a brick-and-mortar store, an online shop, or a mobile business,
                                     TrustyPay can help streamline your payment processes and support your growth.</div>
                             </el-collapse-item>
 
-                            <el-collapse-item title="What payment methods does TrustyPay support? " name="3">
+                            <el-collapse-item name="3">
+                                <template slot="title">
+                                    <div class="collapseInfoTitle">
+                                        What payment methods does TrustyPay support?
+                                    </div>
+                                </template>
                                 <div>TrustyPay supports a wide range of payment methods, including credit cards, debit
                                     cards, digital wallets, and direct bank transfers. Our goal is to offer flexibility
                                     and convenience for both businesses and their customers.</div>
                             </el-collapse-item>
-                            <el-collapse-item
-                                title="Can I use TrustyPay payment solutions with another business account entity?"
-                                name="4">
+                            <el-collapse-item name="4">
+                                <template slot="title">
+                                    <div class="collapseInfoTitle">
+                                        Can I use TrustyPay payment solutions with another business account entity?
+                                    </div>
+                                </template>
                                 <div>Yes, you can use TrustyPay payment solutions with another business account entity.
                                     It does not interfere with the operation of your existing business account.
                                     Depending on the service you choose, for some users, settlement is processed on the
@@ -192,7 +184,12 @@
                                     occurs on a T+1 basis. TrustyPay ensures seamless integration with various business
                                     account entities to facilitate efficient payment processing.</div>
                             </el-collapse-item>
-                            <el-collapse-item title="Do I have access to Merchant Portal? " name="5">
+                            <el-collapse-item name="5">
+                                <template slot="title">
+                                    <div class="collapseInfoTitle">
+                                        Do I have access to Merchant Portal?
+                                    </div>
+                                </template>
                                 <div>Yes, it allows you to get a structured overview of your transactions, settlements
                                     and important details about your business. By using the various filter functions,
                                     you can search for specific transactions and view the relevant details of each
@@ -202,17 +199,27 @@
                             </el-collapse-item>
                         </el-collapse>
                     </div>
-
-
                 </div>
 
             </div>
 
-
-
             <!-- button -->
             <div class="buttonContainer">
-
+                <div class="client-become">
+                    <div class="client-become-title">
+                        <h2>Become a part of the future</h2>
+                    </div>
+                    <div class="client-become-text">
+                        <p>TrustyPay's solution ensures seamless, secure, and cost-effective transactions, fostering
+                            an environment where businesses can flourish by reducing friction in payment processing,
+                            SMEs and NFPs can focus on growth and customer satisfaction.</p>
+                   
+                        <p>TrustyPay provides a suite of innovative Payment Solutions tailored for the unique needs
+                        of customers in Australia and South-East Asian community. It's a solution designed to
+                        provide a variety of payment options, reduce transaction fees, and integrate emerging
+                        technologies like blockchain and mobile payments.</p>
+                    </div>
+                </div>
                 <div class="bgImage">
                     <div class="leftInfo">
                         <div class="leftText">
@@ -231,6 +238,7 @@
 
                     </div>
                 </div>
+
             </div>
 
 
@@ -254,6 +262,7 @@ import indexAccept from '@/components/indexAccept'
 import indexChoose from '@/components/indexChoose'
 import indexTerminals from '@/components/indexTerminals'
 import indexPlug from '@/components/indexPlug'
+import indexPlugPlay from '@/components/indexPlugPlay'
 
 
 export default {
@@ -268,7 +277,8 @@ export default {
         indexAccept,
         indexChoose,
         indexTerminals,
-        indexPlug
+        indexPlug,
+        indexPlugPlay
     },
     data() {
         return {
@@ -400,7 +410,7 @@ hr {
     margin-top: 100px;
     background: #f8f8f8;
 
-    .parTitle {
+    .par-title {
         h2 {
             color: #1a5271;
             text-align: center;
@@ -428,12 +438,11 @@ hr {
 
 .tap-content {
     display: flex;
-    gap: 140px;
+    gap: 80px;
     padding-left: 100px;
 
-    .tapTitle {
+    .tap-title {
         margin-top: 100px;
-        padding: 0px 44px 20px 0px;
 
         h2 {
             font-size: 44px;
@@ -447,9 +456,11 @@ hr {
             line-height: 42px;
 
         }
+
         .tap-client {
-        display: none
-    }
+            display: none
+        }
+
         .learnMore {
             margin: 60px 0;
 
@@ -479,14 +490,14 @@ hr {
 
     .tapImg {
         img {
-            width: 622px;
+            width: 574px;
             height: 596px;
             padding: 130px 70px 0px 0px;
         }
     }
 }
 
-.faqPage {
+.faq-page {
     margin-top: 100px;
 
     .quesTitle {
@@ -497,7 +508,6 @@ hr {
         }
     }
 
-
     .collapseInfo {
         width: 900px;
         margin: auto;
@@ -568,111 +578,6 @@ hr {
     }
 }
 
-.mainContent5 {
-    margin-top: 90px;
-    padding-bottom: 60px;
-    box-shadow: 0px 14px 17px 0px #0000000A;
-
-    .plugTitle {
-        text-align: center;
-        color: #1a5271;
-        padding-bottom: 50px;
-
-        h2 {
-            font-size: 48px;
-        }
-
-        h4 {
-            font-size: 28px;
-        }
-    }
-
-    .plugImg {
-        .plugList1 {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 100px;
-
-            .sap {
-                img {
-                    width: 130px;
-                    height: auto;
-                }
-            }
-
-            .shopify {
-                img {
-                    width: 150px;
-                    height: auto;
-                }
-            }
-
-            .sale {
-                img {
-                    width: 136px;
-                    height: auto;
-                }
-            }
-
-            .magento {
-                img {
-                    width: 166px;
-                    height: auto;
-                }
-            }
-
-            .big-commerce {
-                img {
-                    width: 160px;
-                    height: auto;
-                }
-            }
-
-
-        }
-
-        .plugList2 {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-top: 40px;
-            gap: 100px;
-
-            .woo {
-                img {
-                    width: 98px;
-                    height: auto;
-                }
-            }
-
-            .presta-shop {
-                img {
-                    width: 166px;
-                    height: auto;
-                }
-            }
-
-            .pwa {
-                img {
-                    width: 98px;
-                    height: auto;
-                }
-            }
-
-            .shop-ware {
-                img {
-                    width: 160px;
-                    height: auto;
-                }
-            }
-
-
-        }
-    }
-}
-
-
 .leverTitle {
     margin-top: 150px;
     text-align: center;
@@ -700,10 +605,11 @@ hr {
 
 
 .buttonContainer {
+    .client-become{
+        display: none;
+    }
 
     .bgImage {
-        // width: 1440px;
-        // height: 731px;
         background: url(@/assets/index/BottomImage.png) no-repeat center center;
         background-size: cover;
     }
@@ -747,6 +653,8 @@ hr {
 
 /* 小屏幕 */
 @media (max-width: 767px) {
+
+
     hr {
         width: 330px;
     }
@@ -768,12 +676,14 @@ hr {
                     font-size: 36px;
                     line-height: 38.88px;
                     text-align: center;
+                    padding-top: 50px;
                 }
 
                 p {
                     font-size: 24px;
-                    line-height: 36px;
+                    line-height: 36px !important;
                     text-align: center;
+                    padding: 0 20px;
                 }
             }
 
@@ -781,8 +691,9 @@ hr {
                 p {
                     font-size: 16px !important;
                     line-height: 24px !important;
-                    margin-top: -270px;
+                    margin-top: -220px;
                     text-align: center;
+                    padding: 0 24px;
                 }
             }
 
@@ -795,7 +706,7 @@ hr {
                 display: block !important;
 
                 img {
-                    width: 400px;
+                    width: 352px;
 
                 }
 
@@ -811,29 +722,57 @@ hr {
 
     }
 
-    .tap-content {
-        display: block;
+    .tap-mobile {
         .main {
             width: auto;
         }
-    .tapTitle{
-        h2{
-            font-size: 36px;
-            line-height: 38.88px;
-        }
-     .tap-client {
+
+        .tap-content {
             display: block;
-            img{
-                width: 337px;
+            padding-left: 0;
+
+            .tap-title {
+                h2 {
+                    font-size: 36px;
+                    line-height: 38.88px;
+                    text-align: center;
+                }
+
+                p {
+                    width: 304px;
+                    height: 216px;
+                    text-align: center;
+                    padding: 0 20px;
+                }
+
+                .tap-client {
+                    display: block;
+
+                    img {
+                        width: 337px;
+                        padding: 0 20px;
+                    }
+                }
+
+                .tapSvg {
+                    text-align: center;
+                    padding-top: 40px;
+                }
+
+                .learnMore {
+                    text-align: center;
+                }
+
             }
+
+            .tapImg {
+                display: none
+            }
+
         }
-}
-.tapImg{
-    display: none
-}
-       
     }
 
+
     .partners-part {
         background-color: white !important;
 
@@ -841,6 +780,13 @@ hr {
             width: auto;
         }
 
+        .par-title {
+            h2 {
+                font-size: 36px;
+                line-height: 38.88px;
+            }
+        }
+
         .parImg {
             display: block;
             text-align: center;
@@ -876,7 +822,77 @@ hr {
 
     }
 
+    .faq-page {
+        .main {
+            width: auto
+        }
+
+        .quesTitle {
+            h2 {
+                font-size: 36px;
+                line-height: 38.88px;
+                padding: 0 30px
+            }
+        }
+
+        .collapseInfo {
+            width: 340px;
+            height: auto;
 
+            /deep/.el-collapse-item__header {
+                padding-top: 24px;
+                padding-bottom: 24px;
+                height: auto;
+
+                .collapseInfoTitle {
+                    line-height: 24px;
+                }
+
+            }
+        }
+    }
+.buttonContainer{
+    .bgImage{
+        width: 380px;
+        height: 584px;
+        background: url(@/assets/index/BottomImage.png) no-repeat;
+        background-position: -700px 0px;
+        background-size: cover;
+    }
+    .leftInfo{
+        display: none;
+    }
+    .client-become{
+        display: block;
+        width: 376px;
+        height: 634px;
+        background-color: #33C6F4;
+        opacity: 92%;
+        .client-become-title{
+            width: 280px;
+            height: 78px;
+            margin: 0 auto;
+            padding: 20px 0;
+        h2{
+            color: white;
+            font-size: 36px;
+            line-height: 38.88px;
+            text-align: center;
+        }  
+        }
+        .client-become-text{
+            width: 308px;
+            margin: 0 auto;
+            p{
+                color: white;
+                font-size: 16px;
+                line-height: 24px;
+                text-align: center;
+                padding-top: 22px;
+            }
+        }
 
+    }
+}
 }
 </style>