MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home components created

Browse Source
This commit is contained in:
Selvi 2025-08-08 14:03:07 +05:30
parent 28841060c2
commit 29deaf2575
11 changed files with 661 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
components/Features/Features.js
View File

@ -1,7 +1,63 @@
import React from "react"; 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 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 = () => { const ClickHandler = () => {
window.scrollTo(10, 0); window.scrollTo(10, 0);
@ -9,100 +65,29 @@ const ClickHandler = () => {
const Features = (props) => { const Features = (props) => {
return ( return (
<section className="wpo-features-area"> <section className={`wpo-service-section section-padding ${props.sClass}`}>
<div className="container"> <div className="container">
<div className="features-wrap"> <SectionTitle subTitle={'Mission And Vision'} Title={'How we can build a better country together!'}/>
<div className="row"> <div className="row-grid wpo-service-slider">
<div className="col col-lg-3 col-md-6 col-12"> <Slider {...settings}>
<div className="feature-item-wrap"> {Services.slice(0, 5).map((service, srv) => (
<div className="feature-item"> <div className="grid" key={srv}>
<div className="icon"> <div className="wpo-service-item">
<i className="fi flaticon-goal"></i> <div className="wpo-service-text">
</div> <div className="service-icon">
<div className="feature-text"> <i className={`fi ${service.icon}`}></i>
<h2><Link onClick={ClickHandler} href="/about">Our Mission</Link></h2> </div>
</div> <h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2>
</div> <p>{service.description}</p>
<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> </div>
</div> ))}
<div className="col col-lg-3 col-md-6 col-12"> </Slider>
<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>
</div> </div>
</section> </section>
) );
} }
export default Features; export default Features;

108
components/Features/Features2.js Normal file
View 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;

67
components/FunFact/FunFact.js
View File

@ -1,6 +1,8 @@
import React from 'react' import React from 'react'
import CountUp, { useCountUp } from 'react-countup'; import CountUp, { useCountUp } from 'react-countup';
import VideoModal from '../ModalVideo/VideoModal'; import VideoModal from '../ModalVideo/VideoModal';
import fImg from '/public/images/funfact2.jpg'
import Image from 'next/image';
const FunFact = (props) => { const FunFact = (props) => {
@ -12,46 +14,51 @@ const FunFact = (props) => {
}); });
return ( return (
<section className="wpo-fun-fact-section content"> <div className={props.fnTpClass}>
<div className="right-bg"> <section className={`wpo-fun-fact-section-s2 content ${props.fnClass}`}>
<VideoModal/> <div className="container">
</div> <div className="row">
<div className="container-fluid"> <div className="col col-lg-12">
<div className="row"> <div className="wpo-fun-fact-wrap">
<div className="col col-lg-6"> <div className="wpo-fun-fact-grids clearfix">
<div className="wpo-fun-fact-wrap"> <div className="grid">
<div className="wpo-fun-fact-grids clearfix"> <div className="info">
<div className="grid"> <h3><span><CountUp end={35} enableScrollSpy /></span>K</h3>
<div className="info"> <p>Total People lived in our city</p>
<h3><span><CountUp end={35} enableScrollSpy /></span>K</h3> </div>
<p>Total People lived in our city</p>
</div> </div>
</div> <div className="grid">
<div className="grid"> <div className="info">
<div className="info"> <h3><span><CountUp end={12} enableScrollSpy /></span>K</h3>
<h3><span><CountUp end={12} enableScrollSpy /></span>K</h3> <p>Square kilometers region covers</p>
<p>Square kilometers region covers</p> </div>
</div> </div>
</div> <div className="grid">
<div className="grid"> <div className="info">
<div className="info"> <h3><span><CountUp end={25} enableScrollSpy /></span>%</h3>
<h3><span><CountUp end={25} enableScrollSpy /></span>%</h3> <p>Private & domestic garden land</p>
<p>Private & domestic garden land</p> </div>
</div> </div>
</div> <div className="grid">
<div className="grid"> <div className="info">
<div className="info"> <h3><span><CountUp end={8} enableScrollSpy /></span>th</h3>
<h3><span><CountUp end={8} enableScrollSpy /></span>th</h3> <p>Average Costs of Home Ownership</p>
<p>Average Costs of Home Ownership</p> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
<div className="funfact-video">
<div className="container">
<Image src={fImg} alt="" />
<VideoModal />
</div>
</div> </div>
<span id="counter" className='d-none' /> <span id="counter" className='d-none'/>
</section> </div>
) )
} }

58
components/FunFact/FunFact2.js Normal file
View 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
View 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;

6
components/Navbar/Navbar.js
View File

