diff --git a/growbros-frontend/package-lock.json b/growbros-frontend/package-lock.json
index f3a5c5067b179c2781a56d462da136b01d7ff228..722f0c19a1472520ce6bd7221c5e8943121ff1ff 100644
--- a/growbros-frontend/package-lock.json
+++ b/growbros-frontend/package-lock.json
@@ -8,8 +8,10 @@
"name": "growbros-frontend",
"version": "0.0.0",
"dependencies": {
+ "font-awesome": "^4.7.0",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.18.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
@@ -509,6 +511,14 @@
"node": ">= 8"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.11.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz",
+ "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/@swc/core": {
"version": "1.3.95",
"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.3.95.tgz",
@@ -1517,6 +1527,14 @@
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
"dev": true
},
+ "node_modules/font-awesome": {
+ "version": "4.7.0",
+ "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+ "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+ "engines": {
+ "node": ">=0.10.3"
+ }
+ },
"node_modules/fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2090,6 +2108,36 @@
"react": "^18.2.0"
}
},
+ "node_modules/react-router": {
+ "version": "6.18.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz",
+ "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==",
+ "dependencies": {
+ "@remix-run/router": "1.11.0"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.18.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz",
+ "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==",
+ "dependencies": {
+ "@remix-run/router": "1.11.0",
+ "react-router": "6.18.0"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/resolve-from": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
diff --git a/growbros-frontend/package.json b/growbros-frontend/package.json
index 96e379d6a4b05984a3a9a16f8261ca034a6126a3..c7baeaa9c61751541a1e08254cab1aefe5422ae0 100644
--- a/growbros-frontend/package.json
+++ b/growbros-frontend/package.json
@@ -10,8 +10,10 @@
"preview": "vite preview"
},
"dependencies": {
+ "font-awesome": "^4.7.0",
"react": "^18.2.0",
- "react-dom": "^18.2.0"
+ "react-dom": "^18.2.0",
+ "react-router-dom": "^6.18.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
diff --git a/growbros-frontend/src/App.css b/growbros-frontend/src/App.css
index 547111705d43d94f5afe1611ff80e0fe82a110ce..4b615d16d2c9123f0c461745f048c8ae80a3ba97 100644
--- a/growbros-frontend/src/App.css
+++ b/growbros-frontend/src/App.css
@@ -1,3 +1,8 @@
+.App{
+ width: 100%;
+ height: 100%;
+}
+
.plantCard {
display: flex;
flex-direction: column;
@@ -10,4 +15,5 @@
.shadow-light {
box-shadow: 0px 12px 24px rgb(24 24 24 / 20%);
-}
\ No newline at end of file
+}
+
diff --git a/growbros-frontend/src/App.tsx b/growbros-frontend/src/App.tsx
index f02933b716320c2f331b43438517c5c557276cea..2f330c66b17980d4cff6ac3e6a1dc37ecc3acf01 100644
--- a/growbros-frontend/src/App.tsx
+++ b/growbros-frontend/src/App.tsx
@@ -1,17 +1,23 @@
import "./App.css";
-import Header from "./components/Header";
-import PlantsOverview from "./components/PlantsOverview";
+import Home from "./components/Home";
+import Garten from "./components/Garten";
+import Suche from "./components/Suche";
+import Navbar from "./components/Navbar";
+import { Routes, Route } from "react-router-dom";
+import Wunschliste from "./components/Wunschliste";
function App() {
- return (
- <>
- <Header/>
- <main style={{padding: "2rem", width: "100%"}}>
- <h2>All plants</h2>
- <PlantsOverview/>
- </main>
- </>
- );
+ return (
+ <div className="App">
+ <Navbar />
+ <Routes>
+ <Route path="/" element={<Home />} />
+ <Route path="/garten" element={<Garten />} />
+ <Route path="/wunschliste" element={<Wunschliste />} />
+ <Route path="/suchen" element={<Suche />} />
+ </Routes>
+ </div>
+ );
}
export default App;
diff --git a/growbros-frontend/src/assets/react.svg b/growbros-frontend/src/assets/react.svg
deleted file mode 100644
index f4b595629084f83eabe23a0344dd2714aea1bef0..0000000000000000000000000000000000000000
--- a/growbros-frontend/src/assets/react.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img"
- class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228">
- <path fill="#00D8FF"
- d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path>
-</svg>
\ No newline at end of file
diff --git a/growbros-frontend/src/components/FilterPage.tsx b/growbros-frontend/src/components/FilterPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..61b7bdd51e708a5bfd2b2653e4bcc1b0dcf37813
--- /dev/null
+++ b/growbros-frontend/src/components/FilterPage.tsx
@@ -0,0 +1,34 @@
+
+
+function FilterPage() {
+ return (
+ <div className="filterPage">
+ <h3>Setze Filter und suche nach passenden Pflanzen</h3>
+ </div>
+ );
+}
+
+/*function Filter() {
+ const options = ["Option 1", "Option 2", "Option 3"];
+ const [selectedOption, setSelectedOption] = useState("");
+
+ const handleOptionChange = (event) => {
+ setSelectedOption(event.target.value);
+ };
+
+ return (
+ <>
+ <label>Wählen Sie eine Option:</label>
+ <select value={selectedOption} onChange={handleOptionChange}>
+ <option value="">-- Bitte wählen --</option>
+ {options.map((option, index) => (
+ <option key={index} value={option}>
+ {option}
+ </option>
+ ))}
+ </select>
+ </>
+ );
+}*/
+
+export default FilterPage;
diff --git a/growbros-frontend/src/components/Garten.tsx b/growbros-frontend/src/components/Garten.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..191d456500d70e5e29c77627bff3f7473e8afc22
--- /dev/null
+++ b/growbros-frontend/src/components/Garten.tsx
@@ -0,0 +1,13 @@
+
+import PlantsOverview from "./PlantsOverview";
+
+function Garten() {
+ return (
+ <div>
+ <h2>Dein Garten</h2>
+ <PlantsOverview/>
+ </div>
+ );
+}
+
+export default Garten;
diff --git a/growbros-frontend/src/components/Header.tsx b/growbros-frontend/src/components/Header.tsx
deleted file mode 100644
index 5e3b324666aecd7968b849fc92c164a38cd89d28..0000000000000000000000000000000000000000
--- a/growbros-frontend/src/components/Header.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-export default function Header() {
- return (
- <header style={{
- padding: "1rem 2rem",
- display: "flex",
- justifyContent: "space-between",
- alignContent: "center",
- background: "#D0D0D0"
- }}>
- <h1>GrowBros</h1>
- <button>+</button>
- </header>
- );
-}
diff --git a/growbros-frontend/src/components/Home.tsx b/growbros-frontend/src/components/Home.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..581956b2593a1ef6057b6a3864cfe7b443ded882
--- /dev/null
+++ b/growbros-frontend/src/components/Home.tsx
@@ -0,0 +1,85 @@
+
+import "../stylesheets/Home.css";
+import { NavLink } from "react-router-dom";
+
+function Home() {
+ return (
+ <>
+ <div style={{ display: "flex" }}>
+ <img
+ src="https://images.pexels.com/photos/2611818/pexels-photo-2611818.jpeg"
+ className="mainPicture"
+ ></img>
+ <div className="descriptionAside">
+ <h1 className="header1">GrowBros</h1>
+ <h2 className="header2">Keep your plants alive</h2>
+ <p className="text">
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo,
+ possimus nostrum blanditiis, maiores doloribus qui quisquam odit
+ explicabo nihil ducimus aliquid neque reprehenderit reiciendis
+ quidem?
+ </p>
+ <Link></Link>
+ </div>
+ </div>
+ <div className="secondDiv">
+ Fange noch heute an dir deinen Traumgarten zusammenzustellen und ernte
+ bald die Früchte deiner Arbeit
+ </div>
+ <div style={{ display: "flex" }}>
+ <div className="smallDiv" style={{ width: "60%" }}>
+ <h2>Hier erhältst du...</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ex
+ quas non maiores similique atque fugit accusamus eligendi deserunt
+ culpa!
+ </p>
+ </div>
+ <img
+ className="smallPicture"
+ src="https://images.unsplash.com/photo-1615485021022-dec8994adeba?auto=format&fit=crop&q=60&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fHZlZ2V0YWJsZXMlMjB3aGl0ZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D"
+ ></img>
+ </div>
+
+ <div style={{ display: "flex" }}>
+ <img
+ className="smallPicture"
+ src="https://images.unsplash.com/photo-1587486912758-4367d2015d6c?auto=format&fit=crop&q=60&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHZlZ2V0YWJsZXMlMjB3aGl0ZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D"
+ ></img>
+ <div className="smallDiv">
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
+ rem atque cupiditate excepturi maxime ipsam quas facere distinctio
+ accusantium aspernatur.
+ </p>
+ </div>
+ </div>
+
+ <div style={{ display: "flex" }}>
+ <div className="smallDiv">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique
+ porro assumenda nam nobis unde possimus at officia eius vero id.
+ </p>
+ </div>
+ <img
+ className="smallPicture"
+ src="https://images.unsplash.com/photo-1587411768638-ec71f8e33b78?auto=format&fit=crop&q=60&w=1000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHZlZ2V0YWJsZXMlMjB3aGl0ZSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D"
+ ></img>
+ </div>
+ </>
+ );
+}
+
+function Link() {
+ return (
+ <div className="link">
+ <NavLink to="/suchen">
+ <h3> Starte hier</h3>
+ <p>und füge Pflanzen zu deinem Garten hinzu</p>
+ </NavLink>
+ </div>
+ );
+}
+
+export default Home;
diff --git a/growbros-frontend/src/components/Navbar.tsx b/growbros-frontend/src/components/Navbar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..42a3d402de0de5b91dccf99845ee944b825fc23f
--- /dev/null
+++ b/growbros-frontend/src/components/Navbar.tsx
@@ -0,0 +1,33 @@
+import { NavLink } from "react-router-dom";
+import "../stylesheets/Navbar.css";
+import "font-awesome/css/font-awesome.min.css";
+
+function Navbar() {
+ return (
+ <nav>
+ <ul>
+ <li>
+ <NavLink className="title" to="/">
+ GrowBros
+ </NavLink>
+ </li>
+ <li>
+ <NavLink to="/garten">Garten</NavLink>
+ </li>
+
+ <li>
+ <NavLink to="/wunschliste">Wunschliste</NavLink>
+ </li>
+
+ <li>
+ <NavLink to="/suchen">
+ Suchen
+ <i className="fa fa-search"></i>
+ </NavLink>
+ </li>
+ </ul>
+ </nav>
+ );
+}
+
+export default Navbar;
diff --git a/growbros-frontend/src/components/PlantDetails.tsx b/growbros-frontend/src/components/PlantDetails.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0df7718b53823c8ea2a3679a32f8e7d40855acf9
--- /dev/null
+++ b/growbros-frontend/src/components/PlantDetails.tsx
@@ -0,0 +1,58 @@
+
+import "./PlantDetails.css";
+
+function PlantDetails() {
+ return (
+ <div className="plantDetails">
+ <h1>Salat (Gartensalat)</h1>
+ <img src="https://d3t240q2dksnz7.cloudfront.net/a4cbb94a099179235fdd5696ae5f3833.jpg"></img>
+ <div className="lateinischerName infoBox">
+ <div className="title">Lateinischer Name</div>{" "}
+ <p>Lactuca sativa var. crispa</p>
+ </div>
+ <div className="Beschreibung infoBox">
+ <div className="title">Beschreibung</div>{" "}
+ <p>
+ Salat steht als \u00dcberbegriff f\u00fcr viele Blattgem\u00fcse.
+ Kopfsalate bilden - wie der Name schon sagt - einen Kopf und werden am
+ St\u00fcck geerntet. Pfl\u00fccksalate kann man kontinuierlich ernten,
+ wenn man jeweils nur einzelne Bl\u00e4tter abpfl\u00fcckt.{" "}
+ </p>
+ </div>
+ <div className="infoBox">
+ <div className="title">Herkunft</div>
+ <p>
+ Gartensalate sind gez\u00fcchtete Lattichgew\u00e4chse (Lactuca
+ sativa) mit Urpsrung in S\u00fcdeuropa, Nordafrika und Indien.
+ Darunter fallen Kopfsalate (Batavia, Eissalat),
+ Schnitt-/Pfl\u00fccksalate (Lollo Rosso/Bionda, Eichblatt) und
+ R\u00f6mersalate.{" "}
+ </p>
+ </div>
+
+ <div className="infoBox">
+ <div className="title">Anbautipps</div>{" "}
+ <p>
+ Salate eignen sich sehr gut als \u201aL\u00fcckenf\u00fcller\u2018.
+ Sie ben\u00f6tigen ausreichend Feuchtigkeit und haben einen
+ vergleichsweise geringen N\u00e4hrstoffbedarf. Durch eine geschickte
+ Auswahl lassen sich Salate das ganze Jahr \u00fcber anbauen: im
+ Fr\u00fchjahr und Fr\u00fchsommer Kopf- und
+ Schnitt-/Pfl\u00fccksalate; im Sommer und Herbst Zichoriensalate und
+ Eissalate sowie Feldsalat (v.a. im Herbst, Winter). F\u00fcr eine
+ kontinuierliche Ernte am besten in zeitlichen Abst\u00e4nden s\u00e4en
+ bzw. pflanzen. Arten und Sorten m\u00fcssen dabei an die jeweilige
+ Jahreszeit angepasst sein, z.B. beginnen Fr\u00fchjahrssorten bei zu
+ viel Hitze zu schie\u00dfen. Dabei bildet sich ein langer Stiel und
+ die Bl\u00e4tter werden bitter. Nach einigen Wochen kommen oben kleine
+ Bl\u00fcten zum Vorschein, woraus sich viele halbmondf\u00f6rmige
+ Samen bilden. Diese k\u00f6nnen f\u00fcr das Folgejahr abgesammelt
+ werden oder verteilen sich selbst im Beet, wenn du sie stehen
+ l\u00e4sst.\n{" "}
+ </p>
+ </div>
+ </div>
+ );
+}
+
+export default PlantDetails;
diff --git a/growbros-frontend/src/components/Suche.tsx b/growbros-frontend/src/components/Suche.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..23c13efe43bc92be856538fb1a27622c5139ac98
--- /dev/null
+++ b/growbros-frontend/src/components/Suche.tsx
@@ -0,0 +1,45 @@
+import "font-awesome/css/font-awesome.min.css";
+import "../stylesheets/Suche.css";
+import PlantsOverview from "./PlantsOverview";
+import { useState } from "react";
+import FilterPage from "./FilterPage";
+
+function Suche() {
+ return (
+ <>
+ <SearchBar />
+ <PlantsOverview />
+ </>
+ );
+}
+
+function SearchBar() {
+ const [isComponentVisible, setComponentVisible] = useState(false);
+
+ const loadComponent = () => {
+ setComponentVisible(!isComponentVisible);
+ };
+
+ return (
+ <>
+ <div className="searchBar">
+ <h2>Suche nach einer Pflanze</h2>
+ <p>
+ und füge diese dann zu deinem Garten oder zu deiner Wunschliste hinzu
+ </p>
+ <div className="searchFilter">
+ <input type="text" placeholder="Pflanze suchen..." />
+ <button>
+ <i className="fa fa-search"></i>
+ </button>
+ <button onClick={loadComponent} className="filter">
+ <i className="fa fa-filter" />
+ </button>
+ </div>
+ {isComponentVisible && <FilterPage />}
+ </div>
+ </>
+ );
+}
+
+export default Suche;
diff --git a/growbros-frontend/src/components/Wunschliste.tsx b/growbros-frontend/src/components/Wunschliste.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c40188b102bdadd796f4d413ba2f3811c51983c0
--- /dev/null
+++ b/growbros-frontend/src/components/Wunschliste.tsx
@@ -0,0 +1,15 @@
+
+import PlantsOverview from './PlantsOverview'
+
+function Wunschliste() {
+ return (
+ <div>
+ <h2>Deine Wunschliste</h2>
+ <PlantsOverview/>
+ </div>
+ )
+}
+
+
+
+export default Wunschliste
\ No newline at end of file
diff --git a/growbros-frontend/src/index.css b/growbros-frontend/src/index.css
index 062999082cd481dc3d8caba42101b2847a3030ad..37f5c1d6ed13e79abf1a6183851c194b912d509e 100644
--- a/growbros-frontend/src/index.css
+++ b/growbros-frontend/src/index.css
@@ -20,14 +20,9 @@
}
a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
+ text-decoration: none;
}
-a:hover {
- color: #535bf2;
-}
body {
margin: 0;
@@ -41,20 +36,19 @@ h1 {
line-height: 1.1;
}
-button {
+button, input {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
- font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
-button:hover {
- border-color: #646cff;
+button:hover{
+ border-color: #000000;
}
button:focus,
@@ -68,11 +62,7 @@ button:focus-visible {
background-color: #ffffff;
}
- a:hover {
- color: #747bff;
- }
-
- button {
+ button, input {
background-color: #f9f9f9;
}
}
diff --git a/growbros-frontend/src/main.tsx b/growbros-frontend/src/main.tsx
index 0475b4a8080f32bcc13e20a21e01ee67bcd37940..4aa6a03f2779b080ea458e6d06777aaf6f5767bc 100644
--- a/growbros-frontend/src/main.tsx
+++ b/growbros-frontend/src/main.tsx
@@ -2,9 +2,12 @@ import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
+import {BrowserRouter} from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
+ <BrowserRouter>
<App/>
+ </BrowserRouter>
</React.StrictMode>,
)
diff --git a/growbros-frontend/src/stylesheets/Home.css b/growbros-frontend/src/stylesheets/Home.css
new file mode 100644
index 0000000000000000000000000000000000000000..0170fc24ceeea9e9cc22c9dc8dd9ae6fe78cc71a
--- /dev/null
+++ b/growbros-frontend/src/stylesheets/Home.css
@@ -0,0 +1,73 @@
+
+.mainPicture{
+ width: 60%;
+ height: auto;
+
+}
+
+.descriptionAside{
+ padding: 25px;
+ background-color: #f2f2f2;
+ color: #4d5927;
+}
+.descriptionAside h1{
+ font-family: Garamond;
+}
+.descriptionAside h2 {
+ padding-top: 5px;
+}
+
+.descriptionAside p {
+ padding-top: 20px;
+ font-family: Century Gothic;
+}
+
+
+.secondPicture{
+ width: 40%;
+ height: auto;
+}
+
+.secondDiv{
+ padding: 10%;
+ font-size: 1.5rem;
+ font-weight: 500;
+ font-family: Century Gothic;
+}
+
+.smallDiv {
+ padding: 50px;
+ width: 60%;
+
+
+}
+
+.smallDiv p {
+ padding-top: 10px;
+ font-family: Century Gothic;
+ font-size: 1.25rem;
+}
+
+.smallPicture{
+ width: 50%;
+ height: auto;
+}
+
+.link a {
+ color: #4d5927;
+ font-size: 1.3rem;
+
+}
+
+.link p {
+ font-size: 1rem;
+ padding-top: 5px;
+}
+
+.link{
+ padding-top: 30px;
+}
+
+.link:hover{
+ scale: 1.1;
+}
\ No newline at end of file
diff --git a/growbros-frontend/src/stylesheets/Navbar.css b/growbros-frontend/src/stylesheets/Navbar.css
new file mode 100644
index 0000000000000000000000000000000000000000..311479e1435c4d70961761b157ca87d28a1d57dd
--- /dev/null
+++ b/growbros-frontend/src/stylesheets/Navbar.css
@@ -0,0 +1,49 @@
+nav {
+ background-color: #f5f0ea;
+ position: sticky;
+ top:0;
+}
+
+
+ul {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ list-style-type: none;
+ list-style-position: inside;
+}
+
+nav .title {
+ font-family: Garamond;
+ color: rgb(0, 0, 0);
+ font-size: 3rem;
+ font-weight: bold;
+ margin: 1rem;
+ text-decoration: none;
+ border-radius: 0.5rem;
+}
+
+nav ul li {
+ text-decoration: none;
+ font-size: 1.25rem;
+ padding-right: 20px;
+}
+
+nav ul li a {
+ display: block;
+ text-decoration: none;
+ color: rgb(0, 0, 0);
+ margin: 0 0.5rem;
+ border-radius: 0.5rem;
+}
+
+nav ul li a:hover {
+ transform: scale(1.1);
+ color: #000000;
+
+}
+
+i{
+ padding-left: 8px;
+}
+
diff --git a/growbros-frontend/src/stylesheets/PlantDetails.css b/growbros-frontend/src/stylesheets/PlantDetails.css
new file mode 100644
index 0000000000000000000000000000000000000000..f3aec1eca66630bfb05371733160b5e9303b005f
--- /dev/null
+++ b/growbros-frontend/src/stylesheets/PlantDetails.css
@@ -0,0 +1,22 @@
+
+.plantDetails{
+ margin: 25px 20px;
+}
+
+h1{
+ font-size: 2.3rem;
+}
+
+.infoBox {
+ background-color:#f9f9f9;
+ border-radius: 0.5rem;
+ margin: 20px 0px;
+ padding: 5px;
+}
+
+
+.title {
+ font-weight: bold;
+ font-size: 1.3rem;
+}
+
diff --git a/growbros-frontend/src/stylesheets/Suche.css b/growbros-frontend/src/stylesheets/Suche.css
new file mode 100644
index 0000000000000000000000000000000000000000..10352863d19d19b1045f8b8f6d5acf001bea42d4
--- /dev/null
+++ b/growbros-frontend/src/stylesheets/Suche.css
@@ -0,0 +1,36 @@
+
+input {
+ margin: 20px 20px 20px 0px;
+ width: 40%;
+ height: 30px;
+ padding: 10px;
+ border-radius: 5px;
+ font-size: 16px;
+ background-color: beige;
+ border: none;
+}
+
+button {
+ width: 20%;
+ margin: 10px;
+}
+
+button:hover, input:hover{
+ border: 2px solid #000;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+
+}
+
+.searchBar {
+ margin: 20px;
+
+}
+
+.searchFilter{
+ display: flex;
+ justify-content: space-evenly;
+}
+
+
+
+