From d19a649b2926437dedd8604b35e7909e3ac647a9 Mon Sep 17 00:00:00 2001 From: Sitambhra Salaria <110994217+Sitambhra02@users.noreply.github.com> Date: Thu, 2 Jan 2025 13:19:38 +0530 Subject: [PATCH 01/15] Replaced second 'Add to Cart' button with 'Buy Now' button --- package-lock.json | 190 ---------------------------------------------- src/Pages/Shop.js | 12 ++- 2 files changed, 9 insertions(+), 193 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6d8cef7..c69f3e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,112 +4216,6 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/@testing-library/dom/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "license": "MIT", - "peer": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/dom/node_modules/aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "license": "Apache-2.0", - "peer": true, - "dependencies": { - "dequal": "^2.0.3" - } - }, - "node_modules/@testing-library/dom/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "license": "MIT", - "peer": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/dom/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "license": "MIT", - "peer": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/dom/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "license": "MIT", - "peer": true - }, - "node_modules/@testing-library/dom/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/dom/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "license": "MIT", - "peer": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6488,13 +6382,6 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, - "node_modules/bezier-easing": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", - "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", - "license": "MIT", - "peer": true - }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6532,13 +6419,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/bindall-standalone": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", - "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", - "license": "MIT", - "peer": true - }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7879,16 +7759,6 @@ "node": ">= 0.8" } }, - "node_modules/dequal": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", - "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=6" - } - }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13766,13 +13636,6 @@ "shell-quote": "^1.8.1" } }, - "node_modules/lethargy": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", - "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", - "license": "MIT", - "peer": true - }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13845,18 +13708,6 @@ "node": ">=8" } }, - "node_modules/locomotive-scroll": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", - "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", - "license": "MIT", - "peer": true, - "dependencies": { - "bezier-easing": "^2.1.0", - "smoothscroll-polyfill": "^0.4.4", - "virtual-scroll": "^1.5.2" - } - }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17815,13 +17666,6 @@ "node": ">=8" } }, - "node_modules/smoothscroll-polyfill": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", - "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", - "license": "MIT", - "peer": true - }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18917,13 +18761,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, - "node_modules/tiny-emitter": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", - "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", - "license": "MIT", - "peer": true - }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19196,20 +19033,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "license": "Apache-2.0", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19480,19 +19303,6 @@ "node": ">= 0.8" } }, - "node_modules/virtual-scroll": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", - "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", - "license": "MIT", - "peer": true, - "dependencies": { - "bindall-standalone": "^1.0.5", - "lethargy": "^1.0.2", - "object-assign": "^4.0.1", - "tiny-emitter": "^1.0.0" - } - }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 739b892..9cfb4b7 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -2,10 +2,11 @@ import { motion } from "framer-motion"; import React from "react"; import { useDispatch } from "react-redux"; +import { useNavigate } from "react-router-dom"; import styled from "styled-components"; import { addToCart } from "../Store/cartSlice"; import Button from "../componets/Button"; - + const ShopContainer = styled.div` padding: 6rem 2rem 4rem 2rem; // Added top padding for navbar max-width: 1200px; @@ -542,11 +543,16 @@ const products = [ function Shop() { const dispatch = useDispatch(); - + const navigate = useNavigate(); const handleAddToCart = (product) => { dispatch(addToCart(product)); }; + const handleBuyNow = (product) => { + dispatch(addToCart(product)); + navigate("/checkout"); + + }; return ( handleAddToCart(product)}> Add to Cart </Button> - <StyledButton onClick={() => handleAddToCart(product)}>Add to Cart</StyledButton> + <StyledButton onClick={() => handleBuyNow(product)}>Buy Now</StyledButton> </ProductInfo> </ProductCard> From 773cc4609f812c30c86bd2c4d8d9f28aaa2b89b0 Mon Sep 17 00:00:00 2001 From: Sitambhra Salaria <110994217+Sitambhra02@users.noreply.github.com> Date: Thu, 2 Jan 2025 14:48:29 +0530 Subject: [PATCH 02/15] Fix button layout and spacing, enhance responsiveness, and refactor button styling on Shop page --- src/Pages/Shop.js | 13 +++++++++++++ src/Pages/checkOut.js | 2 +- src/componets/Button.js | 16 +++++++++++++++- 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js index 9cfb4b7..52fe563 100644 --- a/src/Pages/Shop.js +++ b/src/Pages/Shop.js @@ -116,6 +116,16 @@ const StyledButton = styled.button` box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } `; +const ButtonContainer = styled.div` + display: flex; + flex-direction: row; /* Default to horizontal layout */ + gap: 10px; /* Add space between the buttons */ + + @media (max-width: 768px) { + flex-direction: column; /* Stack buttons vertically on small screens */ + gap: 10px; /* Add space between stacked buttons */ + } +`; const products = [ { @@ -579,10 +589,13 @@ function Shop() { <ProductInfo> <ProductName>{product.name}</ProductName> <ProductPrice>${product.price.toFixed(2)}</ProductPrice> + <ButtonContainer> + <Button onClick={() => handleAddToCart(product)}> Add to Cart </Button> <StyledButton onClick={() => handleBuyNow(product)}>Buy Now</StyledButton> + </ButtonContainer> </ProductInfo> </ProductCard> diff --git a/src/Pages/checkOut.js b/src/Pages/checkOut.js index c02ffd2..69a64fc 100644 --- a/src/Pages/checkOut.js +++ b/src/Pages/checkOut.js @@ -8,7 +8,7 @@ import { clearCart } from '../Store/cartSlice'; const CheckoutContainer = styled.div` padding: 4rem 2rem; max-width: 800px; - margin: 0 auto; + margin: 3.75rem auto; `; const Title = styled(motion.h1)` diff --git a/src/componets/Button.js b/src/componets/Button.js index 3c6afe6..076e261 100644 --- a/src/componets/Button.js +++ b/src/componets/Button.js @@ -11,20 +11,34 @@ const StyledButton = styled(motion.button)` border-radius: 4px; cursor: pointer; transition: all 0.3s ease; + margin-right: ${props => props.noMargin ? '0' : '10px'}; /* Add margin for spacing */ + &:hover { background-color: ${props => props.primary ? '#7c2214' : 'white'}; color: ${props => props.primary ? 'white' : '#7c2214'} } `; +const ButtonContainer = styled.div` + display: flex; + flex-direction: row; /* Default to horizontal layout */ + gap: 10px; /* Add space between the buttons */ -const Button = ({ children, primary, onClick, ...props }) => { + @media (max-width: 768px) { + flex-direction: column; /* Stack buttons vertically on small screens */ + gap: 10px; /* Add space between stacked buttons */ + } +`; + +const Button = ({ children, primary, onClick, noMargin, ...props }) => { return ( <StyledButton primary={primary} onClick={onClick} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} + noMargin={noMargin} /* pass the noMargin prop */ + {...props} > {children} From eac0d548c641bebfacfb23eb93a87fe5f24ab1e7 Mon Sep 17 00:00:00 2001 From: Utkarsh973 <utkarsh973@gmail.com> Date: Thu, 2 Jan 2025 19:01:35 +0530 Subject: [PATCH 03/15] Enhanced Testimonial Pages --- src/Pages/Testimonial.css | 200 ++++++++++++++++++++----------------- src/Pages/Testimonial.js | 201 +++++++++++++++----------------------- 2 files changed, 194 insertions(+), 207 deletions(-) diff --git a/src/Pages/Testimonial.css b/src/Pages/Testimonial.css index faed088..2d914d8 100644 --- a/src/Pages/Testimonial.css +++ b/src/Pages/Testimonial.css @@ -1,108 +1,134 @@ -*{ - margin:0; +* { + margin: 0; padding: 0; - font-family: 'poppins', sans-serif ; -} - -.testimonial{ - background:#f8f8f8; - height:90vh; -} -h1{ + font-family: 'Poppins', sans-serif; + } + + body { + padding-top: 70px; + } + + .testimonial { + background: linear-gradient(to bottom, #f5e3dc, #e5d0c3); + padding: 5%; text-align: center; - color: #7c2214; -} - -.container{ - margin-top: 5%; -} - -.image-text{ - width:100% ; + background-image: url('https://www.transparenttextures.com/patterns/wood-pattern.png'); + background-blend-mode: overlay; + background-size: cover; + } + + h1 { + font-size: 2.5rem; + color: #6f4e37; + margin-bottom: 2rem; + animation: fadeIn 1s ease-in-out; + } + + .carousel-container { + position: relative; + } + + .testimonial-row { + display: flex; + justify-content: center; + gap: 2rem; + padding: 5rem 0; + } + + .single { + position: relative; + width: 300px; height: 300px; - display: block; text-align: center; - padding: 40% 5%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding-top: 70px; background: white; - color:black ; - border-radius: 15px; - box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.1); - animation: fadeInUp 1s ease-in-out; /* Added animation */ -} - -.image-text h2{ - font-size: 25px; - text-transform: uppercase; - letter-spacing: 2px; -} - -.image-text p{ - font-size: 14px; -} - -.single{ - position: relative; - margin-bottom: 50px; -} - -.image{ + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + animation: fadeInUp 1s ease-in-out; + } + + .image { position: absolute; - width:100px; - height: 100px; - border: 3px solid #7c2214; - overflow: hidden; - top:15px; - left:125px; + top: -60px; + left: 50%; + transform: translateX(-50%); + width: 120px; + height: 120px; + border: 5px solid #7c2214; border-radius: 50%; - animation: bounceIn 1s ease-in-out; /* Added animation */ -} - -.image img{ + overflow: hidden; + background: #fff; + } + + .image img { width: 100%; + height: 100%; object-fit: cover; -} - -.carousel-indicators{ - left: 0; - top: auto; - bottom: -70px; -} - -@keyframes fadeInUp { + object-position: center; + } + + .image-text { + padding: 20px; + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + } + + .image-text h2 { + font-size: 1.5rem; + margin-bottom: 1rem; + color: #7c2214; + } + + .image-text p { + font-size: 1rem; + color: #333; + } + + + .carousel-control-prev-icon, + .carousel-control-next-icon { + filter: invert(1); + } + + @keyframes fadeIn { 0% { - opacity: 0; - transform: translateY(20px); + opacity: 0; + transform: translateY(-20px); } 100% { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes bounceIn { - 0%, 20%, 40%, 60%, 80%, 100% { - -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); - animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + opacity: 1; + transform: translateY(0); } + } + + @keyframes fadeInUp { 0% { - opacity: 0; - transform: scale3d(.3, .3, .3); + opacity: 0; + transform: translateY(20px); } - 20% { - transform: scale3d(1.1, 1.1, 1.1); + 100% { + opacity: 1; + transform: translateY(0); } - 40% { - transform: scale3d(.9, .9, .9); + } + + @keyframes bounceIn { + 0% { + transform: scale(0.5); + opacity: 0; } 60% { - opacity: 1; - transform: scale3d(1.03, 1.03, 1.03); - } - 80% { - transform: scale3d(.97, .97, .97); + transform: scale(1.2); + opacity: 1; } 100% { - opacity: 1; - transform: scale3d(1, 1, 1); + transform: scale(1); } -} + } + \ No newline at end of file diff --git a/src/Pages/Testimonial.js b/src/Pages/Testimonial.js index d6a7489..e10621b 100644 --- a/src/Pages/Testimonial.js +++ b/src/Pages/Testimonial.js @@ -1,132 +1,93 @@ -import React from 'react' -import './Testimonial.css' +import React from 'react'; +import './Testimonial.css'; - - function Testimonial() { +function Testimonial() { return ( <> - <div className="testimonial"> - + <div className="testimonial"> <div className="container"> - <h1>What Our Customer Says</h1> - <div className="row"> - <div className="col-md-12"> - <div id="carouselExampleSlidesOnly" className="carousel slide" data-bs-ride="carousel"> - <div className="carousel-indicators"> - <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button> - <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button> - </div> - <div className="carousel-inner"> - <div className="carousel-item active"> - <div className="row"> - <div className="col-md-4"> - <div className="single"> - <div className="image"> - <img src="https://images.unsplash.com/photo-1592493552901-9f0ef0d6f702?q=80&w=415&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={(100)} height={(100)} alt="" /> - </div> - <div className="image-text"> - <h2>Devolina</h2> - <p>⭐️⭐️⭐️⭐️</p> - <p> - -"Best coffee in town! The aroma of freshly brewed coffee hits you the moment you walk in. Their baristas are true artists, and every cup is a masterpiece.</p> - </div> - </div> - - </div> - <div className="col-md-4"> - <div className="single"> - <div className="image"> - <img src="https://plus.unsplash.com/premium_photo-1670884522719-d7f4bcdfcbeb?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={(100)} height={(100)} alt="" /> - </div> - <div className="image-text"> - <h2>Priya Jha</h2> - <p>⭐️⭐️⭐️⭐️</p> - <p>A hidden gem! This coffee shop not only has a fantastic selection of drinks but also a mouth-watering array of pastries.</p> - </div> - </div> - - </div> - <div className="col-md-4"> - <div className="single"> - <div className="image"> - <img src="https://images.unsplash.com/photo-1679673988162-018d0400240e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={(100)} height={(100)} alt="" /> - </div> - <div className="image-text"> - <h2>Hellan</h2> - <p>⭐️⭐️⭐️⭐️</p> - <p>"Perfect spot to unwind. The music is just the right volume, the seating is comfortable, and there’s always a good mix of people.</p> - </div> - </div> - - </div> - </div> - </div> - - <div className="carousel-item"> - <div className="row"> - <div className="col-md-4"> - <div className="single"> - <div className="image"> - <img src="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={(100)} height={(100)} alt="" /> - </div> - <div className="image-text"> - <h2>David</h2> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tenetur qui sapiente voluptatum consectetur hic id praesentium, harum dicta eligendi, iste cupiditate reprehenderit. - Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?</p> - </div> - </div> - - </div> - <div className="col-md-4"> - <div className="single"> - <div className="image"> - <img src="https://images.unsplash.com/photo-1622020920816-cd528763211a?q=80&w=1908&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={(100)} height={(100)} alt="" /> - </div> - <div className="image-text"> - <h2>John</h2> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tenetur qui sapiente voluptatum consectetur hic id praesentium, harum dicta eligendi, iste cupiditate reprehenderit. - Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?</p> - </div> - </div> - - </div> - <div className="col-md-4"> - <div className="single"> - <div className="image"> - <img src="https://images.unsplash.com/photo-1709863990963-30e6d4e9cacc?q=80&w=2075&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={(100)} height={(100)} alt="" /> - </div> - <div className="image-text"> - <h2>Sandy</h2> - <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. - Tenetur qui sapiente voluptatum consectetur hic id praesentium, harum dicta eligendi, iste cupiditate reprehenderit. - Porro veritatis obcaecati sequi necessitatibus quidem nemo ratione?</p> - </div> - </div> - </div> - </div> - - </div> - <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev"> - <span className="carousel-control-prev-icon" aria-hidden="true"></span> - <span className="visually-hidden">Previous</span> - </button> - <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next"> - <span className="carousel-control-next-icon" aria-hidden="true"></span> - <span className="visually-hidden">Next</span> - </button> - </div> + <h1>What Our Customers Say</h1> + <div className="carousel-container"> + <div id="carouselExampleSlidesOnly" className="carousel slide" data-bs-ride="carousel"> + <div className="carousel-indicators"> + <button type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button> + <button type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide-to="1" aria-label="Slide 2"></button> + </div> + <div className="carousel-inner"> + <div className="carousel-item active"> + <div className="testimonial-row"> + <TestimonialCard + name="Devolina" + image="https://images.unsplash.com/photo-1592493552901-9f0ef0d6f702?q=80&w=415&auto=format&fit=crop" + rating="⭐️⭐️⭐️⭐️" + text="Best coffee in town! The aroma of freshly brewed coffee hits you the moment you walk in. Their baristas are true artists." + /> + <TestimonialCard + name="Priya Jha" + image="https://plus.unsplash.com/premium_photo-1670884522719-d7f4bcdfcbeb?q=80&w=1887&auto=format&fit=crop" + rating="⭐️⭐️⭐️⭐️" + text="A hidden gem! This coffee shop not only has a fantastic selection of drinks but also a mouth-watering array of pastries." + /> + <TestimonialCard + name="Hellan" + image="https://images.unsplash.com/photo-1679673988162-018d0400240e?q=80&w=2070&auto=format&fit=crop" + rating="⭐️⭐️⭐️⭐️" + text="Perfect spot to unwind. The music is just the right volume, the seating is comfortable, and there’s always a good mix of people." + /> + </div> + </div> + <div className="carousel-item"> + <div className="testimonial-row"> + <TestimonialCard + name="David" + image="https://plus.unsplash.com/premium_photo-1671656349322-41de944d259b?q=80&w=1887&auto=format&fit=crop" + rating="⭐️⭐️⭐️⭐️" + text="Great ambiance! The coffee is superb, and the staff are always friendly. I love spending time here." + /> + <TestimonialCard + name="John" + image="https://images.unsplash.com/photo-1622020920816-cd528763211a?q=80&w=1908&auto=format&fit=crop" + rating="⭐️⭐️⭐️⭐️⭐️" + text="This place has a charm of its own. The decor, the food, and the people make it a must-visit for any coffee lover." + /> + <TestimonialCard + name="Sandy" + image="https://images.unsplash.com/photo-1709863990963-30e6d4e9cacc?q=80&w=2075&auto=format&fit=crop" + rating="⭐️⭐️⭐️⭐️⭐️" + text="The best coffee shop experience I’ve ever had. It’s like a little piece of heaven in the city!" + /> </div> - </div> + </div> + </div> + <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="prev"> + <span className="carousel-control-prev-icon" aria-hidden="true"></span> + <span className="visually-hidden">Previous</span> + </button> + <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleSlidesOnly" data-bs-slide="next"> + <span className="carousel-control-next-icon" aria-hidden="true"></span> + <span className="visually-hidden">Next</span> + </button> </div> + </div> </div> - </div> + </div> </> ); } -export default Testimonial; - +function TestimonialCard({ name, image, rating, text }) { + return ( + <div className="single"> + <div className="image"> + <img src={image} alt={name} /> + </div> + <div className="image-text"> + <h2>{name}</h2> + <p>{rating}</p> + <p>{text}</p> + </div> + </div> + ); +} +export default Testimonial; From c09cc2e7422e86b2bc86185e8e9990bb7511633d Mon Sep 17 00:00:00 2001 From: Neeru <161798182+neeru24@users.noreply.github.com> Date: Thu, 2 Jan 2025 14:16:47 +0000 Subject: [PATCH 04/15] Commit Changes --- package-lock.json | 190 +++++++++++++++++++++++++++++++++++++++++++ src/Pages/contact.js | 11 +++ 2 files changed, 201 insertions(+) diff --git a/package-lock.json b/package-lock.json index c69f3e6..6d8cef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,6 +4216,112 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6382,6 +6488,13 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT", + "peer": true + }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6419,6 +6532,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bindall-standalone": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", + "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", + "license": "MIT", + "peer": true + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7759,6 +7879,16 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13636,6 +13766,13 @@ "shell-quote": "^1.8.1" } }, + "node_modules/lethargy": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", + "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", + "license": "MIT", + "peer": true + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13708,6 +13845,18 @@ "node": ">=8" } }, + "node_modules/locomotive-scroll": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", + "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bezier-easing": "^2.1.0", + "smoothscroll-polyfill": "^0.4.4", + "virtual-scroll": "^1.5.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17666,6 +17815,13 @@ "node": ">=8" } }, + "node_modules/smoothscroll-polyfill": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", + "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", + "license": "MIT", + "peer": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18761,6 +18917,13 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", + "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", + "license": "MIT", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19033,6 +19196,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19303,6 +19480,19 @@ "node": ">= 0.8" } }, + "node_modules/virtual-scroll": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", + "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bindall-standalone": "^1.0.5", + "lethargy": "^1.0.2", + "object-assign": "^4.0.1", + "tiny-emitter": "^1.0.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/Pages/contact.js b/src/Pages/contact.js index 54bf9f7..8b8f4ee 100644 --- a/src/Pages/contact.js +++ b/src/Pages/contact.js @@ -26,6 +26,11 @@ const Input = styled.input` font-size: 1rem; border: 1px solid #ccc; border-radius: 4px; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.05); /* Slightly scales up the input */ + } `; const TextArea = styled.textarea` @@ -34,8 +39,14 @@ const TextArea = styled.textarea` border: 1px solid #ccc; border-radius: 4px; min-height: 150px; + transition: transform 0.3s ease-in-out; + + &:hover { + transform: scale(1.05); /* Slightly scales up the textarea */ + } `; + function Contact() { const [formData, setFormData] = useState({ name: '', From b60f1ddb809079d8caed2e009953e8ad5d5c2ade Mon Sep 17 00:00:00 2001 From: SUJAY <hksujay03@gmail.com> Date: Thu, 2 Jan 2025 20:04:16 +0530 Subject: [PATCH 05/15] Forget Password feature added --- package-lock.json | 208 ++++++++++++++++++++++++++++++++++++ package.json | 2 + src/App.js | 3 +- src/Pages/ForgetPassword.js | 99 +++++++++++++++++ src/Pages/login.js | 51 ++++++--- 5 files changed, 345 insertions(+), 18 deletions(-) create mode 100644 src/Pages/ForgetPassword.js diff --git a/package-lock.json b/package-lock.json index c69f3e6..05518d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@headlessui/react": "^2.1.8", "@heroicons/react": "^2.1.5", + "@lottiefiles/dotlottie-react": "^0.12.0", "@reduxjs/toolkit": "^2.2.7", "@tailwindcss/typography": "^0.5.15", "@testing-library/jest-dom": "^5.17.0", @@ -18,6 +19,7 @@ "@testing-library/user-event": "^13.5.0", "framer-motion": "^11.9.0", "gsap": "^3.12.5", + "lottie-react": "^2.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-locomotive-scroll": "^0.2.2", @@ -3554,6 +3556,22 @@ "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==", "license": "MIT" }, + "node_modules/@lottiefiles/dotlottie-react": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-react/-/dotlottie-react-0.12.0.tgz", + "integrity": "sha512-33Tsd67vlotrm43R8oko30Krwyuqb0YdOLra7L5m2mVfrTvDPEDBt8jfjgiveoLJ0jG/FlTLiCPXi/vCaBSXrg==", + "dependencies": { + "@lottiefiles/dotlottie-web": "0.38.2" + }, + "peerDependencies": { + "react": "^17 || ^18 || ^19" + } + }, + "node_modules/@lottiefiles/dotlottie-web": { + "version": "0.38.2", + "resolved": "https://registry.npmjs.org/@lottiefiles/dotlottie-web/-/dotlottie-web-0.38.2.tgz", + "integrity": "sha512-01d+UjJ8NG7ZStYQxtb8FPzknzGmauG7gEkcH+wHfSdiSQJY9PoBNVSTB9V6F5hAnmFqOxaocTtd7TIEEnzMnA==" + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4216,6 +4234,104 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6382,6 +6498,12 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "peer": true + }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6419,6 +6541,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bindall-standalone": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", + "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", + "peer": true + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7759,6 +7887,15 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13636,6 +13773,12 @@ "shell-quote": "^1.8.1" } }, + "node_modules/lethargy": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", + "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", + "peer": true + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13708,6 +13851,17 @@ "node": ">=8" } }, + "node_modules/locomotive-scroll": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", + "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", + "peer": true, + "dependencies": { + "bezier-easing": "^2.1.0", + "smoothscroll-polyfill": "^0.4.4", + "virtual-scroll": "^1.5.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -13768,6 +13922,23 @@ "loose-envify": "cli.js" } }, + "node_modules/lottie-react": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/lottie-react/-/lottie-react-2.4.0.tgz", + "integrity": "sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==", + "dependencies": { + "lottie-web": "^5.10.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==" + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -17666,6 +17837,12 @@ "node": ">=8" } }, + "node_modules/smoothscroll-polyfill": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", + "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", + "peer": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18761,6 +18938,12 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", + "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19033,6 +19216,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19303,6 +19499,18 @@ "node": ">= 0.8" } }, + "node_modules/virtual-scroll": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", + "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", + "peer": true, + "dependencies": { + "bindall-standalone": "^1.0.5", + "lethargy": "^1.0.2", + "object-assign": "^4.0.1", + "tiny-emitter": "^1.0.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/package.json b/package.json index 721e6c2..b422535 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@headlessui/react": "^2.1.8", "@heroicons/react": "^2.1.5", + "@lottiefiles/dotlottie-react": "^0.12.0", "@reduxjs/toolkit": "^2.2.7", "@tailwindcss/typography": "^0.5.15", "@testing-library/jest-dom": "^5.17.0", @@ -13,6 +14,7 @@ "@testing-library/user-event": "^13.5.0", "framer-motion": "^11.9.0", "gsap": "^3.12.5", + "lottie-react": "^2.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-locomotive-scroll": "^0.2.2", diff --git a/src/App.js b/src/App.js index 725c0c3..983d525 100644 --- a/src/App.js +++ b/src/App.js @@ -16,7 +16,7 @@ import Profile from './Pages/profile'; import Checkout from './Pages/checkOut'; import Testimonial from './Pages/Testimonial'; import PremiumBeans from './Pages/PremiumBeans'; - +import ForgetPassword from './Pages/ForgetPassword'; const AppContainer = styled.div` @@ -41,6 +41,7 @@ function App() { <Route path="/" element={<Home />} /> <Route path="/login" element={<Login />} /> <Route path="/register" element={<Register />} /> + <Route path="/forget-password" element={<ForgetPassword />} /> <Route path="/home" element={<Home />} /> <Route path="/shop" element={<Shop />} /> <Route path="/cart" element={<Cart />} /> diff --git a/src/Pages/ForgetPassword.js b/src/Pages/ForgetPassword.js new file mode 100644 index 0000000..38c7503 --- /dev/null +++ b/src/Pages/ForgetPassword.js @@ -0,0 +1,99 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import { motion } from "framer-motion"; + +const ForgetPasswordContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f5f5f5; +`; + +const ForgetPasswordForm = styled(motion.form)` + background-color: white; + padding: 2rem; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 300px; +`; + +const Input = styled.input` + width: 100%; + padding: 0.5rem; + margin-bottom: 1rem; + border: 1px solid #ddd; + border-radius: 4px; +`; + +const Button = styled(motion.button)` + width: 100%; + padding: 0.5rem; + background-color: #7c2214; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +`; + +const Message = styled.div` + margin-top: 1rem; + color: ${({ success }) => (success ? "green" : "red")}; + text-align: center; +`; + +function ForgetPassword() { + const [email, setEmail] = useState(""); + const [message, setMessage] = useState(""); + const [isValid, setIsValid] = useState(false); + + const validateEmail = (email) => { + // Regex for basic email validation + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailRegex.test(email); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + if (validateEmail(email)) { + setMessage("Credentials sent to your email successfully."); + setIsValid(true); + setTimeout(() => { + setEmail(""); + }, 2000); + } else { + setMessage("Please enter a valid email address."); + setIsValid(false); + } + }; + + return ( + <ForgetPasswordContainer> + <ForgetPasswordForm + initial={{ opacity: 0, y: 50 }} + animate={{ opacity: 1, y: 0 }} + transition={{ duration: 0.5 }} + onSubmit={handleSubmit} + > + <h2>Forgot Password</h2> + <Input + type="email" + placeholder="Enter your registered email" + value={email} + onChange={(e) => setEmail(e.target.value)} + required + /> + <Button + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + type="submit" + > + Send Credentials + </Button> + {message && <Message success={isValid}>{message}</Message>} + </ForgetPasswordForm> + </ForgetPasswordContainer> + ); +} + +export default ForgetPassword; diff --git a/src/Pages/login.js b/src/Pages/login.js index 994c7e1..0e2da95 100644 --- a/src/Pages/login.js +++ b/src/Pages/login.js @@ -1,13 +1,12 @@ - -import React, { useState } from 'react'; -import { useDispatch } from 'react-redux'; -import { login } from '../Store/authSlice'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; -import { Link, useNavigate } from 'react-router-dom'; +import React, { useState } from "react"; +import { useDispatch } from "react-redux"; +import { login } from "../Store/authSlice"; +import styled from "styled-components"; +import { motion } from "framer-motion"; +import { Link, useNavigate } from "react-router-dom"; const LoginBackGround = styled.section` - background-image: url('https://img.freepik.com/free-photo/hot-latte-art-coffee-cup-wood-table-coffee-shop_1150-8937.jpg?t=st=1727759954~exp=1727763554~hmac=2715c972f28c255c158e0d14f664f9443fdd95a0e4b21cf6d5b41bc690aaa2d3&w=1380'); + background-image: url("https://img.freepik.com/free-photo/hot-latte-art-coffee-cup-wood-table-coffee-shop_1150-8937.jpg?t=st=1727759954~exp=1727763554~hmac=2715c972f28c255c158e0d14f664f9443fdd95a0e4b21cf6d5b41bc690aaa2d3&w=1380"); background-size: cover; background-position: center; `; @@ -54,6 +53,14 @@ const RegisterLink = styled(Link)` text-decoration: none; `; +const ForgetPasswordLink = styled(Link)` + display: block; + margin-top: 0.5rem; + text-align: center; + color: #7c2214; + text-decoration: none; +`; + const ErrorMessage = styled.div` margin-top: 1rem; color: red; @@ -61,21 +68,26 @@ const ErrorMessage = styled.div` `; function Login() { - const [username, setUsername] = useState(''); - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [error, setError] = useState(''); + const [username, setUsername] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); const dispatch = useDispatch(); const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); - const storedUser = JSON.parse(localStorage.getItem('user')); - if (storedUser && storedUser.username === username && storedUser.email === email && storedUser.password === password) { + const storedUser = JSON.parse(localStorage.getItem("user")); + if ( + storedUser && + storedUser.username === username && + storedUser.email === email && + storedUser.password === password + ) { dispatch(login({ username, email })); - navigate('/profile'); // Redirect to home page + navigate("/profile"); // Redirect to home page } else { - setError('Invalid credentials'); + setError("Invalid credentials"); } }; @@ -118,7 +130,12 @@ function Login() { Login </Button> {error && <ErrorMessage>{error}</ErrorMessage>} - <RegisterLink to="/register">Don't have an account? Register</RegisterLink> + <RegisterLink to="/register"> + Don't have an account? Register + </RegisterLink> + <ForgetPasswordLink to="/forget-password"> + Forgot Password? + </ForgetPasswordLink> </LoginForm> </LoginContainer> </LoginBackGround> From 9048d4cc2d3c173267f46678bab228afda5052ff Mon Sep 17 00:00:00 2001 From: Sitambhra Salaria <110994217+Sitambhra02@users.noreply.github.com> Date: Thu, 2 Jan 2025 20:25:04 +0530 Subject: [PATCH 06/15] Fix button layout and spacing, enhanced responsiveness, and refactor button styling on Shop page --- src/Pages/checkOut.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/checkOut.js b/src/Pages/checkOut.js index 69a64fc..c02ffd2 100644 --- a/src/Pages/checkOut.js +++ b/src/Pages/checkOut.js @@ -8,7 +8,7 @@ import { clearCart } from '../Store/cartSlice'; const CheckoutContainer = styled.div` padding: 4rem 2rem; max-width: 800px; - margin: 3.75rem auto; + margin: 0 auto; `; const Title = styled(motion.h1)` From f72f44a99ebe39e7ff2d80602458d3e97ccf0395 Mon Sep 17 00:00:00 2001 From: Sitambhra Salaria <110994217+Sitambhra02@users.noreply.github.com> Date: Thu, 2 Jan 2025 20:39:58 +0530 Subject: [PATCH 07/15] Fixed the overlapping of Checkout heading and Navbar --- src/Pages/checkOut.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/checkOut.js b/src/Pages/checkOut.js index c02ffd2..69a64fc 100644 --- a/src/Pages/checkOut.js +++ b/src/Pages/checkOut.js @@ -8,7 +8,7 @@ import { clearCart } from '../Store/cartSlice'; const CheckoutContainer = styled.div` padding: 4rem 2rem; max-width: 800px; - margin: 0 auto; + margin: 3.75rem auto; `; const Title = styled(motion.h1)` From 8f086ee2ed2a8ddc02eb65d15891d920fe29c374 Mon Sep 17 00:00:00 2001 From: AVNI-THEEXPLORER <sudhanshuvandil@gmail.com> Date: Thu, 2 Jan 2025 22:35:15 +0530 Subject: [PATCH 08/15] now the year is dynamic in footer --- package-lock.json | 190 ++++++++++++++++++++++++++++++++++++++++ src/componets/footer.js | 2 +- 2 files changed, 191 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index c69f3e6..6d8cef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,6 +4216,112 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6382,6 +6488,13 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT", + "peer": true + }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6419,6 +6532,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bindall-standalone": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", + "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", + "license": "MIT", + "peer": true + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7759,6 +7879,16 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13636,6 +13766,13 @@ "shell-quote": "^1.8.1" } }, + "node_modules/lethargy": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", + "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", + "license": "MIT", + "peer": true + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13708,6 +13845,18 @@ "node": ">=8" } }, + "node_modules/locomotive-scroll": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", + "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bezier-easing": "^2.1.0", + "smoothscroll-polyfill": "^0.4.4", + "virtual-scroll": "^1.5.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17666,6 +17815,13 @@ "node": ">=8" } }, + "node_modules/smoothscroll-polyfill": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", + "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", + "license": "MIT", + "peer": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18761,6 +18917,13 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", + "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", + "license": "MIT", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19033,6 +19196,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19303,6 +19480,19 @@ "node": ">= 0.8" } }, + "node_modules/virtual-scroll": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", + "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bindall-standalone": "^1.0.5", + "lethargy": "^1.0.2", + "object-assign": "^4.0.1", + "tiny-emitter": "^1.0.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/componets/footer.js b/src/componets/footer.js index 2e4b90b..3bd339a 100644 --- a/src/componets/footer.js +++ b/src/componets/footer.js @@ -52,7 +52,7 @@ function Footer() { return ( <FooterContainer> <FooterContent> - <p>© 2023 MsCafe. All rights reserved.</p> + <p>© {new Date().getFullYear()} MsCafe. All rights reserved.</p> <p>Made with ♥ by Mscoder</p> <SocialIcons> <SocialIcon From 60625c86cc16ac1c92bc10a223fb52c58c10fce5 Mon Sep 17 00:00:00 2001 From: Aadi Joshi <toaadijoshi@gmail.com> Date: Fri, 3 Jan 2025 00:22:15 +0530 Subject: [PATCH 09/15] added a 'Register' button to the navbar that directly navigates to the sign-up page --- package-lock.json | 190 ++++++++++++++++++++++++++++++++++++++++ src/componets/Navbar.js | 11 ++- 2 files changed, 197 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index c69f3e6..6d8cef7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,6 +4216,112 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, + "node_modules/@testing-library/dom": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", + "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.3.0", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/@testing-library/dom/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/aria-query": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", + "license": "Apache-2.0", + "peer": true, + "dependencies": { + "dequal": "^2.0.3" + } + }, + "node_modules/@testing-library/dom/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "peer": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@testing-library/dom/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/@testing-library/dom/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT", + "peer": true + }, + "node_modules/@testing-library/dom/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@testing-library/dom/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "peer": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6382,6 +6488,13 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, + "node_modules/bezier-easing": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", + "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", + "license": "MIT", + "peer": true + }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6419,6 +6532,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/bindall-standalone": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", + "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", + "license": "MIT", + "peer": true + }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7759,6 +7879,16 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13636,6 +13766,13 @@ "shell-quote": "^1.8.1" } }, + "node_modules/lethargy": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", + "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", + "license": "MIT", + "peer": true + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13708,6 +13845,18 @@ "node": ">=8" } }, + "node_modules/locomotive-scroll": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", + "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bezier-easing": "^2.1.0", + "smoothscroll-polyfill": "^0.4.4", + "virtual-scroll": "^1.5.2" + } + }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17666,6 +17815,13 @@ "node": ">=8" } }, + "node_modules/smoothscroll-polyfill": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", + "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", + "license": "MIT", + "peer": true + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18761,6 +18917,13 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, + "node_modules/tiny-emitter": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", + "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", + "license": "MIT", + "peer": true + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19033,6 +19196,20 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "license": "Apache-2.0", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19303,6 +19480,19 @@ "node": ">= 0.8" } }, + "node_modules/virtual-scroll": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", + "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", + "license": "MIT", + "peer": true, + "dependencies": { + "bindall-standalone": "^1.0.5", + "lethargy": "^1.0.2", + "object-assign": "^4.0.1", + "tiny-emitter": "^1.0.0" + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index de0d61e..f30b790 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -252,10 +252,13 @@ function Navbar() { </NavLink> </> ) : ( - <NavLink className={location.pathname === '/login' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> - <Link to="/login">Login</Link> - </NavLink> + <><NavLink className={location.pathname === '/login' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> + <Link to="/login">Login</Link> + </NavLink><NavLink className={location.pathname === '/register' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> + <Link to="/register">Register</Link> + </NavLink></> )} </NavLinks> <MobileMenuButton From 51804e51cb4cf41f4921cf3f5bf710be452ebd1c Mon Sep 17 00:00:00 2001 From: Aadi Joshi <toaadijoshi@gmail.com> Date: Fri, 3 Jan 2025 00:46:36 +0530 Subject: [PATCH 10/15] added a 'Register' button to the navbar that directly navigates to the sign-up page, added comments and updated README.md with new screenshots --- README.md | 8 ++++---- src/componets/Navbar.js | 37 +++++++++++++++++++------------------ 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index e35d4cb..07040cb 100644 --- a/README.md +++ b/README.md @@ -59,13 +59,13 @@ Once the server is running, you can view the app at (http://localhost:3000). ## ScreenShots: ## **Home Page:** -![homepage](https://github.com/user-attachments/assets/36a7852c-dd6d-40b2-9652-4c4a3f9d46fc) +![homepage](https://github.com/user-attachments/assets/2dc9b51d-ce06-4eb6-89fb-774867ede12c) ## **Coffee Menu:** -![coffeemenu](https://github.com/user-attachments/assets/0f9583d8-e2a8-4797-8e13-9d8325f58764) +![coffeemenu](https://github.com/user-attachments/assets/014c6a7a-03ab-4bdf-88e1-bb3c11d66447) ## **Login Page** -![coffeelogin](https://github.com/user-attachments/assets/e29ee634-69c4-45a3-978c-a797cf62487f) +![coffeelogin](https://github.com/user-attachments/assets/c6c7c645-475d-4658-a47c-f0ada0b177d1) ## **Testimonials** -![testimonials](https://github.com/user-attachments/assets/af0b4e1f-5363-4b71-8c5c-fe1ba244edb3) +![testimonials](https://github.com/user-attachments/assets/38d811e3-4acc-4901-9a3d-8e4185c96a2c) ## Contributing We welcome contributions! Follow the steps below to contribute to this project: ```bash diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index f30b790..fc69591 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -206,45 +206,45 @@ function Navbar() { {/* <!-- ------NavLink:::::Home-------------------> */} <NavLink className={location.pathname === '/' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + whileHover={{ scale: 1.05 }}> <Link to="/">Home</Link> </NavLink> {/* <!-- ------NavLink:::::Shop-------------------> */} <NavLink className={location.pathname === '/shop' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + whileHover={{ scale: 1.05 }}> <Link to="/shop">Shop</Link> </NavLink> {/* <!-- ------NavLink:::::About-------------------> */} - <NavLink className={location.pathname === '/about' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + <NavLink className={location.pathname === '/about' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> <Link to="/about">About</Link> </NavLink> {/* <!-- ------NavLink::::Testinomial-------------------> */} <NavLink className={location.pathname === '/testimonial' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + whileHover={{ scale: 1.05 }}> <Link to="/testimonial">Testimonial</Link> </NavLink> - + {/* <!-- ------NavLink:::::Contacts-------------------> */} <NavLink className={location.pathname === '/contact' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + whileHover={{ scale: 1.05 }}> <Link to="/contact">Contact</Link> </NavLink> - + {isLoggedIn ? ( <> <NavLink className={location.pathname === '/profile' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + whileHover={{ scale: 1.05 }}> <Link to="/profile">Profile</Link> </NavLink> - <NavLink - whileHover={{ scale: 1.05 }}> + <NavLink + whileHover={{ scale: 1.05 }}> <Link to="/cart">Cart</Link> </NavLink> <NavLink className={location.pathname === '/cart' ? 'active' : ''} - whileHover={{ scale: 1.05 }} + whileHover={{ scale: 1.05 }} onClick={handleLogout} style={{ cursor: 'pointer' }} > @@ -252,13 +252,14 @@ function Navbar() { </NavLink> </> ) : ( + // navbar login and register buttons <><NavLink className={location.pathname === '/login' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> - <Link to="/login">Login</Link> - </NavLink><NavLink className={location.pathname === '/register' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> - <Link to="/register">Register</Link> - </NavLink></> + whileHover={{ scale: 1.05 }}> + <Link to="/login">Login</Link> + </NavLink><NavLink className={location.pathname === '/register' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> + <Link to="/register">Register</Link> + </NavLink></> )} </NavLinks> <MobileMenuButton From 8a27129684754d056a3618b111c94e5c5b7dcd62 Mon Sep 17 00:00:00 2001 From: Aadi Joshi <toaadijoshi@gmail.com> Date: Fri, 3 Jan 2025 00:54:48 +0530 Subject: [PATCH 11/15] added a 'Register' button to the navbar and drop-down menu that directly navigates to the sign-up page, added comments and updated README.md with new screenshots --- src/componets/Navbar.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index fc69591..024cac9 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Link, useLocation} from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { useSelector, useDispatch } from 'react-redux'; import { logout } from '../Store/authSlice'; import styled from 'styled-components'; @@ -256,8 +256,9 @@ function Navbar() { <><NavLink className={location.pathname === '/login' ? 'active' : ''} whileHover={{ scale: 1.05 }}> <Link to="/login">Login</Link> - </NavLink><NavLink className={location.pathname === '/register' ? 'active' : ''} - whileHover={{ scale: 1.05 }}> + </NavLink> + <NavLink className={location.pathname === '/register' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> <Link to="/register">Register</Link> </NavLink></> )} @@ -304,8 +305,8 @@ function Navbar() { <MobileNavLink whileHover={{ scale: 1.02 }}> <Link to="/cart" onClick={toggleMenu}>Cart</Link> </MobileNavLink> - <MobileNavLink - whileHover={{ scale: 1.02 }} + <MobileNavLink + whileHover={{ scale: 1.02 }} onClick={() => { handleLogout(); toggleMenu(); }} style={{ cursor: 'pointer' }} > @@ -313,9 +314,12 @@ function Navbar() { </MobileNavLink> </> ) : ( - <MobileNavLink whileHover={{ scale: 1.02 }}> + <><MobileNavLink whileHover={{ scale: 1.02 }}> <Link to="/login" onClick={toggleMenu}>Login</Link> </MobileNavLink> + <MobileNavLink whileHover={{ scale: 1.02 }}> + <Link to="/register" onClick={toggleMenu}>Register</Link> + </MobileNavLink></> )} </MobileMenu> )} From 1568f7aab69bc95b0fcd3017d5d3e06b00a44b1d Mon Sep 17 00:00:00 2001 From: mansi066 <mansisinghal623@gmail.com> Date: Fri, 3 Jan 2025 07:31:44 +0530 Subject: [PATCH 12/15] Resolve Conflict --- src/Pages/PremiumBeans.js | 2 ++ src/componets/Navbar.js | 5 +++++ 2 files changed, 7 insertions(+) diff --git a/src/Pages/PremiumBeans.js b/src/Pages/PremiumBeans.js index 28d56da..d8444a3 100644 --- a/src/Pages/PremiumBeans.js +++ b/src/Pages/PremiumBeans.js @@ -7,6 +7,8 @@ const PremiumContainer = styled.div` max-width: 1200px; margin: 0 auto; background-color: #fffbeb; + box-shadow: 1px 1px 5px 6px #888888; + `; const FeatureTitle = styled(motion.h1)` diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index 024cac9..24256eb 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -226,6 +226,11 @@ function Navbar() { whileHover={{ scale: 1.05 }}> <Link to="/testimonial">Testimonial</Link> </NavLink> + {/* <!-- ------NavLink::::Premium Beans-------------------> */} + <NavLink className={location.pathname === '/premiumbeans' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> + <Link to="/premiumbeans">Premium Beans</Link> + </NavLink> {/* <!-- ------NavLink:::::Contacts-------------------> */} <NavLink className={location.pathname === '/contact' ? 'active' : ''} From 4f690398ff01bacd1c8de211ced0db286bc23e5e Mon Sep 17 00:00:00 2001 From: mansi066 <mansisinghal623@gmail.com> Date: Fri, 3 Jan 2025 08:24:39 +0530 Subject: [PATCH 13/15] Add content in expert baristas --- package-lock.json | 190 ------------------------------------ src/App.js | 3 + src/Pages/ExpertBaristas.js | 102 +++++++++++++++++++ src/Pages/Home.js | 2 +- src/componets/Navbar.js | 9 +- 5 files changed, 112 insertions(+), 194 deletions(-) create mode 100644 src/Pages/ExpertBaristas.js diff --git a/package-lock.json b/package-lock.json index 6d8cef7..c69f3e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4216,112 +4216,6 @@ "url": "https://github.com/sponsors/tannerlinsley" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, - "node_modules/@testing-library/dom/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "license": "MIT", - "peer": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/dom/node_modules/aria-query": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", - "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", - "license": "Apache-2.0", - "peer": true, - "dependencies": { - "dequal": "^2.0.3" - } - }, - "node_modules/@testing-library/dom/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "license": "MIT", - "peer": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/dom/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "license": "MIT", - "peer": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/dom/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "license": "MIT", - "peer": true - }, - "node_modules/@testing-library/dom/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/dom/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "license": "MIT", - "peer": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -6488,13 +6382,6 @@ "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", "license": "MIT" }, - "node_modules/bezier-easing": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/bezier-easing/-/bezier-easing-2.1.0.tgz", - "integrity": "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig==", - "license": "MIT", - "peer": true - }, "node_modules/bfj": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz", @@ -6532,13 +6419,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/bindall-standalone": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/bindall-standalone/-/bindall-standalone-1.0.5.tgz", - "integrity": "sha512-HDI7YBWXVJk/eoGz+e4lYQQJnYp1ZHcUvAY71lVptLMhQnDm86vD73AGPw2qIlgYR3P0bjmoAcXiA8qhFejBhA==", - "license": "MIT", - "peer": true - }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -7879,16 +7759,6 @@ "node": ">= 0.8" } }, - "node_modules/dequal": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", - "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "license": "MIT", - "peer": true, - "engines": { - "node": ">=6" - } - }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -13766,13 +13636,6 @@ "shell-quote": "^1.8.1" } }, - "node_modules/lethargy": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/lethargy/-/lethargy-1.0.9.tgz", - "integrity": "sha512-nFM8blpCF9rqIL5mRAaTGc78W8oQixVtsD86jbEPvcI13+lDUYJf3R7DZQQL7tCiBpbGpGKMX2gwJFO9hiaOkg==", - "license": "MIT", - "peer": true - }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -13845,18 +13708,6 @@ "node": ">=8" } }, - "node_modules/locomotive-scroll": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/locomotive-scroll/-/locomotive-scroll-4.1.4.tgz", - "integrity": "sha512-6i98cFF2SKg6wIPpwVPuo2FG8qL3USsdDeew78TEYZyLoqleMWNfkSDpWA6mPym4dOfTIBXc678VmGlkgx3fTA==", - "license": "MIT", - "peer": true, - "dependencies": { - "bezier-easing": "^2.1.0", - "smoothscroll-polyfill": "^0.4.4", - "virtual-scroll": "^1.5.2" - } - }, "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", @@ -17815,13 +17666,6 @@ "node": ">=8" } }, - "node_modules/smoothscroll-polyfill": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz", - "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg==", - "license": "MIT", - "peer": true - }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18917,13 +18761,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "license": "MIT" }, - "node_modules/tiny-emitter": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-1.2.0.tgz", - "integrity": "sha512-rWjF00inHeWtT5UbQYAXoMI4hL6TRMqohuKCsODyPYYmfAxqfMnXLsIeNrbdPEkNxlk++rojVilTnI9IVmEBtA==", - "license": "MIT", - "peer": true - }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -19196,20 +19033,6 @@ "is-typedarray": "^1.0.0" } }, - "node_modules/typescript": { - "version": "4.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", - "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "license": "Apache-2.0", - "peer": true, - "bin": { - "tsc": "bin/tsc", - "tsserver": "bin/tsserver" - }, - "engines": { - "node": ">=4.2.0" - } - }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -19480,19 +19303,6 @@ "node": ">= 0.8" } }, - "node_modules/virtual-scroll": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/virtual-scroll/-/virtual-scroll-1.5.2.tgz", - "integrity": "sha512-7jDHwlKbHUho7CYU/HojE/VKFH8GV9P5fVWP2HCa7dRUOpVvwl93OBOKIIcb2mKd+vqsbVR/0zl0X70+3sUZqA==", - "license": "MIT", - "peer": true, - "dependencies": { - "bindall-standalone": "^1.0.5", - "lethargy": "^1.0.2", - "object-assign": "^4.0.1", - "tiny-emitter": "^1.0.0" - } - }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", diff --git a/src/App.js b/src/App.js index 725c0c3..12e73b4 100644 --- a/src/App.js +++ b/src/App.js @@ -16,6 +16,7 @@ import Profile from './Pages/profile'; import Checkout from './Pages/checkOut'; import Testimonial from './Pages/Testimonial'; import PremiumBeans from './Pages/PremiumBeans'; +import ExpertBaristas from './Pages/ExpertBaristas'; @@ -50,6 +51,8 @@ function App() { <Route path="/profile" element={<Profile />} /> <Route path="/checkout" element={<Checkout />} /> <Route path="/premiumbeans" element={<PremiumBeans />} /> + <Route path="/expertbaristas" element={<ExpertBaristas />} /> + </Routes> </ContentContainer> diff --git a/src/Pages/ExpertBaristas.js b/src/Pages/ExpertBaristas.js new file mode 100644 index 0000000..113b2e5 --- /dev/null +++ b/src/Pages/ExpertBaristas.js @@ -0,0 +1,102 @@ +import React from 'react' +import styled from 'styled-components'; +import { motion } from 'framer-motion'; +const ExpertContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; + max-width: 1200px; + margin: 0 auto; + background-color: #fffbeb; + box-shadow: 1px 1px 5px 6px #888888; + +`; + +const FeatureTitle = styled(motion.h1)` + font-size: 4rem; + margin-top: -4rem; + margin-bottom: 1rem; + color: ##78350f; + font-family: 'Playfair Display', serif; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-content: space-around; + font-weight:bold; + +`; +const ImageContent = styled(motion.div)` + display: flex +; + justify-content: flex-start; + align-items: center; + padding: 0rem; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-start; +} +`; + +const Image = styled(motion.img)` + width: 500px; + height: 500px + object-fit: cover; + border-radius: 10px; + margin-bottom: 1.5rem; + margin-left: 20rem; + + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +`; + +const FeatureDescription = styled(motion.p)` + font-size: 1.5rem; + color: #6B4423; + line-height: 1.6; + font-family: 'Poppins', sans-serif; + display: flex; + margin: 0px; + margin-left: 60px; + margin-right: 50px; +`; + +function ExpertBaristas() { + return ( + + <> + <div> + <ExpertContainer> + <FeatureTitle + initial={{ opacity: 0, y: -50 }} + animate={{ opacity: 1, y: 0 }} + transition={{ duration: 0.5 }} + > + Expert Baristas + </FeatureTitle> + <ImageContent + initial={{ opacity: 0, x: 50 }} + animate={{ opacity: 1, x: 0 }} + transition={{ duration: 0.5, delay: 0.4 }} + > + <Image src="https://img.freepik.com/free-vector/people-making-different-coffee-methods_23-2148659306.jpg?t=st=1727760094~exp=1727763694~hmac=1308757b9658b2965de4fa54acb3d847813ef088426f2fb78a05d8cb0be1b993&w=826" alt="Expert Baristas" /> + </ImageContent > + <FeatureDescription + initial={{ opacity: 0, x: -50 }} + animate={{ opacity: 1, x: 0 }} + transition={{ duration: 0.5, delay: 0.2 }} + > + + Expert baristas excel in making coffee due to their comprehensive knowledge of coffee, practical brewing skills, and passion for the craft.practical brewing skills, and passion for the craft. They ensure optimal flavor extraction by meticulously controlling variables like grind size, water temperature, and brewing time. Their expertise allows them to create a perfect cup of coffee tailored to individual preferences, showcasing their attention to detail and dedication.Their skillset is honed through extensive training and practice. Expert baristas demonstrate exceptional precision in every step of the coffee-making process.A true expert barista has a passion for coffee that drives them to constantly improve and innovate. They experiment with new coffee blends, brewing methods, and flavor combinations to create unique and memorable coffee experiences. + + + + + + </FeatureDescription> + <button type="button" class="btn btn-warning mx-20">Read More</button> + </ExpertContainer> + </div> + </> + + + ) +} + +export default ExpertBaristas diff --git a/src/Pages/Home.js b/src/Pages/Home.js index 9a8119d..a2c5376 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -289,7 +289,7 @@ function Home() { </FeatureCard> <FeatureCard> <FeatureIcon src="https://img.freepik.com/free-vector/people-making-different-coffee-methods_23-2148659306.jpg?t=st=1727760094~exp=1727763694~hmac=1308757b9658b2965de4fa54acb3d847813ef088426f2fb78a05d8cb0be1b993&w=826" alt="Expert Baristas" /> - <FeatureTitle>Expert Baristas</FeatureTitle> + <Link to="/expertbaristas"><FeatureTitle>Expert Baristas</FeatureTitle></Link> <FeatureDescription>Our skilled baristas craft each cup to perfection.</FeatureDescription> </FeatureCard> <FeatureCard> diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index 24256eb..32f29f0 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -226,10 +226,10 @@ function Navbar() { whileHover={{ scale: 1.05 }}> <Link to="/testimonial">Testimonial</Link> </NavLink> - {/* <!-- ------NavLink::::Premium Beans-------------------> */} - <NavLink className={location.pathname === '/premiumbeans' ? 'active' : ''} + {/* <!-- ------NavLink::::expertbaristas-------------------> */} + <NavLink className={location.pathname === '/expertbaristas' ? 'active' : ''} whileHover={{ scale: 1.05 }}> - <Link to="/premiumbeans">Premium Beans</Link> + <Link to="/expertbaristas">Expert Baristas</Link> </NavLink> {/* <!-- ------NavLink:::::Contacts-------------------> */} @@ -299,6 +299,9 @@ function Navbar() { <MobileNavLink whileHover={{ scale: 1.02 }}> <Link to="/premiumbeans" onClick={toggleMenu}>Premium Beans</Link> </MobileNavLink> + <MobileNavLink whileHover={{ scale: 1.02 }}> + <Link to="/expertbaristas" onClick={toggleMenu}>Expert Baristas</Link> + </MobileNavLink> <MobileNavLink whileHover={{ scale: 1.02 }}> <Link to="/contact" onClick={toggleMenu}>Contact</Link> </MobileNavLink> From bde948a8e923e4d6825374ecf1434a0c7ad228e5 Mon Sep 17 00:00:00 2001 From: mansi066 <mansisinghal623@gmail.com> Date: Fri, 3 Jan 2025 08:41:38 +0530 Subject: [PATCH 14/15] Resolved --- src/componets/Navbar.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index 32f29f0..a5b7c9a 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -225,6 +225,11 @@ function Navbar() { <NavLink className={location.pathname === '/testimonial' ? 'active' : ''} whileHover={{ scale: 1.05 }}> <Link to="/testimonial">Testimonial</Link> + </NavLink> + {/* <!-- ------NavLink::::Premium Beans-------------------> */} + <NavLink className={location.pathname === '/premiumbeans' ? 'active' : ''} + whileHover={{ scale: 1.05 }}> + <Link to="/premiumbeans">Premium Beans</Link> </NavLink> {/* <!-- ------NavLink::::expertbaristas-------------------> */} <NavLink className={location.pathname === '/expertbaristas' ? 'active' : ''} From 46057ab1efa22b27d7d5250f6d8b414ffb530e43 Mon Sep 17 00:00:00 2001 From: KajalDeore04 <kajaldeore04@gmail.com> Date: Fri, 3 Jan 2025 09:59:28 +0530 Subject: [PATCH 15/15] # 18 reviews --- src/App.js | 4 +- src/componets/Reviews.js | 152 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 155 insertions(+), 1 deletion(-) create mode 100644 src/componets/Reviews.js diff --git a/src/App.js b/src/App.js index 725c0c3..d58516f 100644 --- a/src/App.js +++ b/src/App.js @@ -16,6 +16,8 @@ import Profile from './Pages/profile'; import Checkout from './Pages/checkOut'; import Testimonial from './Pages/Testimonial'; import PremiumBeans from './Pages/PremiumBeans'; +import Reviews from './componets/Reviews' + @@ -53,7 +55,7 @@ function App() { </Routes> </ContentContainer> - + <Reviews /> <Footer /> </AppContainer> </Router> diff --git a/src/componets/Reviews.js b/src/componets/Reviews.js new file mode 100644 index 0000000..d7ee531 --- /dev/null +++ b/src/componets/Reviews.js @@ -0,0 +1,152 @@ +import React from 'react'; + +const Reviews = () => { + return ( + <section className="py-12 bg-gray-50 sm:py-16 lg:py-20"> + <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8"> + <div className="flex flex-col items-center"> + <div className="text-center"> + <p className="text-lg font-medium text-gray-600 font-pj">2,157 people have said how good MsCafe is...</p> + <h2 className="mt-4 text-3xl font-bold text-gray-900 sm:text-4xl xl:text-5xl font-pj">Our happy clients say about us</h2> + </div> + + <div className="mt-8 text-center md:mt-16 md:order-3"> + <a href="/testimonial" title="" className="pb-2 text-base font-bold leading-7 text-gray-900 transition-all duration-200 border-b-2 border-gray-900 hover:border-gray-600 font-pj focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-2 hover:text-gray-600"> + Check all 2,157 reviews + </a> + </div> + + <div className="relative mt-10 md:mt-24 md:order-2"> + <div className="absolute -inset-x-1 inset-y-16 md:-inset-x-2 md:-inset-y-6"> + <div className="w-full h-full max-w-5xl mx-auto rounded-3xl opacity-30 blur-lg filter" style={{ background: `linear-gradient(90deg, #44ff9a -0.55%, #44b0ff 22.86%, #8b44ff 48.36%, #ff6644 73.33%, #ebff70 99.34%)` }}></div> + </div> + + <div className="relative grid max-w-lg grid-cols-1 gap-6 mx-auto md:max-w-none lg:gap-10 md:grid-cols-3"> + <div className="flex flex-col overflow-hidden shadow-xl"> + <div className="flex flex-col justify-between flex-1 p-6 bg-white lg:py-8 lg:px-7"> + <div className="flex-1"> + <div className="flex items-center"> + {[...Array(5)].map((_, index) => ( + <svg key={index} className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + ))} + </div> + + <blockquote className="flex-1 mt-8"> + <p className="text-lg leading-relaxed text-gray-900 font-pj">“The coffee here is amazing! The atmosphere is cozy, and the staff is incredibly friendly. I come here every morning to start my day right.”</p> + </blockquote> + </div> + + <div className="flex items-center mt-8"> + <img className="flex-shrink-0 object-cover rounded-full w-11 h-11" src="https://cdn.rareblocks.xyz/collection/clarity/images/testimonial/4/avatar-male-1.png" alt="" /> + <div className="ml-4"> + <p className="text-base font-bold text-gray-900 font-pj">Emily Carter</p> + <p className="mt-0.5 text-sm font-pj text-gray-600">Coffee Enthusiast</p> + </div> + </div> + </div> + </div> + + <div className="flex flex-col overflow-hidden shadow-xl"> + <div className="flex flex-col justify-between flex-1 p-6 bg-white lg:py-8 lg:px-7"> + <div className="flex-1"> + <div className="flex items-center"> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + </div> + + <blockquote className="flex-1 mt-8"> + <p className="text-lg leading-relaxed text-gray-900 font-pj">“The best latte I’ve ever had! The baristas are true artists, and the pastries are fresh and delicious. Highly recommend!”</p> + </blockquote> + </div> + + <div className="flex items-center mt-8"> + <img className="flex-shrink-0 object-cover rounded-full w-11 h-11" src="https://cdn.rareblocks.xyz/collection/clarity/images/testimonial/4/avatar-male-2.png" alt="" /> + <div className="ml-4"> + <p className="text-base font-bold text-gray-900 font-pj">Michael Brown</p> + <p className="mt-0.5 text-sm font-pj text-gray-600">DigFood Blogger</p> + </div> + </div> + </div> + </div> + + <div className="flex flex-col overflow-hidden shadow-xl"> + <div className="flex flex-col justify-between flex-1 p-6 bg-white lg:py-8 lg:px-7"> + <div className="flex-1"> + <div className="flex items-center"> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + <svg className="w-5 h-5 text-[#FDB241]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> + <path + d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" + /> + </svg> + </div> + + <blockquote className="flex-1 mt-8"> + <p className="text-lg leading-relaxed text-gray-900 font-pj">“This cafe is my happy place! The coffee is rich and flavorful, and the ambiance is perfect for relaxing or working.”</p> + </blockquote> + </div> + + <div className="flex items-center mt-8"> + <img className="flex-shrink-0 object-cover rounded-full w-11 h-11" src="https://cdn.rareblocks.xyz/collection/clarity/images/testimonial/4/avatar-female.png" alt="" /> + <div className="ml-4"> + <p className="text-base font-bold text-gray-900 font-pj">Sarah Johnson</p> + <p className="mt-0.5 text-sm font-pj text-gray-600">Freelance Writer</p> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </section> + ); +}; + +export default Reviews;