logo changed

components/aboutPage/AboutSection.js

@@ -0,0 +1,95 @@
+import React from 'react'
+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}`}>
+            <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="wpo-about-img">
+                                <Image src={props.abimg} alt="" />
+                                <div className="wpo-about-img-text">
+                                    <h4>1998</h4>
+
+                                    <div className="rotate-text">
+                                        <span>W</span>
+                                        <span>e</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>
+                                        <span></span>
+                                        <span></span>
+                                    </div>
+                                    <div className="border-shape-1"></div>
+                                    <div className="border-shape-2"></div>
+                                    <div className="border-shape-3"></div>
+                                </div>
+                                <div className="about-shape">
+                                    <div className="shape-1"></div>
+                                    <div className="shape-2"></div>
+                                    <div className="shape-3"></div>
+                                    <div className="shape-4"></div>
+                                </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;

components/aboutPage/Donors.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Link from 'next/link'
+
+const ClickHandler = () => {
+    window.scrollTo(10, 0);
+}
+
+const Donors = () => {
+
+    return (
+        <section className="wpo-donors-section section-padding-bottom">
+            <div className="container">
+                <div className="wpo-donors-wrap">
+                    <div className="row align-items-center">
+                        <div className="col-lg-6">
+                            <h2>Would you like to become one of
+                                our honorable donors?</h2>
+                        </div>
+                        <div className="col-lg-6">
+                            <div className="donors-btn">
+                                <Link onClick={ClickHandler} href="/donate">$10 Donation</Link>
+                                <Link onClick={ClickHandler} href="/donate">Other</Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default Donors;

components/aboutPage/SevicesSection.js

@@ -0,0 +1,93 @@
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import Link from 'next/link'
+import SectionTitle from "../SectionTitle/SectionTitle";
+import Services from '../../api/service'
+
+
+const settings = {
+    dots: true,
+    arrows: true,
+    speed: 1000,
+    slidesToShow: 4,
+    slidesToScroll: 1,
+    autoplay: false,
+    responsive: [
+        {
+            breakpoint: 1400,
+            settings: {
+                slidesToShow: 3,
+                slidesToScroll: 1,
+                infinite: true,
+            }
+        },
+        {
+            breakpoint: 1200,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                infinite: true,
+                centerMode: false,
+            }
+        },
+        {
+            breakpoint: 991,
+            settings: {
+                slidesToShow: 2,
+                slidesToScroll: 1,
+                centerMode: false,
+            }
+        },
+        {
+            breakpoint: 767,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                centerMode: false,
+            }
+        },
+        {
+            breakpoint: 480,
+            settings: {
+                slidesToShow: 1,
+                slidesToScroll: 1,
+                centerMode: false,
+            }
+        }
+    ]
+};
+
+const ClickHandler = () => {
+    window.scrollTo(10, 0);
+}
+
+const ServicesSection = (props) => {
+    return (
+        <section className={`wpo-service-section section-padding-top  ${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">
+                    <Slider {...settings}>
+                        {Services.slice(0, 5).map((service, srv) => (
+                            <div className="grid" key={srv}>
+                                <div className="wpo-service-item">
+                                    <div className="wpo-service-text">
+                                        <div className="service-icon">
+                                            <i className={`fi ${service.icon}`}></i>
+                                        </div>
+                                        <h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
+                                        <p>{service.description}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </Slider>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default ServicesSection;

components/aboutPage/TeamSection.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import Link from 'next/link'
+import Team from '../../api/team'
+import SectionTitle from '../SectionTitle/SectionTitle';
+import Image from 'next/image';
+
+const ClickHandler = () => {
+    window.scrollTo(10, 0);
+}
+
+const TeamsSection = (props) => {
+    return (
+        <section className={`wpo-team-section section-padding-top-bottom ${props.tmClass}`}>
+            <div className="container">
+                <SectionTitle subTitle={'Our Team'} Title={'Meet Our City Council'} />
+                <div className="wpo-team-wrap">
+                    <div className="row">
+                        {Team.map((team, aitem) => (
+                            <div className="col col-lg-3 col-md-6 col-12" key={aitem}>
+                                <div className="wpo-team-item">
+                                    <div className="wpo-team-img">
+                                        <div className="wpo-team-img-box">
+                                            <Image src={team.tImg} alt="" />
+                                            <ul>
+                                                <li><Link onClick={ClickHandler} href="/"><i className="fi flaticon-facebook-app-symbol"></i></Link></li>
+                                                <li><Link onClick={ClickHandler} href="/"><i className="fi flaticon-twitter"></i></Link></li>
+                                                <li><Link onClick={ClickHandler} href="/"><i className="fi flaticon-linkedin"></i></Link></li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div className="wpo-team-text">
+                                        <h2><Link onClick={ClickHandler} href={'/team-single/[slug]'} as={`/team-single/${team.slug}`}>{team.name}</Link></h2>
+                                        <span>{team.title}</span>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default TeamsSection;

components/aboutPage/TestimonialSection.js

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import ts1 from '/public/images/about-s2.jpg'
+import ts2 from '/public/images/about-s2.jpg'
+import ts3 from '/public/images/about-s2.jpg'
+
+import thumb1 from '/public/images/testimonial/thumb1.png'
+import thumb2 from '/public/images/testimonial/thumb2.png'
+import thumb3 from '/public/images/testimonial/thumb3.png'
+import Image from 'next/image';
+
+
+
+const testimonial = [
+    {
+        id: '01',
+        tImg: ts1,
+        thumbImg: thumb1,
+        Des: "Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly and applying the wrong remedies.",
+        Title: 'Robert Willum',
+        Sub: "President of BPT",
+    },
+    {
+        id: '02',
+        tImg: ts2,
+        thumbImg: thumb2,
+        Des: "Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly and applying the wrong remedies.",
+        Title: 'Leslie Alexander',
+        Sub: "President of TBP",
+    },
+    {
+        id: '03',
+        tImg: ts3,
+        thumbImg: thumb3,
+        Des: "Politics is the art of looking for trouble, finding it everywhere, diagnosing it incorrectly and applying the wrong remedies.",
+        Title: 'David Joy',
+        Sub: "President of AML",
+    }
+]
+
+const TestimonialSection = (props) => {
+
+    const [nav1, setNav1] = useState();
+    const [nav2, setNav2] = useState();
+
+
+    return (
+        <section className={`wpo-testimonial-section section-padding-top  ${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">
+                                <h2>How we can build a better country together!</h2>
+                            </div>
+                            <div className="wpo-testimonial-items">
+                                <div className="right-slide">
+                                    <Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
+                                        {
+                                            testimonial.map((tesmnl, tsm) => (
+                                                <div className="wpo-testimonial-item" key={tsm}>
+                                                    <div className="wpo-testimonial-text">
+                                                        <i className="fi flaticon-right-quote-sign"></i>
+                                                        <p>“{tesmnl.Des}”</p>
+                                                        {/* <div className="wpo-testimonial-text-btm">
+                                                            <div className="wpo-testimonial-text-btm-img">
+                                                                <Image src={tesmnl.thumbImg} alt=""/>
+                                                            </div>
+                                                            <div className="wpo-testimonial-text-btm-info">
+                                                                <h3>{tesmnl.Title}</h3>
+                                                                <span>{tesmnl.Sub}</span>
+                                                            </div>
+                                                        </div> */}
+                                                    </div>
+                                                </div>
+                                            ))
+                                        }
+                                    </Slider>
+                                </div>
+                            </div>
+                        </div>
+                                <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">
+                                        <Slider
+                                            asNavFor={nav1}
+                                            ref={(slider2) => setNav2(slider2)}
+                                            slidesToShow={1}
+                                            fade={true}
+                                            dots={false}
+                                            arrows={false}
+                                            swipeToSlide={true}
+                                            focusOnSelect={true}
+                                        >
+                                            {
+                                                testimonial.map((tesmnl, tsm) => (
+                                                    <div className="testimonial-img" key={tsm}>
+                                                        <Image src={tesmnl?.tImg} alt="" />
+                                                    </div>
+                                                ))
+                                            }
+
+                                        </Slider>
+                                    </div>
+                                    {/* <div className="shape-1"></div>
+                                    <div className="border-s1"></div>
+                                    <div className="border-s2"></div>
+                                    <div className="border-s3"></div> */}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}
+
+export default TestimonialSection;

components/header2/Header2.js

@@ -48,6 +48,7 @@ const Header2 = (props) => {
                                         </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>
                                                 <li><Link onClick={ClickHandler} href="/about/racial-justice">Racial Justice</Link></li>
                                             </ul>
                                         </li>

components/our-mission/index.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import Link from 'next/link';
+
+const OurMission = () => {
+    return (
+        <section className="wpo-blog-single-section section-padding">
+            <div className="container">
+                <div className="row">
+                    <div className="col-12">
+                        <div className="wpo-blog-content">
+                            <div className="post format-standard-image">
+                                <div
+                                    className="entry-media"
+                                    style={{ width: "100%", height: "auto", overflow: "hidden" }}
+                                >
+                                    <img
+                                        src="/images/blog/img-4.jpg"
+                                        alt=""
+                                    />
+                                </div>
+                                <div className="entry-meta">
+                                    <ul>
+                                        <li>
+                                            <i className="fi flaticon-user"></i> By{' '}
+                                            <Link href="/blog-single/support-progressive-change">Jenny Jack</Link>
+                                        </li>
+                                        <li>
+                                            <i className="fi flaticon-comment-white-oval-bubble"></i> Comments 5
+                                        </li>
+                                        <li>
+                                            <i className="fi flaticon-calendar"></i> May 7, 2025
+                                        </li>
+                                    </ul>
+                                </div>
+
+                                <h2>Our Mission</h2>
+
+                                <p>
+                                    Combined with a handful of model sentence structures, generate Lorem Ipsum which looks
+                                    reasonable. The generated Lorem Ipsum is therefore always free from repetition,
+                                    injected humour, or non-characteristic words etc.Combined with a handful of model sentence structures, generate Lorem Ipsum which looks, Combined with a handful of model sentence structures, generate Lorem Ipsum which looks, Combined with a handful of model sentence structures, generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
+
+                                </p>
+
+                                <blockquote>
+                                    Combined with a handful of model sentence structures, generate Lorem Ipsum which looks
+                                    reasonable. The generated Lorem Ipsum is therefore always free from repetition,
+                                    injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition.
+                                </blockquote>
+
+                                <p>
+                                    Combined with a handful of model sentence structures, generate Lorem Ipsum which looks
+                                    reasonable. The generated Lorem Ipsum is therefore always free from repetition,
+                                    injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition. Combined with a handful of model sentence structures, generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition.
+                                </p>
+
+                                <div className="gallery">
+                                    <div>
+                                        <img src="/images/blog/img-3.jpg" alt="" />
+                                    </div>
+                                    <div>
+                                        <img src="/images/blog/img-2.jpg" alt="" />
+                                    </div>
+                                </div>
+                                <p className='mt-4'>
+                                    Combined with a handful of model sentence structures, generate Lorem Ipsum which looks
+                                    reasonable. The generated Lorem Ipsum is therefore always free from repetition,
+                                    injected humour, or non-characteristic words etc.Combined with a handful of model sentence structures, generate Lorem Ipsum which looks, Combined with a handful of model sentence structures, generate Lorem Ipsum which looks, Combined with a handful of model sentence structures, generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
+
+                                </p>
+
+                                <blockquote>
+                                    Combined with a handful of model sentence structures, generate Lorem Ipsum which looks
+                                    reasonable. The generated Lorem Ipsum is therefore always free from repetition,
+                                    injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition.
+                                </blockquote>
+
+                                <p>
+                                    Combined with a handful of model sentence structures, generate Lorem Ipsum which looks
+                                    reasonable. The generated Lorem Ipsum is therefore always free from repetition,
+                                    injected humour, or non-characteristic words etc. The generated Lorem Ipsum is therefore always free from repetition. Combined with a handful of model sentence structures, generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default OurMission;

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 Watson</Link>
+                                            <Link href="/blog-single/support-progressive-change">Jenny Angel</Link>
                                         </li>
                                         <li>
-                                            <i className="fi flaticon-comment-white-oval-bubble"></i> Comments 3
+                                            <i className="fi flaticon-comment-white-oval-bubble"></i> Comments 5
                                         </li>
                                         <li>
-                                            <i className="fi flaticon-calendar"></i> January 12, 2022
+                                            <i className="fi flaticon-calendar"></i> March 14, 2025
                                         </li>
                                     </ul>
                                 </div>

pages/about/index.js

@@ -8,24 +8,29 @@ import Scrollbar from '../../components/scrollbar/scrollbar'
 import TeamSection from '../../components/TeamSection/TeamSection';
 import Testimonial from '../../components/Testimonial/Testimonial';
 import FunFact from '../../components/FunFact/FunFact';
-import Donors from '../../components/Donors/Donors';
+import Donors from '../../components/aboutPage/Donors';
 import PartnerSection from '../../components/PartnerSection/PartnerSection';
 import Footer from '../../components/footer/Footer';
-import abimg from '/public/images/about.jpg'
+import abimg from '/public/images/about-s2.jpg'
+import AboutSection from '../../components/aboutPage/AboutSection';
+import ServicesSection from '../../components/aboutPage/SevicesSection';
+import TeamsSection from '../../components/aboutPage/TeamSection';
+import TestimonialSection from '../../components/aboutPage/TestimonialSection';
 
 const AboutPage = () => {
     return (
         <Fragment>
             <Navbar2 />
             <PageTitle pageTitle={'About Us'} pagesub={'About'} />
-            <About abimg={abimg} abClass={"pt-padding"}/>
+            <AboutSection abimg={abimg} abClass={'wpo-about-section-s2'}/>
-            <ServiceSection />
+            <ServicesSection />
-            <CampaignSection />
+            {/* <CampaignSection /> */}
-            <Testimonial />
+            {/* <Testimonial /> */}
-            <FunFact />
+            {/* <FunFact /> */}
-            <TeamSection />
+            <TestimonialSection/>
+            <TeamsSection />
             <Donors />
-            <PartnerSection/>
+            {/* <PartnerSection/> */}
             <Footer />
             <Scrollbar />
         </Fragment>

pages/about/our-mission.js

@@ -0,0 +1,19 @@
+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 OurMission from '../../components/our-mission';
+
+const AboutPage = () => {
+    return (
+        <Fragment>
+            <Navbar2 />
+            <PageTitle pageTitle={'Racial-Justice'} pagesub={'Racial-Justice'} />
+            <OurMission />
+            <Footer />
+            <Scrollbar />
+        </Fragment>
+    )
+};
+export default AboutPage;

pages/blog-single/[slug].js

@@ -37,7 +37,14 @@ const BlogSingle = (props) => {
                             <div className="wpo-blog-content">
                                 <div className="post format-standard-image">
                                     <div className="entry-media">
-                                        <Image src={BlogDetails?.blogSingleImg} alt="" />
+                                        <div style={{ width: "100%", height: "400px", position: "relative" }}>
+                                            <Image
+                                                src={BlogDetails?.blogSingleImg}
+                                                alt=""
+                                                fill
+                                                style={{ objectFit: "cover" }}
+                                            />
+                                        </div>
                                     </div>
                                     <div className="entry-meta">
                                         <ul>

pages/index.js

@@ -24,7 +24,7 @@ const HomePage = () => {
             <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
             <Hero />
             <Features sClass={'wpo-service-section-s2'} />
-            <About abimg={abimg} />
+            <About abimg={abimg} abClass={'wpo-about-section-s2'}/>
             <ServiceSection />
             <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
             <ServiceSectionS2 />

styles/sass/base/_base.scss

@@ -92,6 +92,35 @@ img {
         padding: 90px 0;
     }
 }
+
+
+.section-padding-top-bottom{
+
+   padding-top: 120px !important;
+
+}
+
+.section-padding-top{
+
+  padding-top: 120px !important;
+
+}
+
+.section-padding-bottom{
+
+  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 {
     padding-top: 100px;
 

styles/sass/components/_section-title.scss

@@ -44,4 +44,53 @@
 		font-size: 18px;
 	}
 
+}
+
+
+.wpo-section-title-new {
+	// text-align: center;
+	max-width: 577px;
+	// margin: 0 auto;
+	margin-bottom: 10px;
+
+	span {
+		font-family: 'Futura PT';
+		font-style: normal;
+		font-weight: 450;
+		font-size: 20px;
+		line-height: 26px;
+		text-transform: uppercase;
+		background: $theme-primary-color-gradient;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+		text-fill-color: transparent;
+	}
+
+	h2 {
+		font-size: 42px;
+		margin: 0;
+		font-family: $heading-font;
+		font-style: normal;
+		font-weight: 500;
+		font-size: 50px;
+		line-height: 64px;
+		margin-top: 10px;
+
+		@include media-query(767px) {
+			font-size: 32px;
+			line-height: 40px;
+			margin-top: 10px;
+		}
+
+		@include media-query(330px) {
+			font-size: 30px;
+		}
+
+	}
+
+	p {
+		font-size: 18px;
+	}
+
 }