Contact.js 3.77 KB
import FadeInStagger from "@/components/FadeInStagger";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";

export const Contact = () => {
  return (
    <>
      <section className="contact_sec sec_padd">
        <Container className="custom_container">
          <Row className="justify-content-end">
            <Col md={5}>
              <div className="">
                <FadeInStagger direction="top">
                  <h2 className="heading">Lets Connect</h2>
                  <p>Create your Dream space together, Visit Us Today!</p>
                </FadeInStagger>
                  <form action="" className="let-connect-form">
                    <Row>
                      <Col md={6} className="mb-3">
                        <div className="mb-1">Name</div>
                        <div>
                          <input
                            type="text"
                            placeholder="Type here"
                            name="name"
                            class="inputField nameInput"
                          />
                        </div>
                      </Col>
                      <Col md={6} className="mb-3">
                        <div className="mb-1">Mobile Number</div>
                        <div>
                          <input
                            type="text"
                            placeholder="Type here"
                            name="Mobile Number"
                            class="inputField nameInput"
                          />
                        </div>
                      </Col>
                    </Row>
                    <Row>
                      <Col md={12} className="mb-3">
                        <div className="mb-1">Email Address</div>
                        <div>
                          <input
                            type="text"
                            placeholder="Type here"
                            name="Email Address"
                            class="inputField nameInput"
                          />
                        </div>
                      </Col>
                    </Row>
                    <Row>
                      <Col md={12} className="mb-3">
                        <div className="mb-1">Message</div>
                        <div>
                          <textarea
                            rows="5"
                            type="text"
                            placeholder="Type here"
                            name="name"
                            class="inputField nameInput"
                          />
                        </div>
                      </Col>
                    </Row>
                    <Row>
                     <Col className="mb-3">
                      <div class="form-check">
                        <input
                          class="form-check-input"
                          type="checkbox"
                          value=""
                          id="checkChecked"
                        />
                        <label class="form-check-label" for="checkChecked">
                          I accept the processing of my personal data for
                          traditional and automated direct marketing purposes.
                        </label>
                      </div>
                     </Col>
                    </Row>
                    <Row>
                      <Col className="mb-3">
                         <div className="d-flex gap-3">
                            <button className="btn3">Submit</button>
                          </div>
                      </Col>
                    </Row>
                  </form>
              
              </div>
             
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
};