130 lines
6.4 KiB
TypeScript
130 lines
6.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
|
|
const ContactSection = () => {
|
|
const sectionRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
const elements = entry.target.querySelectorAll(".wow");
|
|
elements.forEach((el) => {
|
|
const htmlEl = el as HTMLElement;
|
|
const delay = htmlEl.dataset.wowDelay || "0ms";
|
|
setTimeout(() => {
|
|
htmlEl.classList.add("animated");
|
|
|
|
if (htmlEl.classList.contains("fadeInLeft")) {
|
|
htmlEl.classList.add("fadeInLeft");
|
|
} else if (htmlEl.classList.contains("fadeInRight")) {
|
|
htmlEl.classList.add("fadeInRight");
|
|
} else {
|
|
htmlEl.classList.add("fadeInUp");
|
|
}
|
|
|
|
htmlEl.style.visibility = "visible";
|
|
}, parseInt(delay));
|
|
});
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
if (sectionRef.current) {
|
|
observer.observe(sectionRef.current);
|
|
}
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// Handle form submission logic here
|
|
};
|
|
|
|
return (
|
|
<section ref={sectionRef} className="contact-one">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-8">
|
|
<div className="contact-one__info wow fadeInLeft" data-wow-delay="100ms" style={{ visibility: "hidden" }}>
|
|
<div className="contact-one__info__icon">
|
|
<span className="fa-solid fa-headset"></span>
|
|
</div>
|
|
<h3 className="contact-one__info__title">
|
|
Let's call together just <span>contact</span> line
|
|
</h3>
|
|
<p className="contact-one__info__text">
|
|
<a href="tel:255225551">++255225551</a>, <a href="tel:6544144444">+6544144444</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-4">
|
|
<div className="contact-one__image wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
|
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-1.png" alt="Contact Support" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container contact-one__container wow fadeInUp" data-wow-delay="100ms" style={{ visibility: "hidden", marginTop: "-113px" }}>
|
|
<div
|
|
className="contact-one__wrapper"
|
|
style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/shapes/contact-1-shape-1.png)" }}
|
|
>
|
|
<div className="row">
|
|
<div className="col-lg-6">
|
|
<div className="contact-one__image-two">
|
|
<img src="https://tolaklaravel.bracketweb.com/assets/images/resources/contact-1-2.jpg" alt="Business Growth" />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6">
|
|
<div className="contact-one__content">
|
|
<div className="sec-title text-left">
|
|
<h6 className="sec-title__tagline">
|
|
<span className="sec-title__tagline__left"></span>
|
|
Get In Contact
|
|
<span className="sec-title__tagline__right"></span>
|
|
</h6>
|
|
<h3 className="sec-title__title" style={{ color: "#fff" }}>
|
|
Get free Business touch Customers me.
|
|
</h3>
|
|
</div>
|
|
<p className="contact-one__content__text">
|
|
Business tailored it design, management & support services <br />business agency elit, sed do eiusmod tempor.
|
|
</p>
|
|
<form className="contact-one__form form-one" onSubmit={handleSubmit}>
|
|
<div className="form-one__group">
|
|
<div className="form-one__control">
|
|
<input type="text" name="name" placeholder="Your Name" required />
|
|
</div>
|
|
<div className="form-one__control">
|
|
<input type="email" name="email" placeholder="Email address" required />
|
|
</div>
|
|
<div className="form-one__control form-one__control--full">
|
|
<textarea name="message" placeholder="Message" rows={6} required></textarea>
|
|
</div>
|
|
<div className="form-one__control form-one__control--full">
|
|
<button type="submit" className="tolak-btn">
|
|
<b>Send Request</b>
|
|
<span></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ContactSection;
|