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">
<Navbar2 />
<div className="pt-20"></div>
<Outlet />
<div
className={`${
Frontend/src/components/Navbar2.jsx
+38 -22
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";
const Navbar2 = () => {
const user = useSelector((store) => store.user);
const [isLoggedIn, setLoggedIn] = useState(false)
return (
<div className=" flex justify-center rounded-full">
<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">
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 (
<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="relative h-full flex items-center justify-between p-4">
<a
href="/"
className="flex items-center space-x-3 rtl:space-x-reverse"
>
<img
src="/images/logo.png"
className="size-10"
alt="Logo"
/>
<img src="/images/logo.png" className="size-10" alt="Logo" />
<span className="self-center text-2xl text-white font-semibold whitespace-nowrap dark:text-white">
Crop Compass
</span>
@@ -26,18 +44,17 @@ const Navbar2 = () => {
<div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<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? (
<Link to={"/user/dashboard/addfarm"}>Get Started</Link>
{isLoggedIn ? (
<Link to={"/user/dashboard"}>Get Started</Link>
) : (
<Link to={"/user/login"}>Log In</Link>
)}
</button>
</div>
<div
{/* <div
className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
id="navbar-sticky"
>
@@ -76,12 +93,11 @@ const Navbar2 = () => {
</a>
</li>
</ul>
</div>
</div> */}
</div>
</nav>
</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 = () => {
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 (
<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="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">
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
Anything and Everything you Need to know About
<h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold ">
One stop solution for every farmer's need.
</h1>
<p className="text-2xl font-semibold mb-8 ">
Your crops and their Health!
</p>
</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 className="w-full md:w-4/5 object-contain flex justify-center items-center">
<img
@@ -28,7 +63,7 @@ export const HeroSecn = () => {
export const CardWithImage = () => {
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="#">
<img
className="rounded-t-lg"
@@ -99,10 +134,7 @@ export const CardOnlyText = (props) => {
export const CardWithButton = () => {
return (
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<a
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"
>
<a target="_blank">
<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
security
Frontend/src/pages/Home/Hero2.jsx
+54 -17
View File
@@ -1,7 +1,14 @@
import React from 'react'
import React from "react";
import { motion } from "framer-motion";
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 { ref, inView } = useInView({ triggerOnce: true, threshold: 0.2 });
@@ -26,33 +33,63 @@ const ScrollReveal = ({ children, direction = "left" }) => {
};
function Hero2() {
const myRef = document.querySelector('.scrollable-div')
const myRef = document.querySelector(".scrollable-div");
return (
<div>
<ScrollReveal direction='up'>
<ScrollReveal direction="up">
<HeroSecn />
</ScrollReveal>
<Testimonial />
<div className=" flex justify-center">
<div className=" flex justify-between py-8 w-5/6 ">
<ScrollReveal direction='up'>
<ScrollReveal direction="up">
<CardWithImage />
</ScrollReveal>
<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'> <CardWithButton /> </ScrollReveal>
</div>
<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'> <CardWithOnlyImage /> </ScrollReveal>
</div>
<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">
{" "}
<CardWithButton />{" "}
</ScrollReveal>
</div>
<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">
{" "}
<CardWithOnlyImage />{" "}
</ScrollReveal>
</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">
<Hero2 />
<Testimonial />
<Footer />
</div>
</>
Frontend/src/pages/Home/Testimonial.jsx
+14 -34
View File
@@ -35,8 +35,8 @@ const Testimonial = () => {
return (
<>
<section className=" py-12 px-2 md:px-32 text-white">
<div className="container mx-auto ">
<div className="text-center flex-col justify-center align-middle ">
<div className="container mx-auto min-h-[20]">
<div className="text-center flex-col justify-center align-middle min-h-full">
<ScrollReveal direction="up">
<h2 className="text-xl sm:text-4xl font-bold mb-4 drop-shadow-md">
WHY CHOOSE US?
@@ -57,18 +57,14 @@ const Testimonial = () => {
</ScrollReveal>
</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">
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
<svg
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>
<img
src="/images/dashboard.png"
alt="dashboard"
className="w-7 h-7"
></img>
<a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Excellent Dashboards
@@ -76,7 +72,7 @@ const Testimonial = () => {
</a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
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>
<a
href="#"
@@ -103,16 +99,8 @@ const Testimonial = () => {
</ScrollReveal>
<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">
<svg
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>
<div className="max-w-sm p-6 backdrop-blur-md rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700 pb-13">
<img src="/images/crops.png" className="w-7 h-7" alt="" />
<a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
{" "}
@@ -121,7 +109,7 @@ const Testimonial = () => {
</a>
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Predict the possible crop diseases based on their shown
symptoms
symptoms.
</p>
<a
href="#"
@@ -149,15 +137,7 @@ const Testimonial = () => {
<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">
<svg
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>
<img src="/images/planner.png" className="w-7 h-7" alt="" />
<a href="#">
<h5 className="mb-2 text-2xl font-semibold tracking-tight text-gray-50 dark:text-white">
Crop Planner
@@ -166,7 +146,7 @@ const Testimonial = () => {
<p className="mb-3 font-normal text-gray-50 dark:text-gray-400">
Based on previous season's crop and used pertilizers and
pesticides, plan what crops would best suit the present state
of your soil
of your soil.
</p>
<a
href="#"
Frontend/src/pages/Login/SignupPage.jsx
+4 -13
View File
@@ -13,18 +13,12 @@ const SignupPage = () => {
const handleRegisteration = async (event) => {
event.preventDefault();
let userRole;
if (roleElement.current.value == "Student") {
userRole = "user";
} else {
userRole = "mentor";
}
const user = {
name:
firstNameElement.current.value + " " + lastNameElement.current.value,
email: emailElement.current.value,
password: passwordElement.current.value,
role: userRole,
};
event.preventDefault();
@@ -45,7 +39,6 @@ const SignupPage = () => {
lastNameElement.current.value = "";
emailElement.current.value = "";
passwordElement.current.value = "";
roleElement.current.value = "";
if (data.success == true) {
navigate("/user/login");
@@ -72,11 +65,9 @@ const SignupPage = () => {
<h1 className="text-2xl font-bold text-gray-50 mb-4">
Register Your account
</h1>
<p className="text-gray-100">
Welcome to Crop Compass.
</p>
<p className="text-gray-100">Welcome to Crop Compass.</p>
<p className="text-gray-100 mb-6">
Please register your new account.
Please register your new account.
</p>
<form
action="#"
@@ -129,7 +120,7 @@ const SignupPage = () => {
type="email"
id="email"
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"
required
/>
Frontend/src/pages/UserPanel/MainUserPanel.jsx
+2
View File
@@ -32,6 +32,8 @@ const MainUserPanel = () => {
}
};
const user = useSelector((store) => store.user);
return (
<>