diff --git a/.github/workflows/auto-comment.yml b/.github/workflows/auto-comment.yml new file mode 100644 index 0000000..11d42c5 --- /dev/null +++ b/.github/workflows/auto-comment.yml @@ -0,0 +1,75 @@ +name: Automate Issue and PR Responses + +on: + issues: + types: + - opened + - closed + pull_request: + types: + - opened + - closed + +jobs: + respond-to-events: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + # Respond to new issues + - name: Respond to new issues + if: ${{ github.event_name == 'issues' && github.event.action == 'opened' }} + run: | + echo "Hey @${{ github.actor }}, Welcome to 💖coffeeShop! 🎊" > comment.txt + echo "Thanks for opening an issue! 🙌 Please wait for the issue to be assigned." >> comment.txt + echo "Happy Coding!! ✨" >> comment.txt + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + uses: peter-evans/create-or-update-comment@v3 + with: + issue-number: ${{ github.event.issue.number }} + body-path: comment.txt + + # Respond to closed issues + - name: Respond to closed issues + if: ${{ github.event_name == 'issues' && github.event.action == 'closed' }} + run: | + echo "Hello @${{ github.event.issue.user.login }}! Your issue #${{ github.event.issue.number }} has been closed." > comment.txt + echo "Thank you for your contribution to 💖coffeeShop!!! 🙌" >> comment.txt + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + uses: peter-evans/create-or-update-comment@v3 + with: + issue-number: ${{ github.event.issue.number }} + body-path: comment.txt + + # Respond to new PRs + - name: Respond to new PRs + if: ${{ github.event_name == 'pull_request' && github.event.action == 'opened' }} + run: | + echo "Hey @${{ github.actor }}, Welcome to 💖coffeeShop 🎊" > comment.txt + echo "Thanks for your contribution! Your effort makes this project better. Keep it up! 🙌" >> comment.txt + echo "Please wait for the PR to be reviewed." >> comment.txt + echo "Happy Coding!! ✨" >> comment.txt + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + uses: peter-evans/create-or-update-comment@v3 + with: + issue-number: ${{ github.event.pull_request.number }} + body-path: comment.txt + + # Respond to merged PRs + - name: Respond to merged PRs + if: ${{ github.event_name == 'pull_request' && github.event.action == 'closed' && github.event.pull_request.merged }} + run: | + echo "@${{ github.event.pull_request.user.login }} Congrats, Your pull request has been successfully merged 🥳🎉" > comment.txt + echo "Thank you for your contribution to 💖coffeeShop!!" >> comment.txt + echo "Happy coding 🎊, Keep Contributing 🙌 !!!" >> comment.txt + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + uses: peter-evans/create-or-update-comment@v3 + with: + issue-number: ${{ github.event.pull_request.number }} + body-path: comment.txt diff --git a/package-lock.json b/package-lock.json index 1d9b454..a63eb6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@emotion/styled": "^11.14.0", "@eslint/config-array": "^0.19.1", "@eslint/object-schema": "^2.1.5", + "@fortawesome/fontawesome-free": "^6.7.2", "@headlessui/react": "^2.1.8", "@heroicons/react": "^2.1.5", "@jridgewell/sourcemap-codec": "^1.5.0", @@ -40,7 +41,9 @@ "lottie-react": "^2.4.0", "openai": "^4.78.0", "react": "^18.3.1", + "react-animated-cursor": "^2.11.2", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", "react-locomotive-scroll": "^0.2.2", "react-redux": "^9.1.2", "react-router-dom": "^6.26.2", @@ -2622,6 +2625,15 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==" }, + "node_modules/@fortawesome/fontawesome-free": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz", + "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==", + "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)", + "engines": { + "node": ">=6" + } + }, "node_modules/@headlessui/react": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz", @@ -16141,6 +16153,16 @@ "node": ">=0.10.0" } }, + "node_modules/react-animated-cursor": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/react-animated-cursor/-/react-animated-cursor-2.11.2.tgz", + "integrity": "sha512-LV0PtST61tdeW/chCqFt1JLp6i0d5fD9v2uradBcPAkKKCi2Iw7sAcD11ADS1TjXPPj9MOoD9YubEt++/IbZ+g==", + "license": "ISC", + "peerDependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, "node_modules/react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", @@ -16298,6 +16320,14 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -22085,6 +22115,11 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==" }, + "@fortawesome/fontawesome-free": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz", + "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==" + }, "@headlessui/react": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz", @@ -31623,6 +31658,11 @@ "loose-envify": "^1.1.0" } }, + "react-animated-cursor": { + "version": "2.11.2", + "resolved": "https://registry.npmjs.org/react-animated-cursor/-/react-animated-cursor-2.11.2.tgz", + "integrity": "sha512-LV0PtST61tdeW/chCqFt1JLp6i0d5fD9v2uradBcPAkKKCi2Iw7sAcD11ADS1TjXPPj9MOoD9YubEt++/IbZ+g==" + }, "react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", @@ -31741,6 +31781,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==" + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index a90c085..db1b53a 100644 --- a/package.json +++ b/package.json @@ -12,14 +12,12 @@ "@babel/plugin-transform-private-property-in-object": "^7.25.9", "@babel/preset-env": "^7.26.0", "@babel/preset-react": "^7.26.3", - - "@dotlottie/react-player": "^1.6.19", - "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@eslint/config-array": "^0.19.1", "@eslint/object-schema": "^2.1.5", + "@fortawesome/fontawesome-free": "^6.7.2", "@headlessui/react": "^2.1.8", "@heroicons/react": "^2.1.5", "@jridgewell/sourcemap-codec": "^1.5.0", @@ -36,11 +34,11 @@ "glob": "^11.0.0", "gsap": "^3.12.5", "lottie-react": "^2.4.0", - "openai": "^4.78.0", - "react": "^18.3.1", + "react-animated-cursor": "^2.11.2", "react-dom": "^18.3.1", + "react-icons": "^5.4.0", "react-locomotive-scroll": "^0.2.2", "react-redux": "^9.1.2", "react-router-dom": "^6.26.2", diff --git a/src/App.js b/src/App.js index 7bc07e3..39682de 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React, {useState} from 'react'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; -import ScrollToTop from './componets/ScrollToTop'; +import ScrollToTop from './componets/ScrollToTop'; import { Provider } from 'react-redux'; import { store } from './Store/index'; import styled from 'styled-components'; @@ -25,11 +25,11 @@ import Soup from './Pages/soup'; import Milkshakes from './Pages/milkshake'; import PremiumBeans from './Pages/PremiumBeans'; import ForgetPassword from "./Pages/ForgetPassword"; - import ExpertBaristas from "./Pages/ExpertBaristas"; import CozyAmbiance from "./Pages/CozyAmbiance"; import Reviews from "./componets/Reviews"; - +import AnimatedCursor from "react-animated-cursor"; +import Feedback from './Pages/Feedback'; const AppContainer = styled.div` display: flex; flex-direction: column; @@ -48,7 +48,14 @@ function App() { - + @@ -69,8 +76,8 @@ function App() { } /> } /> } /> - } /> + } /> } /> } /> @@ -84,4 +91,3 @@ function App() { } export default App; - diff --git a/src/Pages/About.js b/src/Pages/About.js index 3d7aac1..e98ec76 100644 --- a/src/Pages/About.js +++ b/src/Pages/About.js @@ -156,7 +156,6 @@ function About() { src="https://i.ytimg.com/vi/DyJTVkRP1vY/maxresdefault.jpg" alt="Zumar Cafe Interior" /> -
diff --git a/src/Pages/Faq.js b/src/Pages/Faq.js index 1a0eae0..38dc287 100644 --- a/src/Pages/Faq.js +++ b/src/Pages/Faq.js @@ -1,6 +1,7 @@ -import React from 'react'; -import styled from 'styled-components'; -import { motion } from 'framer-motion'; +import React, { useState } from "react"; +import styled from "styled-components"; +import { motion } from "framer-motion"; +import { FaChevronDown, FaChevronUp } from "react-icons/fa"; // Importing arrows from react-icons const FAQContainer = styled.div` padding: 6rem 2rem 4rem 2rem; @@ -15,7 +16,7 @@ const FAQHeading = styled(motion.h1)` margin-bottom: 2rem; text-align: center; color: #78350f; - font-family: 'Playfair Display', serif; + font-family: "Playfair Display", serif; display: flex; flex-wrap: wrap; flex-direction: column; @@ -54,7 +55,7 @@ const FAQItem = styled(motion.div)` &:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); - background-color:rgb(241, 224, 198)/* Coffee color */ + background-color: rgb(241, 224, 198); /* Coffee color */ } `; @@ -62,22 +63,44 @@ const Question = styled(motion.h3)` font-size: 1.5rem; margin-bottom: 1rem; color: #78350f; - font-family: 'Playfair Display', serif; + font-family: "Playfair Display", serif; cursor: pointer; font-weight: 550; + display: flex; + align-items: center; /* Aligns text and arrow horizontally */ + justify-content: space-between; /* Distributes space between question text and arrow */ + width: 100%; /* Ensure the question occupies full width */ `; const Answer = styled(motion.p)` font-size: 1.1rem; color: #6b4423; line-height: 1.6; - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; `; +const ArrowIcon = styled.div` + font-size: 2rem; /* Ensures arrow is large enough */ + transition: transform 1s ease; + transform: ${({ isOpen }) => (isOpen ? "rotate(180deg)" : "rotate(180deg)")}; + margin-left: 1rem; + display: inline-block; + vertical-align: middle; +`; + function FAQ() { + const [isOpen, setIsOpen] = useState({}); // state to track which FAQ is open + + const toggleAnswer = (index) => { + setIsOpen((prevState) => ({ + ...prevState, + [index]: !prevState[index], + })); + }; + return ( - { - const answer = document.getElementById('answer1'); - if (answer.style.maxHeight) { - answer.style.maxHeight = null; - } else { - answer.style.maxHeight = answer.scrollHeight + 'px'; - } - }} - > - - How do I place an order? - - - To place an order, browse our collection and click the 'Add to Cart' button. When you're ready, proceed to checkout. - - - { - const answer = document.getElementById('answer2'); - if (answer.style.maxHeight) { - answer.style.maxHeight = null; - } else { - answer.style.maxHeight = answer.scrollHeight + 'px'; - } - }} - > - - Can I modify my order after placing it? - - - Unfortunately, once an order is placed, it cannot be modified. However, you can cancel it and place a new one if needed. - - - { - const answer = document.getElementById('answer3'); - if (answer.style.maxHeight) { - answer.style.maxHeight = null; - } else { - answer.style.maxHeight = answer.scrollHeight + 'px'; - } - }} - > - ( + toggleAnswer(index)} > - What payment methods do you accept? - - - We accept various payment methods including credit cards, PayPal, and bank transfers. - - - { - const answer = document.getElementById('answer4'); - if (answer.style.maxHeight) { - answer.style.maxHeight = null; - } else { - answer.style.maxHeight = answer.scrollHeight + 'px'; - } - }} - > - - How can I track my order? - - - After your order is shipped, you will receive a tracking number via email to monitor your shipment. - - + + {index === 1 && "How do I place an order?"} + {index === 2 && "Can I modify my order after placing it?"} + {index === 3 && "What payment methods do you accept?"} + {index === 4 && "How can I track my order?"} + + {isOpen[index] ? : } + + + + {index === 1 && + 'To place an order, browse our collection and click the "Add to Cart" button. When you\'re ready, proceed to checkout.'} + {index === 2 && + "Unfortunately, once an order is placed, it cannot be modified. However, you can cancel it and place a new one if needed."} + {index === 3 && + "We accept various payment methods including credit cards, PayPal, and bank transfers."} + {index === 4 && + "After your order is shipped, you will receive a tracking number via email to monitor your shipment."} + + + ))} ); } -export default FAQ; \ No newline at end of file +export default FAQ; diff --git a/src/Pages/Feedback.css b/src/Pages/Feedback.css new file mode 100644 index 0000000..a080643 --- /dev/null +++ b/src/Pages/Feedback.css @@ -0,0 +1,100 @@ + +.feedback-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 2rem; + background-color: #f0f0f0; + min-height: 100vh; + font-family: 'Arial', sans-serif; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + } + + .feedback-title { + font-size: 2.5rem; + margin-bottom: 1.5rem; + color: #7c2214; + text-align: center; + font-weight: 500; + text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4); + } + + .feedback-form { + width: 100%; + max-width: 600px; + background: rgba(255, 255, 255, 0.9); + padding: 2rem; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); + border-radius: 10px; + backdrop-filter: blur(10px); + } + + .form-field { + margin-bottom: 1.5rem; + } + + .label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: #333; + font-size: 17px; + } + + input, textarea, select { + width: 100%; + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 1rem; + transition: all 0.3s ease; + } + input:hover,textarea:hover,select:hover{ + border-color: #7c2214; + transform: scale(1.04); + box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; + } + + input:focus, textarea:focus, select:focus { + border-color: #7c2214; + outline: none; + } + + .textarea { + min-height: 100px; + } + + + .btn { + padding: 0.75rem 1.5rem; + background-color: #7c2214; + color: #fff; + border: none; + border-radius: 4px; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 10px; + width: 100%; + } + + .btn:hover { + background-color: rgb(150, 32, 19); + color: white; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); + transform: scale(1.05); + } + + .btn:focus { + outline: none; + } + + .heading1 { + font-weight: 500; + margin-left: 650px; + text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3); + color: #410e06; + } + \ No newline at end of file diff --git a/src/Pages/Feedback.js b/src/Pages/Feedback.js new file mode 100644 index 0000000..d0d1743 --- /dev/null +++ b/src/Pages/Feedback.js @@ -0,0 +1,72 @@ +// src/Pages/Feedback.js +import React, { useState } from 'react'; +import './Feedback.css'; + +function Feedback() { + const [rating, setRating] = useState(0); + const [comments, setComments] = useState(''); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [date, setDate] = useState(''); + const [visitType, setVisitType] = useState('dine-in'); + const [followUp, setFollowUp] = useState(false); + + const handleSubmit = (e) => { + e.preventDefault(); + // Process the feedback data + console.log({ + rating, + comments, + name, + email, + date, + visitType, + }); + // Clear form + setRating(0); + setComments(''); + setName(''); + setEmail(''); + setDate(''); + setVisitType('dine-in'); + }; + + return ( +
+

Feedback

+
+
+ + setRating(e.target.value)} max={5} min={1} /> +
+
+ +