From 4bfe315737372d4f6aa000c0e1d6c6e137a445b6 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Sun, 15 Dec 2024 06:15:33 +0200 Subject: [PATCH 01/12] new project new prject --- package.json | 3 +- src/AboutUs.jsx | 32 ++- src/App.css | 8 +- src/App.jsx | 47 ++-- src/CartItem.jsx | 57 +++- src/CartSlice.jsx | 26 +- src/ProductList.css | 390 ++++++++++++++------------ src/ProductList.jsx | 657 +++++++++++++++++++++++++++----------------- src/main.jsx | 20 +- 9 files changed, 730 insertions(+), 510 deletions(-) diff --git a/package.json b/package.json index b7d4c1d1d..d6e296b8e 100644 --- a/package.json +++ b/package.json @@ -25,5 +25,6 @@ "eslint-plugin-react-refresh": "^0.4.6", "gh-pages": "^6.1.1", "vite": "^5.2.0" - } + }, + "homepage": "." } diff --git a/src/AboutUs.jsx b/src/AboutUs.jsx index 2341581c5..24861c605 100644 --- a/src/AboutUs.jsx +++ b/src/AboutUs.jsx @@ -1,29 +1,35 @@ -import React from 'react'; -import './AboutUs.css'; +import React from "react"; +import "./AboutUs.css"; function AboutUs() { return (
{/*

About Us

*/} -

Welcome to Paradise Nursery, where green meets serenity!

+

+ "Step into Disha Nursery, where nature and tranquility come together." +

- At Paradise Nursery, we are passionate about bringing nature closer to you. Our mission is to provide a wide range of - high-quality plants that not only enhance the beauty of your surroundings but also contribute to a healthier and - more sustainable lifestyle. From air-purifying plants to aromatic fragrant ones, we have something for every - plant enthusiast. + At Disha Nursery, we are dedicated to connecting you with the beauty of + nature. Our mission is to offer a diverse selection of premium-quality + plants that elevate your surroundings and promote a healthier, more + sustainable way of life. Whether you're looking for air-purifying + greenery or delightfully fragrant blooms, we have something to inspire + every plant lover.

{/*

*/}

- Our team of experts is dedicated to ensuring that each plant meets our strict standards of quality and care. - Whether you're a seasoned gardener or just starting your green journey, we're here to support you every step of - the way. Feel free to explore our collection, ask questions, and let us help you find the perfect plant for your - home or office. + At Disha Nursery, our team of experts is committed to ensuring that + every plant meets our high standards of quality and care. Whether you're + an experienced gardener or embarking on your green journey, we're here + to guide you every step of the way. Explore our diverse collection, ask + questions, and let us help you discover the perfect plant for your home + or office.

{/*

*/}

- Join us in our mission to create a greener, healthier world. Visit Paradise Nursery today and experience the - beauty of nature right at your doorstep. + "Join us in our mission to create a greener, healthier world. Visit + Disha Nursery today and bring the beauty of nature to your doorstep."

); diff --git a/src/App.css b/src/App.css index 88bb5690e..086093597 100644 --- a/src/App.css +++ b/src/App.css @@ -19,7 +19,7 @@ left: 0; width: 100%; height: 100%; - background-image: url('https://cdn.pixabay.com/photo/2017/07/13/08/59/greenhouse-2499758_1280.jpg'); + background-image: url("https://thumbs.dreamstime.com/b/gentle-nature-background-butterfly-blurred-324410107.jpg"); background-size: 100% 100%; background-position: center; filter: brightness(0.8); @@ -30,14 +30,14 @@ justify-content: center; height: 100vh; width: 100vw; - top: 100px; + top: 100px; backdrop-filter: blur(4px); - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); gap: 20px; } .landing_content { - margin-top: 430px; + margin-top: 430px; margin-left: 100px; transform: translate(-50%, -50%); z-index: 1; diff --git a/src/App.jsx b/src/App.jsx index c53954621..0675ef424 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,12 +1,11 @@ - -import React, { useState } from 'react'; -import ProductList from './ProductList'; -import './App.css'; -import AboutUs from './AboutUs'; +import React, { useState } from "react"; +import ProductList from "./ProductList"; +import "./App.css"; +import AboutUs from "./AboutUs"; function App() { - const [showProductList, setShowProductList] = useState(false); + const [cartCount, setCartCount] = useState(0); const handleGetStartedClick = () => { setShowProductList(true); @@ -14,32 +13,32 @@ function App() { return (
-
+
-
-

Welcome To Paradise Nursery

-
-

Where Green Meets Serenity

- - -
-
- +
+

Welcome to Disha Nursery

+
+

Where Nature and Peace Flourish.

+
+
+
- +
-
- +
+
); } export default App; - - - diff --git a/src/CartItem.jsx b/src/CartItem.jsx index e06317433..c3a495987 100644 --- a/src/CartItem.jsx +++ b/src/CartItem.jsx @@ -9,27 +9,42 @@ const CartItem = ({ onContinueShopping }) => { // Calculate total amount for all products in the cart const calculateTotalAmount = () => { - + return cart.reduce((total, item) => { + const cost = parseFloat(item.cost.replace('$', '')); + return total + (cost * item.quantity); + }, 0).toFixed(2); }; const handleContinueShopping = (e) => { - + if (onContinueShopping) { + onContinueShopping(e); + } }; - - const handleIncrement = (item) => { + dispatch(updateQuantity({ + name: item.name, + quantity: item.quantity + 1 + })); }; const handleDecrement = (item) => { - + if (item.quantity > 1) { + dispatch(updateQuantity({ + name: item.name, + quantity: item.quantity - 1 + })); + } }; const handleRemove = (item) => { + dispatch(removeItem(item.name)); }; // Calculate total cost based on quantity for an item const calculateTotalCost = (item) => { + const cost = parseFloat(item.cost.replace('$', '')); + return (cost * item.quantity).toFixed(2); }; return ( @@ -43,9 +58,20 @@ const CartItem = ({ onContinueShopping }) => {
{item.name}
{item.cost}
- + {item.quantity} - +
Total: ${calculateTotalCost(item)}
@@ -53,16 +79,23 @@ const CartItem = ({ onContinueShopping }) => {
))}
-
+
+ {cart.length > 0 ? `Total Items: ${cart.length}` : 'Your cart is empty'} +
- +
- +
); }; export default CartItem; - - diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx index 32b8761ed..a51988ad3 100644 --- a/src/CartSlice.jsx +++ b/src/CartSlice.jsx @@ -1,23 +1,33 @@ -import { createSlice } from '@reduxjs/toolkit'; +import { createSlice } from "@reduxjs/toolkit"; -export const CartSlice = createSlice({ - name: 'cart', +const cartSlice = createSlice({ + name: "cart", initialState: { items: [], // Initialize items as an empty array }, reducers: { addItem: (state, action) => { - + const { name, image, cost } = action.payload; + const existingItem = state.items.find((item) => item.name === name); + if (existingItem) { + existingItem.quantity++; + } else { + state.items.push({ name, image, cost, quantity: 1 }); + } }, removeItem: (state, action) => { + state.items = state.items.filter((item) => item.name !== action.payload); }, updateQuantity: (state, action) => { - - + const { name, quantity } = action.payload; + const itemToUpdate = state.items.find((item) => item.name === name); + if (itemToUpdate) { + itemToUpdate.quantity = quantity; + } }, }, }); -export const { addItem, removeItem, updateQuantity } = CartSlice.actions; +export const { addItem, removeItem, updateQuantity } = cartSlice.actions; -export default CartSlice.reducer; +export default cartSlice.reducer; diff --git a/src/ProductList.css b/src/ProductList.css index 52f9c7a84..5803f72a6 100644 --- a/src/ProductList.css +++ b/src/ProductList.css @@ -1,252 +1,282 @@ /* Reset some default styles */ -body, h1, ul { - margin: 0; - padding: 0; +body, +h1, +ul { + margin: 0; + padding: 0; } /* Set a background color */ body { - font-family: Arial, sans-serif; - background-color: #f0f0f0; + font-family: Arial, sans-serif; + background-color: #f0f0f0; } /* Navbar */ .navbar { - background-color: #4CAF50; - color: #fff!important; - padding: 15px; - display: flex; - justify-content: space-between; - align-items: center; - font-size: 20px; + background-color: #4caf50; + color: #fff !important; + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 20px; } .navbar .ul { - display: flex; - justify-content: space-between; - align-items: center; - width: 1100px; + display: flex; + justify-content: space-between; + align-items: center; + width: 1100px; } .navbar li { - margin-right: 30px; + margin-right: 30px; } .navbar .ul div a { - color: white; - font-size: 30px; - text-decoration: none; - + color: white; + font-size: 30px; + text-decoration: none; } /* Product Grid */ .product-grid { - display:flex; - flex-direction: column; - width: 100vw; - align-items: center; - justify-content: center; + display: flex; + flex-direction: column; + width: 100vw; + align-items: center; + justify-content: center; } + .product-list { - display: flex; - flex-wrap: wrap; - gap: 50px; - /* background-color: pink; */ - /* justify-content: space-between; */ - padding: 20px; - width: 100%; - align-items: center; - justify-content: center; + display: flex; + flex-wrap: wrap; + gap: 50px; + padding: 20px; + width: 100%; + align-items: center; + justify-content: center; } /* Product Card */ .product-card { - flex: 0 0 calc(33.33% - 20px); /* Adjust width for 3 cards per row with 20px gap */ - max-width: calc(26.33% - 20px); /* Adjust max-width for 3 cards per row with 20px gap */ - margin-bottom: 20px; - padding: 20px; - background-color: #fff; - border: 1px solid #ccc; - border-radius: 5px; - text-align: center; - position: relative; - - gap: 20px; + flex: 0 0 calc(33.33% - 20px); + max-width: calc(26.33% - 20px); + margin-bottom: 20px; + padding: 20px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 5px; + text-align: center; + position: relative; + gap: 20px; } /* Pseudo-classes - Hover effect on product button */ .product-card:hover { - transform: scale(1.05); - transition: transform 0.3s ease-in-out; - z-index: 1; + transform: scale(1.05); + transition: transform 0.3s ease-in-out; + z-index: 1; } .product-title { - font-weight: bold; - margin-bottom: 10px; + font-weight: bold; + margin-bottom: 10px; } .product-price { - color: #e74c3c; - font-size: 1.2rem; - margin-bottom: 10px; + color: #e74c3c; + font-size: 1.2rem; + margin-bottom: 10px; } .product-image { - max-width: 100%; - height: 200px; /* Adjust height for better consistency */ + max-width: 100%; + height: 200px; } .product-button { - background-color: #e74c3c; - color: #fff; - border: none; - padding: 10px 20px; - cursor: pointer; - transition: background-color 0.3s ease-in-out; - margin-top: 10px; + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s; + margin-top: 10px; } -.product-button:hover { - background-color: #c0392b; +.product-button:hover:not(:disabled) { + background-color: #45a049; +} + +.product-button:disabled { + background-color: #cccccc; + cursor: not-allowed; } /* Pseudo-elements - Sale badge */ .product-card::before { - content: "SALE"; - background-color: #e74c3c; - color: #fff; - position: absolute; - top: 0; - right: 0; - padding: 5px 10px; - border-radius: 0 0 0 5px; -} -.tag_home_link{ - display: flex; - /* background-color: red; */ - flex-direction: column; - align-items: center; - justify-content: center; - margin-left: 50px; - color: white; - text-decoration: none; - font-size: 20px; + content: "SALE"; + background-color: #e74c3c; + color: #fff; + position: absolute; + top: 0; + right: 0; + padding: 5px 10px; + border-radius: 0 0 0 5px; +} + +.tag_home_link { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-left: 50px; + color: white; + text-decoration: none; + font-size: 20px; } -.tag_home_link h3{ - font-size: 30px; + +.tag_home_link h3 { + font-size: 30px; } -.tag a{ - text-decoration: none; + +.tag a { + text-decoration: none; } + .tag { - width: 400px; - display: flex; - align-items: center; - justify-content: center; + width: 400px; + display: flex; + align-items: center; + justify-content: center; } .tag img { - height: 70px; - width: 70px; - border-radius: 70%; - + height: 70px; + width: 70px; + border-radius: 70%; } .luxury { - display: flex; - align-items: center; - justify-content: center; - width: 650px; - font-size: 19px; + display: flex; + align-items: center; + justify-content: center; + width: 650px; + font-size: 19px; } -.cart{ - color: white; - display: flex; + +.cart { + position: relative; + display: inline-flex; + align-items: center; } -.cart_quantity_count{ - margin-top: 16px; - /* background-color: red; */ - margin-left: 27px; - position: absolute; - font-size: 29px; +.cart svg { + position: relative; } -.plantname_heading{ - display: flex; - align-items: center; - justify-content: center; - /* background-color: yellow; */ + +.cart-count { + position: absolute; + top: 0; + right: 0; + background-color: red; + color: white; + width: 24px; + height: 24px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + font-weight: bold; + z-index: 1; } -.plant_heading{ - width: 400px; - text-align: center; - margin: 20px; - border: 1px solid rgb(5, 4, 4); - border-left: none; - border-right: none; - +.plantname_heading { + display: flex; + align-items: center; + justify-content: center; } -/* Add Media Query for responsiveness */ -@media (max-width: 768px) { - .product-card { - flex: 1 1 calc(50% - 20px); /* Adjust width for 2 cards per row with 20px gap on smaller screens */ - max-width: calc(50% - 20px); /* Adjust max-width for 2 cards per row with 20px gap on smaller screens */ - } + +.plant_heading { + width: 400px; + text-align: center; + margin: 20px; + border: 1px solid rgb(5, 4, 4); + border-left: none; + border-right: none; } -/* ProductList.css */ -.product-button { - background-color: #4CAF50; /* Green */ - border: none; - color: white; - padding: 10px 20px; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 16px; - margin: 4px 2px; - transition-duration: 0.4s; - cursor: pointer; - } - - .product-button:hover { - background-color: #45a049; +.plants-section { + padding: 20px; +} + +.category-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + padding: 20px; +} + +.category-card { + border: 1px solid #ddd; + padding: 20px; + border-radius: 8px; + text-align: center; +} + +.view-plants-btn { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.view-plants-btn:hover { + background-color: #45a049; +} + +/* Media Queries */ +@media (max-width: 1200px) { + .product-card { + flex: 1 1 calc(33.33% - 20px); + max-width: calc(33.33% - 20px); } - - .product-button.added-to-cart { - background-color: grey; /* Grey when product is added */ +} + +@media (max-width: 768px) { + .product-card { + flex: 1 1 calc(50% - 20px); + max-width: calc(50% - 20px); } - @media (max-width: 1200px) { - .product-card { - flex: 1 1 calc(33.33% - 20px); /* Adjust width for 3 cards per row with 20px gap on medium screens */ - max-width: calc(33.33% - 20px); /* Adjust max-width for 3 cards per row with 20px gap on medium screens */ - } + + .navbar { + background-color: #333232; /* Changed to gray */ + color: #fff !important; + padding: 15px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 20px; } - - @media (max-width: 768px) { - .product-card { - flex: 1 1 calc(50% - 20px); /* Adjust width for 2 cards per row with 20px gap on small screens */ - max-width: calc(50% - 20px); /* Adjust max-width for 2 cards per row with 20px gap on small screens */ - } - .navbar { - flex-direction: column; /* Change flex direction to stack items vertically */ - align-items: center; /* Align items to the center of the container */ - } - - .tag { - margin-bottom: 20px; /* Add margin bottom for spacing */ - text-align: center; /* Align text to the center */ - } - - .ul { - display: flex; /* Set display to flex */ - flex-direction: column; /* Change flex direction to stack items vertically */ - gap: 10px; /* Add gap between items */ - } - - .ul div { - text-align: center; /* Align text to the center */ - } - } \ No newline at end of file +} + +.tag { + margin-bottom: 20px; + text-align: center; +} + +.ul { + display: flex; + flex-direction: column; + gap: 10px; +} + +.ul div { + text-align: center; +} diff --git a/src/ProductList.jsx b/src/ProductList.jsx index 964b15d49..18a3d3a2c 100644 --- a/src/ProductList.jsx +++ b/src/ProductList.jsx @@ -1,281 +1,422 @@ -import React, { useState,useEffect } from 'react'; -import './ProductList.css' -import CartItem from './CartItem'; -function ProductList() { - const [showCart, setShowCart] = useState(false); - const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page +import React, { useState, useEffect } from "react"; +import "./ProductList.css"; +import CartItem from "./CartItem"; +import { useDispatch } from "react-redux"; +import { addItem } from "./CartSlice"; - const plantsArray = [ +function ProductList({ cartCount, setCartCount }) { + const [showCart, setShowCart] = useState(false); + const [showPlants, setShowPlants] = useState(false); + const [addedToCart, setAddedToCart] = useState({}); + const dispatch = useDispatch(); + const plantsArray = [ + { + category: "Air Purifying Plants", + plants: [ { - category: "Air Purifying Plants", - plants: [ - { - name: "Snake Plant", - image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", - description: "Produces oxygen at night, improving air quality.", - cost: "$15" - }, - { - name: "Spider Plant", - image: "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg", - description: "Filters formaldehyde and xylene from the air.", - cost: "$12" - }, - { - name: "Peace Lily", - image: "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg", - description: "Removes mold spores and purifies the air.", - cost: "$18" - }, - { - name: "Boston Fern", - image: "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg", - description: "Adds humidity to the air and removes toxins.", - cost: "$20" - }, - { - name: "Rubber Plant", - image: "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg", - description: "Easy to care for and effective at removing toxins.", - cost: "$17" - }, - { - name: "Aloe Vera", - image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", - description: "Purifies the air and has healing properties for skin.", - cost: "$14" - } - ] + name: "Snake Plant", + image: + "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", + description: "Produces oxygen at night, improving air quality.", + cost: "$15", }, { - category: "Aromatic Fragrant Plants", - plants: [ - { - name: "Lavender", - image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Calming scent, used in aromatherapy.", - cost: "$20" - }, - { - name: "Jasmine", - image: "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Sweet fragrance, promotes relaxation.", - cost: "$18" - }, - { - name: "Rosemary", - image: "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg", - description: "Invigorating scent, often used in cooking.", - cost: "$15" - }, - { - name: "Mint", - image: "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg", - description: "Refreshing aroma, used in teas and cooking.", - cost: "$12" - }, - { - name: "Lemon Balm", - image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", - description: "Citrusy scent, relieves stress and promotes sleep.", - cost: "$14" - }, - { - name: "Hyacinth", - image: "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg", - description: "Hyacinth is a beautiful flowering plant known for its fragrant.", - cost: "$22" - } - ] + name: "Spider Plant", + image: + "https://cdn.pixabay.com/photo/2018/07/11/06/47/chlorophytum-3530413_1280.jpg", + description: "Filters formaldehyde and xylene from the air.", + cost: "$12", }, { - category: "Insect Repellent Plants", - plants: [ - { - name: "oregano", - image: "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg", - description: "The oregano plants contains compounds that can deter certain insects.", - cost: "$10" - }, - { - name: "Marigold", - image:"https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg", - description: "Natural insect repellent, also adds color to the garden.", - cost: "$8" - }, - { - name: "Geraniums", - image: "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg", - description: "Known for their insect-repelling properties while adding a pleasant scent.", - cost: "$20" - }, - { - name: "Basil", - image: "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg", - description: "Repels flies and mosquitoes, also used in cooking.", - cost: "$9" - }, - { - name: "Lavender", - image: "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Calming scent, used in aromatherapy.", - cost: "$20" - }, - { - name: "Catnip", - image: "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg", - description: "Repels mosquitoes and attracts cats.", - cost: "$13" - } - ] + name: "Peace Lily", + image: + "https://cdn.pixabay.com/photo/2019/06/12/14/14/peace-lilies-4269365_1280.jpg", + description: "Removes mold spores and purifies the air.", + cost: "$18", }, { - category: "Medicinal Plants", - plants: [ - { - name: "Aloe Vera", - image: "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", - description: "Soothing gel used for skin ailments.", - cost: "$14" - }, - { - name: "Echinacea", - image: "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg", - description: "Boosts immune system, helps fight colds.", - cost: "$16" - }, - { - name: "Peppermint", - image: "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg", - description: "Relieves digestive issues and headaches.", - cost: "$13" - }, - { - name: "Lemon Balm", - image: "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", - description: "Calms nerves and promotes relaxation.", - cost: "$14" - }, - { - name: "Chamomile", - image: "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg", - description: "Soothes anxiety and promotes sleep.", - cost: "$15" - }, - { - name: "Calendula", - image: "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg", - description: "Heals wounds and soothes skin irritations.", - cost: "$12" - } - ] + name: "Boston Fern", + image: + "https://cdn.pixabay.com/photo/2020/04/30/19/52/boston-fern-5114414_1280.jpg", + description: "Adds humidity to the air and removes toxins.", + cost: "$20", }, { - category: "Low Maintenance Plants", - plants: [ - { - name: "ZZ Plant", - image: "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", - description: "Thrives in low light and requires minimal watering.", - cost: "$25" - }, - { - name: "Pothos", - image: "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg", - description: "Tolerates neglect and can grow in various conditions.", - cost: "$10" - }, - { - name: "Snake Plant", - image: "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", - description: "Needs infrequent watering and is resilient to most pests.", - cost: "$15" - }, - { - name: "Cast Iron Plant", - image: "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg", - description: "Hardy plant that tolerates low light and neglect.", - cost: "$20" - }, - { - name: "Succulents", - image: "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg", - description: "Drought-tolerant plants with unique shapes and colors.", - cost: "$18" - }, - { - name: "Aglaonema", - image: "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg", - description: "Requires minimal care and adds color to indoor spaces.", - cost: "$22" - } - ] - } - ]; - const styleObj={ - backgroundColor: '#4CAF50', - color: '#fff!important', - padding: '15px', - display: 'flex', - justifyContent: 'space-between', - alignIems: 'center', - fontSize: '20px', - } - const styleObjUl={ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - width: '1100px', - } - const styleA={ - color: 'white', - fontSize: '30px', - textDecoration: 'none', - } - const handleCartClick = (e) => { + name: "Rubber Plant", + image: + "https://cdn.pixabay.com/photo/2020/02/15/11/49/flower-4850729_1280.jpg", + description: "Easy to care for and effective at removing toxins.", + cost: "$17", + }, + { + name: "Aloe Vera", + image: + "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", + description: "Purifies the air and has healing properties for skin.", + cost: "$14", + }, + ], + }, + { + category: "Aromatic Fragrant Plants", + plants: [ + { + name: "Lavender", + image: + "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Calming scent, used in aromatherapy.", + cost: "$20", + }, + { + name: "Jasmine", + image: + "https://images.unsplash.com/photo-1592729645009-b96d1e63d14b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Sweet fragrance, promotes relaxation.", + cost: "$18", + }, + { + name: "Rosemary", + image: + "https://cdn.pixabay.com/photo/2019/10/11/07/12/rosemary-4541241_1280.jpg", + description: "Invigorating scent, often used in cooking.", + cost: "$15", + }, + { + name: "Mint", + image: + "https://cdn.pixabay.com/photo/2016/01/07/18/16/mint-1126282_1280.jpg", + description: "Refreshing aroma, used in teas and cooking.", + cost: "$12", + }, + { + name: "Lemon Balm", + image: + "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", + description: "Citrusy scent, relieves stress and promotes sleep.", + cost: "$14", + }, + { + name: "Hyacinth", + image: + "https://cdn.pixabay.com/photo/2019/04/07/20/20/hyacinth-4110726_1280.jpg", + description: + "Hyacinth is a beautiful flowering plant known for its fragrant.", + cost: "$22", + }, + ], + }, + { + category: "Insect Repellent Plants", + plants: [ + { + name: "oregano", + image: + "https://cdn.pixabay.com/photo/2015/05/30/21/20/oregano-790702_1280.jpg", + description: + "The oregano plants contains compounds that can deter certain insects.", + cost: "$10", + }, + { + name: "Marigold", + image: + "https://cdn.pixabay.com/photo/2022/02/22/05/45/marigold-7028063_1280.jpg", + description: + "Natural insect repellent, also adds color to the garden.", + cost: "$8", + }, + { + name: "Geraniums", + image: + "https://cdn.pixabay.com/photo/2012/04/26/21/51/flowerpot-43270_1280.jpg", + description: + "Known for their insect-repelling properties while adding a pleasant scent.", + cost: "$20", + }, + { + name: "Basil", + image: + "https://cdn.pixabay.com/photo/2016/07/24/20/48/tulsi-1539181_1280.jpg", + description: "Repels flies and mosquitoes, also used in cooking.", + cost: "$9", + }, + { + name: "Lavender", + image: + "https://images.unsplash.com/photo-1611909023032-2d6b3134ecba?q=80&w=1074&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Calming scent, used in aromatherapy.", + cost: "$20", + }, + { + name: "Catnip", + image: + "https://cdn.pixabay.com/photo/2015/07/02/21/55/cat-829681_1280.jpg", + description: "Repels mosquitoes and attracts cats.", + cost: "$13", + }, + ], + }, + { + category: "Medicinal Plants", + plants: [ + { + name: "Aloe Vera", + image: + "https://cdn.pixabay.com/photo/2018/04/02/07/42/leaf-3283175_1280.jpg", + description: "Soothing gel used for skin ailments.", + cost: "$14", + }, + { + name: "Echinacea", + image: + "https://cdn.pixabay.com/photo/2014/12/05/03/53/echinacea-557477_1280.jpg", + description: "Boosts immune system, helps fight colds.", + cost: "$16", + }, + { + name: "Peppermint", + image: + "https://cdn.pixabay.com/photo/2017/07/12/12/23/peppermint-2496773_1280.jpg", + description: "Relieves digestive issues and headaches.", + cost: "$13", + }, + { + name: "Lemon Balm", + image: + "https://cdn.pixabay.com/photo/2019/09/16/07/41/balm-4480134_1280.jpg", + description: "Calms nerves and promotes relaxation.", + cost: "$14", + }, + { + name: "Chamomile", + image: + "https://cdn.pixabay.com/photo/2016/08/19/19/48/flowers-1606041_1280.jpg", + description: "Soothes anxiety and promotes sleep.", + cost: "$15", + }, + { + name: "Calendula", + image: + "https://cdn.pixabay.com/photo/2019/07/15/18/28/flowers-4340127_1280.jpg", + description: "Heals wounds and soothes skin irritations.", + cost: "$12", + }, + ], + }, + { + category: "Low Maintenance Plants", + plants: [ + { + name: "ZZ Plant", + image: + "https://images.unsplash.com/photo-1632207691143-643e2a9a9361?q=80&w=464&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + description: "Thrives in low light and requires minimal watering.", + cost: "$25", + }, + { + name: "Pothos", + image: + "https://cdn.pixabay.com/photo/2018/11/15/10/32/plants-3816945_1280.jpg", + description: "Tolerates neglect and can grow in various conditions.", + cost: "$10", + }, + { + name: "Snake Plant", + image: + "https://cdn.pixabay.com/photo/2021/01/22/06/04/snake-plant-5939187_1280.jpg", + description: + "Needs infrequent watering and is resilient to most pests.", + cost: "$15", + }, + { + name: "Cast Iron Plant", + image: + "https://cdn.pixabay.com/photo/2017/02/16/18/04/cast-iron-plant-2072008_1280.jpg", + description: "Hardy plant that tolerates low light and neglect.", + cost: "$20", + }, + { + name: "Succulents", + image: + "https://cdn.pixabay.com/photo/2016/11/21/16/05/cacti-1846147_1280.jpg", + description: "Drought-tolerant plants with unique shapes and colors.", + cost: "$18", + }, + { + name: "Aglaonema", + image: + "https://cdn.pixabay.com/photo/2014/10/10/04/27/aglaonema-482915_1280.jpg", + description: "Requires minimal care and adds color to indoor spaces.", + cost: "$22", + }, + ], + }, + ]; + + const styleObj = { + backgroundColor: "#333232", // Change this to match your CSS + color: "#fff!important", + padding: "15px", + display: "flex", + justifyContent: "space-between", + alignItems: "center", + fontSize: "20px", + }; + const styleObjUl = { + display: "flex", + justifyContent: "space-between", + alignItems: "center", + width: "1100px", + }; + const styleA = { + color: "white", + fontSize: "30px", + textDecoration: "none", + }; + + const handleCartClick = (e) => { e.preventDefault(); - setShowCart(true); // Set showCart to true when cart icon is clicked -}; -const handlePlantsClick = (e) => { + setShowCart(true); + }; + + const handlePlantsClick = (e) => { e.preventDefault(); - setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked - setShowCart(false); // Hide the cart when navigating to About Us -}; + console.log("Plants clicked, setting showPlants to true"); + setShowPlants(true); + setShowCart(false); + }; + + const handleReturnToMain = () => { + setShowPlants(false); + }; - const handleContinueShopping = (e) => { + const handleAddToCart = (product) => { + try { + dispatch(addItem(product)); + setCartCount((prevCount) => prevCount + 1); + setAddedToCart((prev) => ({ + ...prev, + [product.name]: true, + })); + } catch (error) { + console.error("Error adding item to cart:", error); + } + }; + + const handleContinueShopping = (e) => { e.preventDefault(); setShowCart(false); }; - return ( -
-
-
-
- - -
-

Paradise Nursery

- Where Green Meets Serenity -
- -
- -
-
-
handlePlantsClick(e)} style={styleA}>Plants
-
handleCartClick(e)} style={styleA}>

-
-
- {!showCart? ( -
+ return ( +
+ {console.log("Current states:", { showCart, showPlants })} +
+ + +
+ {showCart ? ( + + ) : showPlants ? ( +
+

Our Plant Collection

+
+ {plantsArray.map((category, index) => ( +
+

{category.category}

+

Number of plants: {category.plants.length}

+ +
+ ))} +
+
+ ) : ( +
+ {plantsArray.map((category, index) => ( +
+

{category.category}

+
+ {category.plants.map((plant, plantIndex) => ( +
+ {plant.name} +
{plant.name}
+
+ {plant.description} +
+
{plant.cost}
+ +
+ ))} +
+
+ ))}
- ) : ( - -)} + )}
- ); + ); } export default ProductList; diff --git a/src/main.jsx b/src/main.jsx index 9ea042ec2..5211cfb61 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,13 +1,13 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' -import { Provider } from 'react-redux' -import store from './store.js' -ReactDOM.createRoot(document.getElementById('root')).render( +import React from "react"; +import ReactDOM from "react-dom/client"; +import App from "./App.jsx"; +import "./index.css"; +import { Provider } from "react-redux"; +import store from "./store.js"; +ReactDOM.createRoot(document.getElementById("root")).render( - + - , -) + +); From 6b481f2e4f12a0cc7032e475d2f78a492f4d60f4 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Sun, 15 Dec 2024 07:05:15 +0200 Subject: [PATCH 02/12] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 000000000..4c2387340 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +disha.com \ No newline at end of file From 864f1b035241be383a3ae7388da3b5f02c978813 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Sun, 15 Dec 2024 07:05:51 +0200 Subject: [PATCH 03/12] Update CNAME --- CNAME | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CNAME b/CNAME index 4c2387340..16d2675fc 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -disha.com \ No newline at end of file +dishahfu444.com \ No newline at end of file From 61fd1606b1d0374823ec650faa79c7ae770a040c Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Sun, 15 Dec 2024 07:06:24 +0200 Subject: [PATCH 04/12] Update CNAME --- CNAME | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CNAME b/CNAME index 16d2675fc..4360b8845 100644 --- a/CNAME +++ b/CNAME @@ -1 +1 @@ -dishahfu444.com \ No newline at end of file +dishaforlife.com \ No newline at end of file From 6d37900fe413e30461bc9bd76f7b2d7596dc9086 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 01:13:09 +0200 Subject: [PATCH 05/12] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 77b24fdfe..f9c1a423e 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ E-Plant - +
From e840f8b62112f332b4a53a18af5c25e3c07b2e1a Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 01:32:31 +0200 Subject: [PATCH 06/12] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index f9c1a423e..3448e6053 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ E-Plant - +
From 2c959d9ae1c11d12285cb9e65bdca43485c6ec43 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 01:47:51 +0200 Subject: [PATCH 07/12] Update index.html --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 3448e6053..603ee1426 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,6 @@
- + From b9fdb9efeceea89986a43119eed466e2732691e4 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 01:53:16 +0200 Subject: [PATCH 08/12] Update vite.config.js --- vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 4d190ae43..417bed6f5 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - base: "/shoppingreact", + base: "/shoppingreact/", plugins: [react()], }) From 83e3f800c465361c6575a1a8fef9bec6ff2516d5 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 01:58:18 +0200 Subject: [PATCH 09/12] Update index.css --- src/index.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/index.css b/src/index.css index e69de29bb..76a216a4d 100644 --- a/src/index.css +++ b/src/index.css @@ -0,0 +1,18 @@ +/* src/index.css */ + +body { + margin: 0; + font-family: Arial, sans-serif; + background-color: #f5f5f5; +} + +#root { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +h1 { + color: #333; +} From 870a92ea45392bdc45c658a5a6e6d9ee7cd8aa13 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 02:45:43 +0200 Subject: [PATCH 10/12] Update index.html --- index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 603ee1426..79d5ad714 100644 --- a/index.html +++ b/index.html @@ -5,11 +5,11 @@ E-Plant - - + +
- + From 1ab8d69b2690cfa7e81935ff2feaca4b1f3d6baf Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 02:47:43 +0200 Subject: [PATCH 11/12] Update vite.config.js --- vite.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.js b/vite.config.js index 417bed6f5..28a51a0ae 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ - base: "/shoppingreact/", + plugins: [react()], }) From 65830e0b27aaa68c22735213f84090c4d9f8f2f8 Mon Sep 17 00:00:00 2001 From: MostafaDisha-coder Date: Mon, 6 Jan 2025 02:49:13 +0200 Subject: [PATCH 12/12] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d6e296b8e..eef579d01 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,5 @@ "gh-pages": "^6.1.1", "vite": "^5.2.0" }, - "homepage": "." + "homepage": "/shoppingreact/" }