From c18b7041d11ac0163df3ed5b126c17445984655a Mon Sep 17 00:00:00 2001 From: Aditi Prabakaran Date: Fri, 10 Jan 2025 09:41:15 +0530 Subject: [PATCH] created FAQ Page --- package-lock.json | 15 +-- src/App.js | 4 +- src/Pages/Faq.js | 208 ++++++++++++++++++++++++++++++++++++++++ src/Pages/Home.js | 1 - src/componets/Navbar.js | 12 ++- 5 files changed, 229 insertions(+), 11 deletions(-) create mode 100644 src/Pages/Faq.js diff --git a/package-lock.json b/package-lock.json index 2fc443c..d0be73b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17873,16 +17873,17 @@ } }, "node_modules/typescript": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", - "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", + "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": ">=14.17" + "node": ">=4.2.0" } }, "node_modules/unbox-primitive": { @@ -31822,9 +31823,9 @@ } }, "typescript": { - "version": "5.7.3", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz", - "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==", + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "peer": true }, "unbox-primitive": { diff --git a/src/App.js b/src/App.js index c2d5fa5..d79df45 100644 --- a/src/App.js +++ b/src/App.js @@ -13,11 +13,11 @@ import Register from './Pages/Register'; import Shop from './Pages/Shop'; import Cart from './Pages/cart'; import About from './Pages/About'; +import Faq from './Pages/Faq'; import Contact from './Pages/contact'; import Profile from './Pages/profile'; import Checkout from './Pages/checkOut'; import Testimonial from './Pages/Testimonial'; - import Cake from './Pages/cake'; import Coffee from './Pages/coffee'; import Soup from './Pages/soup'; @@ -60,7 +60,7 @@ function App() { } /> } /> } /> - + } /> } /> } /> } /> diff --git a/src/Pages/Faq.js b/src/Pages/Faq.js new file mode 100644 index 0000000..1a0eae0 --- /dev/null +++ b/src/Pages/Faq.js @@ -0,0 +1,208 @@ +import React from 'react'; +import styled from 'styled-components'; +import { motion } from 'framer-motion'; + +const FAQContainer = styled.div` + padding: 6rem 2rem 4rem 2rem; + max-width: 1200px; + margin: 0 auto; + background-color: #fffbeb; + box-shadow: 1px 1px 5px 6px #888888; +`; + +const FAQHeading = styled(motion.h1)` + font-size: 2.5rem; + margin-bottom: 2rem; + text-align: center; + color: #78350f; + font-family: 'Playfair Display', serif; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-content: space-around; + font-weight: bold; + + @media (max-width: 768px) { + font-size: 2rem; + text-align: center; + } +`; + +const FAQContent = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 0; + flex-direction: column; + flex-wrap: wrap; + align-content: center; +`; + +const FAQItem = styled(motion.div)` + background-color: white; + padding: 2.5rem; + border-radius: 8px; + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 600px; + margin: 0 auto; + margin-bottom: 2rem; + transition: all 0.3s ease; + cursor: pointer; + + &:hover { + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); + background-color:rgb(241, 224, 198)/* Coffee color */ + } +`; + +const Question = styled(motion.h3)` + font-size: 1.5rem; + margin-bottom: 1rem; + color: #78350f; + font-family: 'Playfair Display', serif; + cursor: pointer; + font-weight: 550; +`; + +const Answer = styled(motion.p)` + font-size: 1.1rem; + color: #6b4423; + line-height: 1.6; + font-family: 'Poppins', sans-serif; + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease-out; +`; + +function FAQ() { + return ( + + + Frequently Asked Questions (FAQs) + + + { + 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'; + } + }} + > + + 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. + + + + + ); +} + +export default FAQ; \ No newline at end of file diff --git a/src/Pages/Home.js b/src/Pages/Home.js index 770792b..ffb2281 100644 --- a/src/Pages/Home.js +++ b/src/Pages/Home.js @@ -367,7 +367,6 @@ function Home() { alt="Specialty Coffee 3" /> - ); } diff --git a/src/componets/Navbar.js b/src/componets/Navbar.js index 8f3646e..bdd0f3b 100644 --- a/src/componets/Navbar.js +++ b/src/componets/Navbar.js @@ -308,7 +308,6 @@ function Navbar() { Logo MsCafe -
    {navItems.map((items) => { @@ -422,6 +421,12 @@ function Navbar() { Milkshakes + + FAQ + {/* removed unnecessary links that were already hidden and obsolete. */} @@ -487,6 +492,11 @@ function Navbar() { About + + + FAQ + + Testimonial