irongit
Sign inRegister
huncholanehuncholane/slroofPublic
slroof/pages/contact.js
136 lines5.5 KBJavaScript
RawDownloadHistory
1import Layout from "@/components/layout/Layout";
2import Link from "next/link";
3export default function Contact() {
4 return (
5 <>
6 <Layout breadcrumbTitle="Contact Us">
7 <section className="contact-area pt-120 pb-120">
8 <div className="container">
9 <div className="row justify-content-center">
10 <div className="col-xl-6 col-lg-10">
11 <div
12 className="contact-form-wrap"
13 data-background="/assets/img/images/contact_form_bg.jpg"
14 >
15 <h2 className="title">Contact With Us</h2>
16 <p>
17 Send us a message and we' ll respond as soon as possible
18 </p>
19 <form action="#" className="contact-form">
20 <div className="row">
21 <div className="col-md-6">
22 <div className="form-grp">
23 <input
24 id="firstName"
25 type="text"
26 placeholder="First Name*"
27 />
28 </div>
29 </div>
30 <div className="col-md-6">
31 <div className="form-grp">
32 <input
33 id="lastName"
34 type="text"
35 placeholder="Last Name*"
36 />
37 </div>
38 </div>
39 <div className="col-md-6">
40 <div className="form-grp">
41 <input
42 id="email"
43 type="email"
44 placeholder="Email Address*"
45 />
46 </div>
47 </div>
48 <div className="col-md-6">
49 <div className="form-grp">
50 <input
51 id="phone"
52 type="text"
53 placeholder="Phone Number*"
54 />
55 </div>
56 </div>
57 </div>
58 <div className="form-grp">
59 <input id="subject" type="text" placeholder="Subject" />
60 </div>
61 <div className="form-grp">
62 <textarea id="message" placeholder="Your Message here" />
63 </div>
64 <button className="btn" type="submit">
65 Send Message
66 </button>
67 </form>
68 </div>
69 </div>
70 <div className="col-xl-6 col-lg-10">
71 <div className="contact-info-wrap">
72 <h2 className="title">Need Any Help?</h2>
73 <p>
74 Call us or message and we' ll respond as soon as possible
75 </p>
76 <ul className="list-wrap">
77 <li>
78 <div className="contact-info-item">
79 <div className="icon">
80 <i className="fas fa-phone-alt" />
81 </div>
82 <div className="content">
83 <Link href="tel:018168988598">+(816) 898 9598</Link>
84 <Link href="tel:018166654838">+(816) 665 4838</Link>
85 </div>
86 </div>
87 </li>
88 <li>
89 <div className="contact-info-item">
90 <div className="icon">
91 <i className="fas fa-envelope" />
92 </div>
93 <div className="content">
94 <Link href="mailto:infoyour@gmail.com">
95 infoyour@gmail.com
96 </Link>
97 <Link href="mailto:zack@monkewifhat.com">
98 zack@monkewifhat.com
99 </Link>
100 </div>
101 </div>
102 </li>
103 <li>
104 <div className="contact-info-item">
105 <div className="icon">
106 <i className="fas fa-map-marker-alt" />
107 </div>
108 <div className="content">
109 <p>
110 3328, North Trade Winds <br /> Kansas City, MO, USA
111 </p>
112 </div>
113 </div>
114 </li>
115 </ul>
116 </div>
117 {/* contact-map */}
118 <div id="contact-map">
119 <iframe
120 src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d396369.7968760607!2d-94.5757195!3d39.091919000000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87c0f75eafe99997%3A0x558525e66aaa51a2!2sKansas%20City%2C%20MO!5e0!3m2!1sen!2sus!4v1718680340132!5m2!1sen!2sus"
121 height={570}
122 style={{ border: 0, width: "100%" }}
123 allowFullScreen
124 loading="lazy"
125 referrerPolicy="no-referrer-when-downgrade"
126 />
127 </div>
128 {/* contact-map-end */}
129 </div>
130 </div>
131 </div>
132 </section>
133 </Layout>
134 </>
135 );
136}