pushing all files

src/app/(frontend)/[not-found]/page.jsx

@@ -0,0 +1,12 @@
+import ErrorPage from '@/src/components/pages/error';
+import React from 'react';
+
+const NotFound = () => {
+    return (
+        <>
+            <ErrorPage />         
+        </>
+    );
+};
+
+export default NotFound;

src/app/(frontend)/about-us/page.jsx

@@ -0,0 +1,11 @@
+import AboutUs from "@/src/components/pages/about";
+
+const About = () => {
+    return (
+        <>
+            <AboutUs />
+        </>
+    );
+};
+
+export default About;

src/app/(frontend)/blog-standard/page.jsx

@@ -0,0 +1,12 @@
+import BlogStandardPage from "@/src/components/pages/blogs/blog-standard";
+
+
+const BlogStandard = () => {
+    return (
+        <>
+            <BlogStandardPage />            
+        </>
+    );
+};
+
+export default BlogStandard;

src/app/(frontend)/blog/[id]/page.jsx

@@ -0,0 +1,20 @@
+"use client"
+import { useParams, useRouter } from "next/navigation";
+import blogData from '@/src/components/data/blog-data';
+import BlogDetails from '@/src/components/pages/blogs/blog-details';
+
+const BlogDetail = () => {
+    const params = useParams();
+    const singleData = blogData?.find((blog) => blog.id === params.id);
+    const router = useRouter();
+    if (!singleData) {
+        return router.push("/404-error");
+    }
+    return (
+        <>
+            <BlogDetails singleData={singleData} />
+        </>
+    );
+};
+
+export default BlogDetail;

src/app/(frontend)/blog/page.jsx

@@ -0,0 +1,12 @@
+import BlogGrid from "@/src/components/pages/blogs/blog";
+
+
+const Blog = () => {
+    return (
+        <>
+            <BlogGrid />
+        </>
+    );
+};
+
+export default Blog;

src/app/(frontend)/contact-four/page.jsx

@@ -0,0 +1,12 @@
+import ContactFour from '@/src/components/pages/contacts/contact-four';
+import React from 'react';
+
+const ContactPage = () => {
+    return (
+        <>
+            <ContactFour />            
+        </>
+    );
+};
+
+export default ContactPage;

src/app/(frontend)/contact-three/page.jsx

@@ -0,0 +1,12 @@
+import ContactThree from '@/src/components/pages/contacts/contact-three';
+import React from 'react';
+
+const ContactPage = () => {
+    return (
+        <>
+            <ContactThree />
+        </>
+    );
+};
+
+export default ContactPage;

src/app/(frontend)/contact-two/page.jsx

@@ -0,0 +1,12 @@
+import ContactTwo from '@/src/components/pages/contacts/contact-two';
+import React from 'react';
+
+const ContactPage = () => {
+    return (
+        <>
+            <ContactTwo />            
+        </>
+    );
+};
+
+export default ContactPage;

src/app/(frontend)/contact/page.jsx

@@ -0,0 +1,12 @@
+import ContactUs from '@/src/components/pages/contacts/contact';
+import React from 'react';
+
+const ContactPage = () => {
+    return (
+        <>
+            <ContactUs />            
+        </>
+    );
+};
+
+export default ContactPage;

src/app/(frontend)/faq/page.jsx

@@ -0,0 +1,11 @@
+import Faq from "@/src/components/pages/faq";
+
+const FaqPage = () => {
+    return (
+        <>
+            <Faq />
+        </>
+    );
+};
+
+export default FaqPage;

src/app/(frontend)/globals.css

@@ -0,0 +1,14 @@
+@import 'react-modal-video/css/modal-video.min.css';
+@import 'bootstrap/dist/css/bootstrap.min.css';
+@import "swiper/css/bundle";
+@import "../../../public/assets/css/animate.css";
+@import "../../../public/assets/css/fontawesome.css";
+@import "../../../public/assets/css/meanmenu.min.css";
+@import "../../../public/assets/sass/style.css";
+@import "../../../public/assets/font/flaticon_conbix.css";
+@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&display=swap');
+
+
+
+/* @import "../../../../public/assets/css/animate.css"; */

src/app/(frontend)/home-three/page.jsx

@@ -0,0 +1,11 @@
+import HomeThree from "@/src/components/pages/homes/home-3";
+
+const HomeThr = () => {
+    return (
+        <>
+            <HomeThree addClass="three" />
+        </>
+    );
+};
+
+export default HomeThr;

src/app/(frontend)/home-two/page.jsx

@@ -0,0 +1,11 @@
+import HomeTwo from "@/src/components/pages/homes/home-2";
+
+const About = () => {
+    return (
+        <>
+            <HomeTwo addClass="two" />
+        </>
+    );
+};
+
+export default About;

src/app/(frontend)/layout.jsx

@@ -0,0 +1,27 @@
+"use client"
+import { useEffect } from 'react';
+import "./globals.css";
+import SwitchTab from '@/components/pages/common/dark-light';
+//import SwitchTab from '../../pages/common/dark-light';
+//import SwitchTab from '@/src/components/pages/common/dark-light';
+
+//import SwitchTab from '@/src/components/pages/common/dark-light';
+
+
+export default function RootLayout({ children }) {
+    useEffect(() => {
+        require('bootstrap/dist/js/bootstrap.min.js');
+    }, []);
+
+    return (
+        <html lang="en">
+            <head>
+                <link rel='icon' type='image/png' href='../favicon.ico' />
+            </head>
+            <body>
+                <SwitchTab />
+                {children}
+            </body>
+        </html>
+    );
+}

src/app/(frontend)/page.jsx

@@ -0,0 +1,9 @@
+import HomeOne from "@/components/pages/homes/home";
+
+export default function Home() {
+    return (
+        <>
+            <HomeOne />
+        </>
+    );
+}

src/app/(frontend)/portfolio-filter/page.jsx

@@ -0,0 +1,11 @@
+import PortfolioFilterPage from "@/src/components/pages/portfolio/portfolio-filter";
+
+const PortfolioFilter = () => {
+    return (
+        <>
+            <PortfolioFilterPage />            
+        </>
+    );
+};
+
+export default PortfolioFilter;

src/app/(frontend)/portfolio/2-columns/page.jsx

@@ -0,0 +1,11 @@
+import PortfolioTwoColumns from "@/src/components/pages/portfolio/2-columns";
+
+const TwoColumns = () => {
+    return (
+        <>
+            <PortfolioTwoColumns />            
+        </>
+    );
+};
+
+export default TwoColumns;

src/app/(frontend)/portfolio/3-columns/page.jsx

@@ -0,0 +1,11 @@
+import PortfolioThreeColumns from "@/src/components/pages/portfolio/3-columns";
+
+const ThreeColumns = () => {
+    return (
+        <>
+            <PortfolioThreeColumns />            
+        </>
+    );
+};
+
+export default ThreeColumns;

src/app/(frontend)/portfolio/4-columns/page.jsx

@@ -0,0 +1,11 @@
+import PortfolioFourColumns from "@/src/components/pages/portfolio/4-columns";
+
+const FourColumns = () => {
+    return (
+        <>
+            <PortfolioFourColumns />            
+        </>
+    );
+};
+
+export default FourColumns;

src/app/(frontend)/portfolio/[id]/page.jsx

