├── .nvmrc
├── src
├── App.css
├── pages
│ ├── Home
│ │ ├── Home.module.css
│ │ ├── SectionFive
│ │ │ ├── SectionFive.module.css
│ │ │ └── SectionFive.jsx
│ │ ├── SectionTwo
│ │ │ ├── SectionTwo.module.css
│ │ │ └── SectionTwo.jsx
│ │ ├── SectionSeven
│ │ │ ├── SectionSeven.module.css
│ │ │ └── SectionSeven.jsx
│ │ ├── Home.jsx
│ │ ├── SectionFour
│ │ │ ├── SectionFour.module.css
│ │ │ └── SectionFour.jsx
│ │ ├── SectionThree
│ │ │ ├── SectionThree.module.css
│ │ │ └── SectionThree.jsx
│ │ ├── SectionSix
│ │ │ ├── SectionSix.module.css
│ │ │ └── SectionSix.jsx
│ │ └── SectionOne
│ │ │ ├── SectionOne.jsx
│ │ │ └── SectionOne.module.css
│ ├── Kenya
│ │ └── Kenya.jsx
│ ├── Morocco
│ │ └── Morocco.jsx
│ ├── Namibia
│ │ └── Namibia.jsx
│ ├── Nigeria
│ │ └── Nigeria.jsx
│ ├── CompanyRegistration
│ │ ├── sortedCountries.jsx
│ │ ├── CompanyRegistration.module.css
│ │ ├── ContactInformation.jsx
│ │ ├── BasicInformation.jsx
│ │ └── CompanyRegistration.jsx
│ ├── Register
│ │ ├── Register.module.css
│ │ └── Register.jsx
│ └── Login
│ │ ├── Login.module.css
│ │ └── Login.jsx
├── assets
│ ├── login.webp
│ ├── flag-japan.png
│ ├── invest_africa.webp
│ ├── fonts
│ │ ├── Poppins-Bold.woff2
│ │ ├── Poppins-Medium.woff2
│ │ ├── Poppins-Regular.woff2
│ │ └── Poppins-SemiBold.woff2
│ └── images
│ │ └── Home
│ │ ├── SectionThree
│ │ ├── map.webp
│ │ ├── kenya.webp
│ │ ├── morocco.webp
│ │ ├── namibia.webp
│ │ └── nigeria.webp
│ │ ├── home-section-1.webp
│ │ ├── home-section-2.webp
│ │ ├── home-section-3.webp
│ │ ├── SectionSix
│ │ ├── Section6.png
│ │ ├── thumbnailOne.png
│ │ └── thumbnailThree.png
│ │ ├── SectionFour
│ │ └── sectionfour.webp
│ │ ├── SectionTwo
│ │ ├── pro_business.webp
│ │ ├── growing_economies.webp
│ │ └── youthful_population.webp
│ │ ├── SectionFive
│ │ ├── industries_food.webp
│ │ ├── industries_power.webp
│ │ ├── industries_health.webp
│ │ ├── industries_mining.webp
│ │ ├── industries_oil_gas.webp
│ │ ├── industries_tourism.webp
│ │ ├── industries_agriculture.webp
│ │ ├── industries_manufacturing.webp
│ │ └── industries_infrastructure.webp
│ │ └── SectionSeven
│ │ └── home_contactus.webp
├── ScrolltoTop.js
├── setupTests.js
├── reportWebVitals.js
├── index.jsx
├── components
│ ├── CountryDescription
│ │ ├── CountryDescription.module.css
│ │ └── CountryDescription.jsx
│ ├── Button
│ │ ├── OutlinedButton
│ │ │ ├── OutlinedButton.jsx
│ │ │ └── OutlinedButton.module.css
│ │ ├── Button.module.css
│ │ └── Button.jsx
│ ├── ForgotPassword
│ │ ├── ForgotPassword.css
│ │ └── ForgotPassword.jsx
│ ├── InputBox
│ │ ├── DropdownBox.jsx
│ │ ├── TextBox.jsx
│ │ ├── InputBox.module.css
│ │ └── InputBox.jsx
│ ├── Cards
│ │ ├── Cards.jsx
│ │ └── Cards.module.css
│ ├── CardTransition
│ │ └── CardTransition.jsx
│ ├── Footer
│ │ ├── Footer.jsx
│ │ └── Footer.module.css
│ ├── Alert
│ │ ├── Alert.jsx
│ │ └── Alert.module.css
│ ├── FadeTransition
│ │ └── FadeTransition.jsx
│ └── Navbar
│ │ ├── Navbar.module.css
│ │ └── Navbar.jsx
├── data
│ ├── oppurtunities.js
│ ├── countries.js
│ ├── whyInvest.js
│ ├── successStories.js
│ ├── industries.js
│ └── countryContent.js
├── hooks
│ └── useStaggered.jsx
├── App.jsx
├── utils
│ ├── validateUser.jsx
│ └── validateCompany.jsx
├── index.css
└── reset.css
├── .env.dist
├── public
├── favicon.ico
├── robots.txt
└── manifest.json
├── .husky
└── pre-commit
├── .prettierrc
├── .gitattributes
├── .prettierignore
├── .gitignore
├── .hintrc
├── vite.config.js
├── .github
└── workflows
│ └── ci.yml
├── LICENSE
├── .eslintrc.cjs
├── README.md
├── index.html
└── package.json
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20.10.0
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.env.dist:
--------------------------------------------------------------------------------
1 | VITE_APP_BACKEND_URL=
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/public/favicon.ico
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/pages/Home/Home.module.css:
--------------------------------------------------------------------------------
1 | .home_wrapper {
2 | position: relative;
3 | margin: 0;
4 | }
--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 |
4 | npx lint-staged
5 |
--------------------------------------------------------------------------------
/src/assets/login.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/login.webp
--------------------------------------------------------------------------------
/src/assets/flag-japan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/flag-japan.png
--------------------------------------------------------------------------------
/src/assets/invest_africa.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/invest_africa.webp
--------------------------------------------------------------------------------
/src/assets/fonts/Poppins-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/fonts/Poppins-Bold.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/Poppins-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/fonts/Poppins-Medium.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/Poppins-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/fonts/Poppins-Regular.woff2
--------------------------------------------------------------------------------
/src/assets/fonts/Poppins-SemiBold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/fonts/Poppins-SemiBold.woff2
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionThree/map.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionThree/map.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/home-section-1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/home-section-1.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/home-section-2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/home-section-2.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/home-section-3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/home-section-3.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionSix/Section6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionSix/Section6.png
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionThree/kenya.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionThree/kenya.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionThree/morocco.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionThree/morocco.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionThree/namibia.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionThree/namibia.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionThree/nigeria.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionThree/nigeria.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFour/sectionfour.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFour/sectionfour.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionSix/thumbnailOne.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionSix/thumbnailOne.png
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionTwo/pro_business.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionTwo/pro_business.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionSix/thumbnailThree.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionSix/thumbnailThree.png
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_food.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_food.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_power.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_power.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionSeven/home_contactus.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionSeven/home_contactus.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionTwo/growing_economies.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionTwo/growing_economies.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_health.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_health.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_mining.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_mining.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_oil_gas.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_oil_gas.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_tourism.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_tourism.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionTwo/youthful_population.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionTwo/youthful_population.webp
--------------------------------------------------------------------------------
/src/pages/Kenya/Kenya.jsx:
--------------------------------------------------------------------------------
1 | function Kenya() {
2 | return (
3 |
4 |
Kenya!!
5 |
6 | );
7 | }
8 |
9 | export default Kenya;
10 |
--------------------------------------------------------------------------------
/src/pages/Morocco/Morocco.jsx:
--------------------------------------------------------------------------------
1 | function Morocco() {
2 | return (
3 |
4 |
Marocco
5 |
6 | );
7 | }
8 |
9 | export default Morocco;
10 |
--------------------------------------------------------------------------------
/src/pages/Namibia/Namibia.jsx:
--------------------------------------------------------------------------------
1 | function Namibia() {
2 | return (
3 |
4 |
Namibia
5 |
6 | );
7 | }
8 |
9 | export default Namibia;
10 |
--------------------------------------------------------------------------------
/src/pages/Nigeria/Nigeria.jsx:
--------------------------------------------------------------------------------
1 | function Nigeria() {
2 | return (
3 |
4 |
Nigeria
5 |
6 | );
7 | }
8 |
9 | export default Nigeria;
10 |
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_agriculture.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_agriculture.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_manufacturing.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_manufacturing.webp
--------------------------------------------------------------------------------
/src/assets/images/Home/SectionFive/industries_infrastructure.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Ha12rY/another-portfolio/HEAD/src/assets/images/Home/SectionFive/industries_infrastructure.webp
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "es5",
3 | "tabWidth": 2,
4 | "useTabs": false,
5 | "semi": true,
6 | "singleQuote": true,
7 | "printWidth": 100,
8 | "arrowParens": "avoid",
9 | "endOfLine": "lf"
10 | }
11 |
--------------------------------------------------------------------------------
/src/ScrolltoTop.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useLocation } from 'react-router-dom';
3 |
4 | export default function ScrollToTop() {
5 | const { pathname } = useLocation();
6 |
7 | useEffect(() => {
8 | window.scrollTo(0, 0);
9 | }, [pathname]);
10 |
11 | return null;
12 | }
13 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | /* eslint-disable import/no-extraneous-dependencies */
6 | import '@testing-library/jest-dom';
7 |
--------------------------------------------------------------------------------
/src/pages/CompanyRegistration/sortedCountries.jsx:
--------------------------------------------------------------------------------
1 | import { countries } from 'countries-list';
2 |
3 | const countryOptions = Object.values(countries).map(country => ({
4 | label: country.name,
5 | value: country.name,
6 | }));
7 |
8 | countryOptions.sort((a, b) => a.label.localeCompare(b.label));
9 |
10 | export default countryOptions;
11 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Set the default behavior, in case people don't have core.autocrlf set.
2 | * text=auto eol=lf
3 |
4 | # Treat .jpg, .png, and .gif files as binary, so Git won't try to change them.
5 | *.jpg binary
6 | *.png binary
7 | *.gif binary
8 |
9 | # Indicate that files in the scripts directory should be treated as shell scripts.
10 | scripts/** eol=lf
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Invest Africa",
3 | "name": "Invest Africa from Adam-I Japan",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Dependency directories
2 | /node_modules
3 |
4 | # Build output directories
5 | /build
6 | /dist
7 |
8 | # Hidden system files
9 | .*.swp
10 | .DS_Store
11 |
12 | # Misc
13 | # Add other directories or files that don't need formatting
14 | # such as images, design files, etc.
15 |
16 | # Configuration files
17 | /.eslintrc.js
18 | /.github/workflows/ci.yml
19 | /.gitignore
20 | /.env
21 | /.nvrmc
22 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env
17 | .env.local
18 | .env.production
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 |
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": [
3 | "development"
4 | ],
5 | "hints": {
6 | "compat-api/css": [
7 | "default",
8 | {
9 | "ignore": [
10 | "scale"
11 | ]
12 | }
13 | ]
14 | },
15 | "browserslist": [
16 | "defaults",
17 | "not ie 11",
18 | "not firefox <= 115",
19 | "not safari <= 16.5",
20 | "not and_ff <= 116",
21 | "not firefox <= 116",
22 | "not opera <= 101"
23 | ]
24 | }
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 | import { defineConfig } from 'vite';
3 | import react from '@vitejs/plugin-react';
4 | import viteTsconfigPaths from 'vite-tsconfig-paths';
5 |
6 | export default defineConfig({
7 | base: '',
8 | build: {
9 | outDir: './build',
10 | },
11 | publicDir: './public',
12 | plugins: [react(), viteTsconfigPaths()],
13 | server: {
14 | host: '0.0.0.0',
15 | open: true,
16 | port: 3000,
17 | },
18 | });
19 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionFive/SectionFive.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | background-color: white;
3 | padding: 3rem;
4 | }
5 |
6 | .card_wrapper {
7 | display: flex;
8 | flex-wrap: wrap;
9 | justify-content: center;
10 | gap: 2rem;
11 | }
12 |
13 | .title_wrapper {
14 | margin-block-end: 4rem;
15 | }
16 |
17 | .title {
18 | color: var(--clr-green);
19 | font-weight: var(--fw-semibold);
20 | }
21 |
22 | @media (max-width: 600px) {
23 | .wrapper {
24 | padding: 2rem;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionTwo/SectionTwo.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | background-color: white;
3 | padding: 3rem;
4 | }
5 |
6 | .card_wrapper {
7 | display: flex;
8 | flex-wrap: wrap;
9 | justify-content: center;
10 | gap: 2.5rem;
11 | }
12 |
13 | .title {
14 | font-weight: var(--fw-semibold);
15 | color: var(--clr-green);
16 | margin-bottom: 3rem;
17 | }
18 |
19 | @media (max-width: 992px) {
20 | .wrapper {
21 | padding: 2rem;
22 | }
23 |
24 | .card_wrapper {
25 | gap: 2rem;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: React CI/CD Pipeline
2 |
3 | on:
4 | pull_request:
5 | branches: [ main, dev ]
6 | types: [opened, synchronize, reopened]
7 |
8 | jobs:
9 | build:
10 | runs-on: ubuntu-latest
11 |
12 | steps:
13 | - uses: actions/checkout@v2
14 |
15 | - name: Set up Node.js
16 | uses: actions/setup-node@v2
17 | with:
18 | node-version: '20.10.0'
19 |
20 | - name: Install dependencies
21 | run: npm install
22 |
23 | - name: Run lint
24 | run: npm run lint
25 |
26 | # - name: Run tests
27 | # run: npm test
28 |
29 | - name: Build
30 | run: npm run build
31 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import { BrowserRouter } from 'react-router-dom';
5 | import App from './App';
6 | import reportWebVitals from './reportWebVitals';
7 |
8 | const root = ReactDOM.createRoot(document.getElementById('root'));
9 | root.render(
10 |
11 |
12 |
13 |
14 |
15 | );
16 |
17 | // If you want to start measuring performance in your app, pass a function
18 | // to log results (for example: reportWebVitals(console.log))
19 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
20 | reportWebVitals();
21 |
--------------------------------------------------------------------------------
/src/components/CountryDescription/CountryDescription.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 1rem;
5 | margin-bottom: 2rem;
6 | }
7 |
8 | .content {
9 | display: flex;
10 | align-items: center;
11 | gap: 0.5rem;
12 | }
13 |
14 | .description {
15 | width: 100%;
16 | height: 70px; /* ?Prevent map jumping around on hover */
17 | }
18 |
19 | .description p {
20 | color: black;
21 | font-size: var(--fs-smaller);
22 | line-height: normal;
23 | }
24 |
25 | @media (max-width: 992px) {
26 | .description p {
27 | max-width: 60vw;
28 | }
29 | }
30 |
31 | @media (max-width: 600px) {
32 | .description {
33 | height: 110px; /* ?Prevent map jumping around on tap */
34 | }
35 |
36 | .description p {
37 | max-width: 80vw;
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionTwo/SectionTwo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FadeTransition from '../../../components/FadeTransition/FadeTransition';
3 | import CardTransition from '../../../components/CardTransition/CardTransition';
4 | import styles from './SectionTwo.module.css';
5 | import investData from '../../../data/whyInvest';
6 |
7 | function SectionTwo() {
8 | return (
9 |
10 |
11 | Why Invest in Africa?
12 |
13 |
14 |
15 | );
16 | }
17 |
18 | export default SectionTwo;
19 |
--------------------------------------------------------------------------------
/src/components/Button/OutlinedButton/OutlinedButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './OutlinedButton.module.css';
4 |
5 | function OutlinedButton(props) {
6 | const { color, onClick } = props;
7 | const colorClass = color === 'white' ? styles.white_color : styles.black_color;
8 | return (
9 |
10 |
13 |
14 | );
15 | }
16 |
17 | OutlinedButton.propTypes = {
18 | color: PropTypes.oneOf(['white', 'black']),
19 | onClick: PropTypes.func,
20 | };
21 |
22 | OutlinedButton.defaultProps = {
23 | color: 'white',
24 | onClick: null,
25 | };
26 |
27 | export default OutlinedButton;
28 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionSeven/SectionSeven.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: relative;
3 | background-image: url('../../../assets/images/Home/SectionSeven/home_contactus.webp');
4 | background-repeat: no-repeat;
5 | background-position: center center;
6 | background-size: cover;
7 | height: 90vh;
8 | overflow-y: hidden;
9 | }
10 |
11 | .content {
12 | position: absolute;
13 | padding: 3rem;
14 | }
15 |
16 | .title {
17 | color: var(--clr-white90);
18 | font-weight: var(--fw-semibold);
19 | padding-block-end: 2rem;
20 | }
21 |
22 | @media (max-width: 992px) {
23 | .wrapper {
24 | height: 75vh;
25 | }
26 | .content {
27 | padding: 3rem 2rem;
28 | }
29 | }
30 |
31 | @media (max-width: 600px) {
32 | .title {
33 | font-size: var(--fs-h4);
34 | }
35 | .content {
36 | padding: 3rem 2rem;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/data/oppurtunities.js:
--------------------------------------------------------------------------------
1 | const oppurtunities = [
2 | {
3 | id: 1,
4 | title: '-Human Capital: ',
5 | body: "Investing in Africa's human capital promises access to a dynamic, rapidly growing workforce primed for innovation.",
6 | },
7 | {
8 | id: 2,
9 | title: '-Natural Resources: ',
10 | body: "Africa's rich natural resources offer lucrative opportunities for sustainable extraction and value-added processing.",
11 | },
12 | {
13 | id: 3,
14 | title: '-Finance: ',
15 | body: "Africa's expanding financial sector presents unique investment prospects in fintech and inclusive banking services.",
16 | },
17 | {
18 | id: 4,
19 | title: '-Infrastructure: ',
20 | body: "Investing in Africa's infrastructure development is key to unlocking economic potential and ensuring high-yield returns.",
21 | },
22 | ];
23 |
24 | export default oppurtunities;
25 |
--------------------------------------------------------------------------------
/src/pages/Home/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './Home.module.css';
3 | import Footer from '../../components/Footer/Footer';
4 | import SectionOne from './SectionOne/SectionOne';
5 | import SectionTwo from './SectionTwo/SectionTwo';
6 | import SectionThree from './SectionThree/SectionThree';
7 | import SectionFour from './SectionFour/SectionFour';
8 | import SectionFive from './SectionFive/SectionFive';
9 | import SectionSix from './SectionSix/SectionSix';
10 | import SectionSeven from './SectionSeven/SectionSeven';
11 |
12 | function Home() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | );
25 | }
26 |
27 | export default Home;
28 |
--------------------------------------------------------------------------------
/src/components/Button/Button.module.css:
--------------------------------------------------------------------------------
1 | .button {
2 | color: black;
3 | padding: 1rem 3rem;
4 | background-color: var(--clr-white70);
5 | border-radius: 500px;
6 | transition: background-color 0.1s linear;
7 | }
8 |
9 | .button:hover,
10 | .button:focus-visible {
11 | background-color: var(--clr-white90);
12 | transition: background-color 0.1s linear;
13 | }
14 |
15 | .button:active {
16 | background-color: var(--clr-white70);
17 | }
18 |
19 | .button:disabled,
20 | .button[disabled]{
21 | opacity: 0.5;
22 | pointer-events: none;
23 | }
24 |
25 | .text {
26 | font-weight: var(--fw-semibold);
27 | }
28 |
29 | .action {
30 | background-color: var(--clr-lyellow);
31 | }
32 |
33 | .action:hover,
34 | .action:focus-visible {
35 | background-color: var(--clr-yellow);
36 | transition: background-color 0.1s linear;
37 | }
38 |
39 | .action:active {
40 | background-color: var(--clr-lyellow);
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionFive/SectionFive.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styles from './SectionFive.module.css';
3 | import industries from '../../../data/industries';
4 | import FadeTransition from '../../../components/FadeTransition/FadeTransition';
5 | import CardTransition from '../../../components/CardTransition/CardTransition';
6 |
7 | function SectionFive() {
8 | return (
9 |
10 |
17 | Our leading Industires
18 |
19 |
24 |
25 | );
26 | }
27 |
28 | export default SectionFive;
29 |
--------------------------------------------------------------------------------
/src/components/Button/Button.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './Button.module.css';
4 |
5 | function Button(props) {
6 | const { isAction, text, isDisabled, isSubmit, onClick } = props;
7 | return (
8 |
9 |
17 |
18 | );
19 | }
20 |
21 | Button.propTypes = {
22 | text: PropTypes.string.isRequired,
23 | onClick: PropTypes.func,
24 | isDisabled: PropTypes.bool,
25 | isSubmit: PropTypes.bool,
26 | isAction: PropTypes.bool,
27 | };
28 |
29 | Button.defaultProps = {
30 | onClick: () => {},
31 | isDisabled: false,
32 | isSubmit: false,
33 | isAction: false,
34 | };
35 |
36 | export default Button;
37 |
--------------------------------------------------------------------------------
/src/components/ForgotPassword/ForgotPassword.css:
--------------------------------------------------------------------------------
1 | .container{
2 | display: flex;
3 | flex-direction:column;
4 | align-items: center;
5 | margin-top: 150px;
6 | }
7 |
8 | .email{
9 | display:flex;
10 | flex-direction: column;
11 | }
12 |
13 | .emails{
14 |
15 | width: 250px;
16 | height: 20px;
17 | padding: 10px;
18 | }
19 | .emails:focus{
20 | outline: none;
21 | }
22 |
23 |
24 | .verifyBtn{
25 | margin-top: 15px;
26 | padding: 10px;
27 | border-color: rgb(30, 216, 132);
28 | border-radius: 4px;
29 | color:green;
30 | cursor:pointer;
31 | }
32 |
33 | .backBtn{
34 | margin-top: 15px;
35 | padding: 10px;
36 | border:none;
37 | color:green;
38 | border-radius: 4px;
39 | cursor:pointer;
40 | }
41 |
42 | .otp{
43 | display: flex;
44 | flex-direction: row;
45 | }
46 |
47 | .otpVerifyBtn{
48 | margin-left: 10px;
49 | border-color: green;
50 | color:green;
51 | border-radius: 5px;
52 | cursor:pointer;
53 | }
--------------------------------------------------------------------------------
/src/components/Button/OutlinedButton/OutlinedButton.module.css:
--------------------------------------------------------------------------------
1 | .button {
2 | border: 5px solid var(--clr-white90);
3 | padding: 1rem 4rem;
4 | text-transform: uppercase;
5 | text-align: center;
6 | font-weight: var(--fw-medium);
7 | font-size: var(--fs-p);
8 | cursor: pointer;
9 | transition:
10 | border-color 0.3s linear,
11 | color 0.3s linear;
12 | }
13 |
14 | .white_color {
15 | border-color: var(--clr-white90);
16 | color: var(--clr-white90);
17 | }
18 |
19 | .black_color {
20 | border-color: var(--clr-black90);
21 | color: var(--clr-black90);
22 | }
23 |
24 | .button:hover,
25 | .button:focus-visible {
26 | border-color: var(--clr-lyellow);
27 | color: var(--clr-lyellow);
28 | }
29 |
30 | .button:active {
31 | border-color: var(--clr-yellow);
32 | color: var(--clr-yellow);
33 | transition-duration: 0s;
34 | }
35 |
36 | @media (max-width: 600px) {
37 | .button {
38 | border-width: 3px;
39 | font-size: var(--fs-smaller);
40 | padding: 0.75rem 2rem;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/data/countries.js:
--------------------------------------------------------------------------------
1 | import moroccoImg from '../assets/images/Home/SectionThree/morocco.webp';
2 | import nigeriaImg from '../assets/images/Home/SectionThree/nigeria.webp';
3 | import kenyaImg from '../assets/images/Home/SectionThree/kenya.webp';
4 | import namibiaImg from '../assets/images/Home/SectionThree/namibia.webp';
5 |
6 | const countries = [
7 | {
8 | id: 1,
9 | title: 'Morocco',
10 | image: moroccoImg,
11 | alt: 'An image of a Moroccan beach',
12 | linkUrl: '/Morocco',
13 | },
14 | {
15 | id: 2,
16 | title: 'Nigeria',
17 | image: nigeriaImg,
18 | alt: 'An image of a Nigerian cityside',
19 | linkUrl: '/Nigeria',
20 | },
21 | {
22 | id: 3,
23 | title: 'Kenya',
24 | image: kenyaImg,
25 | alt: 'An image of the Kenyan skyline',
26 | linkUrl: '/Kenya',
27 | },
28 | {
29 | id: 4,
30 | title: 'Namibia',
31 | image: namibiaImg,
32 | alt: 'An image of a Nambian beachside',
33 | linkUrl: '/Namibia',
34 | },
35 | ];
36 |
37 | export default countries;
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Roshin Nishad
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/components/CountryDescription/CountryDescription.jsx:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import FadeTransition from '../FadeTransition/FadeTransition';
3 | import styles from './CountryDescription.module.css';
4 |
5 | function CountryDescription({ title, body, color }) {
6 | const fwBold = '800';
7 | const countryNamestyles = { color, fontWeight: fwBold, textTransform: 'uppercase' };
8 | const bulletstyles = {
9 | backgroundColor: color,
10 | width: '0.625rem',
11 | height: '1.9rem',
12 | };
13 |
14 | return (
15 |
16 |
20 |
23 |
24 | );
25 | }
26 |
27 | CountryDescription.propTypes = {
28 | title: PropTypes.string.isRequired,
29 | body: PropTypes.string.isRequired,
30 | color: PropTypes.string.isRequired,
31 | };
32 |
33 | export default CountryDescription;
34 |
--------------------------------------------------------------------------------
/src/data/whyInvest.js:
--------------------------------------------------------------------------------
1 | import youthfulPopulation from '../assets/images/Home/SectionTwo/youthful_population.webp';
2 | import proBusiness from '../assets/images/Home/SectionTwo/pro_business.webp';
3 | import growingEconomies from '../assets/images/Home/SectionTwo/growing_economies.webp';
4 |
5 | const investData = [
6 | {
7 | id: 1,
8 | title: 'PRO BUSINESS',
9 | image: proBusiness,
10 | alt: 'A beautiful building',
11 | body: 'Business-friendly environment with political stability, resilient economy, dynamic investor friendly environment and Government incentives',
12 | },
13 | {
14 | id: 2,
15 | title: 'YOUTHFUL POPULATION',
16 | image: youthfulPopulation,
17 | alt: 'A beautiful building',
18 | body: 'Tap into a burgeoning youth market brimming with 1.46 billion potential consumers, a demographic primed for dynamic growth and innovation.',
19 | },
20 | {
21 | id: 3,
22 | title: 'GROWING ECONOMIES',
23 | image: growingEconomies,
24 | alt: 'A beautiful building',
25 | body: 'Leverage a robust economic landscape with a GDP of $108 billion, reflecting a flourishing market ripe for lucrative investment opportunities.',
26 | },
27 | ];
28 |
29 | export default investData;
30 |
--------------------------------------------------------------------------------
/src/hooks/useStaggered.jsx:
--------------------------------------------------------------------------------
1 | import { useReducedMotion } from 'framer-motion';
2 |
3 | const useStaggered = (options = {}) => {
4 | const defaultAmount = 0.5;
5 | const defaultTranslate = 50;
6 | const amount = options.amount || defaultAmount;
7 | const translate = options.translate || defaultTranslate;
8 |
9 | const shouldReduceMotion = useReducedMotion();
10 |
11 | const parentVariants = {
12 | initial: { opacity: 0 },
13 | enter: {
14 | opacity: 1,
15 | transition: { duration: 0.5, staggerChildren: 0.1 },
16 | },
17 | };
18 |
19 | const childVariants = {
20 | initial: {
21 | translateY: `${translate}px`,
22 | },
23 | enter: {
24 | translateY: 0,
25 | transition: { ease: [0, 0, 0.5, 1] },
26 | },
27 | };
28 |
29 | const reducedParentMotionProps = shouldReduceMotion
30 | ? {}
31 | : {
32 | variants: parentVariants,
33 | initial: 'initial',
34 | whileInView: 'enter',
35 | viewport: { once: true, amount },
36 | };
37 |
38 | const reducedChildMotionProps = shouldReduceMotion ? {} : { variants: childVariants };
39 |
40 | return { reducedParentMotionProps, reducedChildMotionProps };
41 | };
42 |
43 | export default useStaggered;
44 |
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | env: {
3 | browser: true,
4 | es2021: true,
5 | jest: true,
6 | },
7 | extends: ['airbnb', 'prettier', 'plugin:prettier/recommended'],
8 | overrides: [
9 | {
10 | env: {
11 | node: true,
12 | },
13 | files: ['.eslintrc.{js,cjs}'],
14 | parserOptions: {
15 | sourceType: 'script',
16 | },
17 | },
18 | ],
19 | parserOptions: {
20 | ecmaVersion: 'latest',
21 | sourceType: 'module',
22 | ecmaFeatures: {
23 | jsx: true,
24 | },
25 | },
26 | rules: {
27 | 'react/react-in-jsx-scope': 'off',
28 | 'react/forbid-prop-types': 'off',
29 | 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
30 | quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: true }],
31 | 'prettier/prettier': [
32 | 'error',
33 | {
34 | trailingComma: 'es5',
35 | singleQuote: true,
36 | printWidth: 100,
37 | tabWidth: 2,
38 | semi: true,
39 | endOfLine: 'lf',
40 | arrowParens: 'avoid',
41 | },
42 | ],
43 | },
44 | settings: {
45 | react: {
46 | version: 'detect',
47 | },
48 | },
49 | plugins: ['react', 'prettier', 'import'],
50 | };
51 |
--------------------------------------------------------------------------------
/src/components/InputBox/DropdownBox.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './InputBox.module.css';
4 |
5 | function DropdownBox(props) {
6 | const { parentProps, options, wrapperClass } = props;
7 | const { value, name, onChange, id, disabled, required } = parentProps;
8 | return (
9 |
10 |
24 |
25 | );
26 | }
27 |
28 | DropdownBox.propTypes = {
29 | parentProps: PropTypes.shape({
30 | onChange: PropTypes.func.isRequired,
31 | id: PropTypes.string.isRequired,
32 | name: PropTypes.string.isRequired,
33 | value: PropTypes.string,
34 | disabled: PropTypes.bool,
35 | required: PropTypes.bool,
36 | }).isRequired,
37 | options: PropTypes.node.isRequired,
38 | wrapperClass: PropTypes.string.isRequired,
39 | };
40 |
41 | export default DropdownBox;
42 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionFour/SectionFour.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: relative;
3 | width: 100%;
4 | isolation: isolate;
5 | }
6 |
7 | .background {
8 | position: absolute;
9 | inset: 12px;
10 | border-radius: 2rem;
11 | background-image: url('../../../assets/images/Home/SectionFour/sectionfour.webp');
12 | background-size: cover;
13 | background-position: 75% center;
14 | z-index: -1;
15 | }
16 |
17 | .background::after {
18 | content: '';
19 | position: absolute;
20 | border-radius: inherit;
21 | inset: 0;
22 | background-color: rgb(0, 0, 0, 0.3);
23 | z-index: 1;
24 | }
25 |
26 | .content {
27 | width: 100%;
28 | height: 100%;
29 | padding: 6rem 3rem;
30 | }
31 |
32 | .text {
33 | color: var(--clr-white90);
34 | }
35 |
36 | .title {
37 | font-weight: var(--fw-semibold);
38 | padding-block-end: 3rem;
39 | max-width: 20ch;
40 | }
41 |
42 | .body_wrapper {
43 | display: flex;
44 | flex-direction: column;
45 | gap: 1.5rem;
46 | }
47 |
48 | .text_wrapper {
49 | max-width: 60ch;
50 | }
51 |
52 | .mini_title {
53 | color: var(--clr-yellow);
54 | font-weight: var(--fw-medium);
55 | }
56 |
57 | @media (max-width: 600px) {
58 | .background {
59 | inset: 0;
60 | border-radius: 0;
61 | }
62 | .content {
63 | padding: 5rem 2rem;
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Adam-i Frontend (Internship)
2 |
3 | ## Development Workflow
4 |
5 | - Before making a Pull Request (PR), run `npm run postinstall` to perform eslinting and prettier checks. Ensure checks pass before PR.
6 | - PRs must only be made to the `dev` branch.
7 | - After completing a milestone, merge `dev` to `main`, and then `main` to `azure-main` for cloud deployment.
8 | - Use meaningful one-line summaries for your commit messages.
9 | - Pull from the branch before each commit to minimize conflicts.
10 | - Provide a summary and bullet points in the body of your PR.
11 |
12 | ## Local Development
13 |
14 | - Start the development server with `npm run start`; it will open at `localhost:3000`.
15 | - Follow the Airbnb ESLint style guideline for code consistency.
16 |
17 | ## Cloud Deployment
18 |
19 | - Push to `azure-main` to trigger automatic CI/CD updates on the cloud. Monitor the process in the GitHub Actions tab.
20 | - Use `npx prisma studio` for a web dashboard view of the database.
21 |
22 | ## Guidelines and Configurations
23 |
24 | - Ensure your Git configurations are set for case sensitivity and automatic rebasing.
25 | - Run linting and formatting as part of your development routine.
26 |
27 | ## Additional Notes
28 |
29 | - Always ensure that no sensitive information is included in commits to the public repository.
30 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionThree/SectionThree.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | background-color: var(--clr-bg-lgray);
3 | padding: 3rem;
4 | }
5 |
6 | .title_wrapper {
7 | margin-block-end: 4rem;
8 | }
9 |
10 | .title {
11 | color: var(--clr-green);
12 | font-weight: var(--fw-semibold);
13 | }
14 |
15 | .card_wrapper {
16 | display: flex;
17 | flex-wrap: wrap;
18 | justify-content: center;
19 | column-gap: 8rem;
20 | row-gap: 4rem;
21 | }
22 |
23 | .horizontal_line {
24 | width: 95%;
25 | margin: 0 auto;
26 | height: 3px;
27 | background-color: black;
28 | margin-block: 6rem;
29 | border-radius: 100vw;
30 | }
31 |
32 | .content_map_wrapper {
33 | padding-block-end: 2rem;
34 | display: flex;
35 | flex-wrap: wrap;
36 | justify-content: space-evenly;
37 | align-items: center;
38 | }
39 |
40 | .map {
41 | -webkit-tap-highlight-color: transparent;
42 | width: 520px;
43 | }
44 |
45 | area:focus-within {
46 | outline: 3px solid var(--clr-yellow);
47 | }
48 |
49 | @media (max-width: 992px) {
50 | .card_wrapper {
51 | column-gap: 4rem;
52 | }
53 |
54 | .content_map_wrapper {
55 | justify-content: center;
56 | }
57 | }
58 |
59 | @media (max-width: 600px) {
60 | .content_map_wrapper {
61 | display: flex;
62 | }
63 |
64 | .map {
65 | padding-block-start: 2rem;
66 | width: 80vw;
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionSeven/SectionSeven.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from 'react';
2 | import { motion, useScroll, useTransform, useReducedMotion } from 'framer-motion';
3 | import { useMediaQuery } from '@react-hook/media-query';
4 | import styles from './SectionSeven.module.css';
5 | import ContactUs from '../../../components/Button/OutlinedButton/OutlinedButton';
6 |
7 | function getMaxPercentage(isNotDesktop) {
8 | if (isNotDesktop) return '35vh';
9 | return '40vh';
10 | }
11 |
12 | function SectionSeven() {
13 | const isNotDesktop = useMediaQuery('(max-width: 992px)');
14 |
15 | const ref = useRef(null);
16 | const shouldReduceMotion = useReducedMotion();
17 | const { scrollYProgress } = useScroll({
18 | target: ref,
19 | offset: ['start end', 'end end'],
20 | });
21 | const maxPercentage = getMaxPercentage(isNotDesktop);
22 | const motionY = useTransform(scrollYProgress, [0, 1], ['0vh', maxPercentage]);
23 | const y = shouldReduceMotion ? '0vh' : motionY;
24 | return (
25 |
26 |
27 |
28 | Partner with us to build
29 |
30 | Prosperity for Africa.
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
38 | export default SectionSeven;
39 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionSix/SectionSix.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | background-color: var(--clr-bg-gray);
3 | padding: 5rem 3rem;
4 | }
5 |
6 | .title {
7 | font-weight: var(--fw-semibold);
8 | color: var(--clr-yellow);
9 | margin-bottom: 3rem;
10 | }
11 |
12 | .content_wrapper {
13 | display: flex;
14 | flex-direction: column;
15 | gap: 3rem;
16 | }
17 |
18 | .stories_wrapper {
19 | display: flex;
20 | align-items: center;
21 | justify-content: space-evenly;
22 | flex-wrap: wrap;
23 | gap: 3rem;
24 | color: white;
25 | }
26 |
27 | .thumbnail {
28 | width: 540px;
29 | height: 320px;
30 | border-radius: 1rem;
31 | outline: 2px solid rgba(255, 255, 255, 0.21);
32 | outline-offset: -2px;
33 | }
34 |
35 | .body_wrapper {
36 | display: flex;
37 | flex-direction: column;
38 | gap: 1rem;
39 | }
40 |
41 | .body_title {
42 | font-weight: var(--fw-semibold);
43 | }
44 |
45 | .body_footer {
46 | font-weight: var(--fw-semibold);
47 | color: var(--clr-yellow);
48 | }
49 |
50 | @media (max-width: 992px) {
51 | .wrapper {
52 | padding: 2rem;
53 | }
54 |
55 | .thumbnail {
56 | width: 500px;
57 | height: 280px;
58 | }
59 |
60 | .body_wrapper p {
61 | max-width: 70vw;
62 | }
63 | }
64 |
65 | @media (max-width: 600px) {
66 | .thumbnail {
67 | width: 80vw;
68 | height: initial;
69 | }
70 |
71 | .body_wrapper p {
72 | max-width: 80vw;
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import { Route, Routes } from 'react-router-dom';
2 | import './App.css';
3 | import Login from './pages/Login/Login';
4 | import Home from './pages/Home/Home';
5 | import ScrollToTop from './ScrolltoTop';
6 | import ForgotPassword from './components/ForgotPassword/ForgotPassword';
7 | import Register from './pages/Register/Register';
8 | import Morocco from './pages/Morocco/Morocco';
9 | import Kenya from './pages/Kenya/Kenya';
10 | import Nigeria from './pages/Nigeria/Nigeria';
11 | import Namibia from './pages/Namibia/Namibia';
12 | import CompanyRegistration from './pages/CompanyRegistration/CompanyRegistration';
13 | import NavBar from './components/Navbar/Navbar';
14 |
15 | function App() {
16 | return (
17 |
18 |
19 |
20 |
21 | } />
22 | } />
23 | } />
24 | } />
25 | } />
26 | } />
27 | } />
28 | } />
29 | } />
30 |
31 |
32 | );
33 | }
34 | export default App;
35 |
--------------------------------------------------------------------------------
/src/utils/validateUser.jsx:
--------------------------------------------------------------------------------
1 | import Joi from 'joi';
2 |
3 | export const userSchema = Joi.object({
4 | name: Joi.string().max(255).required().messages({
5 | 'string.base': 'Name must be text.',
6 | 'string.max': 'Name must not exceed 255 characters.',
7 | }),
8 | email: Joi.string()
9 | .email({ tlds: { allow: false } })
10 | .max(255)
11 | .required()
12 | .messages({
13 | 'string.email': 'Please enter a valid email address.',
14 | 'string.max': 'Email must not exceed 255 characters.',
15 | }),
16 | accountPassword: Joi.string()
17 | .pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d$_.!@#%^&*()\-+=]{8,128}$/)
18 | .required()
19 | .messages({
20 | 'string.pattern.base': 'Password requirements not met.',
21 | }),
22 | confirmPassword: Joi.valid(Joi.ref('accountPassword')).required().messages({
23 | 'any.only': 'Passwords must match.',
24 | }),
25 | }).with('accountPassword', 'confirmPassword');
26 |
27 | export const validateUserData = data => {
28 | const { error } = userSchema.validate(data, { abortEarly: false });
29 | if (!error) return null;
30 |
31 | const customErrors = error.details.reduce((acc, detail) => {
32 | const { message } = detail;
33 |
34 | // *Remove empty field warning.
35 | if (message.includes('is not allowed to be empty')) {
36 | acc[detail.path[0]] = '';
37 | return acc;
38 | }
39 |
40 | acc[detail.path[0]] = message;
41 |
42 | return acc;
43 | }, {});
44 |
45 | return customErrors;
46 | };
47 |
--------------------------------------------------------------------------------
/src/components/ForgotPassword/ForgotPassword.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 |
4 | import './ForgotPassword.css';
5 |
6 | function ForgotPassword() {
7 | const navigation = useNavigate();
8 | const [emailDiv, setEmailDiv] = useState(true);
9 | const [otpDiv, setOtpDiv] = useState(false);
10 | return (
11 |
47 | );
48 | }
49 |
50 | export default ForgotPassword;
51 |
--------------------------------------------------------------------------------
/src/data/successStories.js:
--------------------------------------------------------------------------------
1 | import image1 from '../assets/images/Home/SectionSix/thumbnailOne.png';
2 | import image2 from '../assets/images/Home/SectionSix/Section6.png';
3 | import image3 from '../assets/images/Home/SectionSix/thumbnailThree.png';
4 |
5 | const stories = [
6 | {
7 | id: 1,
8 | image: image1,
9 | alt: '',
10 | title: 'DAIMLER BENZ GmbH',
11 | body: 'Morocco has made the strategic choice to develop its renewable energies and reduce its carbon footprint. This decarbonization project will allow industries to gain in competitiveness. It will be a structuring element in theyears to come, and it is totally in line with our vision.',
12 | footer: 'Daimler Benz CEO, Luca De Meo',
13 | },
14 | {
15 | id: 2,
16 | image: image2,
17 | alt: '',
18 | title: "Carl's Jr. GROUP",
19 | body: 'Kenya is embracing the digital revolution, pioneering unprecedented tech advancements. This surge in innovation positions businesses at the forefront of the information era. These technological leaps enhance market competitiveness.',
20 | footer: "Carl's Jr. Senior VP, George Forenthal",
21 | },
22 | {
23 | id: 3,
24 | image: image3,
25 | alt: '',
26 | title: 'Visit Namibia Ltd.',
27 | body: 'Namibia is committed to harnessing its natural resources sustainably, fostering a green economy that powers growth. This dedication to eco-friendly practices propels the nation towards a leading role in conservation-driven commerce.',
28 | footer: 'Visit Namibia CFO, Rosanne Juliette',
29 | },
30 | ];
31 |
32 | export default stories;
33 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionSix/SectionSix.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/jsx-props-no-spreading */
2 | import React from 'react';
3 | import { motion } from 'framer-motion';
4 | import styles from './SectionSix.module.css';
5 | import stories from '../../../data/successStories';
6 | import FadeTransition from '../../../components/FadeTransition/FadeTransition';
7 | import useStaggered from '../../../hooks/useStaggered';
8 |
9 | function SectionSix() {
10 | const { reducedParentMotionProps, reducedChildMotionProps } = useStaggered({
11 | amount: 0.3,
12 | translate: 100,
13 | });
14 | return (
15 |
16 |
17 | Success Stories
18 |
19 |
20 | {stories.map(data => (
21 |
22 | 
23 |
24 |
{data.title}
25 |
"{data.body}"
26 |
{data.footer}
27 |
31 |
16 |
17 |
22 |
23 |
24 | {title}
25 |
26 | {isGreen && }
27 |
28 |
29 | {body &&
{body}
}
30 |
34 | {linkUrl ? (
35 |
36 | {content}
37 |
38 | ) : (
39 | content
40 | )}
41 |
42 | );
43 | }
44 |
45 | Cards.propTypes = {
46 | title: PropTypes.string.isRequired,
47 | image: PropTypes.string.isRequired,
48 | alt: PropTypes.string.isRequired,
49 | body: PropTypes.string,
50 | isGreen: PropTypes.bool,
51 | linkUrl: PropTypes.string,
52 | };
53 |
54 | Cards.defaultProps = {
55 | isGreen: false,
56 | body: '',
57 | linkUrl: '',
58 | };
59 |
60 | export default Cards;
61 |
--------------------------------------------------------------------------------
/src/pages/Register/Register.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | background: url('../../assets/login.webp') no-repeat center center fixed;
3 | background-size: cover;
4 | min-height: var(--desktop-nav-fullheight);
5 | }
6 |
7 | .blur_wrapper {
8 | padding: 3rem;
9 | padding-inline-end: 6rem;
10 | background-color: var(--clr-bg-orange50);
11 | -webkit-backdrop-filter: blur(16px);
12 | backdrop-filter: blur(16px);
13 | min-height: var(--desktop-nav-fullheight);
14 | width: fit-content;
15 | max-width: 100%;
16 | }
17 |
18 | .blur_wrapper h2 {
19 | color: var(--clr-white90);
20 | font-weight: var(--fw-semibold);
21 | margin-block-end: 1rem;
22 | }
23 |
24 | .register_form {
25 | display: flex;
26 | flex-direction: column;
27 | gap: 1rem;
28 | }
29 |
30 | .register_input {
31 | display: flex;
32 | flex-direction: column;
33 | gap: 1rem;
34 | }
35 |
36 | .login_link {
37 | color: var(--clr-white70);
38 | margin-block: 1rem;
39 | }
40 |
41 | .link {
42 | color: var(--clr-white90);
43 | }
44 |
45 | .link:hover,
46 | .link:focus {
47 | color: white;
48 | text-decoration: underline;
49 | }
50 |
51 | .aboutus {
52 | color: var(--clr-white70);
53 | margin-block-start: 2rem;
54 | max-width: 40ch;
55 | }
56 |
57 | .tooltip_wrapper {
58 | max-width: 60vw;
59 | }
60 |
61 | .tooltip_title {
62 | margin-block-end: 0.5rem;
63 | font-weight: var(--fw-medium);
64 | }
65 |
66 | .tooltip_list_wrapper {
67 | display: grid;
68 | gap: 0.5rem;
69 | }
70 |
71 | @media (max-width: 600px) {
72 | .wrapper {
73 | background-attachment: initial;
74 | min-height: var(--mobile-nav-fullheight);
75 | }
76 | .blur_wrapper {
77 | min-height: var(--mobile-nav-fullheight);
78 | padding: 2rem;
79 | width: 100%;
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/InputBox/TextBox.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import styles from './InputBox.module.css';
4 |
5 | function TextBox(props) {
6 | const { parentProps, wrapperClass, addressHeight } = props;
7 | const { value, name, type, min, max, onChange, id, disabled, required } = parentProps;
8 | // ! addressHeight is true if isAddress is true.
9 | return (
10 |
11 | {addressHeight ? (
12 |
22 | ) : (
23 |
35 | )}
36 |
37 | );
38 | }
39 |
40 | TextBox.propTypes = {
41 | parentProps: PropTypes.shape({
42 | onChange: PropTypes.func.isRequired,
43 | id: PropTypes.string.isRequired,
44 | name: PropTypes.string.isRequired,
45 | type: PropTypes.string.isRequired,
46 | min: PropTypes.string,
47 | max: PropTypes.string,
48 | value: PropTypes.string,
49 | disabled: PropTypes.bool,
50 | required: PropTypes.bool,
51 | }).isRequired,
52 | wrapperClass: PropTypes.string.isRequired,
53 | addressHeight: PropTypes.string.isRequired,
54 | };
55 |
56 | export default TextBox;
57 |
--------------------------------------------------------------------------------
/src/pages/Home/SectionOne/SectionOne.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import FadeTransition from '../../../components/FadeTransition/FadeTransition';
3 | import styles from './SectionOne.module.css';
4 | import backgroundOne from '../../../assets/images/Home/home-section-1.webp';
5 | import backgroundTwo from '../../../assets/images/Home/home-section-2.webp';
6 | import backgroundThree from '../../../assets/images/Home/home-section-3.webp';
7 |
8 | function SectionOne() {
9 | const [activeImage, setActiveImage] = useState(0);
10 | const backgrounds = [backgroundOne, backgroundTwo, backgroundThree];
11 |
12 | useEffect(() => {
13 | const startImageRotation = () => {
14 | return setInterval(() => {
15 | setActiveImage(pastImage => (pastImage + 1) % backgrounds.length);
16 | }, 3000);
17 | };
18 |
19 | // * Initial delay for the Heading Gradient Animation.
20 | const timer = setTimeout(() => {
21 | const interval = startImageRotation();
22 | return () => clearInterval(interval);
23 | }, 1500);
24 | return () => clearTimeout(timer);
25 | }, [backgrounds.length]);
26 |
27 | return (
28 |
29 |
30 |
34 |
35 |
36 |
Invest in Africa
37 |
38 | Shaping Tomorrow Together,
39 |
40 | Invest in Africa's Potential.
41 |
42 |
43 |
26 |
27 |
28 |
29 |
30 | Crafting Tomorrow's Success Stories Today
31 |
32 |
33 |
34 | {oppurtunities.map(data => (
35 |
40 | {data.title}
41 | {data.body}
42 |
43 | ))}
44 |
45 |
46 |
11 |
12 |
23 |
34 |
35 |
36 |
47 |
58 |
59 |
60 |
71 |
72 |
59 |
64 |
65 |
69 | {message}
70 |
71 |
72 |
58 |
79 |
80 | {!isDropdown ? (
81 |
82 | ) : (
83 |
84 | )}
85 | {isDropdown && }
86 |
87 |
{message}
88 |
104 |
105 |
106 |
175 |
176 | © {new Date().getFullYear()} - Invest Africa :: Powered by Adam-i Japan
177 |
178 |
179 |
180 |
181 |
14 |
15 |
26 |
37 |
38 |
39 |
40 |
52 |
65 |
66 |
67 |
68 |
79 | {countryOptions.map(country => (
80 |
83 | ))}
84 |
85 |
96 |
106 |
107 |
108 |
109 |
120 |
121 |
122 |
134 |
146 |
157 |
158 |
Password Requirements:
159 |
160 | - 8-128 characters with a mix of letters and numbers
161 | - Must include both upper and lower case letters
162 |
163 |
165 |
166 |
167 |
168 |
179 |
180 |
37 |
44 | Choose a Country
45 |
46 |
47 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
69 | {countryName}
70 |
71 |
72 |
74 |
75 | {activeCountry.map(country => (
76 |
82 | ))}
83 |
84 |
85 |
86 |
87 |
189 |
190 |
192 |
119 |
120 |
121 |
122 |
199 |
200 | © {new Date().getFullYear()} - Invest Africa :: Powered by Adam-i Japan
201 |
202 |
203 |
204 |
205 |
206 |
169 | Have an account?{' '}
170 |
171 | Login
172 |
173 |
174 | );
175 |
176 | return (
177 |
218 | );
219 | }
220 |
221 | export default CompanyRegistration;
222 |
--------------------------------------------------------------------------------
/src/reset.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 | /*! Includes Modifications by GetPsyched6 | https://github.com/GetPsyched6 */
3 |
4 | /* Document
5 | ========================================================================== */
6 |
7 | /**
8 | * 1. Correct the line height in all browsers.
9 | * 2. Prevent adjustments of font size after orientation changes in iOS.
10 | */
11 |
12 | html {
13 | line-height: 1.15; /* 1 */
14 | -webkit-text-size-adjust: 100%; /* 2 */
15 | text-size-adjust: 100%; /* 3 */
16 | }
17 |
18 | /* Sections
19 | ========================================================================== */
20 |
21 | /**
22 | * Remove the margin in all browsers.
23 | */
24 |
25 | body {
26 | margin: 0;
27 | padding: 0;
28 | }
29 |
30 | /**
31 | * Render the `main` element consistently in IE.
32 | */
33 |
34 | main {
35 | display: block;
36 | }
37 |
38 | /**
39 | * Correct the font size and margin on `h1` elements within `section` and
40 | * `article` contexts in Chrome, Firefox, and Safari.
41 | */
42 |
43 | h1 {
44 | font-size: 2em;
45 | margin: 0.67em 0;
46 | font-weight: normal;
47 | }
48 |
49 | /* Grouping content
50 | ========================================================================== */
51 |
52 | /**
53 | * 1. Add the correct box sizing in Firefox.
54 | * 2. Show the overflow in Edge and IE.
55 | */
56 |
57 | hr {
58 | box-sizing: content-box; /* 1 */
59 | height: 0; /* 1 */
60 | overflow: visible; /* 2 */
61 | }
62 |
63 | /**
64 | * 1. Correct the inheritance and scaling of font size in all browsers.
65 | * 2. Correct the odd `em` font sizing in all browsers.
66 | */
67 |
68 | pre {
69 | font-family: monospace, monospace; /* 1 */
70 | font-size: 1em; /* 2 */
71 | }
72 |
73 | /* Text-level semantics
74 | ========================================================================== */
75 |
76 | /**
77 | * Remove the gray background on active links in IE 10.
78 | */
79 |
80 | a {
81 | background-color: transparent;
82 | }
83 |
84 | /**
85 | * Default class to remove anchor styling.
86 | */
87 |
88 | a,
89 | a:hover,
90 | a:visited,
91 | a:focus,
92 | a:active {
93 | text-decoration: none;
94 | color: inherit;
95 | outline: 0;
96 | }
97 |
98 | /**
99 | * 1. Remove the bottom border in Chrome 57-
100 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
101 | */
102 |
103 | abbr[title] {
104 | border-bottom: none; /* 1 */
105 | text-decoration: underline; /* 2 */
106 | text-decoration: underline dotted; /* 2 */
107 | }
108 |
109 | /**
110 | * Add the correct font weight in Chrome, Edge, and Safari.
111 | */
112 |
113 | b,
114 | strong {
115 | font-weight: bolder;
116 | }
117 |
118 | /**
119 | * 1. Correct the inheritance and scaling of font size in all browsers.
120 | * 2. Correct the odd `em` font sizing in all browsers.
121 | */
122 |
123 | code,
124 | kbd,
125 | samp {
126 | font-family: monospace, monospace; /* 1 */
127 | font-size: 1em; /* 2 */
128 | }
129 |
130 | /**
131 | * Add the correct font size in all browsers.
132 | */
133 |
134 | small {
135 | font-size: 80%;
136 | }
137 |
138 | /**
139 | * Prevent `sub` and `sup` elements from affecting the line height in
140 | * all browsers.
141 | */
142 |
143 | sub,
144 | sup {
145 | font-size: 75%;
146 | line-height: 0;
147 | position: relative;
148 | vertical-align: baseline;
149 | }
150 |
151 | sub {
152 | bottom: -0.25em;
153 | }
154 |
155 | sup {
156 | top: -0.5em;
157 | }
158 |
159 | /* Embedded content
160 | ========================================================================== */
161 |
162 | /**
163 | * Remove the border on images inside links in IE 10.
164 | */
165 |
166 | img {
167 | /*PLease check this youtube video for understanding why these properties were used
168 | -> https://www.youtube.com/watch?v=345V2MU3E_w
169 | */
170 | border:0;
171 | font-style:italic;
172 | vertical-align:middle;
173 | height:auto;
174 | border-style: none;
175 | max-width: 100%;
176 | shape-margin:1rem;
177 | }
178 |
179 | /* Forms
180 | ========================================================================== */
181 |
182 | /**
183 | * 1. Change the font styles in all browsers.
184 | * 2. Remove the margin in Firefox and Safari.
185 | */
186 |
187 | button,
188 | input,
189 | optgroup,
190 | select,
191 | textarea {
192 | font: inherit; /* 1 */
193 | font-size: 100%; /* 1 */
194 | line-height: 1.15; /* 1 */
195 | margin: 0; /* 2 */
196 | padding: 0; /* 2 */
197 | background: none;
198 | color: inherit;
199 | border: none;
200 | cursor: pointer;
201 | outline: inherit;
202 | }
203 |
204 | ul,
205 | ol,
206 | li {
207 | font: inherit; /* 1 */
208 | font-size: 100%; /* 1 */
209 | padding: 0;
210 | margin: 0;
211 | list-style: none;
212 |
213 | }
214 |
215 | select {
216 | -webkit-appearance: none;
217 | appearance: none;
218 | }
219 |
220 | /**
221 | * Show the overflow in IE.
222 | * 1. Show the overflow in Edge.
223 | */
224 |
225 | button,
226 | input {
227 | /* 1 */
228 | overflow: visible;
229 | }
230 |
231 | /**
232 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
233 | * 1. Remove the inheritance of text transform in Firefox.
234 | */
235 |
236 | button,
237 | select {
238 | /* 1 */
239 | text-transform: none;
240 | }
241 |
242 | /**
243 | * Correct the inability to style clickable types in iOS and Safari.
244 | */
245 |
246 | button,
247 | [type='button'],
248 | [type='reset'],
249 | [type='submit'] {
250 | -webkit-appearance: button;
251 | appearance: button;
252 | }
253 |
254 | /**
255 | * Remove the inner border and padding in Firefox.
256 | */
257 |
258 | button::-moz-focus-inner,
259 | [type='button']::-moz-focus-inner,
260 | [type='reset']::-moz-focus-inner,
261 | [type='submit']::-moz-focus-inner {
262 | border-style: none;
263 | padding: 0;
264 | }
265 |
266 | /**
267 | * Restore the focus styles unset by the previous rule.
268 | */
269 |
270 | button:-moz-focusring,
271 | [type='button']:-moz-focusring,
272 | [type='reset']:-moz-focusring,
273 | [type='submit']:-moz-focusring {
274 | outline: 1px dotted ButtonText;
275 | }
276 |
277 | /**
278 | * Correct the padding in Firefox.
279 | */
280 |
281 | fieldset {
282 | padding: 0.35em 0.75em 0.625em;
283 | }
284 |
285 | /**
286 | * 1. Correct the text wrapping in Edge and IE.
287 | * 2. Correct the color inheritance from `fieldset` elements in IE.
288 | * 3. Remove the padding so developers are not caught out when they zero out
289 | * `fieldset` elements in all browsers.
290 | */
291 |
292 | legend {
293 | box-sizing: border-box; /* 1 */
294 | color: inherit; /* 2 */
295 | display: table; /* 1 */
296 | max-width: 100%; /* 1 */
297 | padding: 0; /* 3 */
298 | white-space: normal; /* 1 */
299 | }
300 |
301 | /**
302 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
303 | */
304 |
305 | progress {
306 | vertical-align: baseline;
307 | }
308 |
309 | /**
310 | * Remove the default vertical scrollbar in IE 10+.
311 | */
312 |
313 | textarea {
314 | overflow: auto;
315 | }
316 |
317 | /**
318 | * 1. Add the correct box sizing in IE 10.
319 | * 2. Remove the padding in IE 10.
320 | */
321 |
322 | [type='checkbox'],
323 | [type='radio'] {
324 | box-sizing: border-box; /* 1 */
325 | padding: 0; /* 2 */
326 | }
327 |
328 | /**
329 | * Correct the cursor style of increment and decrement buttons in Chrome.
330 | */
331 |
332 | [type='number']::-webkit-inner-spin-button,
333 | [type='number']::-webkit-outer-spin-button {
334 | height: auto;
335 | }
336 |
337 | /**
338 | * 1. Correct the odd appearance in Chrome and Safari.
339 | * 2. Correct the outline style in Safari.
340 | */
341 |
342 | [type='search'] {
343 | -webkit-appearance: textfield; /* 1 */
344 | appearance: textfield; /* 2 */
345 | outline-offset: -2px; /* 3 */
346 | }
347 |
348 | /**
349 | * Remove the inner padding in Chrome and Safari on macOS.
350 | */
351 |
352 | [type='search']::-webkit-search-decoration {
353 | -webkit-appearance: none;
354 | }
355 |
356 | /**
357 | * 1. Correct the inability to style clickable types in iOS and Safari.
358 | * 2. Change font properties to `inherit` in Safari.
359 | */
360 |
361 | ::-webkit-file-upload-button {
362 | -webkit-appearance: button; /* 1 */
363 | font: inherit; /* 2 */
364 | }
365 |
366 | /* Interactive
367 | ========================================================================== */
368 |
369 | /*
370 | * Add the correct display in Edge, IE 10+, and Firefox.
371 | */
372 |
373 | details {
374 | display: block;
375 | }
376 |
377 | /*
378 | * Add the correct display in all browsers.
379 | */
380 |
381 | summary {
382 | display: list-item;
383 | }
384 |
385 | /* Misc
386 | ========================================================================== */
387 |
388 | /**
389 | * Add the correct display in IE 10+.
390 | */
391 |
392 | template {
393 | display: none;
394 | }
395 |
396 | /**
397 | * Add the correct display in IE 10.
398 | */
399 |
400 | [hidden] {
401 | display: none;
402 | }
403 |
--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { useMediaQuery } from '@react-hook/media-query';
3 | import { FaChevronDown, FaBars } from 'react-icons/fa6';
4 | import { Link, useLocation } from 'react-router-dom';
5 | import { motion } from 'framer-motion';
6 | import japanFlag from '../../assets/flag-japan.png';
7 | import logo from '../../assets/invest_africa.webp';
8 | import styles from './Navbar.module.css';
9 |
10 | function NavBar() {
11 | const [isOpen, setIsOpen] = useState(false);
12 | const [isDropdownOpen, setIsDropdownOpen] = useState(false);
13 | const [isScrolled, setIsScrolled] = useState(false);
14 |
15 | const toggleNav = () => {
16 | setIsOpen(!isOpen);
17 | };
18 |
19 | const toggleDropdown = () => {
20 | setIsDropdownOpen(!isDropdownOpen);
21 | };
22 |
23 | const handleDropdownLinkClick = () => {
24 | const dropdownContent = document.querySelector(`.${styles.dropdown_content}`);
25 | dropdownContent.classList.toggle(styles.hide);
26 | };
27 |
28 | let mainContent = '#main-content';
29 |
30 | const location = useLocation();
31 |
32 | switch (location.pathname) {
33 | case '/login':
34 | mainContent = '#email';
35 | break;
36 | case '/register':
37 | mainContent = '#name';
38 | break;
39 | case '/companyregister':
40 | mainContent = '#companyName';
41 | break;
42 | default:
43 | mainContent = '#main-content';
44 | break;
45 | }
46 |
47 | const isNotDesktop = useMediaQuery('(max-width: 992px)');
48 |
49 | const getMainNavClasses = () => {
50 | let classes = `${styles.nav_links} ${styles.extra_nav_styling}`;
51 | if (isNotDesktop) {
52 | classes += ` ${styles.mobile_nav}`;
53 | }
54 | if (isNotDesktop && isOpen) {
55 | classes += ` ${styles.mobile_nav_open}`;
56 | }
57 | return classes;
58 | };
59 |
60 | useEffect(() => {
61 | // ? Function to handle the closing of the nav when clicking outside
62 | const handleClickOutside = event => {
63 | if (!event.target.closest(`.${styles.nav}`) && isOpen) {
64 | setIsOpen(false);
65 | }
66 | };
67 |
68 | // ? Function to handle the change in the navbar style on scroll
69 | const handleScroll = () => {
70 | const offset = window.scrollY;
71 | const threshold = 72;
72 | setIsScrolled(offset > threshold);
73 | };
74 |
75 | document.addEventListener('click', handleClickOutside);
76 | window.addEventListener('scroll', handleScroll);
77 |
78 | // ? Managing the overflow style on the body based on the nav state
79 | document.body.style.overflow = isOpen ? 'hidden' : 'visible';
80 |
81 | // ? Setting the initial state based on the initial scroll position
82 | handleScroll();
83 |
84 | return () => {
85 | document.removeEventListener('click', handleClickOutside);
86 | window.removeEventListener('scroll', handleScroll);
87 | document.body.style.overflow = 'visible';
88 | };
89 | }, [isOpen]);
90 |
91 | // * start - Variants to animate dropdowns
92 | const dropdownVariants = {
93 | initial: {
94 | opacity: 0,
95 | },
96 | enter: {
97 | opacity: 1,
98 | },
99 | };
100 | const responsiveVariants = isNotDesktop ? {} : dropdownVariants;
101 | // * end - Variants to animate dropdowns
102 |
103 | return (
104 |
275 | );
276 | }
277 |
278 | export default NavBar;
279 |
--------------------------------------------------------------------------------