@ -1,7 +1,7 @@
import React from "react"; 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 [scroll, setScroll] = React.useState(0);
const handleScroll = () => setScroll(document.documentElement.scrollTop); const handleScroll = () => setScroll(document.documentElement.scrollTop);
@ -15,7 +15,7 @@ export default function Navbar(props) {
return ( return (
<div className={className}> <div className={className}>
<Header hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} /> <Header2 hclass={props.hclass} Logo={props.Logo} topbarNone={props.topbarNone} />
</div> </div>
); );
} }

21
components/Navbar/Navbar2.js Normal file
View 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
View 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;

126
components/hero/hero.js
View File

@ -1,47 +1,107 @@
import React from "react"; import React from "react";
import Slider from "react-slick";
import Link from 'next/link' import Link from 'next/link'
import hero1 from '/public/images/slider/1.png' import "slick-carousel/slick/slick.css";
import Image from "next/image"; 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 Hero = () => {
const ClickHandler = () => {
window.scrollTo(10, 0);
}
return ( return (
<section className="static-hero"> <section className="wpo-hero-slider">
<div className="hero-container"> <div className="hero-container">
<div className="hero-inner"> <div className="hero-wrapper">
<div className="container-fluid"> <Slider {...settings}>
<div className="hero-content"> <div className="hero-slide">
<div data-swiper-parallax="300" className="slide-title-sub"> <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-1.jpg'})` }}>
<span>We Are Waiting For You</span> <div className="container-fluid">
</div> <div className="slide-content">
<div data-swiper-parallax="300" className="slide-title"> <div data-swiper-parallax="300" className="slide-title">
<h2>Lets Make The World Great Again</h2> <h2>Wisdom. Freedom. Hope.</h2>
</div> </div>
<div data-swiper-parallax="400" className="slide-text"> <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 <p>We can taking small steps and making small changes.</p>
impact on the world.</p> </div>
</div> <div className="clearfix"></div>
<div className="clearfix"></div> <div className="slide-btns">
<div data-swiper-parallax="500" className="slide-btns"> <Link href="/about" className="theme-btn">Join The Campaign</Link>
<Link onClick={ClickHandler} href="/about" className="theme-btn">Join The Campaign</Link> </div>
</div> </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>
</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> </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> </section>
) )
} }

49
components/hero/hero2.js Normal file
View 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;

40
pages/index.js
View File

@ -1,9 +1,10 @@
import React, {Fragment} from 'react'; import React, { Fragment } from 'react';
import Navbar from '../components/Navbar/Navbar' import Navbar from '../components/Navbar/Navbar'
import Hero from '../components/hero/hero'; import Hero from '../components/hero/hero';
import Features from '../components/Features/Features'; import Features from '../components/Features/Features';
import About from '../components/about/about'; import About from '../components/about/about';
import ServiceSection from '../components/ServiceSection/ServiceSection'; import ServiceSection from '../components/ServiceSection/ServiceSection';
import ServiceSectionS2 from '../components/ServiceSectionS2/ServiceSectionS2';
import CampaignSection from '../components/CampaignSection/CampaignSection'; import CampaignSection from '../components/CampaignSection/CampaignSection';
import Testimonial from '../components/Testimonial/Testimonial'; import Testimonial from '../components/Testimonial/Testimonial';
import FunFact from '../components/FunFact/FunFact'; import FunFact from '../components/FunFact/FunFact';
@ -13,27 +14,30 @@ import InstagramSection from '../components/InstagramSection/InstagramSection';
import Donors from '../components/Donors/Donors'; import Donors from '../components/Donors/Donors';
import PartnerSection from '../components/PartnerSection/PartnerSection'; import PartnerSection from '../components/PartnerSection/PartnerSection';
import abimg from '/public/images/about.jpg' import abimg from '/public/images/about.jpg'
import FunFactVideo from '../components/FunFactVideo/FunFactVideo';
import Footer from '../components/footer/Footer'; import Footer from '../components/footer/Footer';
import Scrollbar from '../components/scrollbar/scrollbar'; import Scrollbar from '../components/scrollbar/scrollbar';
const HomePage =() => { const HomePage = () => {
return( return (
<Fragment> <Fragment>
<Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'}/> <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
<Hero/> <Hero />
<Features/> <Features sClass={'wpo-service-section-s2'} />
<About abimg={abimg}/> <About abimg={abimg} />
<ServiceSection/> <ServiceSection />
<CampaignSection/> <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
<Testimonial/> <ServiceSectionS2 />
<FunFact/> <Testimonial />
<TeamSection/> <FunFactVideo />
<Donors/> {/* <CampaignSection/> */}
<BlogSection/> <TeamSection />
<InstagramSection/> <Donors />
<PartnerSection/> <BlogSection />
<Footer/> {/* <InstagramSection/> */}
<Scrollbar/> {/* <PartnerSection/> */}
<Footer />
<Scrollbar />
</Fragment> </Fragment>
) )
}; };