@@ -0,0 +1,20 @@
+"use client"
+import { useParams, useRouter } from "next/navigation";
+import portfolioData from '@/src/components/data/portfolio-data';
+import PortfolioDetails from "@/src/components/pages/portfolio/portfolio-details";
+
+const PortfolioDetail = () => {
+    const params = useParams();
+    const singleData = portfolioData?.find((portfolio) => portfolio.id === params.id);
+    const router = useRouter();
+    if (!singleData) {
+        return router.push("/404-error");
+    }
+    return (
+        <>
+            <PortfolioDetails singleData={singleData} />
+        </>
+    );
+};
+
+export default PortfolioDetail;

src/app/(frontend)/pricing-plans/page.jsx

@@ -0,0 +1,11 @@
+import PricingPages from "@/src/components/pages/pricing-plans";
+
+const Pricing = () => {
+    return (
+        <>
+            <PricingPages />            
+        </>
+    );
+};
+
+export default Pricing;

src/app/(frontend)/request-quote/page.jsx

@@ -0,0 +1,11 @@
+import RequestQuote from "@/src/components/pages/request-quote";
+
+const RequestQuotePage = () => {
+    return (
+        <>
+            <RequestQuote />            
+        </>
+    );
+};
+
+export default RequestQuotePage;

src/app/(frontend)/services-two/page.jsx

@@ -0,0 +1,12 @@
+import ServicePageTwo from '@/src/components/pages/services/service-two';
+import React from 'react';
+
+const ServiceTwo = () => {
+    return (
+        <>
+            <ServicePageTwo />
+        </>
+    );
+};
+
+export default ServiceTwo;

src/app/(frontend)/services/[id]/page.jsx

@@ -0,0 +1,20 @@
+"use client"
+import { useParams, useRouter } from "next/navigation";
+import ServicesSingle from '@/src/components/pages/services/service-single';
+import servicesData from '@/src/components/data/services-data';
+
+const ServicesDetail = () => {
+    const params = useParams();
+    const serviceDetails = servicesData?.find((service) => service.id === params.id);
+    const router = useRouter();
+    if (!serviceDetails) {
+        return router.push("/404-error");
+    }
+    return (
+        <>
+            <ServicesSingle serviceDetails={serviceDetails} />
+        </>
+    );
+};
+
+export default ServicesDetail;

src/app/(frontend)/services/page.jsx

@@ -0,0 +1,12 @@
+import ServicePage from '@/src/components/pages/services/service';
+import React from 'react';
+
+const ServicePages = () => {
+    return (
+        <>
+            <ServicePage />
+        </>
+    );
+};
+
+export default ServicePages;

src/app/(frontend)/team-filter/page.jsx

@@ -0,0 +1,11 @@
+import TeamFilterPage from "@/src/components/pages/teams/team-filter";
+
+const TeamFilter = () => {
+    return (
+        <>
+            <TeamFilterPage />
+        </>
+    );
+};
+
+export default TeamFilter;

src/app/(frontend)/team-three/page.jsx

@@ -0,0 +1,11 @@
+import TeamPageThree from "@/src/components/pages/teams/team-3";
+
+const TeamPage = () => {
+    return (
+        <div>
+            <TeamPageThree />
+        </div>
+    );
+};
+
+export default TeamPage;

src/app/(frontend)/team-two/page.jsx

@@ -0,0 +1,11 @@
+import TeamPageTwo from "@/src/components/pages/teams/team-2";
+
+const TeamPage = () => {
+    return (
+        <>
+            <TeamPageTwo />            
+        </>
+    );
+};
+
+export default TeamPage;

src/app/(frontend)/team/[id]/page.jsx

@@ -0,0 +1,21 @@
+"use client"
+import React from 'react';
+import { useParams, useRouter } from "next/navigation";
+import teamData from '@/src/components/data/team-data';
+import TeamSingle from '@/src/components/pages/teams/team-single';
+
+const TeamMembers = () => {
+    const params = useParams();
+    const teamDetails = teamData.find((team) => team.id === params.id);
+    const router = useRouter();
+    if (!teamDetails) {
+        return router.push("/404-error");
+    }
+    return (
+        <>
+            <TeamSingle teamDetails={teamDetails} />
+        </>
+    );
+};
+
+export default TeamMembers;

src/app/(frontend)/team/page.jsx

@@ -0,0 +1,11 @@
+import TeamPage from '@/src/components/pages/teams/team';
+
+const Team = () => {
+    return (
+        <>
+            <TeamPage />
+        </>
+    );
+};
+
+export default Team;

src/app/(frontend)/testimonial/page.jsx

@@ -0,0 +1,11 @@
+import Testimonial from "@/src/components/pages/testimonial";
+
+const TestimonialPage = () => {
+    return (
+        <>
+            <Testimonial />            
+        </>
+    );
+};
+
+export default TestimonialPage;

src/app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,24 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { NotFoundPage, generatePageMetadata } from '@payloadcms/next/views'
+import { importMap } from '../importMap'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams, importMap })
+
+export default NotFound

src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,24 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from 'next'
+
+import config from '@payload-config'
+import { RootPage, generatePageMetadata } from '@payloadcms/next/views'
+import { importMap } from '../importMap'
+
+type Args = {
+  params: Promise<{
+    segments: string[]
+  }>
+  searchParams: Promise<{
+    [key: string]: string | string[]
+  }>
+}
+
+export const generateMetadata = ({ params, searchParams }: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams })
+
+const Page = ({ params, searchParams }: Args) =>
+  RootPage({ config, params, searchParams, importMap })
+
+export default Page

src/app/(payload)/admin/importMap.js

@@ -0,0 +1 @@
+export const importMap = {}

src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,19 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import {
+  REST_DELETE,
+  REST_GET,
+  REST_OPTIONS,
+  REST_PATCH,
+  REST_POST,
+  REST_PUT,
+} from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)
+export const PUT = REST_PUT(config)
+export const OPTIONS = REST_OPTIONS(config)

src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,7 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import { GRAPHQL_POST, REST_OPTIONS } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)
+
+export const OPTIONS = REST_OPTIONS(config)

src/app/(payload)/layout.tsx

@@ -0,0 +1,31 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import config from '@payload-config'
+import '@payloadcms/next/css'
+import type { ServerFunctionClient } from 'payload'
+import { handleServerFunctions, RootLayout } from '@payloadcms/next/layouts'
+import React from 'react'
+
+import { importMap } from './admin/importMap.js'
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const serverFunction: ServerFunctionClient = async function (args) {
+  'use server'
+  return handleServerFunctions({
+    ...args,
+    config,
+    importMap,
+  })
+}
+
+const Layout = ({ children }: Args) => (
+  <RootLayout config={config} importMap={importMap} serverFunction={serverFunction}>
+    {children}
+  </RootLayout>
+)
+
+export default Layout

src/components/data/banner-data.jsx

