add more cosmatic changes and include contact us section
This commit is contained in:
parent
432cf2122e
commit
9526cb0e5e
Binary file not shown.
|
Before Width: | Height: | Size: 12 MiB After Width: | Height: | Size: 500 KiB |
BIN
public/img/hero/bg-03.png
Normal file
BIN
public/img/hero/bg-03.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
BIN
public/img/illustrations/contact-us.png
Normal file
BIN
public/img/illustrations/contact-us.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
@ -204,3 +204,55 @@ body {
|
||||
transition: all 0.4s;
|
||||
border: 2px solid color-mix(in srgb, #0a53be, transparent 10%);
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
padding: 40px 40px;
|
||||
margin: 60px auto;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.contact-img img {
|
||||
width: 100%;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.contact-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: #173b5f;
|
||||
}
|
||||
|
||||
.contact-text p {
|
||||
font-size: 1rem;
|
||||
color: #6c757d;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
background-color: #49bf3c;
|
||||
color: #fff;
|
||||
border-radius: 50px;
|
||||
padding: 10px 30px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-square-small {
|
||||
border-radius: 3px;
|
||||
padding-bottom: 5.072px;
|
||||
padding-inline-end: 12px;
|
||||
padding-inline-start: 12px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 5.072px;
|
||||
}
|
||||
|
||||
.btn-green:hover {
|
||||
background-color: #00a85a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@ -73,14 +73,17 @@ const LandingPage = () => {
|
||||
<ul className=" navbar-nav align-items-center ms-5">
|
||||
<li className="nav-item">
|
||||
<a
|
||||
className="btn btn-sm btn-success px-3 my-1 "
|
||||
className="btn btn-green btn-square-small btn-sm px-3 my-1 "
|
||||
href="/auth/login"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li className="nav-item ms-2">
|
||||
<a className="btn btn-sm btn-success px-3 my-1" href="#">
|
||||
<a
|
||||
className="btn btn-sm btn-green btn-square-small px-3 my-1"
|
||||
href="#"
|
||||
>
|
||||
Get Started
|
||||
</a>
|
||||
</li>
|
||||
@ -110,7 +113,10 @@ const LandingPage = () => {
|
||||
<p className="lead">
|
||||
Track progress, assign tasks, and monitor work in real-time.
|
||||
</p>
|
||||
<a href="#" className="btn btn-success btn-lg mt-3">
|
||||
<a
|
||||
href="#"
|
||||
className="btn btn-green btn-square-small btn-lg mt-3 p-3"
|
||||
>
|
||||
Start Free Trial
|
||||
</a>
|
||||
</div>
|
||||
@ -129,7 +135,7 @@ const LandingPage = () => {
|
||||
Empower your team with attendance, expense, and task management
|
||||
tools.
|
||||
</p>
|
||||
<a href="#" className="btn btn-success btn-lg mt-3">
|
||||
<a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
@ -138,7 +144,7 @@ const LandingPage = () => {
|
||||
<div
|
||||
className="carousel-item"
|
||||
style={{
|
||||
backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
|
||||
backgroundImage: `url("./img/hero/bg-03.png")`,
|
||||
}}
|
||||
>
|
||||
<div className="hero-overlay"></div>
|
||||
@ -149,7 +155,7 @@ const LandingPage = () => {
|
||||
<p className="lead">
|
||||
Make data-driven decisions with real-time project analytics.
|
||||
</p>
|
||||
<a href="#" className="btn btn-success btn-lg mt-3">
|
||||
<a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
|
||||
View Demo
|
||||
</a>
|
||||
</div>
|
||||
@ -303,7 +309,7 @@ const LandingPage = () => {
|
||||
<li>Basic reporting</li>
|
||||
<li>Project tracking</li>
|
||||
</ul>
|
||||
<a href="#" className="btn btn-outline-primary">
|
||||
<a href="#" className="btn btn-outline-success">
|
||||
Request Demo
|
||||
</a>
|
||||
</div>
|
||||
@ -324,7 +330,7 @@ const LandingPage = () => {
|
||||
</ul>
|
||||
<a
|
||||
href="https://ofw.marcoaiot.com/auth/reqest/demo"
|
||||
className="btn btn-primary"
|
||||
className="btn btn-green btn-square-small"
|
||||
>
|
||||
Request Demo
|
||||
</a>
|
||||
@ -342,7 +348,7 @@ const LandingPage = () => {
|
||||
<li>Custom integrations</li>
|
||||
<li>Private cloud hosting</li>
|
||||
</ul>
|
||||
<a href="#" className="btn btn-outline-primary">
|
||||
<a href="#" className="btn btn-outline-success">
|
||||
Request Demo
|
||||
</a>
|
||||
</div>
|
||||
@ -660,14 +666,79 @@ const LandingPage = () => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* <!-- Contact --> */}
|
||||
{/* <!-- Contact Section --> */}
|
||||
<section
|
||||
id="contact"
|
||||
className="text-white text-center section-py vh-100"
|
||||
class="section-py pt-5"
|
||||
style={{ background: "#49bf3c" }}
|
||||
>
|
||||
<div className="contact-section ">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 contact-img">
|
||||
<img
|
||||
src="/img/illustrations/contact-us.png"
|
||||
alt="Contact Illustration"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-lg-6 contact-text">
|
||||
<h2>
|
||||
Contact <span class="text-success">Us</span>
|
||||
</h2>
|
||||
<p>
|
||||
We’d love to hear from you! Whether you have a question about
|
||||
features, pricing, or anything else — our team is ready to
|
||||
answer all your queries.
|
||||
</p>
|
||||
<div class="row g-4 ">
|
||||
<div class="col-md-6 col-lg-12 col-xl-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="badge bg-label-primary rounded p-1_5 me-3">
|
||||
<i class="bx bx-envelope bx-lg"></i>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-0 text-start">Email</p>
|
||||
<h6 class="mb-0 text-start">
|
||||
<a href="mailto:example@gmail.com" class="text-heading">
|
||||
sales@marcoaiot.com
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-12 col-xl-6">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="badge bg-label-success rounded p-1_5 me-3">
|
||||
<i class="bx bx-phone-call bx-lg"></i>
|
||||
</div>
|
||||
<div className="">
|
||||
<p class="mb-0 text-start">Phone</p>
|
||||
<h6 class="mb-0 text-start">
|
||||
<a href="tel:+1234-568-963" class="text-heading">
|
||||
+91 70288 83755
|
||||
</a>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 pt-5">
|
||||
<a href="#" class="btn-green">
|
||||
Know More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* <!-- Contact --> */}
|
||||
{/* <section
|
||||
id="contact1"
|
||||
className="text-white text-center section-py vh-auto"
|
||||
style={{ background: "#49bf3c", display: "none" }}
|
||||
>
|
||||
<h2 className="fw-bold mb-3">Image Gallary</h2>
|
||||
<div className="container mt-5">
|
||||
<div className="container mt-5 vh-100">
|
||||
<Swiper
|
||||
slidesPerView={4}
|
||||
centeredSlides={true}
|
||||
@ -736,16 +807,8 @@ const LandingPage = () => {
|
||||
<SwaperSlideImages></SwaperSlideImages>{" "}
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
{/* <p className="mb-4">
|
||||
Want a live demo or have questions? Our team will respond within 24
|
||||
hours.
|
||||
</p>
|
||||
<a href="mailto:sales@marcoaiot.com" className="btn btn-light px-4">
|
||||
Email Us
|
||||
</a> */}
|
||||
</div>
|
||||
</section>
|
||||
</section> */}
|
||||
|
||||
{/* <!-- ? Footer --> */}
|
||||
<footer className="py-2 bg-dark text-white text-center">
|
||||
|
||||
@ -9,7 +9,7 @@ const SwaperSlideImages = ({
|
||||
return (
|
||||
<div className="card h-100">
|
||||
<img className="card-img-top" src={ImageUrl} alt="Card image cap" />
|
||||
<div className="card-body">
|
||||
{/* <div className="card-body">
|
||||
<h5 className="card-title">Card title</h5>
|
||||
<p className="card-text">
|
||||
Some quick example text to build on the card title and make up the
|
||||
@ -18,7 +18,7 @@ const SwaperSlideImages = ({
|
||||
<a href="javascript:void(0)" className="btn btn-outline-primary">
|
||||
Go somewhere
|
||||
</a>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user