Order Changed for all sections

api/our-approach.js

@@ -0,0 +1,64 @@
+const Ourapproach = [
+  {
+    id: 1,
+    authorTitle: "Our Approach",
+    title: "Innovative Solutions for Every Challenge",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 2,
+    authorTitle: "Our Mission",
+    title: "Empowering Businesses Through Technology",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 3,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 4,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 5,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  },
+  {
+    id: 6,
+    authorTitle: "Our Values",
+    title: "Commitment, Integrity, and Innovation",
+    para: "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.",
+    description: `
+      <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
+    `,
+    screens: "/images/funfact.jpg"
+  }
+];
+
+export default Ourapproach;

components/ServiceSection/ServiceSection.js

@@ -65,7 +65,7 @@ const ClickHandler = () => {
 
 const ServiceSection = (props) => {
     return (
-        <section className={`wpo-service-section section-padding ${props.sClass}`}>
+        <section className={`wpo-service-section section-padding3 ${props.sClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
                 <div className="row-grid wpo-service-slider">

components/about/about.js

@@ -8,7 +8,7 @@ const About = (props) => {
             <div className="container">
                 <div className="wpo-about-wrap">
                     <div className="row align-items-center">
-                        <div className="col-lg-6 col-md-12 col-12">
+                        <div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
                             <div className="wpo-about-img">
                                 <Image src={props.abimg} alt="" />
                                 <div className="wpo-about-img-text">
@@ -56,7 +56,7 @@ const About = (props) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-lg-6 col-md-12 col-12">
+                        <div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2 mb-5">
                             <div className="wpo-about-text">
                                 <div className="wpo-section-title">
                                     <span>About Politian</span>

components/aboutPage/AboutSection.js

@@ -1,43 +1,61 @@
-import React from 'react'
+import React from 'react';
-import sign from '/public/images/signeture.png'
+import sign from '/public/images/signeture.png';
 import Image from 'next/image';
 
 const AboutSection = (props) => {
     return (
-        <section className={`wpo-about-section section-padding ${props.abClass}`}>
+        <section className={`wpo-about-section section-padding2 ${props.abClass}`}>
             <div className="container">
                 <div className="wpo-about-wrap">
                     <div className="row align-items-center">
-                        <div className="col-lg-6 col-md-12 col-12">
+
+                        {/* Text Column — Show first on mobile, second on desktop */}
+                        <div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2 mb-5">
+                            <div className="wpo-about-text">
+                                <div className="wpo-section-title">
+                                    <span>About Politian</span>
+                                    <h2>We Can Work Together For Create a Better Future.</h2>
+                                </div>
+                                <p>
+                                    The leader is eager to listen to the needs of the youth generation and to hear what
+                                    solutions they have to the problems they are facing. He hopes to find solutions that
+                                    will help them lead meaningful lives and make lasting change in the world.
+                                </p>
+                                <p>
+                                    He believes that the collaboration between the youth and the leaders of society is
+                                    necessary to bring about a brighter future. Now, he is ready to take the first step
+                                    to making that happen.
+                                </p>
+                                <div className="quote">
+                                    <p>
+                                        “We can start by taking small steps and making small changes that can have a big
+                                        impact on the world.”
+                                    </p>
+                                </div>
+                                <div className="wpo-about-left-info">
+                                    <div className="wpo-about-left-inner">
+                                        <div className="wpo-about-left-text">
+                                            <h5>Robert Willum</h5>
+                                            <span>CEO & Founder of Manit</span>
+                                        </div>
+                                    </div>
+                                    <div className="signeture">
+                                        <Image src={sign} alt="Signature" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Image Column — Show second on mobile, first on desktop */}
+                        <div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
                             <div className="wpo-about-img">
-                                <Image src={props.abimg} alt="" />
+                                <Image src={props.abimg} alt="About Image" />
                                 <div className="wpo-about-img-text">
                                     <h4>1998</h4>
-
                                     <div className="rotate-text">
-                                        <span>W</span>
+                                        {Array.from("WeAreWorkingForYouSince").map((letter, index) => (
-                                        <span>e</span>
+                                            <span key={index}>{letter}</span>
-                                        <span>A</span>
+                                        ))}
-                                        <span>r</span>
-                                        <span>e</span>
-                                        <span>W</span>
-                                        <span>o</span>
-                                        <span>r</span>
-                                        <span>k</span>
-                                        <span>i</span>
-                                        <span>n</span>
-                                        <span>g</span>
-                                        <span>F</span>
-                                        <span>o</span>
-                                        <span>r</span>
-                                        <span>Y</span>
-                                        <span>o</span>
-                                        <span>u</span>
-                                        <span>S</span>
-                                        <span>i</span>
-                                        <span>n</span>
-                                        <span>c</span>
-                                        <span>e</span>
                                     </div>
                                     <div className="dots">
                                         <span></span>
@@ -56,40 +74,12 @@ const AboutSection = (props) => {
                                 </div>
                             </div>
                         </div>
-                        <div className="col-lg-6 col-md-12 col-12">
+
-                            <div className="wpo-about-text">
-                                <div className="wpo-section-title">
-                                    <span>About Politian</span>
-                                    <h2>We Can Work Together For Create a Better Future.</h2>
-                                </div>
-                                <p>The leader is eager to listen to the needs of the youth generation and to hear what
-                                    solutions they have to the problems they are facing. He hopes to find solutions that
-                                    will help them lead meaningful lives and make lasting change in the world. </p>
-                                <p>He believes that the collaboration between the youth and the leaders of society is
-                                    necessary to bring about a brighter future. Now, he is ready to take the first step
-                                    to making that happen.</p>
-                                <div className="quote">
-                                    <p>“We can start by taking small steps and making small changes that can have a big
-                                        impact on the world.”</p>
-                                </div>
-                                <div className="wpo-about-left-info">
-                                    <div className="wpo-about-left-inner">
-                                        <div className="wpo-about-left-text">
-                                            <h5>Robert Willum</h5>
-                                            <span>CEO & Founder of Manit</span>
-                                        </div>
-                                    </div>
-                                    <div className="signeture">
-                                        <Image src={sign} alt="" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </div>
         </section>
-    )
+    );
-}
+};
 
-export default AboutSection;
+export default AboutSection;

components/aboutPage/Donors.js

@@ -8,7 +8,7 @@ const ClickHandler = () => {
 const Donors = () => {
 
     return (
-        <section className="wpo-donors-section section-padding-bottom">
+        <section className="wpo-donors-section section-padding3">
             <div className="container">
                 <div className="wpo-donors-wrap">
                     <div className="row align-items-center">

components/aboutPage/SevicesSection.js

@@ -65,7 +65,7 @@ const ClickHandler = () => {
 
 const ServicesSection = (props) => {
     return (
-        <section className={`wpo-service-section section-padding-top  ${props.sClass}`}>
+        <section className={`wpo-service-section section-padding3  ${props.sClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
                 <div className="row-grid wpo-service-slider">

components/aboutPage/TeamSection.js

@@ -10,7 +10,7 @@ const ClickHandler = () => {
 
 const TeamsSection = (props) => {
     return (
-        <section className={`wpo-team-section section-padding-top-bottom ${props.tmClass}`}>
+        <section className={`wpo-team-section section-padding ${props.tmClass}`}>
             <div className="container">
                 <SectionTitle subTitle={'Our Team'} Title={'Meet Our City Council'} />
                 <div className="wpo-team-wrap">

components/aboutPage/TestimonialSection.js

@@ -47,13 +47,13 @@ const TestimonialSection = (props) => {
 
 
     return (
-        <section className={`wpo-testimonial-section section-padding-top  ${props.tmClass}`}>
+        <section className={`wpo-testimonial-section  ${props.tmClass}`}>
             <div className="container">
                 <div className="wpo-testimonial-wrap">
                     <div className="row align-items-center">
-                
+
                         <div className="col-lg-6 col-12 order-lg-1 order-1">
-                             <div class="wpo-section-title-new">
+                            <div class="wpo-section-title-new">
                                 <h2>How we can build a better country together!</h2>
                             </div>
                             <div className="wpo-testimonial-items">
@@ -82,7 +82,7 @@ const TestimonialSection = (props) => {
                                 </div>
                             </div>
                         </div>
-                                <div className="col-lg-6 col-12 order-lg-1 order-2">
+                        <div className="col-lg-6 col-12 order-lg-1 order-2">
                             <div className="testimonial-left">
                                 <div className="testimonial-left-inner">
                                     <div className="left-slide">

components/header2/Header2.js

@@ -46,6 +46,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/home4">Female Candidate</Link></li>
                                             </ul>
                                         </li>
+                                        <li><Link onClick={ClickHandler} href="/our-approach">Our Approach</Link></li>
                                         <li><Link onClick={ClickHandler} href="/about">About us</Link>
                                             <ul className="sub-menu">
                                                  <li><Link onClick={ClickHandler} href="/about/our-mission">Our Mission</Link></li>
@@ -61,7 +62,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/campaign-single/Support-for-Womans">Campaign single</Link></li>
                                             </ul>
                                         </li>
-                                        <li className="menu-item-has-children">
+                                        {/* <li className="menu-item-has-children">
                                             <Link onClick={ClickHandler} href="/">Pages</Link>
                                             <ul className="sub-menu">
                                                 <li><Link onClick={ClickHandler} href="/gallery">Gallery</Link></li>
@@ -85,7 +86,7 @@ const Header2 = (props) => {
                                                 <li><Link onClick={ClickHandler} href="/login">Login</Link></li>
                                                 <li><Link onClick={ClickHandler} href="/register">Register</Link></li>
                                             </ul>
-                                        </li>
+                                        </li> */}
                                         <li className="menu-item-has-children">
                                             <Link onClick={ClickHandler} href="/">Blog</Link>
                                             <ul className="sub-menu">

components/our-approach/OurApproachSection.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import Image from 'next/image';
+import Ourapproach from '../../api/our-approach';
+
+const OurApproachSection = () => {
+    return (
+        <>
+            {Ourapproach.map((item, index) => {
+                const isEven = index % 2 !== 0;
+                const sectionStyle = {
+                    backgroundColor: index % 2 === 0 ? '#fbfbfbff' : '#e8ebf5',
+                    color: index % 2 === 0 ? '#ffffffff' : '#fff',
+                };
+
+                return (
+                    <section
+                        key={item.id}
+                        className="wpo-about-section section-padding"
+                        style={sectionStyle}
+                    >
+                        <div className="container">
+                            <div className="wpo-about-wrap">
+                                <div className="row align-items-center">
+                                    {/* Content Column */}
+                                    <div
+                                        className={`col-lg-6 col-md-12 col-12 ${
+                                            isEven ? 'order-1 order-lg-1' : 'order-1 order-lg-2'
+                                        }`}
+                                    >
+                                        <div className="wpo-about-text">
+                                            <div className="wpo-section-title">
+                                                <span>{item.authorTitle}</span>
+                                                <h2>{item.title}</h2>
+                                            </div>
+                                            <p>{item.para}</p>
+                                            <div
+                                                dangerouslySetInnerHTML={{ __html: item.description }}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    {/* Image Column */}
+                                    <div
+                                        className={`col-lg-6 col-md-12 col-12 ${
+                                            isEven ? 'order-2 order-lg-2' : 'order-2 order-lg-1'
+                                        }`}
+                                    >
+                                        <div className="wpo-about-img">
+                                            <Image
+                                                src={item.screens}
+                                                alt={item.title}
+                                                width={600}
+                                                height={400}
+                                                style={{
+                                                    objectFit: 'cover',
+                                                    borderRadius: '10px',
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                );
+            })}
+        </>
+    );
+};
+
+export default OurApproachSection;

components/our-mission/index.js

@@ -22,13 +22,13 @@ const OurMission = () => {
                                     <ul>
                                         <li>
                                             <i className="fi flaticon-user"></i> By{' '}
-                                            <Link href="/blog-single/support-progressive-change">Jenny Jack</Link>
+                                            <Link href="/blog-single/support-progressive-change">Admin</Link>
                                         </li>
-                                        <li>
+                                        {/* <li>
                                             <i className="fi flaticon-comment-white-oval-bubble"></i> Comments 5
-                                        </li>
+                                        </li> */}
                                         <li>
-                                            <i className="fi flaticon-calendar"></i> May 7, 2025
+                                            <i className="fi flaticon-calendar"></i> Jan, 2022
                                         </li>
                                     </ul>
                                 </div>

components/racial-justice/index.js

@@ -22,13 +22,13 @@ const RacialJustice = () => {
                                     <ul>
                                         <li>
                                             <i className="fi flaticon-user"></i> By{' '}
-                                            <Link href="/blog-single/support-progressive-change">Jenny Angel</Link>
+                                            <Link href="/blog-single/support-progressive-change">Jenny</Link>
                                         </li>
-                                        <li>
+                                        {/* <li>
                                             <i className="fi flaticon-comment-white-oval-bubble"></i> Comments 5
-                                        </li>
+                                        </li> */}
                                         <li>
-                                            <i className="fi flaticon-calendar"></i> March 14, 2025
+                                            <i className="fi flaticon-calendar"></i> Jan 11, 2022
                                         </li>
                                     </ul>
                                 </div>

pages/about/our-mission.js

@@ -9,7 +9,7 @@ const AboutPage = () => {
     return (
         <Fragment>
             <Navbar2 />
-            <PageTitle pageTitle={'Racial-Justice'} pagesub={'Racial-Justice'} />
+            <PageTitle pageTitle={'Our Mission'} pagesub={'Our Mission'} />
             <OurMission />
             <Footer />
             <Scrollbar />

pages/our-approach/index.js

@@ -0,0 +1,21 @@
+import React, { Fragment } from 'react';
+import Navbar2 from '../../components/Navbar2/Navbar2';
+import PageTitle from '../../components/pagetitle/PageTitle'
+import Scrollbar from '../../components/scrollbar/scrollbar'
+
+import Footer from '../../components/footer/Footer';
+import abimg from '/public/images/about-s2.jpg'
+import OurApproachSection from '../../components/our-approach/OurApproachSection';
+
+const OurApproach = () => {
+    return (
+        <Fragment>
+            <Navbar2 />
+            <PageTitle pageTitle={'Our Approach'} pagesub={'Our Approach'} />
+            <OurApproachSection abimg={abimg} abClass={'wpo-about-section-s2'}/>
+            <Footer />
+            <Scrollbar />
+        </Fragment>
+    )
+};
+export default OurApproach;

styles/sass/base/_base.scss

@@ -86,39 +86,33 @@ img {
     padding: 120px 0;
 
     @include media-query( 991px ) {
-        padding: 90px 0;
+        padding: 60px 0;
     }
     @include media-query( 767px ) {
-        padding: 90px 0;
+        padding: 60px 0;
     }
 }
 
+.section-padding2 {
+    padding: 120px 0 0;
 
-.section-padding-top-bottom{
+    @include media-query( 991px ) {
-
+        padding: 60px 0 0;
-   padding-top: 120px !important;
+    }
-
+    @include media-query( 767px ) {
+        padding: 60px 0 0;
+    }
 }
 
-.section-padding-top{
+.section-padding3 {
+    padding: 0 0 120px 0;
 
-  padding-top: 120px !important;
+    @include media-query( 991px ) {
-
+        padding: 0 0 60px 0;
-}
+    }
-
+    @include media-query( 767px ) {
-.section-padding-bottom{
+        padding: 0 0 60px 0;
-
+    }
-  padding-bottom: 120px !important;
-
-}
-
-
-@media (max-width: 768px) {
-  .section-padding-top .section-padding-top .section {
-     padding-top: 60px;
-     padding-bottom: 60px;
-     padding: 60px 0px 60px 0px;
-  }
 }
 
 .pt-100 {

styles/sass/page/_home-default.scss

@@ -177,10 +177,11 @@
 .wpo-about-section-s2,
 .wpo-about-section-s3,
 .wpo-about-section-s4 {
-    padding-bottom: 0px;
+    padding-bottom: 120px;
 
     @media(max-width:991px) {
-        padding-top: 0;
+        padding-top: 60px !important; 
+        padding-bottom: 60px !important;
     }
 
     &.pt-padding{
@@ -458,9 +459,9 @@
         }
 
         .wpo-about-text {
-            @media(max-width:991px) {
+            // @media(max-width:991px) {
-                margin-top: 120px;
+            //     margin-top: 120px;
-            }
+            // }
 
             .wpo-section-title {
                 text-align: left;
@@ -587,7 +588,7 @@
 .wpo-service-section,
 .wpo-service-section-s2 {
     @media(max-width:991px) {
-        padding-top: 90px;
+        padding: 0px 0px 60px;
     }
 
     .wpo-service-slider {
@@ -851,7 +852,7 @@
     z-index: 1;
 
     @media(max-width:991px) {
-        padding-bottom: 90px;
+        padding-bottom: 60px;
     }
 
     &:before {
@@ -1086,8 +1087,8 @@
         .wpo-testimonial-items {
             @media(max-width:1399px) {
                 margin-right: -100px;
-                padding-left: 60px;
+                // padding-left: 60px;
-                max-width: 550px;
+                max-width: 476px;
             }
 
             @media(max-width:991px) {
@@ -1332,7 +1333,7 @@
 
                 @media(max-width:991px) {
                     text-align: center;
-                    margin-top: 50px;
+                    margin-top: 70px;
 
                     img {
                         margin: 0 auto;
@@ -1578,7 +1579,7 @@
     padding-bottom: 120px;
 
     @media(max-width:991px) {
-        padding-bottom: 90px;
+        padding: 60px 60px;
     }
 
     .wpo-team-wrap {
@@ -1707,6 +1708,10 @@
             .wpo-team-text {
                 padding-top: 15px;
 
+                 @media(max-width:375px) {
+                        padding-top: 90px;
+                    }
+
                 span {
                     font-style: normal;
                     font-weight: 400;
@@ -1854,7 +1859,7 @@
     z-index: 1;
 
     @media(max-width:767px) {
-        padding-bottom: 90px;
+        padding-bottom: 60px;
     }
 
     .wpo-blog-item {

styles/sass/page/_home-style-2.scss

@@ -16,7 +16,7 @@
 
     @include media-query(991px) {
         margin-top: 0px;
-        padding: 90px 0;
+        padding-top: 60px;
     }
 
     .wpo-section-title{
@@ -53,6 +53,10 @@
                 left: 50%;
                 transform: translateX(-50%);
                 bottom: -90px;
+
+                @media(max-width:991px) {
+                    display: none;
+                }
             }
 
             .about-shape {