@@ -0,0 +1,76 @@
+import banner1 from "../../public/assets/img/banner/banner-7.jpg";
+import banner2 from "../../public/assets/img/banner/banner-3.png";
+import banner3 from "../../public/assets/img/banner/banner-4.png";
+import banner4 from "../../public/assets/img/banner/banner-5.jpg";
+import banner5 from "../../public/assets/img/banner/banner-6.jpg";
+import banner6 from "../../public/assets/img/banner/banner-1.jpg";
+import banner7 from "../../public/assets/img/banner/banner-2.jpg";
+
+const bannerData = [
+    {
+        id: 1,
+        subtitle: 'Insurance Agency',
+        title: 'Invest in Your Health',
+        button: 'Our Services',
+        count: 500,
+        countTitle: 'Customers',
+        image: banner1,
+        banner_1: true,
+    },
+    {
+        id: 2,
+        subtitle: "Best Insurance Agency",
+        title: "Secure Your Business Future.",
+        des: "Understand how premiums are calculated and inquire about any discounts or factors that could affect the cost of your insurance.",
+        button: 'Discover More',
+        image: banner2,
+        banner_2: true,
+    },
+    {
+        id: 3,
+        subtitle: "Insure peace of mind",
+        title: "Get Reliable Insurance.",
+        des: "If you have any doubts or concerns about the insurance policy, coverage, or terms, ask the insurance company for clarification.",
+        button: 'Discover More',
+        image: banner3,
+        banner_2: true,
+    },
+    {
+        id: 4,
+        subtitle: "Insurance Agency",
+        title: "Protect Fire Damage.",
+        des: "Choose us for comprehensive insurance coverage that safeguards what Matters most, personalized to your unique needs.",
+        button: 'Discover More',
+        image: banner4,
+        banner_3: true,
+    },
+    {
+        id: 5,
+        subtitle: "Insure peace of mind",
+        title: "Cover Your Wind Damage.",
+        des: "Choose us for comprehensive insurance coverage that safeguards what Matters most, personalized to your unique needs.",
+        button: 'Discover More',
+        image: banner5,
+        banner_3: true,
+    },
+    {
+        id: 6,
+        subtitle: "Secure your world now",
+        title: "Customize Solutions for Lifestyle",
+        button: 'Discover More',
+        image: banner6,
+        dark_image: "/assets/img/banner/banner-1-dark.jpg",
+        banner_4: true,
+    },
+    {
+        id: 7,
+        subtitle: "Insure peace of mind",
+        title: "Protecting your life and future",
+        button: 'Discover More',
+        image: banner7,
+        dark_image: "/assets/img/banner/banner-2-dark.jpg",
+        banner_4: true,
+    },
+];
+
+export default bannerData;

src/components/data/blog-data.jsx

@@ -0,0 +1,70 @@
+// import image1 from "../../public/assets/img/blog/99.png";
+// import image2 from "../../public/assets/img/blog/100.png";
+// import image3 from "../../public/assets/img/blog/22.png";
+
+// const blogData = [
+//     {
+//         number: '01',
+//         id: 'revamp-your-business-with-expert-consulting',
+//         date: '10',
+//         comment: '2',
+        
+//         title: 'Training Continues training on new products and technolgy',
+//         des: 'Experts say some good first steps in starting business are researching',
+//         image: image1,
+//     },
+//     {
+//         number: '02',
+//         id: 'drive-business-growth-with-our-consulting',
+//         date: '12',
+//         comment: '3',
+//         title: 'Credit with favourable payment terms',
+//         des: 'Experts say some good first steps in starting business are researching',
+//         image: image2,
+//     },
+//     {
+//         number: '03',
+//         id: 'teaching-and-training-employees',
+//         date: '13',
+//         comment: '6',
+//         title: 'Incentives Regular incentive schemes such as, gift vouchers, cash back andmany more',
+//         des: 'Experts say some good first steps in starting business are researching',
+//         image: image3,
+//     },
+   
+// ];
+
+// export default blogData;
+
+
+const blogData = [
+  {
+    number: '01',
+    id: 'revamp-your-business-with-expert-consulting',
+    date: '10',
+    comment: '2',
+    title: 'Training Continues training on new products and technolgy',
+    des: 'Experts say some good first steps in starting business are researching',
+    image: '/assets/img/blog/99.png',
+  },
+  {
+    number: '02',
+    id: 'drive-business-growth-with-our-consulting',
+    date: '12',
+    comment: '3',
+    title: 'Credit with favourable payment terms',
+    des: 'Experts say some good first steps in starting business are researching',
+    image: '/assets/img/blog/100.png',
+  },
+  {
+    number: '03',
+    id: 'teaching-and-training-employees',
+    date: '13',
+    comment: '6',
+    title: 'Incentives Regular incentive schemes such as, gift vouchers, cash back and many more',
+    des: 'Experts say some good first steps in starting business are researching',
+    image: '/assets/img/blog/22.png',
+  },
+];
+
+export default blogData;

src/components/data/faq.jsx

@@ -0,0 +1,14 @@
+
+const faqData = {
+    faqOne: [
+        {id:'collapseOnePage',class: 'icon page collapsed',class2: 'faq__area-item-body collapse',title:'Why hire business consultants ?', des: 'Consultants work with clients to identify specific challenges or areas for improvement within the organization. This could include issues such as declining sales, inefficient operations.'},
+        {id:'collapseTwoPage',class: 'icon page',class2: 'faq__area-item-body collapse show',title:'What is strategic consulting ?', des: 'Consultants work with clients to identify specific challenges or areas for improvement within the organization. This could include issues such as declining sales, inefficient operations.'},
+        {id:'collapseThreePage',class: 'icon page collapsed',class2: 'faq__area-item-body collapse',title:'When seek outside expertise ?', des: 'Consultants work with clients to identify specific challenges or areas for improvement within the organization. This could include issues such as declining sales, inefficient operations.'},
+    ],
+    faqTwo: [
+        {id:'collapseTwoAbout',class: 'icon page',class2: 'faq__area-item-body collapse show',title:'Where find top consultants ?', des: 'Consultants work with clients to identify specific challenges or areas for improvement within the organization. This could include issues such as declining sales, inefficient operations.'},
+        {id:'collapseOneAbout',class: 'icon page collapsed',class2: 'faq__area-item-body collapse',title:'Who are reputable consultants ?', des: 'Consultants work with clients to identify specific challenges or areas for improvement within the organization. This could include issues such as declining sales, inefficient operations.'},
+        {id:'collapseThreeAbout',class: 'icon page collapsed',class2: 'faq__area-item-body collapse',title:'How measure consulting success?', des: 'Consultants work with clients to identify specific challenges or areas for improvement within the organization. This could include issues such as declining sales, inefficient operations.'},
+    ],
+}
+export default faqData;

src/components/data/portfolio-data.jsx

@@ -0,0 +1,101 @@
+// import image1 from "../../public/assets/img/portfolio/1.jpg";
+// import image2 from "../../public/assets/img/portfolio/2.jpg";
+// import image3 from "../../public/assets/img/portfolio/3.jpg";
+// import image4 from "../../public/assets/img/portfolio/4.png";
+// import image5 from "../../public/assets/img/portfolio/5.jpg";
+// import image6 from "../../public/assets/img/portfolio/6.png";
+
+// const portfolioData = [
+//     {        
+//         id: 'revenue-growth',
+//         title: 'Revenue Growth',
+//         subtitle: 'Design',
+//         image: image1,
+//         category: "marketing",
+//     },
+//     {        
+//         id: 'digital-consulting',
+//         title: 'Digital Consulting',
+//         subtitle: 'Consulting',
+//         image: image2,
+//         category: "corporate",
+//     },
+//     {        
+//         id: 'business-strategy',
+//         title: 'Business Strategy',
+//         subtitle: 'Finance',
+//         image: image3,
+//         category: "business",
+//     },
+//     {        
+//         id: 'audit-marketing',
+//         title: 'Audit Marketing',
+//         subtitle: 'Marketing',
+//         image: image4,
+//         category: "marketing",
+//     },
+//     {        
+//         id: 'business-analytics',
+//         title: 'Vendore',
+//         subtitle: 'Corporate',
+//         image: image5,
+//         category: "corporate",
+//     },
+//     {        
+//         id: 'digital-business',
+//         title: 'Digital Business',
+//         subtitle: 'Finance',
+//         image: image6,
+//         category: "business",
+//     },
+// ];
+
+// export default portfolioData;
+
+
+const portfolioData = [
+  {        
+    id: 'revenue-growth',
+    title: 'Revenue Growth',
+    subtitle: 'Design',
+    image: '/assets/img/portfolio/1.jpg',
+    category: "marketing",
+  },
+  {        
+    id: 'digital-consulting',
+    title: 'Digital Consulting',
+    subtitle: 'Consulting',
+    image: '/assets/img/portfolio/2.jpg',
+    category: "corporate",
+  },
+  {        
+    id: 'business-strategy',
+    title: 'Business Strategy',
+    subtitle: 'Finance',
+    image: '/assets/img/portfolio/3.jpg',
+    category: "business",
+  },
+  {        
+    id: 'audit-marketing',
+    title: 'Audit Marketing',
+    subtitle: 'Marketing',
+    image: '/assets/img/portfolio/4.png',
+    category: "marketing",
+  },
+  {        
+    id: 'business-analytics',
+    title: 'Vendore',
+    subtitle: 'Corporate',
+    image: '/assets/img/portfolio/5.jpg',
+    category: "corporate",
+  },
+  {        
+    id: 'digital-business',
+    title: 'Digital Business',
+    subtitle: 'Finance',
+    image: '/assets/img/portfolio/6.png',
+    category: "business",
+  },
+];
+
+export default portfolioData;

