From 9b032e4d917b3c3493788607310af3b6b2f38608 Mon Sep 17 00:00:00 2001
From: hotfusion <eddy_milner@hotmail.com>
Date: Wed, 23 Oct 2024 21:49:38 -0400
Subject: [PATCH] .

---
 src/view/hotfusion/src/assets/less/index.less | 42 +++++++-
 src/view/hotfusion/src/index.vue              | 18 +++-
 src/view/hotfusion/src/pages/aboutus.vue      |  9 +-
 src/view/hotfusion/src/pages/contactus.vue    | 98 ++++++++++++++-----
 src/view/hotfusion/src/pages/home.vue         | 10 +-
 src/view/hotfusion/src/pages/pricelist.vue    | 12 ++-
 6 files changed, 151 insertions(+), 38 deletions(-)

diff --git a/src/view/hotfusion/src/assets/less/index.less b/src/view/hotfusion/src/assets/less/index.less
index 7ab1f1d..96fa2ce 100644
--- a/src/view/hotfusion/src/assets/less/index.less
+++ b/src/view/hotfusion/src/assets/less/index.less
@@ -170,12 +170,41 @@ html {
           font-weight: bold;
           font-size: 15px;
           padding: 15px;
-          background-color: #f8f8f8 !important;
+          border-radius: 30px;
+          background-color: transparent !important;
+          border: solid 4px #fff;
+          color: #fff;
+          i,svg{
+            font-size: 20px;
+            margin-right: 10px;
+            color: #fffdfa;
+          }
+          &.disabled{
+            opacity: 0.2 !important;
+          }
           .container {
-            background-color: #f8f8f8 !important;
+            &.disabled {
+              opacity: 0.2 !important;
+            }
+            background-color: transparent !important;
             span {
               font-size: 15px;
+              color: #fff;
+            }
+          }
+        }
+      }
+      .contactus {
+        .splitpanes__pane{
+          overflow: visible;
+          button{
+            border: none;
+            &[disabled] {
+             opacity: 0.2 !important;
+              background-color: #121418 !important
             }
+            background-color: #1bb261 !important;
+            color: #fff;
           }
         }
       }
@@ -189,4 +218,13 @@ html {
       width: 0;
     }
   }
