notkshitij/CropCompass
1
1
Fork 0
Code Issues 8 Pull Requests Projects 1 Releases Activity

Made changes to honepage.

Browse Source
This commit is contained in:
Karan
2025-02-23 10:47:58 +05:30
parent 3aec29388b
commit a1a0d6adc4
8 changed files with 157 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/App.jsx
+1 -1
View File
@@ -38,7 +38,7 @@ function App() {
<> <>
<div className="w-full h-auto flex-col relative"> <div className="w-full h-auto flex-col relative">
<Navbar2 /> <Navbar2 />
<div className="pt-20"></div>
<Outlet /> <Outlet />
<div <div
className={`${ className={`${
Frontend/src/components/Navbar2.jsx
+36 -20
View File
@@ -1,24 +1,42 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const Navbar2 = () => { const Navbar2 = () => {
const user = useSelector((store) => store.user);
const [isLoggedIn, setLoggedIn] = useState(false) console.log("User is : ", user);
return (
<div className=" flex justify-center rounded-full"> const [isLoggedIn, setLoggedIn] = useState(false);
<nav className=" h-18 mt-3 mb-3 w-[97.5%] mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
useEffect(() => {
if (user.name !== "Unloggedin User") {
setLoggedIn(true);
}
}, [user]);
const handleUserSession = async (event) => {
event.preventDefault();
const responce = await fetch(`http://localhost:8000/api/v1/me`, {
credentials: "include",
});
const user = await responce.json();
//console.log("User Login Data is here : ", user);
dispatch(userSliceActions.addUser(user.data));
};
return (
<div className=" flex justify-center w-full">
<nav className=" h-18 mt-3 mb-3 w-4/12 mx-5 fixed z-20 dark:bg-gray-800/30 backdrop-blur-md rounded-full">
<div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div> <div className="absolute inset-0 bg-gradient-to-r from-gray-100/10 to-gray-500/20 pointer-events-none rounded-full"></div>
<div className="relative h-full flex items-center justify-between p-4"> <div className="relative h-full flex items-center justify-between p-4">
<a <a
href="/" href="/"
className="flex items-center space-x-3 rtl:space-x-reverse" className="flex items-center space-x-3 rtl:space-x-reverse"
> >
<img <img src="/images/logo.png" className="size-10" alt="Logo" />
src="/images/logo.png"
className="size-10"
alt="Logo"
/>
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white"> <span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
Crop Compass Crop Compass
</span> </span>
@@ -28,16 +46,15 @@ const Navbar2 = () => {
type="button" type="button"
className="text-black bg-white hover:bg-purple-200 font-medium rounded-full text-sm py-2 px-4 text-center" className="text-black bg-white hover:bg-purple-200 font-medium rounded-full text-sm py-2 px-4 text-center"
> >
{isLoggedIn? ( {isLoggedIn ? (
<Link to={"/user/dashboard/addfarm"}>Get Started</Link> <Link to={"/user/dashboard"}>Get Started</Link>
) : ( ) : (
<Link to={"/user/login"}>Log In</Link> <Link to={"/user/login"}>Log In</Link>
)} )}
</button> </button>
</div> </div>
<div {/* <div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-sticky" id="navbar-sticky"
> >
@@ -76,12 +93,11 @@ const Navbar2 = () => {
</a> </a>
</li> </li>
</ul> </ul>
</div> </div> */}
</div> </div>
</nav> </nav>
</div> </div>
); );
}; };
export default Navbar2;
export default Navbar2;
Frontend/src/pages/Home/Cards.jsx
+43 -11
View File
@@ -1,18 +1,53 @@
import React from "react"; import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useEffect } from "react";
import { Link } from "react-router-dom";
export const HeroSecn = () => { export const HeroSecn = () => {
const user = useSelector((store) => store.user);
console.log("User is : ", user);
const [isLoggedIn, setLoggedIn] = useState(false);
useEffect(() => {
if (user.name !== "Unloggedin User") {
setLoggedIn(true);
}
}, [user]);
const handleUserSession = async (event) => {
event.preventDefault();
const responce = await fetch(`http://localhost:8000/api/v1/me`, {
credentials: "include",
});
const user = await responce.json();
//console.log("User Login Data is here : ", user);
dispatch(userSliceActions.addUser(user.data));
};
return ( return (
<section className=" py-40 w-full flex justify-center text-gray-100"> <section className=" py-40 w-full flex justify-center text-gray-100">
<div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto"> <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
<div className="container mx-auto flex flex-col justify-between h-full w-full"> <div className="container mx-auto flex flex-col justify-between h-full w-full">
<div className="text-center md:text-start flex flex-col justify-around h-full"> <div className="text-center md:text-start flex flex-col justify-around h-full">
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold"> <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold ">
Anything and Everything you Need to know About One stop solution for every farmer's need.
</h1> </h1>
<p className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</div> </div>
<button
type="button"
className="text-black w-auto max-w-lg bg-white hover:bg-purple-200 font-medium rounded-full text-sm py-2 px-4 text-center"
>
{isLoggedIn ? (
<Link to={"/user/dashboard"}>Start Managing Your Farm</Link>
) : (
<Link to={"/user/login"}>Log In</Link>
)}
</button>
</div> </div>
<div className="w-full md:w-4/5 object-contain flex justify-center items-center"> <div className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img <img
@@ -28,7 +63,7 @@ export const HeroSecn = () => {
export const CardWithImage = () => { export const CardWithImage = () => {
return ( return (
<div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"> <div className="max-w-sm rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a href="#"> <a href="#">
<img <img
className="rounded-t-lg" className="rounded-t-lg"
@@ -99,10 +134,7 @@ export const CardOnlyText = (props) => {
export const CardWithButton = () => { export const CardWithButton = () => {
return ( return (
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"> <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a <a target="_blank">
href="https://www.reuters.com/sustainability/land-use-biodiversity/comment-how-empowering-smallholder-farmers-with-ai-tools-can-bolster-global-food-2025-01-10/"
target="_blank"
>
<h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white"> <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-50 dark:text-white">
Empowering smallholder farmers with AI tools can bolster global food Empowering smallholder farmers with AI tools can bolster global food
security security
Frontend/src/pages/Home/Hero2.jsx
+53 -16
View File
@@ -1,7 +1,14 @@
import React from 'react' import React from "react";
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
import { CardOnlyText, CardWithButton, CardWithImage, CardWithOnlyImage, HeroSecn, } from "./Cards"; import {
CardOnlyText,
CardWithButton,
CardWithImage,
CardWithOnlyImage,
HeroSecn,
} from "./Cards";
import Testimonial from "./Testimonial";
const ScrollReveal = ({ children, direction = "left" }) => { const ScrollReveal = ({ children, direction = "left" }) => {
const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 }); const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
@@ -26,33 +33,63 @@ const ScrollReveal = ({ children, direction = "left" }) => {
}; };
function Hero2() { function Hero2() {
const myRef = document.querySelector('.scrollable-div') const myRef = document.querySelector(".scrollable-div");
return ( return (
<div> <div>
<ScrollReveal direction='up'> <ScrollReveal direction="up">
<HeroSecn /> <HeroSecn />
</ScrollReveal> </ScrollReveal>
<Testimonial />
<div className=" flex justify-center"> <div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 "> <div className=" flex justify-between py-8 w-5/6 ">
<ScrollReveal direction="up">
<ScrollReveal direction='up'>
<CardWithImage /> <CardWithImage />
</ScrollReveal> </ScrollReveal>
<div className="flex flex-col gap-10 justify-between "> <div className="flex flex-col gap-10 justify-between ">
<ScrollReveal direction='up' > <CardOnlyText headingText = {"AI for agriculture: How Indian farmers are harvesting innovation"} bodyText={"Farmers participating in the programme saw a 21% increase in chili yields per acre, a 9% reduction in pesticide use, a 5% decrease in fertilizer usage, and an 8% improvement in unit prices due to quality enhancements."} href={"https://www.weforum.org/impact/ai-for-agriculture-in-india/ "} /> </ScrollReveal> <ScrollReveal direction="up">
<ScrollReveal direction='up'> <CardWithButton /> </ScrollReveal> {" "}
</div> <CardOnlyText
headingText={
"AI for agriculture: How Indian farmers are harvesting innovation"
}
bodyText={
"Farmers participating in the programme saw a 21% increase in chili yields per acre, a 9% reduction in pesticide use, a 5% decrease in fertilizer usage, and an 8% improvement in unit prices due to quality enhancements."
}
href={
"https://www.weforum.org/impact/ai-for-agriculture-in-india/ "
}
/>{" "}
</ScrollReveal>
<ScrollReveal direction="up">
{" "}
<CardWithButton />{" "}
</ScrollReveal>
</div>
<div className=" flex flex-col justify-between"> <div className=" flex flex-col justify-between">
<ScrollReveal direction='up'> <CardOnlyText headingText={"SugarChain: Blockchain technology meets Agriculture"} bodyText={"The use of blockchain technology can help farmers automate processes with high trust, addressing issues like middlemen involvement and ensuring accurate compensation for their products"} href={"https://arxiv.org/abs/2301.08405"} /> </ScrollReveal> <ScrollReveal direction="up">
<ScrollReveal direction='up'> <CardWithOnlyImage /> </ScrollReveal> {" "}
</div> <CardOnlyText
headingText={
"SugarChain: Blockchain technology meets Agriculture"
}
bodyText={
"The use of blockchain technology can help farmers automate processes with high trust, addressing issues like middlemen involvement and ensuring accurate compensation for their products"
}
href={"https://arxiv.org/abs/2301.08405"}
/>{" "}
</ScrollReveal>
<ScrollReveal direction="up">
{" "}
<CardWithOnlyImage />{" "}
</ScrollReveal>
</div>
</div> </div>
</div> </div>
</div> </div>
) );
} }
export default Hero2 export default Hero2;
Frontend/src/pages/Home/HomePage.jsx
+1 -1
View File
@@ -10,7 +10,7 @@ const HomePage = () => {
<> <>
<div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover"> <div className=" bg-[url(/images/bgphoto.png)] bg-no-repeat bg-cover">
<Hero2 /> <Hero2 />
<Testimonial />
<Footer /> <Footer />
</div> </div>
</> </>
Frontend/src/pages/Home/Testimonial.jsx
+14 -34
View File
@@ -35,8 +35,8 @@ const Testimonial = () => {
return ( return (
<> <>
<section className=" py-12 px-2 md:px-32 text-white"> <section className=" py-12 px-2 md:px-32 text-white">
<div className="container mx-auto "> <div className="container mx-auto min-h-[20]">
<div className="text-center flex-col justify-center align-middle "> <div className="text-center flex-col justify-center align-middle min-h-full">
<ScrollReveal direction="up"> <ScrollReveal direction="up">
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md"> <h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
WHY CHOOSE US? WHY CHOOSE US?
@@ -57,18 +57,14 @@ const Testimonial = () => {
</ScrollReveal> </ScrollReveal>
</div> </div>
<div className="flex flex-col sm:flex-row justify-around mt-8 h-auto"> <div className="flex flex-col sm:flex-row justify-around mt-8 h-auto min-h-[50]">
<ScrollReveal direction="up"> <ScrollReveal direction="up">
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"> <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg <img
className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3" src="/images/dashboard.png"
aria-hidden="true" alt="dashboard"
xmlns="http://www.w3.org/2000/svg" className="w-7 h-7"
fill="currentColor" ></img>
viewBox="0 0 20 20"
>
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
</svg>
<a href="#"> <a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Excellent Dashboards Excellent Dashboards
@@ -76,7 +72,7 @@ const Testimonial = () => {
</a> </a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400"> <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Our descriptive dashboards give insights into your crop's Our descriptive dashboards give insights into your crop's
health and keeps track of your burning expenses health and keeps track of your burning expenses.
</p> </p>
<a <a
href="#" href="#"
@@ -103,16 +99,8 @@ const Testimonial = () => {
</ScrollReveal> </ScrollReveal>
<ScrollReveal direction="up"> <ScrollReveal direction="up">
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"> <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 pb-13">
<svg <img src="/images/crops.png" className="w-7 h-7" alt="" />
className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
</svg>
<a href="#"> <a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
{" "} {" "}
@@ -121,7 +109,7 @@ const Testimonial = () => {
</a> </a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400"> <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Predict the possible crop diseases based on their shown Predict the possible crop diseases based on their shown
symptoms symptoms.
</p> </p>
<a <a
href="#" href="#"
@@ -149,15 +137,7 @@ const Testimonial = () => {
<ScrollReveal direction="up"> <ScrollReveal direction="up">
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700"> <div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg <img src="/images/planner.png" className="w-7 h-7" alt="" />
className="w-7 h-7 text-gray-200 dark:text-gray-400 mb-3"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z" />
</svg>
<a href="#"> <a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white"> <h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Crop Planner Crop Planner
@@ -166,7 +146,7 @@ const Testimonial = () => {
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400"> <p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Based on previous season's crop and used pertilizers and Based on previous season's crop and used pertilizers and
pesticides, plan what crops would best suit the present state pesticides, plan what crops would best suit the present state
of your soil of your soil.
</p> </p>
<a <a
href="#" href="#"
Frontend/src/pages/Login/SignupPage.jsx
+3 -12
View File
@@ -13,18 +13,12 @@ const SignupPage = () => {
const handleRegisteration = async (event) => { const handleRegisteration = async (event) => {
event.preventDefault(); event.preventDefault();
let userRole;
if (roleElement.current.value == "Student") {
userRole = "user";
} else {
userRole = "mentor";
}
const user = { const user = {
name: name:
firstNameElement.current.value + " " + lastNameElement.current.value, firstNameElement.current.value + " " + lastNameElement.current.value,
email: emailElement.current.value, email: emailElement.current.value,
password: passwordElement.current.value, password: passwordElement.current.value,
role: userRole,
}; };
event.preventDefault(); event.preventDefault();
@@ -45,7 +39,6 @@ const SignupPage = () => {
lastNameElement.current.value = ""; lastNameElement.current.value = "";
emailElement.current.value = ""; emailElement.current.value = "";
passwordElement.current.value = ""; passwordElement.current.value = "";
roleElement.current.value = "";
if (data.success == true) { if (data.success == true) {
navigate("/user/login"); navigate("/user/login");
@@ -72,9 +65,7 @@ const SignupPage = () => {
<h1 className="text-2xl font-bold text-gray-50 mb-4"> <h1 className="text-2xl font-bold text-gray-50 mb-4">
Register Your account Register Your account
</h1> </h1>
<p className="text-gray-100"> <p className="text-gray-100">Welcome to Crop Compass.</p>
Welcome to Crop Compass.
</p>
<p className="text-gray-100 mb-6"> <p className="text-gray-100 mb-6">
Please register your new account. Please register your new account.
</p> </p>
@@ -129,7 +120,7 @@ const SignupPage = () => {
type="email" type="email"
id="email" id="email"
ref={emailElement} ref={emailElement}
className="bg-gray-50 border border-gray-300 text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" className="bg-gray-50 border border-gray-300 text-black text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="user@mail.com" placeholder="user@mail.com"
required required
/> />
Frontend/src/pages/UserPanel/MainUserPanel.jsx
+2
View File
@@ -32,6 +32,8 @@ const MainUserPanel = () => {
} }
}; };
const user = useSelector((store) => store.user); const user = useSelector((store) => store.user);
return ( return (
<> <>