home components created
This commit is contained in:
parent
28841060c2
commit
29deaf2575
@ -1,7 +1,63 @@
|
||||
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);
|
||||
@ -9,100 +65,29 @@ const ClickHandler = () => {
|
||||
|
||||
const Features = (props) => {
|
||||
return (
|
||||
<section className="wpo-features-area">
|
||||
<section className={`wpo-service-section section-padding ${props.sClass}`}>
|
||||
<div className="container">
|
||||
<div className="features-wrap">
|
||||
<div className="row">
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-goal"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/about">Our Mission</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-goal"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/about">Our Mission</Link></h2>
|
||||
<p>Empowering communities through compassionate action, positive change with charity mission.</p>
|
||||
<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>
|
||||
</div>
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-conference-1"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/campaign">Campaign Events</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-conference-1"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/campaign">Campaign Events</Link></h2>
|
||||
<p>Join us in supporting a worthy cause at our charity event, together we can make a difference.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-charity"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/donate">Make Donation</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-charity"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/donate">Make Donation</Link></h2>
|
||||
<p>Donate now to help those in need! Make a difference by taking action with
|
||||
your donation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-community"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/volunteer">Join Volunteer</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-community"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/volunteer">Join Volunteer</Link></h2>
|
||||
<p>Join our team of volunteers and help make a positive impact in your community today.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Features;
|
||||
108
components/Features/Features2.js
Normal file
108
components/Features/Features2.js
Normal file
@ -0,0 +1,108 @@
|
||||
import React from "react";
|
||||
import Link from 'next/link'
|
||||
|
||||
|
||||
|
||||
const ClickHandler = () => {
|
||||
window.scrollTo(10, 0);
|
||||
}
|
||||
|
||||
const Features = (props) => {
|
||||
return (
|
||||
<section className="wpo-features-area">
|
||||
<div className="container">
|
||||
<div className="features-wrap">
|
||||
<div className="row">
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-goal"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/about">Our Mission</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-goal"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/about">Our Mission</Link></h2>
|
||||
<p>Empowering communities through compassionate action, positive change with charity mission.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-conference-1"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/campaign">Campaign Events</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-conference-1"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/campaign">Campaign Events</Link></h2>
|
||||
<p>Join us in supporting a worthy cause at our charity event, together we can make a difference.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-charity"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/donate">Make Donation</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-charity"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/donate">Make Donation</Link></h2>
|
||||
<p>Donate now to help those in need! Make a difference by taking action with
|
||||
your donation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col col-lg-3 col-md-6 col-12">
|
||||
<div className="feature-item-wrap">
|
||||
<div className="feature-item">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-community"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/volunteer">Join Volunteer</Link></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="feature-item-hidden">
|
||||
<div className="icon">
|
||||
<i className="fi flaticon-community"></i>
|
||||
</div>
|
||||
<div className="feature-text">
|
||||
<h2><Link onClick={ClickHandler} href="/volunteer">Join Volunteer</Link></h2>
|
||||
<p>Join our team of volunteers and help make a positive impact in your community today.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Features;
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react'
|
||||
import CountUp, { useCountUp } from 'react-countup';
|
||||
import VideoModal from '../ModalVideo/VideoModal';
|
||||
import fImg from '/public/images/funfact2.jpg'
|
||||
import Image from 'next/image';
|
||||
|
||||
const FunFact = (props) => {
|
||||
|
||||
@ -12,46 +14,51 @@ const FunFact = (props) => {
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="wpo-fun-fact-section content">
|
||||
<div className="right-bg">
|
||||
<VideoModal/>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col col-lg-6">
|
||||
<div className="wpo-fun-fact-wrap">
|
||||
<div className="wpo-fun-fact-grids clearfix">
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={35} enableScrollSpy /></span>K</h3>
|
||||
<p>Total People lived in our city</p>
|
||||
<div className={props.fnTpClass}>
|
||||
<section className={`wpo-fun-fact-section-s2 content ${props.fnClass}`}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className="col col-lg-12">
|
||||
<div className="wpo-fun-fact-wrap">
|
||||
<div className="wpo-fun-fact-grids clearfix">
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={35} enableScrollSpy /></span>K</h3>
|
||||
<p>Total People lived in our city</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={12} enableScrollSpy /></span>K</h3>
|
||||
<p>Square kilometers region covers</p>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={12} enableScrollSpy /></span>K</h3>
|
||||
<p>Square kilometers region covers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={25} enableScrollSpy /></span>%</h3>
|
||||
<p>Private & domestic garden land</p>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={25} enableScrollSpy /></span>%</h3>
|
||||
<p>Private & domestic garden land</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={8} enableScrollSpy /></span>th</h3>
|
||||
<p>Average Costs of Home Ownership</p>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={8} enableScrollSpy /></span>th</h3>
|
||||
<p>Average Costs of Home Ownership</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div className="funfact-video">
|
||||
<div className="container">
|
||||
<Image src={fImg} alt="" />
|
||||
<VideoModal />
|
||||
</div>
|
||||
</div>
|
||||
<span id="counter" className='d-none' />
|
||||
</section>
|
||||
<span id="counter" className='d-none'/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
58
components/FunFact/FunFact2.js
Normal file
58
components/FunFact/FunFact2.js
Normal file
@ -0,0 +1,58 @@
|
||||
import React from 'react'
|
||||
import CountUp, { useCountUp } from 'react-countup';
|
||||
import VideoModal from '../ModalVideo/VideoModal';
|
||||
|
||||
const FunFact = (props) => {
|
||||
|
||||
useCountUp({
|
||||
ref: 'counter',
|
||||
end: 1234567,
|
||||
enableScrollSpy: true,
|
||||
scrollSpyDelay: 1000,
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="wpo-fun-fact-section content">
|
||||
<div className="right-bg">
|
||||
<VideoModal/>
|
||||
</div>
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col col-lg-6">
|
||||
<div className="wpo-fun-fact-wrap">
|
||||
<div className="wpo-fun-fact-grids clearfix">
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={35} enableScrollSpy /></span>K</h3>
|
||||
<p>Total People lived in our city</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={12} enableScrollSpy /></span>K</h3>
|
||||
<p>Square kilometers region covers</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={25} enableScrollSpy /></span>%</h3>
|
||||
<p>Private & domestic garden land</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid">
|
||||
<div className="info">
|
||||
<h3><span><CountUp end={8} enableScrollSpy /></span>th</h3>
|
||||
<p>Average Costs of Home Ownership</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span id="counter" className='d-none' />
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FunFact;
|
||||
15
components/FunFactVideo/FunFactVideo2.js
Normal file
15
components/FunFactVideo/FunFactVideo2.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
import VideoModal from '../ModalVideo/VideoModal';
|
||||
import fImg from '/public/images/funfact3.jpg'
|
||||
import Image from 'next/image';
|
||||
|
||||
const FunFactVideo = (props) => {
|
||||
return (
|
||||
<div className="funfact-video mt-0">
|
||||
<Image src={fImg} alt="" />
|
||||
<VideoModal />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FunFactVideo;
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import Header from '../header/Header';
|
||||
import Header2 from '../header2/Header2';
|
||||
|
||||
export default function Navbar(props) {
|
||||
export default function Navbar2(props) {
|
||||
const [scroll, setScroll] = React.useState(0);
|
||||
|
||||
const handleScroll = () => setScroll(document.documentElement.scrollTop);
|
||||
@ -15,7 +15,7 @@ export default function Navbar(props) {
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Header hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} />
|
||||
<Header2 hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
components/Navbar/Navbar2.js
Normal file
21
components/Navbar/Navbar2.js
Normal file
@ -0,0 +1,21 @@
|
||||
import React from "react";
|
||||
import Header from '../header/Header';
|
||||
|
||||
export default function Navbar(props) {
|
||||
const [scroll, setScroll] = React.useState(0);
|
||||
|
||||
const handleScroll = () => setScroll(document.documentElement.scrollTop);
|
||||
|
||||
React.useEffect(() => {
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
const className = scroll > 80 ? "fixed-navbar active" : "fixed-navbar";
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<Header hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
183
components/ServiceSectionS2/ServiceSectionS2-2.js
Normal file
183
components/ServiceSectionS2/ServiceSectionS2-2.js
Normal file
@ -0,0 +1,183 @@
|
||||
import React, { useState } from 'react';
|
||||
import { TabContent, TabPane, Nav, NavItem, NavLink, Row } from 'reactstrap';
|
||||
import classnames from 'classnames';
|
||||
import Link from 'next/link'
|
||||
import Services from '../../api/service'
|
||||
import Image from 'next/image';
|
||||
|
||||
|
||||
const ClickHandler = () => {
|
||||
window.scrollTo(10, 0);
|
||||
}
|
||||
|
||||
const ServiceSectionS2 = () => {
|
||||
|
||||
const [activeTab, setActiveTab] = useState('1');
|
||||
|
||||
const toggle = tab => {
|
||||
if (activeTab !== tab) setActiveTab(tab);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="wpo-campaign-area-s4 section-padding">
|
||||
<div className="container">
|
||||
<div className="wpo-campaign-wrap">
|
||||
<Nav tabs>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === '1' })}
|
||||
onClick={() => { toggle('1'); }}
|
||||
>
|
||||
Education
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === '2' })}
|
||||
onClick={() => { toggle('2'); }}
|
||||
>
|
||||
Social Services
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === '3' })}
|
||||
onClick={() => { toggle('3'); }}
|
||||
>
|
||||
Business
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === '4' })}
|
||||
onClick={() => { toggle('4'); }}
|
||||
>
|
||||
Qualification
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
<NavItem>
|
||||
<NavLink
|
||||
className={classnames({ active: activeTab === '5' })}
|
||||
onClick={() => { toggle('5'); }}
|
||||
>
|
||||
Development
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
|
||||
<TabContent activeTab={activeTab}>
|
||||
<TabPane tabId="1">
|
||||
<div className="row">
|
||||
{Services.slice(5, 8).map((service, srv) => (
|
||||
<div className="col-lg-4 col-md-6 col-12" key={srv}>
|
||||
<div className="wpo-campaign-single">
|
||||
<div className="wpo-campaign-item">
|
||||
<div className="wpo-campaign-img">
|
||||
<Image src={service.sImgS} alt="" />
|
||||
</div>
|
||||
<div className="wpo-campaign-content">
|
||||
<div className="wpo-campaign-text-top">
|
||||
<h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tabId="2">
|
||||
<div className="row">
|
||||
{Services.slice(8, 11).map((service, srv) => (
|
||||
<div className="col-lg-4 col-md-6 col-12" key={srv}>
|
||||
<div className="wpo-campaign-single">
|
||||
<div className="wpo-campaign-item">
|
||||
<div className="wpo-campaign-img">
|
||||
<Image src={service.sImgS} alt="" />
|
||||
</div>
|
||||
<div className="wpo-campaign-content">
|
||||
<div className="wpo-campaign-text-top">
|
||||
<h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</TabPane>
|
||||
<TabPane tabId="3">
|
||||
<Row>
|
||||
{Services.slice(11, 14).map((service, srv) => (
|
||||
<div className="col-lg-4 col-md-6 col-12" key={srv}>
|
||||
<div className="wpo-campaign-single">
|
||||
<div className="wpo-campaign-item">
|
||||
<div className="wpo-campaign-img">
|
||||
<Image src={service.sImgS} alt="" />
|
||||
</div>
|
||||
<div className="wpo-campaign-content">
|
||||
<div className="wpo-campaign-text-top">
|
||||
<h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tabId="4">
|
||||
<Row>
|
||||
{Services.slice(14, 17).map((service, srv) => (
|
||||
<div className="col-lg-4 col-md-6 col-12" key={srv}>
|
||||
<div className="wpo-campaign-single">
|
||||
<div className="wpo-campaign-item">
|
||||
<div className="wpo-campaign-img">
|
||||
<Image src={service.sImgS} alt="" />
|
||||
</div>
|
||||
<div className="wpo-campaign-content">
|
||||
<div className="wpo-campaign-text-top">
|
||||
<h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
</TabPane>
|
||||
<TabPane tabId="5">
|
||||
<Row>
|
||||
{Services.slice(17, 20).map((service, srv) => (
|
||||
<div className="col-lg-4 col-md-6 col-12" key={srv}>
|
||||
<div className="wpo-campaign-single">
|
||||
<div className="wpo-campaign-item">
|
||||
<div className="wpo-campaign-img">
|
||||
<Image src={service.sImgS} alt="" />
|
||||
</div>
|
||||
<div className="wpo-campaign-content">
|
||||
<div className="wpo-campaign-text-top">
|
||||
<h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</Row>
|
||||
</TabPane>
|
||||
|
||||
</TabContent>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServiceSectionS2;
|
||||
@ -1,47 +1,107 @@
|
||||
import React from "react";
|
||||
import Slider from "react-slick";
|
||||
import Link from 'next/link'
|
||||
import hero1 from '/public/images/slider/1.png'
|
||||
import Image from "next/image";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
|
||||
const settings = {
|
||||
dots: true,
|
||||
arrows: false,
|
||||
speed: 1200,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
autoplay: false,
|
||||
autoplaySpeed: 2500,
|
||||
fade: true
|
||||
};
|
||||
|
||||
const Hero = () => {
|
||||
|
||||
const ClickHandler = () => {
|
||||
window.scrollTo(10, 0);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="static-hero">
|
||||
<section className="wpo-hero-slider">
|
||||
<div className="hero-container">
|
||||
<div className="hero-inner">
|
||||
<div className="container-fluid">
|
||||
<div className="hero-content">
|
||||
<div data-swiper-parallax="300" className="slide-title-sub">
|
||||
<span>We Are Waiting For You</span>
|
||||
</div>
|
||||
<div data-swiper-parallax="300" className="slide-title">
|
||||
<h2>Lets Make The World Great Again</h2>
|
||||
</div>
|
||||
<div data-swiper-parallax="400" className="slide-text">
|
||||
<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="clearfix"></div>
|
||||
<div data-swiper-parallax="500" className="slide-btns">
|
||||
<Link onClick={ClickHandler} href="/about" className="theme-btn">Join The Campaign</Link>
|
||||
</div>
|
||||
<div className="politian-pic">
|
||||
<Image src={hero1} alt="" />
|
||||
<div className="politian-shape">
|
||||
<div className="shape-1"></div>
|
||||
<div className="shape-2"></div>
|
||||
<div className="shape-3"></div>
|
||||
<div className="shape-4"></div>
|
||||
<div className="hero-wrapper">
|
||||
<Slider {...settings}>
|
||||
<div className="hero-slide">
|
||||
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-1.jpg'})` }}>
|
||||
<div className="container-fluid">
|
||||
<div className="slide-content">
|
||||
<div data-swiper-parallax="300" className="slide-title">
|
||||
<h2>Wisdom. Freedom. Hope.</h2>
|
||||
</div>
|
||||
<div data-swiper-parallax="400" className="slide-text">
|
||||
<p>We can taking small steps and making small changes.</p>
|
||||
</div>
|
||||
<div className="clearfix"></div>
|
||||
<div className="slide-btns">
|
||||
<Link href="/about" className="theme-btn">Join The Campaign</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hero-slide">
|
||||
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-2.jpg'})` }}>
|
||||
<div className="container-fluid">
|
||||
<div className="slide-content">
|
||||
<div data-swiper-parallax="300" className="slide-title">
|
||||
<h2>Wisdom. Freedom. Hope.</h2>
|
||||
</div>
|
||||
<div data-swiper-parallax="400" className="slide-text">
|
||||
<p>We can taking small steps and making small changes.</p>
|
||||
</div>
|
||||
<div className="clearfix"></div>
|
||||
<div className="slide-btns">
|
||||
<Link href="/about" className="theme-btn">Join The Campaign</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-slide">
|
||||
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-3.jpg'})` }}>
|
||||
<div className="container-fluid">
|
||||
<div className="slide-content">
|
||||
<div data-swiper-parallax="300" className="slide-title">
|
||||
<h2>Wisdom. Freedom. Hope.</h2>
|
||||
</div>
|
||||
<div data-swiper-parallax="400" className="slide-text">
|
||||
<p>We can taking small steps and making small changes.</p>
|
||||
</div>
|
||||
<div className="clearfix"></div>
|
||||
<div className="slide-btns">
|
||||
<Link href="/about" className="theme-btn">Join The Campaign</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-slide">
|
||||
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-4.jpg'})` }}>
|
||||
<div className="container-fluid">
|
||||
<div className="slide-content">
|
||||
<div data-swiper-parallax="300" className="slide-title">
|
||||
<h2>Wisdom. Freedom. Hope.</h2>
|
||||
</div>
|
||||
<div data-swiper-parallax="400" className="slide-text">
|
||||
<p>We can taking small steps and making small changes.</p>
|
||||
</div>
|
||||
<div className="clearfix"></div>
|
||||
<div className="slide-btns">
|
||||
<Link href="/about" className="theme-btn">Join The Campaign</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-shape">
|
||||
<svg viewBox="0 0 1920 193" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0L960 193L1920 0V193H0V0Z" fill="white" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
49
components/hero/hero2.js
Normal file
49
components/hero/hero2.js
Normal file
@ -0,0 +1,49 @@
|
||||
import React from "react";
|
||||
import Link from 'next/link'
|
||||
import hero1 from '/public/images/slider/1.png'
|
||||
import Image from "next/image";
|
||||
|
||||
const Hero = () => {
|
||||
|
||||
const ClickHandler = () => {
|
||||
window.scrollTo(10, 0);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="static-hero">
|
||||
<div className="hero-container">
|
||||
<div className="hero-inner">
|
||||
<div className="container-fluid">
|
||||
<div className="hero-content">
|
||||
<div data-swiper-parallax="300" className="slide-title-sub">
|
||||
<span>We Are Waiting For You</span>
|
||||
</div>
|
||||
<div data-swiper-parallax="300" className="slide-title">
|
||||
<h2>Lets Make The World Great Again</h2>
|
||||
</div>
|
||||
<div data-swiper-parallax="400" className="slide-text">
|
||||
<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="clearfix"></div>
|
||||
<div data-swiper-parallax="500" className="slide-btns">
|
||||
<Link onClick={ClickHandler} href="/about" className="theme-btn">Join The Campaign</Link>
|
||||
</div>
|
||||
<div className="politian-pic">
|
||||
<Image src={hero1} alt="" />
|
||||
<div className="politian-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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Hero;
|
||||
@ -1,9 +1,10 @@
|
||||
import React, {Fragment} from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import Navbar from '../components/Navbar/Navbar'
|
||||
import Hero from '../components/hero/hero';
|
||||
import Features from '../components/Features/Features';
|
||||
import About from '../components/about/about';
|
||||
import ServiceSection from '../components/ServiceSection/ServiceSection';
|
||||
import ServiceSectionS2 from '../components/ServiceSectionS2/ServiceSectionS2';
|
||||
import CampaignSection from '../components/CampaignSection/CampaignSection';
|
||||
import Testimonial from '../components/Testimonial/Testimonial';
|
||||
import FunFact from '../components/FunFact/FunFact';
|
||||
@ -13,27 +14,30 @@ import InstagramSection from '../components/InstagramSection/InstagramSection';
|
||||
import Donors from '../components/Donors/Donors';
|
||||
import PartnerSection from '../components/PartnerSection/PartnerSection';
|
||||
import abimg from '/public/images/about.jpg'
|
||||
import FunFactVideo from '../components/FunFactVideo/FunFactVideo';
|
||||
import Footer from '../components/footer/Footer';
|
||||
import Scrollbar from '../components/scrollbar/scrollbar';
|
||||
|
||||
const HomePage =() => {
|
||||
return(
|
||||
const HomePage = () => {
|
||||
return (
|
||||
<Fragment>
|
||||
<Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'}/>
|
||||
<Hero/>
|
||||
<Features/>
|
||||
<About abimg={abimg}/>
|
||||
<ServiceSection/>
|
||||
<CampaignSection/>
|
||||
<Testimonial/>
|
||||
<FunFact/>
|
||||
<TeamSection/>
|
||||
<Donors/>
|
||||
<BlogSection/>
|
||||
<InstagramSection/>
|
||||
<PartnerSection/>
|
||||
<Footer/>
|
||||
<Scrollbar/>
|
||||
<Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
|
||||
<Hero />
|
||||
<Features sClass={'wpo-service-section-s2'} />
|
||||
<About abimg={abimg} />
|
||||
<ServiceSection />
|
||||
<FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
|
||||
<ServiceSectionS2 />
|
||||
<Testimonial />
|
||||
<FunFactVideo />
|
||||
{/* <CampaignSection/> */}
|
||||
<TeamSection />
|
||||
<Donors />
|
||||
<BlogSection />
|
||||
{/* <InstagramSection/> */}
|
||||
{/* <PartnerSection/> */}
|
||||
<Footer />
|
||||
<Scrollbar />
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user