diff --git a/README.md b/README.md index 43aa82f..cd92a75 100644 --- 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) + +prakriti diff --git a/package-lock.json b/package-lock.json index 30219e3..0e4e256 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", @@ -3230,6 +3233,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@leichtgewicht/ip-codec": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", @@ -3353,6 +3361,16 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.15.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", @@ -5847,6 +5865,24 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", + "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -6048,6 +6084,17 @@ "node": ">=10" } }, + "node_modules/chart.js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz", + "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=7" + } + }, "node_modules/check-types": { "version": "11.2.3", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz", @@ -14843,6 +14890,15 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", diff --git a/package.json b/package.json index e4eb167..1d8c90e 100644 --- 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 index 0c0422b..63c39c0 100644 --- 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" /> + + Prakriti @@ -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`. --> + + diff --git a/public/soil.png b/public/soil.png new file mode 100644 index 0000000..2cbe155 Binary files /dev/null and b/public/soil.png differ diff --git a/public/teamImg.png b/public/teamImg.png new file mode 100644 index 0000000..0049971 Binary files /dev/null and b/public/teamImg.png differ diff --git a/src/App.css b/src/App.css index ed4e28d..3a4bc7d 100644 --- 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 index 86851d3..bb6f860 100644 --- 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 ( }> - } /> + } /> + } /> ); diff --git a/src/assets/img/background.png b/src/assets/img/background.png new file mode 100644 index 0000000..b445088 Binary files /dev/null and b/src/assets/img/background.png differ diff --git a/src/assets/img/background1.png b/src/assets/img/background1.png new file mode 100644 index 0000000..e4c162d Binary files /dev/null and b/src/assets/img/background1.png differ diff --git a/src/assets/img/background2.png b/src/assets/img/background2.png new file mode 100644 index 0000000..ac1433b Binary files /dev/null and b/src/assets/img/background2.png differ diff --git a/src/assets/img/bumi.jpeg b/src/assets/img/bumi.jpeg new file mode 100644 index 0000000..4d5de38 Binary files /dev/null and b/src/assets/img/bumi.jpeg differ diff --git a/src/assets/img/fire.png b/src/assets/img/fire.png new file mode 100644 index 0000000..a6e00e2 Binary files /dev/null and b/src/assets/img/fire.png differ diff --git a/src/assets/img/github.png b/src/assets/img/github.png new file mode 100644 index 0000000..ac6bbbb Binary files /dev/null and b/src/assets/img/github.png differ diff --git a/src/assets/img/indianfarmer.png b/src/assets/img/indianfarmer.png new file mode 100644 index 0000000..e2b068c Binary files /dev/null and b/src/assets/img/indianfarmer.png differ diff --git a/src/assets/img/tree.png b/src/assets/img/tree.png new file mode 100644 index 0000000..d375165 Binary files /dev/null and b/src/assets/img/tree.png differ diff --git a/src/components/Format/Contact/contact.css b/src/components/Format/Contact/contact.css new file mode 100644 index 0000000..6f20929 --- /dev/null +++ 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 new file mode 100644 index 0000000..4f67769 --- /dev/null +++ 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 ( +
+
+

Get in Touch

+
+
+ + +
+
+ + +
+
+ +