Total Cart Amount: ${calculateTotalAmount()}
-
- {cart.map(item => (
+
+
+ );
+};
+
+export default Header;
diff --git a/src/ProductList.css b/src/ProductList.css
index 52f9c7a84f..65b8365192 100644
--- a/src/ProductList.css
+++ b/src/ProductList.css
@@ -1,252 +1,171 @@
-/* Reset some default styles */
-body, h1, ul {
- margin: 0;
- padding: 0;
-}
-
-/* Set a background color */
-body {
- 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;
-}
+/* ProductList.css */
-.navbar .ul {
+.product-list-container {
+ padding: 20px;
+ }
+
+ .product-header {
display: flex;
justify-content: space-between;
align-items: center;
- width: 1100px;
-}
-
-.navbar li {
- margin-right: 30px;
-}
-
-.navbar .ul div a {
- 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;
-}
-.product-list {
- display: flex;
- flex-wrap: wrap;
- gap: 50px;
- /* background-color: pink; */
- /* justify-content: space-between; */
+ margin-bottom: 30px;
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 */
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+ }
+
+ .plantname_heading {
+ flex: 1;
+ }
+
+ .plant_heading {
+ text-align: left;
+ }
+
+ .plant_heading h2 {
+ color: #2e7d32;
+ font-size: 32px;
+ margin: 0;
+ padding: 0;
+ border: none;
+ }
+
+ .cart-summary {
+ background: #e8f5e9;
+ padding: 12px 25px;
+ border-radius: 25px;
+ font-size: 18px;
+ color: #2e7d32;
+ font-weight: 600;
+ box-shadow: 0 2px 8px rgba(46, 125, 50, 0.2);
+ }
+
+ .category-section {
+ margin-bottom: 40px;
+ }
+
+ .category-section h3 {
+ color: #388e3c;
+ font-size: 26px;
margin-bottom: 20px;
+ padding-bottom: 10px;
+ border-bottom: 3px solid #c8e6c9;
+ }
+
+ .product-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ gap: 30px;
+ }
+
+ .product-card {
+ background: white;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+ transition: all 0.3s ease;
+ }
+
+ .product-card:hover {
+ transform: translateY(-8px);
+ box-shadow: 0 12px 30px rgba(0,0,0,0.15);
+ }
+
+ .product-image {
+ width: 100%;
+ height: 250px;
+ object-fit: cover;
+ border-bottom: 3px solid #e8f5e9;
+ }
+
+ .product-info {
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;
-}
-
-.product-title {
- font-weight: bold;
- margin-bottom: 10px;
-}
-
-.product-price {
- color: #e74c3c;
- font-size: 1.2rem;
- margin-bottom: 10px;
-}
-
-.product-image {
- max-width: 100%;
- height: 200px; /* Adjust height for better consistency */
-}
-
-.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;
-}
-
-.product-button:hover {
- background-color: #c0392b;
-}
-
-/* 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;
+ }
+
+ .product-title {
font-size: 20px;
-}
-.tag_home_link h3{
- font-size: 30px;
-}
-.tag a{
- text-decoration: none;
-}
-.tag {
- width: 400px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.tag img {
- height: 70px;
- width: 70px;
- border-radius: 70%;
-
-}
-
-.luxury {
+ color: #2e7d32;
+ margin-bottom: 10px;
+ font-weight: 600;
+ }
+
+ .description {
+ color: #666;
+ font-size: 14px;
+ line-height: 1.5;
+ margin-bottom: 15px;
+ min-height: 60px;
+ }
+
+ .price-cart {
display: flex;
+ justify-content: space-between;
align-items: center;
- justify-content: center;
- width: 650px;
- font-size: 19px;
-}
-.cart{
+ margin-top: 15px;
+ }
+
+ .price {
+ font-size: 24px;
+ font-weight: 700;
+ color: #2e7d32;
+ }
+
+ .product-button {
+ background: linear-gradient(135deg, #4CAF50 0%, #2e7d32 100%);
color: white;
- display: flex;
-}
-.cart_quantity_count{
- margin-top: 16px;
- /* background-color: red; */
- margin-left: 27px;
- position: absolute;
- font-size: 29px;
-
-}
-.plantname_heading{
- display: flex;
- align-items: center;
- justify-content: center;
- /* background-color: yellow; */
-}
-.plant_heading{
- width: 400px;
- text-align: center;
- margin: 20px;
- border: 1px solid rgb(5, 4, 4);
- border-left: none;
- border-right: none;
-
-
-}
-/* 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 */
- }
-}
-/* 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;
+ border-radius: 25px;
cursor: pointer;
+ font-size: 16px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ min-width: 120px;
}
- .product-button:hover {
- background-color: #45a049;
+ .product-button:hover:not(:disabled) {
+ transform: scale(1.05);
+ box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
- .product-button.added-to-cart {
- background-color: grey; /* Grey when product is added */
+ .product-button:disabled {
+ background: linear-gradient(135deg, #757575 0%, #616161 100%);
+ cursor: not-allowed;
+ opacity: 0.8;
}
- @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 */
- }
+
+ .added-to-cart {
+ background: linear-gradient(135deg, #757575 0%, #616161 100%);
}
+ /* Responsive Design */
@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 */
+ .product-header {
+ flex-direction: column;
+ gap: 15px;
+ text-align: center;
+ }
+
+ .plant_heading h2 {
+ font-size: 24px;
+ }
+
+ .cart-summary {
+ font-size: 16px;
+ padding: 10px 20px;
}
- .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 */
- }
+ .product-grid {
+ grid-template-columns: 1fr;
+ }
- .ul {
- display: flex; /* Set display to flex */
- flex-direction: column; /* Change flex direction to stack items vertically */
- gap: 10px; /* Add gap between items */
- }
+ .price-cart {
+ flex-direction: column;
+ gap: 15px;
+ }
- .ul div {
- text-align: center; /* Align text to the center */
- }
+ .product-button {
+ width: 100%;
+ }
}
\ No newline at end of file
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 7682c04fc4..e00a2965cb 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,287 +1,158 @@
-import React, { useState, useEffect } from 'react';
-import './ProductList.css'
-import CartItem from './CartItem';
-function ProductList({ onHomeClick }) {
- const [showCart, setShowCart] = useState(false);
- const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { addItem } from "./CartSlice";
+import "./ProductList.css";
- const plantsArray = [
- {
- 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"
- }
- ]
- },
- {
- 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: '#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 ProductList = () => {
+ const dispatch = useDispatch();
+ const cartItems = useSelector((state) => state.cart.items);
+ const [addedToCart, setAddedToCart] = useState({});
- const handleHomeClick = (e) => {
- e.preventDefault();
- onHomeClick();
- };
+ const plantsArray = [
+ {
+ name: "Monstera Deliciosa",
+ category: "Tropical",
+ image:
+ "https://images.unsplash.com/photo-1614594975525-e45190c55d0b?w=400&h=400&fit=crop",
+ description: "Large, glossy leaves with unique holes.",
+ cost: "$45.99",
+ },
+ {
+ name: "Snake Plant",
+ category: "Low Light",
+ image:
+ "https://images.unsplash.com/photo-1586985367371-7d672fdc5f33?w=400&h-400&fit=crop",
+ description: "Tall, sword-like leaves that purify air.",
+ cost: "$24.99",
+ },
+ {
+ name: "Fiddle Leaf Fig",
+ category: "Statement",
+ image:
+ "https://images.unsplash.com/photo-1593482892290-5d188b9e56dc?w=400&h=400&fit=crop",
+ description: "Large, violin-shaped leaves.",
+ cost: "$59.99",
+ },
+ {
+ name: "Peace Lily",
+ category: "Flowering",
+ image:
+ "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=400&h=400&fit=crop",
+ description: "Elegant white flowers and dark green leaves.",
+ cost: "$32.99",
+ },
+ {
+ name: "Spider Plant",
+ category: "Easy Care",
+ image:
+ "https://images.unsplash.com/photo-1485955900006-10f4d324d411?w=400&h=400&fit=crop",
+ description: "Produces baby plantlets on long stems.",
+ cost: "$18.99",
+ },
+ {
+ name: "ZZ Plant",
+ category: "Low Maintenance",
+ image:
+ "https://images.unsplash.com/photo-1545243421-89e7c5d5d5c3?w=400&h=400&fit=crop",
+ description: "Glossy, dark green leaves that thrive in low light.",
+ cost: "$29.99",
+ },
+ {
+ name: "Pothos",
+ category: "Trailing",
+ image:
+ "https://images.unsplash.com/photo-1517191434949-5e90cd67d2b6?w=400&h=400&fit=crop",
+ description: "Fast-growing vine with heart-shaped leaves.",
+ cost: "$16.99",
+ },
+ {
+ name: "Aloe Vera",
+ category: "Succulent",
+ image:
+ "https://images.unsplash.com/photo-1525498128493-380d1990a112?w=400&h=400&fit=crop",
+ description: "Medicinal plant with soothing gel.",
+ cost: "$14.99",
+ },
+ ];
- const handleCartClick = (e) => {
- e.preventDefault();
- setShowCart(true); // Set showCart to true when cart icon is clicked
- };
- 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
- };
+ const handleAddToCart = (plant) => {
+ dispatch(addItem(plant));
+ setAddedToCart((prev) => ({
+ ...prev,
+ [plant.name]: true,
+ }));
- const handleContinueShopping = (e) => {
- e.preventDefault();
- setShowCart(false);
- };
- return (
-
+ Shopping Cart +
+ +
+
+
+
+
+ Total Items: {totalItems}
+
+
+ Total Amount: ${calculateTotalAmount()}
+
+
+
+ {cart.map((item) => (
))}
-
- {item.name}
- {item.cost}
+ {item.description}
+ {item.cost} each
-
- {item.quantity}
-
+
+
+ {item.quantity}
+
+
+
+
+
+ Total: ${calculateTotalCost(item)}
- Total: ${calculateTotalCost(item)}
-
-
-
- + +
);
};
export default CartItem;
-
-
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed0..08f12798c5 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -1,23 +1,43 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice } from "@reduxjs/toolkit";
-export const CartSlice = createSlice({
- name: 'cart',
- initialState: {
- items: [], // Initialize items as an empty array
- },
+const initialState = {
+ items: [],
+};
+
+const cartSlice = createSlice({
+ name: "cart",
+ initialState,
reducers: {
addItem: (state, action) => {
-
+ const existingItem = state.items.find(
+ (item) => item.name === action.payload.name
+ );
+ if (existingItem) {
+ existingItem.quantity += 1;
+ } else {
+ state.items.push({ ...action.payload, quantity: 1 });
+ }
},
removeItem: (state, action) => {
+ state.items = state.items.filter((item) => item.name !== action.payload);
},
updateQuantity: (state, action) => {
-
-
+ const { name, amount } = action.payload;
+ const item = state.items.find((item) => item.name === name);
+ if (item) {
+ item.quantity = amount;
+ // Remove item if quantity becomes 0
+ if (item.quantity <= 0) {
+ state.items = state.items.filter((item) => item.name !== name);
+ }
+ }
+ },
+ clearCart: (state) => {
+ state.items = [];
},
},
});
-export const { addItem, removeItem, updateQuantity } = CartSlice.actions;
-
-export default CartSlice.reducer;
+export const { addItem, removeItem, updateQuantity, clearCart } =
+ cartSlice.actions;
+export default cartSlice.reducer;
diff --git a/src/Header.css b/src/Header.css
new file mode 100644
index 0000000000..60a218c6bb
--- /dev/null
+++ b/src/Header.css
@@ -0,0 +1,159 @@
+/* Header.css */
+
+.navbar {
+ background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
+ color: white;
+ padding: 15px 0;
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.header-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.tag {
+ display: flex;
+ align-items: center;
+}
+
+.tag_home_link {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: white;
+ gap: 15px;
+ transition: transform 0.3s ease;
+}
+
+.tag_home_link:hover {
+ transform: scale(1.05);
+}
+
+.tag_home_link img {
+ height: 60px;
+ width: 60px;
+ border-radius: 50%;
+ border: 3px solid rgba(255, 255, 255, 0.2);
+}
+
+.tag_home_link h3 {
+ font-size: 28px;
+ font-weight: 700;
+ margin: 0;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.luxury {
+ display: flex;
+ align-items: center;
+}
+
+.ul {
+ list-style: none;
+ display: flex;
+ gap: 40px;
+ margin: 0;
+ padding: 0;
+}
+
+.nav-links {
+ display: flex;
+ align-items: center;
+ gap: 40px;
+}
+
+.nav-links li {
+ margin: 0;
+}
+
+.nav-links a {
+ color: white;
+ text-decoration: none;
+ font-size: 18px;
+ font-weight: 600;
+ padding: 8px 16px;
+ border-radius: 5px;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.nav-links a:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ transform: translateY(-2px);
+}
+
+.cart-link-wrapper {
+ position: relative;
+}
+
+.cart-link {
+ position: relative;
+ padding: 8px 20px !important;
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 25px;
+}
+
+.cart-icon {
+ font-size: 24px;
+}
+
+.cart-text {
+ font-size: 16px;
+}
+
+.cart_quantity_count {
+ position: absolute;
+ top: -8px;
+ right: 5px;
+ background-color: #ff5252;
+ color: white;
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 14px;
+ font-weight: bold;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+@media (max-width: 768px) {
+ .header-container {
+ flex-direction: column;
+ gap: 15px;
+ padding: 15px;
+ }
+
+ .nav-links {
+ gap: 20px;
+ }
+
+ .ul {
+ gap: 20px;
+ }
+
+ .nav-links a {
+ font-size: 16px;
+ padding: 6px 12px;
+ }
+
+ .tag_home_link h3 {
+ font-size: 22px;
+ }
+
+ .tag_home_link img {
+ height: 50px;
+ width: 50px;
+ }
+}
\ No newline at end of file
diff --git a/src/Header.jsx b/src/Header.jsx
new file mode 100644
index 0000000000..51754e95a4
--- /dev/null
+++ b/src/Header.jsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { useSelector } from "react-redux";
+import "./Header.css";
+
+const Header = () => {
+ const cartItems = useSelector((state) => state.cart.items);
+ const totalItems = cartItems.reduce(
+ (total, item) => total + item.quantity,
+ 0
+ );
+
+ return (
+ - + +
+
+
+
+ Order Summary
+
+ Subtotal ({totalItems} items):
+ ${calculateTotalAmount()}
+
+
+ Shipping:
+ $5.99
+
+
+ Total:
+
+ ${(parseFloat(calculateTotalAmount()) + 5.99).toFixed(2)}
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Paradise Nursery
+ +
-
-
- {!showCart ? (
-
-
+ // Re-enable button after 2 seconds
+ setTimeout(() => {
+ setAddedToCart((prev) => ({
+ ...prev,
+ [plant.name]: false,
+ }));
+ }, 2000);
+ };
-
-
- 
-
+ // Calculate total items in cart
+ const totalItems = cartItems.reduce(
+ (total, item) => total + item.quantity,
+ 0
+ );
+ // Get unique categories
+ const categories = [...new Set(plantsArray.map((plant) => plant.category))];
+ return (
+
-
- ,
-)
+
+);
diff --git a/src/store.js b/src/store.js
index 54d0d6d66e..07a2d8b3c8 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,8 +1,10 @@
-import { configureStore } from '@reduxjs/toolkit';
-import cartReducer from './CartSlice';
- const store = configureStore({
- reducer: {
- cart: cartReducer,
- },
+import { configureStore } from "@reduxjs/toolkit";
+import cartReducer from "./CartSlice";
+
+const store = configureStore({
+ reducer: {
+ cart: cartReducer,
+ },
});
-export default store
+
+export default store;
diff --git a/vite.config.js b/vite.config.js
index 4d190ae430..9cc50ead1c 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,8 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
- base: "/shoppingreact",
plugins: [react()],
-})
+});
+
+ );
+};
export default ProductList;
diff --git a/src/main.jsx b/src/main.jsx
index 9ea042ec2b..08b52de099 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,13 +1,14 @@
-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 { Provider } from "react-redux";
+import App from "./App.jsx";
+import store from "./store.js";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+
+
+ {categories.map((category) => (
+
+
+
+
+ Our Plant Collection
+
+
+ Total Items in Cart: {totalItems}
+
+
+
+
- );
-}
+ ))}
+ {category} Plants
+
+ {plantsArray
+ .filter((plant) => plant.category === category)
+ .map((plant, index) => (
+
+ 
+
- ) : (
-
+
{plant.name}
+{plant.description}
+
+ {plant.cost}
+
+
+