full functional

2024-05-08 16:21:43 +02:00 · 2024-05-08 16:21:43 +02:00 · 2305ddeec0
commit 2305ddeec0
parent bb21288904
88 changed files with 29288 additions and 18 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,9 +6,18 @@
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.2",
+    "leaflet": "^1.9.4",
+    "node-sass": "^7.0.3",
    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.1",
    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
+    "react-select": "^5.8.0",
+    "sass": "^1.77.0",
+    "swiper": "^11.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
--- a/public/index.html
+++ b/public/index.html
@ -24,6 +24,12 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
    <title>React App</title>
  </head>
  <body>
--- a/src/App.css
+++ b/src/App.css
@ -36,3 +36,6 @@
    transform: rotate(360deg);
  }
 }
+
+
+
--- a/src/App.js
+++ b/src/App.js
@ -1,24 +1,22 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
+import NavBarSalw from "./Components/Layout/NavBarSalw/NavBarSalw.js";
+import SwiperSalw from "./Components/Layout/SwiperSalw/SwiperSalw.js";
+import MainDescription from "./Components/Layout/MainDescription/MainDescription.js";
+import WeaponAmmuBut from "./Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js";
+import CarouselsSalw from "./Components/Layout/CarouselsSalw/CarouselsSalw.js";
+
+

 function App() {
+
  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <NavBarSalw></NavBarSalw>
+      {/* <CarouselsSalw></CarouselsSalw> */}
+      {/* <MainDescription></MainDescription> */}
+      {/* <WeaponAmmuBut></WeaponAmmuBut> */}
+    </>
  );
 }

