diff --git a/package-lock.json b/package-lock.json index cbc835e..bfa9864 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,10 +8,12 @@ "name": "frontend", "version": "0.1.0", "dependencies": { + "@emotion/react": "^11.11.4", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", + "react-awesome-reveal": "^4.2.11", "react-dom": "^18.2.0", "react-icons": "^5.0.1", "react-router-dom": "^6.16.0", @@ -2274,6 +2276,75 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/babel-plugin": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", + "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", + "dependencies": { + "@babel/helper-module-imports": "^7.16.7", + "@babel/runtime": "^7.18.3", + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/serialize": "^1.1.2", + "babel-plugin-macros": "^3.1.0", + "convert-source-map": "^1.5.0", + "escape-string-regexp": "^4.0.0", + "find-root": "^1.1.0", + "source-map": "^0.5.7", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" + }, + "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@emotion/babel-plugin/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, + "node_modules/@emotion/cache": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", + "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", + "dependencies": { + "@emotion/memoize": "^0.8.1", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "stylis": "4.2.0" + } + }, + "node_modules/@emotion/cache/node_modules/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" + }, + "node_modules/@emotion/hash": { + "version": "0.9.1", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", + "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" + }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", @@ -2287,11 +2358,74 @@ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, + "node_modules/@emotion/react": { + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.3", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1", + "@emotion/weak-memoize": "^0.3.1", + "hoist-non-react-statics": "^3.3.1" + }, + "peerDependencies": { + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@emotion/serialize": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "dependencies": { + "@emotion/hash": "^0.9.1", + "@emotion/memoize": "^0.8.1", + "@emotion/unitless": "^0.8.1", + "@emotion/utils": "^1.2.1", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/serialize/node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/@emotion/sheet": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", + "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" + }, "node_modules/@emotion/unitless": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz", "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==" }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@emotion/utils": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", + "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==" + }, + "node_modules/@emotion/weak-memoize": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", + "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==" + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -8343,6 +8477,11 @@ "url": "https://github.com/avajs/find-cache-dir?sponsor=1" } }, + "node_modules/find-root": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" + }, "node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -8970,6 +9109,19 @@ "he": "bin/he" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, + "node_modules/hoist-non-react-statics/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -14605,6 +14757,34 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-awesome-reveal": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/react-awesome-reveal/-/react-awesome-reveal-4.2.11.tgz", + "integrity": "sha512-BXdU3nzZkRYf6h2lIx4SCMEERhIQd7wKheHKRH8U9601m1U2W4LrwEpKbpUxIPWSjcUwci4w7EotdfF+9ZQHhQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/morellodev" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/react-awesome-reveal" + } + ], + "dependencies": { + "react-intersection-observer": "^9.10.2", + "react-is": "^18.3.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0", + "react": ">=16.14.0" + } + }, + "node_modules/react-awesome-reveal/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14747,6 +14927,20 @@ "react": "*" } }, + "node_modules/react-intersection-observer": { + "version": "9.10.2", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.2.tgz", + "integrity": "sha512-j2hGADK2hCbAlfaq6L3tVLb4iqngoN7B1fT16MwJ4J16YW/vWLcmAIinLsw0lgpZeMi4UDUWtHC9QDde0/P1yQ==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 99aa3e3..1b4c785 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.11.4", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", + "react-awesome-reveal": "^4.2.11", "react-dom": "^18.2.0", "react-icons": "^5.0.1", "react-router-dom": "^6.16.0", diff --git a/src/Components/CartItems/CartItems.jsx b/src/Components/CartItems/CartItems.jsx index fe6ef80..2a72d13 100644 --- a/src/Components/CartItems/CartItems.jsx +++ b/src/Components/CartItems/CartItems.jsx @@ -3,6 +3,7 @@ import "./CartItems.css"; import { ShopContext } from "../../Context/ShopContext"; import remove_icon from "../Assets/cart_cross_icon.png"; import placeholder_image from "../Assets/empty-cart.png"; +import { Fade } from "react-awesome-reveal"; const CartItems = () => { const { cartItems, removeFromCart, getTotalCartAmount, theme } = @@ -19,6 +20,7 @@ const CartItems = () => { return (
+

Products

Title

Price