src/components/data/seo.jsx

@@ -0,0 +1,10 @@
+"use client";
+import { useEffect } from "react";
+
+const SEO = ({ pageTitle }) => {
+  useEffect(() => {
+    document.title = pageTitle + " - Conbix - Business Consulting Next js Template";
+  }, []);
+};
+
+export default SEO;

src/components/data/services-data.jsx

@@ -0,0 +1,102 @@
+// import image1 from "../../public/assets/img/service/pimage_8_philips.png";
+// import image2 from "../../public/assets/img/service/pimage_6_dlink.png";
+// import image3 from "../../public/assets/img/service/pimage_6_hp.png";
+// import image4 from "../../public/assets/img/service/service-4.jpg";
+// import image5 from "../../public/assets/img/service/pimage_8_philips.png";
+// import image6 from "../../public/assets/img/service/service-6.jpg";
+
+// const servicesData = [
+//     {
+//         id: 'business-model',
+//         title: 'Business Model',
+//         description: 'We conduct a thorough analysis of your existing business model',
+//         number: '1',
+//         image: image1,
+//     },
+//     {
+//         id: 'digital-solutions',
+//         title: 'Digital Solutions',
+//         description: 'Streamline operations and improve collaboration with cloud',
+//         number: '2',
+//         image: image2,
+//     },
+//     {
+//         id: 'machine-learning',
+//         title: 'Machine Learning',
+//         description: 'Machine Learning leverages the power of algorithms',
+//         number: '3',
+//         image: image3,
+//     },
+//     {
+//         id: 'audit-marketing',
+//         title: 'Audit Marketing',
+//         description: 'We map out the customer journey to understand how your target',
+//         number: '4',
+//         image: image4,
+//     },
+//     {
+//         id: 'business-consulting',
+//         title: 'Business Consulting',
+//         description: 'Our team of seasoned consultants collaborates closely',
+//         number: '5',
+//         image: image5,
+//     },
+//     {
+//         id: 'human-research',
+//         title: 'Human research',
+//         description: 'This can involve orientation for new hires, skill development,',
+//         number: '6',
+//         image: image6,
+//     },
+// ];
+
+// export default servicesData;
+
+
+
+const servicesData = [
+  {
+    id: 'business-model',
+    title: 'Business Model',
+    description: 'We conduct a thorough analysis of your existing business model',
+    number: '1',
+    image: '/assets/img/service/pimage_8_philips.png',
+  },
+  {
+    id: 'digital-solutions',
+    title: 'Digital Solutions',
+    description: 'Streamline operations and improve collaboration with cloud',
+    number: '2',
+    image: '/assets/img/service/pimage_6_dlink.png',
+  },
+  {
+    id: 'machine-learning',
+    title: 'Machine Learning',
+    description: 'Machine Learning leverages the power of algorithms',
+    number: '3',
+    image: '/assets/img/service/pimage_6_hp.png',
+  },
+  {
+    id: 'audit-marketing',
+    title: 'Audit Marketing',
+    description: 'We map out the customer journey to understand how your target',
+    number: '4',
+    image: '/assets/img/service/service-4.jpg',
+  },
+  {
+    id: 'business-consulting',
+    title: 'Business Consulting',
+    description: 'Our team of seasoned consultants collaborates closely',
+    number: '5',
+    image: '/assets/img/service/pimage_8_philips.png',
+  },
+  {
+    id: 'human-research',
+    title: 'Human research',
+    description: 'This can involve orientation for new hires, skill development,',
+    number: '6',
+    image: '/assets/img/service/service-6.jpg',
+  },
+];
+
+export default servicesData;

src/components/data/social.jsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+import React from 'react';
+
+const Social = () => {
+    return (
+        <>
+            <ul>
+                <li><Link href="https://www.facebook.com" target="_blank"><i className="fab fa-facebook-f"></i></Link></li>
+                <li><Link href="https://twitter.com" target="_blank"><i className="fa-brands fa-x-twitter"></i></Link></li>
+                <li><Link href="https://www.behance.net" target="_blank"><i className="fab fa-behance"></i></Link></li>
+                <li><Link href="https://www.linkedin.com" target="_blank"><i className="fab fa-linkedin-in"></i></Link></li>
+            </ul>            
+        </>
+    );
+};
+
+export default Social;

src/components/data/team-data.jsx

