pushing all files
This commit is contained in:
60
src/components/pages/homes/home-3/about.jsx
Normal file
60
src/components/pages/homes/home-3/about.jsx
Normal file
@ -0,0 +1,60 @@
|
||||
import Link from "next/link";
|
||||
import Count from "../../common/count";
|
||||
import image1 from "../../../../public/assets/img/about/about-5.jpg";
|
||||
import image2 from "../../../../public/assets/img/about/about-6.jpg";
|
||||
|
||||
const About = () => {
|
||||
const aboutData = {
|
||||
count: 149,
|
||||
exp: 'Years Experience Our Company',
|
||||
subtitle: 'About Us',
|
||||
title: 'Our Company Innovative Solutions',
|
||||
description: 'Pellentesque eget dictum est. Pellentesque blandit eget mauris ac faucibus. Curabitur varius a quam sit amet placerat. Pellentesque ut venenatis felis.Proin malesuada porttitor eros.',
|
||||
btn_title: 'Read More',
|
||||
btn_link: '/about-us',
|
||||
}
|
||||
return (
|
||||
<div className="about__three section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-5 col-lg-6 lg-mb-30">
|
||||
<div className="about__three-title">
|
||||
<span className="subtitle-three">{aboutData?.subtitle}</span>
|
||||
<h2>{aboutData?.title}</h2>
|
||||
<p>{aboutData?.description}</p>
|
||||
<div className="about__three-title-faq">
|
||||
<div className="about__three-title-faq-icon">
|
||||
<img className="icon-animation" src="assets/img/icon/question.png" alt="icon" />
|
||||
</div>
|
||||
<div className="about__three-title-faq-text">
|
||||
<span className="text-one">Have queries? Click below link</span>
|
||||
<h6><img className="dark-n" src="assets/img/icon/hand.png" alt="icon" />
|
||||
<img className="light-n" src="assets/img/icon/hand-light.png" alt="icon" /><Link href="/faq">FAQ</Link></h6>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="btn-seven" href={aboutData?.btn_link}>{aboutData?.btn_title}<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-7 col-lg-6">
|
||||
<div className="about__three-right">
|
||||
<div className="about__three-right-image dark__image">
|
||||
<div className="about__three-right-image-one">
|
||||
<img src={image1.src} alt="image" />
|
||||
</div>
|
||||
<img className="about__three-right-image-two" src={image2.src} alt="image" />
|
||||
</div>
|
||||
<div className="about__three-right-content">
|
||||
<div className="about__three-right-content-counter">
|
||||
<h1><Count number={aboutData?.count}/>k</h1>
|
||||
</div>
|
||||
<p>clients satisfaction survey in consulting organization</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
70
src/components/pages/homes/home-3/banner.jsx
Normal file
70
src/components/pages/homes/home-3/banner.jsx
Normal file
@ -0,0 +1,70 @@
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import ModalVideo from "react-modal-video";
|
||||
import { EffectFade, Autoplay, Pagination} from 'swiper/modules';
|
||||
import Link from 'next/link';
|
||||
import bannerBg from "../../../../public/assets/img/shape/banner-bg-3.jpg";
|
||||
import { useState } from 'react';
|
||||
|
||||
const BannerThree = () => {
|
||||
const slideControl = {
|
||||
loop: true,
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
autoplay: {
|
||||
delay: 4000,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".banner_pagination",
|
||||
clickable: true,
|
||||
},
|
||||
};
|
||||
const [openVideo, setOpenVideo] = useState(false);
|
||||
const openVideoModal = () => {
|
||||
setOpenVideo(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="banner__three" style={{backgroundImage: `url(${bannerBg.src})`}}>
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-5 col-lg-6 lg-mb-30">
|
||||
<div className="banner__three-title">
|
||||
<span>Success is Our Priority</span>
|
||||
<h1>Consulting for Your Business</h1>
|
||||
<p>Our experienced team provides solutions and guidance to help you achieve your business goals and drive success.</p>
|
||||
<div className="banner__three-title-bottom">
|
||||
<div className="banner__three-title-bottom-btn">
|
||||
<Link className="btn-seven" href="/services">Read More<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
<div className="banner__three-title-bottom-video">
|
||||
<div className="banner__three-title-bottom-video-icon">
|
||||
<span onClick={openVideoModal}><i className="fas fa-play"></i></span>
|
||||
</div>
|
||||
<h6>Watch the Consulting Video</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="banner_pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-7 col-lg-6">
|
||||
<div className="banner__three-image dark__image">
|
||||
<Swiper modules={[EffectFade, Autoplay, Pagination]} {...slideControl} >
|
||||
<SwiperSlide><img src="assets/img/banner/banner-7.jpg" alt="image" /></SwiperSlide>
|
||||
<SwiperSlide><img src="assets/img/banner/banner-8.jpg" alt="image" /></SwiperSlide>
|
||||
<SwiperSlide><img src="assets/img/banner/banner-9.jpg" alt="image" /></SwiperSlide>
|
||||
<SwiperSlide><img src="assets/img/banner/banner-10.jpg" alt="image" /></SwiperSlide>
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ModalVideo className='video-modal' channel="youtube" autoplay isOpen={openVideo} videoId="SZEflIVnhH8" onClose={() => setOpenVideo(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BannerThree;
|
||||
53
src/components/pages/homes/home-3/blog.jsx
Normal file
53
src/components/pages/homes/home-3/blog.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
import blogData from '@/src/components/data/blog-data';
|
||||
import Link from 'next/link';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const Blog = () => {
|
||||
const portfolioItem = blogData.slice(0, 3);
|
||||
const [active, setActive] = useState(1);
|
||||
const handelActive = (index) => {
|
||||
setActive(index);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="blog__three dark__image section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-end mb-45">
|
||||
<div className="col-xl-12">
|
||||
<div className="blog__three-title t-center">
|
||||
<span className="subtitle-three">From the blog</span>
|
||||
<h2>News & Articles</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{portfolioItem?.map((data, index) => (
|
||||
<div className="col-xl-4 col-lg-6 mt-25" key={index}>
|
||||
<div onMouseEnter={() => handelActive(index)}
|
||||
className={`blog__three-item ${ active === index ? "blog__three-item-hover" : "" }`}>
|
||||
<div className="blog__three-item-image">
|
||||
<Link href={`/blog/${data.id}`}><img src={data.image.src} alt="image" /></Link>
|
||||
</div>
|
||||
<div className="blog__three-item-content">
|
||||
<div className="blog__three-item-content-meta">
|
||||
<ul>
|
||||
<li><a href="#"><i className="far fa-user"></i>By-Admin</a></li>
|
||||
<li><a href="#"><i className="far fa-comment-dots"></i>Comments ({data.comment})</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h4><Link href={`/blog/${data.id}`}>{data.title}</Link></h4>
|
||||
<div className="blog__three-item-content-btn">
|
||||
<Link className="simple-btn-1" href={`/blog/${data.id}`}>Read More<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
61
src/components/pages/homes/home-3/choose-us.jsx
Normal file
61
src/components/pages/homes/home-3/choose-us.jsx
Normal file
@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
|
||||
const ChooseUs = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="chooseUs__area section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-center mb-70">
|
||||
<div className="col-xl-6 col-lg-7 lg-mb-20">
|
||||
<div className="chooseUs__area-title">
|
||||
<span className="subtitle-three">Why Choose Us</span>
|
||||
<h2>consultant's reputation is extremely important.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-5">
|
||||
<div className="chooseUs__area-right">
|
||||
<div className="chooseUs__area-right-counter">
|
||||
<h1><span className="counter">180</span>+</h1>
|
||||
<h6>Get International Award our company</h6>
|
||||
</div>
|
||||
<div className="chooseUs__area-right-shape">
|
||||
<img className="left-right-animate dark-n" src="/assets/img/shape/choose-us.png" alt="shape" />
|
||||
<img className="left-right-animate light-n" src="/assets/img/shape/choose-us-dark.png" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-6 xl-mb-30 dark__image">
|
||||
<img className="img-full" src="assets/img/pages/choose-us.jpg" alt="image" />
|
||||
</div>
|
||||
<div className="col-xl-6">
|
||||
<div className="row">
|
||||
<div className="col-sm-6 sm-mb-30">
|
||||
<div className="chooseUs__area-item">
|
||||
<div className="chooseUs__area-item-icon">
|
||||
<img src="assets/img/icon/choose-us-1.png" alt="icon" />
|
||||
</div>
|
||||
<h4>Strategic Planning</h4>
|
||||
<p>Praesent non varius leo. Cras est nisi, tincidunt vel ligula eu,</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-6">
|
||||
<div className="chooseUs__area-item">
|
||||
<div className="chooseUs__area-item-icon">
|
||||
<img src="assets/img/icon/choose-us-2.png" alt="icon" />
|
||||
</div>
|
||||
<h4>Data Analytics</h4>
|
||||
<p>Praesent non varius leo. Cras est nisi, tincidunt vel ligula eu,</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChooseUs;
|
||||
38
src/components/pages/homes/home-3/index.jsx
Normal file
38
src/components/pages/homes/home-3/index.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
import SEO from "@/src/components/data/seo";
|
||||
import HeaderThree from "../../../layout/header/header-three";
|
||||
|
||||
import SwitchTab from "../../common/dark-light";
|
||||
|
||||
|
||||
import About from "./about";
|
||||
import Services from "./services";
|
||||
import ChooseUs from "./choose-us";
|
||||
import Portfolio from "./portfolio";
|
||||
import Pricing from "./pricing";
|
||||
import Quote from "./quote";
|
||||
import Blog from "./blog";
|
||||
import BannerThree from "./banner";
|
||||
import ScrollToTop from "../../common/scroll/scroll-to-top";
|
||||
|
||||
const HomeThree = ({ addClass }) => {
|
||||
return (
|
||||
<>
|
||||
<SwitchTab addClass={addClass} />
|
||||
<SEO pageTitle="Business Solutions" />
|
||||
<HeaderThree />
|
||||
<BannerThree />
|
||||
<About />
|
||||
<Services />
|
||||
<ChooseUs />
|
||||
<Portfolio />
|
||||
<Pricing />
|
||||
<Quote />
|
||||
<Blog />
|
||||
<FooterThree />
|
||||
<ScrollToTop addClass={addClass} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeThree;
|
||||
32
src/components/pages/homes/home-3/portfolio.jsx
Normal file
32
src/components/pages/homes/home-3/portfolio.jsx
Normal file
@ -0,0 +1,32 @@
|
||||
import portfolioData from '@/src/components/data/portfolio-data';
|
||||
import portfolioBg from "../../../../public/assets/img/portfolio/portfolio.jpg";
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Portfolio = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="portfolio__three" style={{backgroundImage: `url(${portfolioBg.src})`}}>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
{portfolioData?.slice(0, 4)?.map((data, id) => (
|
||||
<div className="col-xl-3 col-md-6 portfolio-border" key={id}>
|
||||
<div className="project__area-item">
|
||||
<div className="project__area-item-content">
|
||||
<h4><Link href={`/portfolio/${data.id}`}>{data.title}</Link></h4>
|
||||
<span>{data.subtitle}</span>
|
||||
</div>
|
||||
<div className="project__area-item-icon">
|
||||
<Link href={`/portfolio/${data.id}`}><i className="far fa-arrow-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
24
src/components/pages/homes/home-3/pricing.jsx
Normal file
24
src/components/pages/homes/home-3/pricing.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import PricingPlansMain from '../../pricing-plans/pricing-plans';
|
||||
|
||||
const Pricing = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='pricing__area section-padding'>
|
||||
<div className="container">
|
||||
<div className="row mb-70">
|
||||
<div className="col-xl-12">
|
||||
<div className="pricing__area-title t-center">
|
||||
<span className="subtitle-three">Pricing Plan</span>
|
||||
<h2>Best Pricing Plan</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PricingPlansMain />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Pricing;
|
||||
65
src/components/pages/homes/home-3/quote.jsx
Normal file
65
src/components/pages/homes/home-3/quote.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
import React, { useState } from 'react';
|
||||
import quoteBg from "../../../../public/assets/img/pages/getInTouchThree.jpg";
|
||||
import ModalVideo from 'react-modal-video';
|
||||
|
||||
const Quote = () => {
|
||||
const [openVideo, setOpenVideo] = useState(false);
|
||||
const openVideoModal = () => {
|
||||
setOpenVideo(true);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="getIn__touch-three section-padding pb-0" style={{backgroundImage: `url(${quoteBg.src})`}}>
|
||||
<img className="getIn__touch-three-shape left-right-animate2" src="assets/img/shape/getInTouchThree.png" alt="shape" />
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-7 col-lg-7 lg-mb-50">
|
||||
<div className="getIn__touch-three-left">
|
||||
<div className="getIn__touch-three-left-title">
|
||||
<span className="subtitle-three">Request a Quote</span>
|
||||
<h2>Experience the Evolution of your Business</h2>
|
||||
<p>he world is changing, and so is your business. To stay relevant and successful, you need to evolve. </p>
|
||||
</div>
|
||||
<div className="getIn__touch-three-left-video">
|
||||
<div className="getIn__touch-three-left-video-icon video video-pulse">
|
||||
<span onClick={openVideoModal}><i className="fas fa-play"></i></span>
|
||||
</div>
|
||||
<div className="getIn__touch-three-left-video-text">
|
||||
<h4>Watch Consulting Video</h4>
|
||||
</div>
|
||||
<div className="getIn__touch-three-left-video-shape">
|
||||
<img src="assets/img/icon/getInTouchThree.png" alt="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-lg-5">
|
||||
<div className="getIn__touch-three-right">
|
||||
<h3>Free Consulting</h3>
|
||||
<div className="getIn__touch-three-right-form">
|
||||
<form action="#">
|
||||
<div className="mt-25">
|
||||
<input type="text" name="name" placeholder="Full Name" required="required" />
|
||||
</div>
|
||||
<div className="mt-25">
|
||||
<input type="email" name="email" placeholder="Email Address" required="required" />
|
||||
</div>
|
||||
<div className="mt-25">
|
||||
<textarea name="comments" placeholder="Massage..."></textarea>
|
||||
</div>
|
||||
<div className="mt-25">
|
||||
<button className="btn-seven" type="submit">Submit Now<i className="far fa-chevron-double-right"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ModalVideo className='video-modal' channel="youtube" autoplay isOpen={openVideo} videoId="SZEflIVnhH8" onClose={() => setOpenVideo(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Quote;
|
||||
76
src/components/pages/homes/home-3/services.jsx
Normal file
76
src/components/pages/homes/home-3/services.jsx
Normal file
@ -0,0 +1,76 @@
|
||||
import Link from 'next/link';
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectFade, Autoplay, Navigation} from 'swiper/modules';
|
||||
import servicesData from '@/src/components/data/services-data';
|
||||
|
||||
const Services = () => {
|
||||
const slideControl = {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
speed: 1500,
|
||||
autoplay: {
|
||||
delay: 6000,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.services__three-arrow-next',
|
||||
prevEl: '.services__three-arrow-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="services__three section-padding">
|
||||
<div className="container">
|
||||
<div className="row mb-70">
|
||||
<div className="col-xl-12">
|
||||
<div className="services__three-title">
|
||||
<span className="subtitle-three">Timely Solutions</span>
|
||||
<h2>Consulting Services</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-12 slider">
|
||||
<div className="services__three-arrow">
|
||||
<div className="services__three-arrow-prev mr-10"><i className="fal fa-long-arrow-left"></i></div>
|
||||
<div className="services__three-arrow-next"><i className="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
<Swiper modules={[EffectFade, Autoplay, Navigation]} {...slideControl} >
|
||||
{servicesData?.map((data, id) => (
|
||||
<SwiperSlide key={id}>
|
||||
<div className="services__three-item">
|
||||
<img src={data.image.src} alt="image" />
|
||||
<div className="services__three-item-content">
|
||||
<div className="services__three-item-content-icon">
|
||||
{data.icon}
|
||||
</div>
|
||||
<h4><Link href={`/services/${data.id}`}>{data.title}</Link></h4>
|
||||
<p>{data.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
Reference in New Issue
Block a user