@@ -26,7 +28,9 @@ const CartItems = () => {

Quantity

Total

Remove

+
+ {isEmptyCart && (
{
+ ); }; diff --git a/src/Components/Footer/Footer.jsx b/src/Components/Footer/Footer.jsx index 75f8338..cdf25c2 100644 --- a/src/Components/Footer/Footer.jsx +++ b/src/Components/Footer/Footer.jsx @@ -6,11 +6,13 @@ import pintester_icon from "../Assets/pintester_icon.png"; import whatsapp_icon from "../Assets/whatsapp_icon.png"; import { Link } from "react-router-dom"; import { ShopContext } from "../../Context/ShopContext"; +import { Fade } from "react-awesome-reveal"; const Footer = () => { const { theme } = useContext(ShopContext); return (
+

ShopNex

@@ -45,8 +47,11 @@ const Footer = () => {
+

Copyright @ {new Date().getFullYear()} - All Rights Reserved

+
+
); }; diff --git a/src/Components/Hero/Hero.jsx b/src/Components/Hero/Hero.jsx index 85c8ba5..17ba93a 100644 --- a/src/Components/Hero/Hero.jsx +++ b/src/Components/Hero/Hero.jsx @@ -5,30 +5,39 @@ import arrow_icon from "../Assets/arrow.png"; import hero_image from "../Assets/hero_image.png"; import { ShopContext } from "../../Context/ShopContext"; import { Link } from "react-router-dom"; +import { Fade, Slide } from "react-awesome-reveal"; const Hero = () => { const { theme } = useContext(ShopContext); return (
+

NEW ARRIVALS ONLY

+
+

New

Collections

For Everyone

+
+
Latest Collection
+
+ +
); diff --git a/src/Components/Item/Item.jsx b/src/Components/Item/Item.jsx index bb73f99..153f7b0 100644 --- a/src/Components/Item/Item.jsx +++ b/src/Components/Item/Item.jsx @@ -2,10 +2,12 @@ import React, { useContext } from 'react' import './Item.css' import { Link } from 'react-router-dom' import { ShopContext } from '../../Context/ShopContext' +import { Fade } from "react-awesome-reveal"; const Item = (props) => { const {theme}=useContext(ShopContext); return ( +

{props.name}

{props.id}

@@ -14,6 +16,7 @@ const Item = (props) => {
${props.old_price}
+ ) } diff --git a/src/Components/Navbar/Navbar.jsx b/src/Components/Navbar/Navbar.jsx index d5adea5..1b2e3a0 100644 --- a/src/Components/Navbar/Navbar.jsx +++ b/src/Components/Navbar/Navbar.jsx @@ -7,6 +7,7 @@ import moonIcon from '../Assets/dark_mode.png'; import sunIcon from '../Assets/light_mode.png'; import { Link } from 'react-router-dom'; import { ShopContext } from '../../Context/ShopContext'; +import { Slide } from "react-awesome-reveal"; const Navbar = () => { const [icon, setIcon] = useState(cart_icon); @@ -29,6 +30,7 @@ const Navbar = () => { return ( + ) } diff --git a/src/Components/NewCollections/NewCollections.jsx b/src/Components/NewCollections/NewCollections.jsx index 33ed9af..f68c11f 100644 --- a/src/Components/NewCollections/NewCollections.jsx +++ b/src/Components/NewCollections/NewCollections.jsx @@ -3,19 +3,21 @@ import './NewCollections.css' import new_collection from '../Assets/new_collections' import Item from '../Item/Item' import { ShopContext } from '../../Context/ShopContext' +import { Fade } from "react-awesome-reveal"; const NewCollections = () => { const {theme}=useContext(ShopContext); return (
+

NEW COLLECTIONS

+
{new_collection.map((item,i)=>{ return })}
-
) } diff --git a/src/Components/NewsLetter/NewsLetter.jsx b/src/Components/NewsLetter/NewsLetter.jsx index 655461c..44ee9f5 100644 --- a/src/Components/NewsLetter/NewsLetter.jsx +++ b/src/Components/NewsLetter/NewsLetter.jsx @@ -1,8 +1,10 @@ import React from "react"; import "./NewsLetter.css"; +import { Fade } from "react-awesome-reveal"; const NewsLetter = () => { return ( +

Get Exclusive Offers On Your Email

Subscribe to Our NewsLetter and Stay Updated

@@ -11,6 +13,7 @@ const NewsLetter = () => {
+ ); }; diff --git a/src/Components/Offers/Offers.jsx b/src/Components/Offers/Offers.jsx index df97d92..1335f7d 100644 --- a/src/Components/Offers/Offers.jsx +++ b/src/Components/Offers/Offers.jsx @@ -3,11 +3,13 @@ import "./Offers.css"; import exclusive_image from "../Assets/exclusive_image.png"; import { ShopContext } from "../../Context/ShopContext"; import { Link } from "react-router-dom"; +import { Zoom } from "react-awesome-reveal"; const Offers = () => { const { theme } = useContext(ShopContext); return ( +

Exclusive

@@ -19,6 +21,7 @@ const Offers = () => {
+ ); }; diff --git a/src/Components/Popular/Popular.jsx b/src/Components/Popular/Popular.jsx index fec7ed3..a95b75d 100644 --- a/src/Components/Popular/Popular.jsx +++ b/src/Components/Popular/Popular.jsx @@ -3,12 +3,15 @@ import './Popular.css' import data_product from '../Assets/data' import Item from '../Item/Item' import { ShopContext } from '../../Context/ShopContext' +import { Fade } from "react-awesome-reveal"; const Popular = () => { const{theme}=useContext(ShopContext); return (
+

POPULAR IN WOMEN

+
{data_product.map((item,i)=>{ diff --git a/src/Pages/LoginSignup.jsx b/src/Pages/LoginSignup.jsx index bd38449..03c48ef 100644 --- a/src/Pages/LoginSignup.jsx +++ b/src/Pages/LoginSignup.jsx @@ -1,10 +1,12 @@ import React from 'react' import * as Components from './Components'; +import { Fade } from "react-awesome-reveal"; const LoginSignup = () => { const [signIn, toggle] = React.useState(true); return( + @@ -55,7 +57,7 @@ const LoginSignup = () => { - + ) } diff --git a/src/Pages/ShopCategory.jsx b/src/Pages/ShopCategory.jsx index c882d01..0fdf476 100644 --- a/src/Pages/ShopCategory.jsx +++ b/src/Pages/ShopCategory.jsx @@ -3,6 +3,7 @@ import './CSS/ShopCategory.css'; import { ShopContext } from '../Context/ShopContext'; import dropdown_icon from '../Components/Assets/dropdown_icon.png'; import Item from '../Components/Item/Item'; +import { Fade } from "react-awesome-reveal"; const ShopCategory = (props) => { const { all_product, theme } = useContext(ShopContext); @@ -40,7 +41,9 @@ const ShopCategory = (props) => { return (
+ +

{`Showing ${startIndex + 1}-${endIndex}`} out of {totalProducts} products