NicholasChanng · Anthony-PB · Feb 18, 2024 · Feb 18, 2024 · Feb 18, 2024 · Feb 18, 2024
diff --git a/README.md b/README.md
@@ -1 +1,11 @@
-Web App for Cornell Digital Agriculture Hackathon 2024.
+Winner of Grand Prize at Cornell Digital Agriculture Hackathon 2024.
+
+Team Members: Nihaal Konda, Nicholas Channg, Sai Nellutla, Rohan Sonakya, Vansh Bherwal, Anthony Paredes-Bautista
+
+Wesbite: https://prakriti-hack.netlify.app/
+
+Read about it here: https://news.cornell.edu/stories/2024/02/freshmen-win-top-prize-digital-ag-hackathon
+
+![freshmen](https://news.cornell.edu/sites/default/files/styles/full_size/public/freshmen_0.jpg?itok=Yq14i2IN)
+
+<img width="1710" alt="prakriti" src="https://github.com/NicholasChanng/prakriti/assets/87846996/238342d4-98c5-4d2e-b72e-2b70089c3486">
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.2",
+    "chart.js": "^4.4.1",
     "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-scripts": "^5.0.1",

diff --git a/public/index.html b/public/index.html
@@ -28,6 +28,8 @@
       href="https://api.fontshare.com/v2/css?f[]=chillax@1,600,500,300,700,400,200&f[]=author@501,400,500,200,2,301,601,600,1,300,700,201,701,401&display=swap"
       rel="stylesheet"
     />
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+
     <title>Prakriti</title>
   </head>
   <body>
@@ -42,5 +44,11 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init({
+        delay: 100,
+      });
+    </script>
   </body>
 </html>
diff --git a/public/soil.png b/public/soil.png
diff --git a/public/teamImg.png b/public/teamImg.png
diff --git a/src/App.css b/src/App.css
@@ -1,22 +1,27 @@
 section {
   height: auto;
+  margin: 50px 0;
 }
 
 .container {
   max-width: 1200px;
   margin: auto;
+  @media (width<= 1200px) {
+    max-width: 90dvw;
+  }
 }
 
 :root {
-  --brown-800: rgb(88, 47, 14);
+  /* --brown-800: rgb(88, 47, 14);
   --brown-600: rgb(127, 79, 36);
   --brown-400: rgb(147, 102, 57);
-  --brown-200: rgb(166, 138, 100);
+  --brown-200: rgb(166, 138, 100); */
+  --orange-400: rgb(254, 85, 0);
 
-  --green-800: rgb(51, 61, 41);
-  --green-600: rgb(65, 72, 51);
-  --green-400: rgb(101, 109, 74);
-  --green-200: rgb(164, 172, 134);
+  --green-800: rgb(5, 54, 35);
+  /* --green-600: rgb(65, 72, 51); */
+  --green-400: rgb(0, 170, 71);
+  --green-200: rgb(218, 234, 207);
   --grey-100: #dad7cd;
 }
 

diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,15 @@
 import "./App.css";
 import { Route, Routes } from "react-router-dom";
 import Layout from "../src/components/Format/Layout/layout";
-import Mission from "../src/components/Format/Mission Statement/mission"
+import Home from "./components/Format/Home/home";
+import ContactForm from "./components/Format/Contact/contact";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<Layout />}>
-        <Route path='/mission-statement' element={<Mission/>} />
+        <Route path="/" element={<Home />} />
+        <Route path="/contact" element={<ContactForm />} />
       </Route>
     </Routes>
   );

diff --git a/src/assets/img/background.png b/src/assets/img/background.png
diff --git a/src/assets/img/background1.png b/src/assets/img/background1.png
diff --git a/src/assets/img/background2.png b/src/assets/img/background2.png
diff --git a/src/assets/img/bumi.jpeg b/src/assets/img/bumi.jpeg
diff --git a/src/assets/img/fire.png b/src/assets/img/fire.png
diff --git a/src/assets/img/github.png b/src/assets/img/github.png
diff --git a/src/assets/img/indianfarmer.png b/src/assets/img/indianfarmer.png
diff --git a/src/assets/img/tree.png b/src/assets/img/tree.png
diff --git a/src/components/Format/Contact/contact.css b/src/components/Format/Contact/contact.css
@@ -0,0 +1,63 @@
+/* contact.css */
+
+/* Reset some default styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.contact-form-container {
+  margin: 0 auto;
+  padding: 20px;
+  border-radius: 10px;
+  background-color: var(--green-200);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.contact-form-title {
+  font-size: 25px;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-control {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  resize: none;
+  font-size: 14px;
+}
+
+.btn {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 20px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.btn:hover {
+  background-color: #0056b3;
+}
+
+.btn {
+  font-size: 15px;
+  padding: 15px;
+  border-radius: 10px;
+  margin: 10px;
+  transition: transform 250ms, opacity 400ms;
+  opacity: 75%;
+}
+
+.btn:hover {
+  transform: scale(1.15) translateY(-10px);
+  opacity: 100%;
+}
diff --git a/src/components/Format/Contact/contact.js b/src/components/Format/Contact/contact.js
@@ -0,0 +1,71 @@
+// ContactForm.js
+import React, { useState } from "react";
+import "./contact.css";
+
+const ContactForm = () => {
+  const [formStatus, setFormStatus] = useState("Send");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setFormStatus("Submitting...");
+
+    const { name, email, message } = e.target.elements;
+    const formData = {
+      name: name.value,
+      email: email.value,
+      message: message.value,
+    };
+
+    console.log(formData); // You can handle the form data as needed (e.g., send it to a server)
+
+    // Reset form status after submission
+    setTimeout(() => {
+      setFormStatus("Send");
+    }, 2000);
+  };
+
+  return (
+    <section data-aos="fade-in">
+      <div className="container contact-form-container">
+        <h2 className="contact-form-title">Get in Touch</h2>
+        <form className="contact-form" onSubmit={handleSubmit}>
+          <div className="form-group">
+            <label htmlFor="name">Name</label>
+            <input
+              type="text"
+              id="name"
+              className="form-control"
+              required
+              placeholder="Type Name Here"
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="email">Email</label>
+            <input
+              type="email"
+              id="email"
+              className="form-control"
+              placeholder="Type Your Email Here"
+              required
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="message">Message</label>
+            <textarea
+              id="message"
+              className="form-control"
+              rows="4"
+              placeholder="Type Your Message Here"
+              required
+            />
+          </div>
+          <button className="btn btn-primary" type="submit">
+            {formStatus}
+          </button>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default ContactForm;
diff --git a/src/components/Format/Facts/facts.css b/src/components/Format/Facts/facts.css
@@ -0,0 +1,14 @@
+.containerF {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap-reverse;
+    color: var(--green-800);
+    margin: 20px;
+}
+
+.text {
+    border: 5px solid var(--green-200);
+    box-shadow: 0 0 10px var(--green-200);
+    border-radius: 10px;
+    padding: 10px;
+}
diff --git a/src/components/Format/Facts/facts.js b/src/components/Format/Facts/facts.js
@@ -0,0 +1,19 @@
+import "./facts.css";
+
+export default function BigCoin(props){
+  return(
+    <div className="containerF">
+      {props.content.map(element => (
+        <Facts content={element} />
+      ))}
+    </div>
+  )
+}
+
+function Facts(props) {
+  return (
+    <div className="text">
+      {props.content}
+    </div>
+  );
+}