pushing all files
This commit is contained in:
74
src/components/pages/homes/home-2/about.jsx
Normal file
74
src/components/pages/homes/home-2/about.jsx
Normal file
@ -0,0 +1,74 @@
|
||||
import shape1 from "../../../../public/assets/img/shape/about.png";
|
||||
import shape2 from "../../../../public/assets/img/shape/about-dark.png";
|
||||
import image1 from "../../../../public/assets/img/about/about-3.jpg";
|
||||
import image2 from "../../../../public/assets/img/about/about-4.jpg";
|
||||
import avatar from "../../../../public/assets/img/avatar/avatar-1.jpg";
|
||||
import Count from "../../common/count";
|
||||
import Link from "next/link";
|
||||
|
||||
const About = () => {
|
||||
const aboutData = {
|
||||
subtitle: 'About Company',
|
||||
title: 'Business consulting provide specialized',
|
||||
description: 'Aliquam volutpat diam a orci euismod ornare. Suspendisse quis massa justo. Suspendisse tortor lacus, tincidunt ut ex a, pretium lobortis sapien. Vestibulum rutrum pharetra ex,',
|
||||
count: 32,
|
||||
exp: 'Years Experience on Business Consulting',
|
||||
btn_title: 'Discover More',
|
||||
btn_link: '/about',
|
||||
author_name: 'Nguyen, Shane',
|
||||
author_sub: 'Founder CEO',
|
||||
}
|
||||
return (
|
||||
<div className="about__two dark__image section-padding">
|
||||
<img className="about__two-shape dark-n" src={shape1.src} alt="shape" />
|
||||
<img className="about__two-shape light-n" src={shape2.src} alt="shape" />
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-7 col-lg-6 lg-mb-30">
|
||||
<div className="row">
|
||||
<div className="col-6">
|
||||
<img src={image1.src} alt="image" />
|
||||
</div>
|
||||
<div className="col-6 mt-95 sm-mt-55">
|
||||
<img src={image2.src} alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-lg-6">
|
||||
<div className="about__two-right">
|
||||
<div className="about__two-right-title">
|
||||
<span className="subtitle-two">{aboutData?.subtitle}</span>
|
||||
<h2>{aboutData?.title}</h2>
|
||||
<p>{aboutData?.description}</p>
|
||||
</div>
|
||||
<div className="about__two-right-experience">
|
||||
<div className="about__two-right-experience-counter">
|
||||
<h1><Count number={aboutData?.count}/>+</h1>
|
||||
</div>
|
||||
<div>
|
||||
<h6>{aboutData?.exp}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about__two-right-btn">
|
||||
<div>
|
||||
<Link className="btn-six" href={aboutData?.btn_link}>{aboutData?.btn_title}<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
<div className="about__two-right-btn-author">
|
||||
<div className="about__two-right-btn-author-avatar">
|
||||
<img src={avatar.src} alt="about-avatar" />
|
||||
</div>
|
||||
<div className="about__two-right-btn-author-name">
|
||||
<span className="text-one">{aboutData?.author_name}</span>
|
||||
<h6>{aboutData?.author_sub}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
78
src/components/pages/homes/home-2/banner.jsx
Normal file
78
src/components/pages/homes/home-2/banner.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import ModalVideo from "react-modal-video";
|
||||
import { EffectFade, Autoplay, Navigation} from 'swiper/modules';
|
||||
import Link from 'next/link';
|
||||
import bannerBg1 from "../../../../public/assets/img/banner/banner-3.jpg";
|
||||
import bannerBg2 from "../../../../public/assets/img/banner/banner-4.jpg";
|
||||
|
||||
const BannerTwo = () => {
|
||||
const slideControl = {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
effect: "fade",
|
||||
autoplay: {
|
||||
delay: 6000,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".banner__two-arrow-next",
|
||||
prevEl: ".banner__two-arrow-prev",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="banner__two swiper banner-two-slider">
|
||||
<Swiper modules={[EffectFade, Autoplay, Navigation]} {...slideControl} >
|
||||
<SwiperSlide>
|
||||
<div className="banner__two-image" style={{backgroundImage: `url(${bannerBg1.src})`}}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="banner__two-content">
|
||||
<b className="subtitle">Conbix</b>
|
||||
<span>Welcome Our Company</span>
|
||||
<h1>grow a businesses increase their revenue</h1>
|
||||
<div className="banner__two-content-button">
|
||||
<Link className="btn-five" href="/portfolio/3-columns">Let's Recent Works<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
<img className="banner__two-image-shape-one" src="assets/img/shape/banner-1.png" alt="shape" />
|
||||
</div>
|
||||
<img className="banner__two-image-shape-two" src="assets/img/shape/banner-2.png" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="banner__two-image" style={{backgroundImage: `url(${bannerBg2.src})`}}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="banner__two-content">
|
||||
<b className="subtitle">Conbix</b>
|
||||
<span>Welcome Our Company</span>
|
||||
<h1>Consulting Business can transform quickly</h1>
|
||||
<div className="banner__two-content-button">
|
||||
<Link className="btn-five" href="/portfolio/3-columns">Let's Recent Works<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
<img className="banner__two-image-shape-one" src="assets/img/shape/banner-1.png" alt="shape" />
|
||||
</div>
|
||||
<img className="banner__two-image-shape-two" src="assets/img/shape/banner-2.png" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div className="banner__two-arrow">
|
||||
<div className="banner__two-arrow-prev"><i className="fal fa-long-arrow-left"></i></div>
|
||||
<div className="banner__two-arrow-next"><i className="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BannerTwo;
|
||||
56
src/components/pages/homes/home-2/blog.jsx
Normal file
56
src/components/pages/homes/home-2/blog.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import blogData from '@/src/components/data/blog-data';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Blog = () => {
|
||||
const blogItem = blogData.slice(0, 3);
|
||||
const blogContent = {
|
||||
subtitle: 'From The Blog',
|
||||
title: 'Blog & Articles',
|
||||
btn_text: 'See more blog',
|
||||
btn_url: '/blog'
|
||||
}
|
||||
return (
|
||||
<div className="blog__two dark__image section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-end mb-45">
|
||||
<div className="col-xl-7 col-lg-8 lg-mb-30">
|
||||
<div className="blog__two-title lg-t-center">
|
||||
<span className="subtitle-two">{blogContent.subtitle}</span>
|
||||
<h2>{blogContent.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-lg-4 t-right lg-t-center">
|
||||
<Link className="btn-six" href={blogContent.btn_url}>{blogContent.btn_text}<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{blogItem?.map((data, id) => (
|
||||
<div className="col-xl-4 col-lg-6 mt-25" key={id}>
|
||||
<div className="blog__two-item">
|
||||
<div className="blog__two-item-image">
|
||||
<Link href={`/blog/${data.id}`}><img src={data.image.src} alt="image" /></Link>
|
||||
<div className="blog__two-item-image-date">
|
||||
<span className="text-three">{data.date}</span>
|
||||
<span className="text-five">Mar</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog__two-item-content">
|
||||
<div className="blog__two-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>
|
||||
<Link className="btn-six" href={`/blog/${data.id}`}>Read More<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
35
src/components/pages/homes/home-2/consulting.jsx
Normal file
35
src/components/pages/homes/home-2/consulting.jsx
Normal file
@ -0,0 +1,35 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
const Consulting = () => {
|
||||
return (
|
||||
<div className="consulting__area section-padding">
|
||||
<img className="consulting__area-shape dark-n" src="assets/img/shape/consulting.png" alt="shape" />
|
||||
<img className="consulting__area-shape light-n" src="assets/img/shape/consulting-dark.png" alt="shape" />
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-7 col-lg-6 lg-mb-30">
|
||||
<div className="consulting__area-image dark__image">
|
||||
<img src="assets/img/pages/consulting.jpg" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-lg-6">
|
||||
<div className="consulting__area-right">
|
||||
<div className="consulting__area-right-title">
|
||||
<span className="subtitle-two">Premium Services</span>
|
||||
<h2>Sharing expertise Building relationships</h2>
|
||||
<p>Maecenas vitae lacinia arcu, nec dignissim metus. In consequat odio elit, at dapibus sapien suscipit in. Nam fringilla mi at mollis laoreet.</p>
|
||||
</div>
|
||||
<div className="consulting__area-right-list">
|
||||
<span><i className="far fa-check"></i>Teaching and training employees.</span>
|
||||
<span><i className="far fa-check"></i>Project management consulting.</span>
|
||||
</div>
|
||||
<Link className="btn-six" href="contact">Contact Us<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Consulting;
|
||||
38
src/components/pages/homes/home-2/index.jsx
Normal file
38
src/components/pages/homes/home-2/index.jsx
Normal file
@ -0,0 +1,38 @@
|
||||
"use client"
|
||||
import SEO from "@/src/components/data/seo";
|
||||
import HeaderTwo from "@/components/layout/headers/header-two";
|
||||
import FooterTwo from "@/components/layout/footers/footer-two";
|
||||
import BannerTwo from "./banner";
|
||||
import SwitchTab from "../../common/dark-light";
|
||||
import Services from "./services";
|
||||
import About from "./about";
|
||||
import Video from "./video";
|
||||
import Work from "./work";
|
||||
import Consulting from "./consulting";
|
||||
import Portfolio from "./portfolio";
|
||||
import Team from "./team";
|
||||
import Blog from "./blog";
|
||||
import ScrollToTop from "../../common/scroll/scroll-to-top";
|
||||
|
||||
const HomeTwo = ({addClass}) => {
|
||||
return (
|
||||
<>
|
||||
<SEO pageTitle="Consulting Business" />
|
||||
<SwitchTab addClass={addClass} />
|
||||
<HeaderTwo />
|
||||
<BannerTwo />
|
||||
<Services />
|
||||
<About />
|
||||
<Video />
|
||||
<Work />
|
||||
<Consulting />
|
||||
<Portfolio />
|
||||
<Team />
|
||||
<Blog />
|
||||
<FooterTwo />
|
||||
<ScrollToTop addClass={addClass} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeTwo;
|
||||
36
src/components/pages/homes/home-2/portfolio.jsx
Normal file
36
src/components/pages/homes/home-2/portfolio.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import portfolioData from '@/src/components/data/portfolio-data';
|
||||
|
||||
const Portfolio = () => {
|
||||
const portfolioItem = portfolioData.slice(0, 4);
|
||||
const [active, setActive] = useState(2);
|
||||
const handelActive = (index) => {
|
||||
setActive(index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="portfolio dark__image">
|
||||
{portfolioItem?.map((data, index) => (
|
||||
<div
|
||||
onMouseEnter={() => handelActive(index)}
|
||||
className={`portfolio-item ${ active === index ? "active" : "" }`}
|
||||
key={index}
|
||||
>
|
||||
<img src={data.image.src} alt="image" />
|
||||
<div className="portfolio-item-inner">
|
||||
<div className="portfolio-item-inner-title">
|
||||
<h4><Link href={`/portfolio/${data.id}`}>{data.title}</Link></h4>
|
||||
<span>{data.subtitle}</span>
|
||||
</div>
|
||||
<div className="portfolio-item-inner-icon">
|
||||
<Link href={`/portfolio/${data.id}`}><i className="fal fa-long-arrow-up"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
83
src/components/pages/homes/home-2/services.jsx
Normal file
83
src/components/pages/homes/home-2/services.jsx
Normal file
@ -0,0 +1,83 @@
|
||||
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: 4,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
speed: 1500,
|
||||
autoplay: {
|
||||
delay: 6000,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.services__two-arrow-next',
|
||||
prevEl: '.services__two-arrow-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
576: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
1400: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
}
|
||||
};
|
||||
const serviceIdsToDisplay = ['6', '1', '2', '3', '4'];
|
||||
const servicesItem = servicesData.filter(service => serviceIdsToDisplay.includes(service.number));
|
||||
|
||||
return (
|
||||
<div className="services__two section-padding pb-0">
|
||||
<div className="container">
|
||||
<div className="row mb-70 align-items-end">
|
||||
<div className="col-xl-8 col-sm-8 lg-mb-30">
|
||||
<div className="services__two-title sm-t-center">
|
||||
<span className="subtitle-two">Our Solutions</span>
|
||||
<h2>Popular Services</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4 col-sm-4">
|
||||
<div className="services__two-arrow t-right sm-t-center">
|
||||
<div className="services__two-arrow-prev mr-10"><i className="fal fa-long-arrow-left"></i></div>
|
||||
<div className="services__two-arrow-next"><i className="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<Swiper modules={[EffectFade, Autoplay, Navigation]} {...slideControl} >
|
||||
{servicesItem?.map((data, id) => (
|
||||
<SwiperSlide key={id}>
|
||||
<div className="services__two-item" style={{backgroundImage: `url(${data.image.src})`}}>
|
||||
<div className="services__two-item-content">
|
||||
<div className="services__two-item-content-icon">
|
||||
{data.icon}
|
||||
</div>
|
||||
<h4><Link href={`/services/${data.id}`}>{data.title}</Link></h4>
|
||||
<p>{data.description.split(' ').slice(0, 6).join(' ')}</p>
|
||||
<Link className="simple-btn-2" href={`/services/${data.id}`}>Read More<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
50
src/components/pages/homes/home-2/team.jsx
Normal file
50
src/components/pages/homes/home-2/team.jsx
Normal file
@ -0,0 +1,50 @@
|
||||
import teamData from "@/src/components/data/team-data";
|
||||
import Link from "next/link";
|
||||
|
||||
|
||||
const Team = () => {
|
||||
const teamsItem = teamData.slice(0, 4);
|
||||
const teamContent = {
|
||||
subtitle: 'Our Team Member',
|
||||
title: 'Our Specialist',
|
||||
}
|
||||
return (
|
||||
<div className="team__area dark__image section-padding pb-0">
|
||||
<div className="container">
|
||||
<div className="row mb-35">
|
||||
<div className="team__area-title t-center">
|
||||
<span className="subtitle-two">{teamContent.subtitle}</span>
|
||||
<h2>{teamContent.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{teamsItem?.map((data, id) => (
|
||||
<div className="col-xl-3 col-md-6 mt-25" key={id}>
|
||||
<div className="team__area-item">
|
||||
<div className="team__area-item-image">
|
||||
<img src={data.image.src} alt="image" />
|
||||
<div className="team__area-item-image-icon">
|
||||
<div className="team__area-item-image-social">
|
||||
<ul>
|
||||
{data.social_link.map((social, id) => (
|
||||
<li key={id}><Link href={social.link} target={social.target}>{social.icon}</Link></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<span><i className="fas fa-share-alt"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="team__area-item-content">
|
||||
<h5><Link href={`/team/${data.id}`}>{data.name}</Link></h5>
|
||||
<span>{data.position}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Team;
|
||||
42
src/components/pages/homes/home-2/video.jsx
Normal file
42
src/components/pages/homes/home-2/video.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import ModalVideo from "react-modal-video";
|
||||
import videoBg from "../../../../public/assets/img//pages/solution.jpg";
|
||||
|
||||
|
||||
const Video = () => {
|
||||
const [openVideo, setOpenVideo] = useState(false);
|
||||
const openVideoModal = () => {
|
||||
setOpenVideo(true);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="solution__area section-padding" style={{backgroundImage: `url(${videoBg.src})`}}>
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-9">
|
||||
<div className="solution__area-title">
|
||||
<span className="subtitle-two">Digital Solution</span>
|
||||
<h1>Good business planning ensure success.</h1>
|
||||
<Link className="btn-five" href="/request-quote">Request Quote<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3">
|
||||
<div className="solution__area-right">
|
||||
<div className="solution__area-right-video">
|
||||
<div className="solution__area-right-icon video video-pulse">
|
||||
<span onClick={openVideoModal}><i className="fas fa-play"></i></span>
|
||||
</div>
|
||||
<h6>Watch The Consulting Video</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ModalVideo className='video-modal' channel="youtube" autoplay isOpen={openVideo} videoId="SZEflIVnhH8" onClose={() => setOpenVideo(false)} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Video;
|
||||
58
src/components/pages/homes/home-2/work.jsx
Normal file
58
src/components/pages/homes/home-2/work.jsx
Normal file
@ -0,0 +1,58 @@
|
||||
import React from 'react';
|
||||
|
||||
const Work = () => {
|
||||
return (
|
||||
<div className="work__area section-padding pb-0">
|
||||
<div className="container">
|
||||
<div className="row mb-70">
|
||||
<div className="col-xl-12">
|
||||
<div className="work__area-title t-center">
|
||||
<span className="subtitle-two">Work Process</span>
|
||||
<h2>Our Solution Process</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-3 col-sm-6 xl-mb-30">
|
||||
<div className="work__area-item">
|
||||
<span>01</span>
|
||||
<h6>Identifying problems</h6>
|
||||
<p>Aenean pretium condimentum ornare. Curabitur</p>
|
||||
<img className="work__area-item-arrow sm-display-n dark-n" src="assets/img/icon/arrow-1.png" alt="shape" />
|
||||
<img className="work__area-item-arrow sm-display-n light-n" src="assets/img/icon/arrow-1-dark.png" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3 col-sm-6 sm-mb-30">
|
||||
<div className="work__area-item">
|
||||
<span>02</span>
|
||||
<h6>Research your Problem</h6>
|
||||
<p>Aenean pretium condimentum ornare. Curabitur</p>
|
||||
<img className="work__area-item-arrow xl-display-n dark-n" src="assets/img/icon/arrow-2.png" alt="shape" />
|
||||
<img className="work__area-item-arrow xl-display-n light-n" src="assets/img/icon/arrow-2-dark.png" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3 col-sm-6 sm-mb-30">
|
||||
<div className="work__area-item">
|
||||
<span>03</span>
|
||||
<h6>Solutions your Problem</h6>
|
||||
<p>Aenean pretium condimentum ornare. Curabitur</p>
|
||||
<img className="work__area-item-arrow xl-display-n dark-n" src="assets/img/icon/arrow-1.png" alt="shape" />
|
||||
<img className="work__area-item-arrow xl-display-n light-n" src="assets/img/icon/arrow-1-dark.png" alt="shape" />
|
||||
<img className="work__area-item-arrow display-n xl-display-b sm-display-n dark-n" src="assets/img/icon/arrow-2.png" alt="shape" />
|
||||
<img className="work__area-item-arrow display-n xl-display-b sm-display-n light-n" src="assets/img/icon/arrow-2-dark.png" alt="shape" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-3 col-sm-6">
|
||||
<div className="work__area-item">
|
||||
<span>04</span>
|
||||
<h6>Consultation with experts</h6>
|
||||
<p>Aenean pretium condimentum ornare. Curabitur</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Work;
|
||||
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;
|
||||
277
src/components/pages/homes/home/about.jsx
Normal file
277
src/components/pages/homes/home/about.jsx
Normal file
@ -0,0 +1,277 @@
|
||||
// "use client"
|
||||
// import shape1 from "../../../../public/assets/img/shape/about-1.png";
|
||||
// import shape2 from "../../../../public/assets/img/shape/about-1-dark.png";
|
||||
// import shape3 from "../../../../public/assets/img/shape/about-2.png";
|
||||
// import shape4 from "../../../../public/assets/img/shape/about-2-dark.png";
|
||||
// import image2 from "../../../../public/assets/img/about/partners.jpg";
|
||||
// import image1 from "../../../../public/assets/img/about/bkpartners1.png";
|
||||
// import avatar from "../../../../public/assets/img/avatar/avatar-1.jpg";
|
||||
// import Count from "../../common/count";
|
||||
// import Link from "next/link";
|
||||
|
||||
// const About = () => {
|
||||
// const aboutData = {
|
||||
// count: 32,
|
||||
// exp: 'Years Experience Our Company',
|
||||
// subtitle: 'About PEI',
|
||||
// title: 'Pure Earth International is the leading distribution services.',
|
||||
// description: 'Aliquam volutpat diam a orci euismod ornare. Suspendisse quis massa justo. Suspendisse tortor lacus, tincidunt ut ex a, pretium lobortis sapien. Vestibulum rutrum pharetra ex.',
|
||||
// author_name: 'Nguyen, Shane',
|
||||
// author_sub: 'Founder CEO',
|
||||
// btn_title: 'Discover More',
|
||||
// btn_link: '/about'
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div className="about__one dark__image section-padding" style={{ position: 'relative' }}>
|
||||
// <style jsx>{`
|
||||
// .about-container {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: center;
|
||||
// gap: 50px;
|
||||
// }
|
||||
// .about-left, .about-right {
|
||||
// flex: 1 1 45%;
|
||||
// }
|
||||
// .about-left img {
|
||||
// width: 100%;
|
||||
// display: block;
|
||||
// border-radius: 10px;
|
||||
// margin-bottom: 15px;
|
||||
// }
|
||||
// .about-left-experience {
|
||||
// background: #fff;
|
||||
// padding: 20px;
|
||||
// border-radius: 10px;
|
||||
// text-align: center;
|
||||
// margin-top: 20px;
|
||||
// }
|
||||
// .about-left-experience h1 {
|
||||
// color: #F94C30;
|
||||
// font-size: 36px;
|
||||
// margin: 0;
|
||||
// }
|
||||
// .about-left-experience h6 {
|
||||
// margin: 5px 0 0;
|
||||
// font-weight: 500;
|
||||
// color: #333;
|
||||
// }
|
||||
// .about-right h2 {
|
||||
// color: #F94C30;
|
||||
// margin-bottom: 15px;
|
||||
// }
|
||||
// .about-right p {
|
||||
// line-height: 1.6;
|
||||
// margin-bottom: 20px;
|
||||
// color: #333;
|
||||
// }
|
||||
// .about-right-btn .btn-one {
|
||||
// background: #F94C30;
|
||||
// color: #fff;
|
||||
// padding: 10px 25px;
|
||||
// border-radius: 5px;
|
||||
// text-decoration: none;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
// .about-shape {
|
||||
// position: absolute;
|
||||
// z-index: 0;
|
||||
// }
|
||||
// @media (max-width: 991px) {
|
||||
// .about-container {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
// .about-left, .about-right {
|
||||
// flex: 1 1 100%;
|
||||
// }
|
||||
// .about-left-experience {
|
||||
// margin: 20px auto 0;
|
||||
// }
|
||||
// }
|
||||
// `}</style>
|
||||
|
||||
// <div className="container">
|
||||
// <div className="about-container">
|
||||
// <div className="about-left">
|
||||
// <img src={image1.src} alt="About Image 1" />
|
||||
// <img src={image2.src} alt="About Image 2" />
|
||||
// <div className="about-left-experience">
|
||||
// <h1><Count number={aboutData.count} />+</h1>
|
||||
// <h6>{aboutData.exp}</h6>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="about-right">
|
||||
// <span className="subtitle-one">{aboutData.subtitle}</span>
|
||||
// <h2>{aboutData.title}</h2>
|
||||
// <p>{aboutData.description}</p>
|
||||
// <div className="about-right-btn">
|
||||
// <Link href={aboutData.btn_link} className="btn-one">
|
||||
// {aboutData.btn_title} <i className="far fa-chevron-double-right"></i>
|
||||
// </Link>
|
||||
// </div>
|
||||
// <div className="about-author" style={{ display: 'flex', alignItems: 'center', marginTop: '20px' }}>
|
||||
// <img src={avatar.src} alt="Author" style={{ width: '60px', borderRadius: '50%', marginRight: '15px' }} />
|
||||
// <div>
|
||||
// <span style={{ fontWeight: 500 }}>{aboutData.author_name}</span>
|
||||
// <h6 style={{ margin: 0 }}>{aboutData.author_sub}</h6>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// <img className="about-shape" style={{ top: '-50px', left: '-50px' }} src={shape1.src} alt="Shape 1" />
|
||||
// <img className="about-shape" style={{ top: '-50px', left: '-50px' }} src={shape2.src} alt="Shape 2" />
|
||||
// <img className="about-shape" style={{ bottom: '-50px', right: '-50px' }} src={shape3.src} alt="Shape 3" />
|
||||
// <img className="about-shape" style={{ bottom: '-50px', right: '-50px' }} src={shape4.src} alt="Shape 4" />
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default About;
|
||||
|
||||
|
||||
|
||||
|
||||
"use client";
|
||||
import Count from "../../common/count";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
const About = () => {
|
||||
const aboutData = {
|
||||
count: 32,
|
||||
exp: "Years Experience Our Company",
|
||||
subtitle: "About PEI",
|
||||
title: "Pure Earth International is the leading distribution services.",
|
||||
description:
|
||||
"Aliquam volutpat diam a orci euismod ornare. Suspendisse quis massa justo. Suspendisse tortor lacus, tincidunt ut ex a, pretium lobortis sapien. Vestibulum rutrum pharetra ex.",
|
||||
author_name: "Nguyen, Shane",
|
||||
author_sub: "Founder CEO",
|
||||
btn_title: "Discover More",
|
||||
btn_link: "/about",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="about__one dark__image section-padding" style={{ position: "relative" }}>
|
||||
<style jsx>{`
|
||||
.about-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 50px;
|
||||
}
|
||||
.about-left,
|
||||
.about-right {
|
||||
flex: 1 1 45%;
|
||||
}
|
||||
.about-left img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.about-left-experience {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.about-left-experience h1 {
|
||||
color: #f94c30;
|
||||
font-size: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
.about-left-experience h6 {
|
||||
margin: 5px 0 0;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.about-right h2 {
|
||||
color: #f94c30;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.about-right p {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.about-right-btn .btn-one {
|
||||
background: #f94c30;
|
||||
color: #fff;
|
||||
padding: 10px 25px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
.about-shape {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
.about-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.about-left,
|
||||
.about-right {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
.about-left-experience {
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
|
||||
<div className="container">
|
||||
<div className="about-container">
|
||||
<div className="about-left">
|
||||
<Image src="/assets/img/about/bkpartners1.png" alt="About Image 1" width={600} height={400} />
|
||||
<Image src="/assets/img/about/partners.jpg" alt="About Image 2" width={600} height={400} />
|
||||
<div className="about-left-experience">
|
||||
<h1>
|
||||
<Count number={aboutData.count} />+
|
||||
</h1>
|
||||
<h6>{aboutData.exp}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div className="about-right">
|
||||
<span className="subtitle-one">{aboutData.subtitle}</span>
|
||||
<h2>{aboutData.title}</h2>
|
||||
<p>{aboutData.description}</p>
|
||||
<div className="about-right-btn">
|
||||
<Link href={aboutData.btn_link} className="btn-one">
|
||||
{aboutData.btn_title} <i className="far fa-chevron-double-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
className="about-author"
|
||||
style={{ display: "flex", alignItems: "center", marginTop: "20px" }}
|
||||
>
|
||||
<Image
|
||||
src="/assets/img/avatar/avatar-1.jpg"
|
||||
alt="Author"
|
||||
width={60}
|
||||
height={60}
|
||||
style={{ borderRadius: "50%", marginRight: "15px" }}
|
||||
/>
|
||||
<div>
|
||||
<span style={{ fontWeight: 500 }}>{aboutData.author_name}</span>
|
||||
<h6 style={{ margin: 0 }}>{aboutData.author_sub}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Shapes */}
|
||||
<img className="about-shape" style={{ top: "-50px", left: "-50px" }} src="/assets/img/shape/about-1.png" alt="Shape 1" />
|
||||
<img className="about-shape" style={{ top: "-50px", left: "-50px" }} src="/assets/img/shape/about-1-dark.png" alt="Shape 2" />
|
||||
<img className="about-shape" style={{ bottom: "-50px", right: "-50px" }} src="/assets/img/shape/about-2.png" alt="Shape 3" />
|
||||
<img className="about-shape" style={{ bottom: "-50px", right: "-50px" }} src="/assets/img/shape/about-2-dark.png" alt="Shape 4" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
190
src/components/pages/homes/home/banner.jsx
Normal file
190
src/components/pages/homes/home/banner.jsx
Normal file
@ -0,0 +1,190 @@
|
||||
// import { useState } from "react";
|
||||
// import { Swiper, SwiperSlide } from "swiper/react";
|
||||
// import { EffectFade, Autoplay, Pagination } from 'swiper/modules';
|
||||
// import slider1 from "../../../../public/assets/img/banner/homepageslider/nimage_9_peidistribution_vertiv_roadshow.jpg";
|
||||
// import slider2 from "../../../../public/assets/img/banner/homepageslider/nimage_6_SLIDER_AWARD.png";
|
||||
// import ModalVideo from "react-modal-video";
|
||||
// import Link from "next/link";
|
||||
|
||||
// const slideControl = {
|
||||
// loop: true,
|
||||
// slidesPerView: 1,
|
||||
// effect: "fade",
|
||||
// autoplay: {
|
||||
// delay: 6000,
|
||||
// reverseDirection: false,
|
||||
// disableOnInteraction: false,
|
||||
// },
|
||||
// pagination: {
|
||||
// el: ".banner_pagination",
|
||||
// clickable: true,
|
||||
// },
|
||||
// };
|
||||
|
||||
// const BannerOne = () => {
|
||||
// const [openVideo, setOpenVideo] = useState(false);
|
||||
// const openVideoModal = () => {
|
||||
// setOpenVideo(true);
|
||||
// };
|
||||
// return (
|
||||
// <>
|
||||
// <div className="banner__one">
|
||||
// <Swiper modules={[EffectFade, Autoplay, Pagination]} {...slideControl} >
|
||||
// <SwiperSlide>
|
||||
// <div className="banner__one-image" style={{ backgroundImage: `url(${slider2.src})` }}>
|
||||
// <div className="container">
|
||||
// <div className="row">
|
||||
// <div className="col-xl-12">
|
||||
// <div className="banner__one-content">
|
||||
// <span>Welcome to PEI</span>
|
||||
// <h1>For information technology</h1>
|
||||
// <div className="banner__one-content-button">
|
||||
// <div className="banner__one-content-button-item">
|
||||
// <Link className="btn-one" href="/about">Become a Reseller Today<i className="far fa-chevron-double-right"></i></Link>
|
||||
// </div>
|
||||
// <div className="banner__one-content-video-icon">
|
||||
// <span onClick={openVideoModal}><i className="fas fa-play"></i></span>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </SwiperSlide>
|
||||
// <SwiperSlide>
|
||||
// <div className="banner__one-image" style={{ backgroundImage: `url(${slider1.src})` }}>
|
||||
// <div className="container">
|
||||
// <div className="row">
|
||||
// <div className="col-xl-12">
|
||||
// <div className="banner__one-content">
|
||||
// <span>Welcome to PEI</span>
|
||||
// <h1>Data center power & telecoms producte</h1>
|
||||
// <div className="banner__one-content-button">
|
||||
// <div className="banner__one-content-button-item">
|
||||
// <Link className="btn-one" href="/about">Become a Reseller Today<i className="far fa-chevron-double-right"></i></Link>
|
||||
// </div>
|
||||
// <div className="banner__one-content-video-icon">
|
||||
// <span onClick={openVideoModal}><i className="fas fa-play"></i></span>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </SwiperSlide>
|
||||
// </Swiper>
|
||||
// <div className="banner__one-pagination">
|
||||
// <div className="container">
|
||||
// <div className="area">
|
||||
// <div className="banner_pagination"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <ModalVideo className='video-modal' channel="youtube" autoplay isOpen={openVideo} videoId="SZEflIVnhH8" onClose={() => setOpenVideo(false)} />
|
||||
// </>
|
||||
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default BannerOne;
|
||||
|
||||
|
||||
|
||||
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectFade, Autoplay, Pagination } from "swiper/modules";
|
||||
import ModalVideo from "react-modal-video";
|
||||
import Link from "next/link";
|
||||
|
||||
const slideControl = {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
effect: "fade",
|
||||
autoplay: {
|
||||
delay: 6000,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".banner_pagination",
|
||||
clickable: true,
|
||||
},
|
||||
};
|
||||
|
||||
const slides = [
|
||||
"/assets/img/banner/homepageslider/nimage_6_SLIDER_AWARD.png",
|
||||
"/assets/img/banner/homepageslider/nimage_9_peidistribution_vertiv_roadshow.jpg",
|
||||
];
|
||||
|
||||
const BannerOne = () => {
|
||||
const [openVideo, setOpenVideo] = useState(false);
|
||||
const openVideoModal = () => setOpenVideo(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="banner__one">
|
||||
<Swiper modules={[EffectFade, Autoplay, Pagination]} {...slideControl}>
|
||||
{slides.map((src, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<div
|
||||
className="banner__one-image"
|
||||
style={{ backgroundImage: `url(${src})` }}
|
||||
>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<div className="banner__one-content">
|
||||
<span>Welcome to PEI</span>
|
||||
<h1>
|
||||
{index === 0
|
||||
? "For information technology"
|
||||
: "Data center power & telecoms producte"}
|
||||
</h1>
|
||||
<div className="banner__one-content-button">
|
||||
<div className="banner__one-content-button-item">
|
||||
<Link className="btn-one" href="/about">
|
||||
Become a Reseller Today
|
||||
<i className="far fa-chevron-double-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="banner__one-content-video-icon">
|
||||
<span onClick={openVideoModal}>
|
||||
<i className="fas fa-play"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className="banner__one-pagination">
|
||||
<div className="container">
|
||||
<div className="area">
|
||||
<div className="banner_pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModalVideo
|
||||
className="video-modal"
|
||||
channel="youtube"
|
||||
autoplay
|
||||
isOpen={openVideo}
|
||||
videoId="SZEflIVnhH8"
|
||||
onClose={() => setOpenVideo(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BannerOne;
|
||||
56
src/components/pages/homes/home/blog.jsx
Normal file
56
src/components/pages/homes/home/blog.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
import blogData from '@/components/data/blog-data';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Blog = () => {
|
||||
const blogItem = blogData.slice(0, 3);
|
||||
const blogContent = {
|
||||
subtitle: 'From The Blog',
|
||||
title: 'Blog & Articles',
|
||||
btn_text: 'See more blog',
|
||||
btn_url: '/blog'
|
||||
}
|
||||
return (
|
||||
<div className="blog__one dark__image section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-end mb-45">
|
||||
<div className="col-xl-7 col-lg-8 lg-mb-30">
|
||||
<div className="blog__one-title lg-t-center">
|
||||
<span className="subtitle-one">{blogContent.subtitle}</span>
|
||||
<h2>{blogContent.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-lg-4 t-right lg-t-center">
|
||||
<Link className="btn-two" href={blogContent.btn_url}>{blogContent.btn_text}<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{blogItem?.map((data, id) => (
|
||||
<div className="col-xl-4 col-lg-6 mt-25" key={id}>
|
||||
<div className="blog__one-item">
|
||||
<div className="blog__one-item-image">
|
||||
<Link href={`/blog/${data.id}`}><img src={data.image.src} alt="blog" /></Link>
|
||||
<div className="blog__one-item-image-date">
|
||||
<span className="text-three">{data.date}</span>
|
||||
<span className="text-five">Apr</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="blog__one-item-content">
|
||||
<div className="blog__one-item-content-meta">
|
||||
<ul>
|
||||
<li><Link href="#"><i className="far fa-user"></i>By-Admin</Link></li>
|
||||
<li><Link href="#"><i className="far fa-comment-dots"></i>Comments ({data.comment})</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h4><Link href={`/blog/${data.id}`}>{data.title}</Link></h4>
|
||||
<p>{data.des}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
37
src/components/pages/homes/home/cta.jsx
Normal file
37
src/components/pages/homes/home/cta.jsx
Normal file
@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
|
||||
const CtaArea = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="cta__area">
|
||||
<div className="container">
|
||||
<div className="row cta__area-bg align-items-center">
|
||||
<div className="col-xxl-5 col-xl-4">
|
||||
<div className="cta__area-title">
|
||||
<h2>Get Free Quote</h2>
|
||||
<span className="text-two">Perfect solution for your company.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xxl-7 col-xl-8 pr-0">
|
||||
<div className="cta__area-form">
|
||||
<form>
|
||||
<div className="cta__area-form-item md-mb-30">
|
||||
<input type="text" name="name" placeholder="Full Name" required />
|
||||
</div>
|
||||
<div className="cta__area-form-item md-mb-30">
|
||||
<input type="email" name="email" placeholder="Email Address" required />
|
||||
</div>
|
||||
<div className="cta__area-form-item">
|
||||
<button className="btn-four" type="submit">Get Quote<i className="far fa-chevron-double-right"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CtaArea;
|
||||
140
src/components/pages/homes/home/experience.jsx
Normal file
140
src/components/pages/homes/home/experience.jsx
Normal file
@ -0,0 +1,140 @@
|
||||
// import Link from "next/link";
|
||||
// import image1 from "../../../../public/assets/img/pages/pimage_6_dlink.png";
|
||||
// import image2 from "../../../../public/assets/img/pages/nimage_15_estap.png";
|
||||
// import SkillBar from "../../common/skill-bar";
|
||||
// import SkillBarItem from "../../common/skill-bar";
|
||||
|
||||
// const Experience = () => {
|
||||
// const experienceContent = {
|
||||
// subtitle: 'Brand Success',
|
||||
// title: 'Video Conferecing Solutiones',
|
||||
// des: 'Browser viideo conferencing including cameres,roomsolutiones,,webbcams,headsets,collaaboration tools,and acceessories',
|
||||
// btn_text: 'Learn More',
|
||||
// btn_link: '/request-quote',
|
||||
// progress1: '60',
|
||||
// progress2: '85',
|
||||
// }
|
||||
// return (
|
||||
// <>
|
||||
// <div className="experience__area dark__image section-padding">
|
||||
// <div className="container">
|
||||
// <div className="row align-items-center">
|
||||
// <div className="col-xl-6 col-lg-6 lg-mb-30">
|
||||
// <div className="experience__area-image">
|
||||
// <img className="experience__area-image-shape left-right-animate" src="assets/img/shape/dots.png" alt="" />
|
||||
// <div className="experience__area-image-item">
|
||||
// <img src={image1.src} alt="image" />
|
||||
// </div>
|
||||
// <div className="experience__area-image-item mt-65">
|
||||
// <img src={image2.src} alt="image" />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="col-xl-6 col-lg-6">
|
||||
// <div className="experience__area-right">
|
||||
// <div className="experience__area-right-title">
|
||||
// <span className="subtitle-one">{experienceContent.subtitle}</span>
|
||||
// <h2>{experienceContent.title}</h2>
|
||||
// <p>{experienceContent.des}</p>
|
||||
// </div>
|
||||
// <div className="skill__area mt-30">
|
||||
// <div className="skill__area-item">
|
||||
// <div className="skill__area-item-content">
|
||||
// <span className="text-two">Business Consulting</span>
|
||||
// </div>
|
||||
// <div className="skill__area-item-inner">
|
||||
// <SkillBarItem countUp={experienceContent?.progress1} />
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="skill__area-item">
|
||||
// <div className="skill__area-item-content">
|
||||
// <span className="text-two">Human Resource</span>
|
||||
// </div>
|
||||
// <div className="skill__area-item-inner">
|
||||
// <SkillBarItem countUp={experienceContent?.progress2} />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <Link className="btn-two" href={experienceContent.btn_link}>{experienceContent.btn_text}<i className="far fa-chevron-double-right"></i></Link>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Experience;
|
||||
|
||||
|
||||
import Link from "next/link";
|
||||
import SkillBarItem from "../../common/skill-bar";
|
||||
|
||||
const Experience = () => {
|
||||
const experienceContent = {
|
||||
subtitle: "Brand Success",
|
||||
title: "Video Conferencing Solutions",
|
||||
des: "Browser video conferencing including cameras, room solutions, webcams, headsets, collaboration tools, and accessories",
|
||||
btn_text: "Learn More",
|
||||
btn_link: "/request-quote",
|
||||
progress1: "60",
|
||||
progress2: "85",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="experience__area dark__image section-padding">
|
||||
<div className="container">
|
||||
<div className="row align-items-center">
|
||||
<div className="col-xl-6 col-lg-6 lg-mb-30">
|
||||
<div className="experience__area-image">
|
||||
<img
|
||||
className="experience__area-image-shape left-right-animate"
|
||||
src="/assets/img/shape/dots.png"
|
||||
alt=""
|
||||
/>
|
||||
<div className="experience__area-image-item">
|
||||
<img src="/assets/img/pages/pimage_6_dlink.png" alt="image" />
|
||||
</div>
|
||||
<div className="experience__area-image-item mt-65">
|
||||
<img src="/assets/img/pages/nimage_15_estap.png" alt="image" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-6">
|
||||
<div className="experience__area-right">
|
||||
<div className="experience__area-right-title">
|
||||
<span className="subtitle-one">{experienceContent.subtitle}</span>
|
||||
<h2>{experienceContent.title}</h2>
|
||||
<p>{experienceContent.des}</p>
|
||||
</div>
|
||||
<div className="skill__area mt-30">
|
||||
<div className="skill__area-item">
|
||||
<div className="skill__area-item-content">
|
||||
<span className="text-two">Business Consulting</span>
|
||||
</div>
|
||||
<div className="skill__area-item-inner">
|
||||
<SkillBarItem countUp={experienceContent.progress1} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="skill__area-item">
|
||||
<div className="skill__area-item-content">
|
||||
<span className="text-two">Human Resource</span>
|
||||
</div>
|
||||
<div className="skill__area-item-inner">
|
||||
<SkillBarItem countUp={experienceContent.progress2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Link className="btn-two" href={experienceContent.btn_link}>
|
||||
{experienceContent.btn_text} <i className="far fa-chevron-double-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Experience;
|
||||
223
src/components/pages/homes/home/get-in-touch.jsx
Normal file
223
src/components/pages/homes/home/get-in-touch.jsx
Normal file
@ -0,0 +1,223 @@
|
||||
|
||||
// import Link from "next/link";
|
||||
// import bgImage from "../../../../public/assets/img/pages/getInTouch.jpg";
|
||||
|
||||
// const GetInTouch = () => {
|
||||
// const touchContent = {
|
||||
// subtitle: 'Get In Touch',
|
||||
// title: 'Free Consultation',
|
||||
// title2: 'We serving 30% Of Global 600 Companies',
|
||||
// des: 'Aenean A Felis Consequat, Varius Orci Ut, Varius Metus. Donec Iaculis Leo Turpis, Vitae Sagittis Massa Luctus Feugiat. Donec Vel Sodales Dui,',
|
||||
// }
|
||||
// return (
|
||||
// <>
|
||||
// <div className="getIn__touch section-padding" style={{backgroundImage: `url(${bgImage.src})`}}>
|
||||
// <img className="getIn__touch-shape left-right-animate2" src="assets/img/shape/getInTouch.png" alt="shape" />
|
||||
// <div className="container">
|
||||
// <div className="row">
|
||||
// <div className="col-xl-6 col-lg-5 lg-mb-30">
|
||||
// <div className="getIn__touch-left">
|
||||
// <div className="getIn__touch-left-title">
|
||||
// <span className="subtitle-one">{touchContent.subtitle}</span>
|
||||
// <h2>{touchContent.title}</h2>
|
||||
// </div>
|
||||
// <div className="getIn__touch-left-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">
|
||||
// <input type="text" name="subject" placeholder="Subject" required="required" />
|
||||
// </div>
|
||||
// <div className="mt-25">
|
||||
// <button className="btn-one" type="submit">Free Consulting</button>
|
||||
// </div>
|
||||
// </form>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="col-xl-6 col-lg-7">
|
||||
// <div className="getIn__touch-right">
|
||||
// <div className="getIn__touch-right-title">
|
||||
// <h2>{touchContent.title2}</h2>
|
||||
// <p>{touchContent.des}</p>
|
||||
// </div>
|
||||
// <div className="getIn__touch-right-bottom">
|
||||
// <div className="getIn__touch-right-bottom-text">
|
||||
// <h4>client satisfaction in the globaly</h4>
|
||||
// </div>
|
||||
// <div className="getIn__touch-right-bottom-shape">
|
||||
// <img src="assets/img/icon/getInTouch.png" alt="shape" />
|
||||
// </div>
|
||||
// <div className="getIn__touch-right-bottom-image">
|
||||
// <ul>
|
||||
// <li><img src="assets/img/avatar/avatar-1.jpg" alt="avatar" /></li>
|
||||
// <li><img src="assets/img/avatar/avatar-2.jpg" alt="avatar" /></li>
|
||||
// <li><img src="assets/img/avatar/avatar-3.jpg" alt="avatar" /></li>
|
||||
// <li><img src="assets/img/avatar/avatar-4.jpg" alt="avatar" /></li>
|
||||
// </ul>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="container">
|
||||
// <div className="row">
|
||||
// <div className="col-xl-5"></div>
|
||||
// <div className="col-xl-7">
|
||||
// <div className="help__area">
|
||||
// <div className="help__area-item">
|
||||
// <div className="help__area-item-icon icon-animation">
|
||||
// <i className="fal fa-phone-alt"></i>
|
||||
// </div>
|
||||
// <div className="help__area-item-info">
|
||||
// <span className="text-three">Emargency Help</span>
|
||||
// <h5><Link href="tel:+012652689523">+012 652 689 523</Link></h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div className="help__area-item">
|
||||
// <div className="help__area-item-icon">
|
||||
// <i className="fal fa-envelope-open-text"></i>
|
||||
// </div>
|
||||
// <div className="help__area-item-info">
|
||||
// <span className="text-three">Email drop Us</span>
|
||||
// <h5><Link href="mailto:conbix@gmail.com">conbix@gmail.com</Link></h5>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default GetInTouch;
|
||||
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
const GetInTouch = () => {
|
||||
const touchContent = {
|
||||
subtitle: "Get In Touch",
|
||||
title: "Free Consultation",
|
||||
title2: "We serving 30% Of Global 600 Companies",
|
||||
des: "Aenean A Felis Consequat, Varius Orci Ut, Varius Metus. Donec Iaculis Leo Turpis, Vitae Sagittis Massa Luctus Feugiat. Donec Vel Sodales Dui,",
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="getIn__touch section-padding"
|
||||
style={{ backgroundImage: `url(/assets/img/pages/getInTouch.jpg)` }}
|
||||
>
|
||||
<img
|
||||
className="getIn__touch-shape left-right-animate2"
|
||||
src="/assets/img/shape/getInTouch.png"
|
||||
alt="shape"
|
||||
/>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-6 col-lg-5 lg-mb-30">
|
||||
<div className="getIn__touch-left">
|
||||
<div className="getIn__touch-left-title">
|
||||
<span className="subtitle-one">{touchContent.subtitle}</span>
|
||||
<h2>{touchContent.title}</h2>
|
||||
</div>
|
||||
<div className="getIn__touch-left-form">
|
||||
<form action="#">
|
||||
<div className="mt-25">
|
||||
<input type="text" name="name" placeholder="Full Name" required />
|
||||
</div>
|
||||
<div className="mt-25">
|
||||
<input type="email" name="email" placeholder="Email Address" required />
|
||||
</div>
|
||||
<div className="mt-25">
|
||||
<input type="text" name="subject" placeholder="Subject" required />
|
||||
</div>
|
||||
<div className="mt-25">
|
||||
<button className="btn-one" type="submit">
|
||||
Free Consulting
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-6 col-lg-7">
|
||||
<div className="getIn__touch-right">
|
||||
<div className="getIn__touch-right-title">
|
||||
<h2>{touchContent.title2}</h2>
|
||||
<p>{touchContent.des}</p>
|
||||
</div>
|
||||
<div className="getIn__touch-right-bottom">
|
||||
<div className="getIn__touch-right-bottom-text">
|
||||
<h4>client satisfaction in the globaly</h4>
|
||||
</div>
|
||||
<div className="getIn__touch-right-bottom-shape">
|
||||
<img src="/assets/img/icon/getInTouch.png" alt="shape" />
|
||||
</div>
|
||||
<div className="getIn__touch-right-bottom-image">
|
||||
<ul>
|
||||
<li>
|
||||
<img src="/assets/img/avatar/avatar-1.jpg" alt="avatar" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/avatar/avatar-2.jpg" alt="avatar" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/avatar/avatar-3.jpg" alt="avatar" />
|
||||
</li>
|
||||
<li>
|
||||
<img src="/assets/img/avatar/avatar-4.jpg" alt="avatar" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col-xl-5"></div>
|
||||
<div className="col-xl-7">
|
||||
<div className="help__area">
|
||||
<div className="help__area-item">
|
||||
<div className="help__area-item-icon icon-animation">
|
||||
<i className="fal fa-phone-alt"></i>
|
||||
</div>
|
||||
<div className="help__area-item-info">
|
||||
<span className="text-three">Emargency Help</span>
|
||||
<h5>
|
||||
<Link href="tel:+012652689523">+012 652 689 523</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div className="help__area-item">
|
||||
<div className="help__area-item-icon">
|
||||
<i className="fal fa-envelope-open-text"></i>
|
||||
</div>
|
||||
<div className="help__area-item-info">
|
||||
<span className="text-three">Email drop Us</span>
|
||||
<h5>
|
||||
<Link href="mailto:conbix@gmail.com">conbix@gmail.com</Link>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetInTouch;
|
||||
33
src/components/pages/homes/home/index.jsx
Normal file
33
src/components/pages/homes/home/index.jsx
Normal file
@ -0,0 +1,33 @@
|
||||
"use client";
|
||||
import SEO from "@/components/data/seo";;
|
||||
import HeaderThree from "@/components/layout/header/header-three";
|
||||
import About from "./about";
|
||||
import Services from "./services";
|
||||
import CtaArea from "./cta";
|
||||
import Experience from "./experience";
|
||||
import Portfolio from "./portfolio";
|
||||
import Testimonial from "./testimonial";
|
||||
import GetInTouch from "./get-in-touch";
|
||||
import Blog from "./blog";
|
||||
import FooterThree from "@/components/layout/footer/footer-three";
|
||||
|
||||
import BannerOne from "./banner";
|
||||
import ScrollToTop from "../../common/scroll/scroll-to-top";
|
||||
|
||||
const HomeOne = () => {
|
||||
return (
|
||||
<div>
|
||||
<SEO pageTitle='Main Business' />
|
||||
<HeaderThree />
|
||||
<BannerOne />
|
||||
<About />
|
||||
<Portfolio />
|
||||
<Experience />
|
||||
|
||||
<FooterThree />
|
||||
<ScrollToTop />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomeOne;
|
||||
72
src/components/pages/homes/home/portfolio.jsx
Normal file
72
src/components/pages/homes/home/portfolio.jsx
Normal file
@ -0,0 +1,72 @@
|
||||
import portfolioData from "@/components/data/portfolio-data";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectFade, Autoplay} from 'swiper/modules';
|
||||
import Link from "next/link";
|
||||
|
||||
const portfolioItem = portfolioData.slice(0, 5);
|
||||
const slideControl = {
|
||||
loop: true,
|
||||
speed: 2000,
|
||||
spaceBetween: 30,
|
||||
autoplay: {
|
||||
delay: 4500,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
breakpoints: {
|
||||
0: {
|
||||
slidesPerView: 1
|
||||
},
|
||||
750: {
|
||||
slidesPerView: 2
|
||||
},
|
||||
1138: {
|
||||
slidesPerView: 3
|
||||
},
|
||||
1600: {
|
||||
slidesPerView: 4
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const Portfolio = () => {
|
||||
|
||||
return (
|
||||
<div className="portfolio__area dark__image section-padding pb-0 overflow-hidden">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row mb-60">
|
||||
<div className="col-xl-12">
|
||||
<div className="portfolio__area-title t-center">
|
||||
<span className="subtitle-one"> LATEST CHANNEL NEWS </span>
|
||||
<h2>Partners news</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<Swiper modules={[EffectFade, Autoplay]} {...slideControl} >
|
||||
{portfolioItem?.map((data, id) => (
|
||||
<SwiperSlide key={id}>
|
||||
<div className="portfolio__area-item swiper-slide">
|
||||
<img src={data.image.src} alt="image" />
|
||||
<div className="portfolio__area-item-content">
|
||||
<div className="portfolio__area-item-content-title">
|
||||
<h4><Link href={`/portfolio/${data.id}`}>{data.title}</Link></h4>
|
||||
<span className="text-eight">{data.subtitle}</span>
|
||||
</div>
|
||||
<div className="portfolio__area-item-content-icon">
|
||||
<Link href={`/portfolio/${data.id}`}><img src="assets/img/icon/up-arrow.png" alt="icon" /></Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Portfolio;
|
||||
46
src/components/pages/homes/home/services.jsx
Normal file
46
src/components/pages/homes/home/services.jsx
Normal file
@ -0,0 +1,46 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import servicesData from '@/components/data/services-data';
|
||||
|
||||
const Services = () => {
|
||||
const servicesItem = servicesData.slice(0, 4);
|
||||
const servicesContent = {
|
||||
subtitle: 'Barand Partnership',
|
||||
title: 'Consulting Services',
|
||||
btn_text: 'learn More',
|
||||
btn_link: '/services'
|
||||
}
|
||||
return (
|
||||
<div className="services__one section-padding pt-0">
|
||||
<div className="container">
|
||||
<div className="row align-items-end mb-45">
|
||||
<div className="col-xl-7 col-lg-8 lg-mb-30">
|
||||
<div className="services__one-title lg-t-center">
|
||||
<span className="subtitle-one">{servicesContent.subtitle}</span>
|
||||
<h2>{servicesContent.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-5 col-lg-4 t-right lg-t-center">
|
||||
<Link className="btn-one" href={servicesContent.btn_link}>{servicesContent.btn_text}<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
{servicesItem?.map((data, id) => (
|
||||
<div className="col-xl-3 col-lg-4 col-md-6 mt-25" key={id}>
|
||||
<div className="services__one-item">
|
||||
<div className="services__one-item-icon">
|
||||
{data.icon}
|
||||
</div>
|
||||
<h4><Link href={`/services/${data.id}`}>{data.title}</Link></h4>
|
||||
<p>{data.description}</p>
|
||||
<Link className="simple-btn-2" href={`/services/${data.id}`}>Read More<i className="far fa-chevron-double-right"></i></Link>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Services;
|
||||
89
src/components/pages/homes/home/testimonial.jsx
Normal file
89
src/components/pages/homes/home/testimonial.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import testimonialData from "@/components/data/testimonial-data";
|
||||
import { Swiper, SwiperSlide } from "swiper/react";
|
||||
import { EffectFade, Autoplay, Navigation} from 'swiper/modules';
|
||||
|
||||
const testimonialItem = testimonialData.slice(0, 4);
|
||||
const slideControl = {
|
||||
loop: true,
|
||||
speed: 2000,
|
||||
spaceBetween: 30,
|
||||
autoplay: {
|
||||
delay: 4500,
|
||||
reverseDirection: false,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
breakpoints: {
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
const Testimonial = () => {
|
||||
|
||||
return (
|
||||
<div className="testimonial__area section-padding">
|
||||
<img className="testimonial__area-shape dark-n" src="assets/img/shape/testimonial.png" alt="shape" />
|
||||
<img className="testimonial__area-shape light-n" src="assets/img/shape/testimonial-dark.png" alt="shape" />
|
||||
<div className="container">
|
||||
<div className="row mb-70 align-items-end">
|
||||
<div className="col-xl-8 col-lg-8 lg-mb-30">
|
||||
<div className="testimonial__area-title lg-t-center">
|
||||
<span className="subtitle-one">Real Client Stories</span>
|
||||
<h2>Customer Experiences</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-4 col-lg-4">
|
||||
<div className="testimonial__area-button t-right lg-t-center">
|
||||
<div className="testimonial__area-button-prev swiper-button-prev"><i className="fal fa-long-arrow-left"></i></div>
|
||||
<div className="testimonial__area-button-next swiper-button-next"><i className="fal fa-long-arrow-right"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-xl-12">
|
||||
<Swiper modules={[EffectFade, Autoplay, Navigation]} {...slideControl} >
|
||||
{testimonialItem?.map((data, id) => (
|
||||
<SwiperSlide key={id}>
|
||||
<div className="testimonial__area-item swiper-slide">
|
||||
<div className="testimonial__area-item-client">
|
||||
<div className="testimonial__area-item-icon">
|
||||
<i className="fal fa-quote-right"></i>
|
||||
</div>
|
||||
<div className="testimonial__area-item-client-image">
|
||||
<img src={data.avatar.src} alt="avatar" />
|
||||
</div>
|
||||
<div className="testimonial__area-item-client-title">
|
||||
<h5>{data.name}</h5>
|
||||
<span className="text-eight">{data.position}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>{data.des}</p>
|
||||
<div className="testimonial__area-item-reviews">
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
<i className="fas fa-star"></i>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Testimonial;
|
||||
Reference in New Issue
Block a user