--- a/src/Components/Layout/AfricaMap/AfricaMap-V1.js
+++ b/src/Components/Layout/AfricaMap/AfricaMap-V1.js
@ -0,0 +1,294 @@
+import React, { createRef, usePrevious } from "react";
+import { MapContainer, GeoJSON } from "react-leaflet";
+import L from "leaflet"; 
+import Africa from "../../../Data/TestAfrica.geojson";
+import "./AfricaMap.css";
+import "./ZoomControl.css";
+import {
+  CountryStyle,
+  CountrySelectedStyle,
+  CountryHighlightStyle,
+} from "./countryStyles";
+
+class AfricaMap extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.mapRef = createRef(); // Create a ref to store the MapContainer instance
+    this.geoJsonLayerRef = createRef(); // Create a ref to store the GeoJSON layer instance
+
+    this.state = {
+      center: [3, 15],
+      zoom: 4,
+      africaCountries: null,
+      loading: true,
+      error: null,
+      selectedCountryName: null,
+      previousSelectedCountry: null,
+      selectedFeature: null,
+      previousFeature: null,
+      scrollWheelZoom: false,
+      selectedFilterCountry: null,
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    // Check if selectedFeature has changed
+    if (this.state.selectedFeature !== prevState.selectedFeature) {
+      // Update previousFeature with the previous value of selectedFeature
+      this.setState({ previousFeature: prevState.selectedFeature });
+    }
+
+    // Check if selectedFilterCountry has changed
+    if (this.props.selectedFilterCountry !== prevProps.selectedFilterCountry) {
+      const selectedCountryName = this.props.selectedFilterCountry.value;
+
+      // Check if a country is selected
+      if (selectedCountryName) {
+        // Get the Leaflet map instance from the mapRef
+        const map = this.mapRef.current;
+        console.log("map:", map);
+        map.eachLayer((layer) => {
+          if(layer.feature && layer.feature.properties.name === selectedCountryName) {
+            console.log("layer:", layer.feature.properties.name);
+            layer.setStyle(CountrySelectedStyle);
+          }
+          
+        })
+
+        const layers = this.geoJsonLayerRef.current.getLayers();
+        let selectedFeature = null;
+        layers.forEach((layer) => {
+          if (layer.feature.properties.name === selectedCountryName) {
+            selectedFeature = layer;
+          }
+        });
+
+        if (selectedFeature) {
+          // Update state to reflect the selected country and feature
+          this.setState(
+            {
+              selectedCountryName: selectedCountryName,
+              selectedFeature: selectedFeature,
+            },
+            () => {
+              console.log(
+                "Setting style for selected country:",
+                selectedCountryName,
+                selectedFeature
+              );
+              selectedFeature.setStyle(CountrySelectedStyle);
+            }
+          );
+        }
+      } else {
+        console.log("No country selected");
+        // Reset style for the previously selected country
+        if (prevState.selectedFeature) {
+          prevState.selectedFeature.setStyle(
+            CountryStyle(prevState.selectedFeature)
+          );
+        }
+        // Update state to reflect no selected country
+        this.setState({
+          selectedCountryName: null,
+          selectedFeature: null,
+        });
+      }
+    }
+  }
+
+  componentDidMount() {
+    this.fetchAfricaCountries();
+    this.calculateZoomLevel();
+    window.addEventListener("resize", this.calculateZoomLevel);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.calculateZoomLevel);
+  }
+
+  fetchAfricaCountries = async () => {
+    try {
+      const response = await fetch(Africa);
+      const data = await response.json();
+      this.setState(
+        {
+          africaCountries: data.features,
+          loading: false,
+        },
+        () => {}
+      );
+    } catch (error) {
+      this.setState({
+        error: error,
+        loading: false,
+      });
+    }
+  };
+
+  calculateZoomLevel = () => {
+    const screenWidth = window.innerWidth;
+    if (screenWidth <= 768) {
+      this.setState({ zoom: 3 });
+    } else if (screenWidth <= 1024) {
+      this.setState({ zoom: 4 });
+    } else {
+      this.setState({ zoom: 4 });
+    }
+  };
+
+  onEachFeature = (feature, layer) => {
+    // Bind event to layer
+    layer.on({
+      mouseover: this.onMouseOver,
+      mouseout: this.onMouseOut,
+      click: this.onMouseClick,
+    });
+  };
+
+  onMouseOver = (e) => {
+    e.target.setStyle(CountryHighlightStyle());
+  };
+
+  onMouseOut = (e) => {
+    // Check if a country is selected
+    if (
+      this.state.selectedCountryName === null ||
+      this.state.selectedCountryName !== e.target.feature.properties.name
+    ) {
+      // Reset style only if no country is selected or the selected country is not the one triggering the mouseout
+      e.target.bringToBack();
+      e.target.setStyle(CountryStyle());
+    }
+  };
+
+  onMouseClick = (e) => {
+    const countryName = e.target.feature.properties.name;
+    const popupContent = `<h5>Selected: ${countryName}</h5>`;
+
+    if (this.state.selectedCountryName === null) {
+      this.setState(
+        {
+          previousSelectedCountry: this.state.selectedCountryName,
+          selectedCountryName: countryName,
+          previousFeature: this.state.selectedFeature,
+          selectedFeature: e.target,
+        },
+        () => {
+          setTimeout(() => {
+            console.log(e.target);
+            e.target.setStyle(CountrySelectedStyle());
+            e.target
+              .bindTooltip(popupContent, {
+                permanent: true,
+                direction: "top",
+                className: "tooltip-custom",
+              })
+              .openTooltip();
+          }, 10);
+        }
+      );
+    } else if (this.state.selectedCountryName === countryName) {
+      this.setState(
+        {
+          selectedCountryName: null,
+          selectedFeature: null,
+        },
+        () => {
+          setTimeout(() => {
+            e.target.setStyle(CountryStyle());
+            e.target.unbindTooltip();
+          }, 10);
+        }
+      );
+    } else {
+      this.setState(
+        {
+          previousSelectedCountry: this.state.selectedCountryName,
+          selectedCountryName: countryName,
+          previousFeature: this.state.selectedFeature,
+          selectedFeature: e.target,
+        },
+        () => {
+          setTimeout(() => {
+            if (this.state.previousFeature) {
+              this.state.previousFeature.setStyle(CountryStyle());
+              this.state.previousFeature.unbindTooltip();
+              e.target
+                .bindTooltip(popupContent, {
+                  permanent: true,
+                  direction: "top",
+                  className: "tooltip-custom",
+                })
+                .openTooltip();
+            }
+            e.target.setStyle(CountrySelectedStyle());
+          }, 10);
+        }
+      );
+    }
+  };
+
+  resetMap = () => {
+    if (this.mapRef.current) {
+      this.mapRef.current.setView(this.state.center, this.state.zoom); // Set the center and zoom to initial values
+    }
+  };
+  zoomIn = () => {
+    if (this.mapRef.current) {
+      this.mapRef.current.setZoom(this.mapRef.current.getZoom() + 1);
+    }
+  };
+
+  zoomOut = () => {
+    if (this.mapRef.current) {
+      this.mapRef.current.setZoom(this.mapRef.current.getZoom() - 1);
+    }
+  };
+
+  render() {
+    const { africaCountries, loading, error } = this.state;
+
+    if (loading) {
+      return <div>Loading...</div>;
+    }
+    if (error) {
+      return <div>Error: {error.message}</div>;
+    }
+    return (
+      <>
+        <div id="map" className="map-container">
+          <MapContainer
+            center={this.state.center}
+            zoom={this.state.zoom}
+            ref={this.mapRef}
+            zoomControl={false}
+            style={{ width: "100%", height: "100%" }}
+            scrollWheelZoom={this.state.scrollWheelZoom}
+          >
+            {africaCountries && (
+              <>
+                <GeoJSON
+                  ref={this.geoJsonLayerRef}
+                  onEachFeature={this.onEachFeature}
+                  id="africa-map"
+                  style={(feature) => CountryStyle(feature)}
+                  key="africa-map"
+                  data={africaCountries}
+                />
+              </>
+            )}
+            <div className="custom-zoom-control">
+              <button onClick={this.zoomIn}>+</button>
+              <button onClick={this.zoomOut}>-</button>
+              <button onClick={this.resetMap}>*</button>
+            </div>
+          </MapContainer>
+        </div>
+      </>
+    );
+  }
+}
+
+export default AfricaMap;
--- a/src/Components/Layout/AfricaMap/AfricaMap-V2.js
+++ b/src/Components/Layout/AfricaMap/AfricaMap-V2.js
@ -0,0 +1,136 @@
+import React, { useState, useEffect } from "react";
+import { MapContainer, TileLayer, GeoJSON, ZoomControl } from "react-leaflet";
+import africaGeoJSON from "../../../Data/TestAfrica.geojson";
+import Classes from "./AfricaMap.module.css";
+import "./AfricaMap.css";
+import "./ZoomControl.css";
+import {
+  CountryStyle,
+  CountrySelectedStyle,
+  CountryHighlightStyle,
+} from "./countryStyles";
+
+const AfricaMap = () => {
+  const [selectedCountry, setSelectedCountry] = useState(null);
+
+  const [africaCountries, setAfricaCountries] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [center, setCenter] = useState([3, 15]);
+  const [zoom, setZoom] = useState(4);
+
+  const [selectedCountryName, setSelectedCountryName] = useState(null);
+  const [previousSelectedCountry, setPreviousSelectedCountry] = useState(null);
+  const [selectedFeature, setSelectedFeature] = useState(null);
+  const [previousFeature, setPreviousFeature] = useState(null);
+
+
+  useEffect(() => {
+    const fetchAfricaCountries = async () => {
+      try {
+        const response = await fetch(africaGeoJSON);
+        const data = await response.json();
+        setAfricaCountries(data.features);
+        setLoading(false);
+      } catch (e) {
+        console.log(e);
+        setLoading(false);
+      }
+    };
+    fetchAfricaCountries();
+  }, []);
+
+  useEffect(() => {
+    const screenWidth = window.innerWidth;
+    if (screenWidth <= 768) {
+      setZoom(3);
+    } else if (screenWidth <= 1024) {
+      setZoom(4);
+    } else {
+      setZoom(4);
+    }
+  }, []);
+
+  const highlightFeature = (e) => {
+    setSelectedCountry(e.target.feature.properties.name);
+  };
+
+  const resetHighlight = () => {
+    setSelectedCountry(null);
+  };
+
+  const onMouseClick = (e) => {
+    const countryName = e.target.feature.properties.name;
+    const popupContent = `<h5>Selected: ${countryName}</h5>`;
+    console.log("selectedCountryName:", selectedCountryName);
+  
+    if (selectedCountryName === null || selectedCountryName !== countryName) {
+      setSelectedCountryName(countryName);
+      //setSelectedFeature(e.target);
+      //setPreviousFeature(selectedFeature);
+      //setPreviousSelectedCountry(selectedCountryName);
+      setTimeout(() => {
+        e.target.setStyle(CountrySelectedStyle());
+        e.target
+          .bindTooltip(popupContent, {
+            permanent: true,
+            direction: "top",
+            className: "tooltip-custom",
+          })
+          .openTooltip();
+      }, 10);
+    } else {
+      setSelectedCountryName(null);
+      setSelectedFeature(null);
+      setTimeout(() => {
+        e.target.setStyle(CountryStyle());
+        e.target.unbindTooltip();
+      }, 10);
+    }
+  };
+
+  return (
+    <div id="map" className={Classes["map-container"]}>
+      <div className={Classes["map-controls"]}>
+        <select
+          value={selectedCountry}
+          onChange={(e) => setSelectedCountry(e.target.value)}
+        >
+          <option value="">Select a country</option>
+          {africaCountries.map((feature, index) => (
+            <option key={index} value={feature.properties.name}>
+              {feature.properties.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      {loading ? (
+        <p>Loading...</p>
+      ) : (
+        <MapContainer
+          center={center}
+          zoom={zoom}
+          zoomSnap={0.25}
+          zoomDelta={0.5}
+          zoomControl={false} // Disable default zoom control
+          style={{ width: "100%", height: "100%" }}
+        >
+          {/* <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> */}
+          <GeoJSON
+            data={africaCountries}
+            style={(feature) => CountryStyle(feature)}
+            onEachFeature={(feature, layer) => {
+              layer.on({
+                //mouseover: highlightFeature,
+                //mouseout: resetHighlight,
+                click: onMouseClick,
+              });
+            }}
+          />
+          <ZoomControl position="topright"></ZoomControl>
+        </MapContainer>
+      )}
+    </div>
+  );
+};
+
+export default AfricaMap;
--- a/src/Components/Layout/AfricaMap/AfricaMap.css
+++ b/src/Components/Layout/AfricaMap/AfricaMap.css
@ -0,0 +1,112 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.map-filter-box{
+  border: 1px solid #acabab;
+}
+.leaflet-container {
+  /* height: 100vh; */
+  background-color: white;
+}
+
+.map-container {
+  width: 100%; /* Set width to fill the available space */
+  height: 100vh; /* Set height to fill the viewport height */
+  /* border: solid 1px #333; */
+}
+
+.matrix {
+  display: grid;
+  grid-template-columns: repeat(4, 20px); /* Adjust width of each rectangle as needed */
+  grid-template-rows: repeat(3, 20px); /* Adjust height of each rectangle as needed */
+  gap: 3px; /* Adjust gap between rectangles as needed */
+}
+.rectangle {
+  background-color: #ffffff; /* Adjust rectangle color as needed */
+  border: 1px solid #000; /* Adjust border color and thickness as needed */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px; /* Adjust font size as needed */
+}
+
+
+.matrix-treaties-map {
+  display: grid;
+  grid-template-columns: repeat(3, 20px); /* Adjust width of each rectangle as needed */
+  grid-template-rows: repeat(2, 20px); /* Adjust height of each rectangle as needed */
+  gap: 3px; /* Adjust gap between rectangles as needed */
+}
+
+
+.filters-box{
+  /* border: 1px solid #333333; */
+  padding: 3px;
+}
+
+
+.regional-organisations {
+  display: grid;
+  grid-template-columns: repeat(3, 30%); /* Adjust width of each rectangle */
+  grid-template-rows: repeat(2, 25%); /* Adjust height of each rectangle */
+  gap: 3px; /* Adjust gap between rectangles */
+}
+
+.organization-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.organization-item:hover {
+  opacity: 0.8;
+}
+
+.name {
+  font-size: 12px;
+}
+
+
+
+.treaty-item {
+  display: grid;
+  grid-template-columns: repeat(4, 25%);
+  margin-bottom: 15px;
+}
+
+.treaty-item-name {
+  font-size: 12px;
+}
+
+.icon{
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+}
+
+.icon-2{
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+}
+
+
+
+
+.treaty-item-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 75%);
+  margin-bottom: 15px;
+}
+
+.tooltip-custom {
+  position: absolute;
+  z-index: 1000; /* Ensure tooltip appears above map layers */
+  pointer-events: auto; /* Enable click events on the tooltip */
+}
--- a/src/Components/Layout/AfricaMap/AfricaMap.js
+++ b/src/Components/Layout/AfricaMap/AfricaMap.js
@ -0,0 +1,659 @@
+import React, { createRef } from "react";
+import Stack from "react-bootstrap/Stack";
+import { MapContainer, GeoJSON, Marker, Tooltip } from "react-leaflet";
+import L, { control } from "leaflet";
+import Africa from "../../../Data/TestAfrica.geojson";
+import "../../../Styles/main.scss";
+import { CountryStyle, CountrySelectedStyle } from "./countryStyles";
+
+import Icon1 from "../../../Icons/icon1.svg";
+import Icon2 from "../../../Icons/icon2.svg";
+import Icon3 from "../../../Icons/icon3.svg";
+import Icon4 from "../../../Icons/icon4.svg";
+import Icon5 from "../../../Icons/icon5.svg";
+import Icon6 from "../../../Icons/icon6.svg";
+import Icon7 from "../../../Icons/icon7.svg";
+import Icon8 from "../../../Icons/icon8.svg";
+import Icon9 from "../../../Icons/icon9.svg";
+import Icon10 from "../../../Icons/icon10.svg";
+import Icon11 from "../../../Icons/icon11.svg";
+import Icon12 from "../../../Icons/icon12.svg";
+import Icon13 from "../../../Icons/icon13.svg";
+import Icon14 from "../../../Icons/icon14.svg";
+import Icon15 from "../../../Icons/icon15.svg";
+import Icon16 from "../../../Icons/icon16.svg";
+import Icon17 from "../../../Icons/icon17.svg";
+import Icon18 from "../../../Icons/icon18.svg";
+import Icon19 from "../../../Icons/icon19.svg";
+import Icon20 from "../../../Icons/icon20.svg";
+import Icon21 from "../../../Icons/icon21.svg";
+import Icon22 from "../../../Icons/icon22.svg";
+import Icon23 from "../../../Icons/icon23.svg";
+import Icon24 from "../../../Icons/icon24.svg";
+import Icon25 from "../../../Icons/icon25.svg";
+import Icon26 from "../../../Icons/icon26.svg";
+
+class AfricaMap extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.mapRef = createRef(); // Create a ref to store the MapContainer instance
+
+    this.state = {
+      africaCountries: null,
+      countriesNames: [],
+      loading: true,
+      error: null,
+
+      center: [3, 15],
+      zoom: 4,
+      scrollWheelZoom: false,
+
+      selectedCountry: "",
+      openedTooltipLayer: null,
+      selectedCountriesFilter: [],
+      selectedCountryColor: "yellow",
+      selectedRegion: "",
+    };
+  }
+
+  componentDidMount() {
+    this.fetchAfricaCountries();
+    this.calculateZoomLevel();
+    window.addEventListener("resize", this.calculateZoomLevel);
+  }
+
+  componentWillUnmount() {}
+
+  fetchAfricaCountries = async () => {
+    try {
+      const response = await fetch(Africa);
+      const data = await response.json();
+      this.setState(
+        {
+          africaCountries: data.features,
+          countriesNames: data.features
+            .map((feature) => feature.properties.name)
+            .sort(),
+          loading: false,
+        },
+        () => {}
+      );
+    } catch (error) {
+      this.setState({
+        error: error,
+        loading: false,
+      });
+    }
+  };
+
+  calculateZoomLevel = () => {
+    const screenWidth = window.innerWidth;
+    if (screenWidth <= 768) {
+      this.setState({ zoom: 3 });
+    } else if (screenWidth <= 1024) {
+      this.setState({ zoom: 4 });
+    } else {
+      this.setState({ zoom: 4 });
+    }
+  };
+
+  resetMap = () => {
+    if (this.mapRef.current) {
+      this.mapRef.current.setView(this.state.center, this.state.zoom); // Set the center and zoom to initial values
+    }
+  };
+  zoomIn = () => {
+    if (this.mapRef.current) {
+      this.mapRef.current.setZoom(this.mapRef.current.getZoom() + 1);
+    }
+  };
+  zoomOut = () => {
+    if (this.mapRef.current) {
+      this.mapRef.current.setZoom(this.mapRef.current.getZoom() - 1);
+    }
+  };
+
+  handleCountryChange = (e) => {
+    const countryName = e.target.value;
+    this.setState({ selectedCountry: countryName }, () => {
+      this.openTooltipForCountry(countryName);
+    });
+  };
+
+  onEachFeature = (feature, layer) => {
+    // Bind event to layer
+    layer.on({
+      //mouseover: this.onMouseOver,
+      //mouseout: this.onMouseOut,
+      click: this.onMouseClick,
+    });
+  };
+
+  openTooltipForCountry = (countryName) => {
+    const { africaCountries } = this.state;
+    if (!africaCountries) return;
+
+    const feature = africaCountries.find(
+      (feature) => feature.properties.name === countryName
+    );
+    if (!feature) return;
+
+    const { openedTooltipLayer } = this.state;
+    if (openedTooltipLayer) {
+      openedTooltipLayer.closeTooltip(); // Close the previously opened tooltip
+    }
+
+    const popupContent = `<h5>Selected: ${countryName}</h5>`;
+    const layer = L.geoJSON(feature);
+    const tooltip = L.tooltip({
+      permanent: true,
+      direction: "top",
+      className: "tooltip-custom",
+    }).setContent(popupContent);
+    layer.bindTooltip(tooltip).openTooltip();
+
+    // Update the state to store the currently opened tooltip
+    this.setState({ openedTooltipLayer: layer });
+  };
+
+  onMouseClick = (e) => {
+    this.setState({
+      selectedCountriesFilter: [],
+      selectedCountryColor: "yellow",
+    });
+    const countryName = e.target.feature.properties.name;
+    if (countryName === this.state.selectedCountry) {
+      this.setState({ selectedCountry: "" });
+      return;
+    }
+    this.setState({ selectedCountry: countryName });
+  };
+
+  handleOrganizationClick = (name, status, color) => {
+    if (this.state.selectedRegion === name) {
+      this.setState({
+        selectedCountriesFilter: [],
+        selectedCountryColor: "yellow",
+        selectedCountry: "",
+        selectedRegion: "",
+      });
+      return;
+    }
+    this.setState({
+      selectedCountriesFilter: [],
+      selectedCountryColor: color,
+      selectedCountry: "",
+      selectedRegion: name,
+    });
+
+    // Regional Organisation + International Guidelines & Instruments + African Guidelines & Instrumentss
+    this.state.africaCountries.map((feature) => {
+      if (feature.properties[name] === 1) {
+        this.setState((prevState) => ({
+          selectedCountriesFilter: [
+            ...prevState.selectedCountriesFilter,
+            feature.properties.name,
+          ],
+        }));
+      }
+    });
+    // Regional Treaties + International Treaties 
+    this.state.africaCountries.map((feature) => {
+      if (feature.properties[name] === status) {
+        this.setState((prevState) => ({
+          selectedCountriesFilter: [
+            ...prevState.selectedCountriesFilter,
+            feature.properties.name,
+          ],
+        }));
+      }
+    });
+  };
+
+  render() {
+    const findColorByName = (name) => {
+      const org = regional_organisations.find((org) => org.name === name);
+      return org ? org.color : ""; // Return color value if found, otherwise return an empty string
+    };
+    const regional_organisations = [
+      { name: "AU", color: "#b2df8a" },
+      { name: "EAC", color: "#33a02c" },
+      { name: "IGAD", color: "#fb9a99" },
+      { name: "UMA", color: "#e31a1c" },
+      { name: "COMESA", color: "#fdbf6f" },
+      { name: "ECOWAS", color: "#ff7f00" },
+      { name: "CEN-SAD", color: "#cab2d6" },
+      { name: "SADC", color: "#6a3d9a" },
+      { name: "ECCAS", color: "#ffff99" },
+      { name: "ICGLR", color: "#b15928" },
+      { name: "RECSA", color: "#a6cee3" },
+      { name: "SARCOM", color: "#1f78b4" },
+    ];
+
+    const regional_treaties = [
+      {
+        name: "Bamako Declaration",
+        name2: "BamakoDeclaration",
+        icon_eligible: Icon26,
+        icon_signed: Icon24,
+        icon_ratified: null,
+      },
+      {
+        name: "Kinshasa Convention",
+        name2: "KinshasaConvention",
+        icon_eligible: Icon4,
+        icon_signed: Icon6,
+        icon_ratified: Icon5,
+      },
+      {
+        name: "ECOWAS Convention",
+        name2: "ECOWASConvention",
+        icon_eligible: Icon2,
+        icon_signed: Icon3,
+        icon_ratified: null,
+      },
+      {
+        name: "Khartoum Declaration",
+        name2: "KhartoumDeclaration",
+        icon_eligible: Icon21,
+        icon_signed: Icon23,
+        icon_ratified: null,
+      },
+      {
+        name: "Nairobi Protocol",
+        name2: "NairobiProtocol",
+        icon_eligible: Icon22,
+        icon_signed: Icon25,
+        icon_ratified: null,
+      },
+      {
+        name: "SADC Firearms Protocol",
+        name2: "SADCFirearmsProtocol",
+        icon_eligible: Icon8,
+        icon_signed: Icon7,
+        icon_ratified: Icon9,
+      },
+    ];
+
+    const international_treaties = [
+      {
+        name: "Arms Trade Treaty",
+        name2: "ArmsTradeTreaty",
+        icon_eligible: Icon19,
+        icon_signed: Icon17,
+        icon_ratified: Icon18,
+      },
+      {
+        name: "Firearms Protocol",
+        name2: "FirearmsProtocol",
+        icon_eligible: Icon12,
+        icon_signed: Icon10,
+        icon_ratified: Icon11,
+      },
+      {
+        name: "Wassenaar Agreement",
+        name2: "WassenaarAgreement",
+        icon_eligible: Icon15,
+        icon_signed: Icon13,
+        icon_ratified: Icon14,
+      },
+    ];
+
+    const {
+      africaCountries,
+      loading,
+      error,
+      countriesNames,
+      selectedCountry,
+      selectedCountriesFilter,
+      selectedCountryColor,
+    } = this.state;
+
+    if (loading) {
+      return <div>Loading...</div>;
+    }
+    if (error) {
+      return <div>Error: {error.message}</div>;
+    }
+    return (
+      <Stack direction="horizontal" className="map-filter-box" gap={0}>
+        <div className={`filters-box`}>
+          <div>
+            <h5>African Countries</h5>
+
+            <select onChange={this.handleCountryChange} value={selectedCountry}>
+              <option value="">Select a country</option>
+              {countriesNames.map((country, index) => (
+                <option key={index} value={country}>
+                  {country}
+                </option>
+              ))}
+            </select>
+            <hr />
+          </div>
+          <div>
+            <h5>Regional Organisations</h5>
+            <div className="regional-organisations">
+              {regional_organisations.map((org, index) => (
+                <div
+                  key={org.name}
+                  className="organization-item"
+                  style={{ backgroundColor: org.color }}
+                  onClick={() =>
+                    this.handleOrganizationClick(org.name, "", org.color)
+                  }
+                >
+                  <div className="name">{org.name}</div>
+                </div>
+              ))}
+            </div>
+
+            <hr />
+          </div>
+          <div>
+            <h5>Regional Treaties</h5>
+            <div className="regional-treaties">
+              {regional_treaties.map((treaty) => (
+                <div key={treaty.name} className="treaty-item">
+                  <div className="treaty-item-name">{treaty.name}</div>
+
+                  {treaty.icon_eligible && (
+                    <img
+                      src={treaty.icon_eligible}
+                      alt={`${treaty.name}-Eligible`}
+                      title={`${treaty.name}-Eligible`}
+                      srcSet=""
+                      className="icon"
+                      onClick={() =>
+                        this.handleOrganizationClick(treaty.name2, "Eligible")
+                      }
+                    />
+                  )}
+                  {treaty.icon_signed && (
+                    <img
+                      src={treaty.icon_signed}
+                      alt={`${treaty.name}-Signed`}
+                      title={`${treaty.name}-Signed`}
+                      srcSet=""
+                      className="icon"
+                      onClick={() =>
+                        this.handleOrganizationClick(treaty.name2, "Signed")
+                      }
+                    />
+                  )}
+                  {treaty.icon_ratified && (
+                    <img
+                      src={treaty.icon_ratified}
+                      alt={`${treaty.name}-Ratified`}
+                      title={`${treaty.name}-Ratified`}
+                      srcSet=""
+                      className="icon"
+                      onClick={() =>
+                        this.handleOrganizationClick(treaty.name2, "Ratified")
+                      }
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+            <hr />
+          </div>
+          <div>
+            <h5>International Treaties</h5>
+            {international_treaties.map((treaty) => (
+              <div key={treaty.name} className="treaty-item">
+                <div className="treaty-item-name">{treaty.name}</div>
+
+                {treaty.icon_eligible && (
+                  <img
+                    src={treaty.icon_eligible}
+                    alt={`${treaty.name}-Eligible`}
+                    title={`${treaty.name}-Eligible`}
+                    srcSet=""
+                    className="icon-2"
+                    onClick={() =>
+                      this.handleOrganizationClick(treaty.name2, "Eligible")
+                    }
+                  />
+                )}
+                {treaty.icon_signed && (
+                  <img
+                    src={treaty.icon_signed}
+                    alt={`${treaty.name}-Signed`}
+                    title={`${treaty.name}-Signed`}
+                    srcSet=""
+                    className="icon-2"
+                    onClick={() =>
+                      this.handleOrganizationClick(treaty.name2, "Signed")
+                    }
+                  />
+                )}
+                {treaty.icon_ratified && (
+                  <img
+                    src={treaty.icon_ratified}
+                    alt={`${treaty.name}-Ratified`}
+                    title={`${treaty.name}-Ratified`}
+                    srcSet=""
+                    className="icon-2"
+                    onClick={() =>
+                      this.handleOrganizationClick(treaty.name2, "Ratified")
+                    }
+                  />
+                )}
+              </div>
+            ))}
+            <hr />
+          </div>
+          <div>
+            <h5>
+              International Guidelines & Instruments <br />
+              <small>
+                (countries with recent activities only, 2014 - 2019)
+              </small>
+            </h5>
+            <div className="treaty-item-2">
+              <div className="treaty-item-name">UN Programme of Action</div>
+              <img
+                src={Icon20}
+                alt=""
+                className="icon-2"
+                onClick={() =>
+                  this.handleOrganizationClick("UNProgrammeofAction")
+                }
+              />
+            </div>
+            <div className="treaty-item-2">
+              <div className="treaty-item-name">
+                International Tracing Instrument
+              </div>
+              <img
+                src={Icon16}
+                alt=""
+                className="icon-2"
+                onClick={() =>
+                  this.handleOrganizationClick("InternationalTracingInstrument")
+                }
+              />
+            </div>
+            <hr />
+          </div>
+          <div>
+            <h5>African Guidelines & Instrumentss</h5>
+            <div className="treaty-item-2">
+              <div className="treaty-item-name">
+                Silencing the Guns in Africa Programme of Action
+              </div>
+              <img
+                src={Icon1}
+                alt=""
+                className="icon-2"
+                onClick={() => this.handleOrganizationClick("StG-PoA")}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div id="map" className="map-container">
+          <MapContainer
+            center={this.state.center}
+            zoom={this.state.zoom}
+            ref={this.mapRef}
+            zoomControl={false}
+            style={{ width: "100%", height: "100%" }}
+            scrollWheelZoom={this.state.scrollWheelZoom}
+          >
+            {africaCountries && (
+              <>
+                <GeoJSON
+                  ref={this.geoJsonLayerRef}
+                  onEachFeature={this.onEachFeature}
+                  id="africa-map"
+                  style={(feature) =>
+                    feature.properties.name === selectedCountry ||
+                    selectedCountriesFilter.find(
+                      (item) => item === feature.properties.name
+                    )
+                      ? CountrySelectedStyle(selectedCountryColor)
+                      : CountryStyle()
+                  }
+                  key="africa-map"
+                  data={africaCountries}
+                />
+              </>
+            )}
+            {selectedCountry &&
+              africaCountries.map((feature) => {
+                if (feature.properties.name === selectedCountry) {
+                  return (
+                    <Marker
+                      key={feature.properties.name}
+                      position={[feature.properties.y, feature.properties.x]}
+                    >
+                      <Tooltip
+                        direction="bottom"
+                        offset={[-13, 27]}
+                        opacity={1}
+                        permanent
+                        className="tooltip-custom"
+                      >
+                        <h5>{feature.properties.name}</h5>
+                        <div className="matrix">
+                          {regional_organisations.map((org) => (
+                            <div
+                              key={org.name}
+                              className="rectangle"
+                              style={
+                                feature.properties[org.name] === 1
+                                  ? {
+                                      backgroundColor: findColorByName(
+                                        org.name
+                                      ),
+                                    }
+                                  : {}
+                              }
+                              title={org.name}
+                            ></div>
+                          ))}
+                        </div>
+                        <div className="matrix-treaties-map">
+                          {regional_treaties.map((org) => (
+                            <div key={org.name2}>
+                              {(feature.properties[org.name2] ===
+                                "Eligible" && (
+                                <img
+                                  title={org.name}
+                                  src={org.icon_eligible}
+                                  alt=""
+                                  srcSet=""
+                                />
+                              )) ||
+                                (feature.properties[org.name2] === "Signed" && (
+                                  <img
+                                    title={org.name}
+                                    src={org.icon_signed}
+                                    alt=""
+                                    srcSet=""
+                                  />
+                                )) ||
+                                (feature.properties[org.name2] ===
+                                  "Ratified" && (
+                                  <img
+                                    title={org.name}
+                                    src={org.icon_ratified}
+                                    alt=""
+                                    srcSet=""
+                                  />
+                                ))}
+                            </div>
+                          ))}
+                        </div>
+                        <div className="matrix-treaties-map">
+                          {international_treaties.map((org) => (
+                            <div key={org.name2}>
+                              {(feature.properties[org.name2] ===
+                                "Eligible" && (
+                                <img
+                                  title={org.name}
+                                  src={org.icon_eligible}
+                                  alt=""
+                                  srcSet=""
+                                />
+                              )) ||
+                                (feature.properties[org.name2] === "Signed" && (
+                                  <img
+                                    title={org.name}
+                                    src={org.icon_signed}
+                                    alt=""
+                                    srcSet=""
+                                  />
+                                )) ||
+                                (feature.properties[org.name2] ===
+                                  "Ratified" && (
+                                  <img
+                                    title={org.name}
+                                    src={org.icon_ratified}
+                                    alt=""
+                                    srcSet=""
+                                  />
+                                ))}
+                            </div>
+                          ))}
+                        </div>
+                        <div className="matrix-treaties-map">
+                          <div>
+                            {feature.properties.UNProgrammeofAction === 1 && (
+                              <img src={Icon20} alt="" srcSet="" />
+                            )}
+                          </div>
+                          <div>
+                            {feature.properties
+                              .InternationalTracingInstrument === 1 && (
+                              <img src={Icon16} alt="" srcSet="" />
+                            )}
+                          </div>
+                          <div>
+                            {feature.properties["StG-PoA"] === 1 && (
+                              <img src={Icon1} alt="" srcSet="" />
+                            )}
+                          </div>
+                        </div>
+                      </Tooltip>
+                    </Marker>
+                  );
+                }
+              })}
+
+            <div className="custom-zoom-control">
+              <button onClick={this.zoomIn}>+</button>
+              <button onClick={this.zoomOut}>-</button>
+              <button onClick={this.resetMap}>*</button>
+            </div>
+          </MapContainer>
+        </div>
+      </Stack>
+    );
+  }
+}
+
+export default AfricaMap;
--- a/src/Components/Layout/AfricaMap/AfricaMap.module.css
+++ b/src/Components/Layout/AfricaMap/AfricaMap.module.css
@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.leaflet-container {
+  /* height: 100vh; */
+  background-color: white;
+}
+
+.map-container {
+  width: 100%; /* Set width to fill the available space */
+  height: 100vh; /* Set height to fill the viewport height */
+  border: solid 1px black;
+}
--- a/src/Components/Layout/AfricaMap/Title.js
+++ b/src/Components/Layout/AfricaMap/Title.js
@ -0,0 +1,21 @@
+import React from "react";
+
+const Title = () => {
+
+  return (
+      <div className="responsive-text text-center">
+          <h4 className="h4">
+            SALW control in Africa: Organisations, treaties and instruments
+          </h4>
+          <h4 className="h4">
+            مراقبة الاسلحة الصغيرة و الاسلحة الخفيفة في أفريقيا: المنظمات و
+            المعاهدات و الأدوات
+          </h4>
+          <h4 className="h4">
+            Contrôle des ALPC en Afrique : Organisations, traités et instruments
+          </h4>
+        </div>
+  );
+};
+
+export default Title;
--- a/src/Components/Layout/AfricaMap/Title.nodule.css
+++ b/src/Components/Layout/AfricaMap/Title.nodule.css
--- a/src/Components/Layout/AfricaMap/ZoomControl.css
+++ b/src/Components/Layout/AfricaMap/ZoomControl.css
@ -0,0 +1,38 @@
+/* Styles for custom zoom control buttons */
+.custom-zoom-control {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+  }
+  
+  .custom-zoom-control button {
+    background-color: #fff;
+    border: 2px solid #bbb;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    color: #333;
+    cursor: pointer;
+    display: block;
+    font-size: 18px;
+    line-height: 18px;
+    margin-bottom: 5px;
+    outline: none;
+    padding: 5px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    width: 30px;
+  }
+  
+  .custom-zoom-control button:hover {
+    background-color: #f4f4f4;
+  }
+  
+  .custom-zoom-control button:active {
+    background-color: #e6e6e6;
+  }
+  
+  .custom-zoom-control button:first-child {
+    margin-bottom: 0;
+  }
--- a/src/Components/Layout/AfricaMap/countryStyles.js
+++ b/src/Components/Layout/AfricaMap/countryStyles.js
@ -0,0 +1,25 @@
+export const CountryStyle = () => {
+    return {
+      color: "black",
+      weight: 1,
+      opacity: 1,
+      fillColor: "#FDEDE2",
+      fillOpacity: 0.3,
+    };
+  };
+
+  export const  CountrySelectedStyle = (color) => {
+    return {
+      fillColor: color,
+      color: "black",
+      weight: 3,
+    };
+  }
+
+  export const  CountryHighlightStyle = () => {
+    return {
+      fillColor: "yellow",
+      color: "black",
+      weight: 3,
+    };
+  }
--- a/src/Components/Layout/AfricaMap/eventHandlers.js
+++ b/src/Components/Layout/AfricaMap/eventHandlers.js
@ -0,0 +1,35 @@
+export const onEachFeature = (feature, layer, context) => {
+    const countryName = feature.properties.SOVEREIGNT;
+  
+    layer.bindPopup(`<h5>${countryName}</h5>`);
+  
+    layer.on({
+      mouseover: (event) => {
+        event.target.bringToFront();
+        event.target.setStyle(context.countryHighlightStyle());
+      },
+      mouseout: (event) => {
+        if (
+          context.state.selectedCountry === null ||
+          context.state.selectedCountry !== countryName
+        ) {
+          event.target.bringToBack();
+          event.target.setStyle(context.countryStyle());
+        }
+      },
+      click: (event) => {
+        const popupContent = `<h5>Clicked: ${countryName}</h5>`;
+        context.setState(
+          {
+            selectedCountry: countryName,
+          },
+          () => {
+            setTimeout(() => {
+              event.target.setStyle(context.countrySelectedStyle());
+            }, 10);
+          }
+        );
+        event.target.bindPopup(popupContent).openPopup();
+      },
+    });
+  };
--- a/src/Components/Layout/AfricaMap/fetchMap.js
+++ b/src/Components/Layout/AfricaMap/fetchMap.js
@ -0,0 +1,13 @@
+import Africa from "../../../Data/Africa.geojson";
+
+const fetchAfricaCountries = async () => {
+    try {
+      const response = await fetch(Africa);
+      const data = await response.json();
+      return { loading: false, error: null, africaCountries: data.features };
+    } catch (error) {
+      return { loading: false, error: error, africaCountries: null };
+    }
+  };
+
+export default fetchAfricaCountries;
--- a/src/Components/Layout/AfricaMap/helpers.js
+++ b/src/Components/Layout/AfricaMap/helpers.js
@ -0,0 +1,17 @@
+export const resetMap = (context) => {
+    if (context.mapRef.current) {
+      context.mapRef.current.setView(context.state.center, context.state.zoom);
+    }
+  };
+  
+  export const zoomIn = (context) => {
+    if (context.mapRef.current) {
+      context.mapRef.current.setZoom(context.map.current.getZoom() + 1);
+    }
+  };
+  
+  export const zoomOut = (context) => {
+    if (context.mapRef.current) {
+      context.mapRef.current.setZoom(context.mapRef.current.getZoom() - 1);
+    }
+  };
--- a/src/Components/Layout/AfricaMap/tmp.js
+++ b/src/Components/Layout/AfricaMap/tmp.js
@ -0,0 +1,89 @@
+import React, { useState, useEffect } from "react";
+import { MapContainer, GeoJSON, useMap, TileLayer } from "react-leaflet";
+import Africa from "../../../Data/Africa.geojson";
+import "./AfricaMap.css";
+
+const countryStyle = {
+  color: "black",
+  weight: 1,
+  opacity: 1,
+  fillColor: "orange",
+  fillOpacity: 0.3,
+};
+
+const countryHighlightStyle = {
+  fillColor: "yellow",
+  color: "orange",
+  fillOpacity: 0.5,
+};
+
+const countrySelectedStyle = {
+  fillColor: "yellow",
+  color: "orange",
+  fillOpacity: 0.5,
+};
+
+const AfricaMap = () => {
+  const [africa, setAfrica] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedCountry, setSelectedCountry] = useState(null);
+
+  useEffect(() => {
+    const feachtAfricaData = async () => {
+      try {
+        const response = await fetch(Africa);
+        const data = await response.json();
+
+        setAfrica(data);
+        setLoading(false);
+      } catch (error) {
+        setError(error);
+        setLoading(false);
+      }
+    };
+
+    feachtAfricaData();
+  }, []);
+
+  const onEachCountry = (feature, layer) => {
+    const countryName = feature.properties.SOVEREIGNT;
+    const popupContent = `<h5>${countryName}</h5>`;
+    layer.bindPopup(popupContent);
+
+    layer.on({
+      click: (event) => {
+        // Set the state of the selected country
+        setSelectedCountry(event.target.feature.properties.SOVEREIGNT);
+        // Log the clicked country to the console
+        console.log(selectedCountry);
+        console.log(event.target);
+        // Set the style of the clicked country
+        event.target.setStyle(countrySelectedStyle);
+        event.target.bringToFront();
+        //layer.openPopup();
+      },
+      mouseover: (event) => {
+        //layer.openPopup();
+      },
+    });
+  };
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  return (
+    <div id="map">
+      <MapContainer center={[3, 15]} zoom={4}>
+        <GeoJSON
+          style={countryStyle}
+          key="africa-map"
+          data={africa}
+          onEachFeature={onEachCountry}
+        ></GeoJSON>
+      </MapContainer>
+    </div>
+  );
+};
+
+export default AfricaMap;
--- a/src/Components/Layout/AfricaMapFilters/AfricaMapFilters.js
+++ b/src/Components/Layout/AfricaMapFilters/AfricaMapFilters.js
@ -0,0 +1,58 @@
+import React, { useState, useEffect } from "react";
+import Africa from "../../../Data/TestAfrica.geojson";
+import Dropdown from "react-bootstrap/Dropdown";
+import DropdownButton from "react-bootstrap/DropdownButton";
+import Select from "react-select";
+
+const AfricaMapFilters = ({ handleCountrySelect }) => {
+
+  const [africaCountries, setAfricaCountries] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  useEffect(() => {
+    const fetchAfricaCountries = async () => {
+      try {
+        const response = await fetch(Africa);
+        const data = await response.json();
+        setAfricaCountries(
+          data.features.map((country) => ({
+            value: country.properties.name,
+            label: country.properties.name,
+            target: country,
+          }))
+        );
+        setLoading(false);
+      } catch (error) {
+        setError(error);
+        setLoading(false);
+      }
+    };
+    fetchAfricaCountries();
+  }, []);
+
+  const handleChange = (selectedOption) => {
+    setSelectedOption(selectedOption);
+    handleCountrySelect(selectedOption);
+  };
+
+  return (
+    <div>
+      AfricaMapFilters
+      <div>
+        <h3>Select a country:</h3>
+        <Select
+          value={selectedOption}
+          onChange={handleChange}
+          options={africaCountries}
+          isSearchable={true}
+          placeholder="Search..."
+          menuPortalTarget={document.body}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AfricaMapFilters;
--- a/src/Components/Layout/CarouselsSalw/CarouselsSalw.js
+++ b/src/Components/Layout/CarouselsSalw/CarouselsSalw.js
@ -0,0 +1,36 @@
+import React from "react";
+import Carousel from "react-bootstrap/Carousel";
+import Container from "react-bootstrap/esm/Container";
+import Classes from "./CarouselsSalw.module.css";
+
+import weapon1 from "../../../img/weapon1.png";
+import weapon2 from "../../../img/weapon2.png";
+import weapon3 from "../../../img/weapon3.png";
+import weapon4 from "../../../img/weapon4.png";
+import weapon5 from "../../../img/weapon5.png";
+
+const CarouselsSalw = () => {
+  return (
+    <Container className="mt-5">
+      <Carousel className={`${Classes.swiper} text-center w-75 m-auto`}>
+        <Carousel.Item>
+          <img src={weapon1} alt="" className="d-block mx-auto" />
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={weapon2} alt="" className="d-block mx-auto"/>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={weapon3} alt="" className="d-block mx-auto"/>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={weapon4} alt="" className="d-block mx-auto"/>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={weapon5} alt="" className="d-block mx-auto"/>
+        </Carousel.Item>
+      </Carousel>
+    </Container>
+  );
+};
+
+export default CarouselsSalw;
--- a/src/Components/Layout/CarouselsSalw/CarouselsSalw.module.css
+++ b/src/Components/Layout/CarouselsSalw/CarouselsSalw.module.css
@ -0,0 +1,6 @@
+.swiper {
+  border: solid 1px #ccc;
+  border-radius: 15px;
+  background-color: #ccc;
+  height: 100%;
+}
--- a/src/Components/Layout/MainDescription/MainDescription.js
+++ b/src/Components/Layout/MainDescription/MainDescription.js
@ -0,0 +1,29 @@
+import React from "react";
+
+import Container from "react-bootstrap/esm/Container";
+
+const MainDescription = () => {
+  return (
+    <Container className="mt-5">
+      <p>
+        <strong>SALW Guide</strong> The Interactive Guide on Small Arms and Light Weapons is an
+        online database that provides information on the global distribution of,
+        and how to identify commonly used* small arms and light weapons (SALW)
+        in organized violence. It is designed to build knowledge on how to
+        recognize different types, makes and models of commonly used SALW; to
+        collect data on the global and country-specific spread of these SALW;
+        and to describe some of their visual and technical specifications. The
+        guide is not an exhaustive list of all SALW that are used around the
+        world. The interactive Guide was developed by BICC in close cooperation
+        with the Bundeswehr Verification Center (BwVC) and with generous support
+        of the Federal Foreign Office, Germany. * This is based on information
+        provided by the German Bundeswehr Verification Center. The SALW Guide is
+        also a contribution to the UN Programme of Action (PoA) to Prevent,
+        Combat and Eradicate the Illicit Trade in Small Arms and Light Weapons
+        in All Its Aspects.
+      </p>
+    </Container>
+  );
+};
+
+export default MainDescription;
--- a/src/Components/Layout/NavBarSalw/NavBarSalw.js
+++ b/src/Components/Layout/NavBarSalw/NavBarSalw.js
@ -0,0 +1,40 @@
+import React from "react";
+import { BrowserRouter as Router, Route, Link, Switch, Routes } from "react-router-dom";
+
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import NavDropdown from "react-bootstrap/NavDropdown";
+import Home from "../../Pages/Home";
+import About from "../../Pages/About";
+import Treaties from "../../Pages/Treaties";
+
+const NavBarSalw = () => {
+  return (
+    <>
+    <Router>
+      <Navbar expand="lg" className="bg-body-tertiary">
+        <Container>
+          <Navbar.Brand href="#home">SALW Guide</Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="me-auto">
+              <Nav.Link href="home">Home</Nav.Link>
+              <Nav.Link href="treaties">Treaties</Nav.Link>
+              <Nav.Link href="about">About</Nav.Link>
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+      </Navbar>
+      
+      <Routes>
+      <Route path="/home" element={<Home />} />
+        <Route path="/treaties" element={<Treaties />} />
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </Router>
+    </>
+  );
+};
+
+export default NavBarSalw;
--- a/src/Components/Layout/SwiperSalw/SwiperSalw.js
+++ b/src/Components/Layout/SwiperSalw/SwiperSalw.js
@ -0,0 +1,47 @@
+import React from "react";
+import Container from "react-bootstrap/esm/Container";
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+// Import Swiper styles
+// Import Swiper styles
+import "swiper/css";
+import 'swiper/css/effect-fade';
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+import "swiper/css/scrollbar";
+import classes from "./SwiperSalw.module.css";
+// import required modules
+import { EffectFade,Navigation, Pagination, Autoplay } from 'swiper/modules';
+
+import weapon1 from "../../../img/weapon1.png"
+import weapon2 from "../../../img/weapon2.png"
+import weapon3 from "../../../img/weapon3.png"
+import weapon4 from "../../../img/weapon4.png"
+import weapon5 from "../../../img/weapon5.png"
+
+const SwiperSalw = () => {
+  return (
+    <Container className="mt-5">
+      <Swiper
+        loop={true}
+        effect={'fade'}
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
+        navigation={true}
+        modules={[Autoplay, Navigation]}
+        className={`${classes.swiper}`}
+      >
+        <SwiperSlide className={classes['swiper-slide']}><img src={weapon1} alt="" /></SwiperSlide>
+        <SwiperSlide className={classes['swiper-slide']}><img src={weapon2} alt="" /></SwiperSlide>
+        <SwiperSlide className={classes['swiper-slide']}><img src={weapon3} alt="" /></SwiperSlide>
+        <SwiperSlide className={classes['swiper-slide']}><img src={weapon4} alt="" /></SwiperSlide>
+        <SwiperSlide className={classes['swiper-slide']}><img src={weapon5} alt="" /></SwiperSlide>
+        
+      </Swiper>
+    </Container>
+  );
+};
+
+export default SwiperSalw;
--- a/src/Components/Layout/SwiperSalw/SwiperSalw.module.css
+++ b/src/Components/Layout/SwiperSalw/SwiperSalw.module.css
@ -0,0 +1,17 @@
+.swiper {
+  width: 70%;
+  height: 70%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: solid 1px #ccc;
+  border-radius: 15px;
+  background-color: #ccc;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
--- a/src/Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js
+++ b/src/Components/Layout/WeaponAmmuBut/WeaponAmmuBut.js
@ -0,0 +1,47 @@
+import React from "react";
+
+import Container from "react-bootstrap/esm/Container";
+import Stack from "react-bootstrap/Stack";
+import Card_ from "../../UI/Card_/Card_";
+import Button from "react-bootstrap/esm/Button";
+
+
+import weapon1 from "../../../img/weapon1.png";
+import weapon2 from "../../../img/weapon2.png";
+
+const WeaponAmmuBut = () => {
+  return (
+    <Container className="mt-5">
+      <Stack direction="horizontal" gap={3} className="w-75 text-center m-auto">
+        <div
+          role="button"
+          className="w-100 text-center border rounded-end rounded-4 p-3"
+        >
+          <strong>Weapons</strong>
+          <p>
+            Do you know which SALW are commonly found around the world? Enter
+            here for an overview of some widely spread SALW including photos,
+            technical specifications, markings, distribution maps, and short
+            descriptions.
+          </p>
+          <img src={weapon1} alt="" srcset="" />
+        </div>
+        <div
+          role="button"
+          className="w-100 text-center border rounded-start rounded-4 p-3"
+        >
+          <strong>Ammunition</strong>
+          <p>
+            Do you know which SALW are commonly found around the world? Enter
+            here for an overview of some widely spread SALW including photos,
+            technical specifications, markings, distribution maps, and short
+            descriptions.
+          </p>
+          <img src={weapon2} alt="" srcset="" />
+        </div>
+      </Stack>
+    </Container>
+  );
+};
+
+export default WeaponAmmuBut;
--- a/src/Components/Pages/About.js
+++ b/src/Components/Pages/About.js
@ -0,0 +1,12 @@
+import React from 'react';
+
+const About = () => {
+  return (
+    <div>
+      <h1>About Us</h1>
+      <p>This is the about page content.</p>
+    </div>
+  );
+};
+
+export default About;
--- a/src/Components/Pages/Home.js
+++ b/src/Components/Pages/Home.js
@ -0,0 +1,12 @@
+import React from 'react';
+
+const Home = () => {
+  return (
+    <div>
+      <h1>Welcome to the Home Page!</h1>
+      <p>This is the home page content.</p>
+    </div>
+  );
+};
+
+export default Home;
--- a/src/Components/Pages/Treaties.js
+++ b/src/Components/Pages/Treaties.js
@ -0,0 +1,15 @@
+import React from "react";
+import Container from "react-bootstrap/Container";
+import AfricaMap from "../Layout/AfricaMap/AfricaMap";
+import Title from "../Layout/AfricaMap/Title";
+const Treaties = () => {
+  return (
+    <Container fluid className="p-5">
+      <Title></Title>
+
+      <AfricaMap></AfricaMap>
+    </Container>
+  );
+};
+
+export default Treaties;
--- a/src/Components/UI/Button_/Button_.js
+++ b/src/Components/UI/Button_/Button_.js
@ -0,0 +1,11 @@
+import React from 'react'
+
+import classes from './Button_.module.css'
+
+const Button_ = props => {
+  return (
+    <button className={`${classes.card} ${props.className}`}>{props.children}</button>
+  )
+}
+
+export default Button_
--- a/src/Components/UI/Card_/Card_.js
+++ b/src/Components/UI/Card_/Card_.js
@ -0,0 +1,10 @@
+import React from "react";
+import classes from './Card_.module.css'
+
+const Card_ = props => {
+    return (
+        <div className={`${classes.card} ${props.className} `}>{props.children}</div>
+    );
+}
+
+export default Card_;
--- a/src/Components/UI/Card_/Card_.module.css
+++ b/src/Components/UI/Card_/Card_.module.css
@ -0,0 +1,5 @@
+.card{
+    /* background-color: antiquewhite; */
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+    border-radius: 10px;
+}
--- a/src/Data/Africa.geojson
+++ b/src/Data/Africa.geojson
--- a/src/Data/TestAfrica.geojson
+++ b/src/Data/TestAfrica.geojson
--- a/src/Icons/icon1.svg
+++ b/src/Icons/icon1.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 5</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Z"/><line class="cls-1" x1="4.65" y1="4.65" x2="8.29" y2="8.29"/><line class="cls-1" x1="15.81" y1="15.81" x2="24.71" y2="24.71"/><path d="M14.24,13.61v.55a.75.75,0,0,1-.75.71l-1.8.06a.8.8,0,0,1-.77-.76A1.07,1.07,0,0,1,11,13.6a.19.19,0,0,1,.08.13v0a.1.1,0,0,0-.05.08.08.08,0,0,0,.07.08,1.25,1.25,0,0,0,.65,1c.05,0,.08,0,.05-.09v0h.09c.11,0,.06-.17.06-.17l-.27-.82a1.32,1.32,0,0,1,.29-.7l1.57-.17a.71.71,0,0,1,.71.71Zm6.17-4-.28-.32H20l-.18.32c-2.65,0-10.87,0-13.84,0l-.15-.37H5.59l-.17.37H4.93a.23.23,0,0,0-.25.17v1.4l0,.08,0,.4,0,.05s-.14,0-.14.28a.2.2,0,0,0,.17.21,3.2,3.2,0,0,1,.62.14c.58.17.68.78.53,1.67a4.91,4.91,0,0,1-.59,1.58c.05,0,.08,0,.08.05s-.06.07-.14.07l0,.07s.08,0,.08.06-.06.06-.14.06l0,.08s.08,0,.08.06-.07.06-.14.06L5,16.21s.07,0,.07.05-.06.06-.14.06l-.05.09s.06,0,.06.05,0,.06-.13.06l-.06.11s.06,0,.06.05-.06.06-.13.06l-.05.08s0,0,0,.05,0,0-.09.05L4.47,17s0,0,0,0,0,0-.09.05l-.06.12s0,0,0,0,0,0-.08,0l-.06.12s0,0,0,0,0,0-.07.05l-.07.12,0,0s0,0-.07.05L4,17.86s0,0,0,0,0,0,0,0L4,18.05l0,0s0,0-.05,0l-.06.16a0,0,0,0,0,0,0s0,0,0,0,0,.09-.05.13l0,0s0,0,0,0,0,.1,0,.14,0,0,0,0,0,0-.05,0l0,.13s0,0,0,0,0,0,0,0a1.13,1.13,0,0,1,0,.12l0,0,0,.08,0,.14a1.06,1.06,0,0,0,.07.64,1.37,1.37,0,0,0,.64.48h.53v0a.8.8,0,0,0-.25.45c0,.23.38.23.38.23s2.1,0,2.69,0,.54-.38.54-.38l0-.38a2.44,2.44,0,0,0,.34-.21.54.54,0,0,0,.14-.38,3.87,3.87,0,0,0,0-.45A4.55,4.55,0,0,1,9,18.53a.73.73,0,0,1,.4-.42c.1-.06.08-.13.08-.13a.67.67,0,0,1,0-.73.91.91,0,0,1,.41-.51c.21-.1.15-.18.15-.18s-.23-.27.08-.95c.19-.4.41-.52.64-.54a1.61,1.61,0,0,1,.67.23,3.6,3.6,0,0,0,.8.06l2.61-.11.08-.13,0-.15a1.88,1.88,0,0,1-.16-.89,2.46,2.46,0,0,1,.1-.88c.11-.22.55-.39.55-.39s4.34-.15,4.8-.18.47-.3.47-.3.09-.48.1-.63,0-.13,0-.13l0-.06,0,0,.09,0v-.37l0,0,0-.1a3.38,3.38,0,0,0,.07-.48A1.05,1.05,0,0,0,20.9,10a.63.63,0,0,1,0-.11c0-.06-.05,0-.05-.1a.16.16,0,0,0-.15-.16Z"/><path d="M22.94,9a.77.77,0,0,0-1.14-.18l-.06,0a.73.73,0,0,0-.16.89,2.46,2.46,0,0,1,0,2.46.73.73,0,0,0,.16.89l.06,0a.74.74,0,0,0,1.14-.18,4.12,4.12,0,0,0,.52-2A4.19,4.19,0,0,0,22.94,9Z"/><path d="M24.84,7.16A.75.75,0,0,0,23.74,7l0,0a.75.75,0,0,0-.11,1A5,5,0,0,1,24.5,11a5.14,5.14,0,0,1-.91,2.9.74.74,0,0,0,.11,1l0,0a.74.74,0,0,0,1.1-.13,6.57,6.57,0,0,0,0-7.57Z"/></g></g></svg>
--- a/src/Icons/icon10.svg
+++ b/src/Icons/icon10.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.09 16.27"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 14</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M.5.62H7.9V3.93H3.59v2.8H7.65V10H3.59v5.76H.5Z"/><path class="cls-1" d="M9.82.83A18.27,18.27,0,0,1,13.62.5a4.88,4.88,0,0,1,3.66,1.21,5.1,5.1,0,0,1,1.31,3.64,5.81,5.81,0,0,1-1.12,3.74,4.81,4.81,0,0,1-3.84,1.59c-.3,0-.56,0-.75,0v5.14H9.82Zm3.06,6.68a3,3,0,0,0,.7.06,1.9,1.9,0,0,0,2-2.12,1.66,1.66,0,0,0-1.75-1.89,3.38,3.38,0,0,0-.91.09Z"/></g></g></svg>
--- a/src/Icons/icon11.svg
+++ b/src/Icons/icon11.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.45 15.27"><title>Element 15</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M0,.12H6.67V2.39H2.11V6.57H6.35V8.83H2.11v6.44H0Z"/><path d="M8.71.31A14.79,14.79,0,0,1,11.93,0a4.34,4.34,0,0,1,3.4,1.24,5,5,0,0,1,1.12,3.35,5.49,5.49,0,0,1-1,3.43,4.39,4.39,0,0,1-3.64,1.64,3.87,3.87,0,0,1-1-.11v5.72H8.71ZM10.8,7.37a3,3,0,0,0,1,.13c1.57,0,2.53-1,2.53-2.81S13.47,2.13,12,2.13a4.47,4.47,0,0,0-1.22.13Z"/></g></g></svg>
--- a/src/Icons/icon12.svg
+++ b/src/Icons/icon12.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.3 15.27"><title>Element 16</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M0,.12H5.7V1H.81V7H5.29v.9H.81v7.33H0Z"/><path d="M7.9.29A10.59,10.59,0,0,1,10.37,0a3.68,3.68,0,0,1,3,1.28,4.69,4.69,0,0,1,.89,3,5.19,5.19,0,0,1-.8,3A3.94,3.94,0,0,1,10.11,9a3.93,3.93,0,0,1-1.4-.18v6.48H7.9Zm.81,7.56a4.1,4.1,0,0,0,1.47.22c2.06,0,3.3-1.32,3.3-3.72S12.17.9,10.34.9a6.29,6.29,0,0,0-1.63.18Z"/></g></g></svg>
--- a/src/Icons/icon13.svg
+++ b/src/Icons/icon13.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.24 16.42"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 17</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M2.43,15.78.57.63H3.32L3.7,6.12c.12,1.66.18,3.42.32,5.26h0c.17-1.84.41-3.51.63-5.26L5.41.63H7.53l.63,5.49c.19,1.66.36,3.33.5,5.26h0c.12-1.89.24-3.51.36-5.26L9.44.63H12L10.09,15.78H7.32l-.49-3.91c-.18-1.32-.33-3-.48-5h0c-.22,1.89-.41,3.6-.63,5l-.62,3.91Z"/><path class="cls-1" d="M13.4,12.79l-.4,3H10.44L12.88.63H16.1l2.1,15.15H15.64l-.38-3Zm1.65-2.67-.29-2.88c-.08-.85-.24-2.49-.34-3.44h0c-.12,1-.29,2.63-.4,3.44l-.34,2.88Z"/><path class="cls-1" d="M17.42,12.32a3.73,3.73,0,0,0,2,.59,1.27,1.27,0,0,0,1.43-1.35c0-1-.47-1.37-1.48-2.16a5.16,5.16,0,0,1-2.18-4.25c0-2.49,1.24-4.65,3.9-4.65A3.46,3.46,0,0,1,23,1l-.37,3a2.41,2.41,0,0,0-1.51-.52,1.23,1.23,0,0,0-1.32,1.31c0,.65.24,1.07,1.54,2a5.13,5.13,0,0,1,2.12,4.32c0,2.85-1.62,4.74-4.05,4.74a4.43,4.43,0,0,1-2.33-.59Z"/><path class="cls-1" d="M22.7,12.32a3.78,3.78,0,0,0,2,.59,1.28,1.28,0,0,0,1.44-1.35c0-1-.48-1.37-1.49-2.16a5.18,5.18,0,0,1-2.17-4.25c0-2.49,1.23-4.65,3.9-4.65a3.46,3.46,0,0,1,1.9.54L27.9,4a2.38,2.38,0,0,0-1.5-.52,1.23,1.23,0,0,0-1.32,1.31c0,.65.24,1.07,1.54,2a5.13,5.13,0,0,1,2.12,4.32c0,2.85-1.62,4.74-4,4.74a4.4,4.4,0,0,1-2.33-.59Z"/></g></g></svg>
--- a/src/Icons/icon14.svg
+++ b/src/Icons/icon14.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.76 15.42"><title>Element 18</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.08,15.28,0,.13H1.89l.75,6.61c.2,1.81.33,3.54.48,5.39h0c.15-1.89.41-3.54.66-5.41L4.77.13h1.5l.9,6.51c.23,1.74.45,3.44.6,5.49h.05c.16-2.07.33-3.71.51-5.45L9.07.13h1.79L8.73,15.28H6.87L6,9.24c-.21-1.5-.4-3.21-.54-5h0C5.24,6,5,7.7,4.79,9.28l-.94,6Z"/><path d="M11.59,11.34,11,15.28H9.2L11.76.13h2.13l2.39,15.15H14.49l-.61-3.94Zm2.1-1.88L13.21,6c-.14-1-.3-2.39-.42-3.45h0C12.61,3.6,12.44,5,12.3,6l-.5,3.47Z"/><path d="M15.66,12.72a3.15,3.15,0,0,0,1.78.61c1.13,0,1.74-.87,1.74-2.11a3.48,3.48,0,0,0-1.51-2.76A5.69,5.69,0,0,1,15.5,4.24C15.5,1.87,16.72,0,18.88,0A2.89,2.89,0,0,1,20.6.55l-.34,2.06a2.17,2.17,0,0,0-1.43-.52A1.65,1.65,0,0,0,17.3,3.93c0,1.17.46,1.71,1.64,2.7A5.47,5.47,0,0,1,21,11c0,2.71-1.49,4.44-3.55,4.44a3.6,3.6,0,0,1-2.09-.63Z"/><path d="M20.43,12.72a3.2,3.2,0,0,0,1.78.61c1.13,0,1.74-.87,1.74-2.11a3.45,3.45,0,0,0-1.51-2.76,5.69,5.69,0,0,1-2.17-4.22C20.27,1.87,21.5,0,23.65,0a2.89,2.89,0,0,1,1.72.55L25,2.61a2.16,2.16,0,0,0-1.42-.52,1.64,1.64,0,0,0-1.53,1.84c0,1.17.46,1.71,1.63,2.7A5.44,5.44,0,0,1,25.76,11c0,2.71-1.49,4.44-3.55,4.44a3.62,3.62,0,0,1-2.09-.63Z"/></g></g></svg>
--- a/src/Icons/icon15.svg
+++ b/src/Icons/icon15.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.68 15.56"><title>Element 19</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.84,15.35,0,.21H.81L2.35,8.62c.36,2,.68,3.74.88,5.3h0c.17-1.58.54-3.33,1-5.33L5.92.21h.75L8.25,8.49c.34,1.84.69,3.69.88,5.43h0c.25-1.84.58-3.5.95-5.36L11.8.21h.81L9.48,15.35H8.74L7.11,6.59C6.72,4.52,6.45,3,6.3,1.51h0c-.17,1.47-.46,3-.91,5.1L3.57,15.35Z"/><path d="M12.67,10.08l-1.28,5.27h-.8L14.33.21h.76l3.74,15.14H18l-1.29-5.27Zm3.82-.88-1.2-4.82c-.26-1.09-.41-1.94-.58-2.91h-.05c-.15,1-.33,1.88-.56,2.88L12.89,9.2Z"/><path d="M18.5,13.77a3.43,3.43,0,0,0,2.21.89c1.6,0,2.59-1.27,2.59-3.14A3.81,3.81,0,0,0,21.2,8a4.59,4.59,0,0,1-2.73-4.18C18.47,1.58,19.81,0,21.63,0a3.15,3.15,0,0,1,2.05.67l-.31.88A2.76,2.76,0,0,0,21.55.89a2.42,2.42,0,0,0-2.29,2.69c0,1.74.74,2.54,2.2,3.45a4.78,4.78,0,0,1,2.63,4.4c0,2.29-1.23,4.13-3.42,4.13a3.85,3.85,0,0,1-2.47-.92Z"/><path d="M24.09,13.77a3.46,3.46,0,0,0,2.21.89c1.6,0,2.59-1.27,2.59-3.14A3.79,3.79,0,0,0,26.79,8a4.6,4.6,0,0,1-2.72-4.18C24.07,1.58,25.41,0,27.22,0a3.15,3.15,0,0,1,2.05.67L29,1.55A2.76,2.76,0,0,0,27.14.89a2.42,2.42,0,0,0-2.29,2.69c0,1.74.75,2.54,2.21,3.45a4.77,4.77,0,0,1,2.62,4.4c0,2.29-1.23,4.13-3.42,4.13a3.81,3.81,0,0,1-2.46-.92Z"/></g></g></svg>
--- a/src/Icons/icon16.svg
+++ b/src/Icons/icon16.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.05 15.15"><title>Element 20</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M3.09,0V15.15H0V0Z"/><path d="M7.45,3.41H4.52V0h9V3.41h-3V15.15H7.45Z"/><path d="M18.05,0V15.15H15V0Z"/></g></g></svg>
--- a/src/Icons/icon17.svg
+++ b/src/Icons/icon17.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.93 16.15"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 21</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.47,12.14l-.65,3.51H.62L4,.5H8.08l3.44,15.15H8.18l-.73-3.51ZM7,9.14,6.49,6.42c-.18-.86-.39-2.09-.57-3h0c-.17.9-.34,2.14-.51,3L4.88,9.14Z"/><path class="cls-1" d="M12.05,3.91H9.11V.5h9V3.91h-3V15.65H12.05Z"/><path class="cls-1" d="M20.34,3.91H17.41V.5h9V3.91h-3V15.65H20.34Z"/></g></g></svg>
--- a/src/Icons/icon18.svg
+++ b/src/Icons/icon18.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24.04 15.15"><title>Element 22</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M3.16,10.87l-1,4.28H0L3.7,0H6.38l3.75,15.15H7.87l-1-4.28ZM6.48,8.78,5.57,5c-.22-.94-.42-2-.59-2.84h0C4.78,3.08,4.6,4.13,4.4,5L3.5,8.78Z"/><path d="M10.85,2.33H7.55V0h8.73V2.33H13V15.15h-2.1Z"/><path d="M18.61,2.33H15.32V0H24V2.33H20.72V15.15H18.61Z"/></g></g></svg>
--- a/src/Icons/icon19.svg
+++ b/src/Icons/icon19.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.73 15.15"><title>Element 23</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.26,9.85.83,15.15H0L4.17,0H5L9.11,15.15H8.27L6.82,9.85ZM6.57,9,5.17,3.89c-.28-1.05-.44-1.81-.6-2.67H4.52c-.16.88-.34,1.67-.59,2.62L2.51,9Z"/><path d="M10.11.9H6.35V0h8.33V.9H10.93V15.15h-.82Z"/><path d="M17.16.9H13.4V0h8.33V.9H18V15.15h-.81Z"/></g></g></svg>
--- a/src/Icons/icon2.svg
+++ b/src/Icons/icon2.svg
--- a/src/Icons/icon20.svg
+++ b/src/Icons/icon20.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33.76 15.4"><title>Element 24</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M2.65.07V9.78c0,2,.41,2.58.89,2.58s.89-.45.89-2.58V.07H7.08V9.15C7.08,13,6,15.4,3.56,15.4.85,15.4,0,12.9,0,9.1v-9Z"/><path d="M7.23,15.22V.07H9.65l1.62,5.44c.29,1,.84,2.87,1.13,4h0c-.06-1.23-.25-4.18-.25-7V.07h2.31V15.22H12.08l-1.56-5.11C10.16,9,9.63,7,9.42,5.82h0c0,1.31.15,3.82.15,6.79v2.61Z"/><path d="M14.73.29A10.54,10.54,0,0,1,17.26,0a4,4,0,0,1,3.38,1.19,5.21,5.21,0,0,1,1.05,3.4,6.21,6.21,0,0,1-1.1,3.88,3.75,3.75,0,0,1-2.84,1.35h-.39v5.4H14.73ZM17.36,7a1.09,1.09,0,0,0,.31,0c1.06,0,1.4-1,1.4-2.14s-.38-2.11-1.23-2.11a1,1,0,0,0-.48.11Z"/><path d="M27.21,9.64c0,4.74-2.12,5.76-3.38,5.76-2.23,0-3.43-2.21-3.43-5.67C20.4,5.8,22.08,4,23.84,4,26,4,27.21,6.32,27.21,9.64ZM23,9.67c0,1.91.22,3.12.86,3.12s.72-1.55.72-3.12-.18-3.08-.76-3.08S23,8.2,23,9.67Z"/><path d="M29,12.23l-.4,3H26L28.44.07h3.22l2.1,15.15H31.2l-.38-3Zm1.66-2.68-.29-2.87c-.09-.86-.24-2.5-.35-3.44h0c-.12.94-.29,2.63-.39,3.44l-.35,2.87Z"/></g></g></svg>
--- a/src/Icons/icon21.svg
+++ b/src/Icons/icon21.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 25</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M25.48,9.85h-2v-2a.55.55,0,0,0-.55-.55H20.86v-2a.55.55,0,0,0-.55-.55H6.45a.55.55,0,0,0-.55.55V20.47a.55.55,0,0,0,.55.55h2v2a.55.55,0,0,0,.55.55h2.05v2a.56.56,0,0,0,.55.56h9.15a.55.55,0,0,0,.37-.16l4.68-4.22a.51.51,0,0,0,.18-.43v-11A.51.51,0,0,0,25.48,9.85ZM7,5.78H19.76V17.41l-2.85,2.44H7ZM9.6,21h7.47a.75.75,0,0,0,.36-.13l3.22-2.75a.57.57,0,0,0,.18-.43V8.38H22.3V19.27l-3.58,3.18H9.6Zm15.3.15-4.31,3.91H12.2V23.59h6.73a.57.57,0,0,0,.37-.16L23.25,20a.58.58,0,0,0,.18-.43V11H24.9Z"/><path d="M9.39,9h8A.54.54,0,0,0,18,8.47a.55.55,0,0,0-.55-.55h-8a.55.55,0,0,0-.55.55A.52.52,0,0,0,9.39,9Z"/><path d="M9.39,11.69h8a.56.56,0,0,0,0-1.11h-8a.55.55,0,0,0-.55.56A.51.51,0,0,0,9.39,11.69Z"/><path d="M17.37,13.25H15.23a.55.55,0,0,0-.55.55.55.55,0,0,0,.55.55h2.14a.55.55,0,0,0,.55-.55A.52.52,0,0,0,17.37,13.25Z"/><path d="M17.37,15.91H15.23a.55.55,0,0,0-.55.55.55.55,0,0,0,.55.55h2.14a.55.55,0,0,0,.55-.55A.52.52,0,0,0,17.37,15.91Z"/><path d="M13.3,18.42a.56.56,0,0,0,.56-.55v-4a.55.55,0,0,0-.56-.55h-4a.54.54,0,0,0-.55.55v4a.55.55,0,0,0,.55.55Zm-3.45-4h2.87v2.9H9.85Z"/><path class="cls-1" d="M24.71,4.65A14.18,14.18,0,0,0,4.65,24.71,14.18,14.18,0,0,0,24.71,4.65Z"/></g></g></svg>
--- a/src/Icons/icon22.svg
+++ b/src/Icons/icon22.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 26</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M21.3,23.19a2.18,2.18,0,0,1-1.51-.64.57.57,0,1,1,.8-.8h0a1.3,1.3,0,0,0,.47.27,1,1,0,0,0,1.15-1.14,1.24,1.24,0,0,0-.28-.48.57.57,0,1,1,.8-.8,2.12,2.12,0,0,1-1.43,3.59Z"/><path d="M18.08,24.26a2.22,2.22,0,0,1-1.52-.64.57.57,0,0,1,.8-.8h0a1.4,1.4,0,0,0,.48.28A1,1,0,0,0,19,22a1.4,1.4,0,0,0-.28-.48.57.57,0,1,1,.8-.8,2,2,0,0,1,0,2.95A2,2,0,0,1,18.08,24.26Z"/><path d="M14.87,25.32a2.29,2.29,0,0,1-1.51-.61h0l-1.08-1.08a.57.57,0,0,1,0-.8h0a1.25,1.25,0,0,0,.28-.47.81.81,0,0,0-.28-.88.8.8,0,0,0-.87-.27,1.34,1.34,0,0,0-.48.28.57.57,0,0,1-.8,0,.58.58,0,0,1,0-.81,2,2,0,0,1,2.94,0,2,2,0,0,1,.35,2.5l.72.71a1.26,1.26,0,0,0,.5.27.83.83,0,0,0,.86-.25.81.81,0,0,0,.24-.89,1.48,1.48,0,0,0-.26-.48.57.57,0,1,1,.84-.76,2.08,2.08,0,0,1,0,2.93A2,2,0,0,1,14.87,25.32Z"/><path d="M11.55,24.26a2,2,0,0,1-1.43-.64,1.91,1.91,0,0,1-.54-2.05,2.43,2.43,0,0,1,.54-.9.57.57,0,0,1,.8.8h0a1.34,1.34,0,0,0-.28.48.81.81,0,0,0,.28.87.81.81,0,0,0,.87.28,1.53,1.53,0,0,0,.48-.28.57.57,0,0,1,.8,0,.56.56,0,0,1,0,.8A2.18,2.18,0,0,1,11.55,24.26Z"/><path d="M23.45,21a2.22,2.22,0,0,1-1.52-.64.57.57,0,1,1,.8-.8,1.35,1.35,0,0,0,.48.27.8.8,0,0,0,.87-.27.81.81,0,0,0,.28-.87,1.4,1.4,0,0,0-.28-.48L23,17.19l0,0L17.8,12H14l-.91.91C12,14,11,14.44,10,14.25a4.22,4.22,0,0,1-2-1.37.56.56,0,0,1-.17-.4.54.54,0,0,1,.17-.4L11.2,8.86c2.05-2,6.51-1.49,7.72-1.29l1.94-1.94a.58.58,0,0,1,.8,0L27,11a.57.57,0,0,1,0,.8L25,13.86l-.92,2.76.82.83a2.44,2.44,0,0,1,.54.89,1.92,1.92,0,0,1-.54,2.06A2,2,0,0,1,23.45,21Zm-9.71-10.2H18a.59.59,0,0,1,.4.16l4.72,4.73L24,13.37a.56.56,0,0,1,.13-.22l1.75-1.75L21.26,6.83,19.51,8.58a.59.59,0,0,1-.51.16c-.05,0-5.1-1-7,.92L9.17,12.48a2.42,2.42,0,0,0,1.06.66c.55.11,1.21-.24,2-1.06L13.34,11A.59.59,0,0,1,13.74,10.84Z"/><path d="M6.18,21a2,2,0,0,1-1.44-.64,2,2,0,0,1,0-2.95L6.89,15.3a2.09,2.09,0,1,1,3,2.95.57.57,0,1,1-.8-.8H9A1.4,1.4,0,0,0,9.32,17,.81.81,0,0,0,9,16.1a.8.8,0,0,0-.87-.27,1.12,1.12,0,0,0-.48.28L5.54,18.25h0a1.29,1.29,0,0,0-.27.48.8.8,0,0,0,.27.87.81.81,0,0,0,.88.27,1.54,1.54,0,0,0,.48-.27.56.56,0,0,1,.79.8A2.18,2.18,0,0,1,6.18,21Z"/><path d="M8.33,23.19a2,2,0,0,1-1.44-.64,2,2,0,0,1-.54-2.06,2.6,2.6,0,0,1,.54-.89L9,17.45a2.36,2.36,0,0,1,1.52-.64A2.12,2.12,0,0,1,12,20.4L9.84,22.55A2.32,2.32,0,0,1,8.33,23.19ZM7.69,20.4a1.29,1.29,0,0,0-.27.48.8.8,0,0,0,.27.87.9.9,0,0,0,.64.31A1.2,1.2,0,0,0,9,21.75l2.15-2.15h0a1.4,1.4,0,0,0,.28-.48.83.83,0,0,0-.28-.87.9.9,0,0,0-.63-.31,1.25,1.25,0,0,0-.72.31L7.69,20.4Z"/><path d="M17,23.79a.58.58,0,0,1-.4-.17l-2.15-2.15a.57.57,0,0,1,.8-.8l2.15,2.15a.57.57,0,0,1,0,.8A.56.56,0,0,1,17,23.79Z"/><path d="M20.19,22.71a.55.55,0,0,1-.4-.16l-3.23-3.22a.57.57,0,0,1,0-.8.55.55,0,0,1,.8,0l3.23,3.22a.56.56,0,0,1-.4,1Z"/><path d="M22.33,20.57a.6.6,0,0,1-.4-.17l-3.22-3.22a.57.57,0,0,1,.8-.8l3.22,3.22a.55.55,0,0,1,0,.8A.56.56,0,0,1,22.33,20.57Z"/><path d="M6.22,17.34A.57.57,0,0,1,5.68,17l-1-3.1L2.59,11.8a.58.58,0,0,1-.16-.4A.56.56,0,0,1,2.6,11L8,5.63a.57.57,0,0,1,.8,0l1.94,1.94a16.83,16.83,0,0,1,4.15-.16.57.57,0,0,1,.5.63.56.56,0,0,1-.62.5,15.08,15.08,0,0,0-4.11.2.61.61,0,0,1-.51-.16L8.37,6.83,3.79,11.4l1.75,1.75a.59.59,0,0,1,.14.22L6.75,16.6a.56.56,0,0,1-.53.74Z"/><path class="cls-1" d="M24.71,4.65A14.18,14.18,0,0,0,4.65,24.71,14.18,14.18,0,0,0,24.71,4.65Z"/></g></g></svg>
--- a/src/Icons/icon23.svg
+++ b/src/Icons/icon23.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}</style></defs><title>Element 27</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.21,4.15A14.18,14.18,0,0,0,4.15,24.21a14.2,14.2,0,0,0,20.06,0,14.2,14.2,0,0,0,0-20.06Z"/><path d="M24.76,9.59h-2v-2A.55.55,0,0,0,22.19,7H20.14V5a.55.55,0,0,0-.55-.55H5.73A.55.55,0,0,0,5.18,5V20.21a.55.55,0,0,0,.55.55h2v2a.55.55,0,0,0,.55.55h2v2a.55.55,0,0,0,.55.55h9.15a.49.49,0,0,0,.37-.16l4.68-4.22a.5.5,0,0,0,.18-.42v-11A.51.51,0,0,0,24.76,9.59ZM6.32,5.52H19V17.15L16.2,19.6H6.32ZM8.89,20.73h7.46a.81.81,0,0,0,.37-.12l3.21-2.76a.55.55,0,0,0,.18-.43V8.12h1.47V19L18,22.2H8.89Zm15.29.15L19.87,24.8H11.49V23.33h6.73a.55.55,0,0,0,.36-.15l4-3.49a.57.57,0,0,0,.18-.43V10.69h1.47Z"/><path d="M8.67,8.77h8a.55.55,0,0,0,.55-.55.55.55,0,0,0-.55-.55h-8a.55.55,0,0,0-.55.55A.53.53,0,0,0,8.67,8.77Z"/><path d="M8.67,11.43h8a.55.55,0,0,0,.55-.55.55.55,0,0,0-.55-.55h-8a.55.55,0,0,0-.55.55A.51.51,0,0,0,8.67,11.43Z"/><path d="M16.66,13H14.51a.55.55,0,0,0,0,1.1h2.15a.55.55,0,0,0,.55-.55A.53.53,0,0,0,16.66,13Z"/><path d="M16.66,15.65H14.51a.55.55,0,0,0,0,1.1h2.15a.55.55,0,0,0,.55-.55A.53.53,0,0,0,16.66,15.65Z"/><path d="M12.59,18.16a.55.55,0,0,0,.55-.55v-4a.55.55,0,0,0-.55-.55h-4a.54.54,0,0,0-.55.55v4a.55.55,0,0,0,.55.55Zm-3.46-4H12V17H9.13Z"/></g></g></svg>
--- a/src/Icons/icon24.png
+++ b/src/Icons/icon24.png
--- a/src/Icons/icon24.svg
+++ b/src/Icons/icon24.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}</style></defs><title>Element 28</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.21,4.15A14.18,14.18,0,0,0,4.15,24.21a14.2,14.2,0,0,0,20.06,0,14.2,14.2,0,0,0,0-20.06Z"/><path d="M6.33,3.29A2.09,2.09,0,0,0,4.25,5.37v1a.38.38,0,0,0,.38.37H18.24a.37.37,0,0,0,.37-.37v-1a1.33,1.33,0,0,1,2.65,0V21.24a2.08,2.08,0,0,0,4.16,0,.38.38,0,0,0-.38-.38H22.77a.38.38,0,1,0,0,.76H24.6A1.32,1.32,0,0,1,22,21.24V5.37a2.09,2.09,0,0,0-2.08-2.08Zm0,.76h12a2,2,0,0,0-.48,1.32v.56H5V5.37A1.31,1.31,0,0,1,6.33,4.05Z"/><path d="M6.94,6.32V21.24A2.08,2.08,0,0,0,9,23.32h2.41v-.75H9A1.32,1.32,0,0,1,7.7,21.24V6.32Z"/><path d="M16.16,8.59a.37.37,0,0,0-.38.37.38.38,0,0,0,.37.38H19A.37.37,0,0,0,19.37,9,.37.37,0,0,0,19,8.59H16.16Z"/><path d="M9.93,8.59A.37.37,0,0,0,9.55,9a.38.38,0,0,0,.37.38h1.14A.37.37,0,0,0,11.44,9a.38.38,0,0,0-.37-.38H9.93Z"/><path d="M12.39,8.59a.38.38,0,1,0,0,.75h2.45a.38.38,0,1,0,0-.75H12.39Z"/><path d="M13.9,11.61a.39.39,0,0,0-.39.37.4.4,0,0,0,.38.39H19a.38.38,0,0,0,.38-.38.37.37,0,0,0-.37-.38H13.9Z"/><path d="M9.93,11.61a.37.37,0,0,0-.38.37.38.38,0,0,0,.37.39h2.64A.4.4,0,0,0,13,12a.38.38,0,0,0-.38-.38H9.93Z"/><path d="M14.46,14.6a3.59,3.59,0,1,0,3.59,3.59A3.6,3.6,0,0,0,14.46,14.6Zm0,.76a2.84,2.84,0,1,1-2.84,2.83A2.82,2.82,0,0,1,14.46,15.36Z"/><path d="M12.23,20.68v4.91a.38.38,0,0,0,.38.38.35.35,0,0,0,.19-.06l1.7-1,1.69,1a.38.38,0,0,0,.52-.13.32.32,0,0,0,.05-.19V20.68H16v4.24l-1.32-.79a.39.39,0,0,0-.39,0L13,24.92V20.68Z"/><path d="M17.48,22.57v.76h5.86v-.76Z"/></g></g></svg>
--- a/src/Icons/icon25.svg
+++ b/src/Icons/icon25.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}</style></defs><title>Element 29</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.21,4.15A14.18,14.18,0,0,0,4.15,24.21a14.2,14.2,0,0,0,20.06,0,14.2,14.2,0,0,0,0-20.06Z"/><path d="M21.23,23.05a2.24,2.24,0,0,1-1.51-.64.57.57,0,1,1,.8-.8h0a1.29,1.29,0,0,0,.48.27,1,1,0,0,0,1.14-1.14,1.28,1.28,0,0,0-.28-.49.55.55,0,0,1,0-.79.57.57,0,0,1,.8,0,2.12,2.12,0,0,1-1.44,3.59Z"/><path d="M18,24.12a2.18,2.18,0,0,1-1.51-.64.55.55,0,0,1,0-.8.57.57,0,0,1,.8,0h0a1.42,1.42,0,0,0,.47.28.81.81,0,0,0,.87-.28.79.79,0,0,0,.28-.87,1.24,1.24,0,0,0-.28-.48.57.57,0,1,1,.8-.8,2,2,0,0,1,0,2.95A2,2,0,0,1,18,24.12Z"/><path d="M14.81,25.17a2.33,2.33,0,0,1-1.52-.6h0L12.2,23.48a.57.57,0,0,1,0-.8h0a1.29,1.29,0,0,0,.27-.48.8.8,0,0,0-.27-.87.8.8,0,0,0-.87-.27,1.12,1.12,0,0,0-.48.28.56.56,0,0,1-.8,0,.57.57,0,0,1,0-.8,2,2,0,0,1,2.95,0,2,2,0,0,1,.34,2.5l.72.71a1.4,1.4,0,0,0,.5.27.82.82,0,0,0,.86-.25.84.84,0,0,0,.25-.89,1.29,1.29,0,0,0-.27-.48.57.57,0,1,1,.84-.76,2.08,2.08,0,0,1,0,2.93A1.94,1.94,0,0,1,14.81,25.17Z"/><path d="M11.49,24.12a2,2,0,0,1-1.44-.64,1.92,1.92,0,0,1-.54-2.05,2.43,2.43,0,0,1,.54-.9.57.57,0,0,1,.8.8h0a1.4,1.4,0,0,0-.28.48.81.81,0,0,0,.28.87.81.81,0,0,0,.87.28,1.4,1.4,0,0,0,.48-.28.57.57,0,1,1,.8.8A2.22,2.22,0,0,1,11.49,24.12Z"/><path d="M23.38,20.9a2.18,2.18,0,0,1-1.51-.64.57.57,0,0,1,0-.8.56.56,0,0,1,.79,0,1.35,1.35,0,0,0,.48.27.81.81,0,0,0,.88-.27.8.8,0,0,0,.27-.87,1.24,1.24,0,0,0-.28-.48L23,17h0l-5.19-5.2H13.91l-.91.91c-1.11,1.11-2.11,1.55-3.06,1.37a4.22,4.22,0,0,1-2-1.37.56.56,0,0,1-.17-.4.54.54,0,0,1,.17-.4s1.1-1.1,3.23-3.22,6.51-1.49,7.72-1.29l1.94-1.94a.55.55,0,0,1,.4-.16.54.54,0,0,1,.4.16L27,10.86a.57.57,0,0,1,0,.8l-2.06,2.06L24,16.48l.83.83a2.78,2.78,0,0,1,.54.89,2,2,0,0,1-.54,2.06A2,2,0,0,1,23.38,20.9ZM13.67,10.7H18a.59.59,0,0,1,.4.16l4.72,4.73.79-2.36A.52.52,0,0,1,24,13l1.75-1.75L21.19,6.69,19.44,8.44a.56.56,0,0,1-.51.15c-.05,0-5.09-1-7,.93L9.11,12.33a2.28,2.28,0,0,0,1.05.67c.55.11,1.22-.24,2-1.06l1.07-1.08A.59.59,0,0,1,13.67,10.7Z"/><path d="M6.11,20.9a2,2,0,0,1-1.43-.64,2,2,0,0,1,0-3l2.15-2.15a2,2,0,0,1,2.94,0,2,2,0,0,1,0,2.95.57.57,0,1,1-.8-.8H9a1.24,1.24,0,0,0,.28-.48A.81.81,0,0,0,9,16a.8.8,0,0,0-.87-.27,1.4,1.4,0,0,0-.48.27L5.48,18.11h0a1.24,1.24,0,0,0-.28.48.81.81,0,0,0,.28.87.8.8,0,0,0,.87.27,1.29,1.29,0,0,0,.48-.27.56.56,0,0,1,.8,0,.57.57,0,0,1,0,.8A2.22,2.22,0,0,1,6.11,20.9Z"/><path d="M8.26,23.05a2,2,0,0,1-1.43-.64,1.93,1.93,0,0,1-.54-2.06,2.44,2.44,0,0,1,.54-.89L9,17.31a2.31,2.31,0,0,1,1.52-.64,2.12,2.12,0,0,1,1.43,3.59L9.77,22.41A2.29,2.29,0,0,1,8.26,23.05Zm-.63-2.79a1.24,1.24,0,0,0-.28.48.79.79,0,0,0,.28.87.88.88,0,0,0,.63.31A1.2,1.2,0,0,0,9,21.61l2.15-2.15h0A1.4,1.4,0,0,0,11.4,19a.81.81,0,0,0-.28-.87.88.88,0,0,0-.63-.31,1.29,1.29,0,0,0-.72.31L7.63,20.26Z"/><path d="M16.9,23.65a.56.56,0,0,1-.4-.17l-2.15-2.15a.57.57,0,0,1,.8-.8l2.15,2.15a.57.57,0,0,1,0,.8A.6.6,0,0,1,16.9,23.65Z"/><path d="M20.12,22.57a.55.55,0,0,1-.4-.16L16.5,19.18a.55.55,0,0,1,0-.8.57.57,0,0,1,.8,0l3.22,3.23a.56.56,0,0,1-.4,1Z"/><path d="M22.27,20.42a.55.55,0,0,1-.4-.16L18.64,17a.57.57,0,0,1,.8-.8l3.23,3.22a.56.56,0,0,1-.4,1Z"/><path d="M6.15,17.2a.57.57,0,0,1-.54-.39l-1-3.09L2.53,11.66a.54.54,0,0,1-.17-.4.56.56,0,0,1,.17-.4L7.91,5.49a.57.57,0,0,1,.8,0l1.94,1.94a16.74,16.74,0,0,1,4.14-.16.56.56,0,0,1,.5.62.57.57,0,0,1-.62.51,15.68,15.68,0,0,0-4.1.19.58.58,0,0,1-.52-.15L8.3,6.69,3.73,11.26,5.48,13a.5.5,0,0,1,.13.22l1.08,3.23a.56.56,0,0,1-.36.71A.57.57,0,0,1,6.15,17.2Z"/></g></g></svg>
--- a/src/Icons/icon26.svg
+++ b/src/Icons/icon26.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 30</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M24.71,4.65A14.18,14.18,0,0,0,4.65,24.71,14.18,14.18,0,0,0,24.71,4.65Z"/><path d="M6.7,4.12A2.08,2.08,0,0,0,4.62,6.2v.94A.38.38,0,0,0,5,7.52H18.6A.38.38,0,0,0,19,7.14V6.2a1.33,1.33,0,1,1,2.65,0V22.07a2.08,2.08,0,1,0,4.16,0,.39.39,0,0,0-.38-.38H23.14a.38.38,0,1,0,0,.76H25a1.32,1.32,0,0,1-2.59-.38V6.2a2.08,2.08,0,0,0-2.07-2.08Zm0,.75h12a2,2,0,0,0-.48,1.32v.57H5.38V6.19A1.32,1.32,0,0,1,6.7,4.87Z"/><path d="M7.31,7.14V22.07a2.09,2.09,0,0,0,2.08,2.08H11.8v-.76H9.39a1.31,1.31,0,0,1-1.32-1.32V7.14Z"/><path d="M16.53,9.41a.38.38,0,0,0,0,.76h2.83a.38.38,0,1,0,0-.76H16.53Z"/><path d="M10.3,9.41a.38.38,0,0,0,0,.76h1.13a.38.38,0,1,0,0-.76H10.3Z"/><path d="M12.75,9.41a.38.38,0,0,0,0,.76H15.2a.38.38,0,0,0,.38-.37.39.39,0,0,0-.37-.39H12.75Z"/><path d="M14.26,12.44a.37.37,0,0,0-.38.37.38.38,0,0,0,.38.38h5.09a.39.39,0,0,0,.39-.37.38.38,0,0,0-.38-.38h-5.1Z"/><path d="M10.3,12.44a.38.38,0,1,0,0,.75h2.64a.37.37,0,0,0,.38-.37.37.37,0,0,0-.37-.38H10.3Z"/><path d="M14.83,15.43A3.59,3.59,0,1,0,18.42,19,3.59,3.59,0,0,0,14.83,15.43Zm0,.76A2.83,2.83,0,1,1,12,19,2.82,2.82,0,0,1,14.83,16.19Z"/><path d="M12.59,21.5v4.91a.38.38,0,0,0,.38.38.46.46,0,0,0,.2-.05l1.69-1,1.7,1a.38.38,0,0,0,.52-.13.46.46,0,0,0,.05-.2V21.5h-.76v4.25L15.06,25a.35.35,0,0,0-.39,0l-1.32.79V21.5Z"/><path d="M17.85,23.4v.75h5.86V23.4Z"/></g></g></svg>
--- a/src/Icons/icon3.svg
+++ b/src/Icons/icon3.svg
--- a/src/Icons/icon4.svg
+++ b/src/Icons/icon4.svg
--- a/src/Icons/icon5.svg
+++ b/src/Icons/icon5.svg
--- a/src/Icons/icon6.svg
+++ b/src/Icons/icon6.svg
--- a/src/Icons/icon7.svg
+++ b/src/Icons/icon7.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#d7dfe4;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 11</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.15,4.15A14.18,14.18,0,0,1,24.21,24.21,14.18,14.18,0,0,1,4.15,4.15Z"/><path d="M17.31,13.65v.7a1,1,0,0,1-1,.92L14,15.34a1,1,0,0,1-1-1,1.51,1.51,0,0,1,.1-.75.28.28,0,0,1,.11.18v0a.1.1,0,0,0-.07.1.11.11,0,0,0,.09.1,1.64,1.64,0,0,0,.84,1.24c.06,0,.11-.06.07-.12l0,0a.24.24,0,0,0,.12,0c.13,0,.08-.22.08-.22L14,13.85a1.62,1.62,0,0,1,.39-.9l2-.22a.92.92,0,0,1,.92.92Zm8-5.14L24.9,8.1h-.15l-.22.41H6.69L6.5,8H6.16L6,8.51H5.32A.32.32,0,0,0,5,8.74v1.8l.06.11,0,.51,0,.06s-.18,0-.18.37a.24.24,0,0,0,.21.26,4,4,0,0,1,.81.19c.74.21.87,1,.67,2.14a6.24,6.24,0,0,1-.75,2c.06,0,.1,0,.1.07s-.08.08-.18.08l-.06.1c.06,0,.1,0,.1.07s-.08.09-.18.09l-.07.09c.06,0,.1.05.1.08s-.08.08-.18.08L5.37,17s.08,0,.08.07-.07.07-.17.07l-.07.12s.08,0,.08.07-.07.07-.16.07L5,17.54s.08,0,.08.06-.07.08-.16.08l-.06.1s0,0,0,.06-.06.06-.13.07l-.09.16s0,0,0,0,0,.06-.12.06l-.08.16s0,0,0,0,0,.05-.1.06l-.08.16,0,0s0,.05-.1.06l-.08.16s0,0,0,0,0,.05-.09.06l-.08.16a.05.05,0,0,1,0,0s0,0-.07.05l-.08.17a0,0,0,0,1,0,0s0,0-.06.05l-.09.2,0,0s0,0-.05,0l-.06.18s0,0,0,0,0,0,0,0l-.06.18s0,0,0,0,0,0-.06,0,0,.12,0,.16a.05.05,0,0,1,0,0s0,0,0,0l0,.14,0,.06,0,.1,0,.18a1.4,1.4,0,0,0,.09.83,1.81,1.81,0,0,0,.83.61H5.2v0a1,1,0,0,0-.31.58c0,.3.48.29.48.29s2.71,0,3.47,0,.69-.48.69-.48l.06-.5a3.23,3.23,0,0,0,.45-.26.78.78,0,0,0,.18-.5c0-.18,0-.45,0-.57a6.11,6.11,0,0,1,.36-1,1,1,0,0,1,.51-.54c.13-.08.11-.17.11-.17a.83.83,0,0,1,0-.93,1.21,1.21,0,0,1,.53-.67c.27-.12.19-.22.19-.22s-.3-.35.1-1.23c.25-.52.53-.67.83-.69a1.94,1.94,0,0,1,.86.29,4.43,4.43,0,0,0,1,.07l3.36-.14.11-.16-.08-.19A2.49,2.49,0,0,1,18,14.25a3.16,3.16,0,0,1,.12-1.13c.14-.29.71-.51.71-.51s5.59-.19,6.19-.23.6-.39.6-.39.11-.61.13-.8,0-.18,0-.18l0-.07,0,0,.12,0v-.48l0,0,0-.12A3.55,3.55,0,0,0,26,9.61,1.26,1.26,0,0,0,25.89,9a.49.49,0,0,1,0-.14c0-.07-.06,0-.06-.13a.2.2,0,0,0-.2-.2Z"/><line class="cls-2" x1="4.3" y1="4.01" x2="7.64" y2="7.35"/><line class="cls-2" x1="17.18" y1="16.88" x2="24.35" y2="24.06"/></g></g></svg>
--- a/src/Icons/icon8.svg
+++ b/src/Icons/icon8.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1,.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}.cls-2{stroke-width:0.75px;}</style></defs><title>Element 12</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Z"/><path class="cls-2" d="M17.81,14.15v.7a1,1,0,0,1-1,.92l-2.32.07a1,1,0,0,1-1-1,1.51,1.51,0,0,1,.1-.75.28.28,0,0,1,.11.18v0a.1.1,0,0,0-.07.1.11.11,0,0,0,.09.1,1.64,1.64,0,0,0,.84,1.24c.06,0,.11-.06.07-.12l0,0a.24.24,0,0,0,.12,0c.13,0,.08-.22.08-.22l-.36-1.05a1.62,1.62,0,0,1,.39-.9l2-.22a.92.92,0,0,1,.92.92Zm8-5.14L25.4,8.6h-.15L25,9H7.19L7,8.53H6.66L6.45,9H5.82a.32.32,0,0,0-.33.23V11l.06.11,0,.51,0,.06s-.18,0-.18.37a.24.24,0,0,0,.21.26,4,4,0,0,1,.81.19c.74.21.87,1,.67,2.14a6.24,6.24,0,0,1-.75,2c.06,0,.1,0,.1.07s-.08.08-.18.08l-.06.1c.06,0,.1,0,.1.07s-.08.09-.18.09L6,17.22c.06,0,.1.05.1.08s-.08.08-.18.08l-.07.11s.08,0,.08.07-.07.07-.17.07l-.07.12s.08,0,.08.07-.07.07-.16.07L5.54,18s.08,0,.08.06-.07.08-.16.08l-.06.1s0,0,0,.06-.06.06-.13.07l-.09.16s0,0,0,0,0,.06-.12.06l-.08.16s0,0,0,0,0,.05-.1.06l-.08.16,0,0s0,.05-.1.06l-.08.16s0,0,0,0,0,.05-.09.06l-.08.16a.05.05,0,0,1,0,0s0,0-.07.05l-.08.17a0,0,0,0,1,0,0s0,0-.06.05l-.09.2,0,0s0,0,0,0l-.06.18s0,0,0,0,0,0-.05,0l-.06.18s0,0,0,0,0,0-.06,0,0,.12,0,.16a.05.05,0,0,1,0,0s0,0,0,0l0,.14,0,.06,0,.1,0,.18a1.4,1.4,0,0,0,.09.83,1.81,1.81,0,0,0,.83.61H5.7v0a1,1,0,0,0-.31.58c0,.3.48.29.48.29s2.71,0,3.47,0,.69-.48.69-.48l.06-.5a3.23,3.23,0,0,0,.45-.26.78.78,0,0,0,.18-.5c0-.18,0-.45,0-.57a6.11,6.11,0,0,1,.36-1,1,1,0,0,1,.51-.54c.13-.08.11-.17.11-.17a.83.83,0,0,1,0-.93,1.21,1.21,0,0,1,.53-.67c.27-.12.19-.22.19-.22s-.3-.35.1-1.23c.25-.52.53-.67.83-.69a1.94,1.94,0,0,1,.86.29,4.43,4.43,0,0,0,1,.07l3.36-.14.11-.16-.08-.19a2.49,2.49,0,0,1-.19-1.15,3.16,3.16,0,0,1,.12-1.13c.14-.29.71-.51.71-.51s5.59-.19,6.19-.23.6-.39.6-.39.11-.61.13-.8,0-.18,0-.18l0-.07,0,0,.12,0v-.48l0,0,0-.12a3.55,3.55,0,0,0,.09-.62,1.26,1.26,0,0,0-.14-.63.49.49,0,0,1,0-.14c0-.07-.06,0-.06-.13a.2.2,0,0,0-.2-.2Z"/><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Zm0,0L7.22,7.22M18.14,18.14l6.57,6.57"/></g></g></svg>
--- a/src/Icons/icon9.svg
+++ b/src/Icons/icon9.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.36 28.36"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>Element 13</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M4.15,4.15A14.18,14.18,0,0,1,24.21,24.21,14.18,14.18,0,0,1,4.15,4.15Z"/><path class="cls-1" d="M17.31,13.65v.7a1,1,0,0,1-1,.92L14,15.34a1,1,0,0,1-1-1,1.51,1.51,0,0,1,.1-.75.28.28,0,0,1,.11.18v0a.1.1,0,0,0-.07.1.11.11,0,0,0,.09.1,1.64,1.64,0,0,0,.84,1.24c.06,0,.11-.06.07-.12l0,0a.24.24,0,0,0,.12,0c.13,0,.08-.22.08-.22L14,13.85a1.62,1.62,0,0,1,.39-.9l2-.22a.92.92,0,0,1,.92.92Zm8-5.14L24.9,8.1h-.15l-.22.41H6.69L6.5,8H6.16L6,8.51H5.32A.32.32,0,0,0,5,8.74v1.8l.06.11,0,.51,0,.06s-.18,0-.18.37a.24.24,0,0,0,.21.26,4,4,0,0,1,.81.19c.74.21.87,1,.67,2.14a6.24,6.24,0,0,1-.75,2c.06,0,.1,0,.1.07s-.08.08-.18.08l-.06.1c.06,0,.1,0,.1.07s-.08.09-.18.09l-.07.09c.06,0,.1.05.1.08s-.08.08-.18.08L5.37,17s.08,0,.08.07-.07.07-.17.07l-.07.12s.08,0,.08.07-.07.07-.16.07L5,17.54s.08,0,.08.06-.07.08-.16.08l-.06.1s0,0,0,.06-.06.06-.13.07l-.09.16s0,0,0,0,0,.06-.12.06l-.08.16s0,0,0,0,0,.05-.1.06l-.08.16,0,0s0,.05-.1.06l-.08.16s0,0,0,0,0,.05-.09.06l-.08.16a.05.05,0,0,1,0,0s0,0-.07.05l-.08.17a0,0,0,0,1,0,0s0,0-.06.05l-.09.2,0,0s0,0-.05,0l-.06.18s0,0,0,0,0,0,0,0l-.06.18s0,0,0,0,0,0-.06,0,0,.12,0,.16a.05.05,0,0,1,0,0s0,0,0,0l0,.14,0,.06,0,.1,0,.18a1.4,1.4,0,0,0,.09.83,1.81,1.81,0,0,0,.83.61H5.2v0a1,1,0,0,0-.31.58c0,.3.48.29.48.29s2.71,0,3.47,0,.69-.48.69-.48l.06-.5a3.23,3.23,0,0,0,.45-.26.78.78,0,0,0,.18-.5c0-.18,0-.45,0-.57a6.11,6.11,0,0,1,.36-1,1,1,0,0,1,.51-.54c.13-.08.11-.17.11-.17a.83.83,0,0,1,0-.93,1.21,1.21,0,0,1,.53-.67c.27-.12.19-.22.19-.22s-.3-.35.1-1.23c.25-.52.53-.67.83-.69a1.94,1.94,0,0,1,.86.29,4.43,4.43,0,0,0,1,.07l3.36-.14.11-.16-.08-.19A2.49,2.49,0,0,1,18,14.25a3.16,3.16,0,0,1,.12-1.13c.14-.29.71-.51.71-.51s5.59-.19,6.19-.23.6-.39.6-.39.11-.61.13-.8,0-.18,0-.18l0-.07,0,0,.12,0v-.48l0,0,0-.12A3.55,3.55,0,0,0,26,9.61,1.26,1.26,0,0,0,25.89,9a.49.49,0,0,1,0-.14c0-.07-.06,0-.06-.13a.2.2,0,0,0-.2-.2Z"/><line class="cls-2" x1="16.79" y1="16.79" x2="24.21" y2="24.21"/><line class="cls-2" x1="4.15" y1="4.15" x2="7.44" y2="7.44"/></g></g></svg>
--- a/src/Styles/Base/_base.scss
+++ b/src/Styles/Base/_base.scss
@ -0,0 +1,6 @@
+// _base.scss
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
--- a/src/Styles/Base/_sreset.scss
+++ b/src/Styles/Base/_sreset.scss
--- a/src/Styles/Components/_buttons.scss
+++ b/src/Styles/Components/_buttons.scss
--- a/src/Styles/Components/_cards.scss
+++ b/src/Styles/Components/_cards.scss
--- a/src/Styles/Components/_forms.scss
+++ b/src/Styles/Components/_forms.scss
--- a/src/Styles/Components/_zoom_control.scss
+++ b/src/Styles/Components/_zoom_control.scss
@ -0,0 +1,38 @@
+/* Styles for custom zoom control buttons */
+.custom-zoom-control {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+  }
+  
+  .custom-zoom-control button {
+    background-color: #fff;
+    border: 2px solid #bbb;
+    border-radius: 2px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    color: #333;
+    cursor: pointer;
+    display: block;
+    font-size: 18px;
+    line-height: 18px;
+    margin-bottom: 5px;
+    outline: none;
+    padding: 5px;
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    width: 30px;
+  }
+  
+  .custom-zoom-control button:hover {
+    background-color: #f4f4f4;
+  }
+  
+  .custom-zoom-control button:active {
+    background-color: #e6e6e6;
+  }
+  
+  .custom-zoom-control button:first-child {
+    margin-bottom: 0;
+  }
--- a/src/Styles/Layout/_filters.scss
+++ b/src/Styles/Layout/_filters.scss
@ -0,0 +1,57 @@
+.filters-box {
+    padding: $gap;
+  }
+  
+  // _organizations
+  .regional-organisations {
+    display: grid;
+    grid-template-columns: repeat(3, $organization-item-width);
+    grid-template-rows: repeat(2, $organization-item-height);
+    gap: $gap;
+  }
+  
+  .organization-item {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 5px;
+  }
+  
+  .organization-item:hover {
+    opacity: $opacity-hover;
+  }
+  
+  .name {
+    font-size: $font-size-small;
+  }
+  
+  // _treaties
+  .treaty-item {
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
+    margin-bottom: 15px;
+  }
+  
+  .treaty-item-name {
+    font-size: $font-size-small;
+  }
+  
+  .icon {
+    width: $icon-size-large;
+    height: $icon-size-large;
+    cursor: pointer;
+  }
+  
+  .icon-2 {
+    width: $icon-size-small;
+    height: $icon-size-small;
+    cursor: pointer;
+  }
+  
+  .treaty-item-2 {
+    display: grid;
+    grid-template-columns: repeat(2, 75%);
+    margin-bottom: 15px;
+  }
--- a/src/Styles/Layout/_footer.scss
+++ b/src/Styles/Layout/_footer.scss
--- a/src/Styles/Layout/_grid.scss
+++ b/src/Styles/Layout/_grid.scss
--- a/src/Styles/Layout/_header.scss
+++ b/src/Styles/Layout/_header.scss
--- a/src/Styles/Layout/_map.scss
+++ b/src/Styles/Layout/_map.scss
@ -0,0 +1,13 @@
+.map-filter-box {
+    border: 1px solid $border-color;
+  }
+  
+  .leaflet-container {
+    background-color: $background-color;
+  }
+  
+  .map-container {
+    width: 100%;
+    height: 100vh;
+  }
+  
--- a/src/Styles/Layout/_tooltips.scss
+++ b/src/Styles/Layout/_tooltips.scss
@ -0,0 +1,28 @@
+.tooltip-custom {
+    position: absolute;
+    z-index: 1000;
+    pointer-events: auto;
+  }
+
+.matrix {
+    display: grid;
+    grid-template-columns: repeat(4, $grid-item-size);
+    grid-template-rows: repeat(3, $grid-item-size);
+    gap: $gap;
+  }
+  
+  .matrix-treaties-map {
+    display: grid;
+    grid-template-columns: repeat(3, $grid-item-size);
+    grid-template-rows: repeat(2, $grid-item-size);
+    gap: $gap;
+  }
+  
+  .rectangle {
+    background-color: $background-color;
+    border: 1px solid $text-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: $font-size-small;
+  }
--- a/src/Styles/Pages/_about.scss
+++ b/src/Styles/Pages/_about.scss
--- a/src/Styles/Pages/_home.scss
+++ b/src/Styles/Pages/_home.scss
--- a/src/Styles/Pages/_treaties.scss
+++ b/src/Styles/Pages/_treaties.scss
--- a/src/Styles/Utilities/_mixins.scss
+++ b/src/Styles/Utilities/_mixins.scss
--- a/src/Styles/Utilities/_variables.scss
+++ b/src/Styles/Utilities/_variables.scss
@ -0,0 +1,22 @@
+/* styles.scss */
+
+
+$primary-color: #17252a; /* Use this color as the primary background color for your website */
+$primary-text-color : #def2f1; /* text content, such as headings and body text */
+$primary-accent-color: #2b7a78; /* buttons, links, and other interactive elements  */
+$secondary-accent-color: #3aafa9; /* buttons, links, and other interactive elements  */
+$secondary-background-color: #feffff; /* sections or elements, such as cards, modals, or sections with additional information */
+
+$border: 1px solid #acabab;
+
+$border-color: #acabab;
+$background-color: #ffffff;
+$text-color: #000;
+$grid-item-size: 20px;
+$gap: 3px;
+$organization-item-width: 30%;
+$organization-item-height: 25%;
+$font-size-small: 12px;
+$icon-size-large: 50px;
+$icon-size-small: 35px;
+$opacity-hover: 0.8;
--- a/src/Styles/Vendor/_bootstrap.scss
+++ b/src/Styles/Vendor/_bootstrap.scss
--- a/src/Styles/main.scss
+++ b/src/Styles/main.scss
@ -0,0 +1,28 @@
+// main.scss
+
+// Base
+@import 'Base/base';
+// Import other base partials...
+
+// Utilities
+@import 'Utilities/variables';
+// Import other utilities partials...
+
+// Layout
+@import 'Layout/filters';
+@import 'Layout/map';
+@import 'Layout/tooltips';
+// Import other layout partials...
+
+// Components
+@import 'Components/zoom_control';
+// Import other components partials...
+
+// Import other partials as needed...
+
+
+
+// Vendor
+// Import other vendor partials...
+
+// Pages
--- a/src/Styles/other.scss
+++ b/src/Styles/other.scss
--- a/src/img/weapon1.png
+++ b/src/img/weapon1.png
--- a/src/img/weapon2.png
+++ b/src/img/weapon2.png
--- a/src/img/weapon3.png
+++ b/src/img/weapon3.png
--- a/src/img/weapon4.png
+++ b/src/img/weapon4.png
--- a/src/img/weapon5.png
+++ b/src/img/weapon5.png
--- a/src/index.js
+++ b/src/index.js
@ -1,3 +1,5 @@
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
--- a/src/tmp/colors.css
+++ b/src/tmp/colors.css
@ -0,0 +1,8 @@
+.colors{
+    color: #17252a;
+    color: #2b7a78;
+    color: #3aafa9;
+    color: #def2f1;
+    color: #feffff;
+
+}
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29.36 29.36"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><title>Element 5</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path class="cls-1" d="M4.65,4.65A14.18,14.18,0,0,1,24.71,24.71,14.18,14.18,0,0,1,4.65,4.65Z"/><line class="cls-1" x1="4.65" y1="4.65" x2="8.29" y2="8.29"/><line class="cls-1" x1="15.81" y1="15.81" x2="24.71" y2="24.71"/><path d="M14.24,13.61v.55a.75.75,0,0,1-.75.71l-1.8.06a.8.8,0,0,1-.77-.76A1.07,1.07,0,0,1,11,13.6a.19.19,0,0,1,.08.13v0a.1.1,0,0,0-.05.08.08.08,0,0,0,.07.08,1.25,1.25,0,0,0,.65,1c.05,0,.08,0,.05-.09v0h.09c.11,0,.06-.17.06-.17l-.27-.82a1.32,1.32,0,0,1,.29-.7l1.57-.17a.71.71,0,0,1,.71.71Zm6.17-4-.28-.32H20l-.18.32c-2.65,0-10.87,0-13.84,0l-.15-.37H5.59l-.17.37H4.93a.23.23,0,0,0-.25.17v1.4l0,.08,0,.4,0,.05s-.14,0-.14.28a.2.2,0,0,0,.17.21,3.2,3.2,0,0,1,.62.14c.58.17.68.78.53,1.67a4.91,4.91,0,0,1-.59,1.58c.05,0,.08,0,.08.05s-.06.07-.14.07l0,.07s.08,0,.08.06-.06.06-.14.06l0,.08s.08,0,.08.06-.07.06-.14.06L5,16.21s.07,0,.07.05-.06.06-.14.06l-.05.09s.06,0,.06.05,0,.06-.13.06l-.06.11s.06,0,.06.05-.06.06-.13.06l-.05.08s0,0,0,.05,0,0-.09.05L4.47,17s0,0,0,0,0,0-.09.05l-.06.12s0,0,0,0,0,0-.08,0l-.06.12s0,0,0,0,0,0-.07.05l-.07.12,0,0s0,0-.07.05L4,17.86s0,0,0,0,0,0,0,0L4,18.05l0,0s0,0-.05,0l-.06.16a0,0,0,0,0,0,0s0,0,0,0,0,.09-.05.13l0,0s0,0,0,0,0,.1,0,.14,0,0,0,0,0,0-.05,0l0,.13s0,0,0,0,0,0,0,0a1.13,1.13,0,0,1,0,.12l0,0,0,.08,0,.14a1.06,1.06,0,0,0,.07.64,1.37,1.37,0,0,0,.64.48h.53v0a.8.8,0,0,0-.25.45c0,.23.38.23.38.23s2.1,0,2.69,0,.54-.38.54-.38l0-.38a2.44,2.44,0,0,0,.34-.21.54.54,0,0,0,.14-.38,3.87,3.87,0,0,0,0-.45A4.55,4.55,0,0,1,9,18.53a.73.73,0,0,1,.4-.42c.1-.06.08-.13.08-.13a.67.67,0,0,1,0-.73.91.91,0,0,1,.41-.51c.21-.1.15-.18.15-.18s-.23-.27.08-.95c.19-.4.41-.52.64-.54a1.61,1.61,0,0,1,.67.23,3.6,3.6,0,0,0,.8.06l2.61-.11.08-.13,0-.15a1.88,1.88,0,0,1-.16-.89,2.46,2.46,0,0,1,.1-.88c.11-.22.55-.39.55-.39s4.34-.15,4.8-.18.47-.3.47-.3.09-.48.1-.63,0-.13,0-.13l0-.06,0,0,.09,0v-.37l0,0,0-.1a3.38,3.38,0,0,0,.07-.48A1.05,1.05,0,0,0,20.9,10a.63.63,0,0,1,0-.11c0-.06-.05,0-.05-.1a.16.16,0,0,0-.15-.16Z"/><path d="M22.94,9a.77.77,0,0,0-1.14-.18l-.06,0a.73.73,0,0,0-.16.89,2.46,2.46,0,0,1,0,2.46.73.73,0,0,0,.16.89l.06,0a.74.74,0,0,0,1.14-.18,4.12,4.12,0,0,0,.52-2A4.19,4.19,0,0,0,22.94,9Z"/><path d="M24.84,7.16A.75.75,0,0,0,23.74,7l0,0a.75.75,0,0,0-.11,1A5,5,0,0,1,24.5,11a5.14,5.14,0,0,1-.91,2.9.74.74,0,0,0,.11,1l0,0a.74.74,0,0,0,1.1-.13,6.57,6.57,0,0,0,0-7.57Z"/></g></g></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.3 15.27"><title>Element 16</title><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_1-2" data-name="Ebene 1"><path d="M0,.12H5.7V1H.81V7H5.29v.9H.81v7.33H0Z"/><path d="M7.9.29A10.59,10.59,0,0,1,10.37,0a3.68,3.68,0,0,1,3,1.28,4.69,4.69,0,0,1,.89,3,5.19,5.19,0,0,1-.8,3A3.94,3.94,0,0,1,10.11,9a3.93,3.93,0,0,1-1.4-.18v6.48H7.9Zm.81,7.56a4.1,4.1,0,0,0,1.47.22c2.06,0,3.3-1.32,3.3-3.72S12.17.9,10.34.9a6.29,6.29,0,0,0-1.63.18Z"/></g></g></svg>`