diff --git a/components/Features/Features.js b/components/Features/Features.js index 2bbfe0b..4482e1d 100644 --- a/components/Features/Features.js +++ b/components/Features/Features.js @@ -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 ( -
+
-
-
-
-
-
-
- -
-
-

Our Mission

-
-
-
-
- -
-
-

Our Mission

-

Empowering communities through compassionate action, positive change with charity mission.

+ +
+ + {Services.slice(0, 5).map((service, srv) => ( +
+
+
+
+ +
+

{service.sTitle}

+

{service.description}

-
-
-
-
-
- -
-
-

Campaign Events

-
-
-
-
- -
-
-

Campaign Events

-

Join us in supporting a worthy cause at our charity event, together we can make a difference.

-
-
-
-
-
-
-
-
- -
-
-

Make Donation

-
-
-
-
- -
-
-

Make Donation

-

Donate now to help those in need! Make a difference by taking action with - your donation.

-
-
-
-
-
-
-
-
- -
-
-

Join Volunteer

-
-
-
-
- -
-
-

Join Volunteer

-

Join our team of volunteers and help make a positive impact in your community today.

-
-
-
-
-
+ ))} +
- ) + ); } export default Features; \ No newline at end of file diff --git a/components/Features/Features2.js b/components/Features/Features2.js new file mode 100644 index 0000000..2bbfe0b --- /dev/null +++ b/components/Features/Features2.js @@ -0,0 +1,108 @@ +import React from "react"; +import Link from 'next/link' + + + +const ClickHandler = () => { + window.scrollTo(10, 0); +} + +const Features = (props) => { + return ( +
+
+
+
+
+
+
+
+ +
+
+

Our Mission

+
+
+
+
+ +
+
+

Our Mission

+

Empowering communities through compassionate action, positive change with charity mission.

+
+
+
+
+
+
+
+
+ +
+
+

Campaign Events

+
+
+
+
+ +
+
+

Campaign Events

+

Join us in supporting a worthy cause at our charity event, together we can make a difference.

+
+
+
+
+
+
+
+
+ +
+
+

Make Donation

+
+
+
+
+ +
+
+

Make Donation

+

Donate now to help those in need! Make a difference by taking action with + your donation.

+
+
+
+
+
+
+
+
+ +
+
+

Join Volunteer

+
+
+
+
+ +
+
+

Join Volunteer

+

Join our team of volunteers and help make a positive impact in your community today.

+
+
+
+
+
+
+
+
+ ) +} + +export default Features; \ No newline at end of file diff --git a/components/FunFact/FunFact.js b/components/FunFact/FunFact.js index 23a7ac5..efea790 100644 --- a/components/FunFact/FunFact.js +++ b/components/FunFact/FunFact.js @@ -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 ( -
-
- -
-
-
-
-
-
-
-
-

K

-

Total People lived in our city

+
+
+
+
+
+
+
+
+
+

K

+

Total People lived in our city

+
-
-
-
-

K

-

Square kilometers region covers

+
+
+

K

+

Square kilometers region covers

+
-
-
-
-

%

-

Private & domestic garden land

+
+
+

%

+

Private & domestic garden land

+
-
-
-
-

th

-

Average Costs of Home Ownership

+
+
+

th

+

Average Costs of Home Ownership

+
+
+
+
+ + +
- -
+ + ) } diff --git a/components/FunFact/FunFact2.js b/components/FunFact/FunFact2.js new file mode 100644 index 0000000..23a7ac5 --- /dev/null +++ b/components/FunFact/FunFact2.js @@ -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 ( +
+
+ +
+
+
+
+
+
+
+
+

K

+

Total People lived in our city

+
+
+
+
+

K

+

Square kilometers region covers

+
+
+
+
+

%

+

Private & domestic garden land

+
+
+
+
+

th

+

Average Costs of Home Ownership

+
+
+
+
+
+
+
+ +
+ ) +} + +export default FunFact; \ No newline at end of file diff --git a/components/FunFactVideo/FunFactVideo2.js b/components/FunFactVideo/FunFactVideo2.js new file mode 100644 index 0000000..f680274 --- /dev/null +++ b/components/FunFactVideo/FunFactVideo2.js @@ -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 ( +
+ + +
+ ) +} + +export default FunFactVideo; \ No newline at end of file diff --git a/components/Navbar/Navbar.js b/components/Navbar/Navbar.js index 8ccdb1f..ded552f 100644 --- a/components/Navbar/Navbar.js +++ b/components/Navbar/Navbar.js @@ -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 (
-
+
); } \ No newline at end of file diff --git a/components/Navbar/Navbar2.js b/components/Navbar/Navbar2.js new file mode 100644 index 0000000..8ccdb1f --- /dev/null +++ b/components/Navbar/Navbar2.js @@ -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 ( +
+
+
+ ); +} \ No newline at end of file diff --git a/components/ServiceSectionS2/ServiceSectionS2-2.js b/components/ServiceSectionS2/ServiceSectionS2-2.js new file mode 100644 index 0000000..28ea7d5 --- /dev/null +++ b/components/ServiceSectionS2/ServiceSectionS2-2.js @@ -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 ( +
+
+
+ + + + +
+ {Services.slice(5, 8).map((service, srv) => ( +
+
+
+
+ +
+
+
+

{service.sTitle}

+

{service.description}

+
+
+
+
+
+ ))} +
+ + +
+ {Services.slice(8, 11).map((service, srv) => ( +
+
+
+
+ +
+
+
+

{service.sTitle}

+

{service.description}

+
+
+
+
+
+ ))} +
+ + + + {Services.slice(11, 14).map((service, srv) => ( +
+
+
+
+ +
+
+
+

{service.sTitle}

+

{service.description}

+
+
+
+
+
+ ))} + + + + + {Services.slice(14, 17).map((service, srv) => ( +
+
+
+
+ +
+
+
+

{service.sTitle}

+

{service.description}

+
+
+
+
+
+ ))} + + + + + {Services.slice(17, 20).map((service, srv) => ( +
+
+
+
+ +
+
+
+

{service.sTitle}

+

{service.description}

+
+
+
+
+
+ ))} + + + + + +
+
+
+ ); +} + +export default ServiceSectionS2; \ No newline at end of file diff --git a/components/hero/hero.js b/components/hero/hero.js index a65bb21..a7bdd71 100644 --- a/components/hero/hero.js +++ b/components/hero/hero.js @@ -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 ( -
+
-
-
-
-
- We Are Waiting For You -
-
-

Lets Make The World Great Again

-
-
-

We can start by taking small steps and making small changes that can have a big - impact on the world.

-
-
-
- Join The Campaign -
-
- -
-
-
-
-
+
+ +
+
+
+
+
+

Wisdom. Freedom. Hope.

+
+
+

We can taking small steps and making small changes.

+
+
+
+ Join The Campaign +
+
-
+ +
+
+
+
+
+

Wisdom. Freedom. Hope.

+
+
+

We can taking small steps and making small changes.

+
+
+
+ Join The Campaign +
+
+
+
+
+
+
+
+
+
+

Wisdom. Freedom. Hope.

+
+
+

We can taking small steps and making small changes.

+
+
+
+ Join The Campaign +
+
+
+
+
+
+
+
+
+
+

Wisdom. Freedom. Hope.

+
+
+

We can taking small steps and making small changes.

+
+
+
+ Join The Campaign +
+
+
+
+
+
+
+ + + +
) } diff --git a/components/hero/hero2.js b/components/hero/hero2.js new file mode 100644 index 0000000..a65bb21 --- /dev/null +++ b/components/hero/hero2.js @@ -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 ( +
+
+
+
+
+
+ We Are Waiting For You +
+
+

Lets Make The World Great Again

+
+
+

We can start by taking small steps and making small changes that can have a big + impact on the world.

+
+
+
+ Join The Campaign +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ ) +} + +export default Hero; \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 79970eb..4a4cfc4 100644 --- a/pages/index.js +++ b/pages/index.js @@ -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 ( - - - - - - - - - - - - - -