96 lines
4.3 KiB
JavaScript
96 lines
4.3 KiB
JavaScript
import React from "react";
|
|
import Slider from "react-slick";
|
|
import Link from 'next/link'
|
|
import "slick-carousel/slick/slick.css";
|
|
import "slick-carousel/slick/slick-theme.css";
|
|
import himg from '/public/images/slider/3.png'
|
|
import icon1 from '/public/images/slider/medal.svg'
|
|
import icon2 from '/public/images/slider/stick-man.svg'
|
|
|
|
import cImg1 from '/public/images/slider/client1.png'
|
|
import cImg2 from '/public/images/slider/client2.png'
|
|
import cImg3 from '/public/images/slider/client3.png'
|
|
import cImg4 from '/public/images/slider/client4.png'
|
|
import Image from "next/image";
|
|
|
|
const settings = {
|
|
dots: false,
|
|
arrows: false,
|
|
speed: 1200,
|
|
slidesToShow: 4,
|
|
slidesToScroll: 1,
|
|
autoplay: true,
|
|
autoplaySpeed: 2500,
|
|
};
|
|
|
|
const ClickHandler = () => {
|
|
window.scrollTo(10, 0);
|
|
}
|
|
|
|
const Hero3 = () => {
|
|
return (
|
|
<section className="static-hero-s2">
|
|
<div className="hero-container">
|
|
<div className="hero-inner">
|
|
<div className="container-fluid">
|
|
<div className="hero-content">
|
|
<div data-swiper-parallax="300" className="slide-title">
|
|
<h2>Meet <span>Esther Howard,</span> The Next Country Leader</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">
|
|
<div className="inner">
|
|
<Image src={himg} alt="" />
|
|
</div>
|
|
<div className="back-shape"></div>
|
|
<div className="award">
|
|
<div className="icon"><i><Image src={icon1} alt="" /></i></div>
|
|
<div className="content">
|
|
<h5>Best Leader Award Winner</h5>
|
|
</div>
|
|
</div>
|
|
<div className="wpo-supporter">
|
|
<div className="wpo-supporter-text">
|
|
<div className="icon"><i><Image src={icon2} alt="" /></i>
|
|
</div>
|
|
<div className="content">
|
|
<h3>500K</h3>
|
|
<p>Active Supporter</p>
|
|
</div>
|
|
</div>
|
|
<div className="wpo-supporter-img">
|
|
<ul className="wpo-supporter-slide">
|
|
<Slider {...settings}>
|
|
<li><Image
|
|
src={cImg1} alt="" /></li>
|
|
<li><Image
|
|
src={cImg2} alt="" /></li>
|
|
<li><Image
|
|
src={cImg3} alt="" /></li>
|
|
<li><Image
|
|
src={cImg4} alt="" /></li>
|
|
<li><Image
|
|
src={cImg1} alt="" /></li>
|
|
</Slider>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
export default Hero3; |