Our Approach Page Updated
This commit is contained in:
parent
3fd51aa45e
commit
16086fae90
64
api/our-approach.js
Normal file
64
api/our-approach.js
Normal 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;
|
||||||
@ -65,7 +65,7 @@ const ClickHandler = () => {
|
|||||||
|
|
||||||
const Features = (props) => {
|
const Features = (props) => {
|
||||||
return (
|
return (
|
||||||
<section className={`wpo-service-section section-padding ${props.sClass}`}>
|
<section className={`wpo-service-section section-padding-top ${props.sClass}`}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
|
<SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
|
||||||
<div className="row-grid wpo-service-slider">
|
<div className="row-grid wpo-service-slider">
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
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';
|
import Image from 'next/image';
|
||||||
|
|
||||||
const AboutSection = (props) => {
|
const AboutSection = (props) => {
|
||||||
@ -8,36 +8,54 @@ const AboutSection = (props) => {
|
|||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="wpo-about-wrap">
|
<div className="wpo-about-wrap">
|
||||||
<div className="row align-items-center">
|
<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">
|
<div className="wpo-about-img">
|
||||||
<Image src={props.abimg} alt="" />
|
<Image src={props.abimg} alt="About Image" />
|
||||||
<div className="wpo-about-img-text">
|
<div className="wpo-about-img-text">
|
||||||
<h4>1998</h4>
|
<h4>1998</h4>
|
||||||
|
|
||||||
<div className="rotate-text">
|
<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>
|
||||||
<div className="dots">
|
<div className="dots">
|
||||||
<span></span>
|
<span></span>
|
||||||
@ -56,40 +74,12 @@ const AboutSection = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default AboutSection;
|
export default AboutSection;
|
||||||
@ -46,6 +46,7 @@ const Header2 = (props) => {
|
|||||||
<li><Link onClick={ClickHandler} href="/home4">Female Candidate</Link></li>
|
<li><Link onClick={ClickHandler} href="/home4">Female Candidate</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
|
<li><Link onClick={ClickHandler} href="/our-approach">Our Approach</Link></li>
|
||||||
<li><Link onClick={ClickHandler} href="/about">About us</Link>
|
<li><Link onClick={ClickHandler} href="/about">About us</Link>
|
||||||
<ul className="sub-menu">
|
<ul className="sub-menu">
|
||||||
<li><Link onClick={ClickHandler} href="/about/our-mission">Our Mission</Link></li>
|
<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>
|
<li><Link onClick={ClickHandler} href="/campaign-single/Support-for-Womans">Campaign single</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li className="menu-item-has-children">
|
{/* <li className="menu-item-has-children">
|
||||||
<Link onClick={ClickHandler} href="/">Pages</Link>
|
<Link onClick={ClickHandler} href="/">Pages</Link>
|
||||||
<ul className="sub-menu">
|
<ul className="sub-menu">
|
||||||
<li><Link onClick={ClickHandler} href="/gallery">Gallery</Link></li>
|
<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="/login">Login</Link></li>
|
||||||
<li><Link onClick={ClickHandler} href="/register">Register</Link></li>
|
<li><Link onClick={ClickHandler} href="/register">Register</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li> */}
|
||||||
<li className="menu-item-has-children">
|
<li className="menu-item-has-children">
|
||||||
<Link onClick={ClickHandler} href="/">Blog</Link>
|
<Link onClick={ClickHandler} href="/">Blog</Link>
|
||||||
<ul className="sub-menu">
|
<ul className="sub-menu">
|
||||||
|
|||||||
73
components/our-approach/OurApproachSection.js
Normal file
73
components/our-approach/OurApproachSection.js
Normal 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;
|
||||||
21
pages/our-approach/index.js
Normal file
21
pages/our-approach/index.js
Normal 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;
|
||||||
@ -97,6 +97,7 @@ img {
|
|||||||
.section-padding-top-bottom{
|
.section-padding-top-bottom{
|
||||||
|
|
||||||
padding-top: 120px !important;
|
padding-top: 120px !important;
|
||||||
|
padding-bottom: 120px !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -180,7 +180,8 @@
|
|||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
|
|
||||||
@media(max-width:991px) {
|
@media(max-width:991px) {
|
||||||
padding-top: 0;
|
padding-top: 60px !important;
|
||||||
|
padding-bottom: 60px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pt-padding{
|
&.pt-padding{
|
||||||
@ -458,9 +459,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.wpo-about-text {
|
.wpo-about-text {
|
||||||
@media(max-width:991px) {
|
// @media(max-width:991px) {
|
||||||
margin-top: 120px;
|
// margin-top: 120px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.wpo-section-title {
|
.wpo-section-title {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user