修改样式

package-lock.json

@@ -8,6 +8,7 @@
       "name": "trustypay",
       "version": "0.1.0",
       "dependencies": {
+        "@emailjs/browser": "^4.3.3",
         "ant-design-vue": "^1.7.8",
         "core-js": "^3.8.3",
         "element-ui": "^2.15.14",
@@ -1828,6 +1829,14 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/@emailjs/browser/-/browser-4.3.3.tgz",
+      "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",

src/components/IndexContact.vue

@@ -1,86 +1,93 @@
 <template>
-      <div class="contactContent">
-                <div class="main">
-                    <div class="usTitle">
-                        <h2>Contact Us</h2>
-                    </div>
-                    <!-- 表单 -->
-                    <div class="formMenu">
-                       
-                        <el-form :model="form" :rules="rules" ref="contactForm" label-width="120px">
-                            <div>
-                              
-                                <el-input v-model="form.name" placeholder="Name"></el-input>
-                            </div>
-                            <div>
-                                <el-input v-model="form.businessName" placeholder="Business Name"></el-input>
-                            </div>
-                            <div>
-                                <el-input v-model="form.mobile" placeholder="Mobile"></el-input>
-                            </div>
-                            <div>
-                                <el-input v-model="form.email" placeholder="Email"></el-input>
-                            </div>
-                            <div>
-                                <el-input v-model="form.message" type="textarea" :rows="6"
-                                    placeholder="Message"></el-input>
-                            </div>
-                            <div>
-                                <el-button type="primary" @click="submitForm('contactForm')">Submit</el-button>
-                            </div>
-                        </el-form>
+    <div class="contactContent">
+        <div class="main">
+            <div class="usTitle">
+                <h2>Contact Us</h2>
+            </div>
+            <!-- 表单 -->
+            <div class="formMenu">
+                <el-form :model="form" :rules="rules" ref="contactForm" >
+                    <el-form-item prop="name">
+                        <el-input v-model="form.name"  placeholder="Name"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="businessName">
+                        <el-input v-model="form.businessName" placeholder="Business Name"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="mobile">
+                        <el-input v-model="form.mobile" placeholder="Mobile"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="email">
+                        <el-input v-model="form.email" placeholder="Email"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-select v-model="form.language" placeholder="Select Language">
+                            <el-option label="Chinese" value="zh"></el-option>
+                            <el-option label="English" value="en"></el-option>
+                            <el-option label="Ελληνικά" value="Ελληνικά"></el-option>
+                            <el-option label="हिंदी" value="हिंदी"></el-option>
+                            <el-option label="한국" value="한국"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="message">
+                        <el-input v-model="form.message" type="textarea" :rows="6" placeholder="Message"></el-input>
+                    </el-form-item>
+                    <div>
+                        <el-button type="primary" @click="submitForm('contactForm')">Submit</el-button>
                     </div>
-                    <hr>
-                </div>
+                </el-form>
             </div>
+            <hr>
+        </div>
+    </div>
 </template>
 
 
 <script>
-
-    export default {
-        name:'IndexContact',
-        data() {
-            return {
-                form: {
-                    name: '',
-                    businessName: '',
-                    mobile: '',
-                    email: '',
-                    message: ''
-                },
-                rules: {
-                    name: [{
-                        required: true,
-                        message: 'Please enter your name',
-                        trigger: 'blur'
-                    }],
-                    businessName: [{
-                        required: true,
-                        message: 'Please enter your business name',
-                        trigger: 'blur'
-                    }],
-                    mobile: [{
-                        required: true,
-                        message: 'Please enter your mobile',
-                        trigger: 'blur'
-                    }],
-                    email: [{
-                        required: true,
-                        message: 'Please enter your email',
-                        trigger: 'blur'
-                    }],
-                    message: [{
-                        required: true,
-                        message: 'Please enter your message',
-                        trigger: 'blur'
-                    }]
-                }
+import { elIsEmail, elIsValidatePhone } from "@/utils/el-validate";
+
+export default {    
+    name: 'IndexContact',
+    data() {
+        return {
+            form: {
+                name: '',
+                businessName: '',
+                mobile: '',
+                email: '',
+                message: ''
+            },
+            rules: {
+                name: [{
+                    required: true,
+                    message: 'Please enter your name',
+                    trigger: 'blur'
+                }],
+                businessName: [{
+                    required: true,
+                    message: 'Please enter your business name',
+                    trigger: 'blur'
+                }],
+                mobile: [{
+                    required: true,
+                    trigger: ["blur"],
+                    validator: elIsValidatePhone
+                }],
+                email: [{
+                    required: true,
+                    trigger: ["blur"],
+                    validator: elIsEmail
+                }],
+                message: [{
+                    required: true,
+                    message: 'Please enter your message',
+                    trigger: 'blur'
+                }]
             }
-      
-        },
-        methods:{
-                submitForm(formName) {
+        }
+
+    },
+    methods: {
+        submitForm(formName) {
             this.$refs[formName].validate((valid) => {
                 if (valid) {
                     // 在这里可以添加表单提交的逻辑,例如发送数据到服务器
@@ -91,8 +98,8 @@
                 }
             })
         }
-            }
     }
+}
 </script>
 
 <style lang="less" scoped>
@@ -102,6 +109,7 @@ hr {
     height: 2px;
     background: linear-gradient(to right, #00A0E8, #99C938, #FFF436);
 }
+
 .contactContent {
     margin: 80px 0;
 
@@ -124,26 +132,26 @@ hr {
         .el-form {
             padding: 40px;
 
-            .el-input {
-                padding-top: 10px;
-            }
         }
 
         /deep/.el-input__inner {
             background-color: #45c7f6 !important;
-            padding: 28px 10px;
+            padding: 26px 10px;
             border-radius: 12px;
 
             &::placeholder {
                 color: #1a5271;
             }
         }
-
-        .el-textarea {
-            padding-top: 10px;
+        .el-select{
+           
+            display: block;
+        }
+        /deep/.el-icon-arrow-up:before{
+        color: #1a5271;
         }
+   
 
-        /* 多行输入框背景色 */
         /deep/.el-textarea__inner {
             background-color: #45c7f6 !important;
             border-radius: 12px;
@@ -154,8 +162,6 @@ hr {
 
         }
 
-
-        /* button背景色 */
         .el-button {
             background-color: #45c7f6;
             border: #45c7f6;

src/components/Panel.vue

@@ -6,17 +6,17 @@
       <el-card class="panel" :class="{ 'panel-open': showPanel }">
         <div slot="header" class="header-title">
         <p>Get in touch with a TrustyPay expert</p>
-        <p>We're eager to help you succeed with our range of solutions.</p>
-        
+        <p>We're eager to help you succeed with <br>our range of solutions.</p>        
       </div>
-        <el-form :model="form" :rules="rules" label-width="120px" label-position="top">
+
+        <el-form :model="form" :rules="rules" ref="contactForm" label-width="120px" label-position="top">
           <el-form-item label="Name" prop="name">
             <el-input v-model="form.name"></el-input>
           </el-form-item>
           <el-form-item label="Business Name"  prop="businessName">
             <el-input v-model="form.businessName"></el-input>
           </el-form-item>
-          <el-form-item label="Mobile" prop="mobile">
+          <el-form-item label="Mobile(10 digits)" prop="mobile">
             <el-input v-model="form.mobile"></el-input>
           </el-form-item>
           <el-form-item label="Email" prop="email">
@@ -24,25 +24,33 @@
           </el-form-item>
           <el-form-item label="Language Preference">
             <el-select v-model="form.language" placeholder="Select Language">
-              <el-option label="Chinese" value="zh"></el-option>
-              <el-option label="English" value="en"></el-option>
-              <el-option label="Ελληνικά" value="Ελληνικά"></el-option>
-              <el-option label="हिंदी" value="हिंदी"></el-option>
+              
+              <el-option label="English" value="English"></el-option>
+              <el-option label="中文" value="中文"></el-option>
               <el-option label="한국" value="한국"></el-option>
+              <el-option label="हिंदी" value="हिंदी"></el-option>
+              <el-option label="Ελληνικά" value="Ελληνικά"></el-option>              
+              
             </el-select>
           </el-form-item>
           <el-form-item label="Your message" prop="message">
             <el-input type="textarea" v-model="form.message"></el-input>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="submitForm" class="sbuBtn">Submit</el-button>
+            <el-button type="primary" @click="submitForm('contactForm')" class="sbuBtn">Submit</el-button>
           </el-form-item>
         </el-form>
+
       </el-card>
     </div>
   </template>
   
   <script>
+
+  import { elIsEmail, elIsValidatePhone } from "@/utils/el-validate";
+  import { send as emailSend } from "@emailjs/browser";
+  import { emailConfig } from "@/utils/config"
+
   export default {
     data() {
       return {
@@ -53,29 +61,88 @@
           mobile: '',
           email: '',
           language: '',
-          message: ''
+          message: '',
         },
         rules: {
-        name: [{ required: true, message: 'Please enter your name', trigger: 'blur' }],
-        businessName: [{ required: true, message: 'Please enter your business name', trigger: 'blur' }],
-        mobile: [{ required: true, message: 'Please enter your mobile number', trigger: 'blur' }],
-        email: [{ required: true, message: 'Please enter your email', trigger: 'blur' },
-          { type: 'email', message: 'Please enter a valid email address', trigger: 'blur' } ],
-        message:[{ required: true, message: 'Please enter'}],
+          name: [
+            { 
+              required: true, 
+              message: 'Please enter your name', 
+              trigger: 'blur' 
+            }],
+          businessName: [
+            { 
+              required: true, 
+              message: 'Please enter your business name',
+              trigger: 'blur' 
+              }],
+          mobile: [
+            { 
+              required: true, 
+              trigger: ["blur"],
+              validator: elIsValidatePhone
+            }],
+          email: [
+            { 
+              required: true, 
+              trigger: ["blur"],
+              validator: elIsEmail
+             },
+          ],
+           message:[
+            { 
+              required: true, 
+              message: 'Please enter'
+            }],
       },
       }
     },
     methods: {
-      submitForm() {
-        // 提交表单的逻辑
-        console.log(this.form)
+      submitForm(formName) {
+        this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          try {
+            const language = this.languages.find(
+              (item) => item.value === this.form.language
+            );
+
+            const data = await emailSend(
+              emailConfig.SERVICE_ID,
+              emailConfig.TEMPLATE_ID,
+              {
+                from_name: "test",
+                name: this.form.name,
+                businessName: this.form.businessName,
+                mobile: this.form.mobile,
+                email: this.form.email,
+                language: language.value,
+                message: this.form.message,
+              }
+            );
+
+            if (data.status === 200) {
+              window.alert("Form submitted successfully!");
+            } else {
+              window.alert("Form submitted failed!");
+            }
+          } catch (error) {
+            console.log("Error submitting form!", error);
+          }
+        } else {
+          console.log("Error submitting form!");
+          return false;
+        }
+      });
+       
       }
     }
   }
   </script>
   
   <style  scoped>
-
+.el-card{
+  background: #9bc943;
+}
   .panel-container {
     position: fixed;
     bottom: 60px;
@@ -99,19 +166,19 @@
   
   .panel-open {
     
-    max-height: 660px;
+    max-height: 7090px;
   }
   .header-title{
     p{
       margin: 0;
-      font-size: 12px;
+      font-size: 16px;
       text-align: center;
     }
   }
   /* 去掉显示的底部 */
   .el-card{
     border: none;
-    /* padding: 0px 0px 50px 0px; */
+  
   }
   /* 设置按钮的大小 */
   .el-button.is-circle{

src/components/Sales.vue

@@ -1,22 +1,26 @@
 <template>
     <div class="sales-team">
+      <div class=""> 
       <div class="left-content">
         <h2>Sales Team</h2>
-        <p>You can count on us.<br> Our committed salesteam is ready to assistyou in discovering theperfect solution foryour needs.</p>
+        <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>
           <div class="member-info">
             <h3>{{ member.name }}</h3>
-            <p>Mobile: {{ member.mobile }}</p>
-            <p>E: {{ member.email }}</p>
-            <p>Language: {{ member.language }}</p>
-            <p>Location: {{ member.location }}</p>
+            <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>
         </div>
       </div>
     </div>
+      </div>
+
   </template>
   
   <script>
@@ -27,7 +31,7 @@
           {
             id: 1,
             name: 'Chris Cardassis',
-            mobile: '+0400 556 420',
+            mobile: '+61 0400 556 420',
             email: 'Chris@trustypay.com.au',
             language: 'English/Ελληνικά',
             location: 'Sydney NSW',
@@ -36,7 +40,7 @@
           {
             id: 2,
             name: 'Stuart McGregor',
-            mobile: '+0417 619 757',
+            mobile: '+61 0417 619 757',
             email: 'Stuart.mcgregor@trustypay.com',
             language: 'English',
             location: 'Sydney NSW',
@@ -45,7 +49,7 @@
           {
             id: 3,
             name: 'Ahmed Khurram',
-            mobile: '+0411 722 271',
+            mobile: '+61 0411 722 271',
             email: 'Ahmed.khurram@trustypay.com.au',
             language: 'English/हिंदी',
             location: 'Sydney NSW',
@@ -54,7 +58,7 @@
           {
             id: 4,
             name: 'Hyein Lee',
-            mobile: '+0450 215 338',
+            mobile: '+61 0450 215 338',
             email: 'Hyein.lee@trustypay.com.au',
             language: 'English/한국',
             location: 'Melbourne VIC',
@@ -63,7 +67,7 @@
           {
             id: 5,
             name: 'Jenny Wu',
-            mobile: '+0452 489 321',
+            mobile: '+61 0452 489 321',
             email: 'Jenny.wu@trustypay.com.au',
             language: 'English/中文',
             location: 'Melbourne VIC',
@@ -76,17 +80,18 @@
   </script>
   
   <style scoped>
-  .sales-team {
-    display: flex;
-    justify-content: space-around;
-    margin: 80px 40px;
+  .main{
+    width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    position: relative;
+    z-index: 1;
+}
 
-  }
   
   .left-content { 
-      padding: 0 66px;
-    p{
-        text-align: left;      
+    text-align: center;    
+    p{  
         font-size: 20px;
         color: #1a5271;
     }
@@ -98,26 +103,34 @@
   
   .right-content { 
     display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 80px;
+    margin-left: 128px;
     p{
       font-size: 14px;
     }
   }
-  
 
-  
   .member-info {
     margin-top: 10px;
+    h3{
+      font-size: 14px;
+      
+    }
+    p{
+      font-size: 12px;
+      text-align: left;
+    }
   }
   .avatar-container {
-  width: 8vw; /* 相对于视口宽度的 10% */
-  height: 8vw;
+  width: 7vw; 
+  height: 7vw;
 }
-
 .team-member{
-    width: 265px;
-    text-align: center;
-    padding: 0 10px;
+  width: 280px;
 }
+
 /* 小屏幕 */
 /* @media (max-width: 767px) {
   .sales-team {

src/components/footerMenu.vue

@@ -38,10 +38,18 @@
                                <a href="https://www.linkedin.com/company/trusty-pay/"> <img src="@/assets/index/linkedin.png" alt=""></a>
                             </div>
                             <div class="contactText">
-                                <p><b>Contact sales team:</b> sales@trustypay.com.au</p>
-                                <p><b>Contact support team:</b> support@trustypay.com.au</p>
-                                <p><b>Call:</b> 1300 67 61 61</p>
-                                <p><b>Address:</b> Level 1, 480 Collin St, Melbourne, VIC, AUSTRALIA 3000. </p>                               
+                                
+                                <div class="call" @click="call">                                    
+                                   <p>Call: <a href="">1300 67 61 61</a></p> 
+                                </div>
+                                <div class="sales" @click="sendSales">
+                                <p>Contact sales team: <a href="">sales@trustypay.com.au</a></p> 
+                                </div>
+                               <div class="support" @click="sendSupport">
+                                 <p>Contact support team: <a href="">support@trustypay.com.au</a> </p> 
+                               </div>
+                                                         
+                                <p>Address: Level 1, 480 Collin st Melbourne 3000 VIC AUSTRALIA </p>                               
                             </div>
                         </div>
                     </div>
@@ -73,7 +81,16 @@ export default {
                 top: 0,
                 behavior: 'smooth'
             })
-        }
+        },
+        call() {
+      window.location.href = "tel:1300676161";
+    },
+    sendSales() {
+        window.location.href = "mailto:sales@trustypay.com.au";
+    },
+    sendSupport() {
+        window.location.href = "mailto:support@trustypay.com.au";
+    },
     }
 
 }
@@ -157,7 +174,9 @@ export default {
                 p{
                   text-align: left;   
                   padding:4px 0;
+                  cursor: pointer;                  
                 }
+             
                
             }
         }

src/router/index.js

@@ -8,6 +8,7 @@ import ContactUs from '@/views/ContactUs.vue'
 import Copyright from '@/views/Copyright.vue'
 import AboutUs from '@/views/AboutUs.vue'
 import Payments from '@/views/Payments.vue'
+import ToonMobile from '@/views/ToonMobile.vue'
 
 Vue.use(VueRouter)
 
@@ -56,6 +57,11 @@ redirect:'/index'
     name:'Payments',
     component:Payments
   },
+  {
+    path:'/ToOnMobile',
+    name:'ToOnMobile',
+    component:ToonMobile
+  },
  
 ]
 

src/views/ContactUs.vue

@@ -94,8 +94,7 @@
             </div>
             <el-form-item>
               <el-button type="primary" @click="submitForm('contactForm')"
-                >Submit</el-button
-              >
+                >Submit</el-button>
             </el-form-item>
           </el-form>
         </div>
@@ -125,8 +124,8 @@ export default {
         message: "",
       },
       languages: [
-        { value: "en", label: "English" },
-        { value: "zh", label: "中文" },
+        { value: "English", label: "English" },
+        { value: "中文", label: "中文" },
         { value: "한국", label: "한국" },
         { value: "हिंदी", label: "हिंदी" },
         { value: "Ελληνικά", label: "Ελληνικά" },       
@@ -169,7 +168,6 @@ export default {
     submitForm(formName) {
       this.$refs[formName].validate(async (valid) => {
         if (valid) {
-          // 在这里可以添加表单提交的逻辑,例如发送数据到服务器
           try {
             const language = this.languages.find(
               (item) => item.value === this.form.languagePreference

src/views/index.vue

@@ -26,39 +26,55 @@
                             <div class="saleBtn">
                                 <router-link to="/ContactUs"><el-button>Contact Sales</el-button></router-link>
                             </div>
-                            <div class="leftCard">
-                                <!-- <div class="smallCard"> -->
-                                <h1 class="smallCard">Our Offer</h1>
-                                <!-- </div> -->
-                                <div class="cardItem">
-                                    <div class="cardPrice">
-                                        <h1>0.81%</h1>
-                                    </div>
-                                    <div class="cardRate">
-                                        <p>VISA/MASTERCARD & EFTPOS</p>
-                                        <p>Transaction Fee</p>
-                                        <span>(exc.GST)</span>
-                                    </div>
+                            <div class="offerCard">
+                                <div class="yellowCard">
+                                    <h1>Our Offer</h1>
                                 </div>
-                                <div class="cardItem">
-                                    <div class="cardPrice">
-                                        <h1>2.0%</h1>
-                                    </div>
-                                    <div class="cardRate1">
-                                        <p>UPI and alternate Payments</p>
-                                        <span>(exc.GST)</span>
+                                <div class="greenCard">
+                                    <div class="cardList">
+                                        <div class="cardTitle">
+                                           <h1>0.81%</h1> 
+                                        </div>
+                                        <div class="cardText">
+                                        <div><p>VISA/MASTERCARD & EFTPOS</p></div>
+                                        <div><p>Transaction Fee</p></div>
+                                        <div><span>(exc.GST)</span></div>
+                                        
+                                        </div>
+                                        <div class="cardImg">
+                                            <div><img src="../assets/payments/visa.png" alt=""></div>
+                                            <div><img src="../assets/payments/mastercard.png" alt=""></div>
+                                            <div><img src="../assets/payments/eftops.png" alt=""></div>
+                                        </div>                                      
                                     </div>
-                                </div>
-                                <div class="cardItem">
-                                    <div class="cardPrice">
-                                        <h1>$27.23</h1>
+
+                                    <div class="cardList1">
+                                        <div class="cardTitle1">
+                                           <h1>2.0%</h1> 
+                                        </div>
+                                        <div class="cardText1">
+                                        <div><p>UPI and alternate Payments</p></div>
+                                        <div><span>(exc.GST)</span></div>
+                                        
+                                        </div>
+                                        <div class="cardImg1">
+                                            <div><img src="../assets/payments/unionPay.png" alt=""></div>
+                                            <div><img src="../assets/payments/Alipay.png" alt=""></div>
+                                            <div><img src="../assets/payments/weChat.png" alt=""></div>
+                                        </div>                                      
                                     </div>
-                                    <div class="cardRate2">
-                                        <p>Terminal rental (Per month/terminal)</p>
-                                        <span>(exc.GST)</span>
+                                    <div class="cardList2">
+                                        <div class="cardTitle2">
+                                           <h1>$27.23</h1> 
+                                        </div>
+                                        <div class="cardText2">
+                                        <div><p>Terminal rental (Per month/terminal)</p></div>
+                                        <div><span>(exc.GST)</span></div>                                        
+                                        </div>                                      
                                     </div>
                                 </div>
-                            </div>
+
+                            </div>                           
                         </div>
                         <div class="rightText">
                             <img src="../assets/index/Group98.png" alt="">
@@ -227,12 +243,13 @@
                         <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="icon" />
-                            <svg-icon icon-class="Android" class="icon" />
+                            <svg-icon icon-class="IOS" class="ios" />
+                            <svg-icon icon-class="Android" class="android" />
                         </div>
                         <!-- learn more -->
                         <div class="learnMore">
-                            <router-link to="/FAQ"><el-button class="btnLearn">Learn more</el-button></router-link>
+                            <router-link to="/ToonMobile"><el-button class="btnLearn">Learn
+                                    more</el-button></router-link>
                         </div>
                     </div>
                     <div class="tapImg">
@@ -335,26 +352,28 @@
                     </div>
                     <div class="collapseInfo">
                         <el-collapse v-model="activeNames" @change="handleChange">
-                            <el-collapse-item title="1.What is Trustypay? " name="1">
+                            <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="2.What types of businesses can benefit from TrustyPay's payment solutions?"
+                                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="3.What payment methods does Trustypay support? " name="3">
+
+                            <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="4.Can I use TrustyPay payment solutions with another business account entity?"
+                                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.
@@ -363,7 +382,7 @@
                                     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="5.Do I have access to Merchant Portal? " name="5">
+                            <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
@@ -379,11 +398,6 @@
 
             </div>
 
-            <!-- Contact us -->
-            <div>
-               <IndexContact/>  
-            </div>         
-
 
             <!-- phone and email  -->
             <!-- <div class="phoneEmail">
@@ -420,7 +434,7 @@
                                 provide a variety of payment options, reduce transaction fees, and integrate emerging
                                 technologies like blockchain and mobile payments.</p>
                             <div class="leftBtn">
-                                <el-button plain>Sign up</el-button>
+                                <router-link to="/ContactUs"><el-button plain>Sign up</el-button></router-link>
                             </div>
                         </div>
 
@@ -433,9 +447,6 @@
             <!-- footer -->
             <footerMenu />
         </div>
-
-
-
     </div>
 
 </template>
@@ -447,7 +458,7 @@ import SvgIcon from '@/components/svgIcon.vue';
 import footerMenu from '@/components/footerMenu.vue';
 import Panel from '@/components/Panel.vue';
 import Sales from '@/components/Sales.vue';
-import IndexContact from '@/components/IndexContact.vue';
+
 
 export default {
     name: 'index',
@@ -457,7 +468,7 @@ export default {
         footerMenu,
         Panel,
         Sales,
-        IndexContact
+
     },
     data() {
         return {
@@ -517,6 +528,7 @@ hr {
         gap: 30px;
 
         .bannerInfo {
+
             width: 630px;
             margin-top: 50px;
 
@@ -561,100 +573,137 @@ hr {
                 }
             }
 
-            .leftCard {
-
-                .smallCard {
-                    width: 160px;
-                    height: auto;
-                    background: #fec223;
-                    border-radius: 20px;
-                    margin-left: 400px;
-                    color: #fff;
-                    text-align: center;
-                    font-size: 28px;
-                    margin-bottom: 0px;
-
+            .offerCard {
+                width: 530px;
+                height: auto;
+                position: relative;
+
+                .yellowCard {
+                    position: absolute;
+                    width: 90px;
+                    height: 90px;
+                    background: #fcf558;
+                    border-radius: 50%;
+                    right: 0;
+                    top: -34px;
+                    z-index: 1;
+                    h1 {
+                        font-size: 22px;
+                        text-align: center;
+                    }
                 }
 
-                .cardItem {
-                    width: 530px;
-                    height: 95px;
-                    margin-bottom: 16px;
-                    background: #a7de50;
-                    border-radius: 12px;
-                    display: flex;
-                    box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
-
-                    // justify-content: space-evenly;
-                    .cardPrice {
+                .greenCard {
+                    position: absolute;
+                    top:30px;
+                    .cardList {
+                        width: 530px;
+                        height: 95px;
+                        background: #a7de50;
+                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                        border-radius: 12px;
                         display: flex;
                         align-items: center;
-                        padding-left: 28px;
+                        justify-content: center;
+                        .cardTitle{                          
 
-                        h1 {
-                            color: #fff;
+                            h1{
+                                margin: 0;
+                                color: #fff;
+                            }
                         }
-                    }
-
-                    .cardRate {
-                        line-height: 26px;
-                        padding-left: 50px;
-                        padding-top: 16px;
-
-                        h4 {
-                            margin: 0;
-                            color: #fff;
-                            font-size: 16px;
-                            padding: 6px 0px;
-                        }
-
-                        p {
-                            margin: 0;
-                            color: #fff;
-                            font-size: 16px;
+                        .cardText{
+                            margin-left: 18px;
+                            p{
+                                color: #fff;
+                                margin: 0;
+                            }
+                            span{
+                                color: #fff;
+                                font-size: 12px;
+                            }
                         }
-
-                        span {
-                            font-size: 12px;
-                            color: #fff;
+                       .cardImg{
+                        display: flex;
+                        align-items: center;
+                        margin-top: 30px;
+                        gap: 8px;
+                        img{
+                            width: 50px;
+                            height: auto;
                         }
+                       }
                     }
-
-                    .cardRate1 {
-                        line-height: 28px;
-                        padding-left: 66px;
-                        padding-top: 20px;
-
-                        p {
-                            margin: 0;
-                            color: #fff;
-                            font-size: 16px;
+                    .cardList1 {
+                        width: 530px;
+                        height: 95px;
+                        background: #a7de50;
+                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                        border-radius: 12px;
+                        display: flex;
+                        align-items: center;                     
+                        margin-top: 15px;
+                       
+                        .cardTitle1{                          
+                            margin-left: 15px;
+                            h1{
+                                margin: 0;
+                                color: #fff;
+                            }
                         }
-
-                        span {
-                            font-size: 12px;
-                            color: #fff;
+                        .cardText1{
+                            margin-left: 34px;
+                            p{
+                                color: #fff;
+                                margin: 0;
+                            }
+                            span{
+                                color: #fff;
+                                font-size: 12px;
+                            }
                         }
+                       .cardImg1{
+                        display: flex;
+                        align-items: center;
+                        margin-top: 30px;
+                        gap: 8px;
+                        img{
+                            width: 50px;
+                            height: auto;
+                        }
+                       }
                     }
-
-                    .cardRate2 {
-                        line-height: 28px;
-                        padding-left: 40px;
-                        padding-top: 20px;
-
-                        p {
-                            margin: 0;
-                            color: #fff;
-                            font-size: 16px;
+                    .cardList2 {
+                        width: 530px;
+                        height: 95px;
+                        background: #a7de50;
+                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
+                        border-radius: 12px;
+                        display: flex;
+                        align-items: center;
+                        margin-top: 15px;
+                        .cardTitle2{                          
+                            margin-left: 12px;
+                            h1{
+                                margin: 0;
+                                color: #fff;
+                            }
                         }
-
-                        span {
-                            font-size: 12px;
-                            color: #fff;
+                        .cardText2{
+                            margin-left: 15px;
+                            p{
+                                color: #fff;
+                                margin: 0;
+                            }
+                            span{
+                                color: #fff;
+                                font-size: 12px;
+                            }
                         }
+
                     }
                 }
-            }
+            }          
         }
 
         .rightText {
@@ -677,7 +726,7 @@ hr {
     height: auto;
     // background: #f5f7f5;
     border-radius: 30px;
-    margin-top: 360px;
+    margin-top: 280px;
 
     .accept-title {
         h2 {
@@ -823,7 +872,6 @@ hr {
         .learnMore {
             margin: 60px 0;
 
-            // 改
             .btnLearn {
                 width: 190px;
                 padding: 14px;
@@ -835,7 +883,13 @@ hr {
         }
 
         .tapSvg {
-            .icon {
+            .ios {
+                width: 50px;
+                height: 50px;
+                padding: 0 20px 0 0;
+            }
+
+            .android {
                 width: 60px;
                 height: 60px;
             }
@@ -846,7 +900,7 @@ hr {
         img {
             width: 622px;
             height: 596px;
-            padding: 30px 70px 0px 0px;
+            padding: 130px 70px 0px 0px;
         }
     }
 }