@@ -0,0 +1,95 @@
+import team1 from "../../public/assets/img/team/team-1.jpg";
+import team2 from "../../public/assets/img/team/team-2.jpg";
+import team3 from "../../public/assets/img/team/team-3.jpg";
+import team4 from "../../public/assets/img/team/team-4.jpg";
+import team5 from "../../public/assets/img/team/team-5.jpg";
+import team6 from "../../public/assets/img/team/team-6.jpg";
+
+const teamData = [
+    {
+        id: 'amelia-clover',
+        image: team1,
+        position: 'Senior Advisor',
+        name: 'Amelia Clover',
+        mail: 'clover@gmail.com',
+        phone: '+125 (895) 658 568',
+        category: 'founder',
+        social_link: [
+            { link: 'https://www.facebook.com', target: '_blank', icon: <i className="fab fa-facebook-f"></i> },
+            { link: 'https://twitter.com', target: '_blank', icon: <i className="fa-brands fa-x-twitter"></i> },
+            { link: 'https://www.linkedin.com', target: '_blank', icon: <i className="fab fa-behance"></i> },
+        ],
+    },
+    {
+        id: 'steve-rhodes',
+        image: team2,
+        position: 'Health Coach',
+        name: 'Steve Rhodes',
+        mail: 'rhodes@gmail.com',
+        phone: '+125 (131) 456 784',
+        category: 'writer',
+        social_link: [
+            { link: 'https://www.facebook.com', target: '_blank', icon: <i className="fab fa-facebook-f"></i> },
+            { link: 'https://twitter.com', target: '_blank', icon: <i className="fa-brands fa-x-twitter"></i> },
+            { link: 'https://www.linkedin.com', target: '_blank', icon: <i className="fab fa-behance"></i> },
+        ],
+    },
+    {
+        id: 'grace-elizabeth',
+        image: team3,
+        position: 'Underwriter',
+        name: 'Grace Elizabeth',
+        mail: 'elizabeth@gmail.com',
+        phone: '+125 (544) 789 567',
+        category: 'founder',
+        social_link: [
+            { link: 'https://www.facebook.com', target: '_blank', icon: <i className="fab fa-facebook-f"></i> },
+            { link: 'https://twitter.com', target: '_blank', icon: <i className="fa-brands fa-x-twitter"></i> },
+            { link: 'https://www.linkedin.com', target: '_blank', icon: <i className="fab fa-behance"></i> },
+        ],
+    },
+    {
+        id: 'michael-james',
+        image: team4,
+        position: 'Claims Adjuster',
+        name: 'Michael James',
+        mail: 'james@gmail.com',
+        phone: '+125 (894) 489 947',
+        category: 'writer',
+        social_link: [
+            { link: 'https://www.facebook.com', target: '_blank', icon: <i className="fab fa-facebook-f"></i> },
+            { link: 'https://twitter.com', target: '_blank', icon: <i className="fa-brands fa-x-twitter"></i> },
+            { link: 'https://www.linkedin.com', target: '_blank', icon: <i className="fab fa-behance"></i> },
+        ],
+    },
+    {
+        id: 'samuel-thomas',
+        image: team5,
+        position: 'Risk Analyst',
+        name: 'Samuel Thomas',
+        mail: 'thomas@gmail.com',
+        phone: '+125 (974) 957 567',
+        category: 'manager',
+        social_link: [
+            { link: 'https://www.facebook.com', target: '_blank', icon: <i className="fab fa-facebook-f"></i> },
+            { link: 'https://twitter.com', target: '_blank', icon: <i className="fa-brands fa-x-twitter"></i> },
+            { link: 'https://www.linkedin.com', target: '_blank', icon: <i className="fab fa-behance"></i> },
+        ],
+    },
+    {
+        id: 'balm-bayrak',
+        image: team6,
+        position: 'Sales Agent',
+        name: 'Balm Bayrak',
+        mail: 'bayrak@gmail.com',
+        phone: '+125 (374) 421 941',
+        category: 'designer',
+        social_link: [
+            { link: 'https://www.facebook.com', target: '_blank', icon: <i className="fab fa-facebook-f"></i> },
+            { link: 'https://twitter.com', target: '_blank', icon: <i className="fa-brands fa-x-twitter"></i> },
+            { link: 'https://www.linkedin.com', target: '_blank', icon: <i className="fab fa-behance"></i> },
+        ],
+    },
+];
+
+export default teamData;

src/components/data/testimonial-data.jsx

@@ -0,0 +1,113 @@
+// import avatar1 from "../../public/assets/img/avatar/avatar-1.jpg";
+// import avatar2 from "../../public/assets/img/avatar/avatar-2.jpg";
+// import avatar3 from "../../public/assets/img/avatar/avatar-3.jpg";
+// import avatar4 from "../../public/assets/img/avatar/avatar-4.jpg";
+// import avatar5 from "../../public/assets/img/avatar/avatar-5.jpg";
+// import avatar6 from "../../public/assets/img/avatar/avatar-6.jpg";
+
+// const testimonialData = [
+//     {
+//         id: '01',
+//         service: 'Services Quality',
+//         name: 'Richerd William',
+//         position: 'Developer',
+//         des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+//         avatar: avatar1,
+//     },
+//     {
+//         id: '02',
+//         service: 'Customer Support',
+//         name: 'Sara Albert',
+//         position: 'Web Designer',
+//         des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+//         avatar: avatar2,
+//     },
+//     {
+//         id: '03',
+//         service: 'Code Quality',
+//         name: 'James Millard',
+//         position: 'Ui/Ux Designer',
+//         des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+//         avatar: avatar3,
+//     },
+//     {
+//         id: '04',
+//         service: 'Design Quality',
+//         name: 'Mariah Carey',
+//         position: 'Customizer',
+//         des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+//         avatar: avatar4,
+//     },
+//     {
+//         id: '05',
+//         service: 'Code Support',
+//         name: 'Robert Jonson',
+//         position: 'Web Designer',
+//         des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+//         avatar: avatar5,
+//     },
+//     {
+//         id: '06',
+//         service: 'Services Quality',
+//         name: 'Jessica Brown',
+//         position: 'Developer',
+//         des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+//         avatar: avatar6,
+//     },
+// ];
+
+// export default testimonialData;
+
+
+const testimonialData = [
+  {
+    id: '01',
+    service: 'Services Quality',
+    name: 'Richerd William',
+    position: 'Developer',
+    des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+    avatar: '/assets/img/avatar/avatar-1.jpg',
+  },
+  {
+    id: '02',
+    service: 'Customer Support',
+    name: 'Sara Albert',
+    position: 'Web Designer',
+    des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+    avatar: '/assets/img/avatar/avatar-2.jpg',
+  },
+  {
+    id: '03',
+    service: 'Code Quality',
+    name: 'James Millard',
+    position: 'Ui/Ux Designer',
+    des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+    avatar: '/assets/img/avatar/avatar-3.jpg',
+  },
+  {
+    id: '04',
+    service: 'Design Quality',
+    name: 'Mariah Carey',
+    position: 'Customizer',
+    des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+    avatar: '/assets/img/avatar/avatar-4.jpg',
+  },
+  {
+    id: '05',
+    service: 'Code Support',
+    name: 'Robert Jonson',
+    position: 'Web Designer',
+    des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+    avatar: '/assets/img/avatar/avatar-5.jpg',
+  },
+  {
+    id: '06',
+    service: 'Services Quality',
+    name: 'Jessica Brown',
+    position: 'Developer',
+    des: 'Aenean a felis consequat, varius orci ut, varius metus. Donec iaculis leo turpis, vitae sagittis massa luctus feugiat.',
+    avatar: '/assets/img/avatar/avatar-6.jpg',
+  },
+];
+
+export default testimonialData;

src/components/layout/footer/footer-three.jsx

