Our Approach Page Updated

This commit is contained in:
akash 2025-08-12 02:40:20 -07:00
parent 3fd51aa45e
commit 16086fae90
8 changed files with 218 additions and 67 deletions

64
api/our-approach.js Normal file
View File

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

View File

@ -65,7 +65,7 @@ const ClickHandler = () => {
const Features = (props) => {
return (
<section className={`wpo-service-section section-padding ${props.sClass}`}>
<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">

View File

@ -1,5 +1,5 @@
import React from 'react'
import sign from '/public/images/signeture.png'
import React from 'react';
import sign from '/public/images/signeture.png';
import Image from 'next/image';
const AboutSection = (props) => {
@ -8,36 +8,54 @@ const AboutSection = (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">
{/* Text Column — Show first on mobile, second on desktop */}
<div className="col-lg-6 col-md-12 col-12 order-1 order-lg-2">
<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>
<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>
{Array.from("WeAreWorkingForYouSince").map((letter, index) => (
<span key={index}>{letter}</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;

View File

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

View File

@ -0,0 +1,73 @@
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',
paddingTop: '60px',
paddingBottom: '60px',
};
return (
<section
key={item.id}
className="wpo-about-section section-padding-top-bottom"
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;

View File

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

View File

@ -97,6 +97,7 @@ img {
.section-padding-top-bottom{
padding-top: 120px !important;
padding-bottom: 120px !important;
}

View File

@ -180,7 +180,8 @@
padding-bottom: 0px;
@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) {
margin-top: 120px;
}
// @media(max-width:991px) {
// margin-top: 120px;
// }
.wpo-section-title {
text-align: left;