146 lines
5.3 KiB
JavaScript
146 lines
5.3 KiB
JavaScript
"use client";
|
|
import Image from "next/image";
|
|
import AnimatedText from "@/components/common/AnimatedText";
|
|
export default function Contact() {
|
|
return (
|
|
<section
|
|
id="contact"
|
|
className="contact-section fix section-padding bg-cover scrollSpySection"
|
|
style={{ backgroundImage: 'url("/assets/img/contact-bg.jpg")' }}
|
|
>
|
|
<div className="contact-image float-bob-x">
|
|
<Image
|
|
src="/assets/img/contact-img-shape.png"
|
|
width={353}
|
|
height={398}
|
|
alt="img"
|
|
/>
|
|
</div>
|
|
<div className="container">
|
|
<div className="contact-wrapper">
|
|
<div className="row g-4 align-items-center">
|
|
<div className="col-lg-6">
|
|
<div className="contact-items">
|
|
<h3 className="splt-txt wow">
|
|
<AnimatedText text="Get in touch!" />
|
|
</h3>
|
|
<form
|
|
onSubmit={(e) => e.preventDefault()}
|
|
className="mt-4 mt-md-0"
|
|
>
|
|
<div className="row g-4">
|
|
<div
|
|
className="col-lg-6 col-md-6 wow fadeInUp"
|
|
data-wow-delay=".2s"
|
|
>
|
|
<div className="form-clt">
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
placeholder="Name"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-lg-6 col-md-6 wow fadeInUp"
|
|
data-wow-delay=".4s"
|
|
>
|
|
<div className="form-clt">
|
|
<input
|
|
type="text"
|
|
name="email"
|
|
id="email"
|
|
placeholder="email"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-lg-6 col-md-6 wow fadeInUp"
|
|
data-wow-delay=".2s"
|
|
>
|
|
<div className="form-clt">
|
|
<input
|
|
type="text"
|
|
name="number"
|
|
id="number"
|
|
placeholder="Phone"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-lg-6 col-md-6 wow fadeInUp"
|
|
data-wow-delay=".4s"
|
|
>
|
|
<div className="form-clt">
|
|
<input
|
|
type="text"
|
|
name="subject"
|
|
id="subject"
|
|
placeholder="Subject"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="col-lg-12 wow fadeInUp"
|
|
data-wow-delay=".2s"
|
|
>
|
|
<div className="form-clt">
|
|
<textarea
|
|
name="message"
|
|
id="message"
|
|
placeholder="write message . ."
|
|
defaultValue={""}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-7 wow fadeInUp" data-wow-delay=".4s">
|
|
<button type="submit" className="theme-btn">
|
|
Send message <i className="fas fa-long-arrow-right" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="contact-content">
|
|
<div className="section-title">
|
|
<h6 className="text-white wow fadeInUp">
|
|
<i className="fa-regular fa-arrow-left-long" />
|
|
talk to us
|
|
<i className="fa-regular fa-arrow-right-long" />
|
|
</h6>
|
|
<h2 className="text-white splt-txt wow">
|
|
<AnimatedText text="Building With Passion Ensuring Satisfactions" />
|
|
</h2>
|
|
</div>
|
|
<p
|
|
className="text-white mt-3 mt-md-0 wow fadeInUp"
|
|
data-wow-delay=".5s"
|
|
>
|
|
It is a long established fact that a reader will be distracted
|
|
the readable content of a page when looking at layout the
|
|
point of using lorem the is Ipsum less normal distribution of
|
|
letters.
|
|
</p>
|
|
<div className="icon-items wow fadeInUp" data-wow-delay=".3s">
|
|
<div className="icon">
|
|
<i className="fa-solid fa-phone-volume" />
|
|
</div>
|
|
<div className="content">
|
|
<span>call emergency</span>
|
|
<h4>
|
|
<a href="tel:+88012365499">+88 0123 654 99</a>
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|