Kész bemutatkozó komponens

frontend/peepal_react/src/App.js

@@ -5,13 +5,15 @@ import Menusor from './NavBar/Menusor';
 import { Route, Routes } from 'react-router-dom';
 import Kezdolap from './WC_Komponens/Kezdolap/Kezdolap';
 import Fejlec from './WC_Komponens/Fejlec/Fejlec';
+import HozzaadGomb from './WC_Komponens/Hozzadas/HozzaadGomb';
 
 export default function App() {
   return (
     <>
       <Menusor />
       <Fejlec />
-      <div>
+      <HozzaadGomb />
+      <div className=''>
         <Routes>
           <Route index element={<Kezdolap />}/>
           <Route path="/kereso" element={<Kereso />}/>

frontend/peepal_react/src/WC_Komponens/Fejlec/Fejlec.css

@@ -0,0 +1,12 @@
+.parallax {
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  
+  @media only screen and (max-width: 1366px) {
+    .parallax {
+      background-attachment: scroll;
+    }
+  }

frontend/peepal_react/src/WC_Komponens/Fejlec/Fejlec.jsx

@@ -1,18 +1,19 @@
+import styles from "./Fejlec.css";
+import fejlecHatter from "./fejlec_hatter.jpg";
+
 export default function Fejlec() {
-    return (
-      <header
-        className="fixed top-0 left-0 w-full h-[60vh] bg-no-repeat bg-cover bg-top z-10"
-        style={{ backgroundImage: "url('/fejlec_hatter.jpg')" }}
-      >
-        <div className="absolute inset-0 bg-black/40 flex flex-col items-center justify-center text-white text-center p-6">
-          <h1 className="text-3xl font-bold mb-2 bg-black/50 p-3 rounded-lg inline-block">
-            Üdvözöljük a PeePal weboldalán!
-          </h1>
-          <h2 className="text-lg font-medium max-w-md bg-black/40 p-3 rounded-lg">
-            Találja meg a hozzá legközelebb eső nyilvános mosdót egy kattintással (vagy kettővel)
-          </h2>
-        </div>
-      </header>
-    );
-  }
-  
+  return (
+    <header className={`${styles.parallax} relative w-full h-[60vh] bg-no-repeat bg-cover bg-top z-10`}
+      style={{ backgroundImage: `url(${fejlecHatter})` }}
+    >
+      <div className="absolute inset-0 bg-black/40 flex flex-col items-center justify-center text-white text-center p-6">
+        <h1 className="text-3xl font-bold mb-2 bg-black/50 p-3 rounded-lg inline-block">
+          Üdvözöljük a PeePal weboldalán!
+        </h1>
+        <h2 className="text-lg font-medium max-w-md bg-black/40 p-3 rounded-lg">
+          Találja meg az Önhöz legközelebb eső nyilvános mosdót egy kattintással (vagy kettővel)
+        </h2>
+      </div>
+    </header>
+  );
+}

frontend/peepal_react/src/WC_Komponens/Hozzadas/HozzaadGomb.jsx

@@ -0,0 +1,7 @@
+export default function HozzaadGomb(){
+    return(
+        <>
+            <button>+</button>
+        </>
+    )
+}