+
+
+
+
+
+
+
+ );
+};
+
+const PlantCategories = () => {
+ return (
+
+
+ {title}
+
+
+ );
+};
+
+export default PlantCategories;
diff --git a/website/src/Chatbot.js b/website/src/Chatbot.js
new file mode 100644
index 0000000..82e9f5d
--- /dev/null
+++ b/website/src/Chatbot.js
@@ -0,0 +1,36 @@
+import React from "react";
+import image2 from "./images/image2.jpg"; // Make sure this is the correct path to your image
+
+const Chatbot = () => {
+ return (
+ + Whatever diseases we got you covered! +
+
+
+
+
+ );
+};
+
+export default Chatbot;
diff --git a/website/src/DiseaseSection.js b/website/src/DiseaseSection.js
new file mode 100644
index 0000000..c3180be
--- /dev/null
+++ b/website/src/DiseaseSection.js
@@ -0,0 +1,35 @@
+import React from "react";
+import image1 from "./images/image1.jpg"; // Make sure this is the correct path to your image
+
+const DiseaseSection = () => {
+ return (
+
+
+
+
+ + Light meter +
++ Would you like to put a plant in a bathroom without windows? Some + plants prefer shade and some are sun-lovers. Get to know which + plants are suitable in your home based on the different light + conditions of your rooms. +
+ +
+
+
+ 
+
+
+
+ );
+};
+
+export default DiseaseSection;
diff --git a/website/src/Footer.js b/website/src/Footer.js
new file mode 100644
index 0000000..bab75b3
--- /dev/null
+++ b/website/src/Footer.js
@@ -0,0 +1,82 @@
+import React from "react";
+
+const Footer = () => {
+ return (
+
+ );
+};
+
+export default Footer;
diff --git a/website/src/MainHero.js b/website/src/MainHero.js
new file mode 100644
index 0000000..e86ebfd
--- /dev/null
+++ b/website/src/MainHero.js
@@ -0,0 +1,73 @@
+import React from "react";
+import phoneImage from "./images/phone.png";
+import addIcon from "./icons/plus icon.png" // Ensure this is the correct path to your image
+
+const PlantaLogo = () => {
+ return (
+
+
+
+
+ + Plant Disease Identification +
++ Unsure about the health of your plant? Snap a photo and our app will + analyze it to detect any diseases or pests. Get instant feedback and + tips on how to treat your plant to keep it healthy and thriving. +
+ +
+
+
+ 
+
+
+ TeaHub
+
+ );
+};
+
+const AddPlantButton = () => {
+ return (
+
+ );
+};
+
+
+const MainHero = () => {
+ return (
+
+
+ );
+};
+
+export default MainHero;
diff --git a/website/src/NavBar.js b/website/src/NavBar.js
new file mode 100644
index 0000000..f5de4bd
--- /dev/null
+++ b/website/src/NavBar.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+const NavBar = () => {
+ return (
+
+ );
+};
+
+export default NavBar;
diff --git a/website/src/TeaDescription.js b/website/src/TeaDescription.js
new file mode 100644
index 0000000..a89d66e
--- /dev/null
+++ b/website/src/TeaDescription.js
@@ -0,0 +1,46 @@
+import React from "react";
+import image3 from "./images/image3.jpg"; // Ensure this is the correct path to your image
+import plusIcon from "./icons/plus icon.png"; // Replace with your actual icon path
+
+const TeaDescription = () => {
+ return (
+
+
+
+
+ + Keep your plants alive +
++ Individual care schedule and reminders for your plants, + recommendations, step by step guides, identification, light meter + and more. Keep your plants alive with Planta! +
+
+ 
+
+
+
+
+
+
+
+ );
+};
+
+export default TeaDescription;
diff --git a/website/src/TeamMembers.js b/website/src/TeamMembers.js
new file mode 100644
index 0000000..da67211
--- /dev/null
+++ b/website/src/TeamMembers.js
@@ -0,0 +1,41 @@
+import React from "react";
+
+// Import member images
+import Member1 from "./members/member1.jpg";
+import Member2 from "./members/member2.jpg";
+import Member3 from "./members/member3.jpg";
+import Member4 from "./members/member4.jpg";
+import Member5 from "./members/member5.jpg";
+
+const Member = ({ imgSrc, name }) => (
+
+
+
+
+ + Plant Disease Identification +
++ Unsure about the health of your plant? Snap a photo and our app will + analyze it to detect any diseases or pests. Get instant feedback and + tips on how to treat your plant to keep it healthy and thriving. +
+ +
+
+
+ 
+
+
+
+ 
+
+);
+
+const TeamMembers = () => {
+ return (
+
+
+ {name}
+Position
+
+ {/* Central member */}
+
+ );
+};
+
+export default TeamMembers;
\ No newline at end of file
diff --git a/website/src/icons/add.png b/website/src/icons/add.png
new file mode 100644
index 0000000..7e86c8a
Binary files /dev/null and b/website/src/icons/add.png differ
diff --git a/website/src/icons/plus icon.png b/website/src/icons/plus icon.png
new file mode 100644
index 0000000..087cf57
Binary files /dev/null and b/website/src/icons/plus icon.png differ
diff --git a/website/src/images/image1.jpg b/website/src/images/image1.jpg
new file mode 100644
index 0000000..d838f14
Binary files /dev/null and b/website/src/images/image1.jpg differ
diff --git a/website/src/images/image10.jpg b/website/src/images/image10.jpg
new file mode 100644
index 0000000..ca7cd83
Binary files /dev/null and b/website/src/images/image10.jpg differ
diff --git a/website/src/images/image11.jpg b/website/src/images/image11.jpg
new file mode 100644
index 0000000..690c10f
Binary files /dev/null and b/website/src/images/image11.jpg differ
diff --git a/website/src/images/image2.jpg b/website/src/images/image2.jpg
new file mode 100644
index 0000000..18c46e1
Binary files /dev/null and b/website/src/images/image2.jpg differ
diff --git a/website/src/images/image3.jpg b/website/src/images/image3.jpg
new file mode 100644
index 0000000..166aee2
Binary files /dev/null and b/website/src/images/image3.jpg differ
diff --git a/website/src/images/image6.jpg b/website/src/images/image6.jpg
new file mode 100644
index 0000000..e4562bd
Binary files /dev/null and b/website/src/images/image6.jpg differ
diff --git a/website/src/images/image7.jpg b/website/src/images/image7.jpg
new file mode 100644
index 0000000..7dc57f7
Binary files /dev/null and b/website/src/images/image7.jpg differ
diff --git a/website/src/images/image8.jpg b/website/src/images/image8.jpg
new file mode 100644
index 0000000..8cc088f
Binary files /dev/null and b/website/src/images/image8.jpg differ
diff --git a/website/src/images/image9.jpg b/website/src/images/image9.jpg
new file mode 100644
index 0000000..690c10f
Binary files /dev/null and b/website/src/images/image9.jpg differ
diff --git a/website/src/images/phone.png b/website/src/images/phone.png
new file mode 100644
index 0000000..7956db7
Binary files /dev/null and b/website/src/images/phone.png differ
diff --git a/website/src/index.css b/website/src/index.css
new file mode 100644
index 0000000..669318b
--- /dev/null
+++ b/website/src/index.css
@@ -0,0 +1,31 @@
+/* Import the Tailwind base styles */
+@import 'tailwindcss/base';
+/* Import the Tailwind component styles */
+@import 'tailwindcss/components';
+/* Import the Tailwind utilities */
+@import 'tailwindcss/utilities';
+
+/* Your custom styles here */
+.material-icons {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ display: inline-block;
+ line-height: 1;
+ text-transform: none;
+ letter-spacing: normal;
+ word-wrap: normal;
+ white-space: nowrap;
+ direction: ltr;
+
+ /* Support for all WebKit browsers. */
+ -webkit-font-smoothing: antialiased;
+ /* Support for Safari and Chrome. */
+ text-rendering: optimizeLegibility;
+
+ /* Support for Firefox. */
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Support for IE. */
+ font-feature-settings: 'liga';
+}
diff --git a/website/src/index.js b/website/src/index.js
new file mode 100644
index 0000000..dde6f1c
--- /dev/null
+++ b/website/src/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+
+
+