more cosmmatic changes

This commit is contained in:
Vikas Nale 2025-10-15 11:54:49 +05:30
parent dacd72f945
commit 105beb6062
2 changed files with 38 additions and 31 deletions

View File

@ -1,4 +1,10 @@
/* Custom Styles */ /* Custom Styles */
.custom-navbar {
background: #efefef;
transition: all 0.3s ease;
padding: 1rem 0;
}
.carousel-item { .carousel-item {
height: 100vh; height: 100vh;
min-height: 500px; min-height: 500px;

View File

@ -1,6 +1,7 @@
import "swiper/css"; import "swiper/css";
import "./LandingPage.css"; import "./LandingPage.css";
import React, { useEffect } from "react";
import DashboardImage from "/img/hero/bg-01.jpg"; import DashboardImage from "/img/hero/bg-01.jpg";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules"; import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
@ -9,13 +10,10 @@ import SwaperSlideImages from "./SwaperSlideImages";
const LandingPage = () => { const LandingPage = () => {
return ( return (
<> <>
<nav <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar">
className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top"
style={{ background: "#efefef !important" }}
>
<div className="container-fluid px-5 w-100"> <div className="container-fluid px-5 w-100">
<div className="row w-100"> <div className="row w-100">
<div className="col-md-auto"> <div className="col-md-auto d-flex justify-content-between align-items-center">
<a className="navbar-brand fw-bold text-primary" href="#"> <a className="navbar-brand fw-bold text-primary" href="#">
<span className="text-blue">OnField</span> <span className="text-blue">OnField</span>
<span>Work</span> <span>Work</span>
@ -26,19 +24,19 @@ const LandingPage = () => {
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#navbarNav" data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
> >
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
</div> </div>
{/* <div className=" col-6 collapse navbar-collapse justify-content-center">
<ul className="navbar-nav"></ul>
</div> */}
<div <div
className="d-flex collapse navbar-collapse justify-content-end col-md-auto" className="collapse navbar-collapse justify-content-end col-md-auto "
id="navbarNav" id="navbarNav"
> >
<ul className="navbar-nav align-items-center "> <ul className="navbar-nav">
<li className="nav-item"> <li className="nav-item">
<a className="nav-link" href="#"> <a className="nav-link" href="#">
Home Home
@ -669,51 +667,54 @@ const LandingPage = () => {
{/* <!-- Contact Section --> */} {/* <!-- Contact Section --> */}
<section <section
id="contact" id="contact"
class="section-py pt-5" className="section-py pt-5"
style={{ background: "#49bf3c" }} style={{ background: "#49bf3c" }}
> >
<div className="contact-section "> <div className="contact-section ">
<div class="row align-items-center"> <div className="row align-items-center">
<div class="col-lg-6 contact-img"> <div className="col-lg-6 contact-img">
<img <img
src="/img/illustrations/contact-us.png" src="/img/illustrations/contact-us.png"
alt="Contact Illustration" alt="Contact Illustration"
/> />
</div> </div>
<div class="col-lg-6 contact-text"> <div className="col-lg-6 contact-text">
<h2> <h2>
Contact <span class="text-success">Us</span> Contact <span className="text-success">Us</span>
</h2> </h2>
<p> <p>
Wed love to hear from you! Whether you have a question about Wed love to hear from you! Whether you have a question about
features, pricing, or anything else our team is ready to features, pricing, or anything else our team is ready to
answer all your queries. answer all your queries.
</p> </p>
<div class="row g-4 "> <div className="row g-4 ">
<div class="col-md-6 col-lg-12 col-xl-6"> <div className="col-md-6 col-lg-12 col-xl-6">
<div class="d-flex align-items-center"> <div className="d-flex align-items-center">
<div class="badge bg-label-primary rounded p-1_5 me-3"> <div className="badge bg-label-primary rounded p-1_5 me-3">
<i class="bx bx-envelope bx-lg"></i> <i className="bx bx-envelope bx-lg"></i>
</div> </div>
<div> <div>
<p class="mb-0 text-start">Email</p> <p className="mb-0 text-start">Email</p>
<h6 class="mb-0 text-start"> <h6 className="mb-0 text-start">
<a href="mailto:example@gmail.com" class="text-heading"> <a
href="mailto:example@gmail.com"
className="text-heading"
>
sales@marcoaiot.com sales@marcoaiot.com
</a> </a>
</h6> </h6>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-12 col-xl-6"> <div className="col-md-6 col-lg-12 col-xl-6">
<div class="d-flex align-items-center"> <div className="d-flex align-items-center">
<div class="badge bg-label-success rounded p-1_5 me-3"> <div className="badge bg-label-success rounded p-1_5 me-3">
<i class="bx bx-phone-call bx-lg"></i> <i className="bx bx-phone-call bx-lg"></i>
</div> </div>
<div className=""> <div className="">
<p class="mb-0 text-start">Phone</p> <p className="mb-0 text-start">Phone</p>
<h6 class="mb-0 text-start"> <h6 className="mb-0 text-start">
<a href="tel:+1234-568-963" class="text-heading"> <a href="tel:+1234-568-963" className="text-heading">
+91 70288 83755 +91 70288 83755
</a> </a>
</h6> </h6>
@ -722,7 +723,7 @@ const LandingPage = () => {
</div> </div>
</div> </div>
<div className="mt-5 pt-5"> <div className="mt-5 pt-5">
<a href="#" class="btn-green"> <a href="#" className="btn-green">
Know More Know More
</a> </a>
</div> </div>