fetch osp units and information image and name

.gitignore

@@ -1 +1,2 @@
 node_modules/
+.env

client/src/App.js

@@ -24,7 +24,7 @@ function App() {
 
       </div>
 
-
+     <footer className='footerFirstSite'><p className='skrytka-date'>Skrytka 2023</p>Affero General Public License v3.0</footer> 
 
     </>
   );

client/src/components/BottomFPage.jsx

@@ -1,4 +1,3 @@
-
 import React, {useContext} from 'react';
 
 import { AppContext } from './AppContext';
@@ -31,7 +30,7 @@ const BottomFPage = () => {
       
     
       <div className='FirstFooter'>Nie widzisz swojej jednostki? <li className='li-write-to-us'><a className='a-write-to-us' href = '/linkdostrony'> Napisz do nas!</a></li></div>
-      <footer className='footerFirstSite'>&copy;Wszelkie prawa zastrzeżone 2023 Skrytka.app<p className='skrytka-date'>Skrytka 2023</p></footer> 
+      <footer className='footerFirstSite'>@Wszelkie prawa zastrzeżone 2023 Skrytka.app<p className='skrytka-date'>Skrytka 2023</p></footer> 
    
      
      

client/src/components/FooterQuiz.jsx

@@ -1,14 +1,14 @@
 const FooterQuiz = () => (
   <div className='FooterSecondSite'>
      
-  <a className='a-write-to-us-1' href = '/linkdostrony'>Zgłoś błąd lub pomysł ulepszenia aplikacji!</a>
+  <a className='a-write-to-us-1' href = 'mailto:kontakt@janilowski.pl'>Zgłoś błąd lub pomysł ulepszenia aplikacji!</a>
 
-  <footer className='footerSecondSite'>General Public License<p className='skrytka-date'>Skrytka 2023</p>
+  <footer className='footerSecondSite'>Affero General Public License v3.0<p className='skrytka-date'>Skrytka.App 2023</p>
   
 
   <div className="footerRealization">
  <div className="firstPatron">
-   <h4>Projekt zrealizowany w ramach Olimpiady Zwolnieni z Teorii</h4>
+   <h4>Projekt realizowany w ramach Olimpiady Zwolnieni z Teorii</h4>
    <img className='patronImg1' src="/img/logoZzt.png" alt="logo" />
  </div>
   

client/src/components/Truck.jsx

@@ -128,7 +128,7 @@ const Truck = () => {
 
     <div className='FooterSecondSite'></div>
      
-      <a className='a-write-to-us-1' href = '/linkdostrony'>Zgłoś błąd lub pomysł ulepszenia aplikacji!</a>
+      <a className='a-write-to-us-1' href = 'mailto:kontakt@janilowski.pl'>Zgłoś błąd lub pomysł ulepszenia aplikacji!</a>
 
       <footer className='footerSecondSite'>General Public License<p className='skrytka-date'>Skrytka 2023</p></footer>
 

client/src/style/App.scss

@@ -8,18 +8,15 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  
 }
 
 
 ::-webkit-scrollbar {
   width: 1.5em;
-  
 }
 
 ::-webkit-scrollbar-track {
   background-color: rgb(17,17,17);
-
 }
 
 ::-webkit-scrollbar-thumb {
@@ -35,18 +32,24 @@
   font-family: $priamry-font-family;
 }
 
+#root {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
 
 body {
   font-family: $priamry-font-family;
   background: #f7f6ff;
- 
 }
 
-
 .container {
   display: flex;
   justify-content: space-around;
   padding: 32px;
+  @media (max-width: 500px) {
+    padding: 8px;
+  }
 }
 
 .imgArrrow {
@@ -89,6 +92,11 @@ body {
   flex-direction: column;
   margin-top: 2rem;
 
+  @media (max-width: 500px) {
+    width: 100%;
+  }
+
+ 
   .options-container {
     background: #2f3640;
     color: #f5f6fa;
@@ -143,7 +151,7 @@ body {
 
 
 .inputSearch {
-  width: 360px;
+  width: 100%;
   font-size: 15px;
   padding: .5em;
 }
@@ -175,6 +183,12 @@ body {
   position: relative;
   overflow: hidden;
 
+  @media (max-width: 500px) {
+    width: 150px;
+    height: 150px;
+  }
+
+
   &::before{
     content: "";
     background-image: conic-gradient(
@@ -206,10 +220,11 @@ body {
   }
   
 }
+
 .box {
   z-index: 1000;
-  width: 220px;
+  width: 95%;
-  height: 220px;
+  height: 95%
 }
 // 
 
@@ -219,9 +234,13 @@ body {
   
   margin-top: .3em;
   letter-spacing: 2px;
-  font-size: 55px;
+  font-size: 3rem;
   text-align: center;
   font-weight: bolder;
+
+  @media (max-width: 500px) {
+    font-size: 2rem;
+  }
 }
 
 @keyframes rotate {

client/src/style/_BottomFPage.scss

@@ -6,8 +6,7 @@
   display: flex;
   font-size: 15px;
   position: absolute;
-  top: 86%;
+  bottom: 11vh;
- 
 }
 
 .a-write-to-us {
@@ -17,23 +16,22 @@
  
   color: blue;
 }
+
 .li-write-to-us {
   list-style-type: none;
 }
-.footerFirstSite {
-  @include display-flex();
 
-  position: absolute;
+.footerFirstSite {
-  top: 90.8%;
+  margin-top: auto;
   width: 100vw;
+  height: 10vh;
   padding: 1.6rem;
   color:white;
   background-color: $primary-color-button;
   font-size: .8em;
+  text-align: center;
 }
 
-
-
 @media (orientation: portrait) {
  .btnUnit {
   top: 55%;

client/src/style/_Variables.scss

@@ -1,3 +1,3 @@
-$priamry-font-family: "Segoe UI";
+$priamry-font-family: Segoe UI, sans-serif;
 $primary-color-button: rgba(186,25,26,255);
 $width-footer-icon: 300px;