From fdafcdfeab6ea279cfe4128410d26339b45272c4 Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Wed, 6 Nov 2024 16:44:53 +0530 Subject: [PATCH 1/3] add changes --- frontend/src/components/SignUpPage.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/SignUpPage.jsx b/frontend/src/components/SignUpPage.jsx index 9e00cfba..fe28e48a 100644 --- a/frontend/src/components/SignUpPage.jsx +++ b/frontend/src/components/SignUpPage.jsx @@ -231,15 +231,16 @@ const SignUpPage = () => { > Sign Up - - -

Already have an account?{" "} From 87a76e9806efac20499855d1c222b05035a54466 Mon Sep 17 00:00:00 2001 From: haseebzaki-07 Date: Wed, 6 Nov 2024 17:31:56 +0530 Subject: [PATCH 2/3] revamp navigate products page --- frontend/src/AgroRentAI/NavigateProducts.jsx | 139 +++++++++++++++++-- frontend/src/AgroRentAI/index.css | 16 +++ frontend/src/components/SignUpPage.jsx | 2 +- 3 files changed, 143 insertions(+), 14 deletions(-) create mode 100644 frontend/src/AgroRentAI/index.css diff --git a/frontend/src/AgroRentAI/NavigateProducts.jsx b/frontend/src/AgroRentAI/NavigateProducts.jsx index fd7b846a..ae9605e3 100644 --- a/frontend/src/AgroRentAI/NavigateProducts.jsx +++ b/frontend/src/AgroRentAI/NavigateProducts.jsx @@ -1,12 +1,16 @@ import React, { useState, useEffect } from 'react'; import { Search, ShoppingCart, ChevronDown, Star } from 'lucide-react'; import img1 from "../assets/116.jpg"; +import img2 from "../assets/112.jpg"; +import img3 from "../assets/106.jpg"; import axios from 'axios'; import { useNavigate } from 'react-router-dom'; +import "./index.css" // Assuming the categories list is the same const categories = ['All', 'Farming Technology', 'Farming Equipment', 'Agriculture']; + const ProductCard = ({ product }) => { const navigate = useNavigate(); @@ -73,18 +77,95 @@ const FilterSidebar = ({ selectedCategory, setSelectedCategory, priceRange, setP ); -const Banner = ({ title, description }) => ( -

-
-
-

{title}

-

{description}

+// Array of banners with title, description, and image +const banners = [ + { + image: img1, + title: 'Welcome to AgriRent', + description: 'Rent agricultural equipment with ease.', + }, + { + image: img2, + title: 'Explore Our Products', + description: 'Browse a wide range of farming tools and machinery.', + }, + { + image: img3, + title: 'Get Started Today!', + description: 'Sign up and start renting agricultural equipment today.', + }, +]; + + +const Banner = () => { + const [currentBannerIndex, setCurrentBannerIndex] = useState(0); + const [transitioning, setTransitioning] = useState(false); + + useEffect(() => { + const intervalId = setInterval(() => { + if (!transitioning) { + setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % banners.length); + } + }, 3000); + + + return () => clearInterval(intervalId); + }, [transitioning]); + + const goToBanner = (index) => { + setTransitioning(true); + setCurrentBannerIndex(index); + setTimeout(() => setTransitioning(false), 500); + }; + + return ( +
+ {/* Banner Wrapper */} +
+ {/* Overlay */} +
+ + {/* Text Content */} +
+

{banners[currentBannerIndex].title}

+

{banners[currentBannerIndex].description}

+
+
+ + {/* Dots for Indicating Active Banner */} +
+ {banners.map((_, index) => ( + + ))} +
+ + {/* Swipe/Scroll Functionality */} +
{ + const startX = e.touches[0].clientX; + const handleTouchEnd = (e) => { + const endX = e.changedTouches[0].clientX; + if (startX - endX > 50) { + setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % banners.length); + } else if (endX - startX > 50) { + setCurrentBannerIndex((prevIndex) => (prevIndex - 1 + banners.length) % banners.length); + } + document.removeEventListener("touchend", handleTouchEnd); + }; + document.addEventListener("touchend", handleTouchEnd); + }} + onClick={() => setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % banners.length)} + />
-
-); + ); +}; const RentalMarketplace = () => { const [products, setProducts] = useState([]); @@ -94,6 +175,7 @@ const RentalMarketplace = () => { const [filteredProducts, setFilteredProducts] = useState([]); const [selectedCategory, setSelectedCategory] = useState('All'); const [priceRange, setPriceRange] = useState({ min: 0, max: 100 }); + const [searchQuery, setSearchQuery] = useState(""); // State for search query const ApiUrl = process.env.NODE_ENV === 'production' ? 'https://agrotech-ai-11j3.onrender.com' : 'http://localhost:8080'; @@ -136,6 +218,35 @@ const RentalMarketplace = () => { setFilteredProducts(updatedProducts); }, [products, selectedCategory, priceRange, sortBy]); + + + useEffect(() => { + let updatedProducts = products; + + if (selectedCategory !== 'All') { + updatedProducts = updatedProducts.filter(product => product.category.includes(selectedCategory)); + } + + updatedProducts = updatedProducts.filter(product => product.price <= priceRange.max); + + // Filter products based on search query + if (searchQuery) { + updatedProducts = updatedProducts.filter(product => + product.name.toLowerCase().includes(searchQuery.toLowerCase()) || + product.description.toLowerCase().includes(searchQuery.toLowerCase()) + ); + } + + if (sortBy === 'price-low-high') { + updatedProducts.sort((a, b) => a.price - b.price); + } else if (sortBy === 'price-high-low') { + updatedProducts.sort((a, b) => b.price - a.price); + } + + setFilteredProducts(updatedProducts); + }, [products, selectedCategory, priceRange, sortBy, searchQuery]); + + if (loading) { return
Loading products...
; } @@ -150,10 +261,12 @@ const RentalMarketplace = () => {

AgroRent AI

-
+
setSearchQuery(e.target.value)} // Update the search query state className="pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-green-500" /> @@ -176,7 +289,7 @@ const RentalMarketplace = () => { diff --git a/frontend/src/AgroRentAI/index.css b/frontend/src/AgroRentAI/index.css new file mode 100644 index 00000000..991f4ab8 --- /dev/null +++ b/frontend/src/AgroRentAI/index.css @@ -0,0 +1,16 @@ +/* Styles for the sliding effect */ +.banner-slide { + transform: translateX(0); + transition: transform 0.5s ease-in-out; + } + + /* Slide-in animation */ + .slide-in { + transform: translateX(0); /* No movement, it slides in naturally */ + } + + /* Slide-out animation */ + .slide-out { + transform: translateX(-100%); /* Move the banner to the left to make space for the next one */ + } + \ No newline at end of file diff --git a/frontend/src/components/SignUpPage.jsx b/frontend/src/components/SignUpPage.jsx index 20a07ff9..fe28e48a 100644 --- a/frontend/src/components/SignUpPage.jsx +++ b/frontend/src/components/SignUpPage.jsx @@ -52,7 +52,7 @@ const SignUpPage = () => { try { const response = await axios.post( - "https://agro-tech-ai-backend-teal.vercel.app/auth/signup", + "http://localhost:8080/auth/signup", { firstName, lastName, From 1f557e61958298f07c2a3de849f8e65b2afba7a2 Mon Sep 17 00:00:00 2001 From: Haseeb Zaki <147314463+haseebzaki-07@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:37:54 +0530 Subject: [PATCH 3/3] Update SignUpPage.jsx --- frontend/src/components/SignUpPage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/SignUpPage.jsx b/frontend/src/components/SignUpPage.jsx index fe28e48a..20a07ff9 100644 --- a/frontend/src/components/SignUpPage.jsx +++ b/frontend/src/components/SignUpPage.jsx @@ -52,7 +52,7 @@ const SignUpPage = () => { try { const response = await axios.post( - "http://localhost:8080/auth/signup", + "https://agro-tech-ai-backend-teal.vercel.app/auth/signup", { firstName, lastName,