+  .paragraph{
+    .icon {
+      margin-bottom: 10px !important;
+      height: 100px !important;
+      i,svg {
+        font-size: 90px !important;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/view/hotfusion/src/index.vue b/src/view/hotfusion/src/index.vue
index b0d1d04..c9bad25 100644
--- a/src/view/hotfusion/src/index.vue
+++ b/src/view/hotfusion/src/index.vue
@@ -15,8 +15,12 @@ export default {
       Scrollbar,
       A11y
     ],
+    swiper : false
   }),
   methods : {
+    onSwiper(e){
+      this.swiper = e;
+    },
     onSlideChange(e){
       this.activeIndex = e.activeIndex;
       setTimeout(() => {
@@ -46,6 +50,10 @@ export default {
           }
         })
       })
+    },
+    goTo(e){
+      if(e === 'contactus')
+        this.swiper.slideTo(4);
     }
   },
   mounted() {
@@ -57,18 +65,18 @@ export default {
 </script>
 <template>
   <container ref="container">
-    <swiper :pagination="true"  style="height: 100%;" :modules="modules" :slides-per-view="1" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
+    <swiper @swiper="onSwiper" :pagination="true"  style="height: 100%;" :modules="modules" :slides-per-view="1" :space-between="50" @slideChange="onSlideChange">
       <swiper-slide>
-        <Home></Home>
+        <Home  v-on:goto="goTo"></Home>
       </swiper-slide>
       <swiper-slide>
-        <Aboutus :parentIndex="activeIndex"/>
+        <Aboutus v-on:goto="goTo" :parentIndex="activeIndex"/>
       </swiper-slide>
       <swiper-slide>
-        <PriceList></PriceList>
+        <PriceList  v-on:goto="goTo"></PriceList>
       </swiper-slide>
       <swiper-slide>
-        <Contactus :enable="activeIndex === 3"></Contactus>
+        <Contactus  v-on:goto="goTo" @completed="swiper.slideTo(1)" :enable="activeIndex === 3"></Contactus>
       </swiper-slide>
     </swiper>
   </container>
diff --git a/src/view/hotfusion/src/pages/aboutus.vue b/src/view/hotfusion/src/pages/aboutus.vue
index 18fe489..9c3ab08 100644
--- a/src/view/hotfusion/src/pages/aboutus.vue
+++ b/src/view/hotfusion/src/pages/aboutus.vue
@@ -60,7 +60,8 @@ export default {
           </p>
         </div>
         <div style="height: 100%">
-          <button>
+          <button v-on:click="$emit('goto','contactus')">
+            <i class="fas fa-angle-right"></i>
             Contact Us
           </button>
         </div>
@@ -76,7 +77,8 @@ export default {
           </p>
         </div>
         <div style="height: 100%">
-          <button>
+          <button v-on:click="$emit('goto','contactus')">
+            <i class="fas fa-angle-right"></i>
             Contact Us
           </button>
         </div>
@@ -92,7 +94,8 @@ export default {
           </p>
         </div>
         <div style="height: 100%">
-          <button>
+          <button v-on:click="$emit('goto','contactus')">
+            <i class="fas fa-angle-right"></i>
             Contact Us
           </button>
         </div>
diff --git a/src/view/hotfusion/src/pages/contactus.vue b/src/view/hotfusion/src/pages/contactus.vue
index 1f7fd22..b42220a 100644
--- a/src/view/hotfusion/src/pages/contactus.vue
+++ b/src/view/hotfusion/src/pages/contactus.vue
@@ -1,12 +1,33 @@
 <script  lang="ts">
 import {Fetch,Layout,Component,Components, Element, Warning} from "@hotfusion/ui"
 import * as KUTE from "kute.js";
+import {SwiperSlide} from "swiper/vue";
+import {A11y, Navigation, Pagination, Scrollbar} from "swiper/modules";
 export default {
+  components: {SwiperSlide},
   props:['enable'],
   data : () => ({
     Layout : new Layout('main'),
+    activeIndex: 0,
+    modules: [
+      Navigation,
+      Pagination,
+      Scrollbar,
+      A11y
+    ]
   }),
   methods: {
+    onSwiper(swiper){
+      this.swiper = swiper;
+    },
+    close(){
+      this.swiper.allowSlideNext = true;
+      this.swiper.allowSlidePrev = true;
+      this.swiper.slideTo(0);
+      this.swiper.allowSlideNext = false;
+      this.swiper.allowSlidePrev = false;
+      this.$emit('completed')
+    },
     onSlideChange(e){
       setTimeout(() => {
         let element = this.$refs.paragraph.querySelector('h1');
@@ -21,7 +42,7 @@ export default {
           elements : [
             new Element('input')
                 .setId('name')
-                .setValue('vadim')
+                .setValue('')
                 .setLabel('Full Name')
                 .setIcon('fas fa-user')
                 .setPlaceholder('Enter your last and first name')
@@ -29,7 +50,7 @@ export default {
                 .setMinValueLength(4)
                 .setMaxValueLength(100),
             new Element('input')
-                .setValue('Korolov.vadim@gmail.com')
+                .setValue('')
                 .setId('email')
                 .setLabel('Email Address')
                 .setIcon('fas fa-at')
@@ -43,7 +64,7 @@ export default {
                     throw new Error('The email address is not valid');
                 }),
             new Element('input')
-                .setValue('5149996659')
+                .setValue('')
                 .setId('phone')
                 .setLabel('Phone Number')
                 .setIcon('fas fa-phone')
@@ -57,7 +78,7 @@ export default {
                     throw new Error('The phone number is not valid');
                 }),
             new Element('textarea')
-                .setValue('Hello, my name is vadim and i am looking for someone to work with!')
+                .setValue('')
                 .setId('message')
                 .setLabel('Message')
                 .setIcon('fas fa-envelope-square')
@@ -67,17 +88,24 @@ export default {
                 .setMaxValueLength(2000)
 
           ],
-          footer : [
+          footer   : [
               new Element('button').setLabel('Send us a message').setDisable(true).on('click', ({element}) => {
                 element.setBusy(true);
+                element.setLabel('Wait, we are sending your email...')
                 Fetch.post('https://hotfusion.ca/cgi-bin/mail.php',this.Layout[0].component.getFormAsObject()).then(e => {
-                  console.log('retrun',e);
+                  if(e.status === 'error')
+                    return alert('Sorry, but your message could not be sent. Check the fields and make sure fields are not empty!');
+                  this.swiper.allowSlideNext = true;
+                  this.swiper.slideTo(2);
+                  this.Layout[0].component.elements.forEach(x => x.setValue(''));
+                  element.setLabel('Send us a message');
+                  element.setBusy(false);
                 })
               })
           ]
         }).on('keydown',async () => {
           let isValid = this.Layout[0].component.isValid()
-            this.Layout[0].component.footer[0].setDisable(!isValid);
+          this.Layout[0].component.footer[0].setDisable(!isValid);
         })
     );
     setTimeout(() => {
@@ -102,20 +130,46 @@ export default {
 </script>
 
 <template>
-    <div class="paragraph" center ref="paragraph">
-      <div class="icon">
-        <div class="cube"></div>
-        <div class="circle"></div>
-        <div class="triangle"></div>
-        <i class="fas fa-paper-plane"></i>
+  <swiper
+      class="contactus"
+      :allowSlideNext = "false"
+      :allowSlidePrev = "false"
+      @swiper="onSwiper"
+      style="height: 100%;" :modules="modules" :slides-per-view="1" :space-between="50">
+    <swiper-slide>
+      <div class="paragraph" center ref="paragraph">
+        <div class="icon">
+          <i class="fas fa-paper-plane"></i>
+        </div>
+        <h1 value="Contact Us">
+        </h1>
+        <div class="line"></div>
+        <p>
+          It’s free to reach out to us, so why not? Send us your inquiry, and we'll get back to you as soon as possible.
+        </p>
       </div>
-      <h1 value="Contact Us">
-      </h1>
-      <div class="line"></div>
-      <p>
-        It’s free to reach out to us, so why not? Send us your inquiry, and we'll get back to you as soon as possible.
-      </p>
-    </div>
-    <layout :layout="Layout"></layout>
-
+      <layout :layout="Layout"></layout>
+    </swiper-slide>
+    <swiper-slide>
+      <div class="paragraph" center ref="paragraph">
+        <div class="icon">
+          <i class="fas fa-paper-plane"></i>
+        </div>
+        <h1 value="You message has been recived!">
+        </h1>
+        <div class="line"></div>
+        <p>
+          Thank you for reaching out! We've received your message and will respond as soon as possible. Your inquiry is important to us, and we'll get back to you promptly. If you have any urgent concerns, please feel free to contact us directly.
+          <br><br>
+          <button style="width: 160px" @click="close" >
+            <i class="fas fa-angle-right"></i>
+            Return To Home
+          </button>
+        </p>
+      </div>
+    </swiper-slide>
+  </swiper>
 </template>
+<style lang="less" scoped>
+
+</style>
diff --git a/src/view/hotfusion/src/pages/home.vue b/src/view/hotfusion/src/pages/home.vue
index 7141ba8..25f3880 100644
--- a/src/view/hotfusion/src/pages/home.vue
+++ b/src/view/hotfusion/src/pages/home.vue
@@ -58,7 +58,10 @@ export default {
         </p>
       </div>
       <div style="height: 100%">
-        <button>Contact Us</button>
+        <button v-on:click="$emit('goto','contactus')">
+          <i class="fas fa-angle-right"></i>
+          Contact Us
+        </button>
       </div>
     </swiper-slide>
     <swiper-slide>
@@ -73,7 +76,10 @@ export default {
         </p>
       </div>
       <div style="height: 100%">
-        <button>Contact Us</button>
+        <button v-on:click="$emit('goto','contactus')">
+          <i class="fas fa-angle-right"></i>
+          Contact Us
+        </button>
       </div>
     </swiper-slide>
   </swiper>
diff --git a/src/view/hotfusion/src/pages/pricelist.vue b/src/view/hotfusion/src/pages/pricelist.vue
index d6b8a9a..bd10da9 100644
--- a/src/view/hotfusion/src/pages/pricelist.vue
+++ b/src/view/hotfusion/src/pages/pricelist.vue
@@ -60,7 +60,8 @@ export default {
         </p>
       </div>
       <div style="height: 100%">
-        <button>
+        <button v-on:click="$emit('goto','contactus')">
+          <i class="fas fa-angle-right"></i>
           Get a Quote
         </button>
       </div>
@@ -77,7 +78,8 @@ export default {
         <p>Ideal for minor website updates, troubleshooting, and general maintenance tasks. Perfect for keeping your existing platform running smoothly.</p>
       </div>
       <div style="height: 100%">
-        <button>
+        <button v-on:click="$emit('goto','contactus')">
+          <i class="fas fa-angle-right"></i>
           Get a Quote
         </button>
       </div>
@@ -94,7 +96,8 @@ export default {
         <p>Suitable for building new website features, setting up e-commerce platforms, or integrating third-party payment solutions. This level covers most standard development needs.</p>
       </div>
       <div style="height: 100%">
-        <button>
+        <button v-on:click="$emit('goto','contactus')">
+          <i class="fas fa-angle-right"></i>
           Get a Quote
         </button>
       </div>
@@ -111,7 +114,8 @@ export default {
         <p>For complex custom application development, enterprise-level integrations, or high-level consulting. This tier addresses challenging projects requiring specialized skills and expertise.</p>
       </div>
       <div style="height: 100%">
-        <button>
+        <button v-on:click="$emit('goto','contactus')">
+          <i class="fas fa-angle-right"></i>
           Get a Quote
         </button>
       </div>