diff --git a/package-lock.json b/package-lock.json index 2018526..2677d18 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,10 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-icons": "^4.6.0", + "react-router": "^6.4.3", + "react-router-dom": "^6.4.3" }, "devDependencies": { "@types/react": "^18.0.25", @@ -551,6 +554,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -802,6 +813,7 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", + "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -933,6 +945,30 @@ "integrity": "sha512-PcT+/wyDqJQsRVhaE9uX/Oq4XLrFh0ce/bs2TJh4CSaw9xuvI+xFrH2nAYOADbhQjUgAhNWC5LKoUsakm4dxng==", "dev": true, "hasInstallScript": true, + "dependencies": { + "@esbuild/android-arm": "0.15.12", + "@esbuild/linux-loong64": "0.15.12", + "esbuild-android-64": "0.15.12", + "esbuild-android-arm64": "0.15.12", + "esbuild-darwin-64": "0.15.12", + "esbuild-darwin-arm64": "0.15.12", + "esbuild-freebsd-64": "0.15.12", + "esbuild-freebsd-arm64": "0.15.12", + "esbuild-linux-32": "0.15.12", + "esbuild-linux-64": "0.15.12", + "esbuild-linux-arm": "0.15.12", + "esbuild-linux-arm64": "0.15.12", + "esbuild-linux-mips64le": "0.15.12", + "esbuild-linux-ppc64le": "0.15.12", + "esbuild-linux-riscv64": "0.15.12", + "esbuild-linux-s390x": "0.15.12", + "esbuild-netbsd-64": "0.15.12", + "esbuild-openbsd-64": "0.15.12", + "esbuild-sunos-64": "0.15.12", + "esbuild-windows-32": "0.15.12", + "esbuild-windows-64": "0.15.12", + "esbuild-windows-arm64": "0.15.12" + }, "bin": { "esbuild": "bin/esbuild" }, @@ -1847,6 +1883,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", + "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", @@ -1856,6 +1900,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "dependencies": { + "@remix-run/router": "1.0.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "dependencies": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -1909,6 +1983,9 @@ "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==", "dev": true, + "dependencies": { + "fsevents": "~2.3.2" + }, "bin": { "rollup": "dist/bin/rollup" }, @@ -2118,6 +2195,7 @@ "dev": true, "dependencies": { "esbuild": "^0.15.9", + "fsevents": "~2.3.2", "postcss": "^8.4.18", "resolve": "^1.22.1", "rollup": "^2.79.1" @@ -2556,6 +2634,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.3.tgz", + "integrity": "sha512-ceuyTSs7PZ/tQqi19YZNBc5X7kj1f8p+4DIyrcIYFY9h+hd1OKm4RqtiWldR9eGEvIiJfsqwM4BsuCtRIuEw6Q==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -3354,12 +3437,35 @@ "scheduler": "^0.23.0" } }, + "react-icons": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.6.0.tgz", + "integrity": "sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==", + "requires": {} + }, "react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.3.tgz", + "integrity": "sha512-BT6DoGn6aV1FVP5yfODMOiieakp3z46P1Fk0RNzJMACzE7C339sFuHebfvWtnB4pzBvXXkHP2vscJzWRuUjTtA==", + "requires": { + "@remix-run/router": "1.0.3" + } + }, + "react-router-dom": { + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.3.tgz", + "integrity": "sha512-MiaYQU8CwVCaOfJdYvt84KQNjT78VF0TJrA17SIQgNHRvLnXDJO6qsFqq8F/zzB1BWZjCFIrQpu4QxcshitziQ==", + "requires": { + "@remix-run/router": "1.0.3", + "react-router": "6.4.3" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index ee16cd9..34b8764 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,10 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-icons": "^4.6.0", + "react-router": "^6.4.3", + "react-router-dom": "^6.4.3" }, "devDependencies": { "@types/react": "^18.0.25", diff --git a/src/App.tsx b/src/App.tsx index c109ea5..c0bc3b0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,18 +1,18 @@ -import HeroSection from "./components/HeroSection" -import Header from "./components/Header" -import About from "./components/About" +import HeroSection from "./components/Hero/HeroSection" +import Header from "./components/Header/Header" +import About from "./components/About/About" import Team from "./components/Team" import Fundraising from "./components/Fundaraising" import Footer from "./components/Footer" function App() { return ( - < div className="bg-green-1"> + < div>
- - + {/* + */} ) } diff --git a/src/components/About.tsx b/src/components/About.tsx deleted file mode 100644 index a8cc369..0000000 --- a/src/components/About.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import Img1 from '../assets/media/kibera-1.png' -import Img2 from '../assets/media/kibera-2.png' -import Img3 from '../assets/media/kibera-6.jpg' - -function About() { - return ( -
-

About

-

We work in Kibera, a vast slum in Kenya's capital city in Nairobi, currently the largest unplanned settlement in the world

-
- An Image of the Kibera slums - An image of the Kibera slums - An image of the Kibera slums -
- -

Team

-

There are two of us at the moment but we are always looking for more volunteers.

-
- ) -} - -export default About \ No newline at end of file diff --git a/src/components/About/About.css b/src/components/About/About.css new file mode 100644 index 0000000..82f997c --- /dev/null +++ b/src/components/About/About.css @@ -0,0 +1,32 @@ +.gallery-items{ + min-height: 25rem; + max-height: 25rem; + max-width: 30rem; + position: relative; + transition: all 1s ease-in-out; + cursor: pointer; +} + +.gallery-items img{ + height: 100%; + min-width: 100%; + object-fit: cover; +} + +.gallery-text{ + position: absolute; + top: 0; + background-color: rgba(0, 0, 0, 0.85); + height: 90%; + margin-top: 5%; + width: 90%; + margin-left: 5%; + padding: 2rem; + display: none; + align-items: center; + border-radius: 5px; +} + +.ds{ + display: flex; +} \ No newline at end of file diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx new file mode 100644 index 0000000..aa57ac3 --- /dev/null +++ b/src/components/About/About.tsx @@ -0,0 +1,36 @@ +import { useState } from 'react' +import Img1 from '../../assets/media/kibera-1.png' +import Img2 from '../../assets/media/kibera-2.png' +import Img3 from '../../assets/media/kibera-6.jpg' +import './About.css' + +function About() { + const datas = [ + {id: 1, image: Img1, text: "Its unclear how many people live in Kibera but estimates range from 1 million to 1.5million people living in just 2.25 square kilometres."}, + {id: 2, image: Img2, text: "Residents often live in cramped one-roomed homes mostly made of mud and iron sheets. Water is collected in jerry cans from water points around the slum."}, + {id: 3, image: Img3, text: "Life is hard in Kibera but many face those challenges with strength of character. It is is a lively place to be. As you walk around you hear music blaring and people talking."} + ] + + const[textId, setTextId] = useState(0); + const setIdFunction = (id:number) =>{ + setTextId(id); + } + + return ( +
+

About

+

We work in Kibera, a vast slum in Kenya's capital city in Nairobi, currently the largest unplanned settlement in the world

+
+ {datas.map( data => +
setIdFunction(data.id)} + onMouseLeave={() => setIdFunction(0)}> + An Image of the Kibera slums +

{data.text}

+
+ )} +
+
+ ) +} + +export default About \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index c045e77..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,14 +0,0 @@ -function Header() { - return ( - - ) -} - -export default Header; \ No newline at end of file diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 0000000..5a0b8cc --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,79 @@ +.nav{ + display: flex; + justify-content: space-around; + align-items: center; + padding: 0.7rem 0; + position: relative; + z-index: 999; + background-color: #1a4331; +} + +.sticky{ + position: fixed; + top: 0; +} + +.nav-logo{ + height: 40px; +} + +.nav-logo img{ + height: 100%; + border-radius: 16px; +} + +.nav-links{ + display: flex; + gap: 2.5rem; +} + +.nav-links > a{ + padding: 0 1rem; +} + +.nav-links > a:hover{ + border-bottom: 1px solid #fff; +} + +.nav-toggle{ + display: none; +} + +.nav-buttons{ + display: flex; + gap: 2rem; +} + +.nav-buttons > button{ + background-color: #fff; + color: #1a4331; + font-size: 12px; + font-weight: 700; + padding: 0rem 1rem; + border-radius: 5px; +} + +@media(max-width: 768px){ + .nav{ + justify-content: space-between; + padding: 0.5rem 0.1rem; + } + + .sticky{ + width: 100%; + top: 0rem; + border-radius: 0; + margin: 0; + } + .nav-links{ + display: none; + } + + .nav-logo{ + height: 30px; + } + .nav-toggle{ + display: block; + font-size: 24px; + } +} \ No newline at end of file diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..283f77a --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,40 @@ +import './Header.css' +import * as logo from '../../assets/media/new-logo-watoto.jpg'; +import { useState } from 'react'; +import { AiOutlineMenu } from 'react-icons/ai' +const codeLogo = logo.default; + + +function Header() { + const[sticky, setSticky] = useState("#"); + + window.addEventListener('scroll', () =>{ + if(window.pageYOffset >= 80){ + setSticky('sticky'); + }else setSticky('#') + }); + + + return ( + + ) +} + +export default Header; \ No newline at end of file diff --git a/src/components/Hero/Hero.css b/src/components/Hero/Hero.css new file mode 100644 index 0000000..b4c67ee --- /dev/null +++ b/src/components/Hero/Hero.css @@ -0,0 +1,98 @@ +.hero{ + position: relative; +} + +.video{ + object-fit: cover; + min-height: 100vh; + max-height: 100vh; + min-width: 100%; + max-width: 100%; +} + +.description-title{ + background-color: rgba(26,67,49, 0.7); + position: absolute; + top: 0; + height: 100%; + width: 100%; + color: #fff; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; +} + +.introduction{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.introduction h1{ + font-size: 40px; + font-weight: 700; +} + +.introduction .title{ + font-size: 32px; + text-align: center; + font-weight: 600; +} + +.introduction .descriptions{ + width: 75%; + text-align: center; + margin-top: 3rem; + font-size: 18px; + font-weight: 600; +} + +.introduction button{ + margin-top: 3rem; + background-color: rgb(26,67,49); + padding: 0.5rem 2rem; + border-radius: 5px; +} + +.social-icons{ + display: flex; + gap: 2rem; + font-size: 32px; +} + +.social-icons *{ + cursor: pointer; +} + +@media(max-width: 768px){ + .video{ + min-height: 100vh; + max-height: 100vh; + } + + .introduction h1{ + font-size: 24px; + } + + .introduction .title{ + font-size: 16px; + } + + .introduction .descriptions{ + width: 100%; + font-size: 16px; + margin-top: 2rem; + font-weight: normal; + } + + .introduction button{ + margin-top: 1.5rem; + font-size: 16px; + } + + .social-icons{ + font-size: 24px; + } +} \ No newline at end of file diff --git a/src/components/Hero/HeroSection.tsx b/src/components/Hero/HeroSection.tsx new file mode 100644 index 0000000..2d9d7ed --- /dev/null +++ b/src/components/Hero/HeroSection.tsx @@ -0,0 +1,42 @@ +import * as video from '../../assets/media/hero-video.mp4'; +import { IoLogoTwitter } from 'react-icons/io'; +import { BsInstagram, BsFacebook } from 'react-icons/bs' +import './Hero.css' + +const videome = video.default; + +function HeroSection() { + + return ( + +
+ + +
+
+

WATOTO CODING HUB

+

A HUB FOR LEARNERS WITHIN MARGINALIZED COMMUNITIES

+

+ We are a charity organization teaching tech-skills to the kids of the Kibera slums. Kibera Slums is one + of the largest unplanned settlement in the world. There is so much untapped potential in + marginalized communities and to cultivate it we make technology accessible. In spite of the numerous jobs in the + tech sector in Africa, these kids lack access and education to take advantage of the opportunities to excel. + The lessons also work to keep young kids from poverty plaguing the streets of the slum. With the computer + skills they pick up, the kids hope to leave the largest slum in Africa, and find a job. +

+ +
+
+ + + +
+
+
+ ) +} + +export default HeroSection \ No newline at end of file diff --git a/src/components/HeroSection.tsx b/src/components/HeroSection.tsx deleted file mode 100644 index d61a628..0000000 --- a/src/components/HeroSection.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as logo from '../assets/media/new-logo-watoto.jpg'; -import * as video from '../assets/media/hero-video.mp4'; -import instagramSvg from '../assets/media/instagram.svg'; -import twitterSvg from '../assets/media/twitter.svg'; -import facebookSvg from '../assets/media/facebook.svg'; - - - -const videome = video.default; -const codeLogo = logo.default; - -function HeroSection() { - - return ( - -
- -
-
-
- -
-
-

Watoto coding hub

-

A hub for learners within marginalized communities

- - -

A charity teaching tech-skills to the kidsof kibera slums. There is so much untapped potential in marginalized communities and to cultivate it we make technology accessible.

- -
- - Learn more - - - - {/* Social Icons */} -
- -
-
-
- - -
- ) -} - -export default HeroSection \ No newline at end of file