Rakia/Maryam-s-work
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pushing all files

Browse Source
This commit is contained in:
rakia
2025-08-30 11:03:32 +03:00
parent fd2dcf0daa
commit 81b875023b
510 changed files with 81710 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/pages/about/about.jsx Normal file
View File

@ -0,0 +1,50 @@
import Link from "next/link";
import Count from "../common/count";
const AboutMain = () => {
const aboutContent = {
image_1: '/assets/img/about/3.jpg',
image_2: '/assets/img/about/5.jpg',
subtitle: 'Our History',
title: 'Find out more about our Historey PEI',
description: 'PEI distribution provide supply chain management service to some of the most esteemed international brands engaged in Information technology, data center, power & telecoms products. Through the years, we have maintained an excellent partner relationship and market presence facilitation to manufacturer such as Lenovo, D-link, Vertiv, Epson, Microsoft, Dell, Logitech, Estap, and Eastman Solar. PEI has in-depth knowledge and understanding of its fast growing market and a broad local presence such as warehousing facility and show rooms in Somalia, Djibouti, Ethiopia and Dubai.',
btn_text: 'Discover More',
btn_href: '/about-us',
shape_1: '/assets/img/shape/about-1.png',
shape_2: '/assets/img/shape/about-2.png',
}
return (
<>
<div className="about__company section-padding">
<div className="container">
<div className="row align-items-center">
<div className="col-xxl-7 col-xl-6 xl-mb-30">
<div className="about__company-left">
<div className="about__company-left-image dark__image">
<img src={aboutContent.image_1} alt="image" />
<img src={aboutContent.image_2} alt="image" />
</div>
</div>
</div>
<div className="col-xxl-5 col-xl-6">
<div className="about__company-right">
<div className="about__company-right-title">
<span className="subtitle-one">{aboutContent.subtitle}</span>
<h2>{aboutContent.title}</h2>
<p>{aboutContent.description}</p>
<Link className="btn-one" href={aboutContent.btn_href}>{aboutContent.btn_text}</Link>
</div>
</div>
</div>
</div>
</div>
<img className="about__one-shape-1" src={aboutContent.shape_1} alt="shape" />
<img className="about__one-shape-2" src={aboutContent.shape_2} alt="shape" />
</div>
</>
);
};
export default AboutMain;

125
src/components/pages/about/history.jsx Normal file
View File

