Merge pull request #16 from thuongtruong1009/contact-page

feat: add contact page
thuongtruong1009 · Jan 14, 2022 · b895e7c · b895e7c
2 parents c944ba4 + 6377687
commit b895e7c
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 2 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
+    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CBanner: typeof import('./components/CBanner.vue')['default']
     CBrand: typeof import('./components/CBrand.vue')['default']
     CCategory: typeof import('./components/CCategory.vue')['default']
@@ -19,6 +20,7 @@ declare module 'vue' {
     CFooter: typeof import('./components/CFooter.vue')['default']
     CHead: typeof import('./components/CHead.vue')['default']
     CList: typeof import('./components/CList.vue')['default']
+    CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']
     CProduct: typeof import('./components/CProduct.vue')['default']
     CSearch: typeof import('./components/CSearch.vue')['default']

diff --git a/src/components/CFooter.vue b/src/components/CFooter.vue
@@ -54,7 +54,7 @@
           <p>You may unsubscribe at any moment. For that purpose, please find our contact info in the legal notice.</p>
         </div>
         <form action="/POST" class="py-4">
-          <input type="text" placeholder="Your email address..." class="outline-none rounded-l-3xl px-3 py-2.5 w-4/6">
+          <input type="text" placeholder="Your email address..." class="outline-none rounded-l-3xl px-3 py-2.5 w-4/6" autofocus>
           <button type="submit" class="bg-orange-500 text-white rounded-r-3xl px-3 py-2.5">
             Sign up
           </button>

diff --git a/src/components/CMap.vue b/src/components/CMap.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="map-container flex justify-center items-center py-5">
+    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3918.1316505217173!2d106.7994309147447!3d10.87759006029277!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3174d8a415a9d221%3A0x550c2b41569376f9!2zVHLGsOG7nW5nIMSQ4bqhaSBo4buNYyBRdeG7kWMgVOG6vyAtIMSQ4bqhaSBo4buNYyBRdeG7kWMgZ2lhIFRQLkhDTQ!5e0!3m2!1svi!2s!4v1642129522529!5m2!1svi!2s" width="1220" height="450" style="border:0;" allowfullscreen="" loading="lazy" />
+  </div>
+</template>
diff --git a/src/components/LMenu.vue b/src/components/LMenu.vue
@@ -85,7 +85,9 @@ const { t } = useI18n()
     </div>
     <div class="dropdown dark:bg-black">
       <div class="dropdown__select">
-        <span class="dropdown__selected">{{ t('header.contact us') }} </span>
+        <router-link to="/contact">
+          <span class="dropdown__selected">{{ t('header.contact us') }} </span>
+        </router-link>
       </div>
     </div>
   </div>

diff --git a/src/layouts/LContact.vue b/src/layouts/LContact.vue
@@ -0,0 +1,15 @@
+<template>
+  <main class="text-center text-gray-700 dark:text-gray-200">
+    <div class="flex justify-between items-center bg-black">
+      <LMenu />
+      <div class="flex justify-center items-center text-white">
+        <RMenu />
+        <CExtension class="mx-2.75" />
+      </div>
+    </div>
+    <CHead />
+    <CMap />
+    <router-view />
+    <CFooter />
+  </main>
+</template>
diff --git a/src/pages/contact.vue b/src/pages/contact.vue
@@ -0,0 +1,97 @@
+<route lang="yaml">
+meta:
+  layout: LContact
+</route>
+
+<template>
+  <div class="contact-container grid grid-cols-2 gap-15 text-left p-15">
+    <div class="left divide-light-700 divide-y">
+      <div>
+        <h3>
+          Contact Us
+        </h3>
+        <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram anteposuerit litterarum formas human.</p>
+      </div>
+      <div class="single-contact-block">
+        <h4><i class="fa fa-fax" /> Address</h4>
+        <p>6 Linh Trung, Thu Duc, Ho Chi Minh city – VietNam</p>
+      </div>
+      <div class="single-contact-block">
+        <h4><i class="fa fa-phone" /> Phone</h4>
+        <p>
+          <a href="tel:0917085937">Mobile: (+84) 917 085 937</a>
+        </p>
+        <p><a href="tel:0917085937">Hotline: 1009 678 456</a></p>
+      </div>
+      <div class="single-contact-block">
+        <h4><i class="fas fa-envelope" /> Email</h4>
+        <p>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </p>
+      </div>
+    </div>
+    <div class="right">
+      <form action="src/php/mail.php" method="post">
+        <h3>
+          Tell Us Your Message
+        </h3>
+        <div>
+          <label for="fname">Your name *</label><br>
+          <input type="text" name="fname" required>
+        </div>
+        <div>
+          <label for="fmail">Your Email *</label><br>
+          <input type="text" name="fmail" required>
+        </div>
+        <div>
+          <label for="fsubject">Subject</label><br>
+          <input type="text" name="fsubject">
+        </div>
+        <div>
+          <label for="fmessage">Your Message</label><br>
+          <input type="text" name="fmessage">
+        </div>
+        <button type="submit" value="submit" class="bg-black text-white font-semibold py-2 px-7 rounded-md hover:bg-[#E14641] duration-200 uppercase tracking-widest cursor-pointer">
+          Submit
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+h3{
+    text-transform: capitalize;
+    font-size: 2rem;
+    font-weight: 600;
+}
+h4{
+    text-transform: capitalize;
+    font-size: 1.2rem;
+    font-weight: 500;
+}
+lable{
+    display: inline-block;
+}
+input{
+    border: 1px solid rgb(209, 209, 209);
+    outline: none;
+    border-radius: 0.25rem;
+    width: 90%;
+    padding: 0.5rem 1rem;
+    transition: 0.2s;
+    margin-top: 0.25rem;
+}
+input:focus{
+    box-shadow: 1px 1px 3px rgb(59, 175, 252);
+}
+.left > div:not(:first-child){
+    padding: 1.5rem 0;
+}
+.left > div > p {
+    padding: 0.25rem 0;
+}
+form > div{
+    padding: 0.75rem 0;
+}
+</style>