first commit

resources/js/views/front-pages/landing-page/contact-us.vue

@@ -0,0 +1,141 @@
+<script setup>
+import ConnectImg from '@images/front-pages/landing-page/lets-contact.png'
+import sectionTitleIcon from '@images/pages/section-title-icon.png'
+
+const name = ref('')
+const email = ref('')
+const message = ref('')
+</script>
+
+<template>
+  <VContainer id="contact-us">
+    <!-- 👉 Headers  -->
+    <div class="contact-us-section">
+      <div class="headers d-flex justify-center flex-column align-center pb-15">
+        <div class="d-flex gap-x-3 mb-6">
+          <img
+            :src="sectionTitleIcon"
+            alt="section title icon"
+            height="24"
+            width="25"
+          >
+          <div
+            class="text-body-1 text-high-emphasis font-weight-medium"
+            style="letter-spacing: 0.15px !important;"
+          >
+            CONTACT US
+          </div>
+        </div>
+
+        <div class="mb-2 text-center">
+          <span
+            class="text-h4 d-inline-block font-weight-bold"
+            style="line-height: 2rem;"
+          >
+            Let's work
+          </span> <span class="text-h5 d-inline-block">together</span>
+        </div>
+
+        <p class="text-body-1 font-weight-medium text-center mb-0">
+          Any question or remark? just write us a message
+        </p>
+      </div>
+      <div class="mb-15">
+        <VRow class="match-height">
+          <VCol
+            cols="12"
+            md="4"
+            sm="6"
+          >
+            <VCard
+              flat
+              elevation="0"
+              color="primary"
+              theme="dark"
+            >
+              <VCardText class="pa-8">
+                <h6 class="text-h6 mb-1">
+                  Let's contact with us
+                </h6>
+
+                <h4 class="text-h4">
+                  Share your ideas or requirement with our experts.
+                </h4>
+
+                <VImg
+                  :src="ConnectImg"
+                  class="my-5"
+                />
+
+                <div class="text-body-1">
+                  Looking for more customization, more features, and more anything? Don't worry, We've provide you with an entire team of experienced professionals.
+                </div>
+              </VCardText>
+            </VCard>
+          </VCol>
+          <VCol
+            cols="12"
+            md="8"
+            sm="6"
+          >
+            <VCard
+              flat
+              elevation="0"
+            >
+              <VCardText>
+                <div class="text-h5 mb-5">
+                  Share your ideas
+                </div>
+                <VForm @submit.prevent="() => {}">
+                  <VRow>
+                    <VCol
+                      cols="12"
+                      md="6"
+                    >
+                      <VTextField
+                        v-model="name"
+                        placeholder="John Doe"
+                        label="Full Name"
+                      />
+                    </VCol>
+
+                    <VCol
+                      cols="12"
+                      md="6"
+                    >
+                      <VTextField
+                        v-model="email"
+                        placeholder="johndoe@gmail.com"
+                        label="Email address"
+                      />
+                    </VCol>
+
+                    <VCol cols="12">
+                      <VTextarea
+                        v-model="message"
+                        placeholder="Type Your message"
+                        label="Message"
+                      />
+                    </VCol>
+
+                    <VCol>
+                      <VBtn type="submit">
+                        Send Inquiry
+                      </VBtn>
+                    </VCol>
+                  </VRow>
+                </VForm>
+              </VCardText>
+            </VCard>
+          </VCol>
+        </VRow>
+      </div>
+    </div>
+  </VContainer>
+</template>
+
+<style lang="scss" scoped>
+.contact-us-section {
+  margin-block: 5.25rem;
+}
+</style>