@ -0,0 +1,125 @@
import React from 'react';
import image1 from "../../../public/assets/img/about/nimage_13_pei_logo_new.png";
import image2 from "../../../public/assets/img/about/66.jpg";
import image3 from "../../../public/assets/img/about/77.jpg";
import image4 from "../../../public/assets/img/about/44.jpg";
import image5 from "../../../public/assets/img/about/22.jpg";
const History = () => {
return (
<div className="company__history section-padding">
<div className="container">
<div className="row mb-70">
<div className="col-xl-12">
<div className="company__history-title t-center">
<span className="subtitle-one">Our History</span>
<h2>Our Company History</h2>
</div>
</div>
</div>
<div className="row">
<div className="col-xl-12">
<div className="company__history-area dark__image">
<div className="company__history-area-item">
<div className="company__history-area-item-left">
<img src={image1.src} alt="image" />
</div>
<div className="company__history-area-item-right">
<div className="company__history-area-item-right-content mb-50 xl-mb-30">
<div className="company__history-area-item-right-content-date">
<span>2013</span>
</div>
<p>Founded in 2013, Pure Earth International (PEI) started business as IT retailer in Somalia with one retail store. The high demand for quality products led us to grow with one year to six stores, covering all main cities in the country such as Hargeisa, Mogadishu, Bosaso and Galkayo.
As the business grew, the need for more products and reliable suppliers raised. PEI established first IT distribution sector in the country.</p>
</div>
</div>
</div>
<div className="company__history-area-items">
<div className="company__history-area-items-left order-last order-lg-first">
<div className="company__history-area-items-left-content mb-50 xl-mb-30">
<div className="company__history-area-items-left-content-date">
<span>2014</span>
</div>
<p>
In 2014, D-link Middle East and Africa appointed Pure Earth International as exclusive country distributor in Somalia and Djibouti for the full range of D-link products, thus completing PEI's D-link product offering to local ressellers and wholesalers.One year later, in recognition of our achievement, PEI received D-Link Emerging
Distributor of the Year 2014 award at D-Link distributors meeting in Cape Town,South Africa.
</p>
</div>
</div>
<div className="company__history-area-items-right">
<div className="company__history-area-items-right-image">
<img src={image2.src} alt="image" />
</div>
</div>
</div>
<div className="company__history-area-item">
<div className="company__history-area-item-left">
<div className="company__history-area-item-left-image">
<img src={image3.src} alt="image" />
</div>
</div>
<div className="company__history-area-item-right">
<div className="company__history-area-item-right-content mb-50 xl-mb-30">
<div className="company__history-area-item-right-content-date">
<span>2015</span>
</div>
<p>
In 2015, we have launched our solution division. Pure Tech Solutions's to cover the ever growing post-sales technical challenges of our sales teams and resellers. Currently, the division deploy complex organisational
and governmental projects ranging from network infrastructure, software design to cloud deployment.
</p>
</div>
</div>
</div>
<div className="company__history-area-items">
<div className="company__history-area-items-left order-last order-lg-first">
<div className="company__history-area-items-left-content mb-50 xl-mb-30">
<div className="company__history-area-items-left-content-date">
<span>2016</span>
</div>
<p>
In 2016, PEI partnered with Toshiba to distribute Toshiba storage products in the local markets. While PEI had already been selling storage products from various vendors, direct partnership with Toshiba has enabled us to expand our sales team and reach various new resellers.
During the year 2016, we expanded our distribution operations to Djibouti, where PEI already had logistic coordination office. This allowed us to reach local resellers and expand our reach to new markets.
</p>
</div>
</div>
<div className="company__history-area-items-right">
<div className="company__history-area-items-right-image">
<img src={image4.src} alt="imafe" />
</div>
</div>
</div>
<div className="company__history-area-item">
<div className="company__history-area-item-left">
<div className="company__history-area-item-left-image">
<img src={image5.src} alt="imafe" />
</div>
</div>
<div className="company__history-area-item-right">
<div className="company__history-area-item-right-content">
<div className="company__history-area-item-right-content-date">
<span>2017</span>
</div>
<p>
PEI opened display rooms to better showcase brand and products in the region, in addition to its sales office. In the same year, gained new partnership with the market leader in term of power equipment. Vertiv previously know as Emerson
agreed to provide PEI partners access to industrial grade power equipments and network management products.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default History;

29
src/components/pages/about/index.jsx Normal file
View File

@ -0,0 +1,29 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderThree from "@/src/components/layout/header/header-three";
import BreadCrumb from "../common/breadcrumb";
import AboutMain from "./about";
import FooterThree from "@/src/components/layout/footer/footer-three";
import ScrollToTop from "../common/scroll/scroll-to-top";
import WhoWeAre from "./who-we-are";
import History from "./history";
const AboutUs = () => {
return (
<>
<SEO pageTitle="About Us" />
<HeaderThree />
<BreadCrumb title="About Us" innerTitle="Company About" />
<AboutMain />
<WhoWeAre />
<History />
<div className='all-footer'>
<FooterThree />
</div>
<ScrollToTop />
</>
);
};
export default AboutUs;

67
src/components/pages/about/who-we-are.jsx Normal file
View File

@ -0,0 +1,67 @@
import React from 'react';
import bgImage from "../../../public/assets/img/about/6.png";
import image from "../../../public/assets/img/about/4.png";
import shape from "../../../public/assets/img/shape/about-solution.png";
import Count from '../common/count';
import Link from 'next/link';
const WhoWeAre = () => {
return (
<>
<div className="company__two section-padding pt-0">
<div className="container">
<div className="row align-items-center">
<div className="col-xl-6 col-lg-7 lg-mb-30">
<div className="company__two-left">
<div className="company__two-left-title">
<span className="subtitle-one">INVESTOR RELATIONS</span>
<p>
PEI distribution bring the power of technology to East Africa. By providing uninterrupted supply from some of the most esteemed international brands engaged in Information technology, data center, power & telecommunication products. We are a fast growing, volume moving and life transforming company
based in all regions of Somalia & Djibouti. To find out more, contact us or follow us on Facebook.com
</p>
</div>
<div className="company__two-left-skill">
<div className="company__two-left-skill-item">
<h2><Count number={89} />k</h2>
<h6>Project Completed Last Years</h6>
</div>
<div className="company__two-left-skill-item">
<h2><Count number={73} />k</h2>
<h6>happy customer worldwide</h6>
</div>
</div>
<Link className="btn-two" href="/about">Join Oure Team<i className="far fa-chevron-double-right"></i></Link>
</div>
</div>
<div className="col-xl-6 col-lg-5">
<div className="company__two-right dark__image t-right">
<img className="img__full" src={image.src} alt="image" />
</div>
</div>
</div>
</div>
</div>
<div className="about__solution" style={{backgroundImage: `url(${bgImage.src})`}}>
<div className="container">
<div className="row align-items-center">
<div className="col-xl-8">
<div className="about__solution-left xl-t-center">
<h2>implement solutions & achieve goals.</h2>
</div>
</div>
<div className="col-xl-4">
<div className="about__solution-right t-right xl-t-center">
<Link className="btn-one" href="/contact">Get Free Consultations<i className="far fa-chevron-double-right"></i></Link>
<img className="about__solution-right-shape left-right-animate" src={shape.src} alt="shape" />
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default WhoWeAre;

157
src/components/pages/blogs/blog-details/blog-details.jsx Normal file
View File

@ -0,0 +1,157 @@
import Link from 'next/link';
import Social from '@/src/components/data/social';
import blogData from '@/src/components/data/blog-data';
import BlogSidebar from '../blog-sidebar/blog-sidebar';
const BlogSingleMain = ({singleData}) => {
const category = singleData?.title.split(' ').slice(0, 2).join(' ') + '';
const blogPost = blogData.slice(0, 3);
return (
<>
<div className="blog__details dark__image section-padding">
<div className="container">
<div className="row">
<div className="col-xl-8 col-lg-8 lg-mb-50">
<div className="blog__details-left dark_image">
<img className="img__full" src={singleData.image.src} alt="blog-details-image" />
<div className="blog__details-left-meta">
<div className="blog__details-left-meta-left">
<div className="author">
<div className="author-avatar">
<img src="../assets/img/team/team-3.jpg" alt="avatar" />
</div>
<div className="author-info">
<span>Engineer</span>
<h6>Roberto Ramon</h6>
</div>
</div>
</div>
<div className="blog__details-left-meta-content">
<span>Date :</span>
<h6>March {singleData.date}, 2024</h6>
</div>
<div className="blog__details-left-meta-content">
<span>Category</span>
<h6>{category}</h6>
</div>
</div>
<h3 className="mb-20">{singleData.title}</h3>
<p>Discover the latest innovations in solar technology that are driving a wave of positive change across the globe. From photovoltaic advancements to smart grid integration, we delve into the cutting-edge solutions that make solar energy an increasingly viable and accessible option. Learn how solar power not only reduces our dependence on traditional energy sources but also,</p>
<p>Our blog goes beyond the technical aspects, offering insights into the economic and societal impact of widespread solar adoption. Explore success stories, case studies, and real-world applications that showcase how solar energy is not just an eco-friendly choice but a practical and economically sound investment.</p>
<div className="blog__details-left-box">
<i className="fa-sharp fa-solid fa-ditto"></i>
<div>
<h5>Design is a comprehensive approach to creating digital products that are both visually</h5>
<span>Kristin Watson</span>
</div>
</div>
<h4 className="mb-20">Sunrise Choices Solar Voices</h4>
<p>Embark on a journey through the sunrise of possibilities as we delve into sustainable practices, energy-efficient technologies, and the myriad choices available to individuals and businesses seeking a greener path. From residential solar installations to large-scale solar farms, our blog sheds light on the diverse ways solar energy is making its mark on the world.</p>
<div className="row mt-35 mb-30">
<div className="col-6">
<img className="img__full" src="../assets/img/blog/blog-details-1.jpg" alt="blog-image" />
</div>
<div className="col-6">
<img className="img__full" src="../assets/img/blog/blog-details-2.jpg" alt="blog-image" />
</div>
</div>
<p>Discover the voices advocating for solar solutions – from industry experts and environmental enthusiasts to the communities benefitting from solar initiatives. We share stories that inspire change, emphasizing the importance of collective voices in shaping a sustainable future.</p>
<p>Join us on a journey through the sunrise of possibilities as we explore the various choices available in the realm of solar energy. From residential solar solutions to innovative technologies,</p>
<div className="blog__details-left-tag">
<h6>Related Tags :</h6>
<div className="all__sidebar-item-tag">
<ul>
{blogPost.map((data, id) => (
<li key={id}><Link href={`/blog/${data.id}`}>{data.title.split(' ').slice(0, 1).join(' ')}</Link></li>
))}
</ul>
</div>
</div>
<div className="blog__details-left-author">
<div className="blog__details-left-author-image">
<img src="../assets/img/avatar/support.jpg" alt="avatar" />
</div>
<div className="blog__details-left-author-content">
<h6>Joshua Harvey</h6>
<p>Starting a product design from scratch is an iterative process that may involve multiple cycles of design,</p>
<div className="social__icon">
<Social />
</div>
</div>
</div>
<div className="blog__details-left-comment mt-60">
<h5 className="mb-30">Comments (2)</h5>
<div className="blog__details-left-comment-item">
<div className="blog__details-left-comment-item-comment">
<div className="blog__details-left-comment-item-comment-image">
<img src="../assets/img/avatar/avatar-1.jpg" alt="avatar-image" />
</div>
<div className="blog__details-left-comment-item-comment-content">
<h6>Guy Hawkins<a href="#"><i className="far fa-reply-all"></i>Reply</a></h6>
<span>20 Dec, 2024 At 9:PM</span>
<p>Pellentesque a placerat orci. Suspendisse rutrum lacus ipsum, eu vulputate augue blandit mollis.</p>
</div>
</div>
</div>
<div className="blog__details-left-comment-item ml-65 sm-ml-0">
<div className="blog__details-left-comment-item-comment">
<div className="blog__details-left-comment-item-comment-image">
<img src="../assets/img/avatar/avatar-2.jpg" alt="avatar-image" />
</div>
<div className="blog__details-left-comment-item-comment-content">
<h6>Kristin Watson<a href="#"><i className="far fa-reply-all"></i>Reply</a></h6>
<span>22 Dec, 2024 At 7:PM</span>
<p>Pellentesque a placerat orci. Suspendisse rutrum lacus ipsum, eu vulputate augue blandit mollis.</p>
</div>
</div>
</div>
</div>
<div className="blog__details-left-contact mt-60">
<h5>Post Comment</h5>
<p className="mb-30">Your email address will not be published. Required fields are marked</p>
<div className="blog__details-left-contact-form">
<form action="#">
<div className="row">
<div className="col-sm-6 mb-30">
<div className="blog__details-left-contact-form-item contact-item">
<input type="text" name="name" placeholder="Full Name" required="required" />
</div>
</div>
<div className="col-sm-6 sm-mb-30">
<div className="blog__details-left-contact-form-item contact-item">
<input type="text" name="email" placeholder="Email Address" required="required" />
</div>
</div>
<div className="col-sm-12 mb-30">
<div className="blog__details-left-contact-form-item contact-item">
<input type="text" placeholder="Subject" required="required" />
</div>
</div>
<div className="col-sm-12 mb-30">
<div className="blog__details-left-contact-form-item contact-item">
<textarea name="message" placeholder="Type your comments...."></textarea>
</div>
</div>
<div className="col-lg-12">
<div className="blog__details-left-contact-form-item">
<button className="btn-one" type="submit">Submit Comment</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="col-xl-4 col-lg-4">
<BlogSidebar />
</div>
</div>
</div>
</div>
</>
);
};
export default BlogSingleMain;

26
src/components/pages/blogs/blog-details/index.jsx Normal file
View File

@ -0,0 +1,26 @@
"use client"
import BlogSingleMain from "./blog-details";
import BreadCrumb from "../../common/breadcrumb";
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/src/components/layout/header/header-three";
import FooterTwo from "@/src/components/layout/footer/footer-three";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const BlogDetails = ({singleData}) => {
const firstThreeWords = singleData?.title.split(' ').slice(0, 3).join(' ') + '...';
return (
<>
<SEO pageTitle={singleData?.title} />
<HeaderOne />
<BreadCrumb title={firstThreeWords} innerTitle={singleData?.title} />
<BlogSingleMain singleData={singleData}/>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default BlogDetails;

48
src/components/pages/blogs/blog-sidebar/blog-sidebar.jsx Normal file
View File

@ -0,0 +1,48 @@
import blogData from '@/src/components/data/blog-data';
import Link from 'next/link';
const BlogSidebar = () => {
const blogPost = blogData.slice(0, 3);
return (
<div className="all__sidebar ml-25 xl-ml-0">
<div className="all__sidebar-item">
<h4>Search</h4>
<div className="all__sidebar-item-search">
<form action="#">
<input type="text" placeholder="Search....." />
<button type="submit"><i className="fal fa-search"></i></button>
</form>
</div>
</div>
<div className="all__sidebar-item">
<h4>Recent Post</h4>
<div className="all__sidebar-item-post">
{blogPost.map((data, id) => (
<div className="post__item" key={id}>
<div className="post__item-image">
<Link href={`/blog/${data.id}`}><img src={data.image.src} alt="" /></Link>
</div>
<div className="post__item-title">
<h6><Link href={`/blog/${data.id}`}>{data.title}</Link></h6>
<span><i className="far fa-calendar-alt"></i>Mar {data.date}, 2024</span>
</div>
</div>
))}
</div>
</div>
<div className="all__sidebar-item">
<h4>Popular Tag</h4>
<div className="all__sidebar-item-tag">
<ul>
{blogData.map((data, id) => (
<li key={id}><Link href={`/blog/${data.id}`}>{data.title.split(' ').slice(0, 1).join(' ')}</Link></li>
))}
</ul>
</div>
</div>
</div>
);
};
export default BlogSidebar;

68
src/components/pages/blogs/blog-standard/blog-standard.jsx Normal file
View File

@ -0,0 +1,68 @@
import React, { useState } from 'react';
import BlogSidebar from '../blog-sidebar/blog-sidebar';
import Pagination from '../blog/pagination';
import blogData from '../../../data/blog-data';
import Link from 'next/link';
const BlogStandardMain = () => {
const blogItemShow = 3;
const [currentPage, setCurrentPage] = useState(0);
const totalPages = Math.ceil(blogData.length / blogItemShow);
const startIndex = currentPage * blogItemShow;
const endIndex = startIndex + blogItemShow;
const currentBlogItems = blogData.slice(startIndex, endIndex);
const handleNextPage = () => {
if (currentPage < totalPages - 1) {
setCurrentPage(currentPage + 1);
}
};
const handlePrevPage = () => {
if (currentPage > 0) {
setCurrentPage(currentPage - 1);
}
};
return (
<div className="blog__standard section-padding">
<div className="container">
<div className="row">
<div className="col-xl-8 col-lg-8 lg-mb-50">
<div className="blog__standard-left">
{currentBlogItems?.map((data, id) => (
<div className="news__standard-left-item mb-50" key={id}>
<div className="news__standard-left-item-image">
<Link href={`/blog/${data.id}`}><img src={data.image.src} alt="image" /></Link>
</div>
<div className="news__standard-left-item-content">
<div className="news__standard-left-item-content-meta">
<ul>
<li><a href="#"><i className="fal fa-user"></i>Admin</a></li>
<li><a href="#"><i className="fal fa-calendar-alt"></i>{data.date}, March 2024</a></li>
<li><a href="#"><i className="fal fa-comment-dots"></i>{data.comment} Comment</a></li>
</ul>
</div>
<h3 className="mb-10"><Link href={`/blog/${data.id}`}>{data.title}</Link></h3>
<p>{data.des}. Look out into the Manhattan skyline from the open fully equipped kitchen.</p>
<Link className="btn-one" href={`/blog/${data.id}`}>Read Details</Link>
</div>
</div>
))}
</div>
<Pagination
currentPage={currentPage}
handlePrevPage={handlePrevPage}
totalPages={totalPages}
handleNextPage={handleNextPage}
setCurrentPage={setCurrentPage}
/>
</div>
<div className="col-xl-4 col-lg-4">
<BlogSidebar />
</div>
</div>
</div>
</div>
);
};
export default BlogStandardMain;

26
src/components/pages/blogs/blog-standard/index.jsx Normal file
View File

@ -0,0 +1,26 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/src/components/layout/header/header-three";
import BreadCrumb from "../../common/breadcrumb";
import BlogStandardMain from "./blog-standard";
import FooterTwo from "@/src/components/layout/footer/footer-three";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const BlogStandardPage = () => {
return (
<>
<SEO pageTitle='Blog Standard' />
<HeaderOne />
<BreadCrumb title="Blog Standard" innerTitle="Blog Standard" />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default BlogStandardPage;

46
src/components/pages/blogs/blog/blog-grid.jsx Normal file
View File

@ -0,0 +1,46 @@
"use client";
import React, { useState } from 'react';
import BlogItem from './blog-item';
import Pagination from './pagination';
import blogData from '../../../data/blog-data';
const BlogGridMain = () => {
const blogItemShow = 6;
const [currentPage, setCurrentPage] = useState(0);
const totalPages = Math.ceil(blogData.length / blogItemShow);
const startIndex = currentPage * blogItemShow;
const endIndex = startIndex + blogItemShow;
const currentBlogItems = blogData.slice(startIndex, endIndex);
const handleNextPage = () => {
if (currentPage < totalPages - 1) {
setCurrentPage(currentPage + 1);
}
};
const handlePrevPage = () => {
if (currentPage > 0) {
setCurrentPage(currentPage - 1);
}
};
return (
<>
<div className="blog__two section-padding">
<div className="container">
<div className="row">
<BlogItem currentBlogItems={currentBlogItems} />
</div>
<Pagination
currentPage={currentPage}
handlePrevPage={handlePrevPage}
totalPages={totalPages}
handleNextPage={handleNextPage}
setCurrentPage={setCurrentPage}
/>
</div>
</div>
</>
);
};
export default BlogGridMain;

31
src/components/pages/blogs/blog/blog-item.jsx Normal file
View File

@ -0,0 +1,31 @@
import Link from 'next/link';
import React from 'react';
const BlogItem = ({currentBlogItems}) => {
return (
<>
{currentBlogItems?.map((data, id) => (
<div className="col-xl-4 col-lg-6 mb-25" key={id}>
<div className="blog__two-item page">
<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">
</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>
))}
</>
);
};
export default BlogItem;

26
src/components/pages/blogs/blog/index.jsx Normal file
View File

@ -0,0 +1,26 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/src/components/layout/header/header-three";
import BreadCrumb from "../../common/breadcrumb";
import BlogGridMain from "./blog-grid";
import FooterTwo from "@/src/components/layout/footer/footer-three";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const BlogGrid = () => {
return (
<>
<SEO pageTitle='Blog Grid' />
<HeaderOne />
<BreadCrumb title="Blog Grid" innerTitle="Blog Grid" />
<BlogGridMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default BlogGrid;

35
src/components/pages/blogs/blog/pagination.jsx Normal file
View File

@ -0,0 +1,35 @@
const Pagination = ({ currentPage, handlePrevPage, totalPages, handleNextPage, setCurrentPage,}) => {
return (
<div className="row t-center mt-25">
<div className="col-xl-12">
<div className="theme__pagination">
<ul>
<li>
<span
className={`${currentPage === 0 ? "d-none" : ""}`}
onClick={handlePrevPage}
><i className="fas fa-chevron-double-left"></i></span>
</li>
{Array.from({ length: totalPages }).map((_, index) => (
<li key={index}>
<span
className={`${currentPage === index ? "active" : ""}`}
onClick={() => setCurrentPage(index)}
>{index + 1}</span>
</li>
))}
<li>
<span
className={`${currentPage === totalPages - 1 ? "d-none" : ""}`}
onClick={handleNextPage}
><i className="fas fa-chevron-double-right"></i></span>
</li>
</ul>
</div>
</div>
</div>
);
};
export default Pagination;

26
src/components/pages/common/breadcrumb.jsx Normal file
View File

@ -0,0 +1,26 @@
import Link from 'next/link';
import breadCrumbBg from "../../../public/assets/img/pages/page-banner.jpg";
const BreadCrumb = ({title, innerTitle}) => {
const firstThreeWords = title?.split(' ').slice(0, 1);
return (
<div className="page__banner" style={{backgroundImage: `url(${breadCrumbBg.src})`}}>
<div className="container">
<div className="row">
<div className="col-xl-12">
<div className="page__banner-content">
<span>{firstThreeWords}</span>
<ul>
<li><Link href="/">Home</Link><span>|</span></li>
<li>{innerTitle}</li>
</ul>
<h1>{title}</h1>
</div>
</div>
</div>
</div>
</div>
);
};
export default BreadCrumb;

12
src/components/pages/common/count.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import CountUp from 'react-countup';
const Count = ({ number }) => {
return (
<>
<CountUp end={number} enableScrollSpy />
</>
);
};
export default Count;

22
src/components/pages/common/dark-light.jsx Normal file
View File

@ -0,0 +1,22 @@
import { useState } from 'react';
export default function SwitchTab({ addClass }) {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleDark = () => {
setIsDarkMode(true);
document.body.classList.add('dark-mode');
};
const toggleLight = () => {
setIsDarkMode(false);
document.body.classList.remove('dark-mode');
};
return (
<div className="switch__tab">
<span className={`switch__tab-btn light-mode-title ${isDarkMode ? '' : 'active'}`} onClick={toggleLight}>Light</span>
<span className={`mode__switch ${addClass}`} onClick={isDarkMode ? toggleLight : toggleDark}><span></span></span>
<span className={`switch__tab-btn dark-mode-title ${isDarkMode ? 'active' : ''}`} onClick={toggleDark}>Dark</span>
</div>
);
}

15
src/components/pages/common/preloader.jsx Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
const Preloader = () => {
return (
<div className="theme-loader">
<div className="spinner">
<div className="spinner-bounce one"></div>
<div className="spinner-bounce two"></div>
<div className="spinner-bounce three"></div>
</div>
</div>
);
};
export default Preloader;

37
src/components/pages/common/scroll/scroll-to-top.jsx Normal file
View File

@ -0,0 +1,37 @@
"use client"
import React, { useEffect } from "react";
import useScrollToTop from "./use-scroll-to-top";
const ScrollToTop = ({addClass}) => {
const { stick, onClickHandler } = useScrollToTop();
useEffect(() => {
const scrollPath = document.querySelector(".scroll-up path");
const pathLength = scrollPath.getTotalLength();
scrollPath.style.transition = "none";
scrollPath.style.strokeDasharray = `${pathLength} ${pathLength}`;
scrollPath.style.strokeDashoffset = pathLength;
scrollPath.getBoundingClientRect();
scrollPath.style.transition = "stroke-dashoffset 10ms linear";
const updateScroll = () => {
const scroll = window.scrollY;
const docHeight = document.body.offsetHeight;
const winHeight = window.innerHeight;
const height = docHeight - winHeight;
const progress = pathLength - (scroll * pathLength) / height;
scrollPath.style.strokeDashoffset = progress;
};
updateScroll();
window.addEventListener("scroll", updateScroll);
return () => {
window.removeEventListener("scroll", updateScroll);
};
}, []);
return (
<div className={`scroll-up ${addClass} ${stick && "active-scroll"}`} onClick={onClickHandler}>
<svg className="scroll-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"><path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" /></svg>
</div>
);
};
export default ScrollToTop;

18
src/components/pages/common/scroll/use-scroll-to-top.jsx Normal file
View File

@ -0,0 +1,18 @@
import { useState, useEffect } from "react";
function useScrollToTop() {
const [stick, setStick] = useState(false);
useEffect(() => {
const scrollHandler = () => {
setStick(window.pageYOffset > 50);
};
window.addEventListener("scroll", scrollHandler);
return () => {
window.removeEventListener("scroll", scrollHandler);
};
}, []);
return { stick, onClickHandler: () => window.scrollTo({ top: 0, behavior: "smooth" }) };
}
export default useScrollToTop;

25
src/components/pages/common/skill-bar.jsx Normal file
View File

@ -0,0 +1,25 @@
import { useState } from "react";
import CountUp from 'react-countup';
import ScrollTrigger from "react-scroll-trigger";
import ReactSkillBar from 'react-skillbars';
const SkillBarItem = ({countUp}) => {
const [skillBar, setSkillBar] = useState(false);
const skillLevel = [
{ type: 'one', level: countUp }
];
return (
<>
<ScrollTrigger onEnter={()=> setSkillBar(true)} onExit={()=> setSkillBar(false)}>
<div className="skill__area-item-inner">
{skillBar && <ReactSkillBar skills={skillLevel} height={10} animationDuration={2000} />}
<span className="skill__area-item-count text-two">
<span className="counter text-two">{skillBar && <CountUp start={0} end={countUp} duration={4} delay={1}></CountUp>}</span>%
</span>
</div>
</ScrollTrigger>
</>
);
};
export default SkillBarItem;

79
src/components/pages/contacts/contact-four.jsx Normal file
View File

@ -0,0 +1,79 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import Form from "./form";
import Social from "@/src/components/data/social";
import ScrollToTop from "../common/scroll/scroll-to-top";
const ContactFour = () => {
return (
<>
<SEO pageTitle="Contact Four" />
<HeaderOne />
<BreadCrumb title="Contact Four" innerTitle="Contact Four" />
<div className="contact__two section-padding pb-0">
<div className="container">
<div className="row contact__two-box">
<div className="col-xl-4 col-lg-5 lg-mb-30">
<div className="contact__two-left">
<h3>Contact Us</h3>
<p className="mb-30">On the other hand we moralized bite the HR charms of pleasure.</p>
<div className="contact__two-left-item">
<div className="contact__two-left-item-icon">
<img src="/assets/img/icon/call.png" alt="icon" />
</div>
<div className="contact__two-left-item-info">
<span>Tell With US</span>
<p><a href="tel:+123-568-4758">+123-568-4758</a></p>
</div>
</div>
<div className="contact__two-left-item">
<div className="contact__two-left-item-icon">
<img src="/assets/img/icon/email.png" alt="icon" />
</div>
<div className="contact__two-left-item-info">
<span>Quick Email</span>
<p><a href="mailto:conbix.com@gmail.com">conbix.com@gmail.com</a></p>
</div>
</div>
<div className="contact__two-left-item">
<div className="contact__two-left-item-icon">
<img src="/assets/img/icon/locations.png" alt="icon" />
</div>
<div className="contact__two-left-item-info">
<span>Office Address</span>
<p><a href="#">Birkbeck Court, Birkbeck Rd, London W3 6BQ, UK</a></p>
</div>
</div>
<div className="contact__two-left-item-socialIcon">
<h6>Follow Us</h6>
<Social />
</div>
</div>
</div>
<div className="col-xl-8 col-lg-7">
<div className="contact__two-right">
<h3>Get In Touch</h3>
<p>On the other hand we denounce righteous indignation moralized bite the HR charms of pleasure.</p>
<div className="contact__two-right-form">
<Form />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="contact__two-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830894606!2d-74.11976383964463!3d40.69766374865767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1652012644726!5m2!1sen!2sbd" loading="lazy"></iframe>
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ContactFour;

88
src/components/pages/contacts/contact-three.jsx Normal file
View File

@ -0,0 +1,88 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import Form from "./form";
import ScrollToTop from "../common/scroll/scroll-to-top";
const ContactThree = () => {
return (
<>
<SEO pageTitle="Contact Three" />
<HeaderOne />
<BreadCrumb title="Contact Three" innerTitle="Contact Three" />
<div className="contact__three pb-0 section-padding">
<div className="container">
<div className="row">
<div className="col-xl-4 col-md-6 lg-mb-30">
<div className="contact__three-info">
<div className="contact__three-info-icon">
<img src="/assets/img/icon/call.png" alt="icon" />
</div>
<div className="contact__three-info-content">
<h4>Tell With US</h4>
<p><a href="tel:+125(895)658568">+125 (895) 658 568</a></p>
<p><a href="tel:+125(874)452645">+125 (874) 452 645</a></p>
</div>
</div>
</div>
<div className="col-xl-4 col-md-6 md-mb-30">
<div className="contact__three-info">
<div className="contact__three-info-icon">
<img src="/assets/img/icon/email.png" alt="icon" />
</div>
<div className="contact__three-info-content">
<h4>Quick Email</h4>
<p><a href="mailto:info.conbix@gmail.com">info.conbix@gmail.com</a></p>
<p><a href="mailto:conbix@gmail.com">conbix@gmail.com</a></p>
</div>
</div>
</div>
<div className="col-xl-4 col-md-6">
<div className="contact__three-info">
<div className="contact__three-info-icon">
<img src="/assets/img/icon/locations.png" alt="icon" />
</div>
<div className="contact__three-info-content">
<h4>Office Location</h4>
<p>8502 Preston Inglewood,<br/>Maine 98380</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="contact__three section-padding">
<div className="container">
<div className="row align-items-center">
<div className="col-xl-6 col-lg-6 lg-mb-30">
<div className="contact__three-left mr-40 xl-mr-0">
<div className="contact__three-left-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830894606!2d-74.11976383964463!3d40.69766374865767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1652012644726!5m2!1sen!2sbd" loading="lazy"></iframe>
</div>
</div>
</div>
<div className="col-xl-6 col-lg-6">
<div className="contact__three-right">
<div className="contact__three-right-title">
<span className="subtitle-one">Request a call Back</span>
<h2 className="mb-30">Contact about your Project.</h2>
</div>
<div className="contact__three-right-form">
<Form />
</div>
</div>
</div>
</div>
</div>
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ContactThree;

79
src/components/pages/contacts/contact-two.jsx Normal file
View File

@ -0,0 +1,79 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import Form from "./form";
import ScrollToTop from "../common/scroll/scroll-to-top";
const ContactTwo = () => {
return (
<>
<SEO pageTitle="Contact Two" />
<HeaderOne />
<BreadCrumb title="Contact Two" innerTitle="Contact Two" />
<div className="contact__four section-padding">
<div className="container">
<div className="row">
<div className="col-xl-4 col-lg-4 col-md-6 lg-mb-30">
<div className="contact__four-info">
<div className="contact__four-info-icon">
<img src="/assets/img/icon/locationss.png" alt="icon" />
</div>
<h4>Office Location</h4>
<span>You are most welcome to visit office.</span>
<p>8502 Preston Rd. Inglewood,<br/> Maine 98380</p>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6 md-mb-30">
<div className="contact__four-info">
<div className="contact__four-info-icon">
<img src="/assets/img/icon/phone-call.png" alt="icon" />
</div>
<h4>Tell With US</h4>
<span>Keeping you always better connected.</span>
<p><a href="tel:+125(895)658568">+125 (895) 658 568</a></p>
<p><a href="tel:+125(874)452645">+125 (874) 452 645</a></p>
</div>
</div>
<div className="col-xl-4 col-lg-4 col-md-6">
<div className="contact__four-info">
<div className="contact__four-info-icon">
<img src="/assets/img/icon/emails.png" alt="icon" />
</div>
<h4>Quick Email</h4>
<span>Drop us a mail we will answer you asap.</span>
<p><a href="mailto:info.conbix@gmail.com">info.conbix@gmail.com</a></p>
<p><a href="mailto:conbix@gmail.com">conbix@gmail.com</a></p>
</div>
</div>
</div>
</div>
</div>
<div className="contact__four">
<div className="container">
<div className="row">
<div className="col-xl-12">
<div className="contact__four-form t-center">
<div className="contact__four-form-title">
<span className="subtitle-one">Get in Touch</span>
<h2>We are always Ready for your solution</h2>
</div>
<Form />
</div>
</div>
</div>
</div>
</div>
<div className="contact__two-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830894606!2d-74.11976383964463!3d40.69766374865767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1652012644726!5m2!1sen!2sbd" loading="lazy"></iframe>
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ContactTwo;

86
src/components/pages/contacts/contact.jsx Normal file
View File

@ -0,0 +1,86 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../common/scroll/scroll-to-top";
const ContactUs = () => {
return (
<>
<SEO pageTitle="Contact Us" />
<HeaderOne />
<BreadCrumb title="Contact Us" innerTitle="Contact Us" />
<div className="contact__page section-padding pb-0">
<div className="container">
<div className="row">
<div className="col-xl-5 col-lg-5 order-last order-lg-first">
<div className="contact__page-form">
<h3 className="mb-30">Contact Us</h3>
<form action="#">
<div className="row">
<div className="col-sm-12 mb-20">
<div className="contact__page-form-item contact-item">
<span className="fal fa-user"></span>
<input type="text" name="name" placeholder="Full Name" required="required" />
</div>
</div>
<div className="col-sm-12 mb-20">
<div className="contact__page-form-item contact-item">
<span className="far fa-envelope-open"></span>
<input type="email" name="email" placeholder="Email Address" required="required" />
</div>
</div>
<div className="col-sm-12 mb-30">
<div className="contact__page-form-item contact-item">
<span className="far fa-comments"></span>
<textarea name="message" placeholder="Type your comments...."></textarea>
</div>
</div>
<div className="col-lg-12">
<div className="contact__page-form-item">
<button className="btn-one" type="submit">Submit Now<i className="far fa-chevron-double-right"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div className="col-xl-7 col-lg-7 lg-mb-30">
<div className="contact__page-info">
<h2 className="mb-60 lg-mb-30">Get In Touch</h2>
<div className="contact__page-info-item">
<h6>Office Address<span>:</span></h6>
<span>3891 Ranchview Dr. Richardson, California 62639</span>
</div>
<div className="contact__page-info-item">
<h6>Email Address <span>:</span></h6>
<span>
<a href="mailto:hello.conbix@gmail.com">hello.conbix@gmail.com</a>
<a href="mailto:info.conbix@gmail">info.conbix@gmail.com</a>
</span>
</div>
<div className="contact__page-info-item">
<h6>Phone Number<span>:</span></h6>
<span>
<a href="tel:(+106)935-0120">(+106) 935-0120</a>
<a href="tel:(+107)605-0133">(+107) 605-0133</a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="contact__page-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.15830894606!2d-74.11976383964463!3d40.69766374865767!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1652012644726!5m2!1sen!2sbd" loading="lazy"></iframe>
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ContactUs;

43
src/components/pages/contacts/form.jsx Normal file
View File

@ -0,0 +1,43 @@
import React from 'react';
const Form = () => {
return (
<>
<form action="#">
<div className="row">
<div className="col-md-6 mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="fal fa-user"></span>
<input type="text" name="name" placeholder="Full Name" required="required" />
</div>
</div>
<div className="col-md-6 md-mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="far fa-envelope-open"></span>
<input type="email" name="email" placeholder="Email Address" required="required" />
</div>
</div>
<div className="col-md-12 mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="fal fa-book"></span>
<input type="text" name="subject" placeholder="Subject" />
</div>
</div>
<div className="col-md-12 mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="far fa-comments"></span>
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div className="col-md-12">
<div className="contact__two-right-form-item">
<button className="btn-one" type="submit">Submit Message <i className="far fa-chevron-double-right"></i></button>
</div>
</div>
</div>
</form>
</>
);
};
export default Form;

23
src/components/pages/error/error.jsx Normal file
View File

@ -0,0 +1,23 @@
import Link from 'next/link';
import React from 'react';
const Error = () => {
return (
<div className="error section-padding">
<div className="container">
<div className="row">
<div className="col-xl-12">
<div className="error-page">
<h1>4<span>0</span>4</h1>
<h2>Oops! Page not found.</h2>
<p>The page you are looking for is not available or doesn’t belong to this website!</p>
<Link className="btn-one" href="/">Back to Home</Link>
</div>
</div>
</div>
</div>
</div>
);
};
export default Error;

24
src/components/pages/error/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client";
import SEO from '@/src/components/data/seo';
import HeaderThree from '@/src/components/layout/header/header-three';
import BreadCrumb from '../common/breadcrumb';
import Error from './error';
import FooterThree from '@/src/components/layout/footer/footer-three';
import ScrollToTop from '../common/scroll/scroll-to-top';
const ErrorPage = () => {
return (
<>
<SEO pageTitle='Not Found' />
<HeaderThree />
<BreadCrumb title='Not Found' innerTitle='404' />
<Error />
<div className='all-footer'>
<FooterThree />
</div>
<ScrollToTop />
</>
);
};
export default ErrorPage;

38
src/components/pages/faq/faq.jsx Normal file
View File

@ -0,0 +1,38 @@
import faqData from '@/src/components/data/faq';
const FaqArea = () => {
const { faqOne, faqTwo } = faqData;
return (
<div className="container">
<div className="row">
<div className="col-xl-6 xl-mb-20">
<div id="accordionExamplePage">
{faqOne?.map((data, id) => (
<div className="faq__area-item" key={id}>
<h6 className={data.class} data-bs-toggle="collapse" data-bs-target={`#${data.id}`}>{data.title}</h6>
<div id={data.id} className={data.class2} data-bs-parent="#accordionExamplePage">
<p>{data.des}</p>
</div>
</div>
))}
</div>
</div>
<div className="col-xl-6">
<div id="accordionExampleAbout">
{faqTwo?.map((data, id) => (
<div className="faq__area-item" key={id}>
<h6 className={data.class} data-bs-toggle="collapse" data-bs-target={`#${data.id}`}>{data.title}</h6>
<div id={data.id} className={data.class2} data-bs-parent="#accordionExampleAbout">
<p>{data.des}</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
);
};
export default FaqArea;

26
src/components/pages/faq/index.jsx Normal file
View File

@ -0,0 +1,26 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FaqArea from "./faq";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../common/scroll/scroll-to-top";
const Faq = () => {
return (
<>
<SEO pageTitle='FAQ' />
<HeaderOne />
<BreadCrumb title='Question & Ans.' innerTitle="FAQ's" />
<div className='section-padding'>
<FaqArea />
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default Faq;

74
src/components/pages/homes/home-2/about.jsx Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;

24
src/components/pages/portfolio/2-columns/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/src/components/layout/header/header-three";
import BreadCrumb from "../../common/breadcrumb";
import FooterTwo from "@/src/components/layout/footer/footer-three";
import TwoColumns from "./two-columns";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const PortfolioTowColumns = () => {
return (
<>
<SEO pageTitle='Portfolio Grid - 02 Columns' />
<HeaderOne />
<BreadCrumb title="02 Columns" innerTitle="Portfolio Grid" />
<TwoColumns />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default PortfolioTowColumns;

45
src/components/pages/portfolio/2-columns/two-columns.jsx Normal file
View File

@ -0,0 +1,45 @@
import React, { useState } from 'react';
import portfolioData from '../../../data/portfolio-data';
import Link from 'next/link';
const showPortfolioItem = 4;
const TwoColumns = () => {
const portfolioItem = portfolioData;
const [items, setItems] = useState(portfolioItem);
const [next, setNext] = useState(showPortfolioItem);
const handleLoadData = () => {
setNext(value => value + 2)
}
return (
<div className="project__one section-padding-two">
<div className="container">
<div className="row">
{portfolioItem?.slice(0, next)?.map((data, id) => (
<div className="col-lg-6 mt-25" key={id}>
<div className="project__one-item">
<img src={data.image.src} alt="image" />
<div className="project__one-item-content">
<span>{data.subtitle}</span>
<h4><Link href={`/portfolio/${data.id}`}>{data.title}</Link></h4>
</div>
<div className="project__one-item-icon">
<Link href={`/portfolio/${data.id}`}><i className="fal fa-long-arrow-up"></i></Link>
</div>
</div>
</div>
))}
</div>
{next < items.length && (
<div className="row mt-70">
<div className="col-xl-12 t-center">
<button onClick={handleLoadData} className="btn-one">Load More</button>
</div>
</div>
)}
</div>
</div>
);
};
export default TwoColumns;

24
src/components/pages/portfolio/3-columns/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import ThreeColumns from "./three-columns";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const PortfolioThreeColumns = () => {
return (
<>
<SEO pageTitle='Portfolio Grid - 03 Columns' />
<HeaderOne />
<BreadCrumb title="03 Columns" innerTitle="Portfolio Grid" />
<ThreeColumns />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default PortfolioThreeColumns;

45
src/components/pages/portfolio/3-columns/three-columns.jsx Normal file
View File

@ -0,0 +1,45 @@
import React, { useState } from 'react';
import portfolioData from '../../../data/portfolio-data';
import Link from 'next/link';
const showPortfolioItem = 6;
const ThreeColumns = () => {
const portfolioItem = portfolioData;
const [items, setItems] = useState(portfolioItem);
const [next, setNext] = useState(showPortfolioItem);
const handleLoadData = () => {
setNext(value => value + 2)
}
return (
<div className="project__area-page section-padding-two">
<div className="container">
<div className="row">
{portfolioItem?.slice(0, next)?.map((data, id) => (
<div className="col-xl-4 col-lg-4 col-md-6 mt-30" key={id}>
<div className="project__area-item">
<img src={data.image.src} alt="image" />
<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>
{next < items.length && (
<div className="row mt-70">
<div className="col-xl-12 t-center">
<button onClick={handleLoadData} className="btn-one">Load More</button>
</div>
</div>
)}
</div>
</div>
);
};
export default ThreeColumns;

45
src/components/pages/portfolio/4-columns/four-columns.jsx Normal file
View File

@ -0,0 +1,45 @@
import React, { useState } from 'react';
import Link from 'next/link';
import portfolioData from '../../../data/portfolio-data';
const showPortfolioItem = 4;
const FourColumns = () => {
const portfolioItem = portfolioData;
const [items, setItems] = useState(portfolioItem);
const [next, setNext] = useState(showPortfolioItem);
const handleLoadData = () => {
setNext(value => value + 2)
}
return (
<div className="project__one section-padding-two">
<div className="container-fluid">
<div className="row">
{items?.slice(0, next)?.map((data, id) => (
<div className="col-xl-3 col-lg-4 col-md-6 mt-25" key={id}>
<div className="project__one-item">
<img src={data.image.src} alt="image" />
<div className="project__one-item-content">
<span>{data.subtitle}</span>
<h4><Link href={`/portfolio/${data.id}`}>{data.title}</Link></h4>
</div>
<div className="project__one-item-icon">
<Link href={`/portfolio/${data.id}`}><i className="fal fa-long-arrow-up"></i></Link>
</div>
</div>
</div>
))}
</div>
{next < items.length && (
<div className="row mt-70">
<div className="col-xl-12 t-center">
<button onClick={handleLoadData} className="btn-one">Load More</button>
</div>
</div>
)}
</div>
</div>
);
};
export default FourColumns;

24
src/components/pages/portfolio/4-columns/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/src/components/layout/header/header-three";
import BreadCrumb from "../../common/breadcrumb";
import FooterTwo from "@/src/components/layout/footer/footer-three";
import FourColumns from "./four-columns";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const PortfolioFourColumns = () => {
return (
<>
<SEO pageTitle='Portfolio Grid - 04 Columns' />
<HeaderOne />
<BreadCrumb title="04 Columns" innerTitle="Portfolio Grid" />
<FourColumns />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default PortfolioFourColumns;

24
src/components/pages/portfolio/portfolio-details/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import Headerthree from "@/src/components/layout/header/header-three";
import BreadCrumb from "../../common/breadcrumb";
import PortfolioDetailsMain from "./portfolio-details";
import Footerthree from "@/src/components/layout/footer/footer-three";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const PortfolioDetails = ({singleData}) => {
return (
<>
<SEO pageTitle={singleData?.title} />
< Headerthree />
<BreadCrumb title={singleData?.title} innerTitle={singleData?.title} />
<PortfolioDetailsMain singleData={singleData} />
<div className='all-footer'>
<Footerthree/>
</div>
<ScrollToTop />
</>
);
};
export default PortfolioDetails;

59
src/components/pages/portfolio/portfolio-details/portfolio-details.jsx Normal file
View File

@ -0,0 +1,59 @@
import React from 'react';
const PortfolioDetailsMain = ({ singleData }) => {
return (
<div className="portfolio__details dark__image section-padding">
<div className="container">
<div className="row">
<div className="col-xl-12">
</div>
</div>
<div className="row mt-40">
<div className="col-lg-4 lg-mb-15">
<h3>Vendors</h3>
</div>
<div className="col-lg-8">
<p>
PEI distribution provide supply chain management service to some of the most esteemed
international brands engaged in Information technology, data center, power & telecoms
products. Through the years, we have maintained an excellent partner relationship and
market presence facilitation to manufacturer such as Lenovo, D-link, Vertiv, Epson,
Microsoft, Dell, Logitech, Estap, and Eastman Solar. PEI has in-depth knowledge and
understanding of its fast growing market and a broad local presence such as warehousing
facility and show rooms in Somalia, Djibouti, Ethiopia and Dubai.
</p>
</div>
</div>
<div className="row mt-30 dark_image">
<div className="col-sm-4 sm-mb-25">
<img className="img__full" src="../assets/img/portfolio/111.png" alt="portfolio" />
</div>
<div className="col-sm-4 sm-mb-25">
<img className="img__full" src="../assets/img/portfolio/222.png" alt="portfolio" />
</div>
<div className="col-sm-4">
<img className="img__full" src="../assets/img/portfolio/666.png" alt="portfolio" />
</div>
</div>
<div className="row mt-40">
<div className="col-12">
<h3 className="text-center mb-4">Benefits of being our partners</h3>
</div>
<div className="col-lg-8 offset-lg-2">
<ul className="benefits-list">
<li>No.1 technology distributor in the Horn of Africa</li>
<li>Profound knowledge of local economies</li>
<li>Reseller channel development and support</li>
</ul>
</div>
</div>
</div>
</div>
);
};
export default PortfolioDetailsMain;

25
src/components/pages/portfolio/portfolio-filter/index.jsx Normal file
View File

@ -0,0 +1,25 @@
"use client"
import SEO from "@/src/components/data/seo";
import Headerthree from "@/src/components/layout/header/header-three";
import BreadCrumb from "../../common/breadcrumb";
import PortfolioFilter from "./portfolio-filter";
import Footerthree from "@/src/components/layout/footer/footer-three";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const PortfolioFilterPage = () => {
return (
<>
<SEO pageTitle='Portfolio Filter' />
<Headerthree />
<BreadCrumb title="Portfolio Filter" innerTitle="Portfolio Filter" />
<PortfolioFilter />
<div className='all-footer'>
<Footerthree />
</div>
<ScrollToTop />
</>
);
};
export default PortfolioFilterPage;

60
src/components/pages/portfolio/portfolio-filter/portfolio-filter.jsx Normal file
View File

@ -0,0 +1,60 @@
import React, { useState } from 'react';
import Link from 'next/link';
import portfolioData from '../../../data/portfolio-data';
const filters = [
{ id: 1, name: "All", filterData: "all", },
{ id: 2, name: "Marketing", filterData: "marketing", },
{ id: 3, name: "Business", filterData: "business", },
{ id: 4, name: "Corporate", filterData: "corporate", },
];
const getFilteredProjects = (filterData) => {
if (filterData === "all") {
return portfolioData.filter((project) => project);
}
return portfolioData.filter((project) => project.category === filterData && project);
};
const PortfolioFilter = () => {
const [filter, setFilter] = useState("all");
const filteredProjects = getFilteredProjects(filter);
return (
<>
<div className="team__three section-padding">
<div className="container">
<div className="row mb-30">
<div className="col-xl-12">
<div className="filter_button">
{filters.map(({ id, name, filterData }) => (
<button key={id} onClick={() => setFilter(filterData)}
className={filter === filterData ? "active" : ""}
>{name}</button>
))}
</div>
</div>
</div>
<div className="row">
{filteredProjects?.map((data, id) => (
<div className="col-xl-4 col-md-6 mt-30" key={id}>
<div className="project__one-item">
<img src={data.image.src} alt="image" />
<div className="project__one-item-content">
<span>{data.subtitle}</span>
<h4><Link href={`/portfolio/${data.id}`}>{data.title}</Link></h4>
</div>
<div className="project__one-item-icon">
<Link href={`/portfolio/${data.id}`}><i className="fal fa-long-arrow-up"></i></Link>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</>
);
};
export default PortfolioFilter;

26
src/components/pages/pricing-plans/index.jsx Normal file
View File

@ -0,0 +1,26 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import PricingPlansMain from "./pricing-plans";
import ScrollToTop from "../common/scroll/scroll-to-top";
const PricingPages = () => {
return (
<>
<SEO pageTitle='Pricing Plan' />
<HeaderOne />
<BreadCrumb title='Pricing Plan' innerTitle='Pricing Plan' />
<div className='pricing__area page section-padding'>
<PricingPlansMain />
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default PricingPages;

81
src/components/pages/pricing-plans/pricing-plans.jsx Normal file
View File

@ -0,0 +1,81 @@
import Link from 'next/link';
import React from 'react';
const PricingPlansMain = () => {
return (
<>
<div className="container">
<div className="row">
<div className="col-xl-4 col-lg-6 col-md-6 xl-mb-30">
<div className="pricing__area-item">
<div className="pricing__area-item-price">
<h4>$<span>29</span>.00</h4>
<span className="text-two">Per Month</span>
</div>
<div className="pricing__area-item-title">
<span className="text-two">Start package</span>
<h3>Basic Plan</h3>
</div>
<div className="pricing__area-item-list">
<ul>
<li><i className="fal fa-check"></i>Business consulting</li>
<li><i className="fal fa-check"></i>24/7 Customer Support</li>
<li><i className="fal fa-check"></i>Business Planning</li>
<li><i className="fal fa-times"></i>Digital Business Solution</li>
<li><i className="fal fa-times"></i>Human Research</li>
</ul>
</div>
<Link className="btn-eight" href="/request-quote">Get Started</Link>
</div>
</div>
<div className="col-xl-4 col-lg-6 col-md-6 md-mb-30">
<div className="pricing__area-item">
<div className="pricing__area-item-price">
<h4>$<span>59</span>.00</h4>
<span className="text-two">Per Month</span>
</div>
<div className="pricing__area-item-title">
<span className="text-two">Start package</span>
<h3>Standard Plan</h3>
</div>
<div className="pricing__area-item-list">
<ul>
<li><i className="fal fa-check"></i>Business consulting</li>
<li><i className="fal fa-check"></i>24/7 Customer Support</li>
<li><i className="fal fa-check"></i>Business Planning</li>
<li><i className="fal fa-times"></i>Digital Business Solution</li>
<li><i className="fal fa-check"></i>Human Research</li>
</ul>
</div>
<Link className="btn-eight" href="/request-quote">Get Started</Link>
</div>
</div>
<div className="col-xl-4 col-lg-6 col-md-6">
<div className="pricing__area-item">
<div className="pricing__area-item-price">
<h4>$<span>89</span>.00</h4>
<span className="text-two">Per Month</span>
</div>
<div className="pricing__area-item-title">
<span className="text-two">Start package</span>
<h3>Premium Plan</h3>
</div>
<div className="pricing__area-item-list">
<ul>
<li><i className="fal fa-check"></i>Business consulting</li>
<li><i className="fal fa-check"></i>24/7 Customer Support</li>
<li><i className="fal fa-check"></i>Business Planning</li>
<li><i className="fal fa-check"></i>Digital Business Solution</li>
<li><i className="fal fa-check"></i>Human Research</li>
</ul>
</div>
<Link className="btn-eight" href="/request-quote">Get Started</Link>
</div>
</div>
</div>
</div>
</>
);
};
export default PricingPlansMain;

24
src/components/pages/request-quote/index.jsx Normal file
View File

@ -0,0 +1,24 @@
import SEO from '@/src/components/data/seo';
import HeaderOne from '@/components/layout/headers/header-one';
import React from 'react';
import BreadCrumb from '../common/breadcrumb';
import FooterTwo from '@/components/layout/footers/footer-two';
import RequestQuoteMain from './request-quote';
import ScrollToTop from '../common/scroll/scroll-to-top';
const RequestQuotePage = () => {
return (
<>
<SEO pageTitle="Request Quote" />
<HeaderOne />
<BreadCrumb title="Request Quote" innerTitle="Request Quote" />
<RequestQuoteMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default RequestQuotePage;

94
src/components/pages/request-quote/request-quote.jsx Normal file
View File

@ -0,0 +1,94 @@
import React from 'react';
const RequestQuoteMain = () => {
return (
<div className="request__quote section-padding">
<div className="container">
<div className="row">
<div className="col-xl-12">
<form action="#">
<div className="row">
<div className="col-md-6 mb-30">
<div className="request__quote-item">
<label>Name<span> *</span></label>
<input type="text" name="name" placeholder="First" required />
</div>
</div>
<div className="col-md-6 mt-30 md-mt-0 lg-mb-30">
<div className="request__quote-item">
<input type="text" name="name" placeholder="Last" required />
</div>
</div>
<div className="col-md-6 mb-30">
<div className="request__quote-item">
<label>Email Address<span> *</span></label>
<input type="email" name="email" placeholder="email" required />
</div>
</div>
<div className="col-md-6 lg-mb-30">
<div className="request__quote-item">
<label>Number<span> *</span></label>
<input type="number" name="number" required />
</div>
</div>
<div className="col-md-6 mb-30">
<div className="request__quote-item">
<label>Company/Organization<span> *</span></label>
<input type="text" required />
</div>
</div>
<div className="col-md-6 lg-mb-30">
<div className="request__quote-item">
<label>Website<span> *</span></label>
<input type="text" placeholder="https://" required />
</div>
</div>
<div className="col-md-12 mb-30">
<p className="mb-10">What services can we provide you?<span> *</span></p>
<div className="row">
<div className="col-md-4">
<div className="request__quote-services">
<label><input className="mr-10" type="checkbox" />Optimization (SEO)</label>
<label><input className="mr-10" type="checkbox" />Web Design</label>
<label><input className="mr-10" type="checkbox" />Web Hosting / Maintenance</label>
</div>
</div>
<div className="col-md-4">
<div className="request__quote-services">
<label><input className="mr-10" type="checkbox" />Content Writing</label>
<label><input className="mr-10" type="checkbox" />Search Engine Marketing</label>
<label><input className="mr-10" type="checkbox" />Social Media</label>
</div>
</div>
<div className="col-md-4">
<div className="request__quote-services">
<label><input className="mr-10" type="checkbox" />ADA Compliance</label>
<label><input className="mr-10" type="checkbox" />Photography / Video</label>
<label><input className="mr-10" type="checkbox" />Email Marketing</label>
</div>
</div>
</div>
</div>
<div className="col-md-12 mb-30">
<div className="request__quote-item">
<label>Message<span> *</span></label>
<textarea name="message"></textarea>
</div>
</div>
<div className="col-lg-12">
<p className="mb-10">Join our email list?</p>
<label><input className="mr-10" type="radio" />Yes, Please!</label><br />
<label><input className="mr-10" type="radio" />Not yet, thanks</label>
<p className="description">Join our mailing list to get our blog updates. You can unsubscribe at any time. We respect your privacy and will never share your information.</p>
<button className="btn-one mt-30" type="submit">Submit <i className="far fa-chevron-double-right"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
);
};
export default RequestQuoteMain;

24
src/components/pages/services/service-single/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import ServicesSingleMain from "./services-single";
import SEO from "@/src/components/data/seo";
import ScrollToTop from "../../common/scroll/scroll-to-top";
import FooterTwo from "@/components/layout/footers/footer-two";
const ServicesSingle = ({serviceDetails}) => {
return (
<>
<SEO pageTitle={serviceDetails?.title} />
<HeaderOne />
<BreadCrumb title={serviceDetails?.title} innerTitle={serviceDetails?.title} />
<ServicesSingleMain serviceDetails={serviceDetails}/>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ServicesSingle;

106
src/components/pages/services/service-single/services-single.jsx Normal file
View File

@ -0,0 +1,106 @@
import React from 'react';
import Link from 'next/link';
import servicesData from '@/src/components/data/services-data';
const ServicesSingleMain = ({serviceDetails}) => {
const servicesD = servicesData.slice(0, 5);
return (
<>
<div className="services__details section-padding">
<div className="container">
<div className="row">
<div className="col-xl-4 col-lg-4 order-last order-lg-first">
<div className="all__sidebar">
<div className="all__sidebar-item">
<h4>Our Solutions</h4>
<div className="all__sidebar-item-solution">
<ul>
{servicesD.map((data, id) => (
<li key={id}><Link href={`/services/${data.id}`}><i className="far fa-chevron-double-right"></i>{data.title}<span>({data.number})</span></Link></li>
))}
</ul>
</div>
</div>
<div className="all__sidebar-item">
<h4>Company Profile</h4>
<div className="all__sidebar-item-download">
<ul>
<li><Link href="#"><div><i className="fa-light fa-file-word"></i>Download File</div><span className="fal fa-arrow-to-bottom"></span></Link></li>
<li><Link href="#"><div><i className="fa-light fa-file-pdf"></i>Download Pdf</div><span className="fal fa-arrow-to-bottom"></span></Link></li>
</ul>
</div>
</div>
<div className="all__sidebar-help">
<div className="all__sidebar-help-image">
<img className="img__full" src="../assets/img/pages/help.jpg" alt="image" />
<div className="all__sidebar-help-image-content">
<img src="../assets/img/favicon-1.png" alt="icon" />
<h4>We're Always ready for help You</h4>
<Link className="btn-one" href="/contact">Need Help<i className="far fa-chevron-double-right"></i></Link>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-8 col-lg-8 lg-mb-50">
<div className="services__details-left">
<div className="services__details-left-image dark__image">
<img src={serviceDetails?.image.src} alt="image" />
</div>
<div className="services__details-left-content">
<h2>{serviceDetails?.title}</h2>
<p className="mb-25">Proin molestie nunc id scelerisque facilisis. Nunc efficitur mollis nunc, ac facilisis orci viverra vel. Aliquam rutrum libero sit amet justo consectetur luctus. Duis dolor augue, euismod a accumsan at, commodo a lorem. Donec sit amet nibh condimentum libero</p>
<p className="mb-25">Nunc efficitur mollis nunc, ac facilisis orci viverra vel. Aliquam rutrum libero sit amet justo consectetur luctus. Duis dolor augue, euismod a accumsan at, commodo a lorem.</p>
<div className="services__details-left-content-list">
<span><i className="far fa-check"></i>It's essential to work with business consultants who have</span>
<span><i className="far fa-check"></i>Business consultants may charge by the project or hour, or you may need to pay daily or monthly retainers.</span>
<span><i className="far fa-check"></i>Meet with the board of directors and employees.</span>
</div>
<h3 className="mb-30">Working challenge</h3>
<p className="mb-25">Fusce ornare mauris arcu, eget placerat erat porttitor at. Cras non justo consectetur, tempus lectus a, tempor arcu. Proin luctus sagittis augue,</p>
<div className="services__details-left-content-list bold">
<div className="row">
<div className="col-sm-6 sm-mb-15">
<span><i className="far fa-check"></i>Accounting consulting.</span>
<span><i className="far fa-check"></i>Read all company materials</span>
<span><i className="far fa-check"></i>Financial consultants</span>
</div>
<div className="col-sm-6">
<span><i className="far fa-check"></i>Marketing consultants</span>
<span><i className="far fa-check"></i>Operations consultants</span>
<span><i className="far fa-check"></i>Implementation</span>
</div>
</div>
</div>
<h3>frequently asked questions</h3>
<div className="faq__area mt-35" id="accordionExample">
<div className="faq__area-item">
<h6 className="icon page collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">How do you manage consulting effectively?</h6>
<div id="collapseOne" className="faq__area-item-body collapse" data-bs-parent="#accordionExample">
<p>Pellentesque eget dui tellus. Donec semper tincidunt egestas. Vivamus lectus ipsum, tempor quis mattis in, ornare ut tortor. Praesent condimentum eu turpis ut hendrerit.</p>
</div>
</div>
<div className="faq__area-item">
<h6 className="icon page" data-bs-toggle="collapse" data-bs-target="#collapseTwo">How do consultants solve problems?</h6>
<div id="collapseTwo" className="faq__area-item-body collapse show" data-bs-parent="#accordionExample">
<p>Pellentesque eget dui tellus. Donec semper tincidunt egestas. Vivamus lectus ipsum, tempor quis mattis in, ornare ut tortor. Praesent condimentum eu turpis ut hendrerit.</p>
</div>
</div>
<div className="faq__area-item">
<h6 className="icon page collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree">What is required of a consultant?</h6>
<div id="collapseThree" className="faq__area-item-body collapse" data-bs-parent="#accordionExample">
<p>Pellentesque eget dui tellus. Donec semper tincidunt egestas. Vivamus lectus ipsum, tempor quis mattis in, ornare ut tortor. Praesent condimentum eu turpis ut hendrerit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
};
export default ServicesSingleMain;

44
src/components/pages/services/service-two/cta.jsx Normal file
View File

@ -0,0 +1,44 @@
import Link from "next/link";
import ctaBg from ".././../../../public/assets/img/pages/getInTouchThree.jpg";
const ServiceCta = () => {
return (
<div className="cta__two" style={{backgroundImage: `url(${ctaBg.src})`}}>
<img className="cta__two-shape left-right-animate2" src="assets/img/shape/getInTouch.png" alt="shape" />
<div className="container">
<div className="row align-items-center">
<div className="col-xl-6 col-lg-5 lg-mb-30">
<div className="cta__two-title">
<span className="subtitle-one">Need any Help?</span>
<h2>Have Questions? Let's Connect</h2>
</div>
</div>
<div className="col-xl-6 col-lg-7">
<div className="cta__two-info">
<div className="cta__two-info-item">
<div className="cta__two-info-item-icon">
<i className="fal fa-phone-alt icon-animation"></i>
</div>
<div>
<span>Call us 24/7</span>
<h6><Link href="tel:+125(895)658568">+125 (895) 658 568</Link></h6>
</div>
</div>
<div className="cta__two-info-item">
<div className="cta__two-info-item-icon">
<i className="fal fa-envelope"></i>
</div>
<div>
<span>Mail us anytime</span>
<h6><Link href="mailto:conbix@gmail.com">conbix@gmail.com</Link></h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ServiceCta;

24
src/components/pages/services/service-two/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import ServicesMain from "./service-two";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const ServicePageTwo = () => {
return (
<>
<SEO pageTitle="Services Two" />
<HeaderOne />
<BreadCrumb title="Services Two" innerTitle="Services Two" />
<ServicesMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ServicePageTwo;

34
src/components/pages/services/service-two/service-two.jsx Normal file
View File

@ -0,0 +1,34 @@
import servicesData from '@/src/components/data/services-data';
import Link from 'next/link';
import Testimonial from '../../homes/home/testimonial';
import ServiceCta from './cta';
const ServicesMain = () => {
const servicesItem = servicesData;
return (
<>
<div className="services__page section-padding-two">
<div className="container">
<div className="row">
{servicesItem?.map((data, id) => (
<div className="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>
<ServiceCta />
<Testimonial />
</>
);
};
export default ServicesMain;

24
src/components/pages/services/service/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import ServicesMain from "./services";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const ServicePage = () => {
return (
<>
<SEO pageTitle="Our Services" />
<HeaderOne />
<BreadCrumb title="Our Services" innerTitle="Our Services" />
<ServicesMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default ServicePage;

37
src/components/pages/services/service/services.jsx Normal file
View File

@ -0,0 +1,37 @@
import Link from 'next/link';
import CtaArea from '../../homes/home/cta';
import Solution from './solution';
import Testimonial from '../../homes/home/testimonial';
import servicesData from '@/src/components/data/services-data';
const ServicesMain = () => {
return (
<>
<div className="services__page section-padding-two">
<div className="container">
<div className="row">
{servicesData?.map((data, id) => (
<div className="col-xl-4 col-lg-4 col-md-6 mt-25" key={id}>
<div className="services__three-item page">
<img src={data.image.src} alt="image" />
<div className="services__three-item-content page">
<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>
</div>
))}
</div>
</div>
</div>
<CtaArea />
<Solution />
<Testimonial />
</>
);
};
export default ServicesMain;

48
src/components/pages/services/service/solution.jsx Normal file
View File

@ -0,0 +1,48 @@
import React from 'react';
const Solution = () => {
return (
<div className="solutions__two section-padding">
<div className="container">
<div className="row">
<div className="col-xl-3 col-lg-6 lg-mb-30">
<div className="solutions__two-title">
<span className="subtitle-one">Advance Solutions</span>
<h2>We help for Planing</h2>
<p>Aliquam sit amet massa quis augue porta consequat eu eu lectus. Praesent a ipsum a sem</p>
</div>
</div>
<div className="col-xl-3 col-md-6 xl-mb-30">
<div className="solutions__two-item">
<div className="solutions__two-item-icon">
<img src="assets/img/icon/solutions-1.png" alt="icon" />
</div>
<h4>Digital Consulting</h4>
<p>Pellentesque vitae velit quis ligula vehicula ornare a et quam.</p>
</div>
</div>
<div className="col-xl-3 col-md-6 md-mb-30">
<div className="solutions__two-item">
<div className="solutions__two-item-icon">
<img src="assets/img/icon/solutions-2.png" alt="icon" />
</div>
<h4>Strategic planning</h4>
<p>Pellentesque vitae velit quis ligula vehicula ornare a et quam.</p>
</div>
</div>
<div className="col-xl-3 col-md-6">
<div className="solutions__two-item">
<div className="solutions__two-item-icon">
<img src="assets/img/icon/solutions-3.png" alt="icon" />
</div>
<h4>customer service</h4>
<p>Pellentesque vitae velit quis ligula vehicula ornare a et quam.</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default Solution;

24
src/components/pages/teams/team-2/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import TeamMain from "./team";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const TeamPageTwo = () => {
return (
<>
<SEO pageTitle='Team Two' />
<HeaderOne />
<BreadCrumb title='Team Two' innerTitle='Team Two'/>
<TeamMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default TeamPageTwo;

37
src/components/pages/teams/team-2/team.jsx Normal file
View File

@ -0,0 +1,37 @@
import teamData from "@/src/components/data/team-data";
import Link from "next/link";
const TeamMain = () => {
return (
<>
<div className="team__two section-padding">
<div className="container">
<div className="row">
{teamData.map((data, id) => (
<div className="col-lg-4 col-md-6" key={id}>
<div className="team__two-item">
<div className="team__two-item-image">
<img src={data.image.src} alt="team-image" />
</div>
<div className="team__two-item-content">
<h4><Link href={`/team/${data.id}`}>{data.name}</Link></h4>
<span className='text-eight'>{data.position}</span>
<div className="team__two-item-content-social">
<ul>
{data.social_link.map((social, id) => (
<li key={id}><Link href={social.link} target={social.target}>{social.icon}</Link></li>
))}
</ul>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</>
);
};
export default TeamMain;

24
src/components/pages/teams/team-3/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import TeamMain from "./team";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const TeamPageThree = () => {
return (
<>
<SEO pageTitle='Team Three' />
<HeaderOne />
<BreadCrumb title='Team Three' innerTitle='Team Three'/>
<TeamMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default TeamPageThree;

61
src/components/pages/teams/team-3/team.jsx Normal file
View File

@ -0,0 +1,61 @@
import Link from "next/link";
import teamData from "@/src/components/data/team-data";
import FaqArea from "../../faq/faq";
const TeamMain = () => {
return (
<>
<div className="team__area section-padding-two pb-0 dark__image">
<div className="container">
<div className="row">
{teamData?.map((data, id) => (
<div className="col-lg-4 col-md-6 mt-25" key={id}>
<div className="team__three-item">
<div className="team__three-item-image">
<img src={data.image.src} alt="image" />
<div className="team__three-item-image-info">
<div className="team__three-item-image-info-name">
<span className='text-eight'>{data.position}</span>
<h4><Link href={`/team/${data.id}`}>{data.name}</Link></h4>
</div>
<div className="team__three-item-image-info-icon">
<div className="team__three-item-image-info-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>
</div>
</div>
))}
</div>
<div className="row">
<div className="col-xl-12 mt-50 t-center">
<h6>Consulting With Our Expert Team Members <Link href="/team">Schedule Meeting</Link></h6>
</div>
</div>
</div>
</div>
<div className="faq-area section-padding">
<div className="container">
<div className="row mb-60">
<div className="col-xl-12">
<div className="faq-area-title t-center">
<span className="subtitle-one">Faq Questions</span>
<h2>What Does Conbix Do?</h2>
</div>
</div>
</div>
</div>
<FaqArea />
</div>
</>
);
};
export default TeamMain;

24
src/components/pages/teams/team-filter/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import TeamFilter from "./team-filter";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const TeamFilterPage = () => {
return (
<>
<SEO pageTitle='Team Filter' />
<HeaderOne />
<BreadCrumb title='Team Filter' innerTitle='Team Filter'/>
<TeamFilter />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default TeamFilterPage;

68
src/components/pages/teams/team-filter/team-filter.jsx Normal file
View File

@ -0,0 +1,68 @@
import teamData from '@/src/components/data/team-data';
import Link from 'next/link';
import React, { useState } from 'react';
const filters = [
{ id: 1, name: "All", filterData: "all", },
{ id: 2, name: "Founder", filterData: "founder", },
{ id: 3, name: "Designer", filterData: "designer", },
{ id: 4, name: "Manager", filterData: "manager", },
{ id: 5, name: "Writer", filterData: "writer", },
];
const getFilteredProjects = (filterData) => filterData === "all" ? teamData : teamData.filter((project) => project.category === filterData);
const TeamFilter = () => {
const [filter, setFilter] = useState("all");
const filteredProjects = getFilteredProjects(filter);
return (
<>
<div className="team__three section-padding-two">
<div className="container">
<div className="row mb-30">
<div className="col-xl-12">
<div className="filter_button">
{filters.map(({ id, name, filterData }) => (
<button key={id} onClick={() => setFilter(filterData)}
className={filter === filterData ? "active" : ""}
>{name}</button>
))}
</div>
</div>
</div>
<div className="row">
{filteredProjects?.map((data, id) => (
<div className="col-lg-4 col-md-6 mt-25" key={id}>
<div className="team__three-item">
<div className="team__three-item-image">
<img src={data.image.src} alt="image" />
<div className="team__three-item-image-info">
<div className="team__three-item-image-info-name">
<span className='text-eight'>{data.position}</span>
<h4><Link href={`/team/${data.id}`}>{data.name}</Link></h4>
</div>
<div className="team__three-item-image-info-icon">
<div className="team__three-item-image-info-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>
</div>
</div>
))}
</div>
</div>
</div>
</>
);
};
export default TeamFilter;

24
src/components/pages/teams/team-single/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import TeamSingleMain from "./team-single";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const TeamSingle = ({teamDetails}) => {
return (
<>
<SEO pageTitle={teamDetails?.name} />
<HeaderOne />
<BreadCrumb title={teamDetails?.name} innerTitle={teamDetails?.name} />
<TeamSingleMain teamDetails={teamDetails}/>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default TeamSingle;

145
src/components/pages/teams/team-single/team-single.jsx Normal file
View File

@ -0,0 +1,145 @@
import Link from "next/link";
import SkillBarItem from "../../common/skill-bar";
const TeamSingleMain = ({teamDetails}) => {
return (
<div className="team__single section-padding">
<div className="container">
<div className="row">
<div className="col-xl-5 col-lg-5 lg-mb-30">
<div className="team__single-left">
<div className="team__single-left-thumb dark__image">
<img src={teamDetails.image.src} alt="image" />
<div className="team__single-left-thumb-social">
<ul>
{teamDetails?.social_link.map((social, id) => (
<li key={id}><Link href={social.link} target={social.target}>{social.icon}</Link></li>
))}
</ul>
</div>
</div>
<div className="team__single-left-info">
<span>{teamDetails?.position}</span>
<h3>{teamDetails?.name}</h3>
<div className="team__single-left-info-contact">
<div className="team__single-left-info-contact-item">
<i className="far fa-envelope"></i>
<div className="team__single-left-info-contact-item-info">
<span>Quick Email</span>
<h5><Link href={`mailto:${teamDetails?.mail}`}>{teamDetails?.mail}</Link></h5>
</div>
</div>
<div className="team__single-left-info-contact-item">
<i className="fal fa-phone-alt"></i>
<div className="team__single-left-info-contact-item-info">
<span>Tell With US</span>
<h5><Link href={`tel:${teamDetails?.phone}`}>{teamDetails?.phone}</Link></h5>
</div>
</div>
<div className="team__single-left-info-contact-item mb-45">
<i className="far fa-map-marker-alt"></i>
<div className="team__single-left-info-contact-item-info">
<span>Office Location</span>
<h5><Link href="https://www.google.com/maps" target="_blank">PV3M+X68, United Kingdom</Link></h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-xl-7 col-lg-7">
<div className="team__single-right">
<div className="team__single-right-experience">
<h3>Career Guidelines</h3>
<p>This involves assessing one's skills, interests, values, and personality traits to identify suitable career paths. Self-assessment can be done through career tests, online resources, or working with a career counselor.</p>
<p>Employers look for candidates with specific skills and abilities. Individuals should focus on developing the skills and competencies needed for their desired career through education, training, and work experience.</p>
<p>Different careers require different levels of education and training. Individuals should research the educational requirements for their desired career and develop a plan to acquire the necessary education and credentials. Continuing education and professional development.</p>
</div>
<div className="team__single-right-skill">
<h3>Professional Skills</h3>
<p>These are the skills required to operate specific tools, software, or equipment in a particular field. For example, a web developer needs to have technical skills in programming languages like HTML, CSS, and JavaScript.</p>
<div className="skill__area">
<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={78} />
</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={65} />
</div>
</div>
<div className="skill__area-item">
<div className="skill__area-item-content">
<span className="text-two">Web Application</span>
</div>
<div className="skill__area-item-inner">
<SkillBarItem countUp={80} />
</div>
</div>
</div>
</div>
<div className="team__single-right-form">
<form action="#">
<div className="row">
<div className="col-md-6 mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="fal fa-user"></span>
<input type="text" name="name" placeholder="Full Name" />
</div>
</div>
<div className="col-md-6 md-mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="far fa-envelope-open"></span>
<input type="email" name="email" placeholder="Email Address" />
</div>
</div>
<div className="col-md-6 mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="fal fa-phone-alt"></span>
<input type="text" name="number" placeholder="Phone Number" />
</div>
</div>
<div className="col-md-6 md-mb-30">
<div className="team__single-right-form-select">
<select>
<option value="Select Service">Select Service</option>
<option value="home-insurance">Home Insurance</option>
<option value="life-insurance">Health Insurance</option>
<option value="car-insurance">Car Insurance</option>
<option value="health-insurance">Health Insurance</option>
<option value="family-insurance">Family Insurance</option>
<option value="fire-insurance">Fire Insurance</option>
</select>
</div>
</div>
<div className="col-md-12 mb-30">
<div className="contact__two-right-form-item contact-item">
<span className="far fa-comments"></span>
<textarea name="message" placeholder="Message"></textarea>
</div>
</div>
<div className="col-md-12">
<div className="contact__two-right-form-item">
<button className="btn-one" type="submit">Submit Message</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default TeamSingleMain;

24
src/components/pages/teams/team/index.jsx Normal file
View File

@ -0,0 +1,24 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../../common/breadcrumb";
import TeamMain from "./team";
import FooterTwo from "@/components/layout/footers/footer-two";
import ScrollToTop from "../../common/scroll/scroll-to-top";
const TeamPage = () => {
return (
<>
<SEO pageTitle='Our Team' />
<HeaderOne />
<BreadCrumb title='Our Team' innerTitle='Our Team'/>
<TeamMain />
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default TeamPage;

59
src/components/pages/teams/team/team.jsx Normal file
View File

@ -0,0 +1,59 @@
import Link from 'next/link';
import teamData from '../../../data/team-data';
import FaqArea from '../../faq/faq';
const TeamMain = () => {
return (
<>
<div className="team__area section-padding-two pb-0 dark__image">
<div className="container">
<div className="row">
{teamData.map((data, id) => (
<div className="col-lg-4 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 page">
<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 page">
<h5><Link href={`/team/${data.id}`}>{data.name}</Link></h5>
<span className='text-eight'>{data.position}</span>
</div>
</div>
</div>
))}
</div>
<div className="row">
<div className="col-xl-12 mt-70 t-center">
<h6>Consulting With Our Expert Team Members <Link href="/team">Schedule Meeting</Link></h6>
</div>
</div>
</div>
</div>
<div className="faq-area section-padding">
<div className="container">
<div className="row mb-60">
<div className="col-xl-12">
<div className="faq-area-title t-center">
<span className="subtitle-one">Faq Questions</span>
<h2>What Does Conbix Do?</h2>
</div>
</div>
</div>
</div>
<FaqArea />
</div>
</>
);
};
export default TeamMain;

26
src/components/pages/testimonial/index.jsx Normal file
View File

@ -0,0 +1,26 @@
"use client"
import SEO from "@/src/components/data/seo";
import HeaderOne from "@/components/layout/headers/header-one";
import BreadCrumb from "../common/breadcrumb";
import FooterTwo from "@/components/layout/footers/footer-two";
import TestimonialMain from "./testimonial";
import ScrollToTop from "../common/scroll/scroll-to-top";
const Testimonial = () => {
return (
<>
<SEO pageTitle='Testimonials' />
<HeaderOne />
<BreadCrumb title='Testimonials' innerTitle='Testimonials' />
<div className='pricing__area page'>
<TestimonialMain />
</div>
<div className='all-footer'>
<FooterTwo />
</div>
<ScrollToTop />
</>
);
};
export default Testimonial;

42
src/components/pages/testimonial/testimonial.jsx Normal file
View File

@ -0,0 +1,42 @@
import testimonialData from '@/src/components/data/testimonial-data';
import React from 'react';
const TestimonialMain = () => {
return (
<div className="testimonial__two section-padding-two">
<div className="container">
<div className="row">
{testimonialData?.map((data, id) => (
<div className="col-xl-4 col-md-6 mt-25" key={id}>
<div className="testimonial__two-item">
<div className="testimonial__two-item-top">
<img src="assets/img/icon/quotes.png" alt="icon" />
<div className="testimonial__two-item-top-reviews">
<h6>{data.service}</h6>
<ul>
<li><i className="fas fa-star"></i></li>
<li><i className="fas fa-star"></i></li>
<li><i className="fas fa-star"></i></li>
<li><i className="fas fa-star"></i></li>
<li><i className="fas fa-star"></i></li>
</ul>
</div>
</div>
<p>{data.des}</p>
<div className="testimonial__two-item-bottom">
<img src={data.avatar.src} alt="avaatar-image" />
<div className="testimonial__two-item-bottom-name">
<h5>{data.name}</h5>
<span>{data.position}</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
);
};
export default TestimonialMain;