ContactInfo.js 3.16 KB
import Heading from "@/components/reuseables/Heading";
import Image from "next/image";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";

const ContactInfo = () => {
  return (
    <>
      <div className="pt-100">
        <Container>
          <Row className="align-items-center">
            <Col lg={6} md={12}>
              <div className="contact-content">
                <span className="sub-title">CONTACT US</span>
                <Heading
                  el="h2"
                  heading="Contact Us With Your Details & Ready To Start"
                />
                <p>
                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                  diam nonumy eirmod liquyam erat, sed diam voluptua. At vero
                  eos et accusam et justo duo dolores et ea lorem ipsum dolor
                  sit amet, consetetur sadipscing elitr.
                </p>

                <Row className="justify-content-center">
                  <Col lg={4} md={4} sm={6}>
                    <div className="single-contact-info-box">
                      <div className="icon">
                        <i className="ri-home-7-line"></i>
                      </div>
                      <h3>Main Office</h3>
                      <p>325 Rockford Lane Durham, New York, USA</p>
                    </div>
                  </Col>

                  <Col lg={4} md={4} sm={6}>
                    <div className="single-contact-info-box">
                      <div className="icon">
                        <i className="ri-phone-line"></i>
                      </div>
                      <h3>Our Phone</h3>
                      <p>
                        <span>Call:</span>
                        <a href="mailto:+18144822296">+(1) 814 482 2296</a>
                      </p>
                      <p>
                        <span>Call:</span>
                        <a href="mailto:+54789632157">+(5) 478 963 2157</a>
                      </p>
                    </div>
                  </Col>

                  <Col lg={4} md={4} sm={6}>
                    <div className="single-contact-info-box">
                      <div className="icon">
                        <i className="ri-mail-star-line"></i>
                      </div>
                      <h3>Email Address</h3>
                      <p>
                        <span>Email:</span>
                        <a href="mailto:hello@zixon.com">hello@zixon.com</a>
                      </p>
                      <p>
                        <span>Email:</span>
                        <a href="mailto:info@zixon.com">info@zixon.com</a>
                      </p>
                    </div>
                  </Col>
                </Row>
              </div>
            </Col>

            <Col lg={6} md={12}>
              <div className="contact-image">
                <Image
                  layout="fill"
                  src="/images/contact-us.webp"
                  alt="image"
                  className="img-fluid image"
                />
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default ContactInfo;