@@ -0,0 +1,226 @@
+// import Social from "@/components/data/social";
+// import logo1 from "../../../public/assets/img/mylogo.png";
+// import logo2 from "../../../public/assets/img/mylogo.png";
+// import footerBg from "../../../public/assets/img/shape/footer-bg-2.png";
+// import Link from "next/link";
+
+// const FooterThree = () => {
+//     return (
+//         <>
+//             <div className="subscribe">
+//                 <div className="container">
+//                     <div className="row align-items-center">
+//                         <div className="col-xl-6 col-lg-6">
+//                             <div className="subscribe-title">
+//                                 <h2>Stay informed, subscribe to our newsletter</h2>
+//                             </div>
+//                         </div>
+//                         <div className="col-xl-6 col-lg-6">
+//                             <div className="subscribe-form">
+//                                 <form action="#">
+//                                     <input type="text" name="email" placeholder="Email Address" required />
+//                                     <button className="btn-seven" type="submit">Subscribe Now</button>
+//                                 </form>
+//                             </div>
+//                         </div>
+//                     </div>
+//                 </div>
+//             </div>
+//             <div className="footer__three">
+//                 <img className="footer__three-shape" src={footerBg.src} alt="shape" />
+//                 <div className="container">
+//                     <div className="row">
+//                         <div className="col-xl-4 col-lg-5 col-md-7 md-mb-30">
+//                             <div className="footer__three-widget">
+//                                 <div className="footer__three-widget-about">
+//                                     <Link href="/">
+//                                         <img className="dark-n" src={logo1.src} alt="logo" />
+//                                         <img className="light-n" src={logo2.src} alt="logo" />
+//                                     </Link>
+//                                     <span>News letter</span>
+//                                     <p>keep up on our.always evolving product eatures and technology.ntereyy your e-mail and subscriibe letter tto our news lette</p>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                         <div className="col-xl-3 col-lg-4 col-md-5 col-sm-7 xl-mb-30">
+//                             <div className="footer__three-widget">
+//                                 <h4>Head Office</h4>
+//                                 <div className="footer__three-widget-location">
+//                                     <div className="footer__three-widget-location-item">
+//                                         <div className="footer__three-widget-location-item-icon">
+//                                             <i className="far fa-map-marker-alt"></i>
+//                                         </div>
+//                                         <div className="footer__three-widget-location-item-info">
+//                                             <Link href="https://google.com/maps">2972 Westheimer Rd. Santa Ana, Illinois 85486</Link>
+//                                         </div>
+//                                     </div>
+//                                     <h6>Branch Office</h6>
+//                                     <div className="footer__three-widget-location-item">
+//                                         <div className="footer__three-widget-location-item-icon">
+//                                             <i className="far fa-map-marker-alt"></i>
+//                                         </div>
+//                                         <div className="footer__three-widget-location-item-info">
+//                                             <Link href="https://google.com/maps">8502 Preston Rd. Inglewood, Maine 98380</Link>
+//                                         </div>
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                         <div className="col-xl-2 col-lg-3 col-md-4 col-sm-5 sm-mb-30">
+//                             <div className="footer__three-widget">
+//                                 <h4>Company</h4>
+//                                 <div className="footer__three-widget-solution">
+//                                     <ul>
+//                                         <li><a href="#"><i className="far fa-chevron-double-right"></i>Help Center</a></li>
+//                                         <li><a href="#"><i className="far fa-chevron-double-right"></i>terms & conditions</a></li>
+//                                         <li><a href="#"><i className="far fa-chevron-double-right"></i>privacy policy</a></li>
+//                                         <li><a href="#"><i className="far fa-chevron-double-right"></i>Consulting</a></li>
+//                                     </ul>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                         <div className="col-xl-3 col-lg-4 col-md-5">
+//                             <div className="footer__three-widget border-one tow">
+//                                 <h4>Working Time</h4>
+//                                 <div className="footer__three-widget-hour">
+//                                     <p>Mon - thurs: 9:00 AM - 5:00 PM</p>
+//                                     <p>sat : 10:00 AM - 6:00 PM</p>
+//                                     <p>friday Close</p>
+//                                     <div className="footer__three-widget-hour-social">
+//                                         <Social />
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     </div>
+//                 </div>
+//                 <div className="copyright__three">
+//                     <div className="container">
+//                         <div className="row">
+//                             <div className="col-xl-12">
+//                                 <p>Copyright 2021  <Link href="/">PEI</Link> - All Rights Reserved By <a href="https://themeforest.net/user/themeori/portfolio" target="_blank">WaranCloudSoultion</a></p>
+//                             </div>
+//                         </div>
+//                     </div>
+//                 </div>
+//             </div>
+//         </>
+//     );
+// };
+
+// export default FooterThree;
+
+
+import Social from "@/components/data/social";
+import Link from "next/link";
+
+const FooterThree = () => {
+  return (
+    <>
+      <div className="subscribe">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-xl-6 col-lg-6">
+              <div className="subscribe-title">
+                <h2>Stay informed, subscribe to our newsletter</h2>
+              </div>
+            </div>
+            <div className="col-xl-6 col-lg-6">
+              <div className="subscribe-form">
+                <form action="#">
+                  <input type="text" name="email" placeholder="Email Address" required />
+                  <button className="btn-seven" type="submit">Subscribe Now</button>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="footer__three">
+        <img className="footer__three-shape" src="/assets/img/shape/footer-bg-2.png" alt="shape" />
+        <div className="container">
+          <div className="row">
+            <div className="col-xl-4 col-lg-5 col-md-7 md-mb-30">
+              <div className="footer__three-widget">
+                <div className="footer__three-widget-about">
+                  <Link href="/">
+                    <img className="dark-n" src="/assets/img/mylogo.png" alt="logo" />
+                    <img className="light-n" src="/assets/img/mylogo.png" alt="logo" />
+                  </Link>
+                  <span>Newsletter</span>
+                  <p>Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.</p>
+                </div>
+              </div>
+            </div>
+            <div className="col-xl-3 col-lg-4 col-md-5 col-sm-7 xl-mb-30">
+              <div className="footer__three-widget">
+                <h4>Head Office</h4>
+                <div className="footer__three-widget-location">
+                  <div className="footer__three-widget-location-item">
+                    <div className="footer__three-widget-location-item-icon">
+                      <i className="far fa-map-marker-alt"></i>
+                    </div>
+                    <div className="footer__three-widget-location-item-info">
+                      <Link href="https://google.com/maps">2972 Westheimer Rd. Santa Ana, Illinois 85486</Link>
+                    </div>
+                  </div>
+                  <h6>Branch Office</h6>
+                  <div className="footer__three-widget-location-item">
+                    <div className="footer__three-widget-location-item-icon">
+                      <i className="far fa-map-marker-alt"></i>
+                    </div>
+                    <div className="footer__three-widget-location-item-info">
+                      <Link href="https://google.com/maps">8502 Preston Rd. Inglewood, Maine 98380</Link>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="col-xl-2 col-lg-3 col-md-4 col-sm-5 sm-mb-30">
+              <div className="footer__three-widget">
+                <h4>Company</h4>
+                <div className="footer__three-widget-solution">
+                  <ul>
+                    <li><a href="#"><i className="far fa-chevron-double-right"></i>Help Center</a></li>
+                    <li><a href="#"><i className="far fa-chevron-double-right"></i>Terms & Conditions</a></li>
+                    <li><a href="#"><i className="far fa-chevron-double-right"></i>Privacy Policy</a></li>
+                    <li><a href="#"><i className="far fa-chevron-double-right"></i>Consulting</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="col-xl-3 col-lg-4 col-md-5">
+              <div className="footer__three-widget border-one tow">
+                <h4>Working Time</h4>
+                <div className="footer__three-widget-hour">
+                  <p>Mon - Thurs: 9:00 AM - 5:00 PM</p>
+                  <p>Sat: 10:00 AM - 6:00 PM</p>
+                  <p>Friday Closed</p>
+                  <div className="footer__three-widget-hour-social">
+                    <Social />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="copyright__three">
+          <div className="container">
+            <div className="row">
+              <div className="col-xl-12">
+                <p>
+                  Copyright 2021 <Link href="/">PEI</Link> - All Rights Reserved By{" "}
+                  <a href="https://themeforest.net/user/themeori/portfolio" target="_blank">WaranCloudSolution</a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default FooterThree;

src/components/layout/header/header-menu.jsx

@@ -0,0 +1,59 @@
+import Link from 'next/link';
+import React from 'react';
+import { FaHome } from 'react-icons/fa';
+
+const MainMenu = () => {
+    return (
+        <div className="main-menu">
+            <ul>
+                <li className="menu-item-has-children">
+                    <Link href="/" className="menu-link-icon">
+                        <FaHome />
+                    </Link>
+                </li>
+                <li className="menu-item-has-children">
+                    <Link href="#" className="menu-link">ABOUT US</Link>
+                    <ul className="sub-menu">
+                        <li><Link href="/about-us" className="menu-link">About Us</Link></li>
+                    </ul>
+                </li>
+
+                <li className="menu-item-has-children">
+                    <Link href="#" className="menu-link">Vendors</Link>
+                    <ul className="sub-menu">
+
+                        <li><Link href="/portfolio/business-analytics" className="menu-link">VendorePage</Link></li>
+                    </ul>
+                </li>
+
+                <li className="menu-item-has-children">
+                    <Link href="#" className="menu-link">Reseeleres</Link>
+                    <ul className="sub-menu">
+                        <li><Link href="/blog" className="menu-link">Reselleres page</Link></li>
+
+                    </ul>
+                </li>
+
+                <li className="menu-item-has-children">
+                    <Link href="#" className="menu-link">Promotiones</Link>
+
+                </li>
+                <li className="menu-item-has-children">
+                    <Link href="#" className="menu-link">Solutiones</Link>
+                </li>
+                <li className="menu-item-has-children">
+                    <Link href="#" className="menu-link">contact us </Link>
+                </li>
+
+            </ul>
+            {
+            }
+        </div>
+    );
+};
+
+export default MainMenu;
+
+
+
+

src/components/layout/header/header-three.jsx

@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+"use client";
+import Link from 'next/link';
+import { useState } from 'react';
+
+// FontAwesome icons
+import { FaFacebookF, FaTwitter, FaLinkedinIn } from "react-icons/fa";
+
+import MainMenu from './header-menu';
+import Search from './search';
+import MobileMenuThree from './menu_sidebar/menu-three';
+
+const HeaderThree = () => {
+    const [menuSidebar, setMenuSidebar] = useState(false);
+    const [search, setSearch] = useState(false);
+
+    return (
+        <>
+            <div className="header__three">
+            
+                {/* Main Header */}
+                <div className="header__area header__sticky">
+                    <div className="container">
+                        <div className="header__area-menubar three">
+                            {/* Logo */}
+                            <div className="header__area-menubar-left">
+                                <div className="header__area-menubar-left-logo">
+                                    <Link href='/'>
+                                        <img className='dark-n' src="/assets/img/mylogo.png" alt='logo' />
+                                        <img className="light-n" src="/assets/img/mylogo.png" alt="logo" />
+                                    </Link>
+                                </div>
+                            </div>
+
+                            {/* Menu */}
+                            <div className="header__area-menubar-center">
+                                <div className="header__area-menubar-center-menu three menu-responsive">
+                                    <MainMenu />
+                                </div>
+                            </div>
+
+                            {/* Right Box */}
+                            <div className="header__area-menubar-right">
+                                <div className="header__area-menubar-right-box">
+                                    {/* Search */}
+                                    <div className="header__area-menubar-right-box-search">
+                                        <div className="search">
+                                            <span className="header__area-menubar-right-box-search-icon open" onClick={() => setSearch(true)}>
+                                                <i className="fal fa-search"></i>
+                                            </span>
+                                        </div>
+                                        <Search isOpen={search} setIsOpen={setSearch} />
+                                    </div>
+
+                                    {/* Social Icons */}
+                                    <div className="header__area-menubar-right-box-social menu-social">
+                                        <Link href="https://facebook.com" target="_blank" aria-label="Facebook"><FaFacebookF /></Link>
+                                        <Link href="https://twitter.com" target="_blank" aria-label="Twitter"><FaTwitter /></Link>
+                                        <Link href="https://linkedin.com" target="_blank" aria-label="LinkedIn"><FaLinkedinIn /></Link>
+                                    </div>
+
+                                    {/* Mobile Menu Icon */}
+                                    <div className="header__area-menubar-right-responsive-menu menu__bar">
+                                        <i className="flaticon-menu" onClick={() => setMenuSidebar(true)}></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Mobile Menu */}
+            <MobileMenuThree isOpen={menuSidebar} setIsOpen={setMenuSidebar} />
+        </>
+    );
+};
+
+export default HeaderThree;

src/components/layout/header/menu_sidebar/menu-three.jsx

@@ -0,0 +1,65 @@
+// import Link from "next/link";
+// import Image from "next/image";
+// import logo1 from "../../../../public/assets/img/logo-2.png";
+// import ResponsiveMenu from "../responsive-menu";
+
+// const MobileMenuThree = ({ isOpen, setIsOpen }) => {
+//     return (
+//         <div className={`menu__bar-popup three ${isOpen ? "show" : ""}`}>
+//             <div className="menu__bar-popup-top">
+//                 <div className="logo">
+//                     <Link href="/"><Image src={logo1} alt='logo' width="auto" priority /></Link>
+//                 </div>
+//                 <div className="close" onClick={() => setIsOpen(false)}>
+//                     <i className="fal fa-times"></i>
+//                 </div>
+//             </div>
+//             <div className="responsive-menu mean-container">
+//                 <div className="mean-bar">
+//                     <div className="mean-nav">
+//                         <ResponsiveMenu />
+//                     </div>
+//                 </div>
+//             </div>
+//         </div>
+//     );
+// };
+
+// export default MobileMenuThree;
+
+
+import Link from "next/link";
+import Image from "next/image";
+import ResponsiveMenu from "../responsive-menu";
+
+const MobileMenuThree = ({ isOpen, setIsOpen }) => {
+  return (
+    <div className={`menu__bar-popup three ${isOpen ? "show" : ""}`}>
+      <div className="menu__bar-popup-top">
+        <div className="logo">
+          <Link href="/">
+            <Image
+              src="/assets/img/logo-2.png" 
+              alt="logo"
+              width={150}              
+              height={50}              
+              priority
+            />
+          </Link>
+        </div>
+        <div className="close" onClick={() => setIsOpen(false)}>
+          <i className="fal fa-times"></i>
+        </div>
+      </div>
+      <div className="responsive-menu mean-container">
+        <div className="mean-bar">
+          <div className="mean-nav">
+            <ResponsiveMenu />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileMenuThree;

src/components/layout/header/responsive-menu.jsx

@@ -0,0 +1,94 @@
+"use client"
+import Link from 'next/link';
+import React, { useState } from 'react';
+
+const ResponsiveMenu = () => {
+    const [activeMenu, setActiveMenu] = useState(null);
+    const active = (value) => setActiveMenu(value === activeMenu ? null : value),
+        activeIcon = (value) => (activeMenu == value ? "mean-clicked" : ""),
+        activeSubMenu = (value) =>
+            value == activeMenu ? { display: "block" } : { display: "none" };
+
+    const [activeMenus, setActiveMenus] = useState(null);
+    const actives = (value) => setActiveMenus(value === activeMenus ? null : value),
+        activeIcons = (value) => (activeMenus == value ? "mean-clicked" : ""),
+        activeSubMenus = (value) =>
+            value == activeMenus ? { display: "block" } : { display: "none" };
+    return (
+        <>
+            <ul>
+                <li className='menu-item-has-children'>
+                    <Link href='#'>Home</Link>
+                    <ul className='sub-menu' style={activeSubMenu("home")}>
+                    
+                    </ul>
+                    <a className={`mean-expand ${activeIcon("home")}`} onClick={() => active("home")}></a>
+                </li>
+                <li className='menu-item-has-children'>
+                    <Link href='#'>Pages</Link>
+                    <ul className='sub-menu' style={activeSubMenu("pages")}>
+                        <li><Link href='/about-us'>About Us</Link></li>
+                        <li><Link href='/pricing-plans'>Price Plans</Link></li>
+                        <li><Link href='/faq'>FAQ's</Link></li>
+                        <li><Link href='/testimonial'>Testimonials</Link></li>
+                        <li className='menu-item-has-children'><Link href='#'>Teams</Link>
+                            <ul className='sub-menu' style={activeSubMenus("team")}>
+                                <li><Link href='/team-filter'>Team Filter</Link></li>
+                                <li><Link href='/team'>Team 01</Link></li>
+                                <li><Link href='/team-two'>Team 02</Link></li>
+                                <li><Link href='/team-three'>Team 03</Link></li>
+                                <li><Link href='/team/grace-elizabeth'>Team Single</Link></li>
+                            </ul>
+                            <a className={`mean-expand ${activeIcons("team")}`} onClick={() => actives("team")}></a>
+                        </li>
+                        <li><Link href='/request-quote'>Request Quote</Link></li>
+                        <li><Link href='/404-error'>404 Page</Link></li>
+                    </ul>
+                    <a className={`mean-expand ${activeIcon("pages")}`} onClick={() => active("pages")}></a>
+                </li>
+                <li className='menu-item-has-children'><Link href='#'>Services</Link>
+                    <ul className='sub-menu' style={activeSubMenu("services")}>
+                        <li><Link href='/services'>Services 01</Link></li>
+                        <li><Link href='/services-two'>Services 02</Link></li>
+                        <li><Link href='/services/business-model'>Services Details</Link></li>
+                    </ul>
+                    <a className={`mean-expand ${activeIcon("services")}`} onClick={() => active("services")}></a>
+                </li>
+                <li className='menu-item-has-children'><Link href='#'>Project</Link>
+                    <ul className='sub-menu' style={activeSubMenu("project")}>
+                        <li><Link href='/portfolio-filter'>Project Filter</Link></li>
+                        <li className='menu-item-has-children'><Link href='#'>Project Grid</Link>
+                            <ul className='sub-menu' style={activeSubMenus("grid")}>
+                                <li><Link href='/portfolio/2-columns'>2 Columns</Link></li>
+                                <li><Link href='/portfolio/3-columns'>3 Columns</Link></li>
+                                <li><Link href='/portfolio/4-columns'>4 Columns</Link></li>
+                            </ul>
+                            <a className={`mean-expand ${activeIcons("grid")}`} onClick={() => actives("grid")}></a>
+                        </li>
+                        <li><Link href='/portfolio/business-analytics'>Project Details</Link></li>
+                    </ul>
+                    <a className={`mean-expand ${activeIcon("project")}`} onClick={() => active("project")}></a>
+                </li>
+                <li className='menu-item-has-children'><Link href='#'>Blog</Link>
+                    <ul className='sub-menu' style={activeSubMenu("blog")}>
+                        <li><Link href='/blog'>Blog Grid</Link></li>
+                        <li><Link href='/blog-standard'>Blog Standard</Link></li>
+                        <li><Link href='/blog/revamp-your-business-with-expert-consulting'>Blog Details</Link></li>
+                    </ul>
+                    <a className={`mean-expand ${activeIcon("blog")}`} onClick={() => active("blog")}></a>
+                </li>
+                <li className='menu-item-has-children'><Link href='#'>Contact</Link>
+                    <ul className='sub-menu' style={activeSubMenu("contact")}>
+                        <li><Link href='/contact'>Contact Style 01</Link></li>
+                        <li><Link href='/contact-two'>Contact Style 02</Link></li>
+                        <li><Link href='/contact-three'>Contact Style 03</Link></li>
+                        <li><Link href='/contact-four'>Contact Style 04</Link></li>
+                    </ul>
+                    <a className={`mean-expand ${activeIcon("contact")}`} onClick={() => active("contact")}></a>
+                </li>
+            </ul>
+        </>
+    );
+};
+
+export default ResponsiveMenu;

src/components/layout/header/search.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const Search = ({ isOpen, setIsOpen }) => {
+    return (
+        <>
+            <div className={`header__area-menubar-right-box-search-box ${isOpen ? 'active' : ''}`}>
+                <form>
+                    <input type="search" placeholder="Search Here....." />
+                    <button type="submit"><i className="fal fa-search"></i></button>
+                </form> 
+                <span className="header__area-menubar-right-box-search-box-icon" onClick={() => setIsOpen(false)}><i className="fal fa-times"></i></span>
+            </div>
+        </>
+    );
+};
+
+export default Search;

src/components/pages/about/about.jsx

@@ -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;

src/components/pages/about/history.jsx

@@ -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;

src/components/pages/about/index.jsx

@@ -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;

src/components/pages/about/who-we-are.jsx

@@ -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;

src/components/pages/blogs/blog-details/blog-details.jsx

@@ -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;

src/components/pages/blogs/blog-details/index.jsx

@@ -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;

src/components/pages/blogs/blog-sidebar/blog-sidebar.jsx

@@ -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;

src/components/pages/blogs/blog-standard/blog-standard.jsx

@@ -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;

src/components/pages/blogs/blog-standard/index.jsx

@@ -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;

src/components/pages/blogs/blog/blog-grid.jsx

@@ -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;

src/components/pages/blogs/blog/blog-item.jsx

@@ -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;

src/components/pages/blogs/blog/index.jsx

@@ -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;

src/components/pages/blogs/blog/pagination.jsx

@@ -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;

src/components/pages/common/breadcrumb.jsx

@@ -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;

src/components/pages/common/count.jsx

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

src/components/pages/common/dark-light.jsx

@@ -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>
+    );
+}

src/components/pages/common/preloader.jsx

@@ -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;

src/components/pages/common/scroll/scroll-to-top.jsx

@@ -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;

src/components/pages/common/scroll/use-scroll-to-top.jsx

@@ -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;

src/components/pages/common/skill-bar.jsx

@@ -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;

src/components/pages/contacts/contact-four.jsx

@@ -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;

src/components/pages/contacts/contact-three.jsx

@@ -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;

src/components/pages/contacts/contact-two.jsx

@@ -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;

src/components/pages/contacts/contact.jsx

@@ -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;

src/components/pages/contacts/form.jsx

@@ -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;

src/components/pages/error/error.jsx

@@ -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;

src/components/pages/error/index.jsx

@@ -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;

src/components/pages/faq/faq.jsx

@@ -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;

src/components/pages/faq/index.jsx

@@ -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;

src/components/pages/homes/home-2/about.jsx

@@ -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;

src/components/pages/homes/home-2/banner.jsx

@@ -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;

src/components/pages/homes/home-2/blog.jsx

@@ -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;

src/components/pages/homes/home-2/consulting.jsx

@@ -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;

src/components/pages/homes/home-2/index.jsx

@@ -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;

src/components/pages/homes/home-2/portfolio.jsx

@@ -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;

src/components/pages/homes/home-2/services.jsx

@@ -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;

src/components/pages/homes/home-2/team.jsx

@@ -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;

src/components/pages/homes/home-2/video.jsx

@@ -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;

src/components/pages/homes/home-2/work.jsx

@@ -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;

src/components/pages/homes/home-3/about.jsx

@@ -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;

src/components/pages/homes/home-3/banner.jsx

@@ -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;

src/components/pages/homes/home-3/blog.jsx

@@ -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;

src/components/pages/homes/home-3/choose-us.jsx

@@ -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;

src/components/pages/homes/home-3/index.jsx

@@ -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;

src/components/pages/homes/home-3/portfolio.jsx

@@ -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;