contactus.component.html

<div class="relative">
  <div
    class="flex relative before:bg-primary/80 before:absolute before:w-full before:h-full"
  >
    <img
      src="./assets/img/png-images/14.jpg"
      alt=""
      class="h-[400px] w-full rounded-sm"
      id="profile-img2"
    />
  </div>
  <div class="absolute top-12 md:top-16 lg:top-28 inset-x-1/4 text-center space-y-3">
    <div class="text-white space-y-3">
      <p class="text-xl text-white/70">Contact us</p>
      <h1 class="text-4xl sm:text-5xl font-bold">How Can We Help Us .....!</h1>
      <p class="text-sm text-white/50">
        Have any questions ? We would love to hear from you.
      </p>
      <a href="javascript:void(0);" class="ti-btn ti-btn-secondary">
        <i class="ri-phone-line"></i> Call Us
      </a>
    </div>
  </div>

  <!-- Start::main-content -->
  <div class="main-content -mt-12">
    <!-- Start::Container -->
    <div class="container mx-auto relative mb-10">
      <!-- Start::row-1 -->
      <div class="grid grid-cols-12 gap-x-6">
        <div class="col-span-12 xl:col-span-4">
          <div class="box">
            <div class="box-body">
              <div class="space-x-3 flex rtl:space-x-reverse">
                <div
                  class="bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary p-3 rounded-full leading-none text-center avatar"
                >
                  <i class="ri-smartphone-line text-2xl leading-none"></i>
                </div>
                <div>
                  <h5 class="font-semibold text-base">Phone number</h5>
                  <p class="text-gray-500 dark:text-white/70">
                    + 01 234 567 88
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-span-12 xl:col-span-4">
          <div class="box">
            <div class="box-body">
              <div class="space-x-3 flex rtl:space-x-reverse">
                <div
                  class="bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary p-3 rounded-full leading-none text-center avatar"
                >
                  <i class="ri-mail-line text-2xl leading-none"></i>
                </div>
                <div>
                  <h5 class="font-semibold text-base">Email Address</h5>
                  <p class="text-gray-500 dark:text-white/70">
                    info12323@example.com
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-span-12 xl:col-span-4">
          <div class="box">
            <div class="box-body">
              <div class="space-x-3 flex rtl:space-x-reverse">
                <div
                  class="bg-primary/20 dark:bg-primary/20 text-primary dark:text-primary p-3 rounded-full leading-none text-center avatar"
                >
                  <i class="ri-map-pin-line text-2xl leading-none"></i>
                </div>
                <div>
                  <h5 class="font-semibold text-base">Address</h5>
                  <p class="text-gray-500 dark:text-white/70">
                    New York, NY 10012, US-52014
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End::row-1 -->

      <!-- Start::row-2 -->
      <div class="xl:grid xl:grid-cols-2 xl:gap-x-6">
        <div class="box">
          <div class="box-body">
            <iframe
              title=""
              class="rounded-sm w-full"
              src="https://www.google.com/maps/embed?pb=!1m26!1m12!1m3!1d30444.274596168965!2d78.54114692513858!3d17.48198883339408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m11!3e6!4m3!3m2!1d17.4886524!2d78.5495041!4m5!1s0x3bcb9c7ec139a15d%3A0x326d1c90786b2ab6!2sspruko%20technologies!3m2!1d17.474805099999998!2d78.570258!5e0!3m2!1sen!2sin!4v1670225507254!5m2!1sen!2sin"
              height="420"
              style="border: 0"
              allowfullscreen=""
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
          </div>
        </div>
        <div class="box">
          <div class="box-body">
            <div class="my-auto text-center">
              <h2 class="mb-2 font-semibold text-2xl leading-none text-start">
                Contact Form
              </h2>
              <p class="text-gray-500 dark:text-white/70 text-start">
                Ask us everything and we would love to hear from you
              </p>
              <div class="mt-5">
                <div class="space-y-4 text-start">
                  <div class="grid sm:grid-cols-12 gap-x-6">
                    <label
                      class="col-span-3 my-auto ti-form-label whitespace-nowrap"
                      >Full Name:</label
                    >
                    <input
                      type="text"
                      class="col-span-9 ti-form-input"
                      placeholder="Enter Full Name"
                    />
                  </div>
                  <div class="grid sm:grid-cols-12 gap-x-6">
                    <label
                      class="col-span-3 my-auto ti-form-label whitespace-nowrap"
                      >Email ID:</label
                    >
                    <input
                      type="email"
                      class="col-span-9 ti-form-input"
                      placeholder="Enter Email Id"
                    />
                  </div>
                  <div class="grid sm:grid-cols-12 gap-x-6">
                    <label
                      class="col-span-3 my-auto ti-form-label whitespace-nowrap"
                      >Phone No:</label
                    >
                    <input
                      type="number"
                      class="col-span-9 ti-form-input"
                      placeholder="Enter Phone No"
                    />
                  </div>
                  <div class="grid sm:grid-cols-12 gap-x-6">
                    <label
                      class="col-span-3 my-auto ti-form-label whitespace-nowrap"
                      >Message:</label
                    >
                    <textarea
                      class="col-span-9 ti-form-input"
                      rows="4"
                      placeholder="Enter Your Messaage"
                    ></textarea>
                  </div>
                  <div class="grid sm:grid-cols-12 gap-x-6">
                    <div class="col-span-3"></div>
                    <div class="col-span-9">
                      <a
                        class="ti-btn ti-btn-primary mb-0"
                        href="javascript:void(0);"
                        >Send Message</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End::row-2 -->
    </div>

    <!-- End::Container -->
  </div>
  <!-- Start::main-content -->
</div>