added package with pages #10 #11 #12 #13 #14 #15 #16

growbros-frontend/src/pages/Garten.tsx

+import PlantsOverview from "../components/PlantsOverview";
+
+function Garten() {
+  return (
+    <div>
+      <h2>Dein Garten</h2>
+      <PlantsOverview />
+    </div>
+  );
+}
+
+export default Garten;

growbros-frontend/src/pages/Home.tsx

+import "../stylesheets/Home.css";
+import { NavLink } from "react-router-dom";
+
+function Home() {
+  return (
+    <main>
+      <div className="hero">
+        <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">
+            "Mit GrowBros wird Gärtnern zum Kinderspiel! Finde die perfekten
+            Pflanzen für deinen Garten, erhalte nützliche Informationen und
+            verwalte sie mühelos. Starte noch heute und lass deinen Garten in
+            voller Blüte erstrahlen!"
+          </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>Unsere Vorteile...</h2>
+          <p>
+            Entdecke neue Pflanzen und erhalte wertvolle Informationen für
+            deinen Garten. Erfasse sie mühelos und erhalte Erinnerungen für
+            Pflege und Ernte.
+          </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>
+            Organisiere deinen Garten besser. Verfolge den Fortschritt deiner
+            Pflanzen und erhalte Anleitungen, um sie gesund und glücklich zu
+            halten.
+          </p>
+        </div>
+      </div>
+
+      <div style={{ display: "flex" }}>
+        <div className="smallDiv">
+          <p>
+            Maximiere deine Ernte. Unsere App hilft dir, den optimalen Zeitpunkt
+            für die Ernte deiner Pflanzen zu finden und sorgt so für eine reiche
+            Belohnung.
+          </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>
+    </main>
+  );
+}
+
+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;

growbros-frontend/src/pages/Suche.tsx

+import "font-awesome/css/font-awesome.min.css";
+import "../stylesheets/Suche.css";
+import PlantsOverview from "../components/PlantsOverview";
+import { useState } from "react";
+import FilterPage from "../components/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;

growbros-frontend/src/pages/Wunschliste.tsx

+import { useEffect, useState } from "react";
+import PlantDetails from "../components/PlantDetails";
+
+function Wunschliste() {
+  const [plants, setPlants] = useState<any[]>([]);
+  const [error, setError] = useState();
+
+  useEffect(() => {
+    fetch("http://localhost:8080/api/v1/plants")
+      .then((res) => res.json())
+      .then((plants) => setPlants(plants))
+      .catch((err) => setError(err));
+  }, [setPlants]);
+
+  return (
+    <>
+      {error ? (
+        <p>Error fetching data</p>
+      ) : (
+        <ul style={{ display: "flex", gap: "1rem", width: "100%" }}>
+          {plants?.map((plant) => (
+            <PlantDetails plant={plant} key={plant.id} />
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export default Wunschliste;

growbros-frontend/src/stylesheets/PlantCard.css

+.plantCard {
+    display: flex;
+    flex-direction: column;
+    width: 250px;
+    aspect-ratio: 2.2;
+    border: 2px solid #f5f0ea;
+    border-radius: 8px;
+    padding: 1rem;
+    
+}
+
+.plantCardLink {
+    color: inherit;
+    transition: color linear 0.25ms;
+}
+
+.plantCardLink:hover {
+    color: #4d5927;
+    border: 2px solid black;
+    border-radius: 8px;
+    box-shadow: 0px 12px 24px rgb(24 24 24 / 20%);
+}
+
+.shadow-light {
+    box-shadow: 0px 12px 24px rgb(24 24 24 / 20%);
+}