Services Page Updated

components/header2/Header2.js

@@ -53,7 +53,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/about/racial-justice">Racial Justice</Link></li>
                                             </ul>
                                         </li>
-                                        <li className="menu-item-has-children">
+                                        {/* <li className="menu-item-has-children">
                                             <Link onClick={ClickHandler} href="/">Campaign</Link>
                                             <ul className="sub-menu">
                                                 <li><Link onClick={ClickHandler} href="/campaign">Campaign Style 1</Link></li>
@@ -61,7 +61,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/campaign-3">Campaign Style 3</Link></li>
                                                 <li><Link onClick={ClickHandler} href="/campaign-single/Support-for-Womans">Campaign single</Link></li>
                                             </ul>
-                                        </li>
+                                        </li> */}
                                         {/* <li className="menu-item-has-children">
                                             <Link onClick={ClickHandler} href="/">Pages</Link>
                                             <ul className="sub-menu">
@@ -106,6 +106,7 @@ const Header2 = (props) => {
                                                 </li>
                                             </ul>
                                         </li>
+                                        <li><Link onClick={ClickHandler} href="/services">Services</Link></li>
                                         <li><Link onClick={ClickHandler} href="/contact">Contact</Link></li>
                                     </ul>
                                 </div>

components/services/ServicesSection.js

@@ -0,0 +1,59 @@
+import React from "react";
+import Link from 'next/link'
+import SectionTitle from "../SectionTitle/SectionTitle";
+import Campaign from '../../api/campaign'
+import Image from "next/image";
+
+
+const ClickHandler = () => {
+    window.scrollTo(10, 0);
+}
+
+const ServicesSection = (props) => {
+    return (
+        <div className={`wpo-campaign-area section-padding ${props.cmClass}`}>
+            <div className="container">
+                <SectionTitle subTitle={'Campaign'} Title={'Our Upcoming Campaign'} />
+                <div className="wpo-campaign-wrap">
+                    <div className="row">
+                        {Campaign.map((campaign, cam) => (
+                            <div className="col-lg-4 col-md-6 col-12" key={cam}>
+                                <div className="wpo-campaign-single">
+                                    <div className="wpo-campaign-item">
+                                        <div className="wpo-campaign-img">
+                                            <Image src={campaign.cImg} alt="" />
+                                        </div>
+                                        <div className="wpo-campaign-content">
+                                            <div className="wpo-campaign-text-top">
+                                                {/* <small>{campaign.thumb}</small> */}
+                                                <h2><Link onClick={ClickHandler} href={'/campaign-single/[slug]'} as={`/campaign-single/${campaign.slug}`}>{campaign.title}</Link></h2>
+                                                <p><i className="fi flaticon-calendar"></i> {campaign.date}</p>
+                                                {/* <p><i className="fi flaticon-pin"></i> {campaign.location}</p> */}
+                                                {/* <div className="progress-section">
+                                                    <div className="process">
+                                                        <div className="progress">
+                                                            <div className="progress-bar" style={{width: `${campaign.progress}%`}}>
+                                                                <div className="progress-value"><span>{campaign.progress}</span>%</div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div> */}
+                                                {/* <ul>
+                                                    <li><span>Raised:</span> ${campaign.raised}</li>
+                                                    <li><span>Goal:</span> ${campaign.goal}</li>
+                                                </ul> */}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ServicesSection;

pages/services/index.js

@@ -0,0 +1,23 @@
+import React, { Fragment } from 'react';
+import Navbar2 from '../../components/Navbar2/Navbar2';
+import PageTitle from '../../components/pagetitle/PageTitle'
+import Scrollbar from '../../components/scrollbar/scrollbar'
+import Donors from '../../components/Donors/Donors';
+import PartnerSection from '../../components/PartnerSection/PartnerSection';
+import Footer from '../../components/footer/Footer';
+import ServicesSection from '../../components/services/ServicesSection';
+
+const Services = () => {
+    return (
+        <Fragment>
+            <Navbar2 />
+            <PageTitle pageTitle={'Services'} pagesub={'Services'} />
+            <ServicesSection cmClass={'wpo-campaign-area-s5'}/>
+            {/* <Donors /> */}
+            {/* <PartnerSection/> */}
+            <Footer />
+            <Scrollbar />
+        </Fragment>
+    )
+};
+export default Services;